From c6ca93d13b63a0d626331e4510fce0a9d41e6794 Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Wed, 14 Mar 2018 16:19:51 +0800 Subject: [PATCH] update resource links for 1.x --- 1.4/{docs.b7d7a62.js => docs.bad12aa.js} | 2 +- 1.4/{docs.050229a.css => docs.f0baae9.css} | 2 +- ...nt-ui.603be0d.js => element-ui.bcf6fb7.js} | 0 1.4/{en-US.4a7ae1c.js => en-US.ee55c7a.js} | 60 ++++++++--------- 1.4/index.html | 4 +- 1.4/manifest.a13ef0f.js | 1 - 1.4/manifest.ca8a0f0.js | 1 + 1.4/{zh-CN.525bfd7.js => zh-CN.600ed9e.js} | 66 +++++++++---------- 8 files changed, 68 insertions(+), 68 deletions(-) rename 1.4/{docs.b7d7a62.js => docs.bad12aa.js} (99%) rename 1.4/{docs.050229a.css => docs.f0baae9.css} (98%) rename 1.4/{element-ui.603be0d.js => element-ui.bcf6fb7.js} (100%) rename 1.4/{en-US.4a7ae1c.js => en-US.ee55c7a.js} (93%) delete mode 100644 1.4/manifest.a13ef0f.js create mode 100644 1.4/manifest.ca8a0f0.js rename 1.4/{zh-CN.525bfd7.js => zh-CN.600ed9e.js} (98%) diff --git a/1.4/docs.b7d7a62.js b/1.4/docs.bad12aa.js similarity index 99% rename from 1.4/docs.b7d7a62.js rename to 1.4/docs.bad12aa.js index 4226f8d30..6d5f89d04 100644 --- a/1.4/docs.b7d7a62.js +++ b/1.4/docs.bad12aa.js @@ -1,2 +1,2 @@ -webpackJsonp([0,4],{0:function(t,e,M){t.exports=M(1)},1:function(t,e,M){(function(t){"use strict";function e(t){return t&&t.__esModule?t:{default:t}}var n=M(2),i=e(n),N=M(3),a=e(N),o=M(22),D=e(o),s=M(23),c=e(s),u=M(647),r=e(u);M(1107);var l=M(1112),g=e(l),z=M(1118),j=e(z),T=M(1124),I=e(T),d=M(1131),h=e(d),O=M(1136),p=e(O),L=M(1141),y=e(L);i.default.use(r.default),i.default.use(D.default),i.default.component("demo-block",g.default),i.default.component("main-footer",j.default),i.default.component("main-header",I.default),i.default.component("side-nav",h.default),i.default.component("footer-nav",p.default);var E=new D.default({mode:"hash",base:t,routes:c.default});E.afterEach(function(t){var e=y.default[t.meta.lang];for(var M in e)if(new RegExp("^"+M,"g").test(t.name))return void(document.title=e[M]);document.title="Element"}),new i.default({render:function(t){return t(a.default)},router:E}).$mount("#app")}).call(e,"/")},3:function(t,e,M){function n(t){M(4)}var i=M(13)(M(14),M(21),n,null,null);t.exports=i.exports},4:function(t,e){},6:function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;eM.parts.length&&(n.parts.length=M.parts.length)}else{for(var a=[],i=0;i-1?o.default:s.default),e.default={name:"app",computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"}},watch:{lang:function(){this.localize()}},methods:{localize:function(){(0,N.use)("zh-CN"===this.lang?o.default:s.default)},renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var t=document.querySelectorAll("h2 a,h3 a"),e=location.href.split("#").splice(0,2).join("#");[].slice.call(t).forEach(function(t){var M=t.getAttribute("href");t.href=e+M})}},goAnchor:function(){if(location.href.match(/#/g).length>1){var t=function(){var t=location.href.match(/#[^#]+$/g);if(!t)return{v:void 0};var e=document.querySelector(t[0]);return e?void setTimeout(function(t){document.documentElement.scrollTop=document.body.scrollTop=e.offsetTop+120},50):{v:void 0}}();if("object"===("undefined"==typeof t?"undefined":i(t)))return t.v}}},mounted:function(){var t=this;this.localize(),this.renderAnchorHref(),this.goAnchor(),setTimeout(function(){var e="zh-CN"===t.lang?"提示":"Notice",M="zh-CN"===t.lang?"Element 1.x 已停止维护，请升级至 2.x":"Element 1.x is no longer maintained. Please upgrade to 2.x";t.$notify({title:e,message:M,duration:0})},3e3)},created:function(){var t=this;window.addEventListener("hashchange",function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,t.renderAnchorHref()):t.goAnchor()})}}},20:function(t,e){"use strict";e.__esModule=!0,e.default={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",year:"",month1:"Jan",month2:"Feb",month3:"Mar",month4:"Apr",month5:"May",month6:"Jun",month7:"Jul",month8:"Aug",month9:"Sep",month10:"Oct",month11:"Nov",month12:"Dec",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:{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"}}}},21:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,M=t._self._c||e;return M("div",{attrs:{id:"app"}},["play"!==t.lang?M("main-header"):t._e(),M("div",{staticClass:"main-cnt"},[M("router-view")],1),"play"!==t.lang?M("main-footer"):t._e()],1)},staticRenderFns:[]}},22:function(t,e){t.exports=VueRouter},23:function(t,e,M){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}e.__esModule=!0;var i=M(24),N=n(i),a=M(25),o=n(a),D={"zh-CN":function(t){return function(e){return M.e(1,function(){return e(M(29)("./"+t+".vue"))})}},"en-US":function(t){return function(e){return M.e(2,function(){return e(M(85)("./"+t+".vue"))})}}},s=function(t,e){return D[t](e)},c={"zh-CN":function(t){return function(e){return M.e(1,function(){return e(M(122)("./zh-CN"+t+".md"))})}},"en-US":function(t){return function(e){return M.e(2,function(){return e(M(392)("./en-US"+t+".md"))})}}},u=function(t,e){return c[t](e)},r=function(t){function e(t,e,n){var i="/changelog"===t.path?s(e,"changelog"):u(e,t.path),N={path:t.path.slice(1),meta:{title:t.title||t.name,description:t.description,lang:e},name:"component-"+(t.title||t.name),component:i.default||i};M[n].children.push(N)}var M=[];return Object.keys(t).forEach(function(n,i){var N=t[n];M.push({path:"/"+n+"/component",redirect:"/"+n+"/component/installation",component:s(n,"component"),children:[]}),N.forEach(function(t){t.href||(t.groups?t.groups.forEach(function(t){t.list.forEach(function(t){e(t,n,i)})}):t.children?t.children.forEach(function(t){e(t,n,i)}):e(t,n,i))})}),M},l=r(N.default),g=function(t){var e={path:"/"+t+"/guide",redirect:"/"+t+"/guide/design",component:s(t,"guide"),children:[{path:"design",name:"guide-design"+t,meta:{lang:t},component:s(t,"design")},{path:"nav",name:"guide-nav"+t,meta:{lang:t},component:s(t,"nav")}]},M={path:"/"+t+"/resource",meta:{lang:t},name:"resource"+t,component:s(t,"resource")},n={path:"/"+t,meta:{lang:t},name:"home"+t,component:s(t,"index")};return[e,M,n]};o.default.forEach(function(t){l=l.concat(g(t.lang))}),l.push({path:"/play",name:"play",component:M(26)});var z=localStorage.getItem("ELEMENT_LANGUAGE")||window.navigator.language||"en-US",j="/en-US";z.indexOf("zh-")!==-1&&(j="/zh-CN"),l=l.concat([{path:"/",redirect:j},{path:"*",redirect:j}]),e.default=l},24:function(t,e){t.exports={"zh-CN":[{name:"开发指南",children:[{path:"/installation",name:"安装"},{path:"/quickstart",name:"快速上手"},{path:"/i18n",name:"国际化"},{path:"/custom-theme",name:"自定义主题"},{path:"/transition",name:"内置过渡动画"}]},{name:"更新日志",path:"/changelog"},{name:"Element React",href:"https://eleme.github.io/element-react/"},{name:"基础组件",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout 布局"},{path:"/color",title:"Color 色彩"},{path:"/typography",title:"Typography 字体"},{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 折叠面板"}]}]}],"en-US":[{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:"Changelog",path:"/changelog"},{name:"Element React",href:"https://eleme.github.io/element-react/"},{name:"Components",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout"},{path:"/color",title:"Color"},{path:"/typography",title:"Typography"},{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"}]}]}]}},25:function(t,e){t.exports=[{lang:"zh-CN"},{lang:"en-US"}]},26:function(t,e,M){var n=M(13)(M(27),M(28),null,null,null);t.exports=n.exports},27:function(t,e){"use strict";e.__esModule=!0,e.default={}},28:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,M=t._self._c||e;return M("div",{staticStyle:{margin:"20px"}})},staticRenderFns:[]}},1107:function(t,e){},1112:function(t,e,M){function n(t){M(1113)}var i=M(13)(M(1115),M(1117),n,null,null);t.exports=i.exports},1113:function(t,e){},1115:function(t,e,M){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}e.__esModule=!0;var i=M(1116),N=n(i),a=M(647);e.default={data:function(){return{hovering:!1,isExpanded:!1}},props:{jsfiddle:Object,default:function(){return{}}},methods:{goJsfiddle:function(){var t=this.jsfiddle,e=t.script,M=t.html,n=t.style,i='\n",N=(e||"").replace(/export default/,"var Main =").trim(),o=i+'\n
\n'+M.trim()+"\n
",D='@import url("//unpkg.com/element-ui@'+a.version+'/lib/theme-default/index.css");\n'+(n||"").trim()+"\n";N=N?N+"\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount('#app')":"new Vue().$mount('#app')";var s={js:N,css:D,html:o,panel_js:3,panel_css:1},c=document.getElementById("fiddle-form")||document.createElement("form");c.innerHTML="";var u=document.createElement("textarea");c.method="post",c.action="https://jsfiddle.net/api/post/library/pure/",c.target="_blank";for(var r in s)u.name=r,u.value=s[r].toString(),c.appendChild(u.cloneNode());c.setAttribute("id","fiddle-form"),c.style.display="none",document.body.appendChild(c),c.submit()}},computed:{lang:function(){return this.$route.path.split("/")[1]},langConfig:function(){var t=this;return N.default.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 this.$el.getElementsByClassName("description").length>0?Math.max(this.$el.getElementsByClassName("description")[0].clientHeight,this.$el.getElementsByClassName("highlight")[0].clientHeight):this.$el.getElementsByClassName("highlight")[0].clientHeight}},watch:{isExpanded:function(t){this.codeArea.style.height=t?this.codeAreaHeight+1+"px":"0"}},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")})}}},1116:function(t,e){t.exports=[{lang:"zh-CN","demo-block":{"hide-text":"隐藏代码","show-text":"显示代码","button-text":"在线运行","tooltip-text":"前往 jsfiddle.net 运行此示例"},footer:{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 jsfiddle.net"},footer:{feedback:"Feedback",contribution:"Contribution",eleme:"Eleme"},header:{guide:"Guide",components:"Component",resource:"Resource"},nav:{dropdown:"Version: "}}]},1117:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,M=t._self._c||e;return M("div",{staticClass:"demo-block",class:[t.blockClass,{hover:t.hovering}],on:{mouseenter:function(e){t.hovering=!0},mouseleave:function(e){t.hovering=!1}}},[t._t("source"),M("div",{staticClass:"meta"},[M("div",{staticClass:"description"},[t._t("default"),M("el-tooltip",{attrs:{effect:"dark",content:t.langConfig["tooltip-text"],placement:"right"}},[M("el-button",{attrs:{size:"small",type:"primary"},on:{click:t.goJsfiddle}},[t._v(t._s(t.langConfig["button-text"]))])],1)],2),t._t("highlight")],2),M("div",{staticClass:"demo-block-control",on:{click:function(e){t.isExpanded=!t.isExpanded}}},[M("transition",{attrs:{name:"arrow-slide"}},[M("i",{class:[t.iconClass,{hovering:t.hovering}]})]),M("transition",{attrs:{name:"text-slide"}},[M("span",{directives:[{name:"show",rawName:"v-show",value:t.hovering,expression:"hovering"}]},[t._v(t._s(t.controlText))])])],1)],2)},staticRenderFns:[]}},1118:function(t,e,M){function n(t){M(1119)}var i=M(13)(M(1121),M(1122),n,null,null);t.exports=i.exports},1119:function(t,e){},1121:function(t,e,M){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}e.__esModule=!0;var i=M(1116),N=n(i),a=M(647);e.default={data:function(){return{version:a.version}},computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},langConfig:function(){var t=this;return N.default.filter(function(e){return e.lang===t.lang})[0].footer}}}},1122:function(t,e,M){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("footer",{staticClass:"footer"},[n("div",{staticClass:"container"},[n("div",{staticClass:"footer-main"},[n("p",{staticClass:"footer-main-title"},[t._v("Element "+t._s(t.version)+" Boron")]),n("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/issues",target:"_blank"}},[t._v(t._s(t.langConfig.feedback))]),n("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING."+t.lang+".md",target:"_blank"}},[t._v(t._s(t.langConfig.contribution))]),n("a",{staticClass:"footer-main-link",attrs:{href:"https://eleme.github.io/element-react/#/"+t.lang+"/quick-start",target:"_blank"}},[t._v("Element-React")])]),n("div",{staticClass:"footer-social"},[n("el-popover",{ref:"weixin",attrs:{placement:"top",width:"120","popper-class":"footer-popover",trigger:"hover"}},[n("div",{staticClass:"footer-popover-title"},[t._v(t._s(t.langConfig.eleme)+" UED")]),n("img",{attrs:{src:M(1123),alt:""}})]),n("i",{directives:[{name:"popover",rawName:"v-popover:weixin",arg:"weixin"}],staticClass:"doc-icon-weixin elementdoc"}),t._m(0)],1)])])},staticRenderFns:[function(){var t=this,e=t.$createElement,M=t._self._c||e;return M("a",{attrs:{href:"//github.com/elemefe",target:"_blank"}},[M("i",{staticClass:"doc-icon-github elementdoc"})])}]}},1123:function(t,e,M){t.exports=M.p+"static/qrcode.a88f522.png"},1124:function(t,e,M){function n(t){M(1125)}var i=M(13)(M(1127),M(1128),n,"data-v-7ad4e6e1",null);t.exports=i.exports},1125:function(t,e){},1127:function(t,e,M){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}e.__esModule=!0;var i=M(1116),N=n(i);e.default={data:function(){return{active:"",isHome:!1,headerStyle:{}}},watch:{"$route.path":{immediate:!0,handler:function(){this.isHome=/^home/.test(this.$route.name),this.headerStyle.backgroundColor="rgba(32, 160, 255, "+(this.isHome?"0":"1")+")"}}},computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},langConfig:function(){var t=this;return N.default.filter(function(e){return e.lang===t.lang})[0].header}},methods:{switchLang:function(t){this.lang!==t&&(localStorage.setItem("ELEMENT_LANGUAGE",t),this.$router.push(this.$route.path.replace(this.lang,t)))}},mounted:function(){function t(t){window.addEventListener("scroll",function(){t()},!1)}var e=this;t(function(){if(e.isHome){var t=200,M=Math.min(document.documentElement.scrollTop||document.body.scrollTop,t)/t;e.$refs.header.style.backgroundColor="rgba(32, 160, 255, "+M+")"}})}}},1128:function(t,e,M){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"headerWrapper"},[n("header",{ref:"header",staticClass:"header",class:{"header-home":t.isHome},style:t.headerStyle},[n("div",{staticClass:"container"},[n("h1",[n("router-link",{attrs:{to:"/"+t.lang}},[n("img",{staticClass:"nav-logo",attrs:{src:M(1129),alt:"element-logo"}}),n("img",{staticClass:"nav-logo-small",attrs:{src:M(1130),alt:"element-logo"}})])],1),n("ul",{staticClass:"nav"},[n("li",{staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:"/"+t.lang+"/guide"}},[t._v(t._s(t.langConfig.guide)+"\n ")])],1),n("li",{staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:"/"+t.lang+"/component"}},[t._v(t._s(t.langConfig.components)+"\n ")])],1),n("li",{staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:"/"+t.lang+"/resource",exact:""}},[t._v(t._s(t.langConfig.resource)+"\n ")])],1),n("li",{staticClass:"nav-item"},[n("span",{staticClass:"nav-lang",class:{active:"zh-CN"===t.lang},on:{click:function(e){t.switchLang("zh-CN")}}},[t._v("\n 中文\n ")]),n("span",[t._v(" / ")]),n("span",{staticClass:"nav-lang",class:{active:"en-US"===t.lang},on:{click:function(e){t.switchLang("en-US")}}},[t._v("\n En\n ")])])])])])])},staticRenderFns:[]}},1129:function(t,e){t.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0NnB4IiBoZWlnaHQ9IjM4cHgiIHZpZXdCb3g9IjAgMCAxNDYgMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwICgzMzc2MikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGUgQ29weTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJ2Mi4yLjAiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLpppbpobUt6buY6K6k5pWI5p6cLWNvcHktMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcwLjAwMDAwMCwgLTE5LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8cGF0aCBkPSJNMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IEMyMTIuMTM1NDQxLDQ1LjE1NzgwNzcgMjEyLjQyMDIzNyw0NS4xNTA1MTA1IDIxMi45NjA5MzcsNDUuMTU3ODA3NyBDMjEzLjUwMTYzNyw0NS4xNjUxMDQ5IDIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTMuNjQ4ODUxLDQ1LjU3MDg1NTYgQzIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTQuNzMzODI4LDQ3LjU2NjU2NTcgMjE1LjAyNDY3Nyw0OC4wNDkxNDM0IEMyMTUuMjgzNjA4LDQ4LjQ3ODcxMzMgMjE0Ljk3MzIyMSw0OC40NzA4NjU0IDIxNC45MDE4MTYsNDguNDYzODQzNiBDMjE0LjkwMjUwNCw0OC40NjI4Nzk4IDIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODg3MDk1LDQ4LjQ2MjE5MTQgQzIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODkzMDExLDQ4LjQ2MzAxNzUgMjE0LjkwMTgxNiw0OC40NjM4NDM2IEMyMTQuODk4NjUyLDQ4LjQ2ODI0OTUgMjE0LjU5NDczMSw0OC40NzgzMDAzIDIxMS40NDc1MjgsNDguNDYyMTkxNCBDMjA3LjA1ODY0MSw0Ny44NjY1NzYyIDIwNi45MDczLDQzLjkxODY2MzggMjA2LjkwNzMsNDMuOTE4NjYzOCBMMjA2LjkwNzMsMzYuODk2ODQ4MyBMMjA0LjQzMDgxMiwzNi44OTY4NDgzIEwyMDQuNDMwODEyLDM0LjI4MDg3NzkgQzIwNC40MzA4MTIsMzMuOTI0Mjc5OCAyMDQuODQzNTYsMzMuODY3ODI5OSAyMDQuODQzNTYsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzEuMjUxODU5NCBDMjA2LjkwNzMsMzAuODI1MTgwOSAyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA3LjMyMDA0OCwzMC43MDExMjg4IEMyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA4Ljc3MjY0NiwzMC4yODU4Nzc5IDIwOS42MTc4MTYsMzAuMDQ0MTA3MiBDMjA5Ljk2NDY2MiwyOS45NDQ5NzU2IDIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMDcxNzAxLDMwLjE1MDM5ODIgQzIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMjA5Mjg0LDMwLjA3NzQyNjQgMjEwLjIwOTI4NCwzMC4zOTI3MTk2IEwyMTAuMjA5Mjg0LDM0LjAwNTUxMjUgTDIxMy43ODY0MzMsMzQuMDA1NTEyNSBDMjE0LjEzNDY1NSwzNC4wMDU1MTI1IDIxNC4xOTkxODEsMzQuNDE4NTYwNSAyMTQuMTk5MTgxLDM0LjQxODU2MDUgTDIxNC4xOTkxODEsMzcuMDM0NTMxIEwyMTAuMjA5Mjg0LDM3LjAzNDUzMSBMMjEwLjIwOTI4NCw0My4wOTI1Njc4IEMyMTAuMjA5Mjg0LDQ0Ljg1MzM5MTMgMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IDIxMi4xMzU0NDEsNDUuMTU3ODA3NyBMMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IFogTTIwMS41NDE1NzYsNDguMTg2ODI2MSBMMTk5LjM0MDI1Myw0OC4xODY4MjYxIEMxOTguOTA4MzgxLDQ4LjE4NjgyNjEgMTk4LjkyNzUwNSw0Ny42MzYwOTU1IDE5OC45Mjc1MDUsNDcuNjM2MDk1NSBMMTk4LjkyNzUwNSwzNy40NDc1Nzg5IEMxOTguOTI3NTA1LDM2LjgyODY5NTQgMTk4LjEwMjAwOSwzNi42MjE0ODMgMTk4LjEwMjAwOSwzNi42MjE0ODMgTDE5My41NjE3ODEsMzYuNjIxNDgzIEMxOTIuODg0NDYyLDM2LjYyMTQ4MyAxOTIuODczODY4LDM3LjQ0NzU3ODkgMTkyLjg3Mzg2OCwzNy40NDc1Nzg5IEwxOTIuODczODY4LDQ3Ljc3Mzc3ODEgQzE5Mi44NzM4NjgsNDguMTc4NzAyOCAxOTIuNDYxMTIsNDguMTg2ODI2MSAxOTIuNDYxMTIsNDguMTg2ODI2MSBMMTkwLjI1OTc5Nyw0OC4xODY4MjYxIEMxODkuNzc1NzgyLDQ4LjE4NjgyNjEgMTg5Ljg0NzA0OSw0Ny42MzYwOTU1IDE4OS44NDcwNDksNDcuNjM2MDk1NSBMMTg5Ljg0NzA0OSwzNC44MzE2MDg1IEMxODkuODQ3MDQ5LDMzLjgwMzExOSAxOTEuMDg1MjkzLDMzLjU5MjQ2NDYgMTkxLjA4NTI5MywzMy41OTI0NjQ2IEwyMDAuNzE2MDgsMzMuNTkyNDY0NiBDMjAxLjY3Nzc4MywzMy41OTI0NjQ2IDIwMS45NTQzMjQsMzQuODMxNjA4NSAyMDEuOTU0MzI0LDM0LjgzMTYwODUgTDIwMS45NTQzMjQsNDcuNDk4NDEyOCBDMjAxLjk1NDMyNCw0OC4yMTg2MzA4IDIwMS41NDE1NzYsNDguMTg2ODI2MSAyMDEuNTQxNTc2LDQ4LjE4NjgyNjEgTDIwMS41NDE1NzYsNDguMTg2ODI2MSBaIE0xODUuODU3MTUyLDQyLjQwNDE1NDYgTDE3Ny4zMjcwMjcsNDIuNDA0MTU0NiBMMTc3LjMyNzAyNyw0NC40NjkzOTQ0IEMxNzcuMzI3MDI3LDQ1LjIxMzU2OTEgMTc4LjI5MDEwNiw0NS40MzMxNzMgMTc4LjI5MDEwNiw0NS40MzMxNzMgTDE4NS4xNjkyMzksNDUuNDMzMTczIEMxODUuNjU4NzU4LDQ1LjQzMzE3MyAxODUuOTk0NzM1LDQ1Ljg0NjIyMSAxODUuOTk0NzM1LDQ1Ljg0NjIyMSBDMTg1Ljk5NDczNSw0NS44NDYyMjEgMTg2LjU5NTAwOCw0Ny4wOTUxNDAzIDE4Ni44MjAyMzEsNDcuNjM2MDk1NSBDMTg3LjA0NTQ1NCw0OC4xNzcwNTA2IDE4Ni40MDc0ODMsNDguMTg2ODI2MSAxODYuNDA3NDgzLDQ4LjE4NjgyNjEgTDE3Ni4wODg3ODMsNDguMTg2ODI2MSBDMTc0Ljg0NjEzNiw0OC4xODY4MjYxIDE3NC41NzUzNzQsNDYuNjcyMzE2OSAxNzQuNTc1Mzc0LDQ2LjY3MjMxNjkgTDE3NC41NzUzNzQsMzQuOTY5MjkxMSBDMTc0LjU3NTM3NCwzNC4yOTYyOTgzIDE3NS41Mzg0NTIsMzQuMDA1NTEyNSAxNzUuNTM4NDUyLDM0LjAwNTUxMjUgTDE4NS44NTcxNTIsMzQuMDA1NTEyNSBDMTg2Ljg5NDExMywzNC4wMDU1MTI1IDE4Ny4wOTUzOTYsMzUuMjQ0NjU2NCAxODcuMDk1Mzk2LDM1LjI0NDY1NjQgTDE4Ny4wOTUzOTYsNDEuMTY1MDEwNyBDMTg3LjA5NTM5Niw0Mi4xNjM4OTgzIDE4NS44NTcxNTIsNDIuNDA0MTU0NiAxODUuODU3MTUyLDQyLjQwNDE1NDYgTDE4NS44NTcxNTIsNDIuNDA0MTU0NiBaIE0xODQuMzQzNzQzLDM3LjQ0NzU3ODkgQzE4NC4zNDM3NDMsMzcuNDQ3NTc4OSAxODQuMjU3MDY2LDM2Ljc1OTE2NTcgMTgzLjY1NTgzLDM2Ljc1OTE2NTcgTDE3OC4wMTQ5NCwzNi43NTkxNjU3IEMxNzguMDE0OTQsMzYuNzU5MTY1NyAxNzcuMzI3MDI3LDM2Ljk0Mzc5ODEgMTc3LjMyNzAyNywzNy40NDc1Nzg5IEwxNzcuMzI3MDI3LDM4Ljk2MjA4ODIgQzE3Ny4zMjcwMjcsMzguOTYyMDg4MiAxNzcuMzQ2ODM5LDM5LjY1MDUwMTQgMTc4LjAxNDk0LDM5LjY1MDUwMTQgTDE4My42NTU4MywzOS42NTA1MDE0IEMxODMuNjU1ODMsMzkuNjUwNTAxNCAxODQuMzQzNzQzLDM5LjQ4MDQ2MzQgMTg0LjM0Mzc0MywzOC44MjQ0MDU1IEwxODQuMzQzNzQzLDM3LjQ0NzU3ODkgTDE4NC4zNDM3NDMsMzcuNDQ3NTc4OSBaIE0xNzEuNDEwOTcyLDQ4LjE4NjgyNjEgTDE2OS4yMDk2NSw0OC4xODY4MjYxIEMxNjguOTE5MjEzLDQ4LjE4NjgyNjEgMTY4Ljc5NjkwMiw0Ny43NzM3NzgxIDE2OC43OTY5MDIsNDcuNzczNzc4MSBMMTY4Ljc5NjkwMiwzNy40NDc1Nzg5IEMxNjguNzk2OTAyLDM2LjgwNzIxNjkgMTY3Ljk3MTQwNiwzNi42MjE0ODMgMTY3Ljk3MTQwNiwzNi42MjE0ODMgTDE2NS45MDc2NjYsMzYuNjIxNDgzIEMxNjUuMzMxODgyLDM2LjYyMTQ4MyAxNjUuMjE5NzUyLDM3LjQ0NzU3ODkgMTY1LjIxOTc1MiwzNy40NDc1Nzg5IEwxNjUuMjE5NzUyLDQ3Ljc3Mzc3ODEgQzE2NS4yMTk3NTIsNDguMTE2MzMyNiAxNjQuODA3MDA0LDQ4LjE4NjgyNjEgMTY0LjgwNzAwNCw0OC4xODY4MjYxIEwxNjIuNjA1NjgyLDQ4LjE4NjgyNjEgQzE2Mi4yOTk1Niw0OC4xODY4MjYxIDE2Mi4xOTI5MzQsNDcuNzczNzc4MSAxNjIuMTkyOTM0LDQ3Ljc3Mzc3ODEgTDE2Mi4xOTI5MzQsMzcuNDQ3NTc4OSBDMTYyLjE5MjkzNCwzNi43OTI4OTc5IDE2MS4zNjc0MzgsMzYuNjIxNDgzIDE2MS4zNjc0MzgsMzYuNjIxNDgzIEwxNTkuMzAzNjk4LDM2LjYyMTQ4MyBDMTU4LjY3Mzk4MiwzNi42MjE0ODMgMTU4LjYxNTc4NCwzNy40NDc1Nzg5IDE1OC42MTU3ODQsMzcuNDQ3NTc4OSBMMTU4LjYxNTc4NCw0Ny43NzM3NzgxIEMxNTguNjE1Nzg0LDQ4LjIxNTczOTUgMTU4LjIwMzAzNiw0OC4xODY4MjYxIDE1OC4yMDMwMzYsNDguMTg2ODI2MSBMMTU2LjAwMTcxNCw0OC4xODY4MjYxIEMxNTUuNTg5Mzc4LDQ4LjE4NjgyNjEgMTU1LjU4ODk2Niw0Ny43NzM3NzgxIDE1NS41ODg5NjYsNDcuNzczNzc4MSBMMTU1LjU4ODk2NiwzNC42OTM5MjU4IEMxNTUuNTg4OTY2LDMzLjkzNjI1ODIgMTU2LjY4OTYyNywzMy41OTI0NjQ2IDE1Ni42ODk2MjcsMzMuNTkyNDY0NiBMMTcwLjQ0Nzg5NCwzMy41OTI0NjQ2IEMxNzEuNTUyMjcsMzMuNTkyNDY0NiAxNzEuODIzNzIsMzQuOTY5MjkxMSAxNzEuODIzNzIsMzQuOTY5MjkxMSBMMTcxLjgyMzcyLDQ3Ljc3Mzc3ODEgQzE3MS44MjM3Miw0OC4yNDkzMzQgMTcxLjQxMDk3Miw0OC4xODY4MjYxIDE3MS40MTA5NzIsNDguMTg2ODI2MSBMMTcxLjQxMDk3Miw0OC4xODY4MjYxIFogTTE1MS40NjE0ODYsNDIuNDA0MTU0NiBMMTQyLjkzMTM2LDQyLjQwNDE1NDYgTDE0Mi45MzEzNiw0NC40NjkzOTQ0IEMxNDIuOTMxMzYsNDUuMjEzNTY5MSAxNDMuODk0NDM5LDQ1LjQzMzE3MyAxNDMuODk0NDM5LDQ1LjQzMzE3MyBMMTUwLjc3MzU3Miw0NS40MzMxNzMgQzE1MS4yNjMwOTIsNDUuNDMzMTczIDE1MS41OTkwNjgsNDUuODQ2MjIxIDE1MS41OTkwNjgsNDUuODQ2MjIxIEMxNTEuNTk5MDY4LDQ1Ljg0NjIyMSAxNTIuMTk5MjA0LDQ3LjA5NTE0MDMgMTUyLjQyNDU2NCw0Ny42MzYwOTU1IEMxNTIuNjQ5Nzg3LDQ4LjE3NzA1MDYgMTUyLjAxMTgxNiw0OC4xODY4MjYxIDE1Mi4wMTE4MTYsNDguMTg2ODI2MSBMMTQxLjY5MzExNyw0OC4xODY4MjYxIEMxNDAuNDUwNDcsNDguMTg2ODI2MSAxNDAuMTc5NzA3LDQ2LjY3MjMxNjkgMTQwLjE3OTcwNyw0Ni42NzIzMTY5IEwxNDAuMTc5NzA3LDM0Ljk2OTI5MTEgQzE0MC4xNzk3MDcsMzQuMjk2Mjk4MyAxNDEuMTQyNzg2LDM0LjAwNTUxMjUgMTQxLjE0Mjc4NiwzNC4wMDU1MTI1IEwxNTEuNDYxNDg2LDM0LjAwNTUxMjUgQzE1Mi40OTg0NDYsMzQuMDA1NTEyNSAxNTIuNjk5NzMsMzUuMjQ0NjU2NCAxNTIuNjk5NzMsMzUuMjQ0NjU2NCBMMTUyLjY5OTczLDQxLjE2NTAxMDcgQzE1Mi42OTk3Myw0Mi4xNjM4OTgzIDE1MS40NjE0ODYsNDIuNDA0MTU0NiAxNTEuNDYxNDg2LDQyLjQwNDE1NDYgTDE1MS40NjE0ODYsNDIuNDA0MTU0NiBaIE0xNDkuOTQ4MDc2LDM3LjQ0NzU3ODkgQzE0OS45NDgwNzYsMzcuNDQ3NTc4OSAxNDkuODYxMzk5LDM2Ljc1OTE2NTcgMTQ5LjI2MDE2MywzNi43NTkxNjU3IEwxNDMuNjE5Mjc0LDM2Ljc1OTE2NTcgQzE0My42MTkyNzQsMzYuNzU5MTY1NyAxNDIuOTMxMzYsMzYuOTQzNzk4MSAxNDIuOTMxMzYsMzcuNDQ3NTc4OSBMMTQyLjkzMTM2LDM4Ljk2MjA4ODIgQzE0Mi45MzEzNiwzOC45NjIwODgyIDE0Mi45NTExNzIsMzkuNjUwNTAxNCAxNDMuNjE5Mjc0LDM5LjY1MDUwMTQgTDE0OS4yNjAxNjMsMzkuNjUwNTAxNCBDMTQ5LjI2MDE2MywzOS42NTA1MDE0IDE0OS45NDgwNzYsMzkuNDgwNDYzNCAxNDkuOTQ4MDc2LDM4LjgyNDQwNTUgTDE0OS45NDgwNzYsMzcuNDQ3NTc4OSBMMTQ5Ljk0ODA3NiwzNy40NDc1Nzg5IFogTTEzOC4xMTU5NjcsNDguMTg2ODI2MSBMMTMyLjg4NzgyNiw0OC4xODY4MjYxIEMxMzIuODg3ODI2LDQ4LjE4NjgyNjEgMTI5LjA2MTkyNyw0OC4wMDYxODY1IDEyOC43NjAzNDYsNDQuMTk0MDI5MSBDMTI4Ljc0ODIzOSw0MC4yNzkwMjI4IDEyOC43NjAzNDYsMjguMDg1MTU4MyAxMjguNzYwMzQ2LDI4LjA4NTE1ODMgTDEzMS4yMzY4MzQsMjguMDg1MTU4MyBDMTMxLjIzNjgzNCwyOC4wODUxNTgzIDEzMi4wNjIzMywyOC4wNzAxNTA5IDEzMi4wNjIzMywyOC45MTEyNTQzIEwxMzIuMDYyMzMsNDMuMzY3OTMzMSBDMTMyLjA2MjMzLDQzLjM2NzkzMzEgMTMyLjM1MDAxNSw0NC41NjM4NDQ3IDEzMy45ODg0ODcsNDUuMDIwMTI1IEMxMzUuODM5OCw0NS4wMTA3NjI2IDEzNi4xODk4MSw0NS4wMjAxMjUgMTM2LjE4OTgxLDQ1LjAyMDEyNSBDMTM2LjE4OTgxLDQ1LjAyMDEyNSAxMzYuOTA3MzAzLDQ0Ljc5MDE5NSAxMzcuNDI4MDU0LDQ1LjcwODUzODMgQzEzNy45NDg4MDQsNDYuNjI2ODgxNiAxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjUyODcxNSw0Ny42MzYwOTU1IEMxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjYxMTU0LDQ4LjE4NjgyNjEgMTM4LjExNTk2Nyw0OC4xODY4MjYxIEwxMzguMTE1OTY3LDQ4LjE4NjgyNjEgWiBNMTExLjU2MjUxMyw0Ny4zNjA3MzAyIEwxMTEuNTYyNTEzLDI5LjE4NjYxOTYgQzExMS41NjI1MTMsMjguMzgwNzYzIDExMi4yNTA0MjYsMjguMjIyODQxIDExMi4yNTA0MjYsMjguMjIyODQxIEwxMjUuMTgzMTk3LDI4LjIyMjg0MSBDMTI1LjkwNjQ2OSwyOC4yMjI4NDEgMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS41OTU5NDUsMjkuMDQ4OTM2OSBDMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS4xOTI4MjcsMzAuMTY2MDk0IDEyNC45MDgwMzEsMzAuNzAxMTI4OCBDMTI0LjYyMzIzNSwzMS4yMzYxNjM2IDEyNC4wODI1MzUsMzEuMjUxODU5NCAxMjQuMDgyNTM1LDMxLjI1MTg1OTQgTDExNS42ODk5OTMsMzEuMjUxODU5NCBDMTE0LjkwODUyMywzMS4yNTE4NTk0IDExNC44NjQ0OTcsMzEuOTQwMjcyNyAxMTQuODY0NDk3LDMxLjk0MDI3MjcgTDExNC44NjQ0OTcsMzYuNDgzODAwMyBMMTI0LjM1NzcwMSwzNi40ODM4MDAzIEMxMjQuOTE0NjM1LDM2LjQ4MzgwMDMgMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyNC42MzI4NjYsMzcuMTcyMjEzNiBDMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyMy45MjE4MzksMzguNjg4OTI1OCAxMjMuNjY5Nzg3LDM5LjA5OTc3MDggQzEyMy40MTc3MzYsMzkuNTEwNjE1OSAxMjIuODQ0MjkxLDM5LjUxMjgxODggMTIyLjg0NDI5MSwzOS41MTI4MTg4IEwxMTQuODY0NDk3LDM5LjUxMjgxODggTDExNC44NjQ0OTcsNDQuMzMxNzExNyBDMTE0Ljg2NDQ5Nyw0NC45ODg0NTggMTE1LjU1MjQxLDQ1LjE1NzgwNzcgMTE1LjU1MjQxLDQ1LjE1NzgwNzcgTDEyNC4zNTc3MDEsNDUuMTU3ODA3NyBDMTI0Ljk5NjIyMiw0NS4xNTc4MDc3IDEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjUuMTgzMTk3LDQ1LjU3MDg1NTYgQzEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjYuMDU1MTk2LDQ2LjkzMjM5OTQgMTI2LjQyMTQ0MSw0Ny40OTg0MTI4IEMxMjYuNzg3ODIzLDQ4LjA2NDQyNjIgMTI2LjI4Mzg1OCw0OC4xODY4MjYxIDEyNi4yODM4NTgsNDguMTg2ODI2MSBMMTEyLjM4ODAwOSw0OC4xODY4MjYxIEMxMTEuODE0MTUxLDQ4LjE4NjgyNjEgMTExLjU2MjUxMyw0Ny4zNjA3MzAyIDExMS41NjI1MTMsNDcuMzYwNzMwMiBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"; +webpackJsonp([0,4],{0:function(t,e,M){t.exports=M(1)},1:function(t,e,M){(function(t){"use strict";function e(t){return t&&t.__esModule?t:{default:t}}var n=M(2),i=e(n),N=M(3),a=e(N),o=M(22),D=e(o),s=M(23),c=e(s),u=M(647),r=e(u);M(1107);var l=M(1112),g=e(l),z=M(1118),j=e(z),T=M(1124),I=e(T),d=M(1131),h=e(d),O=M(1136),p=e(O),L=M(1141),y=e(L);i.default.use(r.default),i.default.use(D.default),i.default.component("demo-block",g.default),i.default.component("main-footer",j.default),i.default.component("main-header",I.default),i.default.component("side-nav",h.default),i.default.component("footer-nav",p.default);var E=new D.default({mode:"hash",base:t,routes:c.default});E.afterEach(function(t){var e=y.default[t.meta.lang];for(var M in e)if(new RegExp("^"+M,"g").test(t.name))return void(document.title=e[M]);document.title="Element"}),new i.default({render:function(t){return t(a.default)},router:E}).$mount("#app")}).call(e,"/")},3:function(t,e,M){function n(t){M(4)}var i=M(13)(M(14),M(21),n,null,null);t.exports=i.exports},4:function(t,e){},6:function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;eM.parts.length&&(n.parts.length=M.parts.length)}else{for(var a=[],i=0;i-1?o.default:s.default),e.default={name:"app",computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"}},watch:{lang:function(){this.localize()}},methods:{localize:function(){(0,N.use)("zh-CN"===this.lang?o.default:s.default)},renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var t=document.querySelectorAll("h2 a,h3 a"),e=location.href.split("#").splice(0,2).join("#");[].slice.call(t).forEach(function(t){var M=t.getAttribute("href");t.href=e+M})}},goAnchor:function(){if(location.href.match(/#/g).length>1){var t=function(){var t=location.href.match(/#[^#]+$/g);if(!t)return{v:void 0};var e=document.querySelector(t[0]);return e?void setTimeout(function(t){document.documentElement.scrollTop=document.body.scrollTop=e.offsetTop+120},50):{v:void 0}}();if("object"===("undefined"==typeof t?"undefined":i(t)))return t.v}}},mounted:function(){var t=this;this.localize(),this.renderAnchorHref(),this.goAnchor(),setTimeout(function(){var e="zh-CN"===t.lang?"提示":"Notice",M="zh-CN"===t.lang?"Element 1.x 已停止维护，请升级至 2.x":"Element 1.x is no longer maintained. Please upgrade to 2.x";t.$notify({title:e,message:M,duration:0})},3e3)},created:function(){var t=this;window.addEventListener("hashchange",function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,t.renderAnchorHref()):t.goAnchor()})}}},20:function(t,e){"use strict";e.__esModule=!0,e.default={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",year:"",month1:"Jan",month2:"Feb",month3:"Mar",month4:"Apr",month5:"May",month6:"Jun",month7:"Jul",month8:"Aug",month9:"Sep",month10:"Oct",month11:"Nov",month12:"Dec",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:{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"}}}},21:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,M=t._self._c||e;return M("div",{attrs:{id:"app"}},["play"!==t.lang?M("main-header"):t._e(),M("div",{staticClass:"main-cnt"},[M("router-view")],1),"play"!==t.lang?M("main-footer"):t._e()],1)},staticRenderFns:[]}},22:function(t,e){t.exports=VueRouter},23:function(t,e,M){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}e.__esModule=!0;var i=M(24),N=n(i),a=M(25),o=n(a),D={"zh-CN":function(t){return function(e){return M.e(1,function(){return e(M(29)("./"+t+".vue"))})}},"en-US":function(t){return function(e){return M.e(2,function(){return e(M(85)("./"+t+".vue"))})}}},s=function(t,e){return D[t](e)},c={"zh-CN":function(t){return function(e){return M.e(1,function(){return e(M(122)("./zh-CN"+t+".md"))})}},"en-US":function(t){return function(e){return M.e(2,function(){return e(M(392)("./en-US"+t+".md"))})}}},u=function(t,e){return c[t](e)},r=function(t){function e(t,e,n){var i="/changelog"===t.path?s(e,"changelog"):u(e,t.path),N={path:t.path.slice(1),meta:{title:t.title||t.name,description:t.description,lang:e},name:"component-"+(t.title||t.name),component:i.default||i};M[n].children.push(N)}var M=[];return Object.keys(t).forEach(function(n,i){var N=t[n];M.push({path:"/"+n+"/component",redirect:"/"+n+"/component/installation",component:s(n,"component"),children:[]}),N.forEach(function(t){t.href||(t.groups?t.groups.forEach(function(t){t.list.forEach(function(t){e(t,n,i)})}):t.children?t.children.forEach(function(t){e(t,n,i)}):e(t,n,i))})}),M},l=r(N.default),g=function(t){var e={path:"/"+t+"/guide",redirect:"/"+t+"/guide/design",component:s(t,"guide"),children:[{path:"design",name:"guide-design"+t,meta:{lang:t},component:s(t,"design")},{path:"nav",name:"guide-nav"+t,meta:{lang:t},component:s(t,"nav")}]},M={path:"/"+t+"/resource",meta:{lang:t},name:"resource"+t,component:s(t,"resource")},n={path:"/"+t,meta:{lang:t},name:"home"+t,component:s(t,"index")};return[e,M,n]};o.default.forEach(function(t){l=l.concat(g(t.lang))}),l.push({path:"/play",name:"play",component:M(26)});var z=localStorage.getItem("ELEMENT_LANGUAGE")||window.navigator.language||"en-US",j="/en-US";z.indexOf("zh-")!==-1&&(j="/zh-CN"),l=l.concat([{path:"/",redirect:j},{path:"*",redirect:j}]),e.default=l},24:function(t,e){t.exports={"zh-CN":[{name:"开发指南",children:[{path:"/installation",name:"安装"},{path:"/quickstart",name:"快速上手"},{path:"/i18n",name:"国际化"},{path:"/custom-theme",name:"自定义主题"},{path:"/transition",name:"内置过渡动画"}]},{name:"更新日志",path:"/changelog"},{name:"Element React",href:"https://eleme.github.io/element-react/"},{name:"基础组件",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout 布局"},{path:"/color",title:"Color 色彩"},{path:"/typography",title:"Typography 字体"},{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 折叠面板"}]}]}],"en-US":[{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:"Changelog",path:"/changelog"},{name:"Element React",href:"https://eleme.github.io/element-react/"},{name:"Components",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout"},{path:"/color",title:"Color"},{path:"/typography",title:"Typography"},{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"}]}]}]}},25:function(t,e){t.exports=[{lang:"zh-CN"},{lang:"en-US"}]},26:function(t,e,M){var n=M(13)(M(27),M(28),null,null,null);t.exports=n.exports},27:function(t,e){"use strict";e.__esModule=!0,e.default={}},28:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,M=t._self._c||e;return M("div",{staticStyle:{margin:"20px"}})},staticRenderFns:[]}},1107:function(t,e){},1112:function(t,e,M){function n(t){M(1113)}var i=M(13)(M(1115),M(1117),n,null,null);t.exports=i.exports},1113:function(t,e){},1115:function(t,e,M){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}e.__esModule=!0;var i=M(1116),N=n(i),a=M(647);e.default={data:function(){return{hovering:!1,isExpanded:!1}},props:{jsfiddle:Object,default:function(){return{}}},methods:{goJsfiddle:function(){var t=this.jsfiddle,e=t.script,M=t.html,n=t.style,i='\n",N=(e||"").replace(/export default/,"var Main =").trim(),o=i+'\n
\n'+M.trim()+"\n
",D='@import url("//unpkg.com/element-ui@'+a.version+'/lib/theme-default/index.css");\n'+(n||"").trim()+"\n";N=N?N+"\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount('#app')":"new Vue().$mount('#app')";var s={js:N,css:D,html:o,panel_js:3,panel_css:1},c=document.getElementById("fiddle-form")||document.createElement("form");c.innerHTML="";var u=document.createElement("textarea");c.method="post",c.action="https://jsfiddle.net/api/post/library/pure/",c.target="_blank";for(var r in s)u.name=r,u.value=s[r].toString(),c.appendChild(u.cloneNode());c.setAttribute("id","fiddle-form"),c.style.display="none",document.body.appendChild(c),c.submit()}},computed:{lang:function(){return this.$route.path.split("/")[1]},langConfig:function(){var t=this;return N.default.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 this.$el.getElementsByClassName("description").length>0?Math.max(this.$el.getElementsByClassName("description")[0].clientHeight,this.$el.getElementsByClassName("highlight")[0].clientHeight):this.$el.getElementsByClassName("highlight")[0].clientHeight}},watch:{isExpanded:function(t){this.codeArea.style.height=t?this.codeAreaHeight+1+"px":"0"}},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")})}}},1116:function(t,e){t.exports=[{lang:"zh-CN","demo-block":{"hide-text":"隐藏代码","show-text":"显示代码","button-text":"在线运行","tooltip-text":"前往 jsfiddle.net 运行此示例"},footer:{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 jsfiddle.net"},footer:{feedback:"Feedback",contribution:"Contribution",eleme:"Eleme"},header:{guide:"Guide",components:"Component",resource:"Resource"},nav:{dropdown:"Version: "}}]},1117:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,M=t._self._c||e;return M("div",{staticClass:"demo-block",class:[t.blockClass,{hover:t.hovering}],on:{mouseenter:function(e){t.hovering=!0},mouseleave:function(e){t.hovering=!1}}},[t._t("source"),M("div",{staticClass:"meta"},[M("div",{staticClass:"description"},[t._t("default"),M("el-tooltip",{attrs:{effect:"dark",content:t.langConfig["tooltip-text"],placement:"right"}},[M("el-button",{attrs:{size:"small",type:"primary"},on:{click:t.goJsfiddle}},[t._v(t._s(t.langConfig["button-text"]))])],1)],2),t._t("highlight")],2),M("div",{staticClass:"demo-block-control",on:{click:function(e){t.isExpanded=!t.isExpanded}}},[M("transition",{attrs:{name:"arrow-slide"}},[M("i",{class:[t.iconClass,{hovering:t.hovering}]})]),M("transition",{attrs:{name:"text-slide"}},[M("span",{directives:[{name:"show",rawName:"v-show",value:t.hovering,expression:"hovering"}]},[t._v(t._s(t.controlText))])])],1)],2)},staticRenderFns:[]}},1118:function(t,e,M){function n(t){M(1119)}var i=M(13)(M(1121),M(1122),n,null,null);t.exports=i.exports},1119:function(t,e){},1121:function(t,e,M){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}e.__esModule=!0;var i=M(1116),N=n(i),a=M(647);e.default={data:function(){return{version:a.version}},computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},langConfig:function(){var t=this;return N.default.filter(function(e){return e.lang===t.lang})[0].footer}}}},1122:function(t,e,M){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("footer",{staticClass:"footer"},[n("div",{staticClass:"container"},[n("div",{staticClass:"footer-main"},[n("p",{staticClass:"footer-main-title"},[t._v("Element "+t._s(t.version)+" Boron")]),n("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/issues",target:"_blank"}},[t._v(t._s(t.langConfig.feedback))]),n("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING."+t.lang+".md",target:"_blank"}},[t._v(t._s(t.langConfig.contribution))]),n("a",{staticClass:"footer-main-link",attrs:{href:"https://eleme.github.io/element-react/#/"+t.lang+"/quick-start",target:"_blank"}},[t._v("Element-React")])]),n("div",{staticClass:"footer-social"},[n("el-popover",{ref:"weixin",attrs:{placement:"top",width:"120","popper-class":"footer-popover",trigger:"hover"}},[n("div",{staticClass:"footer-popover-title"},[t._v(t._s(t.langConfig.eleme)+" UED")]),n("img",{attrs:{src:M(1123),alt:""}})]),n("i",{directives:[{name:"popover",rawName:"v-popover:weixin",arg:"weixin"}],staticClass:"doc-icon-weixin elementdoc"}),t._m(0)],1)])])},staticRenderFns:[function(){var t=this,e=t.$createElement,M=t._self._c||e;return M("a",{attrs:{href:"//github.com/elemefe",target:"_blank"}},[M("i",{staticClass:"doc-icon-github elementdoc"})])}]}},1123:function(t,e,M){t.exports=M.p+"static/qrcode.a88f522.png"},1124:function(t,e,M){function n(t){M(1125)}var i=M(13)(M(1127),M(1128),n,"data-v-5797d63d",null);t.exports=i.exports},1125:function(t,e){},1127:function(t,e,M){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}e.__esModule=!0;var i=M(1116),N=n(i);e.default={data:function(){return{active:"",isHome:!1,headerStyle:{}}},watch:{"$route.path":{immediate:!0,handler:function(){this.isHome=/^home/.test(this.$route.name),this.headerStyle.backgroundColor="rgba(32, 160, 255, "+(this.isHome?"0":"1")+")"}}},computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},langConfig:function(){var t=this;return N.default.filter(function(e){return e.lang===t.lang})[0].header}},methods:{switchLang:function(t){this.lang!==t&&(localStorage.setItem("ELEMENT_LANGUAGE",t),this.$router.push(this.$route.path.replace(this.lang,t)))}},mounted:function(){function t(t){window.addEventListener("scroll",function(){t()},!1)}var e=this;t(function(){if(e.isHome){var t=200,M=Math.min(document.documentElement.scrollTop||document.body.scrollTop,t)/t;e.$refs.header.style.backgroundColor="rgba(32, 160, 255, "+M+")"}})}}},1128:function(t,e,M){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"headerWrapper"},[n("header",{ref:"header",staticClass:"header",class:{"header-home":t.isHome},style:t.headerStyle},[n("div",{staticClass:"container"},[n("h1",[n("router-link",{attrs:{to:"/"+t.lang}},[n("img",{staticClass:"nav-logo",attrs:{src:M(1129),alt:"element-logo"}}),n("img",{staticClass:"nav-logo-small",attrs:{src:M(1130),alt:"element-logo"}})])],1),n("ul",{staticClass:"nav"},[n("li",{staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:"/"+t.lang+"/guide"}},[t._v(t._s(t.langConfig.guide)+"\n ")])],1),n("li",{staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:"/"+t.lang+"/component"}},[t._v(t._s(t.langConfig.components)+"\n ")])],1),n("li",{staticClass:"nav-item"},[n("router-link",{attrs:{"active-class":"active",to:"/"+t.lang+"/resource",exact:""}},[t._v(t._s(t.langConfig.resource)+"\n ")])],1),n("li",{staticClass:"nav-item"},[n("span",{staticClass:"nav-lang",class:{active:"zh-CN"===t.lang},on:{click:function(e){t.switchLang("zh-CN")}}},[t._v("\n 中文\n ")]),n("span",[t._v(" / ")]),n("span",{staticClass:"nav-lang",class:{active:"en-US"===t.lang},on:{click:function(e){t.switchLang("en-US")}}},[t._v("\n En\n ")])])])])])])},staticRenderFns:[]}},1129:function(t,e){t.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0NnB4IiBoZWlnaHQ9IjM4cHgiIHZpZXdCb3g9IjAgMCAxNDYgMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwICgzMzc2MikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGUgQ29weTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJ2Mi4yLjAiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLpppbpobUt6buY6K6k5pWI5p6cLWNvcHktMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcwLjAwMDAwMCwgLTE5LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8cGF0aCBkPSJNMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IEMyMTIuMTM1NDQxLDQ1LjE1NzgwNzcgMjEyLjQyMDIzNyw0NS4xNTA1MTA1IDIxMi45NjA5MzcsNDUuMTU3ODA3NyBDMjEzLjUwMTYzNyw0NS4xNjUxMDQ5IDIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTMuNjQ4ODUxLDQ1LjU3MDg1NTYgQzIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTQuNzMzODI4LDQ3LjU2NjU2NTcgMjE1LjAyNDY3Nyw0OC4wNDkxNDM0IEMyMTUuMjgzNjA4LDQ4LjQ3ODcxMzMgMjE0Ljk3MzIyMSw0OC40NzA4NjU0IDIxNC45MDE4MTYsNDguNDYzODQzNiBDMjE0LjkwMjUwNCw0OC40NjI4Nzk4IDIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODg3MDk1LDQ4LjQ2MjE5MTQgQzIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODkzMDExLDQ4LjQ2MzAxNzUgMjE0LjkwMTgxNiw0OC40NjM4NDM2IEMyMTQuODk4NjUyLDQ4LjQ2ODI0OTUgMjE0LjU5NDczMSw0OC40NzgzMDAzIDIxMS40NDc1MjgsNDguNDYyMTkxNCBDMjA3LjA1ODY0MSw0Ny44NjY1NzYyIDIwNi45MDczLDQzLjkxODY2MzggMjA2LjkwNzMsNDMuOTE4NjYzOCBMMjA2LjkwNzMsMzYuODk2ODQ4MyBMMjA0LjQzMDgxMiwzNi44OTY4NDgzIEwyMDQuNDMwODEyLDM0LjI4MDg3NzkgQzIwNC40MzA4MTIsMzMuOTI0Mjc5OCAyMDQuODQzNTYsMzMuODY3ODI5OSAyMDQuODQzNTYsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzEuMjUxODU5NCBDMjA2LjkwNzMsMzAuODI1MTgwOSAyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA3LjMyMDA0OCwzMC43MDExMjg4IEMyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA4Ljc3MjY0NiwzMC4yODU4Nzc5IDIwOS42MTc4MTYsMzAuMDQ0MTA3MiBDMjA5Ljk2NDY2MiwyOS45NDQ5NzU2IDIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMDcxNzAxLDMwLjE1MDM5ODIgQzIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMjA5Mjg0LDMwLjA3NzQyNjQgMjEwLjIwOTI4NCwzMC4zOTI3MTk2IEwyMTAuMjA5Mjg0LDM0LjAwNTUxMjUgTDIxMy43ODY0MzMsMzQuMDA1NTEyNSBDMjE0LjEzNDY1NSwzNC4wMDU1MTI1IDIxNC4xOTkxODEsMzQuNDE4NTYwNSAyMTQuMTk5MTgxLDM0LjQxODU2MDUgTDIxNC4xOTkxODEsMzcuMDM0NTMxIEwyMTAuMjA5Mjg0LDM3LjAzNDUzMSBMMjEwLjIwOTI4NCw0My4wOTI1Njc4IEMyMTAuMjA5Mjg0LDQ0Ljg1MzM5MTMgMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IDIxMi4xMzU0NDEsNDUuMTU3ODA3NyBMMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IFogTTIwMS41NDE1NzYsNDguMTg2ODI2MSBMMTk5LjM0MDI1Myw0OC4xODY4MjYxIEMxOTguOTA4MzgxLDQ4LjE4NjgyNjEgMTk4LjkyNzUwNSw0Ny42MzYwOTU1IDE5OC45Mjc1MDUsNDcuNjM2MDk1NSBMMTk4LjkyNzUwNSwzNy40NDc1Nzg5IEMxOTguOTI3NTA1LDM2LjgyODY5NTQgMTk4LjEwMjAwOSwzNi42MjE0ODMgMTk4LjEwMjAwOSwzNi42MjE0ODMgTDE5My41NjE3ODEsMzYuNjIxNDgzIEMxOTIuODg0NDYyLDM2LjYyMTQ4MyAxOTIuODczODY4LDM3LjQ0NzU3ODkgMTkyLjg3Mzg2OCwzNy40NDc1Nzg5IEwxOTIuODczODY4LDQ3Ljc3Mzc3ODEgQzE5Mi44NzM4NjgsNDguMTc4NzAyOCAxOTIuNDYxMTIsNDguMTg2ODI2MSAxOTIuNDYxMTIsNDguMTg2ODI2MSBMMTkwLjI1OTc5Nyw0OC4xODY4MjYxIEMxODkuNzc1NzgyLDQ4LjE4NjgyNjEgMTg5Ljg0NzA0OSw0Ny42MzYwOTU1IDE4OS44NDcwNDksNDcuNjM2MDk1NSBMMTg5Ljg0NzA0OSwzNC44MzE2MDg1IEMxODkuODQ3MDQ5LDMzLjgwMzExOSAxOTEuMDg1MjkzLDMzLjU5MjQ2NDYgMTkxLjA4NTI5MywzMy41OTI0NjQ2IEwyMDAuNzE2MDgsMzMuNTkyNDY0NiBDMjAxLjY3Nzc4MywzMy41OTI0NjQ2IDIwMS45NTQzMjQsMzQuODMxNjA4NSAyMDEuOTU0MzI0LDM0LjgzMTYwODUgTDIwMS45NTQzMjQsNDcuNDk4NDEyOCBDMjAxLjk1NDMyNCw0OC4yMTg2MzA4IDIwMS41NDE1NzYsNDguMTg2ODI2MSAyMDEuNTQxNTc2LDQ4LjE4NjgyNjEgTDIwMS41NDE1NzYsNDguMTg2ODI2MSBaIE0xODUuODU3MTUyLDQyLjQwNDE1NDYgTDE3Ny4zMjcwMjcsNDIuNDA0MTU0NiBMMTc3LjMyNzAyNyw0NC40NjkzOTQ0IEMxNzcuMzI3MDI3LDQ1LjIxMzU2OTEgMTc4LjI5MDEwNiw0NS40MzMxNzMgMTc4LjI5MDEwNiw0NS40MzMxNzMgTDE4NS4xNjkyMzksNDUuNDMzMTczIEMxODUuNjU4NzU4LDQ1LjQzMzE3MyAxODUuOTk0NzM1LDQ1Ljg0NjIyMSAxODUuOTk0NzM1LDQ1Ljg0NjIyMSBDMTg1Ljk5NDczNSw0NS44NDYyMjEgMTg2LjU5NTAwOCw0Ny4wOTUxNDAzIDE4Ni44MjAyMzEsNDcuNjM2MDk1NSBDMTg3LjA0NTQ1NCw0OC4xNzcwNTA2IDE4Ni40MDc0ODMsNDguMTg2ODI2MSAxODYuNDA3NDgzLDQ4LjE4NjgyNjEgTDE3Ni4wODg3ODMsNDguMTg2ODI2MSBDMTc0Ljg0NjEzNiw0OC4xODY4MjYxIDE3NC41NzUzNzQsNDYuNjcyMzE2OSAxNzQuNTc1Mzc0LDQ2LjY3MjMxNjkgTDE3NC41NzUzNzQsMzQuOTY5MjkxMSBDMTc0LjU3NTM3NCwzNC4yOTYyOTgzIDE3NS41Mzg0NTIsMzQuMDA1NTEyNSAxNzUuNTM4NDUyLDM0LjAwNTUxMjUgTDE4NS44NTcxNTIsMzQuMDA1NTEyNSBDMTg2Ljg5NDExMywzNC4wMDU1MTI1IDE4Ny4wOTUzOTYsMzUuMjQ0NjU2NCAxODcuMDk1Mzk2LDM1LjI0NDY1NjQgTDE4Ny4wOTUzOTYsNDEuMTY1MDEwNyBDMTg3LjA5NTM5Niw0Mi4xNjM4OTgzIDE4NS44NTcxNTIsNDIuNDA0MTU0NiAxODUuODU3MTUyLDQyLjQwNDE1NDYgTDE4NS44NTcxNTIsNDIuNDA0MTU0NiBaIE0xODQuMzQzNzQzLDM3LjQ0NzU3ODkgQzE4NC4zNDM3NDMsMzcuNDQ3NTc4OSAxODQuMjU3MDY2LDM2Ljc1OTE2NTcgMTgzLjY1NTgzLDM2Ljc1OTE2NTcgTDE3OC4wMTQ5NCwzNi43NTkxNjU3IEMxNzguMDE0OTQsMzYuNzU5MTY1NyAxNzcuMzI3MDI3LDM2Ljk0Mzc5ODEgMTc3LjMyNzAyNywzNy40NDc1Nzg5IEwxNzcuMzI3MDI3LDM4Ljk2MjA4ODIgQzE3Ny4zMjcwMjcsMzguOTYyMDg4MiAxNzcuMzQ2ODM5LDM5LjY1MDUwMTQgMTc4LjAxNDk0LDM5LjY1MDUwMTQgTDE4My42NTU4MywzOS42NTA1MDE0IEMxODMuNjU1ODMsMzkuNjUwNTAxNCAxODQuMzQzNzQzLDM5LjQ4MDQ2MzQgMTg0LjM0Mzc0MywzOC44MjQ0MDU1IEwxODQuMzQzNzQzLDM3LjQ0NzU3ODkgTDE4NC4zNDM3NDMsMzcuNDQ3NTc4OSBaIE0xNzEuNDEwOTcyLDQ4LjE4NjgyNjEgTDE2OS4yMDk2NSw0OC4xODY4MjYxIEMxNjguOTE5MjEzLDQ4LjE4NjgyNjEgMTY4Ljc5NjkwMiw0Ny43NzM3NzgxIDE2OC43OTY5MDIsNDcuNzczNzc4MSBMMTY4Ljc5NjkwMiwzNy40NDc1Nzg5IEMxNjguNzk2OTAyLDM2LjgwNzIxNjkgMTY3Ljk3MTQwNiwzNi42MjE0ODMgMTY3Ljk3MTQwNiwzNi42MjE0ODMgTDE2NS45MDc2NjYsMzYuNjIxNDgzIEMxNjUuMzMxODgyLDM2LjYyMTQ4MyAxNjUuMjE5NzUyLDM3LjQ0NzU3ODkgMTY1LjIxOTc1MiwzNy40NDc1Nzg5IEwxNjUuMjE5NzUyLDQ3Ljc3Mzc3ODEgQzE2NS4yMTk3NTIsNDguMTE2MzMyNiAxNjQuODA3MDA0LDQ4LjE4NjgyNjEgMTY0LjgwNzAwNCw0OC4xODY4MjYxIEwxNjIuNjA1NjgyLDQ4LjE4NjgyNjEgQzE2Mi4yOTk1Niw0OC4xODY4MjYxIDE2Mi4xOTI5MzQsNDcuNzczNzc4MSAxNjIuMTkyOTM0LDQ3Ljc3Mzc3ODEgTDE2Mi4xOTI5MzQsMzcuNDQ3NTc4OSBDMTYyLjE5MjkzNCwzNi43OTI4OTc5IDE2MS4zNjc0MzgsMzYuNjIxNDgzIDE2MS4zNjc0MzgsMzYuNjIxNDgzIEwxNTkuMzAzNjk4LDM2LjYyMTQ4MyBDMTU4LjY3Mzk4MiwzNi42MjE0ODMgMTU4LjYxNTc4NCwzNy40NDc1Nzg5IDE1OC42MTU3ODQsMzcuNDQ3NTc4OSBMMTU4LjYxNTc4NCw0Ny43NzM3NzgxIEMxNTguNjE1Nzg0LDQ4LjIxNTczOTUgMTU4LjIwMzAzNiw0OC4xODY4MjYxIDE1OC4yMDMwMzYsNDguMTg2ODI2MSBMMTU2LjAwMTcxNCw0OC4xODY4MjYxIEMxNTUuNTg5Mzc4LDQ4LjE4NjgyNjEgMTU1LjU4ODk2Niw0Ny43NzM3NzgxIDE1NS41ODg5NjYsNDcuNzczNzc4MSBMMTU1LjU4ODk2NiwzNC42OTM5MjU4IEMxNTUuNTg4OTY2LDMzLjkzNjI1ODIgMTU2LjY4OTYyNywzMy41OTI0NjQ2IDE1Ni42ODk2MjcsMzMuNTkyNDY0NiBMMTcwLjQ0Nzg5NCwzMy41OTI0NjQ2IEMxNzEuNTUyMjcsMzMuNTkyNDY0NiAxNzEuODIzNzIsMzQuOTY5MjkxMSAxNzEuODIzNzIsMzQuOTY5MjkxMSBMMTcxLjgyMzcyLDQ3Ljc3Mzc3ODEgQzE3MS44MjM3Miw0OC4yNDkzMzQgMTcxLjQxMDk3Miw0OC4xODY4MjYxIDE3MS40MTA5NzIsNDguMTg2ODI2MSBMMTcxLjQxMDk3Miw0OC4xODY4MjYxIFogTTE1MS40NjE0ODYsNDIuNDA0MTU0NiBMMTQyLjkzMTM2LDQyLjQwNDE1NDYgTDE0Mi45MzEzNiw0NC40NjkzOTQ0IEMxNDIuOTMxMzYsNDUuMjEzNTY5MSAxNDMuODk0NDM5LDQ1LjQzMzE3MyAxNDMuODk0NDM5LDQ1LjQzMzE3MyBMMTUwLjc3MzU3Miw0NS40MzMxNzMgQzE1MS4yNjMwOTIsNDUuNDMzMTczIDE1MS41OTkwNjgsNDUuODQ2MjIxIDE1MS41OTkwNjgsNDUuODQ2MjIxIEMxNTEuNTk5MDY4LDQ1Ljg0NjIyMSAxNTIuMTk5MjA0LDQ3LjA5NTE0MDMgMTUyLjQyNDU2NCw0Ny42MzYwOTU1IEMxNTIuNjQ5Nzg3LDQ4LjE3NzA1MDYgMTUyLjAxMTgxNiw0OC4xODY4MjYxIDE1Mi4wMTE4MTYsNDguMTg2ODI2MSBMMTQxLjY5MzExNyw0OC4xODY4MjYxIEMxNDAuNDUwNDcsNDguMTg2ODI2MSAxNDAuMTc5NzA3LDQ2LjY3MjMxNjkgMTQwLjE3OTcwNyw0Ni42NzIzMTY5IEwxNDAuMTc5NzA3LDM0Ljk2OTI5MTEgQzE0MC4xNzk3MDcsMzQuMjk2Mjk4MyAxNDEuMTQyNzg2LDM0LjAwNTUxMjUgMTQxLjE0Mjc4NiwzNC4wMDU1MTI1IEwxNTEuNDYxNDg2LDM0LjAwNTUxMjUgQzE1Mi40OTg0NDYsMzQuMDA1NTEyNSAxNTIuNjk5NzMsMzUuMjQ0NjU2NCAxNTIuNjk5NzMsMzUuMjQ0NjU2NCBMMTUyLjY5OTczLDQxLjE2NTAxMDcgQzE1Mi42OTk3Myw0Mi4xNjM4OTgzIDE1MS40NjE0ODYsNDIuNDA0MTU0NiAxNTEuNDYxNDg2LDQyLjQwNDE1NDYgTDE1MS40NjE0ODYsNDIuNDA0MTU0NiBaIE0xNDkuOTQ4MDc2LDM3LjQ0NzU3ODkgQzE0OS45NDgwNzYsMzcuNDQ3NTc4OSAxNDkuODYxMzk5LDM2Ljc1OTE2NTcgMTQ5LjI2MDE2MywzNi43NTkxNjU3IEwxNDMuNjE5Mjc0LDM2Ljc1OTE2NTcgQzE0My42MTkyNzQsMzYuNzU5MTY1NyAxNDIuOTMxMzYsMzYuOTQzNzk4MSAxNDIuOTMxMzYsMzcuNDQ3NTc4OSBMMTQyLjkzMTM2LDM4Ljk2MjA4ODIgQzE0Mi45MzEzNiwzOC45NjIwODgyIDE0Mi45NTExNzIsMzkuNjUwNTAxNCAxNDMuNjE5Mjc0LDM5LjY1MDUwMTQgTDE0OS4yNjAxNjMsMzkuNjUwNTAxNCBDMTQ5LjI2MDE2MywzOS42NTA1MDE0IDE0OS45NDgwNzYsMzkuNDgwNDYzNCAxNDkuOTQ4MDc2LDM4LjgyNDQwNTUgTDE0OS45NDgwNzYsMzcuNDQ3NTc4OSBMMTQ5Ljk0ODA3NiwzNy40NDc1Nzg5IFogTTEzOC4xMTU5NjcsNDguMTg2ODI2MSBMMTMyLjg4NzgyNiw0OC4xODY4MjYxIEMxMzIuODg3ODI2LDQ4LjE4NjgyNjEgMTI5LjA2MTkyNyw0OC4wMDYxODY1IDEyOC43NjAzNDYsNDQuMTk0MDI5MSBDMTI4Ljc0ODIzOSw0MC4yNzkwMjI4IDEyOC43NjAzNDYsMjguMDg1MTU4MyAxMjguNzYwMzQ2LDI4LjA4NTE1ODMgTDEzMS4yMzY4MzQsMjguMDg1MTU4MyBDMTMxLjIzNjgzNCwyOC4wODUxNTgzIDEzMi4wNjIzMywyOC4wNzAxNTA5IDEzMi4wNjIzMywyOC45MTEyNTQzIEwxMzIuMDYyMzMsNDMuMzY3OTMzMSBDMTMyLjA2MjMzLDQzLjM2NzkzMzEgMTMyLjM1MDAxNSw0NC41NjM4NDQ3IDEzMy45ODg0ODcsNDUuMDIwMTI1IEMxMzUuODM5OCw0NS4wMTA3NjI2IDEzNi4xODk4MSw0NS4wMjAxMjUgMTM2LjE4OTgxLDQ1LjAyMDEyNSBDMTM2LjE4OTgxLDQ1LjAyMDEyNSAxMzYuOTA3MzAzLDQ0Ljc5MDE5NSAxMzcuNDI4MDU0LDQ1LjcwODUzODMgQzEzNy45NDg4MDQsNDYuNjI2ODgxNiAxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjUyODcxNSw0Ny42MzYwOTU1IEMxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjYxMTU0LDQ4LjE4NjgyNjEgMTM4LjExNTk2Nyw0OC4xODY4MjYxIEwxMzguMTE1OTY3LDQ4LjE4NjgyNjEgWiBNMTExLjU2MjUxMyw0Ny4zNjA3MzAyIEwxMTEuNTYyNTEzLDI5LjE4NjYxOTYgQzExMS41NjI1MTMsMjguMzgwNzYzIDExMi4yNTA0MjYsMjguMjIyODQxIDExMi4yNTA0MjYsMjguMjIyODQxIEwxMjUuMTgzMTk3LDI4LjIyMjg0MSBDMTI1LjkwNjQ2OSwyOC4yMjI4NDEgMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS41OTU5NDUsMjkuMDQ4OTM2OSBDMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS4xOTI4MjcsMzAuMTY2MDk0IDEyNC45MDgwMzEsMzAuNzAxMTI4OCBDMTI0LjYyMzIzNSwzMS4yMzYxNjM2IDEyNC4wODI1MzUsMzEuMjUxODU5NCAxMjQuMDgyNTM1LDMxLjI1MTg1OTQgTDExNS42ODk5OTMsMzEuMjUxODU5NCBDMTE0LjkwODUyMywzMS4yNTE4NTk0IDExNC44NjQ0OTcsMzEuOTQwMjcyNyAxMTQuODY0NDk3LDMxLjk0MDI3MjcgTDExNC44NjQ0OTcsMzYuNDgzODAwMyBMMTI0LjM1NzcwMSwzNi40ODM4MDAzIEMxMjQuOTE0NjM1LDM2LjQ4MzgwMDMgMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyNC42MzI4NjYsMzcuMTcyMjEzNiBDMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyMy45MjE4MzksMzguNjg4OTI1OCAxMjMuNjY5Nzg3LDM5LjA5OTc3MDggQzEyMy40MTc3MzYsMzkuNTEwNjE1OSAxMjIuODQ0MjkxLDM5LjUxMjgxODggMTIyLjg0NDI5MSwzOS41MTI4MTg4IEwxMTQuODY0NDk3LDM5LjUxMjgxODggTDExNC44NjQ0OTcsNDQuMzMxNzExNyBDMTE0Ljg2NDQ5Nyw0NC45ODg0NTggMTE1LjU1MjQxLDQ1LjE1NzgwNzcgMTE1LjU1MjQxLDQ1LjE1NzgwNzcgTDEyNC4zNTc3MDEsNDUuMTU3ODA3NyBDMTI0Ljk5NjIyMiw0NS4xNTc4MDc3IDEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjUuMTgzMTk3LDQ1LjU3MDg1NTYgQzEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjYuMDU1MTk2LDQ2LjkzMjM5OTQgMTI2LjQyMTQ0MSw0Ny40OTg0MTI4IEMxMjYuNzg3ODIzLDQ4LjA2NDQyNjIgMTI2LjI4Mzg1OCw0OC4xODY4MjYxIDEyNi4yODM4NTgsNDguMTg2ODI2MSBMMTEyLjM4ODAwOSw0OC4xODY4MjYxIEMxMTEuODE0MTUxLDQ4LjE4NjgyNjEgMTExLjU2MjUxMyw0Ny4zNjA3MzAyIDExMS41NjI1MTMsNDcuMzYwNzMwMiBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"; },1130:function(t,e){t.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMCAwIDM4IDQ4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0MCAoMzM3NjIpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPlNoYXBlIENvcHk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0idjIuMi4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6aaW6aG1Lem7mOiupOaViOaenC1jb3B5LTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MC4wMDAwMDAsIC0xOS4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPHBhdGggZD0iTTIxMi4xMzU0NDEsNDUuMTU3ODA3NyBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},1131:function(t,e,M){function n(t){M(1132)}var i=M(13)(M(1134),M(1135),n,null,null);t.exports=i.exports},1132:function(t,e){},1134:function(t,e,M){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}e.__esModule=!0;var i=M(1116),N=n(i),a=M(647);e.default={props:{data:Array,base:{type:String,default:""}},data:function(){return{highlights:[],navState:[],isSmallScreen:!1,versions:[],version:a.version,dropdownVisible:!1}},watch:{"$route.path":function(){this.handlePathChange()}},computed:{navStyle:function(){return this.isSmallScreen?{"padding-bottom":"60px"}:{}},isComponentPage:function(){return/^component-/.test(this.$route.name)},langConfig:function(){var t=this;return N.default.filter(function(e){return e.lang===t.$route.meta.lang})[0].nav}},methods:{switchVersion:function(t){t!==this.version&&(location.href=location.origin+"/"+this.versions[t]+"/"+location.hash+" ")},handleResize:function(){this.isSmallScreen=document.documentElement.clientWidth<768,this.handlePathChange()},handlePathChange:function(){var t=this;return this.isSmallScreen?void this.$nextTick(function(){t.hideAllMenu();for(var e=t.$el.querySelector("a.active"),M=e.parentNode;"UL"!==M.tagName;)M=M.parentNode;M.style.height="auto"}):void this.expandAllMenu()},hideAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(t){t.style.height="0"})},expandAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(t){t.style.height="auto"})},expandMenu:function(t){if(this.isSmallScreen){var e=t.currentTarget;e.nextElementSibling&&"UL"===e.nextElementSibling.tagName&&(this.hideAllMenu(),t.currentTarget.nextElementSibling.style.height="auto")}},handleDropdownToggle:function(t){this.dropdownVisible=t}},created:function(){var t=this,e=new XMLHttpRequest;e.onreadystatechange=function(M){4===e.readyState&&200===e.status&&(t.versions=JSON.parse(e.responseText))},e.open("GET","/versions.json"),e.send()},mounted:function(){this.handleResize(),window.addEventListener("resize",this.handleResize)},beforeDestroy:function(){window.removeEventListener("resize",this.handleResize)}}},1135:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,M=t._self._c||e;return M("div",{staticClass:"side-nav",style:t.navStyle},[M("el-dropdown",{directives:[{name:"show",rawName:"v-show",value:t.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-dropdown",class:{"is-active":t.dropdownVisible},attrs:{trigger:"click"}},[M("span",[t._v("\n "+t._s(t.langConfig.dropdown)+t._s(t.version)+"\n "),M("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),M("el-dropdown-menu",{staticClass:"nav-dropdown-list",attrs:{offset:-80},on:{input:t.handleDropdownToggle},slot:"dropdown"},t._l(Object.keys(t.versions),function(e){return M("el-dropdown-item",{key:e,nativeOn:{click:function(M){t.switchVersion(e)}}},[t._v("\n "+t._s(e)+"\n ")])}))],1),M("ul",t._l(t.data,function(e){return M("li",{staticClass:"nav-item"},[e.path||e.href?t._e():M("a",{on:{click:t.expandMenu}},[t._v(t._s(e.name))]),e.href?M("a",{attrs:{href:e.href,target:"_blank"}},[t._v(t._s(e.name))]):t._e(),e.path?M("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):t._e(),e.children?M("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return M("li",{staticClass:"nav-item"},[M("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),e.groups?t._l(e.groups,function(e){return M("div",{staticClass:"nav-group"},[M("div",{staticClass:"nav-group__title",on:{click:t.expandMenu}},[t._v(t._s(e.groupName))]),M("ul",{staticClass:"pure-menu-list"},t._l(e.list,function(e){return e.disabled?t._e():M("li",{staticClass:"nav-item"},[M("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title)}})],1)}))])}):t._e()],2)})),M("div",{attrs:{id:"code-sponsor-widget"}})],1)},staticRenderFns:[]}},1136:function(t,e,M){function n(t){M(1137)}var i=M(13)(M(1139),M(1140),n,null,null);t.exports=i.exports},1137:function(t,e){},1139:function(t,e,M){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}e.__esModule=!0;var i=M(24),N=n(i);e.default={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.default[this.lang];this.nav=e[0].children.concat(e[1]),e[3].groups.map(function(t){return t.list}).forEach(function(e){t.nav=t.nav.concat(e)})},updateNav:function(){this.currentComponent="/"+this.$route.path.split("/")[3];for(var t=0,e=this.nav.length;t.el-menu{position:absolute;top:65px;left:0;border:1px solid #d1dbe5;padding:5px 0;background-color:#fff;z-index:100;min-width:100%;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-menu--horizontal .el-submenu .el-submenu__title{height:60px;line-height:60px;border-bottom:5px solid transparent}.el-menu--horizontal .el-submenu .el-menu-item{background-color:#fff;float:none;height:36px;line-height:36px;padding:0 10px}.el-menu--horizontal .el-submenu .el-submenu__icon-arrow{position:static;vertical-align:middle;margin-left:5px;color:#97a8be;margin-top:-3px}.el-menu--horizontal .el-menu-item:hover,.el-menu--horizontal .el-submenu__title:hover{background-color:#eef1f6}.el-menu--horizontal>.el-menu-item:hover,.el-menu--horizontal>.el-submenu.is-active .el-submenu__title,.el-menu--horizontal>.el-submenu:hover .el-submenu__title{border-bottom:5px solid #20a0ff}.el-menu--horizontal.el-menu--dark .el-menu-item:hover,.el-menu--horizontal.el-menu--dark .el-submenu__title:hover{background-color:#324157}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item,.el-menu--horizontal.el-menu--dark .el-submenu .el-submenu-title{color:#48576a}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item:hover,.el-menu--horizontal.el-menu--dark .el-submenu .el-submenu-title:hover{background-color:#d1dbe5}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active{color:#20a0ff}.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 .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}.el-menu--collapse .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{transform:none}.el-menu-item [class^=el-icon-]{margin-right:5px;width:24px;text-align:center}.el-menu-item *{vertical-align:middle}.el-menu-item:first-child{margin-left:0}.el-menu-item:last-child{margin-right:0}.el-menu-item:hover{background-color:#d1dbe5}.el-menu-item.is-active{color:#20a0ff}.el-submenu [class^=el-icon-]{vertical-align:middle;margin-right:5px;width:24px;text-align:center}.el-submenu .el-menu{background-color:#e4e8f1}.el-submenu .el-menu-item{height:50px;line-height:50px;padding:0 45px;min-width:200px}.el-submenu .el-menu-item:hover{background-color:#d1dbe5}.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{transform:rotate(180deg)}.el-submenu.is-active .el-submenu__title{border-bottom-color:#20a0ff}.el-submenu__title{position:relative}.el-submenu__title:hover{background-color:#d1dbe5}.el-submenu__title *{vertical-align:middle}.el-submenu__icon-arrow{position:absolute;top:50%;right:20px;margin-top:-7px;transition:transform .3s;font-size:12px}.el-menu-item-group>ul{padding:0}.el-menu-item-group__title{padding-top:15px;line-height:normal;font-size:14px;padding-left:20px;color:#97a8be}.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow{transition:.2s;opacity:0}.el-radio{color:#1f2d3d;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.el-radio+.el-radio{margin-left:15px}.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-focus .el-radio__inner{border-color:#20a0ff}.el-radio__input.is-checked .el-radio__inner{border-color:#20a0ff;background:#20a0ff}.el-radio__input.is-checked .el-radio__inner:after{transform:translate(-50%,-50%) scale(1)}.el-radio__input.is-disabled .el-radio__inner{background-color:#eef1f6;border-color:#d1dbe5;cursor:not-allowed}.el-radio__input.is-disabled .el-radio__inner:after{cursor:not-allowed;background-color:#eef1f6}.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:#d1dbe5;border-color:#d1dbe5}.el-radio__input.is-disabled.is-checked .el-radio__inner:after{background-color:#fff}.el-radio__input.is-disabled+.el-radio__label{color:#bbb;cursor:not-allowed}.el-radio__inner{border:1px solid #bfcbd9;border-radius:100%;width:18px;height:18px;border-radius:50%;background-color:#fff;position:relative;cursor:pointer;display:inline-block;box-sizing:border-box}.el-radio__inner:hover{border-color:#20a0ff}.el-radio__inner:after{width:6px;height:6px;border-radius:50%;background-color:#fff;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .15s cubic-bezier(.71,-.46,.88,.6)}.el-radio__original{opacity:0;outline:none;position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;margin:0}.el-radio__label{font-size:14px;padding-left:5px}.el-radio-group{display:inline-block;font-size:0;line-height:1;vertical-align:middle}.el-radio-group .el-radio{font-size:14px}.el-radio-button{position:relative;display:inline-block}.el-radio-button:first-child .el-radio-button__inner{border-left:1px solid #bfcbd9;border-radius:4px 0 0 4px;box-shadow:none!important}.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__inner{display:inline-block;line-height:1;white-space:nowrap;vertical-align:middle;background:#fff;border:1px solid #bfcbd9;border-left:0;color:#1f2d3d;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;position:relative;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);padding:10px 15px;font-size:14px;border-radius:0}.el-radio-button__inner:hover{color:#20a0ff}.el-radio-button__inner [class*=el-icon-]{line-height:.9}.el-radio-button__inner [class*=el-icon-]+span{margin-left:5px}.el-radio-button__orig-radio{opacity:0;outline:none;position:absolute;z-index:-1;left:-999px}.el-radio-button__orig-radio:checked+.el-radio-button__inner{color:#fff;background-color:#20a0ff;border-color:#20a0ff;box-shadow:-1px 0 0 0 #20a0ff}.el-radio-button__orig-radio:disabled+.el-radio-button__inner{color:#bfcbd9;cursor:not-allowed;background-image:none;background-color:#eef1f6;border-color:#d1dbe5;box-shadow:none}.el-radio-button--large .el-radio-button__inner{padding:11px 19px;font-size:16px;border-radius:0}.el-radio-button--small .el-radio-button__inner{padding:7px 9px;font-size:12px;border-radius:0}.el-radio-button--mini .el-radio-button__inner{padding:4px;font-size:12px;border-radius:0}.el-switch{display:inline-block;position:relative;font-size:14px;line-height:22px;height:22px;vertical-align:middle}.el-switch .label-fade-enter,.el-switch .label-fade-leave-active{opacity:0}.el-switch.is-disabled .el-switch__core{border-color:#e4e8f1!important;background:#e4e8f1!important}.el-switch.is-disabled .el-switch__core span{background-color:#fbfdff!important}.el-switch.is-disabled .el-switch__core~.el-switch__label *{color:#fbfdff!important}.el-switch.is-checked .el-switch__core{border-color:#20a0ff;background-color:#20a0ff}.el-switch.is-disabled .el-switch__core,.el-switch.is-disabled .el-switch__label{cursor:not-allowed}.el-switch__label{transition:.2s;width:46px;height:22px;left:0;top:0;cursor:pointer;z-index:2}.el-switch__label,.el-switch__label *{position:absolute;display:inline-block;font-size:14px}.el-switch__label *{line-height:1;top:4px;color:#fff}.el-switch__label--left i{left:6px}.el-switch__label--right i{right:6px}.el-switch__input{display:none}.el-switch__input.allow-focus{z-index:0;display:inline;display:initial;position:absolute;left:0;top:0;outline:none;opacity:0}.el-switch__input.allow-focus:focus+.el-switch__core{box-shadow:0 0 2px #20a0ff}.el-switch__core{margin:0;display:inline-block;position:relative;width:46px;height:22px;border:1px solid #bfcbd9;outline:none;border-radius:12px;box-sizing:border-box;background:#bfcbd9;cursor:pointer;transition:border-color .3s,background-color .3s;z-index:1}.el-switch__core .el-switch__button{top:0;left:0;position:absolute;border-radius:100%;transition:transform .3s;width:16px;height:16px;background-color:#fff}.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-select-dropdown{position:absolute;z-index:1001;border:1px solid #d1dbe5;border-radius:2px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);box-sizing:border-box;margin:5px 0}.el-select-dropdown .el-scrollbar.is-empty .el-select-dropdown__list{padding:0}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{color:#20a0ff;background-color:#fff}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{background-color:#e4e8f1}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected:after{position:absolute;right:10px;font-family:element-icons;content:"\E608";font-size:11px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.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:8px 10px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#48576a;height:36px;line-height:1.5;box-sizing:border-box;cursor:pointer}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover{background-color:#e4e8f1}.el-select-dropdown__item.selected{color:#fff;background-color:#20a0ff}.el-select-dropdown__item.selected.hover{background-color:#1c8de0}.el-select-dropdown__item span{line-height:1.5!important}.el-select-dropdown__item.is-disabled{color:#bfcbd9;cursor:not-allowed}.el-select-dropdown__item.is-disabled:hover{background-color:#fff}.el-select-group{margin:0;padding:0}.el-select-group .el-select-dropdown__item{padding-left:20px}.el-select-group__wrap{list-style:none;margin:0;padding:0}.el-select-group__title{padding-left:10px;font-size:12px;color:#999;height:30px;line-height:30px}.el-select{display:inline-block;position:relative}.el-select:hover .el-input__inner{border-color:#8391a5}.el-select .el-input__inner{cursor:pointer;padding-right:35px}.el-select .el-input__inner:focus{border-color:#20a0ff}.el-select .el-input .el-input__icon{color:#bfcbd9;font-size:12px;transition:transform .3s;transform:translateY(-50%) rotate(180deg);line-height:16px;top:50%;cursor:pointer}.el-select .el-input .el-input__icon.is-show-close{transition:0s;width:16px;height:16px;font-size:14px;right:8px;text-align:center;transform:translateY(-50%) rotate(180deg);border-radius:100%;color:#bfcbd9}.el-select .el-input .el-input__icon.is-show-close:hover{color:#97a8be}.el-select .el-input .el-input__icon.is-reverse{transform:translateY(-50%)}.el-select .el-input.is-disabled .el-input__inner{cursor:not-allowed}.el-select .el-input.is-disabled .el-input__inner:hover{border-color:#d1dbe5}.el-select>.el-input{display:block}.el-select .el-tag__close{margin-top:-2px}.el-select .el-tag{height:24px;line-height:24px;box-sizing:border-box;margin:3px 0 3px 6px}.el-select__input{border:none;outline:none;padding:0;margin-left:10px;color:#666;font-size:14px;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;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:#bfcbd9;line-height:18px;font-size:12px}.el-select__close:hover{color:#97a8be}.el-select__tags{position:absolute;line-height:normal;white-space:normal;z-index:1;top:50%;transform:translateY(-50%)}.el-select__tag{display:inline-block;height:24px;line-height:24px;font-size:14px;border-radius:4px;color:#fff;background-color:#20a0ff}.el-select__tag .el-icon-close{font-size:12px}.el-table{position:relative;overflow:hidden;box-sizing:border-box;width:100%;max-width:100%;background-color:#fff;border:1px solid #dfe6ec;font-size:14px;color:#1f2d3d}.el-table .el-tooltip.cell{white-space:nowrap;min-width:50px}.el-table td,.el-table th{height:40px;min-width:0;box-sizing:border-box;text-overflow:ellipsis;vertical-align:middle;position:relative}.el-table td.is-right,.el-table th.is-right{text-align:right}.el-table td.is-left,.el-table th.is-left{text-align:left}.el-table td.is-center,.el-table th.is-center{text-align:center}.el-table td,.el-table th.is-leaf{border-bottom:1px solid #dfe6ec}.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:before{left:0;bottom:0;width:100%;height:1px}.el-table:after,.el-table:before{content:"";position:absolute;background-color:#dfe6ec;z-index:1}.el-table:after{top:0;right:0;width:1px;height:100%}.el-table th{white-space:nowrap;overflow:hidden}.el-table th.is-sortable{cursor:pointer}.el-table th{background-color:#eef1f6;text-align:left}.el-table th>div{display:inline-block;padding-left:18px;padding-right:18px;line-height:40px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.el-table td>div,.el-table th>div{box-sizing:border-box}.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 th>.cell{position:relative;word-wrap:normal;text-overflow:ellipsis;display:inline-block;line-height:30px;vertical-align:middle;width:100%;box-sizing:border-box}.el-table th>.cell.highlight{color:#20a0ff}.el-table .caret-wrapper{position:relative;cursor:pointer;display:inline-block;vertical-align:middle;margin-left:5px;margin-top:-2px;width:16px;height:30px;overflow:visible;overflow:initial}.el-table .sort-caret{display:inline-block;width:0;height:0;border:0;content:"";position:absolute;left:3px;z-index:2}.el-table .sort-caret.ascending{top:9px;border-top:none;border-bottom:5px solid #97a8be}.el-table .sort-caret.ascending,.el-table .sort-caret.descending{border-right:5px solid transparent;border-left:5px solid transparent}.el-table .sort-caret.descending{bottom:9px;border-top:5px solid #97a8be;border-bottom:none}.el-table .ascending .sort-caret.ascending{border-bottom-color:#48576a}.el-table .descending .sort-caret.descending{border-top-color:#48576a}.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:24px;padding-left:18px;padding-right:18px}.el-table tr input[type=checkbox]{margin:0}.el-table tr{background-color:#fff}.el-table .hidden-columns{visibility:hidden;position:absolute;z-index:-1}.el-table__empty-block{position:relative;min-height:60px;text-align:center;width:100%;height:100%}.el-table__empty-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#5e7382}.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:40px}.el-table__expand-icon>.el-icon{position:absolute;left:50%;top:50%;margin-left:-5px;margin-top:-5px}.el-table__expand-icon--expanded{transform:rotate(90deg)}.el-table__expanded-cell{padding:20px 50px;background-color:#fbfdff;box-shadow:inset 0 2px 0 #f4f4f4}.el-table__expanded-cell:hover{background-color:#fbfdff!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--border td,.el-table--border th{border-right:1px solid #dfe6ec}.el-table--border th{border-bottom:1px solid #dfe6ec}.el-table--hidden{visibility:hidden}.el-table__fixed,.el-table__fixed-right{position:absolute;top:0;left:0;box-shadow:1px 0 8px #d3d4d6;overflow-x:hidden}.el-table__fixed-right:before,.el-table__fixed:before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:#dfe6ec;z-index:4}.el-table__fixed-right-patch{position:absolute;top:-1px;right:0;background-color:#eef1f6;border-bottom:1px solid #dfe6ec}.el-table__fixed-right{top:0;left:auto;right:0;box-shadow:-1px 0 8px #d3d4d6}.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-header-wrapper thead div{background-color:#eef1f6;color:#1f2d3d}.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 #dfe6ec;background-color:#fbfdff;color:#1f2d3d}.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 #dfe6ec}.el-table__body,.el-table__footer,.el-table__header{table-layout:fixed}.el-table__footer-wrapper,.el-table__header-wrapper{overflow:hidden}.el-table__footer-wrapper thead div,.el-table__header-wrapper thead div{background-color:#eef1f6;color:#1f2d3d}.el-table__footer-wrapper tbody td,.el-table__header-wrapper tbody td{background-color:#fbfdff;color:#1f2d3d}.el-table__body-wrapper{overflow:auto;position:relative}.el-table--striped .el-table__body tr.el-table__row--striped td{background:#fafafa;background-clip:padding-box}.el-table--striped .el-table__body tr.el-table__row--striped.current-row td{background:#edf7ff}.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:#eef1f6}.el-table__body tr.current-row>td{background:#edf7ff}.el-table__column-resize-proxy{position:absolute;left:200px;top:0;bottom:0;width:0;border-left:1px solid #dfe6ec;z-index:10}.el-table__column-filter-trigger{display:inline-block;line-height:34px;margin-left:5px;cursor:pointer}.el-table__column-filter-trigger i{color:#97a8be}.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:#eef1f6;background-clip:padding-box}.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 #d1dbe5;border-radius:2px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.12);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:#e4e8f1;color:#48576a}.el-table-filter__list-item.is-active{background-color:#20a0ff;color:#fff}.el-table-filter__content{min-width:100px}.el-table-filter__bottom{border-top:1px solid #d1dbe5;padding:8px}.el-table-filter__bottom button{background:transparent;border:none;color:#8391a5;cursor:pointer;font-size:14px;padding:0 3px}.el-table-filter__bottom button:hover{color:#20a0ff}.el-table-filter__bottom button:focus{outline:none}.el-table-filter__bottom button.is-disabled{color:#bfcbd9;cursor:not-allowed}.el-table-filter__checkbox-group{padding:10px}.el-table-filter__checkbox-group label.el-checkbox{display:block;margin-bottom:8px;margin-left:5px}.el-table-filter__checkbox-group .el-checkbox:last-child{margin-bottom:0}.el-date-table{font-size:12px;min-width:224px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-date-table td{width:32px;height:32px;box-sizing:border-box;text-align:center;cursor:pointer}.el-date-table td.next-month,.el-date-table td.prev-month{color:#ddd}.el-date-table td.today{color:#20a0ff;position:relative}.el-date-table td.today:before{content:" ";position:absolute;top:0;right:0;width:0;height:0;border-top:.5em solid #20a0ff;border-left:.5em solid transparent}.el-date-table td.available:hover{background-color:#e4e8f1}.el-date-table td.in-range{background-color:#d2ecff}.el-date-table td.in-range:hover{background-color:#afddff}.el-date-table td.current:not(.disabled),.el-date-table td.end-date,.el-date-table td.start-date{background-color:#20a0ff!important;color:#fff}.el-date-table td.disabled{background-color:#f4f4f4;opacity:1;cursor:not-allowed;color:#ccc}.el-date-table td.week{font-size:80%;color:#8391a5}.el-date-table th{padding:5px;color:#8391a5;font-weight:400}.el-date-table.is-week-mode .el-date-table__row:hover{background-color:#e4e8f1}.el-date-table.is-week-mode .el-date-table__row.current{background-color:#d2ecff}.el-month-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-month-table td{text-align:center;padding:20px 3px;cursor:pointer}.el-month-table td .cell{width:48px;height:32px;display:block;line-height:32px;color:#48576a}.el-month-table td .cell:hover{background-color:#e4e8f1}.el-month-table td.disabled .cell{background-color:#f4f4f4;cursor:not-allowed;color:#ccc}.el-month-table td.current:not(.disabled) .cell{background-color:#20a0ff!important;color:#fff}.el-year-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-year-table .el-icon{color:#97a8be}.el-year-table td{text-align:center;padding:20px 3px;cursor:pointer}.el-year-table td .cell{width:48px;height:32px;display:block;line-height:32px;color:#48576a}.el-year-table td .cell:hover{background-color:#e4e8f1}.el-year-table td.disabled .cell{background-color:#f4f4f4;cursor:not-allowed;color:#ccc}.el-year-table td.current:not(.disabled) .cell{background-color:#20a0ff!important;color:#fff}.el-date-range-picker{min-width:520px}.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.has-sidebar.has-time{min-width:766px}.el-date-range-picker.has-sidebar{min-width:620px}.el-date-range-picker.has-time{min-width:660px}.el-date-range-picker__header{position:relative;text-align:center;height:28px}.el-date-range-picker__header button{float:left}.el-date-range-picker__header div{font-size:14px;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-right .el-date-range-picker__header button{float:right}.el-date-range-picker__content.is-right .el-date-range-picker__header div{margin-left:50px;margin-right:50px}.el-date-range-picker__content.is-left{border-right:1px solid #e4e4e4}.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:#97a8be}.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-time-range-picker{min-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-picker-panel,.el-time-range-picker__body{border-radius:2px;border:1px solid #d1dbe5}.el-picker-panel{color:#48576a;box-shadow:0 2px 6px #ccc;background:#fff;line-height:20px;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}.el-picker-panel__shortcut{display:block;width:100%;border:0;background-color:transparent;line-height:28px;font-size:14px;color:#48576a;padding-left:12px;text-align:left;outline:none;cursor:pointer}.el-picker-panel__shortcut:hover{background-color:#e4e8f1}.el-picker-panel__shortcut.active{background-color:#e6f1fe;color:#20a0ff}.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:#97a8be;border:0;background:transparent;cursor:pointer;outline:none;margin-top:3px}.el-picker-panel__icon-btn:hover{color:#20a0ff}.el-picker-panel__link-btn{cursor:pointer;color:#20a0ff;text-decoration:none;padding:15px;font-size:12px}.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:#fbfdff;overflow:auto}.el-picker-panel [slot=sidebar]+.el-picker-panel__body,.el-picker-panel__sidebar+.el-picker-panel__body{margin-left:110px}.el-date-picker{min-width:254px}.el-date-picker .el-picker-panel__content{min-width:224px}.el-date-picker table{table-layout:fixed;width:100%}.el-date-picker.has-sidebar.has-time{min-width:434px}.el-date-picker.has-sidebar{min-width:370px}.el-date-picker.has-time{min-width:324px}.el-date-picker.has-time .el-picker-panel__body-wrapper{position:relative}.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-label{font-size:14px;padding:0 5px;line-height:22px;text-align:center;cursor:pointer}.el-date-picker__header-label.active,.el-date-picker__header-label:hover{color:#20a0ff}.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}.time-select-item.selected:not(.disabled){background-color:#20a0ff;color:#fff}.time-select-item.selected:not(.disabled):hover{background-color:#20a0ff}.time-select-item.disabled{color:#d1dbe5;cursor:not-allowed}.time-select-item:hover{background-color:#e4e8f1;cursor:pointer}.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) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;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) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;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) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;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-date-editor{position:relative;display:inline-block}.el-date-editor .el-picker-panel{position:absolute;min-width:180px;box-sizing:border-box;box-shadow:0 2px 6px #ccc;background:#fff;z-index:10;top:41px}.el-date-editor.el-input{width:193px}.el-date-editor--daterange.el-input{width:220px}.el-date-editor--datetimerange.el-input{width:350px}.el-time-spinner.has-seconds .el-time-spinner__wrapper{width:33%}.el-time-spinner.has-seconds .el-time-spinner__wrapper:nth-child(2){margin-left:1%}.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__list{padding:0;margin:0;list-style:none;text-align:center}.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}.el-time-spinner__item:hover:not(.disabled):not(.active){background:#e4e8f1;cursor:pointer}.el-time-spinner__item.active:not(.disabled){color:#fff}.el-time-spinner__item.disabled{color:#d1dbe5;cursor:not-allowed}.el-time-panel{margin:5px 0;border:1px solid #d1dbe5;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);border-radius:2px;position:absolute;width:180px;left:0;z-index:1000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-time-panel__content{font-size:0;position:relative;overflow:hidden}.el-time-panel__content:after,.el-time-panel__content:before{content:":";top:50%;color:#fff;position:absolute;font-size:14px;margin-top:-15px;line-height:16px;background-color:#20a0ff;height:32px;z-index:-1;left:0;right:0;box-sizing:border-box;padding-top:6px;text-align:left}.el-time-panel__content:after{left:50%;margin-left:-2px}.el-time-panel__content:before{padding-left:50%;margin-right:-2px}.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:#8391a5}.el-time-panel__btn.confirm{font-weight:800;color:#20a0ff}.el-popover{position:absolute;background:#fff;min-width:150px;border-radius:2px;border:1px solid #d1dbe5;padding:10px;z-index:2000;font-size:12px;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-popover .popper__arrow,.el-popover .popper__arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-popover .popper__arrow{border-width:6px}.el-popover .popper__arrow:after{content:" ";border-width:6px}.el-popover[x-placement^=top]{margin-bottom:12px}.el-popover[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#d1dbe5;border-bottom-width:0}.el-popover[x-placement^=top] .popper__arrow:after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.el-popover[x-placement^=bottom]{margin-top:12px}.el-popover[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#d1dbe5}.el-popover[x-placement^=bottom] .popper__arrow:after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.el-popover[x-placement^=right]{margin-left:12px}.el-popover[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#d1dbe5;border-left-width:0}.el-popover[x-placement^=right] .popper__arrow:after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.el-popover[x-placement^=left]{margin-right:12px}.el-popover[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#d1dbe5}.el-popover[x-placement^=left] .popper__arrow:after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.el-popover__title{color:#1f2d3d;font-size:13px;line-height:1;margin-bottom:9px}.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-message-box{text-align:left;display:inline-block;vertical-align:middle;background-color:#fff;width:420px;border-radius:3px;font-size:16px;overflow:hidden;-webkit-backface-visibility: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:20px 20px 0}.el-message-box__headerbtn{position:absolute;top:19px;right:20px;background:transparent;border:none;outline:none;padding:0;cursor:pointer}.el-message-box__headerbtn .el-message-box__close{color:#999}.el-message-box__headerbtn:focus .el-message-box__close,.el-message-box__headerbtn:hover .el-message-box__close{color:#20a0ff}.el-message-box__content{padding:30px 20px;color:#48576a;font-size:14px;position:relative}.el-message-box__input{padding-top:15px}.el-message-box__input input.invalid,.el-message-box__input input.invalid:focus{border-color:#ff4949}.el-message-box__errormsg{color:#ff4949;font-size:12px;min-height:18px;margin-top:2px}.el-message-box__title{padding-left:0;margin-bottom:0;font-size:16px;font-weight:700;height:18px;color:#333}.el-message-box__message{margin:0}.el-message-box__message p{margin:0;line-height:1.4}.el-message-box__btns{padding:10px 20px 15px;text-align:right}.el-message-box__btns button:nth-child(2){margin-left:10px}.el-message-box__btns-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.el-message-box__status{position:absolute;top:50%;transform:translateY(-50%);font-size:36px!important}.el-message-box__status.el-icon-circle-check{color:#13ce66}.el-message-box__status.el-icon-information{color:#50bfff}.el-message-box__status.el-icon-warning{color:#f7ba2a}.el-message-box__status.el-icon-circle-cross{color:#ff4949}.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:13px;line-height:1}.el-breadcrumb__separator{margin:0 8px;color:#bfcbd9}.el-breadcrumb__item{float:left}.el-breadcrumb__item:last-child .el-breadcrumb__item__inner,.el-breadcrumb__item:last-child .el-breadcrumb__item__inner:hover,.el-breadcrumb__item:last-child .el-breadcrumb__item__inner a,.el-breadcrumb__item:last-child .el-breadcrumb__item__inner a:hover{color:#97a8be;cursor:text}.el-breadcrumb__item:last-child .el-breadcrumb__separator{display:none}.el-breadcrumb__item__inner,.el-breadcrumb__item__inner a{transition:color .15s linear;color:#48576a}.el-breadcrumb__item__inner:hover,.el-breadcrumb__item__inner a:hover{color:#20a0ff;cursor:pointer}.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 .el-form-item{margin-bottom:0}.el-form-item.is-error .el-input-group__append .el-input__inner,.el-form-item.is-error .el-input-group__prepend .el-input__inner,.el-form-item.is-error .el-input__inner{border-color:transparent}.el-form-item.is-error .el-input__inner,.el-form-item.is-error .el-textarea__inner{border-color:#ff4949}.el-form-item.is-required .el-form-item__label:before{content:"*";color:#ff4949;margin-right:4px}.el-form-item__label{text-align:right;vertical-align:middle;float:left;font-size:14px;color:#48576a;line-height:1;padding:11px 12px 11px 0;box-sizing:border-box}.el-form-item__content{line-height:36px;position:relative;font-size:14px}.el-form-item__error{color:#ff4949;font-size:12px;line-height:1;padding-top:4px;position:absolute;top:100%;left:0}.el-tabs{clear:both}.el-tabs__header{border-bottom:1px solid #d1dbe5;padding:0;position:relative;margin:0 0 15px}.el-tabs__active-bar{position:absolute;bottom:0;left:0;height:3px;background-color:#20a0ff;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:#20a0ff}.el-tabs__nav-wrap{overflow:hidden;margin-bottom:-1px;position:relative}.el-tabs__nav-wrap.is-scrollable{padding:0 15px}.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:#8391a5}.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}.el-tabs__item{padding:0 16px;height:42px;box-sizing:border-box;line-height:42px;display:inline-block;list-style:none;font-size:14px;color:#8391a5;position:relative}.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(.7);display:inline-block}.el-tabs__item .el-icon-close:hover{background-color:#97a8be;color:#fff}.el-tabs__item:hover{color:#1f2d3d;cursor:pointer}.el-tabs__item.is-disabled{color:#bbb;cursor:default}.el-tabs__item.is-active{color:#20a0ff}.el-tabs__content{overflow:hidden;position:relative}.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:1px solid transparent;transition:all .3s cubic-bezier(.645,.045,.355,1)}.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover{padding-right:9px;padding-left:9px}.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:1px solid #d1dbe5;border-bottom-color:#fff;border-radius:4px 4px 0 0}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable{padding-right:16px;padding-left:16px}.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 #d1dbe5;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:#eef1f6;margin:0}.el-tabs--border-card>.el-tabs__header .el-tabs__item{transition:all .3s cubic-bezier(.645,.045,.355,1);border:1px solid transparent;border-top:0;margin-right:-1px;margin-left:-1px}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{background-color:#fff;border-right-color:#d1dbe5;border-left-color:#d1dbe5}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active:first-child{border-left-color:#d1dbe5}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active:last-child{border-right-color:#d1dbe5}.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;transform-origin:0 0;transform:translateX(100%)}to{opacity:1;transform-origin:0 0;transform:translateX(0)}}@keyframes slideInRight-leave{0%{transform-origin:0 0;transform:translateX(0);opacity:1}to{transform-origin:0 0;transform:translateX(100%);opacity:0}}@keyframes slideInLeft-enter{0%{opacity:0;transform-origin:0 0;transform:translateX(-100%)}to{opacity:1;transform-origin:0 0;transform:translateX(0)}}@keyframes slideInLeft-leave{0%{transform-origin:0 0;transform:translateX(0);opacity:1}to{transform-origin:0 0;transform:translateX(-100%);opacity:0}}.el-tag{background-color:#8391a5;display:inline-block;padding:0 5px;height:24px;line-height:22px;font-size:12px;color:#fff;border-radius:4px;box-sizing:border-box;border:1px solid transparent;white-space:nowrap}.el-tag .el-icon-close{border-radius:50%;text-align:center;position:relative;cursor:pointer;font-size:12px;transform:scale(.75);height:18px;width:18px;line-height:18px;vertical-align:middle;top:-1px;right:-2px}.el-tag .el-icon-close:hover{background-color:#fff;color:#8391a5}.el-tag--gray{background-color:#e4e8f1;border-color:#e4e8f1;color:#48576a}.el-tag--gray .el-tag__close:hover{background-color:#48576a;color:#fff}.el-tag--gray.is-hit{border-color:#48576a}.el-tag--primary{background-color:rgba(32,160,255,.1);border-color:rgba(32,160,255,.2);color:#20a0ff}.el-tag--primary .el-tag__close:hover{background-color:#20a0ff;color:#fff}.el-tag--primary.is-hit{border-color:#20a0ff}.el-tag--success{background-color:rgba(18,206,102,.1);border-color:rgba(18,206,102,.2);color:#13ce66}.el-tag--success .el-tag__close:hover{background-color:#13ce66;color:#fff}.el-tag--success.is-hit{border-color:#13ce66}.el-tag--warning{background-color:rgba(247,186,41,.1);border-color:rgba(247,186,41,.2);color:#f7ba2a}.el-tag--warning .el-tag__close:hover{background-color:#f7ba2a;color:#fff}.el-tag--warning.is-hit{border-color:#f7ba2a}.el-tag--danger{background-color:rgba(255,73,73,.1);border-color:rgba(255,73,73,.2);color:#ff4949}.el-tag--danger .el-tag__close:hover{background-color:#ff4949;color:#fff}.el-tag--danger.is-hit{border-color:#ff4949}.el-tree{cursor:default;background:#fff;border:1px solid #d1dbe5}.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:#5e7382}.el-tree-node{white-space:nowrap}.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-node__content{line-height:36px;height:36px;cursor:pointer}.el-tree-node__content>.el-checkbox,.el-tree-node__content>.el-tree-node__expand-icon{margin-right:8px}.el-tree-node__content>.el-checkbox{vertical-align:middle}.el-tree-node__content:hover{background:#e4e8f1}.el-tree-node__expand-icon{display:inline-block;cursor:pointer;width:0;height:0;vertical-align:middle;margin-left:10px;border:6px solid transparent;border-right-width:0;border-left-color:#97a8be;border-left-width:7px;transform:rotate(0deg);transition:transform .3s ease-in-out}.el-tree-node__expand-icon:hover{border-left-color:#999}.el-tree-node__expand-icon.expanded{transform:rotate(90deg)}.el-tree-node__expand-icon.is-leaf{border-color:transparent;cursor:default}.el-tree-node__label,.el-tree-node__loading-icon{font-size:14px;vertical-align:middle;display:inline-block}.el-tree-node__loading-icon{margin-right:4px;color:#97a8be}.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{background-color:#edf7ff}.el-alert{width:100%;padding:8px 16px;margin:0;box-sizing:border-box;border-radius:4px;position:relative;background-color:#fff;overflow:hidden;color:#fff;opacity:1;display:table;transition:opacity .2s}.el-alert .el-alert__description{color:#fff;font-size:12px;margin:5px 0 0}.el-alert--success{background-color:#13ce66}.el-alert--info{background-color:#50bfff}.el-alert--warning{background-color:#f7ba2a}.el-alert--error{background-color:#ff4949}.el-alert__content{display:table-cell;padding:0 8px}.el-alert__icon{font-size:16px;width:16px;display:table-cell;color:#fff;vertical-align:middle}.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__closebtn{font-size:12px;color:#fff;opacity:1;top:12px;right:15px;position:absolute;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{width:330px;padding:20px;box-sizing:border-box;border-radius:2px;position:fixed;right:16px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);transition:opacity .3s,transform .3s,right .3s,top .4s;overflow:hidden}.el-notification .el-icon-circle-check{color:#13ce66}.el-notification .el-icon-circle-cross{color:#ff4949}.el-notification .el-icon-information{color:#50bfff}.el-notification .el-icon-warning{color:#f7ba2a}.el-notification__group{margin-left:0}.el-notification__group.is-with-icon{margin-left:55px}.el-notification__title{font-weight:400;font-size:16px;color:#1f2d3d;margin:0}.el-notification__content{font-size:14px;line-height:21px;margin:10px 0 0;color:#8391a5;text-align:justify}.el-notification__icon{width:40px;height:40px;font-size:40px;float:left;position:relative;top:3px}.el-notification__closeBtn{top:20px;right:20px;position:absolute;cursor:pointer;color:#bfcbd9;font-size:14px}.el-notification__closeBtn:hover{color:#97a8be}.el-notification-fade-enter{transform:translateX(100%);right:0}.el-notification-fade-leave-active{opacity:0}.el-input-number{display:inline-block;width:180px;position:relative;line-height:normal}.el-input-number .el-input{display:block}.el-input-number .el-input__inner{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:82px}.el-input-number.is-without-controls .el-input__inner{padding-right:10px}.el-input-number.is-disabled .el-input-number__decrease,.el-input-number.is-disabled .el-input-number__increase{border-color:#d1dbe5;color:#d1dbe5}.el-input-number.is-disabled .el-input-number__decrease:hover,.el-input-number.is-disabled .el-input-number__increase:hover{color:#d1dbe5;cursor:not-allowed}.el-input-number__decrease,.el-input-number__increase{height:auto;border-left:1px solid #bfcbd9;width:36px;line-height:34px;top:1px;text-align:center;color:#97a8be;cursor:pointer;position:absolute;z-index:1}.el-input-number__decrease:hover,.el-input-number__increase:hover{color:#20a0ff}.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:#20a0ff}.el-input-number__decrease.is-disabled,.el-input-number__increase.is-disabled{color:#d1dbe5;cursor:not-allowed}.el-input-number__increase{right:0}.el-input-number__decrease{right:37px}.el-input-number--large{width:200px}.el-input-number--large .el-input-number__decrease,.el-input-number--large .el-input-number__increase{line-height:40px;width:42px;font-size:16px}.el-input-number--large .el-input-number__decrease{right:43px}.el-input-number--large .el-input__inner{padding-right:94px}.el-input-number--small{width:130px}.el-input-number--small .el-input-number__decrease,.el-input-number--small .el-input-number__increase{line-height:28px;width:30px;font-size:13px}.el-input-number--small .el-input-number__decrease{right:31px}.el-input-number--small .el-input__inner{padding-right:70px}.el-tooltip__popper{position:absolute;border-radius:4px;padding:10px;z-index:2000;font-size:12px;line-height:1.2}.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:#1f2d3d;border-bottom-width:0}.el-tooltip__popper[x-placement^=top] .popper__arrow:after{bottom:1px;margin-left:-5px;border-top-color:#1f2d3d;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:#1f2d3d}.el-tooltip__popper[x-placement^=bottom] .popper__arrow:after{top:1px;margin-left:-5px;border-top-width:0;border-bottom-color:#1f2d3d}.el-tooltip__popper[x-placement^=right]{margin-left:12px}.el-tooltip__popper[x-placement^=right] .popper__arrow{left:-6px;border-right-color:#1f2d3d;border-left-width:0}.el-tooltip__popper[x-placement^=right] .popper__arrow:after{bottom:-5px;left:1px;border-right-color:#1f2d3d;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:#1f2d3d}.el-tooltip__popper[x-placement^=left] .popper__arrow:after{right:1px;bottom:-5px;margin-left:-5px;border-right-width:0;border-left-color:#1f2d3d}.el-tooltip__popper.is-light{background:#fff;border:1px solid #1f2d3d}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow{border-top-color:#1f2d3d}.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:#1f2d3d}.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:#1f2d3d}.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:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow:after{border-right-color:#fff}.el-tooltip__popper.is-dark{background:#1f2d3d;color:#fff}.el-slider.is-vertical{position:relative}.el-slider.is-vertical .el-slider__runway{width:4px;height:100%;margin:0 16px}.el-slider.is-vertical .el-slider__bar{width:4px;height:auto;border-radius:0 0 3px 3px}.el-slider.is-vertical .el-slider__button-wrapper{top:auto;left:-16px;transform:translateY(50%)}.el-slider.is-vertical .el-slider__stop{transform:translateY(50%)}.el-slider.is-vertical.el-slider--with-input{padding-bottom:64px}.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:30px;margin-top:-1px;border:1px solid #bfcbd9;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:#8391a5}.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:#20a0ff}.el-slider__runway{width:100%;height:4px;margin:16px 0;background-color:#e4e8f1;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,.el-slider__runway.disabled .el-slider__button{background-color:#bfcbd9}.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}.el-slider__bar{height:4px;background-color:#20a0ff;border-top-left-radius:3px;border-bottom-left-radius:3px;position:absolute}.el-slider__button-wrapper{width:36px;height:36px;position:absolute;z-index:1001;top:-16px;transform:translateX(-50%);background-color:transparent;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-slider__button-wrapper .el-tooltip{vertical-align:middle;display:inline-block}.el-slider__button-wrapper.hover,.el-slider__button-wrapper:hover{cursor:-webkit-grab;cursor:grab}.el-slider__button-wrapper.dragging{cursor:-webkit-grabbing;cursor:grabbing}.el-slider__button{width:12px;height:12px;background-color:#20a0ff;border-radius:50%;transition:.2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-slider__button.dragging,.el-slider__button.hover,.el-slider__button:hover{transform:scale(1.5);background-color:#1c8de0}.el-slider__button.hover,.el-slider__button:hover{cursor:-webkit-grab;cursor:grab}.el-slider__button.dragging{cursor:-webkit-grabbing;cursor:grabbing}.el-slider__stop{position:absolute;width:4px;height:4px;border-radius:100%;background-color:#bfcbd9;transform:translateX(-50%)}.el-loading-mask{position:absolute;z-index:10000;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{width:50px;height:50px}.el-loading-spinner{top:50%;margin-top:-21px;width:100%;text-align:center;position:absolute}.el-loading-spinner .el-loading-text{color:#20a0ff;margin:3px 0;font-size:14px}.el-loading-spinner .circular{width:42px;height: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:#20a0ff;stroke-linecap:round}.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--flex{display:-ms-flexbox;display:flex}.el-row--flex:after,.el-row--flex:before{display:none}.el-row--flex.is-align-bottom{-ms-flex-align:end;align-items:flex-end}.el-row--flex.is-align-middle{-ms-flex-align:center;align-items:center}.el-row--flex.is-justify-space-around{-ms-flex-pack:distribute;justify-content:space-around}.el-row--flex.is-justify-space-between{-ms-flex-pack:justify;justify-content:space-between}.el-row--flex.is-justify-end{-ms-flex-pack:end;justify-content:flex-end}.el-row--flex.is-justify-center{-ms-flex-pack:center;justify-content:center}.el-col-1,.el-col-2,.el-col-3,.el-col-4,.el-col-5,.el-col-6,.el-col-7,.el-col-8,.el-col-9,.el-col-10,.el-col-11,.el-col-12,.el-col-13,.el-col-14,.el-col-15,.el-col-16,.el-col-17,.el-col-18,.el-col-19,.el-col-20,.el-col-21,.el-col-22,.el-col-23,.el-col-24{float:left;box-sizing:border-box}.el-col-0{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 (max-width:768px){.el-col-xs-0{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 (min-width:768px){.el-col-sm-0{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 (min-width:992px){.el-col-md-0{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 (min-width:1200px){.el-col-lg-0{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%}}.el-upload{display:inline-block;text-align:center;cursor:pointer}.el-upload iframe{position:absolute;z-index:-1;top:0;left:0;opacity:0;filter:alpha(opacity=0)}.el-upload__input{display:none}.el-upload__tip{font-size:12px;color:#8391a5;margin-top:7px}.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{border-color:#20a0ff;color:#20a0ff}.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-upload__text{color:#97a8be;font-size:14px;text-align:center}.el-upload-dragger .el-upload__text em{color:#20a0ff;font-style:normal}.el-upload-dragger .el-icon-upload{font-size:67px;color:#97a8be;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 rgba(191,203,217,.2);margin-top:7px;padding-top:5px}.el-upload-dragger:hover{border-color:#20a0ff}.el-upload-dragger.is-dragover{background-color:rgba(32,159,255,.06);border:2px dashed #20a0ff}.el-upload-list{margin:0;padding:0;list-style:none}.el-upload-list.is-disabled .el-upload-list__item:hover .el-upload-list__item-status-label{display:block}.el-upload-list__item{transition:all .5s cubic-bezier(.55,0,.1,1);font-size:14px;color:#48576a;line-height:1.8;margin-top:5px;box-sizing:border-box;border-radius:4px;width:100%;position:relative}.el-upload-list__item .el-progress-bar{margin-right:0;padding-right:0}.el-upload-list__item .el-progress{position:absolute;top:20px;width:100%}.el-upload-list__item .el-progress__text{position:absolute;top:-13px;right:0}.el-upload-list__item:first-child{margin-top:10px}.el-upload-list__item .el-icon-upload-success{color:#13ce66}.el-upload-list__item .el-icon-close{display:none;position:absolute;top:5px;right:5px;cursor:pointer;opacity:.75;color:#48576a;transform:scale(.7)}.el-upload-list__item .el-icon-close:hover{opacity:1}.el-upload-list__item:hover{background-color:#eef1f6}.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:hover{color:#20a0ff;cursor:pointer}.el-upload-list__item.is-success:hover .el-upload-list__item-status-label{display:none}.el-upload-list__item-name{color:#48576a;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]{color:#97a8be;margin-right:7px;height:100%;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:#48576a;display:none}.el-upload-list__item-delete:hover{color:#20a0ff}.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) scale(.8)}.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 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;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) scale(.8)}.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 img{display:block;width:100%;height:100%}.el-upload-cover+.el-upload__inner{opacity:0;position:relative;z-index:1}.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) scale(.8);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) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;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:#48576a}.el-progress{position:relative;line-height:1}.el-progress.is-exception .el-progress-bar__inner{background-color:#ff4949}.el-progress.is-exception .el-progress__text{color:#ff4949}.el-progress.is-success .el-progress-bar__inner{background-color:#13ce66}.el-progress.is-success .el-progress__text{color:#13ce66}.el-progress__text{font-size:14px;color:#48576a;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-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:#e4e8f1;overflow:hidden;position:relative;vertical-align:middle}.el-progress-bar__inner{position:absolute;left:0;top:0;height:100%;border-radius:2px 0 0 2px;background-color:#20a0ff;text-align:right;border-radius:100px;line-height:1;white-space:nowrap}.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{box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);min-width:300px;padding:10px 12px;box-sizing:border-box;border-radius:2px;position:fixed;left:50%;top:20px;transform:translateX(-50%);background-color:#fff;transition:opacity .3s,transform .4s;overflow:hidden}.el-message .el-icon-circle-check{color:#13ce66}.el-message .el-icon-circle-cross{color:#ff4949}.el-message .el-icon-information{color:#50bfff}.el-message .el-icon-warning{color:#f7ba2a}.el-message__group{margin-left:38px;position:relative;height:20px;line-height:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.el-message__group p{font-size:14px;margin:0 34px 0 0;white-space:nowrap;color:#8391a5;text-align:justify}.el-message__group.is-with-icon{margin-left:0}.el-message__img{width:40px;height:40px;position:absolute;left:0;top:0}.el-message__icon{vertical-align:middle;margin-right:8px}.el-message__closeBtn{top:3px;right:0;position:absolute;cursor:pointer;color:#bfcbd9;font-size:14px}.el-message__closeBtn:hover{color:#97a8be}.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:#ff4949;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-dot{width:8px;height:8px;padding:0;right:0;border-radius:50%}.el-badge__content.is-fixed{top:0;right:10px;position:absolute;transform:translateY(-50%) translateX(100%)}.el-badge__content.is-fixed.is-dot{right:5px}.el-card{border:1px solid #d1dbe5;border-radius:4px;background-color:#fff;overflow:hidden;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-card__header{padding:18px 20px;border-bottom:1px solid #d1dbe5;box-sizing:border-box}.el-card__body{padding:20px}.el-rate{height:20px;line-height:1}.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:#bfcbd9;transition:.3s}.el-rate__icon .path2{position:absolute;left:0;top:0}.el-rate__icon.hover{transform:scale(1.15)}.el-rate__decimal{position:absolute;top:0;left:0;display:inline-block;overflow:hidden}.el-rate__text{font-size:14px;vertical-align:middle}.el-steps{font-size:0}.el-steps>:last-child .el-step__line{display:none}.el-steps.is-horizontal{white-space:nowrap}.el-steps.is-horizontal.is-center{text-align:center}.el-step{position:relative;vertical-align:top}.el-step:last-child .el-step__main{padding-right:0}.el-step.is-vertical .el-step__head,.el-step.is-vertical .el-step__main{display:inline-block}.el-step.is-vertical .el-step__main{padding-left:10px}.el-step.is-horizontal,.el-step__line{display:inline-block}.el-step__line{position:absolute;border-color:inherit;background-color:#bfcbd9}.el-step__line.is-vertical{width:2px;box-sizing:border-box;top:32px;bottom:0;left:15px}.el-step__line.is-horizontal{top:15px;height:2px;left:32px;right:0}.el-step__line.is-icon.is-horizontal{right:4px}.el-step__line-inner{display:block;border-width:1px;border-style:solid;border-color:inherit;transition:all .15s;box-sizing:border-box;width:0;height:0}.el-step__icon{display:block;line-height:28px}.el-step__icon>*{line-height:inherit;vertical-align:middle}.el-step__head{width:28px;height:28px;border-radius:50%;background-color:transparent;text-align:center;line-height:28px;font-size:28px;vertical-align:top;transition:all .15s}.el-step__head.is-finish{color:#20a0ff;border-color:#20a0ff}.el-step__head.is-error{color:#ff4949;border-color:#ff4949}.el-step__head.is-success{color:#13ce66;border-color:#13ce66}.el-step__head.is-process,.el-step__head.is-wait{color:#bfcbd9;border-color:#bfcbd9}.el-step__head.is-text{font-size:14px;border-width:2px;border-style:solid}.el-step__head.is-text.is-finish{color:#fff;background-color:#20a0ff;border-color:#20a0ff}.el-step__head.is-text.is-error{color:#fff;background-color:#ff4949;border-color:#ff4949}.el-step__head.is-text.is-success{color:#fff;background-color:#13ce66;border-color:#13ce66}.el-step__head.is-text.is-wait{color:#bfcbd9;background-color:#fff;border-color:#bfcbd9}.el-step__head.is-text.is-process{color:#fff;background-color:#bfcbd9;border-color:#bfcbd9}.el-step__main{white-space:normal;padding-right:10px;text-align:left}.el-step__title{font-size:14px;line-height:32px;display:inline-block}.el-step__title.is-finish{font-weight:700;color:#20a0ff}.el-step__title.is-error{font-weight:700;color:#ff4949}.el-step__title.is-success{font-weight:700;color:#13ce66}.el-step__title.is-wait{font-weight:400;color:#97a8be}.el-step__title.is-process{font-weight:700;color:#48576a}.el-step__description{font-size:12px;font-weight:400;line-height:14px}.el-step__description.is-finish{color:#20a0ff}.el-step__description.is-error{color:#ff4949}.el-step__description.is-success{color:#13ce66}.el-step__description.is-wait{color:#bfcbd9}.el-step__description.is-process{color:#8391a5}.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;width:36px;height: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:hover{background-color:rgba(31,45,61,.23)}.el-carousel__arrow i{cursor:pointer}.el-carousel__arrow--left{left:16px}.el-carousel__arrow--right{right:16px}.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:#8391a5;opacity:.24}.el-carousel__indicators--labels{left:0;right:0;transform:none;text-align:center}.el-carousel__indicators--labels .el-carousel__button{width:auto;height: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}.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(151,168,190,.3);transition:background-color .3s}.el-scrollbar__thumb:hover{background-color:rgba(151,168,190,.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-horizontal{height:6px;left:2px}.el-scrollbar__bar.is-horizontal>div{height:100%}.el-scrollbar__bar.is-vertical{width:6px;top:2px}.el-scrollbar__bar.is-vertical>div{width: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-animating{transition:transform .4s ease-in-out}.el-carousel__item.is-active{z-index:2}.el-carousel__item--card{width:50%;transition:transform .4s ease-in-out}.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}.el-collapse{border:1px solid #dfe6ec;border-radius:0}.el-collapse-item:last-child{margin-bottom:-1px}.el-collapse-item.is-active>.el-collapse-item__header .el-collapse-item__header__arrow{transform:rotate(90deg)}.el-collapse-item__header{height:43px;line-height:43px;padding-left:15px;background-color:#fff;color:#48576a;cursor:pointer;border-bottom:1px solid #dfe6ec;font-size:13px}.el-collapse-item__header__arrow{margin-right:8px;transition:transform .3s}.el-collapse-item__wrap{will-change:height;background-color:#fbfdff;overflow:hidden;box-sizing:border-box;border-bottom:1px solid #dfe6ec}.el-collapse-item__content{padding:10px 15px;font-size:13px;color:#1f2d3d;line-height:1.769230769230769}.el-cascader{display:inline-block;position:relative}.el-cascader .el-input,.el-cascader .el-input__inner{cursor:pointer}.el-cascader .el-input__icon{transition:none}.el-cascader .el-icon-caret-bottom{transition:transform .3s}.el-cascader .el-icon-caret-bottom.is-reverse{transform:rotate(180deg)}.el-cascader .el-icon-circle-close{z-index:2}.el-cascader.is-disabled .el-cascader__label{z-index:2;color:#bbb}.el-cascader__label{position:absolute;left:0;top:0;height:100%;line-height:36px;padding:0 25px 0 10px;color:#1f2d3d;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:left}.el-cascader__label span{color:#97a8be}.el-cascader--large{font-size:16px}.el-cascader--large .el-cascader__label{line-height:40px}.el-cascader--small{font-size:13px}.el-cascader--small .el-cascader__label{line-height:28px}.el-cascader-menus{white-space:nowrap;background:#fff;position:absolute;margin:5px 0;z-index:2;border:1px solid #d1dbe5;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04)}.el-cascader-menu{display:inline-block;vertical-align:top;height:204px;overflow:auto;border-right:1px solid #d1dbe5;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 30px 8px 10px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#48576a;height:36px;line-height:1.5;box-sizing:border-box;cursor:pointer}.el-cascader-menu__item:hover{background-color:#e4e8f1}.el-cascader-menu__item.selected{color:#fff;background-color:#20a0ff}.el-cascader-menu__item.selected.hover{background-color:#1c8de0}.el-cascader-menu__item.is-active{color:#fff;background-color:#20a0ff}.el-cascader-menu__item.is-active:hover{background-color:#1c8de0}.el-cascader-menu__item.is-disabled{color:#bfcbd9;background-color:#fff;cursor:not-allowed}.el-cascader-menu__item.is-disabled:hover{background-color:#fff}.el-cascader-menu__item__keyword{font-weight:700}.el-cascader-menu__item--extensible:after{font-family:element-icons;content:"\E606";font-size:12px;transform:scale(.8);color:#bfcbd9;position:absolute;right:10px;margin-top:1px}.el-cascader-menu--flexible{height:auto;max-height:180px;overflow:auto}.el-cascader-menu--flexible .el-cascader-menu__item{overflow:visible}.el-color-hue-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background-color:red;padding:0 2px}.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-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-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.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-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-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:#1f2d3d}.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:#20a0ff;border-color:#20a0ff}.el-color-dropdown__link-btn{cursor:pointer;color:#20a0ff;text-decoration:none;padding:15px;font-size:12px}.el-color-dropdown__link-btn:hover{color:#4db3ff}.el-color-picker{display:inline-block;position:relative;line-height:normal}.el-color-picker__trigger{display:inline-block;box-sizing:border-box;height:36px;padding:6px;border:1px solid #bfcbd9;border-radius:4px;font-size:0}.el-color-picker__color{position:relative;display:inline-block;box-sizing:border-box;border:1px solid #666;width:22px;height:22px;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{font-size:12px;vertical-align:middle;color:#666;position:absolute;top:4px;left:4px}.el-color-picker__icon{display:inline-block;position:relative;top:-6px;margin-left:8px;width:12px;color:#888;font-size:12px}.el-color-picker__panel{position:absolute;z-index:10;padding:6px;background-color:#fff;border:1px solid #d1dbe5;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.12)}.el-input{position:relative;font-size:14px;display:inline-block;width:100%}.el-input.is-disabled .el-input__inner{background-color:#eef1f6;border-color:#d1dbe5;color:#bbb;cursor:not-allowed}.el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#bfcbd9}.el-input.is-disabled .el-input__inner::-moz-placeholder{color:#bfcbd9}.el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#bfcbd9}.el-input.is-disabled .el-input__inner::placeholder{color:#bfcbd9}.el-input.is-active .el-input__inner{outline:none;border-color:#20a0ff}.el-input__inner{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #bfcbd9;box-sizing:border-box;color:#1f2d3d;display:inline-block;font-size:inherit;height:36px;line-height:1;outline:none;padding:3px 10px;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.el-input__inner::-webkit-input-placeholder{color:#97a8be}.el-input__inner::-moz-placeholder{color:#97a8be}.el-input__inner:-ms-input-placeholder{color:#97a8be}.el-input__inner::placeholder{color:#97a8be}.el-input__inner:hover{border-color:#8391a5}.el-input__inner:focus{outline:none;border-color:#20a0ff}.el-input__icon{position:absolute;width:35px;height:100%;right:0;top:0;text-align:center;color:#bfcbd9;transition:all .3s}.el-input__icon:after{content:"";height:100%;width:0;display:inline-block;vertical-align:middle}.el-input__icon+.el-input__inner{padding-right:35px}.el-input__icon.is-clickable:hover{cursor:pointer;color:#8391a5}.el-input__icon.is-clickable:hover+.el-input__inner{border-color:#8391a5}.el-input--large{font-size:16px}.el-input--large .el-input__inner{height:42px}.el-input--small{font-size:13px}.el-input--small .el-input__inner{height:30px}.el-input--mini{font-size:12px}.el-input--mini .el-input__inner{height:22px}.el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate}.el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.el-input-group__append,.el-input-group__prepend{background-color:#fbfdff;color:#97a8be;vertical-align:middle;display:table-cell;position:relative;border:1px solid #bfcbd9;border-radius:4px;padding:0 10px;width:1px;white-space:nowrap}.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:block;margin:-10px}.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--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.el-textarea{display:inline-block;width:100%;vertical-align:bottom}.el-textarea.is-disabled .el-textarea__inner{background-color:#eef1f6;border-color:#d1dbe5;color:#bbb;cursor:not-allowed}.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#bfcbd9}.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder{color:#bfcbd9}.el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#bfcbd9}.el-textarea.is-disabled .el-textarea__inner::placeholder{color:#bfcbd9}.el-textarea__inner{display:block;resize:vertical;padding:5px 7px;line-height:1.5;box-sizing:border-box;width:100%;font-size:14px;color:#1f2d3d;background-color:#fff;background-image:none;border:1px solid #bfcbd9;border-radius:4px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-textarea__inner::-webkit-input-placeholder{color:#97a8be}.el-textarea__inner::-moz-placeholder{color:#97a8be}.el-textarea__inner:-ms-input-placeholder{color:#97a8be}.el-textarea__inner::placeholder{color:#97a8be}.el-textarea__inner:hover{border-color:#8391a5}.el-textarea__inner:focus{outline:none;border-color:#20a0ff}.el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #bfcbd9;border-color:#c4c4c4;color:#1f2d3d;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:10px 15px;font-size:14px;border-radius:4px}.el-button+.el-button{margin-left:10px}.el-button:focus,.el-button:hover{color:#20a0ff;border-color:#20a0ff}.el-button:active{color:#1d90e6;border-color:#1d90e6;outline:none}.el-button::-moz-focus-inner{border:0}.el-button [class*=el-icon-]+span{margin-left:5px}.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-disabled,.el-button.is-disabled:focus,.el-button.is-disabled:hover{color:#bfcbd9;cursor:not-allowed;background-image:none;background-color:#eef1f6;border-color:#d1dbe5}.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:#d1dbe5;color:#bfcbd9}.el-button.is-active{color:#1d90e6;border-color:#1d90e6}.el-button.is-plain:focus,.el-button.is-plain:hover{background:#fff;border-color:#20a0ff;color:#20a0ff}.el-button.is-plain:active{background:#fff;border-color:#1d90e6;color:#1d90e6;outline:none}.el-button--primary{color:#fff;background-color:#20a0ff;border-color:#20a0ff}.el-button--primary:focus,.el-button--primary:hover{background:#4db3ff;border-color:#4db3ff;color:#fff}.el-button--primary:active{outline:none}.el-button--primary.is-active,.el-button--primary:active{background:#1d90e6;border-color:#1d90e6;color:#fff}.el-button--primary.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--primary.is-plain:focus,.el-button--primary.is-plain:hover{background:#fff;border-color:#20a0ff;color:#20a0ff}.el-button--primary.is-plain:active{background:#fff;border-color:#1d90e6;color:#1d90e6;outline:none}.el-button--success{color:#fff;background-color:#13ce66;border-color:#13ce66}.el-button--success:focus,.el-button--success:hover{background:#42d885;border-color:#42d885;color:#fff}.el-button--success:active{outline:none}.el-button--success.is-active,.el-button--success:active{background:#11b95c;border-color:#11b95c;color:#fff}.el-button--success.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--success.is-plain:focus,.el-button--success.is-plain:hover{background:#fff;border-color:#13ce66;color:#13ce66}.el-button--success.is-plain:active{background:#fff;border-color:#11b95c;color:#11b95c;outline:none}.el-button--warning{color:#fff;background-color:#f7ba2a;border-color:#f7ba2a}.el-button--warning:focus,.el-button--warning:hover{background:#f9c855;border-color:#f9c855;color:#fff}.el-button--warning:active{outline:none}.el-button--warning.is-active,.el-button--warning:active{background:#dea726;border-color:#dea726;color:#fff}.el-button--warning.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--warning.is-plain:focus,.el-button--warning.is-plain:hover{background:#fff;border-color:#f7ba2a;color:#f7ba2a}.el-button--warning.is-plain:active{background:#fff;border-color:#dea726;color:#dea726;outline:none}.el-button--danger{color:#fff;background-color:#ff4949;border-color:#ff4949}.el-button--danger:focus,.el-button--danger:hover{background:#ff6d6d;border-color:#ff6d6d;color:#fff}.el-button--danger:active{outline:none}.el-button--danger.is-active,.el-button--danger:active{background:#e64242;border-color:#e64242;color:#fff}.el-button--danger.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--danger.is-plain:focus,.el-button--danger.is-plain:hover{background:#fff;border-color:#ff4949;color:#ff4949}.el-button--danger.is-plain:active{background:#fff;border-color:#e64242;color:#e64242;outline:none}.el-button--info{color:#fff;background-color:#50bfff;border-color:#50bfff}.el-button--info:focus,.el-button--info:hover{background:#73ccff;border-color:#73ccff;color:#fff}.el-button--info:active{outline:none}.el-button--info.is-active,.el-button--info:active{background:#48ace6;border-color:#48ace6;color:#fff}.el-button--info.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--info.is-plain:focus,.el-button--info.is-plain:hover{background:#fff;border-color:#50bfff;color:#50bfff}.el-button--info.is-plain:active{background:#fff;border-color:#48ace6;color:#48ace6;outline:none}.el-button--large{padding:11px 19px;font-size:16px;border-radius:4px}.el-button--small{padding:7px 9px;font-size:12px;border-radius:4px}.el-button--mini{padding:4px;font-size:12px;border-radius:4px}.el-button--text{border:none;color:#20a0ff;background:transparent;padding-left:0;padding-right:0}.el-button--text:focus,.el-button--text:hover{color:#4db3ff}.el-button--text:active{color:#1d90e6}.el-button-group{display:inline-block;vertical-align:middle}.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-button-group .el-button{float:left;position:relative}.el-button-group .el-button+.el-button{margin-left:0}.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: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-checkbox{color:#1f2d3d;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.el-checkbox+.el-checkbox{margin-left:15px}.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-indeterminate .el-checkbox__inner{background-color:#20a0ff;border-color:#0190fe}.el-checkbox__input.is-indeterminate .el-checkbox__inner:before{content:"";position:absolute;display:block;border:1px solid #fff;margin-top:-1px;left:3px;right:3px;top:50%}.el-checkbox__input.is-indeterminate .el-checkbox__inner:after{display:none}.el-checkbox__input.is-focus .el-checkbox__inner{border-color:#20a0ff}.el-checkbox__input.is-checked .el-checkbox__inner{background-color:#20a0ff;border-color:#0190fe}.el-checkbox__input.is-checked .el-checkbox__inner:after{transform:rotate(45deg) scaleY(1)}.el-checkbox__input.is-disabled .el-checkbox__inner{background-color:#eef1f6;border-color:#d1dbe5;cursor:not-allowed}.el-checkbox__input.is-disabled .el-checkbox__inner:after{cursor:not-allowed;border-color:#eef1f6}.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:#d1dbe5;border-color:#d1dbe5}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after{border-color:#fff}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner{background-color:#d1dbe5;border-color:#d1dbe5}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner:before{border-color:#fff}.el-checkbox__input.is-disabled+.el-checkbox__label{color:#bbb;cursor:not-allowed}.el-checkbox__inner{display:inline-block;position:relative;border:1px solid #bfcbd9;border-radius:4px;box-sizing:border-box;width:18px;height:18px;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:#20a0ff}.el-checkbox__inner:after{box-sizing:content-box;content:"";border:2px solid #fff;border-left:0;border-top:0;height:8px;left:5px;position:absolute;top:1px;transform:rotate(45deg) scaleY(0);width:4px;transition:transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;transform-origin:center}.el-checkbox__original{opacity:0;outline:none;position:absolute;margin:0;width:0;height:0;left:-999px}.el-checkbox__label{font-size:14px;padding-left:5px}.el-checkbox-button{position:relative;display:inline-block}.el-checkbox-button.is-checked .el-checkbox-button__inner{color:#fff;background-color:#20a0ff;border-color:#20a0ff;box-shadow:-1px 0 0 0 #20a0ff}.el-checkbox-button.is-disabled .el-checkbox-button__inner{color:#bfcbd9;cursor:not-allowed;background-image:none;background-color:#eef1f6;border-color:#d1dbe5;box-shadow:none}.el-checkbox-button.is-focus .el-checkbox-button__inner{border-color:#20a0ff}.el-checkbox-button:first-child .el-checkbox-button__inner{border-left:1px solid #bfcbd9;border-radius:4px 0 0 4px;box-shadow:none!important}.el-checkbox-button:last-child .el-checkbox-button__inner{border-radius:0 4px 4px 0}.el-checkbox-button__inner{display:inline-block;line-height:1;white-space:nowrap;vertical-align:middle;background:#fff;border:1px solid #bfcbd9;border-left:0;color:#1f2d3d;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;position:relative;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:10px 15px;font-size:14px;border-radius:0}.el-checkbox-button__inner:hover{color:#20a0ff}.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;visibility:hidden;left:-999px}.el-checkbox-button--large .el-checkbox-button__inner{padding:11px 19px;font-size:16px;border-radius:0}.el-checkbox-button--small .el-checkbox-button__inner{padding:7px 9px;font-size:12px;border-radius:0}.el-checkbox-button--mini .el-checkbox-button__inner{padding:4px;font-size:12px;border-radius:0}.el-transfer{font-size:14px}.el-transfer__buttons{display:inline-block;vertical-align:middle;padding:0 10px}.el-transfer__buttons .el-button{display:block;margin:0 auto;padding:8px 12px}.el-transfer__buttons .el-button:first-child{margin-bottom:6px}.el-transfer__buttons .el-button [class*=el-icon-]+span{margin-left:0}.el-transfer-panel{border:1px solid #d1dbe5;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);display:inline-block;vertical-align:middle;width:200px;box-sizing:border-box;position:relative}.el-transfer-panel .el-transfer-panel__header{height:36px;line-height:36px;background:#fbfdff;margin:0;padding-left:20px;border-bottom:1px solid #d1dbe5;box-sizing:border-box;color:#1f2d3d}.el-transfer-panel .el-transfer-panel__footer{height:36px;background:#fff;margin:0;padding:0;border-top:1px solid #d1dbe5;position:absolute;bottom:0;left:0;width:100%;z-index:1}.el-transfer-panel .el-transfer-panel__footer .el-checkbox{padding-left:20px;color:#8391a5}.el-transfer-panel .el-transfer-panel__empty{margin:0;height:32px;line-height:32px;padding:6px 20px 0;color:#8391a5}.el-transfer-panel .el-checkbox__label{padding-left:14px}.el-transfer-panel .el-checkbox__inner{width:14px;height:14px;border-radius:3px}.el-transfer-panel .el-checkbox__inner:after{height:6px;width:3px;left:4px}.el-transfer-panel__body{padding-bottom:36px;height:246px}.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:214px}.el-transfer-panel__item{height:32px;line-height:32px;padding-left:20px;display:block}.el-transfer-panel__item .el-checkbox__label{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;box-sizing:border-box;padding-left:28px}.el-transfer-panel__item .el-checkbox__input{position:absolute;top:9px}.el-transfer-panel__item+.el-transfer-panel__item{margin-left:0}.el-transfer-panel__item.el-checkbox{color:#48576a}.el-transfer-panel__item:hover{background:#e4e8f1}.el-transfer-panel__filter{margin-top:10px;text-align:center;padding:0 10px;width:100%;box-sizing:border-box}.el-transfer-panel__filter .el-input__inner{height:22px;width:100%;display:inline-block;box-sizing:border-box}.el-transfer-panel__filter .el-input__icon{right:10px}.el-transfer-panel__filter .el-icon-circle-close{cursor:pointer}.demo-block{border:1px solid #eaeefb;border-radius:4px;transition:.2s}.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:#f9fafc;border-top:1px solid #eaeefb;clear:both;overflow:hidden;height:0;transition:height .2s}.demo-block .description{padding:18px 24px;width:40%;box-sizing:border-box;border-left:1px solid #eaeefb;float:right;font-size:14px;line-height:1.8;color:#5e6d82;word-break:break-word}.demo-block .description p{margin:0 0 12px;line-height:1.8}.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{width:60%;border-right:1px solid #eaeefb}.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:36px;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;transition:.2s;position:relative}.demo-block .demo-block-control i{font-size:12px;line-height:36px;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:36px;transition:.3s;display:inline-block}.demo-block .demo-block-control:hover{color:#20a0ff;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.hover{box-shadow:0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)}.footer{height:120px;background-color:#324057;color:#a4aebd;width:100%;z-index:1000;margin-top:-120px}.footer *{word-spacing:0}.footer .container{height:100%;box-sizing:border-box}.footer .footer-main{font-size:0;padding-top:40px;display:inline-block}.footer .footer-main .footer-main-title{line-height:1;font-size:22px;margin:0}.footer .footer-main .footer-main-link{display:inline-block;margin:12px 18px 0 0;line-height:1;font-size:12px;color:#768193}.footer .footer-main .footer-main-link a{color:#768193;text-decoration:none}.footer .footer-social{float:right;line-height:120px}.footer .footer-social .elementdoc{transition:.3s;display:inline-block;line-height:32px;text-align:center;color:#8d99ab;background-color:transparent;width:32px;height:32px;font-size:32px;vertical-align:middle}.footer .footer-social .elementdoc:hover{transform:scale(1.2)}.footer .footer-social .doc-icon-weixin{margin-right:36px}.footer .footer-social .doc-icon-weixin:hover{color:#fff}.footer .footer-social .doc-icon-github{margin-right:0}.footer .footer-social .doc-icon-github:hover{color:#fff}.footer-popover{padding:0;min-width:120px;line-height:normal;box-shadow:0 0 11px 0 rgba(174,187,211,.24)}.footer-popover .footer-popover-title{border-bottom:1px solid #eaeefb;height:30px;line-height:30px;text-align:center;color:#99a9bf;background-color:#f8f9fe}.footer-popover img{width:100px;height:100px;margin:10px}@media (max-width:768px){.footer .footer-social{display:none}}.header .nav[data-v-7ad4e6e1]:after,.header .nav[data-v-7ad4e6e1]:before{display:table;content:""}.header .nav[data-v-7ad4e6e1]:after{clear:both}.headerWrapper[data-v-7ad4e6e1]{height:80px}.header[data-v-7ad4e6e1]{height:80px;background-color:#20a0ff;color:#fff;top:0;left:0;width:100%;line-height:80px;z-index:100;position:relative}.header .container[data-v-7ad4e6e1]{height:100%;box-sizing:border-box}.header h1[data-v-7ad4e6e1]{margin:0;float:left;font-size:32px;font-weight:400}.header h1 a[data-v-7ad4e6e1]{color:#fff;text-decoration:none;display:block}.header h1 span[data-v-7ad4e6e1]{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-7ad4e6e1]{float:right;height:100%;line-height:80px;background:transparent;padding:0;margin:0}.header .nav-logo-small[data-v-7ad4e6e1],.header .nav-logo[data-v-7ad4e6e1]{vertical-align:sub}.header .nav-logo-small[data-v-7ad4e6e1]{display:none}.header .nav-item[data-v-7ad4e6e1]{margin:0;float:left;list-style:none;position:relative;cursor:pointer;margin-left:20px}.header .nav-item a[data-v-7ad4e6e1]{text-decoration:none;color:#fff;display:block;padding:0 20px;opacity:.8}.header .nav-item a.active[data-v-7ad4e6e1],.header .nav-item a[data-v-7ad4e6e1]:hover{opacity:1}.header .nav-item a.active[data-v-7ad4e6e1]{font-weight:700}.header .nav-item a.active[data-v-7ad4e6e1]:before{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:4px;background:#99d2fc}.header .nav-item[data-v-7ad4e6e1]:last-child{cursor:default;margin-left:34px}.header .nav-item:last-child span[data-v-7ad4e6e1]{opacity:.8}.header .nav-item:last-child .nav-lang[data-v-7ad4e6e1]{cursor:pointer;display:inline-block;height:100%}.header .nav-item:last-child .nav-lang[data-v-7ad4e6e1]:hover{opacity:1}.header .nav-item:last-child .nav-lang.active[data-v-7ad4e6e1]{font-weight:700;opacity:1}.header-home[data-v-7ad4e6e1]{position:fixed;top:0;background-color:rgba(32,160,255,0)}@media (max-width:850px){.header .nav-logo[data-v-7ad4e6e1]{display:none}.header .nav-logo-small[data-v-7ad4e6e1]{display:inline-block}.header .nav-item[data-v-7ad4e6e1]{margin-left:6px}.header .nav-item a[data-v-7ad4e6e1]{padding:0 5px}.header .nav-item[data-v-7ad4e6e1]:last-child{margin-left:10px}}@media (max-width:700px){.header .container[data-v-7ad4e6e1]{padding:0 12px}.header .nav-item a[data-v-7ad4e6e1],.header .nav-lang[data-v-7ad4e6e1]{font-size:12px;vertical-align:top}}.side-nav{width:100%;box-sizing:border-box;padding-right:30px}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-dropdown{margin-bottom:6px;width:100%}.side-nav .nav-dropdown span{display:block;width:100%;font-size:16px;color:#5e6d82;line-height:40px;transition:.2s;padding-bottom:6px;border-bottom:1px solid #eaeefb}.side-nav .nav-dropdown span:hover{cursor:pointer}.side-nav .nav-dropdown i{transition:.2s;font-size:12px;color:#d3dce6}.side-nav .nav-dropdown.is-active i,.side-nav .nav-dropdown.is-active span,.side-nav .nav-dropdown:hover i,.side-nav .nav-dropdown:hover span{color:#20a0ff}.side-nav .nav-dropdown.is-active i{transform:rotate(180deg) translateY(2px)}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}.side-nav #code-sponsor-widget{margin:50px 0 0 -20px}.nav-dropdown-list{width:120px;margin-top:-8px}.nav-dropdown-list li{font-size:14px}.footer-nav{padding:24px 0;color:#99a9bf;font-size:14px}.footer-nav:after{content:"";display:block;clear:both}.footer-nav i{transition:.3s;color:#d9def1;vertical-align:baseline}.footer-nav-link{cursor:pointer;transition:.3s}.footer-nav-link:hover,.footer-nav-link:hover i{color:#20a0ff}.footer-nav-left{float:left;margin-left:-4px}.footer-nav-right{float:right;margin-right:-4px} \ No newline at end of file +.hljs{display:block;overflow-x:auto;padding:.5em;background:#fff}.hljs,.hljs-subst{color:#000}.hljs-addition,.hljs-meta,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable{color:#756bb1}.hljs-comment,.hljs-quote{color:#636363}.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-regexp{color:#31a354}.hljs-deletion,.hljs-variable{color:#88f}.hljs-built_in,.hljs-doctag,.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-strong,.hljs-tag,.hljs-title,.hljs-type{color:#3182bd}.hljs-emphasis{font-style:italic}.hljs-attribute{color:#e6550d}@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:application/x-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:application/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,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE+R2VuZXJhdGVkIGJ5IEljb01vb248L21ldGFkYXRhPgo8ZGVmcz4KPGZvbnQgaWQ9Imljb21vb24iIGhvcml6LWFkdi14PSIxMDI0Ij4KPGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiIC8+CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSIxMDI0IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjA7IiBob3Jpei1hZHYteD0iNTEyIiBkPSIiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAwOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLW9mZiIgZD0iTTAgNDQ4YzAgMjgyLjc2NiAyMjkuMjM0IDUxMiA1MTIgNTEyczUxMi0yMjkuMjM0IDUxMi01MTJjMC0yODIuNzY2LTIyOS4yMzQtNTEyLTUxMi01MTJzLTUxMiAyMjkuMjM0LTUxMiA1MTJ6TTk0Ny4yIDQ0OGMwIDI0MC4zNTEtMTk0Ljg0OSA0MzUuMi00MzUuMiA0MzUuMnMtNDM1LjItMTk0Ljg0OS00MzUuMi00MzUuMmMwLTI0MC4zNTEgMTk0Ljg0OS00MzUuMiA0MzUuMi00MzUuMnM0MzUuMiAxOTQuODQ5IDQzNS4yIDQzNS4yek0yOTQuNCA1ODguODUzYzAgMjguMjQ3IDIyLjcyNiA1MS4xNDcgNTEuMiA1MS4xNDcgMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3pNNjI3LjIgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6TTM2MS4xNDMgMjgxLjZjLTIyLjcxMSAwLTQxLjE0My0xOC42MzctNDEuMTQzLTQxLjZzMTguNDMyLTQxLjYgNDEuMTQzLTQxLjZoMzAxLjcxNGMyMi43MTEgMCA0MS4xNDMgMTguNjM3IDQxLjE0MyA0MS42cy0xOC40MzIgNDEuNi00MS4xNDMgNDEuNmgtMzAxLjcxNHoiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAxOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLTEiIGQ9Ik01MTIuMDAxIDk2MGMtMjgyLjc3MSAwLTUxMi4wMDEtMjI5LjIzLTUxMi4wMDEtNTEyLjAwMiAwLTI4Mi43NyAyMjkuMjMtNTExLjk5OCA1MTIuMDAxLTUxMS45OTggMjgyLjc2OSAwIDUxMS45OTkgMjI5LjIyNyA1MTEuOTk5IDUxMS45OThzLTIyOS4yMyA1MTIuMDAyLTUxMS45OTkgNTEyLjAwMnpNMjk0LjQgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6TTYyNy4yIDU4OC44NTNjMCAyOC4yNDcgMjIuNzI2IDUxLjE0NyA1MS4yIDUxLjE0NyAyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3ek02OTQuNTI5IDE4MS4xOTdsLTMuNDIyIDEuMjE2Yy01Ni4xNSAyNy44NzItMTE2LjM4OCA0Mi4wNDctMTc4Ljg4MiA0Mi4wNDctNjQuNTU2IDAtMTI1LjYxMS0xNC4zMTYtMTgxLjUxNS00Mi40NWwtMy4zODItMS4xMzJjLTIuMTAyLTAuNjI4LTQuOTQ1LTEuNTI5LTguNDg5LTEuNTI5LTIwLjU1NCAwLTM3LjIzOSAxOC4yOS0zNy4yMzkgNDAuNzM0IDAgMTAuNjU1IDQuNTcxIDIxLjM2MSAxMi4xMTQgMjkuMzk5bC0wLjQ1NiAyLjQ4MyA5LjUxNiA0LjY5OGM2Ni43NCAzMy4xMDQgMTM5LjMzNiA1MC41MzcgMjA5LjkwNyA1MC41MzcgNzEuODg5IDAgMTQyLjMzNi0xNi45ODQgMjEwLjMxNC01MC45NDggMTEuOTQzLTcuMTgxIDE5LjQwNS0yMC45NTMgMTkuNDA1LTM1LjkwMyAwLTI2LjMyOC0yMS43MS00Ny45NTgtNDcuODcxLTM5LjE1M3oiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAyOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLTIiIGQ9Ik01MTItNjRjLTI4Mi43NjYgMC01MTIgMjI5LjIzNC01MTIgNTEyczIyOS4yMzQgNTEyIDUxMiA1MTJjMjgyLjc2NiAwIDUxMi0yMjkuMjM0IDUxMi01MTJzLTIyOS4yMzQtNTEyLTUxMi01MTJ6TTI5NC40IDU4OC44NTN2LTUxLjMwN2MwLTI4LjQ4MiAyMi45MjMtNTEuMTQ3IDUxLjItNTEuMTQ3IDI4LjQ3NCAwIDUxLjIgMjIuODk5IDUxLjIgNTEuMTQ3djUxLjMwN2MwIDI4LjQ4Mi0yMi45MjMgNTEuMTQ3LTUxLjIgNTEuMTQ3LTI4LjQ3NCAwLTUxLjItMjIuODk5LTUxLjItNTEuMTQ3ek02MjcuMiA1ODguODUzdi01MS4zMDdjMC0yOC40ODIgMjIuOTIzLTUxLjE0NyA1MS4yLTUxLjE0NyAyOC40NzQgMCA1MS4yIDIyLjg5OSA1MS4yIDUxLjE0N3Y1MS4zMDdjMCAyOC40ODItMjIuOTIzIDUxLjE0Ny01MS4yIDUxLjE0Ny0yOC40NzQgMC01MS4yLTIyLjg5OS01MS4yLTUxLjE0N3pNMzYxLjE0MyAyODEuNmMtMjIuNzExIDAtNDEuMTQzLTE4LjYzNy00MS4xNDMtNDEuNnMxOC40MzItNDEuNiA0MS4xNDMtNDEuNmgzMDEuNzE0YzIyLjcxMSAwIDQxLjE0MyAxOC42MzcgNDEuMTQzIDQxLjZzLTE4LjQzMiA0MS42LTQxLjE0MyA0MS42aC0zMDEuNzE0eiIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGU5MDM7IiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMyIgZD0iTTUxMi4wMDEgOTYwYy0yODIuNzcgMC01MTIuMDAxLTIyOS4yMy01MTIuMDAxLTUxMS45OTlzMjI5LjIzLTUxMi4wMDEgNTEyLjAwMS01MTIuMDAxYzI4Mi43NyAwIDUxMS45OTkgMjI5LjIzIDUxMS45OTkgNTExLjk5OXMtMjI5LjIyOSA1MTIuMDAxLTUxMS45OTkgNTEyLjAwMXpNODE3LjQ5NSAzMDUuNTY1Yy0wLjQ0NS0xLjQ4NS0wLjk2My0yLjkzOS0xLjU2OS00LjM1LTAuNjc2LTEuNTcyLTEuNDU1LTMuMDg5LTIuMzE3LTQuNTU2LTU1LjYzMS0xMDcuNjEzLTE2OS41MTgtMTgxLjQ1OS0zMDEuMzIzLTE4MS40NTktMC4wOTYgMC0wLjE5IDAuMDAyLTAuMjg2IDAuMDAycy0wLjE5LTAuMDAyLTAuMjg2LTAuMDAyYy0xMzEuODA0IDAtMjQ1LjY5MyA3My44NDUtMzAxLjMyMyAxODEuNDU5LTAuODYyIDEuNDY3LTEuNjQxIDIuOTg0LTIuMzE3IDQuNTU2LTAuNjA2IDEuNDEtMS4xMjQgMi44NjUtMS41NjkgNC4zNS0xLjEwMyAzLjY4LTEuNzA1IDcuNTY5LTEuNzA1IDExLjU5NyAwIDYuNTY2IDEuNTc5IDEyLjc3MSA0LjM3MiAxOC4yODIgNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIyIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIzLTIyLjk1NWgwLjY3NmM0MS40MTEtODEuNDUzIDEyNy4xMzEtMTM3LjU0NCAyMjYuNTA3LTEzNy42NTIgOTkuMzc1IDAuMTA4IDE4NS4wOTUgNTYuMiAyMjYuNTA3IDEzNy42NTJoMC42NzZjNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIzIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIyLTIyLjk1NWMyLjc5NC01LjUxMSA0LjM3Mi0xMS43MTUgNC4zNzItMTguMjgyIDAtNC4wMjktMC42MDItNy45MTgtMS43MDUtMTEuNTk3ek02MjcuMiA1ODguODUzYzAgMjguMjQ3IDIyLjcyNiA1MS4xNDcgNTEuMiA1MS4xNDcgMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3pNMjk0LjQgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6IiAvPgo8L2ZvbnQ+PC9kZWZzPjwvc3ZnPg==#icomoon) 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"}body,html{margin:0;padding:0}#app,body,html{height:100%}body{font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;overflow:auto;font-weight:400;-webkit-font-smoothing:antialiased}a{color:#4078c0;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:#f9fafc;border:1px solid #eaeefb;margin-bottom:25px;border-radius:4px;-webkit-font-smoothing:auto}.main-cnt{margin-top:-80px;padding:80px 0 120px;box-sizing:border-box;min-height:100%}.container,.page-container{width:1140px;padding:0 30px;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 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 h2:hover a,.page-container h3 a:hover,.page-container h3:hover a,.page-container h4 a:hover,.page-container h4:hover a,.page-container h5 a:hover,.page-container h5:hover a{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-top:20px}.page-container .tip 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}}.el-progress-bar__inner:after,.el-transfer-panel .el-transfer-panel__footer:after,.el-upload-cover:after,.el-upload-list--picture-card .el-upload-list__item-actions:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-row:after,.el-row:before{display:table;content:""}.el-row:after{clear:both}.el-slider__button-wrapper:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-slider:after,.el-slider:before{display:table;content:""}.el-slider:after{clear:both}.el-form-item__content:after,.el-form-item__content:before{display:table;content:""}.el-form-item__content:after{clear:both}.el-form-item:after,.el-form-item:before{display:table;content:""}.el-form-item:after{clear:both}.el-breadcrumb:after,.el-breadcrumb:before{display:table;content:""}.el-breadcrumb:after{clear:both}.el-menu:after,.el-menu:before{display:table;content:""}.el-menu:after{clear:both}.el-button-group:after,.el-button-group:before{display:table;content:""}.el-button-group:after{clear:both}.el-autocomplete-suggestion.is-loading li:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-dialog__header:after,.el-dialog__header:before{display:table;content:""}.el-dialog__header:after{clear:both}.el-pagination:after,.el-pagination:before{display:table;content:""}.el-pagination:after{clear:both}@font-face{font-family:element-icons;src:url(data:application/font-woff;base64,d09GRgABAAAAAB9EABAAAAAANAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABoAAAAcdCWJ3kdERUYAAAGIAAAAHQAAACAAWAAET1MvMgAAAagAAABNAAAAYFdvXOBjbWFwAAAB+AAAAFAAAAFS5mHtc2N2dCAAAAJIAAAAGAAAACQNZf70ZnBnbQAAAmAAAAT8AAAJljD3npVnYXNwAAAHXAAAAAgAAAAIAAAAEGdseWYAAAdkAAAUPAAAIUw4RPqwaGVhZAAAG6AAAAAvAAAANgxJKwtoaGVhAAAb0AAAAB4AAAAkCQwFDGhtdHgAABvwAAAAVgAAAKyk5AaSbG9jYQAAHEgAAABYAAAAWJwQpAxtYXhwAAAcoAAAACAAAAAgAU4CJG5hbWUAABzAAAABNQAAAit/uX3PcG9zdAAAHfgAAACyAAABsMLAXoJwcmVwAAAerAAAAJUAAACVpbm+ZnicY2BgYGQAgjO2i86D6MufP7fDaABY8wj8AAB4nGNgZGBg4ANiCQYQYGJgBEItIGYB8xgABhgAXQAAAHicY2Bh4WX8wsDKwMA0k+kMAwNDP4RmfM1gzMgJFGVgY2aAAUYBBgQISHNNYTjAUPFMnbnhfwNDDHMDQwNIDUiOWQKsRIGBEQCQ/wz4AAAAeJxjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETEC64pnKM/X//8Eshmdq////75ZikWKG6gIDRjYGOJcRpIeJARUwMtAMMNPOaJIAAAr1C6J4nGNgQANGDEbMEv8fMjf8b4DRAEVmCF94nJ1VaXfTRhSVvGRP2pLEUETbMROnNBqZsAUDLgQpsgvp4kBoJegiJzFd+AN87Gf9mqfQntOP/LTeO14SWnpO2xxL776ZO2/TexNxjKjseSCuUUdKXveksv5UKvGzpK7rXp4o6fWSumynnpIWUStNlczF/SO5RHUuVrJJsEnG616inqs874PSSzKsKEsi2iLayrwsTVNPHD9NtTi9ZJCmgZSMgp1Ko48QqlEvkaoOZUqHXr2eipsFUjYa8aijonoQKu4czzmljTpgpHKVw1yxWW3ke0nW8/qP0kSn2Nt+nGDDY/QjV4FUjMzA9jQeh08k09FeIjORf+y4TpSFUhtcAK9qsMegSvGhuPFBthPI1HjN8XVRqTQyFee6z7LZLB2PlRDlwd/YoZQbur+Ds9OmqFZjcfvAMwY5KZQoekgWgA5Tmaf2CNo8tEBmjfqj4hzwdQgvshBlKs+ULOhQBzJndveTYtrdSddkcaBfBjJvdveS3cfDRa+O9WW7vmAKZzF6khSLixHchzLrp0y71AhHGRdzwMU8XuLWtELIyAKMSiPMUVv4ntmoa5wdY290Ho/VU2TSRfzdTH49OKlY4TjLekfcSJy7x67rwlUgiwinGu8njizqUGWw+vvSkussOGGYZ8VCxZcXvncR+S8xbj+Qd0zhUr5rihLle6YoU54xRYVyGYWlXDHFFOWqKaYpa6aYoTxrilnKc0am/X/p+334Pocz5+Gb0oNvygvwTfkBfFN+CN+UH8E3pYJvyjp8U16Eb0pt4G0pUxGqmLF0+O0lWrWhajkzuMA+D2TNiPZFbwTSMEp11Ukpdb+lVf4k+euix2Prk5K6NWlsiLu6abP4+HTGb25dMuqGnatPjCPloT109dg0oVP7zeHfzl3dKi65q4hqw6g2IpgEgDbotwLxTfNsOxDzll18/EMwAtTPqTVUU3Xt1JUaD/K8q7sYnuTA44hjoI3rrq7ASxNTVkPz4WcpMhX7g7yplWrnsHX5ZFs1hzakwtsi9pVknKbtveRVSZWV96q0Xj6fhiF6ehbXhLZs3cmkEqFRM87x8K4qRdmRlnLUP0Lnl6K+B5xxdkHrwzHuRN1BtTXsdPj5ZiNrCyaGprS9E6BkLF0VY1HlWZxjdA1rHW/cEp6upycW8Sk2mY/CSnV9lI9uI80rdllm0ahKdXSX9lnsqzb9MjtoWB1nP2mqNu7qYVuNKlI9Vb4GtAd2Vt34UA8rPuqgUVU12+jayGM0LmvGfwzIYlz560arJtPv4JZqp81izV1Bc9+YLPdOL2+9yX4r56aRpv9Woy0jl/0cjvltEeDfOSh2U9ZAvTVpiHEB2QsYLtVE5w7N3cYg4jr7H53T/W/NwiA5q22N2Tz14erpKJI7THmcZZtZ1vUozVG0k8Q+RWKrw4nBTY3hWG7KBgbk7j+s38M94K4siw+8bSSAuM/axKie6uDuHlcjNOwruQ8YmWPHuQ2wA+ASxObYtSsdALvSJecOwGfkEDwgh+AhOQS75NwE+Jwcgi/IIfiSHIKvyLkF0COHYI8cgkfkEDwmpw2wTw7BE3IIviaH4BtyWgAJOQQpOQRPySF4ZmRzUuZvqch1oO8sugH0ve0aKFtQfjByZcLOqFh23yKyDywi9dDI1Qn1iIqlDiwi9blFpP5o5NqE+hMVS/3ZIlJ/sYjUF8aXmYGU13oveUcHfwIrvqx+AAEAAf//AA94nKVaC3Bc1Xk+/zn3uXe1e3fva6V9aXe1u5JWXq32aUlIun7IGGTZlsAPGTABHEUOIQkUcAgMESUEKMnQItl0SId2mEwyzWNipqV5kpB0ChNDQzLBtBPaztQJM23iaWdo+gi1rvufu7ItOWCcZnX3nHPP8z/nf33/WRFKsoRAlX6RMCKTPrdACGGUsH2EAtApQinsErAEWwiRJVHAbiwihku1SCZSrEVyWdD/7ZVX6BdX9mbpPI4VycDZf2bfZjFikwoZIbPkIByZOm7s3u9eTYF0hDpIaJ6wEITYQQKKAtfroCoBST0YgaAkSMGDRBO0w2FQiBRUpP0kIItU0ALCXBRCoY4Z0tERCG2OTx13cMapS8yoqIH533LKGE654/KmFOYva05350XTwTzOFwLl0P9vwrm5Obf3mmtGR6tDjnPNwWsOXrd/dHZ0dmpLqzE0Uh1xKk5lJjIUi/RarmGXQCpBNkSTkGnUC416mZbAyoiWaZshmpMKJShmZOxRzJbpGDhZybRr1Wa94EhyiKVgVKo2i2UoForQqI/TUajaSYDOeNc10Xwiyv4QArFi6iHvavoMWOlcKJQOdW/wrhpIZs3Ozm5DORKMRoMd0einFUnUBCqEQ/ktM7vdHsdWRVUUJe9zYrjL+na6j6Yh2Fns2tGnJ4SO7nj0pkfqzshI3lEBFhfBiHeHvjAR6Yrgc1+XbfSE9A4l1tWRixgmHPm5FjOCycLPUIRR9h4QCF0kSdLvFgNAiQMCpS4AoWSBARXoggiCcCN2TJKk4ZiOFC3l7WYLmmWQZBXKIEuW6UClZjs2/zrwL9H+EDwfpYVG1Lvdu9WoG2YUvgf8QwMAn1KkDljSN3RT3TsGCxHQ9Zite7fzZhE4SQSLZxdRZzhdWTed7HSsAJGAgMvbyDTvMoPUw2SfRfUSFDg9KZ+eFNKTyxah0igUC/xbBOnSC8LCpen16SFnF+nZy6aniasWQmAjO0KAx1JtIT3NVpN/W/RtpMe7zacHPuj98So98PhvQQ9+F5Fvn2jzzUE+BZBj1EVeUYHzjdAF3nM936AgySCloNni54Tk1PGccnhG/FukMVzX2+Kvi8Qc9df1Js6vSz9+abp9uhg5yr5OnyQacVyT0wnT/IRmeNtkPYKH0xaeQi6TlRx4KrErAR9ppadXxOl069kExOH9jR07Gv6Za2c/wzrYZhIk0l8EREDVK9RxqG1FTKkIUIhj5+aOHU3vs5CP745fmAc+8i7jm7jhgoTj7RbQt+Jx7ym+GMy/43jcy7E1e7mI0f5eoFl1wJZwL4XWRXuh9+H0n21OTTX9ucbP/rtYZgdIlIw8p+J4cKeO96DljKDHoAt8RuQawaXQ/IXX190495xlWroQLYko14U6rqniwraJvMzRnt6Ed29yeCYBLj2U3D2cWNmX6Isk4CFe9l6ghxLDu5NYh/qMMixwnQqTAhl1N6aAMi7AAlkggigsSCAycQH9GFvw3dg0d2OzBL3YNl3XC3rBjHU6umyUCJpHM0Wr47ReBgZSdpAW6hNIUhr8BCmjH3ztW4/t3v3Yt9qZ7D2mGIr8Q1muyab8R1DFtKoobPF8D5553/Mek2Xlh4rf+AQMKUoVh+H5XaA9TUqk4VZjukIErn94QCKIBOaRYgGl/xD6UkGcJqIozPBdTVrRLrMrKpkllPeqY5th1EdJRprRTmSLnO4iWg9sinaPg16G7hDoNg2c0FKapp04oUEAS5inAxdeG2CffvTR094vMIWvnNC0QJq3pbRA4OWXA2sGrKiPnj7fd90+wqTG91Hrz8QEgfJ9UBBQjedxDwSfQ3ju63THTJgJR8d9COh40LNUU9QMAWvWB6GQDeMmMJHMNO4KE7s6gdvEhDdfxIsRWW7g8S8fxaQhSUePShJ/P7rM32X56Hqe0EnZUmqKsrSkYGbJy0uY1GV5eVnGzFKWuI6f503eza7lDNcYLsEwg9xBneGcQDFWkWIZ7aKKBCOVaIwwQdVUuX6iP6HEu8caNU2w4GEsWeYoFuBhrLIs7x4s+DU/Xy149/i9rd/ojOPJqq0kHIGRPvKkq+mAIutG0WZNTB3XUAPz6O+AyQzkeY7mJCbPKSARIk1jJpFZEYhEtiHQsbFz6kJnbPWb9hJZZjOEsYCMunt5syEg0XrMTE/ejJjdqlPK1MYRLhRylVwFs6xkVaxKDjPTdmqNXLbQVi4bkQltnpx/fHlBWfrxsrKw/Pj8mwfMoPZp2ZA/EwgaB9jy/OGjyuHl5cPK0cPzy+zLtv56IPC6bvuyB6t8SpJRMugOjLYatd5U25cFOcdom2PU5xjzOTa4oSfXZwl6ybiki81fsvU9/C8lv5t/pu/pLtfoXQLRdcXdMNyoDVWKyUSMb77jXTZfHshl/c2/iz+fgAq68/w7NJ739RX2tiKG3tlpUgnAI+/a/B57p8HL2Dkl7z/7EHsY940+jGsnAURVQHjM8QFCGfONPJdeyibrZj3CnQwq43n/vNa/fb1rexcM1OPbVj61LV6DDeteb4nFIFHZurVCvxqLeW8Obd06xGMiUkIcdxLXd0gc7cMzqyrnowW4XgOVKLKq7AuATFBp9hJUkRnUIEICEo8tqti5h3eGhffo65ba3fwKSSXS/rUDGJOnMJPZLB/K1c9JJGKxRDqRTiVj8Vg8Gsk3MhE9aJUQ9ucsrnsIEmqZarMRqSNwaOQAQzf+pT/wPvxkNVEsJFghUSjGa0+u/B19wXsZ4ULojjuKiTP/kygWE0xJFO8482E6tvLXMHbWt0ESWcSzwD/SidHjANlItpLd5Ab3ADdPQIS5sBhiWKAy0DkiBwNUUWVlrkOjqiSp0zxXpRkdJFWazOe6ugjZOb39ys2brhhtNiqDfb25gfxAV7Yrm07iAp1NoxaJlLhRwVhFSkLO5DC9vaN6YRDERr1Z82MTf48Z3C0gsvCxVbbQYO9Spr+fiT3S2fcKHcrF6B/EcqlQ2Lu3J5HM4R4XG1Mri1NwT9jWdTv8dNgOh89n9Pv3x/OFrvsB7P6uQqErlhEF6nbjxz3zwlQDLT5pTMHPtUhE874Y1PUg7H3nMpfpPXiOX8Jz7ECJGnabaNAFxDEMkS+j81wMBAbCHFd6X7y5A6VkEoFwPGYbOg4L1qUweqE1HM4Zpi/ljUiNV+DJWPAN709mR+j4yOzsSKY/6YVSfb9O9uPDFr0nVn49PDs7TH8xPHvmuWR/XwqW+1MA/cl1tkZA5Bl1w7KE9IhkDNtujEO41GJ5KLZkB11eIXvttVCDN089f8/P7ipf/+Bfeq/sgTffeP6eN+4qP3g9158LeCFGekjdHSIgcdyGIsIQ3zDcp0iID3j4PkUyGdGzmUTcMvVYJIZwTV8PGIAHrDxeNXw/E+EvjYsQgvdGur801l9KZqtZfC4CBCdLYyV8vNNOJuN4/xvr7o6twQB+PEIEypAZGLUTKrRJJWwaXSQnkZFJy8rlDdEoRcwUtFFXrh1HpwBJzJbBd4LnoNNjuuPod790550vnX7pTifjwOJjvJo34ptfe+dLd2Mn7uYvnFeaDJIJst2d1CSVoVIxtHdzAUFhvp33C2jpfasxWa1ku6M6JSOtykR1or/YPZgd7HL0dDQdkEmYhoOhEicxCaaNEX1zDO0ju+h9fXv9ovZ6AeZ/Nbhly+CvKpvplqELRfhvzDZXzlW0S3DdlsH/rGzFmqGtNH+hYeUNrOc931pf78vcSdx3iZikQj7qhnosXURbkrMpqgWGGnE0pLYPJrmDC2wigsBtIdMYN7P92Gr6ng+x59zaNrdzTTVjwvRqo8CN6F+VWrFYN/IRMnyvKaE6zlocxkAkJaBmjdMJiISEHMrfILDFFdK3Lzr69AP3D9z/wNOj0X19Zxap3JkoOYxYpaQjSeHaZ+77dF/fIw/fWyyw0khPNFxdvHn3rps/UQsbPSPe2ytvMdWOhkKGIctUD234vf3bJ2+6OZv1MR4MIZGvop9Lu4l1vtyP1hBjiESjGguVjAyGTr6y15u72M2Zcjlz5mlM4dXy5jI+xPdbBAI4338RZD/6roybEpk/3TTPoe14EJUb/MNReZTrFAqxcFE+efMkPvDquizQrl3ztNdc5WGYDJFR0N3gaJVSeah3lYdB5FKVyCIV5YOESiKVDhFJECWMeQQmCuyQbwOUNn8Z46EbaMD5y7lfa4+k87/dUC4aQ5ccykeJMhHn1g50m5c7Bq339OpIBtv4VZ0NZHhjo14u9eQSXZahSiQMIRUZt94p51iZoo6FgSHcLAzSMsUXGkG3luHuCri/8j3X0tjevWP0pzz9FEhxw0yJ4vGAo0UFdgMNJOMJWd7en6ZLqX7vKvc6Fx9W2ju28iN/WGVsr/dJqgQ1UfT+1QgI4m1Mi0ZVdR+8kiqVUt4+SG4Yn9g/Pj6wGmus2p+4j7ZEQsVp1EPGUS6qkCjSGayik0YuZ+S6eVSa8S1fpm2IIxkuNrlMxDfO8DVvKV0qpeG20hUluI0XvSVe/AEmv9HUxrnFs99nz7MRlNskKbo9NsqqgqEl5RdV/EIPyxjd0xsJScSxk2wI4VJPW1RtMQQFjL/Gqe3YURljZR4hU+HYsdeOHYMDU9/42tar6/WlF1+8+n2JK182jGjDfIk3vXZs4Iqe1uTVL/7Ncr1+9fu8//jICaOBarHqC7+M53Et+RC5m9zuqh+69YN1gV87tO+N7VWfgGKHfoJyZV2VO343Ygj81CjsOd+LW6Su1bv2OWzltxTnBlKYROEJ3n3XHbd/+LadO2KOiEa7DBgeF3n8xAMR/w0lhkf//N4Sg1AULcDISpZ4wYdIaYxgsMaxsR+/zvTfEOsjXEr7t2atcZiAcT5Vq8kLrTaiGoK2vKFtYWdYIqJPZDJhUdQ69AGjW5L0YjA4+FBFCxZ1c8BAEewIimI4k5nQIwnUb1SDRCTs+kOCHeEBsz1Eq2zeUtG0Xt0Y4GLboYmCnsm4up4QuB3yhGs/9rE/P3JkD7yoJwVmbNw4EdaLWkenFmZUUjuCAwPBDlWSY0FDEAKFSHhi43CUCUndrNo5SX7HMdqGDZo/RjMFphV0fWLjRuPCGO+tuz5/Fz4oTjXEYX+Lsn4L2exO1IbQ4+/fi6ETjYQpEZnLAQplPhADkcJvAJVbbtq+7YrR3kKiy0E4lufwhPqX6vUWvyzNc37wUJLzDdEqHnut6vPDyfO4kl/O88oqr7JMzsx236KIXUzkgyXJpixyBrWQeey2eJ/j9DXHm30OP7olzQ51hEJ6eti0YzHbHE6Hw1hha3CYB1Axy9o4fqEpyVu8J+Hc50OBWBBHh9J/qvU1J5r+zGlVZPicVHVRoqzTtFsZf3LGJFFXX2OiKIiqiFVWZ6eFk2Y2WmZMkAU98BNRFUQlEBDROgqvqyE0maytz/TsI8IonvEV5BDZ4rqpLgpCfxG9Kp6zWxMpwkoBhAVuPBfQQYnkMMF1fJMqziIXxG2Hbtm9a3Sk2UjGo3jMou1kJbmJwstFuoUSXhhc1RIeufpqgIIvj0PR1wQsO2iReOeqgy++KrVHczVoVtvqkjqnSBK/jmLD4QDTgAp1NZE+HkICmWL8sne7fgM6blnGQOwGfXvvLw0FgbsQejaVUGsCBKmqn8gdyD5wojkcqovR6LOD9vhpp6ze0Hll5w1q2Tk9bg8+G42K9dBw84Q1PKKCwtToqd49XU8FFRYCgdqs0XMyIqPTjJzsaTAbwWcYbfdTXXt6T0VVpoB6xLJqR7r7x045zfBTfZsli2atkyMjJ60staTNfU+Fm86psf7uI0FuLs+dfZHEXOviu2x0MRSl1r92e89DKdLd1rB1ORsLBIOXQd8qRln1NTpJkA1k0t1M0NNSUfJxt8hxt6Tg0UvCgTUAXOb32pOpJJC+Yk8uuSE1EHOiEVUhOujoZEUffa9GCzSaDQFi9Oo4B7DZwpgfIiZRD7mVowRx+Myj3/nRdx6dwUz86TdvvfWbPPF+aiYSvYk/w9RcRPy+0O7A+7En2l0w8Y4mjTeNZNJ4LlFMkvWxjkNypOT28l9GBY4SsBqty9yFa+m2vbcsw/HvRNfdSJNVO9zwI9aIjwEujnB+5Uc27eeiW+iVcnYolxv6p85crhOMzmy2k8fuebR1b5yPK0bJFvIBssO9ioSIqoTUfeEOlLMAlUCR5jhC5PAQTxrjeE2Tp4ksazNEk7XJ+UM3Hbxu7trZXTuuunKTa9SNBv/UdKeE0Sj/4dEnmP9q6LzHu8Fj9hRwmI0xPDo3tM2ixftEzoWyuTbHRgGtJB+S5oyD+4NqCaUsUFKDXwmqA2rQT77iV/hN+1aeCQQordJAwBuBcrcov472aCaobprYsPLDDRObeL8fDwYa8b+PNwKDP1aD8EtvkU8Ji7zpXcqeST+28kg4FgzG6D/slCiVbsEVVx5pzexs0XtxZTX40VguF/tocK0sxEmNuFy2y0kq8zBfAmmByIJ8GIVcgGmqoK8Bhn0PoG7yO38QJoEMVXpyGOxHwx0BBUUoDnGVh3B+XJlsR5uj6DRsHpv5P99CcdwHP1yQuENpthweJqP+luk4TaFeffyJZG/yCS7T7UIyCbec2lKc2Dnxuc9/7v5NmyZ2vfranlPh/pT3hU3Hjz9YLj/op/D2Eh+zlOhLnC+s/OPP9vzk1Z3upk2fwLE4Q++WU+FUP0QwAPnkV48/ODj44PGvXri33IXnYGFMsMvd0d1JBRlcSeUZnsc8IjpRBvEQYjmRymL71oP/AwKZVfhvuNscm5JSf082mbCHnCE9HNQUmVjUCqCuZ87rBwrTuVseQHDUvuyJ+N63sfrTjo3CJYTPDMXz+UaezeTrhbz37YSxG992G4l4Xv+uMWx8V88vFrrAxU5xfu3Fc++FrgL9kjXn3cdvfuCTc1Y+Hou+blmvR2Px/P8BEpxdcHicY2BkYGAA4iUXFTLj+W2+MsizMIDA5c+f2xH0/wZWPeYGIJeDgQkkCgBf1AyCAHicY2BkYGBu+N/AEMOawAAErHoMjAyoQBsAVCkDJAAAeJxjLGNQYgACxlAGBuaXDDosQDYLAyMjEDOA2YwMzEA2NxgD2awJDHYQNWiYkYERiEHsVCDWBuIGIA7FqhYTq0P1GrPYMTCBMUJOFUz7MzAAAGi0Bh0AAAAAACgAKAAoAWQBsAH4AkACjAKyAtIC8gMYA1oDuAQcBIYE1gVaBdgGVAaUBxoHvggOCDQIiAjMCUgJyAnwCioLDAtMC5QMgg00DfIOQg6qDvgPsBA0EKYAAQAAACsAdwAGAAAAAAACACYANABsAAAAigF3AAAAAHicdY9Na8JAEIbfaNQWivTY45BL9bBhE6L4cZX4D3oXSTSQGkjWj0v/QQs99dxjf2ZfN0uhBxNm55mZd2dnADzgCx6un4cBHh134CNw3CW9Ovap+XbcQ+pNHfcx8D6o9Px7Zob21pU7uMOT4y5WeHbsU/PpuId3/DjuY+i9IUMJhQJbVDgAWamKbUX4y7RhagNjfY0drwlihND0C9r/Nm1uysycFlMVMUJaHUxa1btM4lDLQtxjpKmaq1hH1Nya54WVGg0r7QORe3xJM/xzbHCkr7Cn5jqqYIQTNSGHSDBmrNhbMLNU85zYDgpru4x20cV2TyyfeQasBzbK7dlwmKxuCg4ecY2lGJNvjqbaFwcjo5MO58lYVCkzUbVMtKi1xJruIlEi6izBOhCVi2puLvsLTjBRRQAAAHicbc3LNsJxGEbh3/47JHKIQomcwlomfV8Uw5Cb6ApMzLoCF46lPfSu9a49fEpV/vb9VbL8t/vfU6oyp2KFVdZYp8YGdTbZosE2O+yyR5N9DmjR5pAjjunQ5YQep5zR55wLLrnimgE33HJXW3x+zMbDoQ2bdmQf7KMd24l9ss92al/sq32zM/u+bOiHfuiHfuiHfuiHfuiHfuiHfuiHfuiHfuqnfuqnfuqnbk5+APaSXBUAAEu4AMhSWLEBAY5ZuQgACABjILABI0QgsAMjcLAORSAgS7gADlFLsAZTWliwNBuwKFlgZiCKVViwAiVhsAFFYyNisAIjRLMKCQUEK7MKCwUEK7MODwUEK1myBCgJRVJEswoNBgQrsQYBRLEkAYhRWLBAiFixBgNEsSYBiFFYuAQAiFixBgFEWVlZWbgB/4WwBI2xBQBEAAAA) format("woff"),url(static/element-icons.b02bdc1.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-arrow-down:before{content:"\E600"}.el-icon-arrow-left:before{content:"\E601"}.el-icon-arrow-right:before{content:"\E602"}.el-icon-arrow-up:before{content:"\E603"}.el-icon-caret-bottom:before{content:"\E604"}.el-icon-caret-left:before{content:"\E605"}.el-icon-caret-right:before{content:"\E606"}.el-icon-caret-top:before{content:"\E607"}.el-icon-check:before{content:"\E608"}.el-icon-circle-check:before{content:"\E609"}.el-icon-circle-close:before{content:"\E60A"}.el-icon-circle-cross:before{content:"\E60B"}.el-icon-close:before{content:"\E60C"}.el-icon-upload:before{content:"\E60D"}.el-icon-d-arrow-left:before{content:"\E60E"}.el-icon-d-arrow-right:before{content:"\E60F"}.el-icon-d-caret:before{content:"\E610"}.el-icon-date:before{content:"\E611"}.el-icon-delete:before{content:"\E612"}.el-icon-document:before{content:"\E613"}.el-icon-edit:before{content:"\E614"}.el-icon-information:before{content:"\E615"}.el-icon-loading:before{content:"\E616"}.el-icon-menu:before{content:"\E617"}.el-icon-message:before{content:"\E618"}.el-icon-minus:before{content:"\E619"}.el-icon-more:before{content:"\E61A"}.el-icon-picture:before{content:"\E61B"}.el-icon-plus:before{content:"\E61C"}.el-icon-search:before{content:"\E61D"}.el-icon-setting:before{content:"\E61E"}.el-icon-share:before{content:"\E61F"}.el-icon-star-off:before{content:"\E620"}.el-icon-star-on:before{content:"\E621"}.el-icon-time:before{content:"\E622"}.el-icon-warning:before{content:"\E623"}.el-icon-delete2:before{content:"\E624"}.el-icon-upload2:before{content:"\E627"}.el-icon-view:before{content:"\E626"}.el-icon-loading{animation:rotating 1s 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:#48576a}.el-pagination button,.el-pagination span{display:inline-block;font-size:13px;min-width:28px;height:28px;line-height:28px;vertical-align:top;box-sizing:border-box}.el-pagination .el-select .el-input{width:110px}.el-pagination .el-select .el-input input{padding-right:25px;border-radius:2px;height:28px}.el-pagination button{border:none;padding:0 6px;background:transparent}.el-pagination button:focus{outline:none}.el-pagination button:hover{color:#20a0ff}.el-pagination button.disabled{color:#e4e4e4;background-color:#fff;cursor:not-allowed}.el-pagination .btn-next,.el-pagination .btn-prev{background:50% no-repeat;background-size:16px;background-color:#fff;border:1px solid #d1dbe5;cursor:pointer;margin:0;color:#97a8be}.el-pagination .btn-next .el-icon,.el-pagination .btn-prev .el-icon{display:block;font-size:12px}.el-pagination .btn-prev{border-radius:2px 0 0 2px;border-right:0}.el-pagination .btn-next{border-radius:0 2px 2px 0;border-left:0}.el-pagination--small .btn-next,.el-pagination--small .btn-prev,.el-pagination--small .el-pager li,.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 .el-pager li{border-radius:2px}.el-pagination__sizes{margin:0 10px 0 0}.el-pagination__sizes .el-input .el-input__inner{font-size:13px;border-color:#d1dbe5}.el-pagination__sizes .el-input .el-input__inner:hover{border-color:#20a0ff}.el-pagination__jump{margin-left:10px}.el-pagination__total{margin:0 10px}.el-pagination__rightwrapper{float:right}.el-pagination__editor{border:1px solid #d1dbe5;border-radius:2px;line-height:18px;padding:4px 2px;width:30px;text-align:center;margin:0 6px;box-sizing:border-box;transition:border .3s;-moz-appearance:textfield}.el-pagination__editor::-webkit-inner-spin-button,.el-pagination__editor::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.el-pagination__editor:focus{outline:none;border-color:#20a0ff}.el-pager{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;font-size:0;padding:0}.el-pager,.el-pager li{display:inline-block;vertical-align:top;margin:0}.el-pager li{padding:0 4px;border:1px solid #d1dbe5;border-right:0;background:#fff;font-size:13px;min-width:28px;height:28px;line-height:28px;cursor:pointer;box-sizing:border-box;text-align:center}.el-pager li:last-child{border-right:1px solid #d1dbe5}.el-pager li.btn-quicknext,.el-pager li.btn-quickprev{line-height:28px;color:#97a8be}.el-pager li.btn-quicknext:hover,.el-pager li.btn-quickprev:hover{cursor:pointer}.el-pager li.active+li{border-left:0;padding-left:5px}.el-pager li:hover{color:#20a0ff}.el-pager li.active{border-color:#20a0ff;background-color:#20a0ff;color:#fff;cursor:default}.el-dialog{position:absolute;left:50%;transform:translateX(-50%);background:#fff;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.3);box-sizing:border-box;margin-bottom:50px}.el-dialog--tiny{width:30%}.el-dialog--small{width:50%}.el-dialog--large{width:90%}.el-dialog--full{width:100%;top:0;margin-bottom:0;height:100%;overflow:auto}.el-dialog__wrapper{top:0;right:0;bottom:0;left:0;position:fixed;overflow:auto;margin:0}.el-dialog__header{padding:20px 20px 0}.el-dialog__headerbtn{float:right;background:transparent;border:none;outline:none;padding:0;cursor:pointer;font-size:16px}.el-dialog__headerbtn .el-dialog__close{color:#bfcbd9}.el-dialog__headerbtn:focus .el-dialog__close,.el-dialog__headerbtn:hover .el-dialog__close{color:#20a0ff}.el-dialog__title{line-height:1;font-size:16px;font-weight:700;color:#1f2d3d}.el-dialog__body{padding:30px 20px;color:#48576a;font-size:14px}.el-dialog__footer{padding:10px 20px 15px;text-align:right;box-sizing:border-box}.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 0 6px 0 rgba(0,0,0,.04),0 2px 4px 0 rgba(0,0,0,.12)}.el-autocomplete-suggestion li{list-style:none;line-height:36px;padding:0 10px;margin:0;cursor:pointer;color:#48576a;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.el-autocomplete-suggestion li:hover{background-color:#e4e8f1}.el-autocomplete-suggestion li.highlighted{background-color:#20a0ff;color:#fff}.el-autocomplete-suggestion li:active{background-color:#0082e6}.el-autocomplete-suggestion li.divider{margin-top:6px;border-top:1px solid #d1dbe5}.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:hover{background-color:#fff}.el-autocomplete-suggestion.is-loading .el-icon-loading{vertical-align:middle}.el-autocomplete-suggestion__wrap{max-height:280px;overflow:auto;background-color:#fff;border:1px solid #d1dbe5;padding:6px 0;border-radius:2px;box-sizing:border-box}.el-autocomplete-suggestion__list{margin:0;padding:0}.el-dropdown{display:inline-block;position:relative;color:#48576a;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-right:5px;padding-left:5px}.el-dropdown .el-dropdown__caret-button .el-dropdown__icon{padding-left:0}.el-dropdown__icon{font-size:12px;margin:0 3px}.el-dropdown-menu{margin:5px 0;background-color:#fff;border:1px solid #d1dbe5;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.12);padding:6px 0;z-index:10;position:absolute;top:0;left:0;min-width:100px}.el-dropdown-menu__item{list-style:none;line-height:36px;padding:0 10px;margin:0;cursor:pointer}.el-dropdown-menu__item:not(.is-disabled):hover{background-color:#e4e8f1;color:#48576a}.el-dropdown-menu__item.is-disabled{cursor:default;color:#bfcbd9;pointer-events:none}.el-dropdown-menu__item--divided{position:relative;margin-top:6px;border-top:1px solid #d1dbe5}.el-dropdown-menu__item--divided:before{content:"";height:6px;display:block;margin:0 -10px;background-color:#fff}.el-menu-item,.el-submenu__title{height:56px;line-height:56px;font-size:14px;color:#48576a;padding:0 20px;cursor:pointer;position:relative;transition:border-color .3s,background-color .3s,color .3s;box-sizing:border-box;white-space:nowrap}.el-menu{border-radius:2px;position:relative;margin:0;padding-left:0;background-color:#eef1f6}.el-menu,.el-menu li{list-style:none}.el-menu--dark{background-color:#324157}.el-menu--dark .el-menu-item,.el-menu--dark .el-submenu__title{color:#bfcbd9}.el-menu--dark .el-menu-item:hover,.el-menu--dark .el-submenu__title:hover{background-color:#48576a}.el-menu--dark .el-submenu .el-menu{background-color:#1f2d3d}.el-menu--dark .el-submenu .el-menu .el-menu-item:hover{background-color:#48576a}.el-menu--horizontal .el-menu-item{float:left;height:60px;line-height:60px;margin:0;cursor:pointer;position:relative;box-sizing:border-box;border-bottom:5px solid transparent}.el-menu--horizontal .el-menu-item a,.el-menu--horizontal .el-menu-item a:hover{color:inherit}.el-menu--horizontal .el-menu-item:hover{background-color:#d1dbe5}.el-menu--horizontal .el-submenu{float:left;position:relative}.el-menu--horizontal .el-submenu>.el-menu{position:absolute;top:65px;left:0;border:1px solid #d1dbe5;padding:5px 0;background-color:#fff;z-index:100;min-width:100%;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-menu--horizontal .el-submenu .el-submenu__title{height:60px;line-height:60px;border-bottom:5px solid transparent}.el-menu--horizontal .el-submenu .el-menu-item{background-color:#fff;float:none;height:36px;line-height:36px;padding:0 10px}.el-menu--horizontal .el-submenu .el-submenu__icon-arrow{position:static;vertical-align:middle;margin-left:5px;color:#97a8be;margin-top:-3px}.el-menu--horizontal .el-menu-item:hover,.el-menu--horizontal .el-submenu__title:hover{background-color:#eef1f6}.el-menu--horizontal>.el-menu-item:hover,.el-menu--horizontal>.el-submenu.is-active .el-submenu__title,.el-menu--horizontal>.el-submenu:hover .el-submenu__title{border-bottom:5px solid #20a0ff}.el-menu--horizontal.el-menu--dark .el-menu-item:hover,.el-menu--horizontal.el-menu--dark .el-submenu__title:hover{background-color:#324157}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item,.el-menu--horizontal.el-menu--dark .el-submenu .el-submenu-title{color:#48576a}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item:hover,.el-menu--horizontal.el-menu--dark .el-submenu .el-submenu-title:hover{background-color:#d1dbe5}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active{color:#20a0ff}.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 .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}.el-menu--collapse .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{transform:none}.el-menu-item [class^=el-icon-]{margin-right:5px;width:24px;text-align:center}.el-menu-item *{vertical-align:middle}.el-menu-item:first-child{margin-left:0}.el-menu-item:last-child{margin-right:0}.el-menu-item:hover{background-color:#d1dbe5}.el-menu-item.is-active{color:#20a0ff}.el-submenu [class^=el-icon-]{vertical-align:middle;margin-right:5px;width:24px;text-align:center}.el-submenu .el-menu{background-color:#e4e8f1}.el-submenu .el-menu-item{height:50px;line-height:50px;padding:0 45px;min-width:200px}.el-submenu .el-menu-item:hover{background-color:#d1dbe5}.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{transform:rotate(180deg)}.el-submenu.is-active .el-submenu__title{border-bottom-color:#20a0ff}.el-submenu__title{position:relative}.el-submenu__title:hover{background-color:#d1dbe5}.el-submenu__title *{vertical-align:middle}.el-submenu__icon-arrow{position:absolute;top:50%;right:20px;margin-top:-7px;transition:transform .3s;font-size:12px}.el-menu-item-group>ul{padding:0}.el-menu-item-group__title{padding-top:15px;line-height:normal;font-size:14px;padding-left:20px;color:#97a8be}.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow{transition:.2s;opacity:0}.el-radio{color:#1f2d3d;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.el-radio+.el-radio{margin-left:15px}.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-focus .el-radio__inner{border-color:#20a0ff}.el-radio__input.is-checked .el-radio__inner{border-color:#20a0ff;background:#20a0ff}.el-radio__input.is-checked .el-radio__inner:after{transform:translate(-50%,-50%) scale(1)}.el-radio__input.is-disabled .el-radio__inner{background-color:#eef1f6;border-color:#d1dbe5;cursor:not-allowed}.el-radio__input.is-disabled .el-radio__inner:after{cursor:not-allowed;background-color:#eef1f6}.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:#d1dbe5;border-color:#d1dbe5}.el-radio__input.is-disabled.is-checked .el-radio__inner:after{background-color:#fff}.el-radio__input.is-disabled+.el-radio__label{color:#bbb;cursor:not-allowed}.el-radio__inner{border:1px solid #bfcbd9;border-radius:100%;width:18px;height:18px;border-radius:50%;background-color:#fff;position:relative;cursor:pointer;display:inline-block;box-sizing:border-box}.el-radio__inner:hover{border-color:#20a0ff}.el-radio__inner:after{width:6px;height:6px;border-radius:50%;background-color:#fff;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .15s cubic-bezier(.71,-.46,.88,.6)}.el-radio__original{opacity:0;outline:none;position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;margin:0}.el-radio__label{font-size:14px;padding-left:5px}.el-radio-group{display:inline-block;font-size:0;line-height:1;vertical-align:middle}.el-radio-group .el-radio{font-size:14px}.el-radio-button{position:relative;display:inline-block}.el-radio-button:first-child .el-radio-button__inner{border-left:1px solid #bfcbd9;border-radius:4px 0 0 4px;box-shadow:none!important}.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__inner{display:inline-block;line-height:1;white-space:nowrap;vertical-align:middle;background:#fff;border:1px solid #bfcbd9;border-left:0;color:#1f2d3d;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;position:relative;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);padding:10px 15px;font-size:14px;border-radius:0}.el-radio-button__inner:hover{color:#20a0ff}.el-radio-button__inner [class*=el-icon-]{line-height:.9}.el-radio-button__inner [class*=el-icon-]+span{margin-left:5px}.el-radio-button__orig-radio{opacity:0;outline:none;position:absolute;z-index:-1;left:-999px}.el-radio-button__orig-radio:checked+.el-radio-button__inner{color:#fff;background-color:#20a0ff;border-color:#20a0ff;box-shadow:-1px 0 0 0 #20a0ff}.el-radio-button__orig-radio:disabled+.el-radio-button__inner{color:#bfcbd9;cursor:not-allowed;background-image:none;background-color:#eef1f6;border-color:#d1dbe5;box-shadow:none}.el-radio-button--large .el-radio-button__inner{padding:11px 19px;font-size:16px;border-radius:0}.el-radio-button--small .el-radio-button__inner{padding:7px 9px;font-size:12px;border-radius:0}.el-radio-button--mini .el-radio-button__inner{padding:4px;font-size:12px;border-radius:0}.el-switch{display:inline-block;position:relative;font-size:14px;line-height:22px;height:22px;vertical-align:middle}.el-switch .label-fade-enter,.el-switch .label-fade-leave-active{opacity:0}.el-switch.is-disabled .el-switch__core{border-color:#e4e8f1!important;background:#e4e8f1!important}.el-switch.is-disabled .el-switch__core span{background-color:#fbfdff!important}.el-switch.is-disabled .el-switch__core~.el-switch__label *{color:#fbfdff!important}.el-switch.is-checked .el-switch__core{border-color:#20a0ff;background-color:#20a0ff}.el-switch.is-disabled .el-switch__core,.el-switch.is-disabled .el-switch__label{cursor:not-allowed}.el-switch__label{transition:.2s;width:46px;height:22px;left:0;top:0;cursor:pointer;z-index:2}.el-switch__label,.el-switch__label *{position:absolute;display:inline-block;font-size:14px}.el-switch__label *{line-height:1;top:4px;color:#fff}.el-switch__label--left i{left:6px}.el-switch__label--right i{right:6px}.el-switch__input{display:none}.el-switch__input.allow-focus{z-index:0;display:inline;display:initial;position:absolute;left:0;top:0;outline:none;opacity:0}.el-switch__input.allow-focus:focus+.el-switch__core{box-shadow:0 0 2px #20a0ff}.el-switch__core{margin:0;display:inline-block;position:relative;width:46px;height:22px;border:1px solid #bfcbd9;outline:none;border-radius:12px;box-sizing:border-box;background:#bfcbd9;cursor:pointer;transition:border-color .3s,background-color .3s;z-index:1}.el-switch__core .el-switch__button{top:0;left:0;position:absolute;border-radius:100%;transition:transform .3s;width:16px;height:16px;background-color:#fff}.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-select-dropdown{position:absolute;z-index:1001;border:1px solid #d1dbe5;border-radius:2px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);box-sizing:border-box;margin:5px 0}.el-select-dropdown .el-scrollbar.is-empty .el-select-dropdown__list{padding:0}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{color:#20a0ff;background-color:#fff}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{background-color:#e4e8f1}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected:after{position:absolute;right:10px;font-family:element-icons;content:"\E608";font-size:11px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.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:8px 10px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#48576a;height:36px;line-height:1.5;box-sizing:border-box;cursor:pointer}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover{background-color:#e4e8f1}.el-select-dropdown__item.selected{color:#fff;background-color:#20a0ff}.el-select-dropdown__item.selected.hover{background-color:#1c8de0}.el-select-dropdown__item span{line-height:1.5!important}.el-select-dropdown__item.is-disabled{color:#bfcbd9;cursor:not-allowed}.el-select-dropdown__item.is-disabled:hover{background-color:#fff}.el-select-group{margin:0;padding:0}.el-select-group .el-select-dropdown__item{padding-left:20px}.el-select-group__wrap{list-style:none;margin:0;padding:0}.el-select-group__title{padding-left:10px;font-size:12px;color:#999;height:30px;line-height:30px}.el-select{display:inline-block;position:relative}.el-select:hover .el-input__inner{border-color:#8391a5}.el-select .el-input__inner{cursor:pointer;padding-right:35px}.el-select .el-input__inner:focus{border-color:#20a0ff}.el-select .el-input .el-input__icon{color:#bfcbd9;font-size:12px;transition:transform .3s;transform:translateY(-50%) rotate(180deg);line-height:16px;top:50%;cursor:pointer}.el-select .el-input .el-input__icon.is-show-close{transition:0s;width:16px;height:16px;font-size:14px;right:8px;text-align:center;transform:translateY(-50%) rotate(180deg);border-radius:100%;color:#bfcbd9}.el-select .el-input .el-input__icon.is-show-close:hover{color:#97a8be}.el-select .el-input .el-input__icon.is-reverse{transform:translateY(-50%)}.el-select .el-input.is-disabled .el-input__inner{cursor:not-allowed}.el-select .el-input.is-disabled .el-input__inner:hover{border-color:#d1dbe5}.el-select>.el-input{display:block}.el-select .el-tag__close{margin-top:-2px}.el-select .el-tag{height:24px;line-height:24px;box-sizing:border-box;margin:3px 0 3px 6px}.el-select__input{border:none;outline:none;padding:0;margin-left:10px;color:#666;font-size:14px;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;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:#bfcbd9;line-height:18px;font-size:12px}.el-select__close:hover{color:#97a8be}.el-select__tags{position:absolute;line-height:normal;white-space:normal;z-index:1;top:50%;transform:translateY(-50%)}.el-select__tag{display:inline-block;height:24px;line-height:24px;font-size:14px;border-radius:4px;color:#fff;background-color:#20a0ff}.el-select__tag .el-icon-close{font-size:12px}.el-table{position:relative;overflow:hidden;box-sizing:border-box;width:100%;max-width:100%;background-color:#fff;border:1px solid #dfe6ec;font-size:14px;color:#1f2d3d}.el-table .el-tooltip.cell{white-space:nowrap;min-width:50px}.el-table td,.el-table th{height:40px;min-width:0;box-sizing:border-box;text-overflow:ellipsis;vertical-align:middle;position:relative}.el-table td.is-right,.el-table th.is-right{text-align:right}.el-table td.is-left,.el-table th.is-left{text-align:left}.el-table td.is-center,.el-table th.is-center{text-align:center}.el-table td,.el-table th.is-leaf{border-bottom:1px solid #dfe6ec}.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:before{left:0;bottom:0;width:100%;height:1px}.el-table:after,.el-table:before{content:"";position:absolute;background-color:#dfe6ec;z-index:1}.el-table:after{top:0;right:0;width:1px;height:100%}.el-table th{white-space:nowrap;overflow:hidden}.el-table th.is-sortable{cursor:pointer}.el-table th{background-color:#eef1f6;text-align:left}.el-table th>div{display:inline-block;padding-left:18px;padding-right:18px;line-height:40px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.el-table td>div,.el-table th>div{box-sizing:border-box}.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 th>.cell{position:relative;word-wrap:normal;text-overflow:ellipsis;display:inline-block;line-height:30px;vertical-align:middle;width:100%;box-sizing:border-box}.el-table th>.cell.highlight{color:#20a0ff}.el-table .caret-wrapper{position:relative;cursor:pointer;display:inline-block;vertical-align:middle;margin-left:5px;margin-top:-2px;width:16px;height:30px;overflow:visible;overflow:initial}.el-table .sort-caret{display:inline-block;width:0;height:0;border:0;content:"";position:absolute;left:3px;z-index:2}.el-table .sort-caret.ascending{top:9px;border-top:none;border-bottom:5px solid #97a8be}.el-table .sort-caret.ascending,.el-table .sort-caret.descending{border-right:5px solid transparent;border-left:5px solid transparent}.el-table .sort-caret.descending{bottom:9px;border-top:5px solid #97a8be;border-bottom:none}.el-table .ascending .sort-caret.ascending{border-bottom-color:#48576a}.el-table .descending .sort-caret.descending{border-top-color:#48576a}.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:24px;padding-left:18px;padding-right:18px}.el-table tr input[type=checkbox]{margin:0}.el-table tr{background-color:#fff}.el-table .hidden-columns{visibility:hidden;position:absolute;z-index:-1}.el-table__empty-block{position:relative;min-height:60px;text-align:center;width:100%;height:100%}.el-table__empty-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#5e7382}.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:40px}.el-table__expand-icon>.el-icon{position:absolute;left:50%;top:50%;margin-left:-5px;margin-top:-5px}.el-table__expand-icon--expanded{transform:rotate(90deg)}.el-table__expanded-cell{padding:20px 50px;background-color:#fbfdff;box-shadow:inset 0 2px 0 #f4f4f4}.el-table__expanded-cell:hover{background-color:#fbfdff!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--border td,.el-table--border th{border-right:1px solid #dfe6ec}.el-table--border th{border-bottom:1px solid #dfe6ec}.el-table--hidden{visibility:hidden}.el-table__fixed,.el-table__fixed-right{position:absolute;top:0;left:0;box-shadow:1px 0 8px #d3d4d6;overflow-x:hidden}.el-table__fixed-right:before,.el-table__fixed:before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:#dfe6ec;z-index:4}.el-table__fixed-right-patch{position:absolute;top:-1px;right:0;background-color:#eef1f6;border-bottom:1px solid #dfe6ec}.el-table__fixed-right{top:0;left:auto;right:0;box-shadow:-1px 0 8px #d3d4d6}.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-header-wrapper thead div{background-color:#eef1f6;color:#1f2d3d}.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 #dfe6ec;background-color:#fbfdff;color:#1f2d3d}.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 #dfe6ec}.el-table__body,.el-table__footer,.el-table__header{table-layout:fixed}.el-table__footer-wrapper,.el-table__header-wrapper{overflow:hidden}.el-table__footer-wrapper thead div,.el-table__header-wrapper thead div{background-color:#eef1f6;color:#1f2d3d}.el-table__footer-wrapper tbody td,.el-table__header-wrapper tbody td{background-color:#fbfdff;color:#1f2d3d}.el-table__body-wrapper{overflow:auto;position:relative}.el-table--striped .el-table__body tr.el-table__row--striped td{background:#fafafa;background-clip:padding-box}.el-table--striped .el-table__body tr.el-table__row--striped.current-row td{background:#edf7ff}.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:#eef1f6}.el-table__body tr.current-row>td{background:#edf7ff}.el-table__column-resize-proxy{position:absolute;left:200px;top:0;bottom:0;width:0;border-left:1px solid #dfe6ec;z-index:10}.el-table__column-filter-trigger{display:inline-block;line-height:34px;margin-left:5px;cursor:pointer}.el-table__column-filter-trigger i{color:#97a8be}.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:#eef1f6;background-clip:padding-box}.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 #d1dbe5;border-radius:2px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.12);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:#e4e8f1;color:#48576a}.el-table-filter__list-item.is-active{background-color:#20a0ff;color:#fff}.el-table-filter__content{min-width:100px}.el-table-filter__bottom{border-top:1px solid #d1dbe5;padding:8px}.el-table-filter__bottom button{background:transparent;border:none;color:#8391a5;cursor:pointer;font-size:14px;padding:0 3px}.el-table-filter__bottom button:hover{color:#20a0ff}.el-table-filter__bottom button:focus{outline:none}.el-table-filter__bottom button.is-disabled{color:#bfcbd9;cursor:not-allowed}.el-table-filter__checkbox-group{padding:10px}.el-table-filter__checkbox-group label.el-checkbox{display:block;margin-bottom:8px;margin-left:5px}.el-table-filter__checkbox-group .el-checkbox:last-child{margin-bottom:0}.el-date-table{font-size:12px;min-width:224px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-date-table td{width:32px;height:32px;box-sizing:border-box;text-align:center;cursor:pointer}.el-date-table td.next-month,.el-date-table td.prev-month{color:#ddd}.el-date-table td.today{color:#20a0ff;position:relative}.el-date-table td.today:before{content:" ";position:absolute;top:0;right:0;width:0;height:0;border-top:.5em solid #20a0ff;border-left:.5em solid transparent}.el-date-table td.available:hover{background-color:#e4e8f1}.el-date-table td.in-range{background-color:#d2ecff}.el-date-table td.in-range:hover{background-color:#afddff}.el-date-table td.current:not(.disabled),.el-date-table td.end-date,.el-date-table td.start-date{background-color:#20a0ff!important;color:#fff}.el-date-table td.disabled{background-color:#f4f4f4;opacity:1;cursor:not-allowed;color:#ccc}.el-date-table td.week{font-size:80%;color:#8391a5}.el-date-table th{padding:5px;color:#8391a5;font-weight:400}.el-date-table.is-week-mode .el-date-table__row:hover{background-color:#e4e8f1}.el-date-table.is-week-mode .el-date-table__row.current{background-color:#d2ecff}.el-month-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-month-table td{text-align:center;padding:20px 3px;cursor:pointer}.el-month-table td .cell{width:48px;height:32px;display:block;line-height:32px;color:#48576a}.el-month-table td .cell:hover{background-color:#e4e8f1}.el-month-table td.disabled .cell{background-color:#f4f4f4;cursor:not-allowed;color:#ccc}.el-month-table td.current:not(.disabled) .cell{background-color:#20a0ff!important;color:#fff}.el-year-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-year-table .el-icon{color:#97a8be}.el-year-table td{text-align:center;padding:20px 3px;cursor:pointer}.el-year-table td .cell{width:48px;height:32px;display:block;line-height:32px;color:#48576a}.el-year-table td .cell:hover{background-color:#e4e8f1}.el-year-table td.disabled .cell{background-color:#f4f4f4;cursor:not-allowed;color:#ccc}.el-year-table td.current:not(.disabled) .cell{background-color:#20a0ff!important;color:#fff}.el-date-range-picker{min-width:520px}.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.has-sidebar.has-time{min-width:766px}.el-date-range-picker.has-sidebar{min-width:620px}.el-date-range-picker.has-time{min-width:660px}.el-date-range-picker__header{position:relative;text-align:center;height:28px}.el-date-range-picker__header button{float:left}.el-date-range-picker__header div{font-size:14px;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-right .el-date-range-picker__header button{float:right}.el-date-range-picker__content.is-right .el-date-range-picker__header div{margin-left:50px;margin-right:50px}.el-date-range-picker__content.is-left{border-right:1px solid #e4e4e4}.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:#97a8be}.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-time-range-picker{min-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-picker-panel,.el-time-range-picker__body{border-radius:2px;border:1px solid #d1dbe5}.el-picker-panel{color:#48576a;box-shadow:0 2px 6px #ccc;background:#fff;line-height:20px;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}.el-picker-panel__shortcut{display:block;width:100%;border:0;background-color:transparent;line-height:28px;font-size:14px;color:#48576a;padding-left:12px;text-align:left;outline:none;cursor:pointer}.el-picker-panel__shortcut:hover{background-color:#e4e8f1}.el-picker-panel__shortcut.active{background-color:#e6f1fe;color:#20a0ff}.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:#97a8be;border:0;background:transparent;cursor:pointer;outline:none;margin-top:3px}.el-picker-panel__icon-btn:hover{color:#20a0ff}.el-picker-panel__link-btn{cursor:pointer;color:#20a0ff;text-decoration:none;padding:15px;font-size:12px}.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:#fbfdff;overflow:auto}.el-picker-panel [slot=sidebar]+.el-picker-panel__body,.el-picker-panel__sidebar+.el-picker-panel__body{margin-left:110px}.el-date-picker{min-width:254px}.el-date-picker .el-picker-panel__content{min-width:224px}.el-date-picker table{table-layout:fixed;width:100%}.el-date-picker.has-sidebar.has-time{min-width:434px}.el-date-picker.has-sidebar{min-width:370px}.el-date-picker.has-time{min-width:324px}.el-date-picker.has-time .el-picker-panel__body-wrapper{position:relative}.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-label{font-size:14px;padding:0 5px;line-height:22px;text-align:center;cursor:pointer}.el-date-picker__header-label.active,.el-date-picker__header-label:hover{color:#20a0ff}.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}.time-select-item.selected:not(.disabled){background-color:#20a0ff;color:#fff}.time-select-item.selected:not(.disabled):hover{background-color:#20a0ff}.time-select-item.disabled{color:#d1dbe5;cursor:not-allowed}.time-select-item:hover{background-color:#e4e8f1;cursor:pointer}.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) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;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) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;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) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;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-date-editor{position:relative;display:inline-block}.el-date-editor .el-picker-panel{position:absolute;min-width:180px;box-sizing:border-box;box-shadow:0 2px 6px #ccc;background:#fff;z-index:10;top:41px}.el-date-editor.el-input{width:193px}.el-date-editor--daterange.el-input{width:220px}.el-date-editor--datetimerange.el-input{width:350px}.el-time-spinner.has-seconds .el-time-spinner__wrapper{width:33%}.el-time-spinner.has-seconds .el-time-spinner__wrapper:nth-child(2){margin-left:1%}.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__list{padding:0;margin:0;list-style:none;text-align:center}.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}.el-time-spinner__item:hover:not(.disabled):not(.active){background:#e4e8f1;cursor:pointer}.el-time-spinner__item.active:not(.disabled){color:#fff}.el-time-spinner__item.disabled{color:#d1dbe5;cursor:not-allowed}.el-time-panel{margin:5px 0;border:1px solid #d1dbe5;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);border-radius:2px;position:absolute;width:180px;left:0;z-index:1000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-time-panel__content{font-size:0;position:relative;overflow:hidden}.el-time-panel__content:after,.el-time-panel__content:before{content:":";top:50%;color:#fff;position:absolute;font-size:14px;margin-top:-15px;line-height:16px;background-color:#20a0ff;height:32px;z-index:-1;left:0;right:0;box-sizing:border-box;padding-top:6px;text-align:left}.el-time-panel__content:after{left:50%;margin-left:-2px}.el-time-panel__content:before{padding-left:50%;margin-right:-2px}.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:#8391a5}.el-time-panel__btn.confirm{font-weight:800;color:#20a0ff}.el-popover{position:absolute;background:#fff;min-width:150px;border-radius:2px;border:1px solid #d1dbe5;padding:10px;z-index:2000;font-size:12px;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-popover .popper__arrow,.el-popover .popper__arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-popover .popper__arrow{border-width:6px}.el-popover .popper__arrow:after{content:" ";border-width:6px}.el-popover[x-placement^=top]{margin-bottom:12px}.el-popover[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#d1dbe5;border-bottom-width:0}.el-popover[x-placement^=top] .popper__arrow:after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.el-popover[x-placement^=bottom]{margin-top:12px}.el-popover[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#d1dbe5}.el-popover[x-placement^=bottom] .popper__arrow:after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.el-popover[x-placement^=right]{margin-left:12px}.el-popover[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#d1dbe5;border-left-width:0}.el-popover[x-placement^=right] .popper__arrow:after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.el-popover[x-placement^=left]{margin-right:12px}.el-popover[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#d1dbe5}.el-popover[x-placement^=left] .popper__arrow:after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.el-popover__title{color:#1f2d3d;font-size:13px;line-height:1;margin-bottom:9px}.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-message-box{text-align:left;display:inline-block;vertical-align:middle;background-color:#fff;width:420px;border-radius:3px;font-size:16px;overflow:hidden;-webkit-backface-visibility: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:20px 20px 0}.el-message-box__headerbtn{position:absolute;top:19px;right:20px;background:transparent;border:none;outline:none;padding:0;cursor:pointer}.el-message-box__headerbtn .el-message-box__close{color:#999}.el-message-box__headerbtn:focus .el-message-box__close,.el-message-box__headerbtn:hover .el-message-box__close{color:#20a0ff}.el-message-box__content{padding:30px 20px;color:#48576a;font-size:14px;position:relative}.el-message-box__input{padding-top:15px}.el-message-box__input input.invalid,.el-message-box__input input.invalid:focus{border-color:#ff4949}.el-message-box__errormsg{color:#ff4949;font-size:12px;min-height:18px;margin-top:2px}.el-message-box__title{padding-left:0;margin-bottom:0;font-size:16px;font-weight:700;height:18px;color:#333}.el-message-box__message{margin:0}.el-message-box__message p{margin:0;line-height:1.4}.el-message-box__btns{padding:10px 20px 15px;text-align:right}.el-message-box__btns button:nth-child(2){margin-left:10px}.el-message-box__btns-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.el-message-box__status{position:absolute;top:50%;transform:translateY(-50%);font-size:36px!important}.el-message-box__status.el-icon-circle-check{color:#13ce66}.el-message-box__status.el-icon-information{color:#50bfff}.el-message-box__status.el-icon-warning{color:#f7ba2a}.el-message-box__status.el-icon-circle-cross{color:#ff4949}.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:13px;line-height:1}.el-breadcrumb__separator{margin:0 8px;color:#bfcbd9}.el-breadcrumb__item{float:left}.el-breadcrumb__item:last-child .el-breadcrumb__item__inner,.el-breadcrumb__item:last-child .el-breadcrumb__item__inner:hover,.el-breadcrumb__item:last-child .el-breadcrumb__item__inner a,.el-breadcrumb__item:last-child .el-breadcrumb__item__inner a:hover{color:#97a8be;cursor:text}.el-breadcrumb__item:last-child .el-breadcrumb__separator{display:none}.el-breadcrumb__item__inner,.el-breadcrumb__item__inner a{transition:color .15s linear;color:#48576a}.el-breadcrumb__item__inner:hover,.el-breadcrumb__item__inner a:hover{color:#20a0ff;cursor:pointer}.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 .el-form-item{margin-bottom:0}.el-form-item.is-error .el-input-group__append .el-input__inner,.el-form-item.is-error .el-input-group__prepend .el-input__inner,.el-form-item.is-error .el-input__inner{border-color:transparent}.el-form-item.is-error .el-input__inner,.el-form-item.is-error .el-textarea__inner{border-color:#ff4949}.el-form-item.is-required .el-form-item__label:before{content:"*";color:#ff4949;margin-right:4px}.el-form-item__label{text-align:right;vertical-align:middle;float:left;font-size:14px;color:#48576a;line-height:1;padding:11px 12px 11px 0;box-sizing:border-box}.el-form-item__content{line-height:36px;position:relative;font-size:14px}.el-form-item__error{color:#ff4949;font-size:12px;line-height:1;padding-top:4px;position:absolute;top:100%;left:0}.el-tabs{clear:both}.el-tabs__header{border-bottom:1px solid #d1dbe5;padding:0;position:relative;margin:0 0 15px}.el-tabs__active-bar{position:absolute;bottom:0;left:0;height:3px;background-color:#20a0ff;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:#20a0ff}.el-tabs__nav-wrap{overflow:hidden;margin-bottom:-1px;position:relative}.el-tabs__nav-wrap.is-scrollable{padding:0 15px}.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:#8391a5}.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}.el-tabs__item{padding:0 16px;height:42px;box-sizing:border-box;line-height:42px;display:inline-block;list-style:none;font-size:14px;color:#8391a5;position:relative}.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(.7);display:inline-block}.el-tabs__item .el-icon-close:hover{background-color:#97a8be;color:#fff}.el-tabs__item:hover{color:#1f2d3d;cursor:pointer}.el-tabs__item.is-disabled{color:#bbb;cursor:default}.el-tabs__item.is-active{color:#20a0ff}.el-tabs__content{overflow:hidden;position:relative}.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:1px solid transparent;transition:all .3s cubic-bezier(.645,.045,.355,1)}.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover{padding-right:9px;padding-left:9px}.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:1px solid #d1dbe5;border-bottom-color:#fff;border-radius:4px 4px 0 0}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable{padding-right:16px;padding-left:16px}.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 #d1dbe5;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:#eef1f6;margin:0}.el-tabs--border-card>.el-tabs__header .el-tabs__item{transition:all .3s cubic-bezier(.645,.045,.355,1);border:1px solid transparent;border-top:0;margin-right:-1px;margin-left:-1px}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{background-color:#fff;border-right-color:#d1dbe5;border-left-color:#d1dbe5}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active:first-child{border-left-color:#d1dbe5}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active:last-child{border-right-color:#d1dbe5}.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;transform-origin:0 0;transform:translateX(100%)}to{opacity:1;transform-origin:0 0;transform:translateX(0)}}@keyframes slideInRight-leave{0%{transform-origin:0 0;transform:translateX(0);opacity:1}to{transform-origin:0 0;transform:translateX(100%);opacity:0}}@keyframes slideInLeft-enter{0%{opacity:0;transform-origin:0 0;transform:translateX(-100%)}to{opacity:1;transform-origin:0 0;transform:translateX(0)}}@keyframes slideInLeft-leave{0%{transform-origin:0 0;transform:translateX(0);opacity:1}to{transform-origin:0 0;transform:translateX(-100%);opacity:0}}.el-tag{background-color:#8391a5;display:inline-block;padding:0 5px;height:24px;line-height:22px;font-size:12px;color:#fff;border-radius:4px;box-sizing:border-box;border:1px solid transparent;white-space:nowrap}.el-tag .el-icon-close{border-radius:50%;text-align:center;position:relative;cursor:pointer;font-size:12px;transform:scale(.75);height:18px;width:18px;line-height:18px;vertical-align:middle;top:-1px;right:-2px}.el-tag .el-icon-close:hover{background-color:#fff;color:#8391a5}.el-tag--gray{background-color:#e4e8f1;border-color:#e4e8f1;color:#48576a}.el-tag--gray .el-tag__close:hover{background-color:#48576a;color:#fff}.el-tag--gray.is-hit{border-color:#48576a}.el-tag--primary{background-color:rgba(32,160,255,.1);border-color:rgba(32,160,255,.2);color:#20a0ff}.el-tag--primary .el-tag__close:hover{background-color:#20a0ff;color:#fff}.el-tag--primary.is-hit{border-color:#20a0ff}.el-tag--success{background-color:rgba(18,206,102,.1);border-color:rgba(18,206,102,.2);color:#13ce66}.el-tag--success .el-tag__close:hover{background-color:#13ce66;color:#fff}.el-tag--success.is-hit{border-color:#13ce66}.el-tag--warning{background-color:rgba(247,186,41,.1);border-color:rgba(247,186,41,.2);color:#f7ba2a}.el-tag--warning .el-tag__close:hover{background-color:#f7ba2a;color:#fff}.el-tag--warning.is-hit{border-color:#f7ba2a}.el-tag--danger{background-color:rgba(255,73,73,.1);border-color:rgba(255,73,73,.2);color:#ff4949}.el-tag--danger .el-tag__close:hover{background-color:#ff4949;color:#fff}.el-tag--danger.is-hit{border-color:#ff4949}.el-tree{cursor:default;background:#fff;border:1px solid #d1dbe5}.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:#5e7382}.el-tree-node{white-space:nowrap}.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-node__content{line-height:36px;height:36px;cursor:pointer}.el-tree-node__content>.el-checkbox,.el-tree-node__content>.el-tree-node__expand-icon{margin-right:8px}.el-tree-node__content>.el-checkbox{vertical-align:middle}.el-tree-node__content:hover{background:#e4e8f1}.el-tree-node__expand-icon{display:inline-block;cursor:pointer;width:0;height:0;vertical-align:middle;margin-left:10px;border:6px solid transparent;border-right-width:0;border-left-color:#97a8be;border-left-width:7px;transform:rotate(0deg);transition:transform .3s ease-in-out}.el-tree-node__expand-icon:hover{border-left-color:#999}.el-tree-node__expand-icon.expanded{transform:rotate(90deg)}.el-tree-node__expand-icon.is-leaf{border-color:transparent;cursor:default}.el-tree-node__label,.el-tree-node__loading-icon{font-size:14px;vertical-align:middle;display:inline-block}.el-tree-node__loading-icon{margin-right:4px;color:#97a8be}.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{background-color:#edf7ff}.el-alert{width:100%;padding:8px 16px;margin:0;box-sizing:border-box;border-radius:4px;position:relative;background-color:#fff;overflow:hidden;color:#fff;opacity:1;display:table;transition:opacity .2s}.el-alert .el-alert__description{color:#fff;font-size:12px;margin:5px 0 0}.el-alert--success{background-color:#13ce66}.el-alert--info{background-color:#50bfff}.el-alert--warning{background-color:#f7ba2a}.el-alert--error{background-color:#ff4949}.el-alert__content{display:table-cell;padding:0 8px}.el-alert__icon{font-size:16px;width:16px;display:table-cell;color:#fff;vertical-align:middle}.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__closebtn{font-size:12px;color:#fff;opacity:1;top:12px;right:15px;position:absolute;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{width:330px;padding:20px;box-sizing:border-box;border-radius:2px;position:fixed;right:16px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);transition:opacity .3s,transform .3s,right .3s,top .4s;overflow:hidden}.el-notification .el-icon-circle-check{color:#13ce66}.el-notification .el-icon-circle-cross{color:#ff4949}.el-notification .el-icon-information{color:#50bfff}.el-notification .el-icon-warning{color:#f7ba2a}.el-notification__group{margin-left:0}.el-notification__group.is-with-icon{margin-left:55px}.el-notification__title{font-weight:400;font-size:16px;color:#1f2d3d;margin:0}.el-notification__content{font-size:14px;line-height:21px;margin:10px 0 0;color:#8391a5;text-align:justify}.el-notification__icon{width:40px;height:40px;font-size:40px;float:left;position:relative;top:3px}.el-notification__closeBtn{top:20px;right:20px;position:absolute;cursor:pointer;color:#bfcbd9;font-size:14px}.el-notification__closeBtn:hover{color:#97a8be}.el-notification-fade-enter{transform:translateX(100%);right:0}.el-notification-fade-leave-active{opacity:0}.el-input-number{display:inline-block;width:180px;position:relative;line-height:normal}.el-input-number .el-input{display:block}.el-input-number .el-input__inner{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:82px}.el-input-number.is-without-controls .el-input__inner{padding-right:10px}.el-input-number.is-disabled .el-input-number__decrease,.el-input-number.is-disabled .el-input-number__increase{border-color:#d1dbe5;color:#d1dbe5}.el-input-number.is-disabled .el-input-number__decrease:hover,.el-input-number.is-disabled .el-input-number__increase:hover{color:#d1dbe5;cursor:not-allowed}.el-input-number__decrease,.el-input-number__increase{height:auto;border-left:1px solid #bfcbd9;width:36px;line-height:34px;top:1px;text-align:center;color:#97a8be;cursor:pointer;position:absolute;z-index:1}.el-input-number__decrease:hover,.el-input-number__increase:hover{color:#20a0ff}.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:#20a0ff}.el-input-number__decrease.is-disabled,.el-input-number__increase.is-disabled{color:#d1dbe5;cursor:not-allowed}.el-input-number__increase{right:0}.el-input-number__decrease{right:37px}.el-input-number--large{width:200px}.el-input-number--large .el-input-number__decrease,.el-input-number--large .el-input-number__increase{line-height:40px;width:42px;font-size:16px}.el-input-number--large .el-input-number__decrease{right:43px}.el-input-number--large .el-input__inner{padding-right:94px}.el-input-number--small{width:130px}.el-input-number--small .el-input-number__decrease,.el-input-number--small .el-input-number__increase{line-height:28px;width:30px;font-size:13px}.el-input-number--small .el-input-number__decrease{right:31px}.el-input-number--small .el-input__inner{padding-right:70px}.el-tooltip__popper{position:absolute;border-radius:4px;padding:10px;z-index:2000;font-size:12px;line-height:1.2}.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:#1f2d3d;border-bottom-width:0}.el-tooltip__popper[x-placement^=top] .popper__arrow:after{bottom:1px;margin-left:-5px;border-top-color:#1f2d3d;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:#1f2d3d}.el-tooltip__popper[x-placement^=bottom] .popper__arrow:after{top:1px;margin-left:-5px;border-top-width:0;border-bottom-color:#1f2d3d}.el-tooltip__popper[x-placement^=right]{margin-left:12px}.el-tooltip__popper[x-placement^=right] .popper__arrow{left:-6px;border-right-color:#1f2d3d;border-left-width:0}.el-tooltip__popper[x-placement^=right] .popper__arrow:after{bottom:-5px;left:1px;border-right-color:#1f2d3d;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:#1f2d3d}.el-tooltip__popper[x-placement^=left] .popper__arrow:after{right:1px;bottom:-5px;margin-left:-5px;border-right-width:0;border-left-color:#1f2d3d}.el-tooltip__popper.is-light{background:#fff;border:1px solid #1f2d3d}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow{border-top-color:#1f2d3d}.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:#1f2d3d}.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:#1f2d3d}.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:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow:after{border-right-color:#fff}.el-tooltip__popper.is-dark{background:#1f2d3d;color:#fff}.el-slider.is-vertical{position:relative}.el-slider.is-vertical .el-slider__runway{width:4px;height:100%;margin:0 16px}.el-slider.is-vertical .el-slider__bar{width:4px;height:auto;border-radius:0 0 3px 3px}.el-slider.is-vertical .el-slider__button-wrapper{top:auto;left:-16px;transform:translateY(50%)}.el-slider.is-vertical .el-slider__stop{transform:translateY(50%)}.el-slider.is-vertical.el-slider--with-input{padding-bottom:64px}.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:30px;margin-top:-1px;border:1px solid #bfcbd9;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:#8391a5}.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:#20a0ff}.el-slider__runway{width:100%;height:4px;margin:16px 0;background-color:#e4e8f1;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,.el-slider__runway.disabled .el-slider__button{background-color:#bfcbd9}.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}.el-slider__bar{height:4px;background-color:#20a0ff;border-top-left-radius:3px;border-bottom-left-radius:3px;position:absolute}.el-slider__button-wrapper{width:36px;height:36px;position:absolute;z-index:1001;top:-16px;transform:translateX(-50%);background-color:transparent;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-slider__button-wrapper .el-tooltip{vertical-align:middle;display:inline-block}.el-slider__button-wrapper.hover,.el-slider__button-wrapper:hover{cursor:-webkit-grab;cursor:grab}.el-slider__button-wrapper.dragging{cursor:-webkit-grabbing;cursor:grabbing}.el-slider__button{width:12px;height:12px;background-color:#20a0ff;border-radius:50%;transition:.2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-slider__button.dragging,.el-slider__button.hover,.el-slider__button:hover{transform:scale(1.5);background-color:#1c8de0}.el-slider__button.hover,.el-slider__button:hover{cursor:-webkit-grab;cursor:grab}.el-slider__button.dragging{cursor:-webkit-grabbing;cursor:grabbing}.el-slider__stop{position:absolute;width:4px;height:4px;border-radius:100%;background-color:#bfcbd9;transform:translateX(-50%)}.el-loading-mask{position:absolute;z-index:10000;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{width:50px;height:50px}.el-loading-spinner{top:50%;margin-top:-21px;width:100%;text-align:center;position:absolute}.el-loading-spinner .el-loading-text{color:#20a0ff;margin:3px 0;font-size:14px}.el-loading-spinner .circular{width:42px;height: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:#20a0ff;stroke-linecap:round}.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--flex{display:-ms-flexbox;display:flex}.el-row--flex:after,.el-row--flex:before{display:none}.el-row--flex.is-align-bottom{-ms-flex-align:end;align-items:flex-end}.el-row--flex.is-align-middle{-ms-flex-align:center;align-items:center}.el-row--flex.is-justify-space-around{-ms-flex-pack:distribute;justify-content:space-around}.el-row--flex.is-justify-space-between{-ms-flex-pack:justify;justify-content:space-between}.el-row--flex.is-justify-end{-ms-flex-pack:end;justify-content:flex-end}.el-row--flex.is-justify-center{-ms-flex-pack:center;justify-content:center}.el-col-1,.el-col-2,.el-col-3,.el-col-4,.el-col-5,.el-col-6,.el-col-7,.el-col-8,.el-col-9,.el-col-10,.el-col-11,.el-col-12,.el-col-13,.el-col-14,.el-col-15,.el-col-16,.el-col-17,.el-col-18,.el-col-19,.el-col-20,.el-col-21,.el-col-22,.el-col-23,.el-col-24{float:left;box-sizing:border-box}.el-col-0{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 (max-width:768px){.el-col-xs-0{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 (min-width:768px){.el-col-sm-0{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 (min-width:992px){.el-col-md-0{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 (min-width:1200px){.el-col-lg-0{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%}}.el-upload{display:inline-block;text-align:center;cursor:pointer}.el-upload iframe{position:absolute;z-index:-1;top:0;left:0;opacity:0;filter:alpha(opacity=0)}.el-upload__input{display:none}.el-upload__tip{font-size:12px;color:#8391a5;margin-top:7px}.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{border-color:#20a0ff;color:#20a0ff}.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-upload__text{color:#97a8be;font-size:14px;text-align:center}.el-upload-dragger .el-upload__text em{color:#20a0ff;font-style:normal}.el-upload-dragger .el-icon-upload{font-size:67px;color:#97a8be;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 rgba(191,203,217,.2);margin-top:7px;padding-top:5px}.el-upload-dragger:hover{border-color:#20a0ff}.el-upload-dragger.is-dragover{background-color:rgba(32,159,255,.06);border:2px dashed #20a0ff}.el-upload-list{margin:0;padding:0;list-style:none}.el-upload-list.is-disabled .el-upload-list__item:hover .el-upload-list__item-status-label{display:block}.el-upload-list__item{transition:all .5s cubic-bezier(.55,0,.1,1);font-size:14px;color:#48576a;line-height:1.8;margin-top:5px;box-sizing:border-box;border-radius:4px;width:100%;position:relative}.el-upload-list__item .el-progress-bar{margin-right:0;padding-right:0}.el-upload-list__item .el-progress{position:absolute;top:20px;width:100%}.el-upload-list__item .el-progress__text{position:absolute;top:-13px;right:0}.el-upload-list__item:first-child{margin-top:10px}.el-upload-list__item .el-icon-upload-success{color:#13ce66}.el-upload-list__item .el-icon-close{display:none;position:absolute;top:5px;right:5px;cursor:pointer;opacity:.75;color:#48576a;transform:scale(.7)}.el-upload-list__item .el-icon-close:hover{opacity:1}.el-upload-list__item:hover{background-color:#eef1f6}.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:hover{color:#20a0ff;cursor:pointer}.el-upload-list__item.is-success:hover .el-upload-list__item-status-label{display:none}.el-upload-list__item-name{color:#48576a;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]{color:#97a8be;margin-right:7px;height:100%;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:#48576a;display:none}.el-upload-list__item-delete:hover{color:#20a0ff}.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) scale(.8)}.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 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;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) scale(.8)}.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 img{display:block;width:100%;height:100%}.el-upload-cover+.el-upload__inner{opacity:0;position:relative;z-index:1}.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) scale(.8);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) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;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:#48576a}.el-progress{position:relative;line-height:1}.el-progress.is-exception .el-progress-bar__inner{background-color:#ff4949}.el-progress.is-exception .el-progress__text{color:#ff4949}.el-progress.is-success .el-progress-bar__inner{background-color:#13ce66}.el-progress.is-success .el-progress__text{color:#13ce66}.el-progress__text{font-size:14px;color:#48576a;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-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:#e4e8f1;overflow:hidden;position:relative;vertical-align:middle}.el-progress-bar__inner{position:absolute;left:0;top:0;height:100%;border-radius:2px 0 0 2px;background-color:#20a0ff;text-align:right;border-radius:100px;line-height:1;white-space:nowrap}.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{box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);min-width:300px;padding:10px 12px;box-sizing:border-box;border-radius:2px;position:fixed;left:50%;top:20px;transform:translateX(-50%);background-color:#fff;transition:opacity .3s,transform .4s;overflow:hidden}.el-message .el-icon-circle-check{color:#13ce66}.el-message .el-icon-circle-cross{color:#ff4949}.el-message .el-icon-information{color:#50bfff}.el-message .el-icon-warning{color:#f7ba2a}.el-message__group{margin-left:38px;position:relative;height:20px;line-height:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.el-message__group p{font-size:14px;margin:0 34px 0 0;white-space:nowrap;color:#8391a5;text-align:justify}.el-message__group.is-with-icon{margin-left:0}.el-message__img{width:40px;height:40px;position:absolute;left:0;top:0}.el-message__icon{vertical-align:middle;margin-right:8px}.el-message__closeBtn{top:3px;right:0;position:absolute;cursor:pointer;color:#bfcbd9;font-size:14px}.el-message__closeBtn:hover{color:#97a8be}.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:#ff4949;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-dot{width:8px;height:8px;padding:0;right:0;border-radius:50%}.el-badge__content.is-fixed{top:0;right:10px;position:absolute;transform:translateY(-50%) translateX(100%)}.el-badge__content.is-fixed.is-dot{right:5px}.el-card{border:1px solid #d1dbe5;border-radius:4px;background-color:#fff;overflow:hidden;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-card__header{padding:18px 20px;border-bottom:1px solid #d1dbe5;box-sizing:border-box}.el-card__body{padding:20px}.el-rate{height:20px;line-height:1}.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:#bfcbd9;transition:.3s}.el-rate__icon .path2{position:absolute;left:0;top:0}.el-rate__icon.hover{transform:scale(1.15)}.el-rate__decimal{position:absolute;top:0;left:0;display:inline-block;overflow:hidden}.el-rate__text{font-size:14px;vertical-align:middle}.el-steps{font-size:0}.el-steps>:last-child .el-step__line{display:none}.el-steps.is-horizontal{white-space:nowrap}.el-steps.is-horizontal.is-center{text-align:center}.el-step{position:relative;vertical-align:top}.el-step:last-child .el-step__main{padding-right:0}.el-step.is-vertical .el-step__head,.el-step.is-vertical .el-step__main{display:inline-block}.el-step.is-vertical .el-step__main{padding-left:10px}.el-step.is-horizontal,.el-step__line{display:inline-block}.el-step__line{position:absolute;border-color:inherit;background-color:#bfcbd9}.el-step__line.is-vertical{width:2px;box-sizing:border-box;top:32px;bottom:0;left:15px}.el-step__line.is-horizontal{top:15px;height:2px;left:32px;right:0}.el-step__line.is-icon.is-horizontal{right:4px}.el-step__line-inner{display:block;border-width:1px;border-style:solid;border-color:inherit;transition:all .15s;box-sizing:border-box;width:0;height:0}.el-step__icon{display:block;line-height:28px}.el-step__icon>*{line-height:inherit;vertical-align:middle}.el-step__head{width:28px;height:28px;border-radius:50%;background-color:transparent;text-align:center;line-height:28px;font-size:28px;vertical-align:top;transition:all .15s}.el-step__head.is-finish{color:#20a0ff;border-color:#20a0ff}.el-step__head.is-error{color:#ff4949;border-color:#ff4949}.el-step__head.is-success{color:#13ce66;border-color:#13ce66}.el-step__head.is-process,.el-step__head.is-wait{color:#bfcbd9;border-color:#bfcbd9}.el-step__head.is-text{font-size:14px;border-width:2px;border-style:solid}.el-step__head.is-text.is-finish{color:#fff;background-color:#20a0ff;border-color:#20a0ff}.el-step__head.is-text.is-error{color:#fff;background-color:#ff4949;border-color:#ff4949}.el-step__head.is-text.is-success{color:#fff;background-color:#13ce66;border-color:#13ce66}.el-step__head.is-text.is-wait{color:#bfcbd9;background-color:#fff;border-color:#bfcbd9}.el-step__head.is-text.is-process{color:#fff;background-color:#bfcbd9;border-color:#bfcbd9}.el-step__main{white-space:normal;padding-right:10px;text-align:left}.el-step__title{font-size:14px;line-height:32px;display:inline-block}.el-step__title.is-finish{font-weight:700;color:#20a0ff}.el-step__title.is-error{font-weight:700;color:#ff4949}.el-step__title.is-success{font-weight:700;color:#13ce66}.el-step__title.is-wait{font-weight:400;color:#97a8be}.el-step__title.is-process{font-weight:700;color:#48576a}.el-step__description{font-size:12px;font-weight:400;line-height:14px}.el-step__description.is-finish{color:#20a0ff}.el-step__description.is-error{color:#ff4949}.el-step__description.is-success{color:#13ce66}.el-step__description.is-wait{color:#bfcbd9}.el-step__description.is-process{color:#8391a5}.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;width:36px;height: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:hover{background-color:rgba(31,45,61,.23)}.el-carousel__arrow i{cursor:pointer}.el-carousel__arrow--left{left:16px}.el-carousel__arrow--right{right:16px}.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:#8391a5;opacity:.24}.el-carousel__indicators--labels{left:0;right:0;transform:none;text-align:center}.el-carousel__indicators--labels .el-carousel__button{width:auto;height: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}.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(151,168,190,.3);transition:background-color .3s}.el-scrollbar__thumb:hover{background-color:rgba(151,168,190,.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-horizontal{height:6px;left:2px}.el-scrollbar__bar.is-horizontal>div{height:100%}.el-scrollbar__bar.is-vertical{width:6px;top:2px}.el-scrollbar__bar.is-vertical>div{width: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-animating{transition:transform .4s ease-in-out}.el-carousel__item.is-active{z-index:2}.el-carousel__item--card{width:50%;transition:transform .4s ease-in-out}.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}.el-collapse{border:1px solid #dfe6ec;border-radius:0}.el-collapse-item:last-child{margin-bottom:-1px}.el-collapse-item.is-active>.el-collapse-item__header .el-collapse-item__header__arrow{transform:rotate(90deg)}.el-collapse-item__header{height:43px;line-height:43px;padding-left:15px;background-color:#fff;color:#48576a;cursor:pointer;border-bottom:1px solid #dfe6ec;font-size:13px}.el-collapse-item__header__arrow{margin-right:8px;transition:transform .3s}.el-collapse-item__wrap{will-change:height;background-color:#fbfdff;overflow:hidden;box-sizing:border-box;border-bottom:1px solid #dfe6ec}.el-collapse-item__content{padding:10px 15px;font-size:13px;color:#1f2d3d;line-height:1.769230769230769}.el-cascader{display:inline-block;position:relative}.el-cascader .el-input,.el-cascader .el-input__inner{cursor:pointer}.el-cascader .el-input__icon{transition:none}.el-cascader .el-icon-caret-bottom{transition:transform .3s}.el-cascader .el-icon-caret-bottom.is-reverse{transform:rotate(180deg)}.el-cascader .el-icon-circle-close{z-index:2}.el-cascader.is-disabled .el-cascader__label{z-index:2;color:#bbb}.el-cascader__label{position:absolute;left:0;top:0;height:100%;line-height:36px;padding:0 25px 0 10px;color:#1f2d3d;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:left}.el-cascader__label span{color:#97a8be}.el-cascader--large{font-size:16px}.el-cascader--large .el-cascader__label{line-height:40px}.el-cascader--small{font-size:13px}.el-cascader--small .el-cascader__label{line-height:28px}.el-cascader-menus{white-space:nowrap;background:#fff;position:absolute;margin:5px 0;z-index:2;border:1px solid #d1dbe5;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04)}.el-cascader-menu{display:inline-block;vertical-align:top;height:204px;overflow:auto;border-right:1px solid #d1dbe5;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 30px 8px 10px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#48576a;height:36px;line-height:1.5;box-sizing:border-box;cursor:pointer}.el-cascader-menu__item:hover{background-color:#e4e8f1}.el-cascader-menu__item.selected{color:#fff;background-color:#20a0ff}.el-cascader-menu__item.selected.hover{background-color:#1c8de0}.el-cascader-menu__item.is-active{color:#fff;background-color:#20a0ff}.el-cascader-menu__item.is-active:hover{background-color:#1c8de0}.el-cascader-menu__item.is-disabled{color:#bfcbd9;background-color:#fff;cursor:not-allowed}.el-cascader-menu__item.is-disabled:hover{background-color:#fff}.el-cascader-menu__item__keyword{font-weight:700}.el-cascader-menu__item--extensible:after{font-family:element-icons;content:"\E606";font-size:12px;transform:scale(.8);color:#bfcbd9;position:absolute;right:10px;margin-top:1px}.el-cascader-menu--flexible{height:auto;max-height:180px;overflow:auto}.el-cascader-menu--flexible .el-cascader-menu__item{overflow:visible}.el-color-hue-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background-color:red;padding:0 2px}.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-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-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.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-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-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:#1f2d3d}.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:#20a0ff;border-color:#20a0ff}.el-color-dropdown__link-btn{cursor:pointer;color:#20a0ff;text-decoration:none;padding:15px;font-size:12px}.el-color-dropdown__link-btn:hover{color:#4db3ff}.el-color-picker{display:inline-block;position:relative;line-height:normal}.el-color-picker__trigger{display:inline-block;box-sizing:border-box;height:36px;padding:6px;border:1px solid #bfcbd9;border-radius:4px;font-size:0}.el-color-picker__color{position:relative;display:inline-block;box-sizing:border-box;border:1px solid #666;width:22px;height:22px;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{font-size:12px;vertical-align:middle;color:#666;position:absolute;top:4px;left:4px}.el-color-picker__icon{display:inline-block;position:relative;top:-6px;margin-left:8px;width:12px;color:#888;font-size:12px}.el-color-picker__panel{position:absolute;z-index:10;padding:6px;background-color:#fff;border:1px solid #d1dbe5;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.12)}.el-input{position:relative;font-size:14px;display:inline-block;width:100%}.el-input.is-disabled .el-input__inner{background-color:#eef1f6;border-color:#d1dbe5;color:#bbb;cursor:not-allowed}.el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#bfcbd9}.el-input.is-disabled .el-input__inner::-moz-placeholder{color:#bfcbd9}.el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#bfcbd9}.el-input.is-disabled .el-input__inner::placeholder{color:#bfcbd9}.el-input.is-active .el-input__inner{outline:none;border-color:#20a0ff}.el-input__inner{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #bfcbd9;box-sizing:border-box;color:#1f2d3d;display:inline-block;font-size:inherit;height:36px;line-height:1;outline:none;padding:3px 10px;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.el-input__inner::-webkit-input-placeholder{color:#97a8be}.el-input__inner::-moz-placeholder{color:#97a8be}.el-input__inner:-ms-input-placeholder{color:#97a8be}.el-input__inner::placeholder{color:#97a8be}.el-input__inner:hover{border-color:#8391a5}.el-input__inner:focus{outline:none;border-color:#20a0ff}.el-input__icon{position:absolute;width:35px;height:100%;right:0;top:0;text-align:center;color:#bfcbd9;transition:all .3s}.el-input__icon:after{content:"";height:100%;width:0;display:inline-block;vertical-align:middle}.el-input__icon+.el-input__inner{padding-right:35px}.el-input__icon.is-clickable:hover{cursor:pointer;color:#8391a5}.el-input__icon.is-clickable:hover+.el-input__inner{border-color:#8391a5}.el-input--large{font-size:16px}.el-input--large .el-input__inner{height:42px}.el-input--small{font-size:13px}.el-input--small .el-input__inner{height:30px}.el-input--mini{font-size:12px}.el-input--mini .el-input__inner{height:22px}.el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate}.el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.el-input-group__append,.el-input-group__prepend{background-color:#fbfdff;color:#97a8be;vertical-align:middle;display:table-cell;position:relative;border:1px solid #bfcbd9;border-radius:4px;padding:0 10px;width:1px;white-space:nowrap}.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:block;margin:-10px}.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--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.el-textarea{display:inline-block;width:100%;vertical-align:bottom}.el-textarea.is-disabled .el-textarea__inner{background-color:#eef1f6;border-color:#d1dbe5;color:#bbb;cursor:not-allowed}.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#bfcbd9}.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder{color:#bfcbd9}.el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#bfcbd9}.el-textarea.is-disabled .el-textarea__inner::placeholder{color:#bfcbd9}.el-textarea__inner{display:block;resize:vertical;padding:5px 7px;line-height:1.5;box-sizing:border-box;width:100%;font-size:14px;color:#1f2d3d;background-color:#fff;background-image:none;border:1px solid #bfcbd9;border-radius:4px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-textarea__inner::-webkit-input-placeholder{color:#97a8be}.el-textarea__inner::-moz-placeholder{color:#97a8be}.el-textarea__inner:-ms-input-placeholder{color:#97a8be}.el-textarea__inner::placeholder{color:#97a8be}.el-textarea__inner:hover{border-color:#8391a5}.el-textarea__inner:focus{outline:none;border-color:#20a0ff}.el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #bfcbd9;border-color:#c4c4c4;color:#1f2d3d;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:10px 15px;font-size:14px;border-radius:4px}.el-button+.el-button{margin-left:10px}.el-button:focus,.el-button:hover{color:#20a0ff;border-color:#20a0ff}.el-button:active{color:#1d90e6;border-color:#1d90e6;outline:none}.el-button::-moz-focus-inner{border:0}.el-button [class*=el-icon-]+span{margin-left:5px}.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-disabled,.el-button.is-disabled:focus,.el-button.is-disabled:hover{color:#bfcbd9;cursor:not-allowed;background-image:none;background-color:#eef1f6;border-color:#d1dbe5}.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:#d1dbe5;color:#bfcbd9}.el-button.is-active{color:#1d90e6;border-color:#1d90e6}.el-button.is-plain:focus,.el-button.is-plain:hover{background:#fff;border-color:#20a0ff;color:#20a0ff}.el-button.is-plain:active{background:#fff;border-color:#1d90e6;color:#1d90e6;outline:none}.el-button--primary{color:#fff;background-color:#20a0ff;border-color:#20a0ff}.el-button--primary:focus,.el-button--primary:hover{background:#4db3ff;border-color:#4db3ff;color:#fff}.el-button--primary:active{outline:none}.el-button--primary.is-active,.el-button--primary:active{background:#1d90e6;border-color:#1d90e6;color:#fff}.el-button--primary.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--primary.is-plain:focus,.el-button--primary.is-plain:hover{background:#fff;border-color:#20a0ff;color:#20a0ff}.el-button--primary.is-plain:active{background:#fff;border-color:#1d90e6;color:#1d90e6;outline:none}.el-button--success{color:#fff;background-color:#13ce66;border-color:#13ce66}.el-button--success:focus,.el-button--success:hover{background:#42d885;border-color:#42d885;color:#fff}.el-button--success:active{outline:none}.el-button--success.is-active,.el-button--success:active{background:#11b95c;border-color:#11b95c;color:#fff}.el-button--success.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--success.is-plain:focus,.el-button--success.is-plain:hover{background:#fff;border-color:#13ce66;color:#13ce66}.el-button--success.is-plain:active{background:#fff;border-color:#11b95c;color:#11b95c;outline:none}.el-button--warning{color:#fff;background-color:#f7ba2a;border-color:#f7ba2a}.el-button--warning:focus,.el-button--warning:hover{background:#f9c855;border-color:#f9c855;color:#fff}.el-button--warning:active{outline:none}.el-button--warning.is-active,.el-button--warning:active{background:#dea726;border-color:#dea726;color:#fff}.el-button--warning.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--warning.is-plain:focus,.el-button--warning.is-plain:hover{background:#fff;border-color:#f7ba2a;color:#f7ba2a}.el-button--warning.is-plain:active{background:#fff;border-color:#dea726;color:#dea726;outline:none}.el-button--danger{color:#fff;background-color:#ff4949;border-color:#ff4949}.el-button--danger:focus,.el-button--danger:hover{background:#ff6d6d;border-color:#ff6d6d;color:#fff}.el-button--danger:active{outline:none}.el-button--danger.is-active,.el-button--danger:active{background:#e64242;border-color:#e64242;color:#fff}.el-button--danger.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--danger.is-plain:focus,.el-button--danger.is-plain:hover{background:#fff;border-color:#ff4949;color:#ff4949}.el-button--danger.is-plain:active{background:#fff;border-color:#e64242;color:#e64242;outline:none}.el-button--info{color:#fff;background-color:#50bfff;border-color:#50bfff}.el-button--info:focus,.el-button--info:hover{background:#73ccff;border-color:#73ccff;color:#fff}.el-button--info:active{outline:none}.el-button--info.is-active,.el-button--info:active{background:#48ace6;border-color:#48ace6;color:#fff}.el-button--info.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--info.is-plain:focus,.el-button--info.is-plain:hover{background:#fff;border-color:#50bfff;color:#50bfff}.el-button--info.is-plain:active{background:#fff;border-color:#48ace6;color:#48ace6;outline:none}.el-button--large{padding:11px 19px;font-size:16px;border-radius:4px}.el-button--small{padding:7px 9px;font-size:12px;border-radius:4px}.el-button--mini{padding:4px;font-size:12px;border-radius:4px}.el-button--text{border:none;color:#20a0ff;background:transparent;padding-left:0;padding-right:0}.el-button--text:focus,.el-button--text:hover{color:#4db3ff}.el-button--text:active{color:#1d90e6}.el-button-group{display:inline-block;vertical-align:middle}.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-button-group .el-button{float:left;position:relative}.el-button-group .el-button+.el-button{margin-left:0}.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: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-checkbox{color:#1f2d3d;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.el-checkbox+.el-checkbox{margin-left:15px}.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-indeterminate .el-checkbox__inner{background-color:#20a0ff;border-color:#0190fe}.el-checkbox__input.is-indeterminate .el-checkbox__inner:before{content:"";position:absolute;display:block;border:1px solid #fff;margin-top:-1px;left:3px;right:3px;top:50%}.el-checkbox__input.is-indeterminate .el-checkbox__inner:after{display:none}.el-checkbox__input.is-focus .el-checkbox__inner{border-color:#20a0ff}.el-checkbox__input.is-checked .el-checkbox__inner{background-color:#20a0ff;border-color:#0190fe}.el-checkbox__input.is-checked .el-checkbox__inner:after{transform:rotate(45deg) scaleY(1)}.el-checkbox__input.is-disabled .el-checkbox__inner{background-color:#eef1f6;border-color:#d1dbe5;cursor:not-allowed}.el-checkbox__input.is-disabled .el-checkbox__inner:after{cursor:not-allowed;border-color:#eef1f6}.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:#d1dbe5;border-color:#d1dbe5}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after{border-color:#fff}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner{background-color:#d1dbe5;border-color:#d1dbe5}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner:before{border-color:#fff}.el-checkbox__input.is-disabled+.el-checkbox__label{color:#bbb;cursor:not-allowed}.el-checkbox__inner{display:inline-block;position:relative;border:1px solid #bfcbd9;border-radius:4px;box-sizing:border-box;width:18px;height:18px;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:#20a0ff}.el-checkbox__inner:after{box-sizing:content-box;content:"";border:2px solid #fff;border-left:0;border-top:0;height:8px;left:5px;position:absolute;top:1px;transform:rotate(45deg) scaleY(0);width:4px;transition:transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;transform-origin:center}.el-checkbox__original{opacity:0;outline:none;position:absolute;margin:0;width:0;height:0;left:-999px}.el-checkbox__label{font-size:14px;padding-left:5px}.el-checkbox-button{position:relative;display:inline-block}.el-checkbox-button.is-checked .el-checkbox-button__inner{color:#fff;background-color:#20a0ff;border-color:#20a0ff;box-shadow:-1px 0 0 0 #20a0ff}.el-checkbox-button.is-disabled .el-checkbox-button__inner{color:#bfcbd9;cursor:not-allowed;background-image:none;background-color:#eef1f6;border-color:#d1dbe5;box-shadow:none}.el-checkbox-button.is-focus .el-checkbox-button__inner{border-color:#20a0ff}.el-checkbox-button:first-child .el-checkbox-button__inner{border-left:1px solid #bfcbd9;border-radius:4px 0 0 4px;box-shadow:none!important}.el-checkbox-button:last-child .el-checkbox-button__inner{border-radius:0 4px 4px 0}.el-checkbox-button__inner{display:inline-block;line-height:1;white-space:nowrap;vertical-align:middle;background:#fff;border:1px solid #bfcbd9;border-left:0;color:#1f2d3d;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;position:relative;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:10px 15px;font-size:14px;border-radius:0}.el-checkbox-button__inner:hover{color:#20a0ff}.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;visibility:hidden;left:-999px}.el-checkbox-button--large .el-checkbox-button__inner{padding:11px 19px;font-size:16px;border-radius:0}.el-checkbox-button--small .el-checkbox-button__inner{padding:7px 9px;font-size:12px;border-radius:0}.el-checkbox-button--mini .el-checkbox-button__inner{padding:4px;font-size:12px;border-radius:0}.el-transfer{font-size:14px}.el-transfer__buttons{display:inline-block;vertical-align:middle;padding:0 10px}.el-transfer__buttons .el-button{display:block;margin:0 auto;padding:8px 12px}.el-transfer__buttons .el-button:first-child{margin-bottom:6px}.el-transfer__buttons .el-button [class*=el-icon-]+span{margin-left:0}.el-transfer-panel{border:1px solid #d1dbe5;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);display:inline-block;vertical-align:middle;width:200px;box-sizing:border-box;position:relative}.el-transfer-panel .el-transfer-panel__header{height:36px;line-height:36px;background:#fbfdff;margin:0;padding-left:20px;border-bottom:1px solid #d1dbe5;box-sizing:border-box;color:#1f2d3d}.el-transfer-panel .el-transfer-panel__footer{height:36px;background:#fff;margin:0;padding:0;border-top:1px solid #d1dbe5;position:absolute;bottom:0;left:0;width:100%;z-index:1}.el-transfer-panel .el-transfer-panel__footer .el-checkbox{padding-left:20px;color:#8391a5}.el-transfer-panel .el-transfer-panel__empty{margin:0;height:32px;line-height:32px;padding:6px 20px 0;color:#8391a5}.el-transfer-panel .el-checkbox__label{padding-left:14px}.el-transfer-panel .el-checkbox__inner{width:14px;height:14px;border-radius:3px}.el-transfer-panel .el-checkbox__inner:after{height:6px;width:3px;left:4px}.el-transfer-panel__body{padding-bottom:36px;height:246px}.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:214px}.el-transfer-panel__item{height:32px;line-height:32px;padding-left:20px;display:block}.el-transfer-panel__item .el-checkbox__label{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;box-sizing:border-box;padding-left:28px}.el-transfer-panel__item .el-checkbox__input{position:absolute;top:9px}.el-transfer-panel__item+.el-transfer-panel__item{margin-left:0}.el-transfer-panel__item.el-checkbox{color:#48576a}.el-transfer-panel__item:hover{background:#e4e8f1}.el-transfer-panel__filter{margin-top:10px;text-align:center;padding:0 10px;width:100%;box-sizing:border-box}.el-transfer-panel__filter .el-input__inner{height:22px;width:100%;display:inline-block;box-sizing:border-box}.el-transfer-panel__filter .el-input__icon{right:10px}.el-transfer-panel__filter .el-icon-circle-close{cursor:pointer}.demo-block{border:1px solid #eaeefb;border-radius:4px;transition:.2s}.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:#f9fafc;border-top:1px solid #eaeefb;clear:both;overflow:hidden;height:0;transition:height .2s}.demo-block .description{padding:18px 24px;width:40%;box-sizing:border-box;border-left:1px solid #eaeefb;float:right;font-size:14px;line-height:1.8;color:#5e6d82;word-break:break-word}.demo-block .description p{margin:0 0 12px;line-height:1.8}.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{width:60%;border-right:1px solid #eaeefb}.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:36px;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;transition:.2s;position:relative}.demo-block .demo-block-control i{font-size:12px;line-height:36px;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:36px;transition:.3s;display:inline-block}.demo-block .demo-block-control:hover{color:#20a0ff;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.hover{box-shadow:0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)}.footer{height:120px;background-color:#324057;color:#a4aebd;width:100%;z-index:1000;margin-top:-120px}.footer *{word-spacing:0}.footer .container{height:100%;box-sizing:border-box}.footer .footer-main{font-size:0;padding-top:40px;display:inline-block}.footer .footer-main .footer-main-title{line-height:1;font-size:22px;margin:0}.footer .footer-main .footer-main-link{display:inline-block;margin:12px 18px 0 0;line-height:1;font-size:12px;color:#768193}.footer .footer-main .footer-main-link a{color:#768193;text-decoration:none}.footer .footer-social{float:right;line-height:120px}.footer .footer-social .elementdoc{transition:.3s;display:inline-block;line-height:32px;text-align:center;color:#8d99ab;background-color:transparent;width:32px;height:32px;font-size:32px;vertical-align:middle}.footer .footer-social .elementdoc:hover{transform:scale(1.2)}.footer .footer-social .doc-icon-weixin{margin-right:36px}.footer .footer-social .doc-icon-weixin:hover{color:#fff}.footer .footer-social .doc-icon-github{margin-right:0}.footer .footer-social .doc-icon-github:hover{color:#fff}.footer-popover{padding:0;min-width:120px;line-height:normal;box-shadow:0 0 11px 0 rgba(174,187,211,.24)}.footer-popover .footer-popover-title{border-bottom:1px solid #eaeefb;height:30px;line-height:30px;text-align:center;color:#99a9bf;background-color:#f8f9fe}.footer-popover img{width:100px;height:100px;margin:10px}@media (max-width:768px){.footer .footer-social{display:none}}.header .nav[data-v-5797d63d]:after,.header .nav[data-v-5797d63d]:before{display:table;content:""}.header .nav[data-v-5797d63d]:after{clear:both}.headerWrapper[data-v-5797d63d]{height:80px}.header[data-v-5797d63d]{height:80px;background-color:#20a0ff;color:#fff;top:0;left:0;width:100%;line-height:80px;z-index:100;position:relative}.header .container[data-v-5797d63d]{height:100%;box-sizing:border-box}.header h1[data-v-5797d63d]{margin:0;float:left;font-size:32px;font-weight:400}.header h1 a[data-v-5797d63d]{color:#fff;text-decoration:none;display:block}.header h1 span[data-v-5797d63d]{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-5797d63d]{float:right;height:100%;line-height:80px;background:transparent;padding:0;margin:0}.header .nav-logo-small[data-v-5797d63d],.header .nav-logo[data-v-5797d63d]{vertical-align:sub}.header .nav-logo-small[data-v-5797d63d]{display:none}.header .nav-item[data-v-5797d63d]{margin:0;float:left;list-style:none;position:relative;cursor:pointer;margin-left:20px}.header .nav-item a[data-v-5797d63d]{text-decoration:none;color:#fff;display:block;padding:0 20px;opacity:.8}.header .nav-item a.active[data-v-5797d63d],.header .nav-item a[data-v-5797d63d]:hover{opacity:1}.header .nav-item a.active[data-v-5797d63d]{font-weight:700}.header .nav-item a.active[data-v-5797d63d]:before{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:4px;background:#99d2fc}.header .nav-item[data-v-5797d63d]:last-child{cursor:default;margin-left:34px}.header .nav-item:last-child span[data-v-5797d63d]{opacity:.8}.header .nav-item:last-child .nav-lang[data-v-5797d63d]{cursor:pointer;display:inline-block;height:100%}.header .nav-item:last-child .nav-lang[data-v-5797d63d]:hover{opacity:1}.header .nav-item:last-child .nav-lang.active[data-v-5797d63d]{font-weight:700;opacity:1}.header-home[data-v-5797d63d]{position:fixed;top:0;background-color:rgba(32,160,255,0)}@media (max-width:850px){.header .nav-logo[data-v-5797d63d]{display:none}.header .nav-logo-small[data-v-5797d63d]{display:inline-block}.header .nav-item[data-v-5797d63d]{margin-left:6px}.header .nav-item a[data-v-5797d63d]{padding:0 5px}.header .nav-item[data-v-5797d63d]:last-child{margin-left:10px}}@media (max-width:700px){.header .container[data-v-5797d63d]{padding:0 12px}.header .nav-item a[data-v-5797d63d],.header .nav-lang[data-v-5797d63d]{font-size:12px;vertical-align:top}}.side-nav{width:100%;box-sizing:border-box;padding-right:30px}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-dropdown{margin-bottom:6px;width:100%}.side-nav .nav-dropdown span{display:block;width:100%;font-size:16px;color:#5e6d82;line-height:40px;transition:.2s;padding-bottom:6px;border-bottom:1px solid #eaeefb}.side-nav .nav-dropdown span:hover{cursor:pointer}.side-nav .nav-dropdown i{transition:.2s;font-size:12px;color:#d3dce6}.side-nav .nav-dropdown.is-active i,.side-nav .nav-dropdown.is-active span,.side-nav .nav-dropdown:hover i,.side-nav .nav-dropdown:hover span{color:#20a0ff}.side-nav .nav-dropdown.is-active i{transform:rotate(180deg) translateY(2px)}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}.side-nav #code-sponsor-widget{margin:50px 0 0 -20px}.nav-dropdown-list{width:120px;margin-top:-8px}.nav-dropdown-list li{font-size:14px}.footer-nav{padding:24px 0;color:#99a9bf;font-size:14px}.footer-nav:after{content:"";display:block;clear:both}.footer-nav i{transition:.3s;color:#d9def1;vertical-align:baseline}.footer-nav-link{cursor:pointer;transition:.3s}.footer-nav-link:hover,.footer-nav-link:hover i{color:#20a0ff}.footer-nav-left{float:left;margin-left:-4px}.footer-nav-right{float:right;margin-right:-4px} \ No newline at end of file diff --git a/1.4/element-ui.603be0d.js b/1.4/element-ui.bcf6fb7.js similarity index 100% rename from 1.4/element-ui.603be0d.js rename to 1.4/element-ui.bcf6fb7.js diff --git a/1.4/en-US.4a7ae1c.js b/1.4/en-US.ee55c7a.js similarity index 93% rename from 1.4/en-US.4a7ae1c.js rename to 1.4/en-US.ee55c7a.js index baa80d142..02227988a 100644 --- a/1.4/en-US.4a7ae1c.js +++ b/1.4/en-US.ee55c7a.js @@ -1,48 +1,48 @@ webpackJsonp([2,4],Array(48).concat([function(s,t){s.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"},function(s,t){s.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=="},function(s,t){s.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="},function(s,t){s.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=="},,,,,,,,,,function(s,t,a){s.exports=a(62)},function(s,t,a){!function(t,a){s.exports=a()}(this,function(){return function(s){function t(l){if(a[l])return a[l].exports;var e=a[l]={exports:{},id:l,loaded:!1};return s[l].call(e.exports,e,e.exports,t),e.loaded=!0,e.exports}var a={};return t.m=s,t.c=a,t.p="",t(0)}([function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}function e(s){if(Array.isArray(s)){for(var t=0,a=Array(s.length);t1&&"\\"!==l[0].charAt(l[0].length-1)&&(e=l.shift(),s({name:"erase",actor:e}));var n=l.join(":").replace(/\\:/g,":"),i={name:"type",args:[n]};null!=e&&(i.actor=e),s(i)}p.default.isFunction(a)&&s({name:"callback",args:[a]}),p.default.isNumber(a)&&s(a>0?{name:"wait",args:[a]}:{name:"erase",args:[a]}),p.default.isObject(a)&&(p.default.isArray(a.args)||(a.args=[]),a.args.unshift(function(){y(a.name+":end",a),o()}),t.push(a))}for(var t=[],a=arguments.length,l=Array(a),e=0;e=D.scenario.length)return D.status="ready",y("scenario:end"),this;var s=D.scenario[++D.currentScene];if(0===D.currentScene&&y("scenario:start"),"publisher"===s.name){var a=n(s.args),l=a[0],i=a.slice(1);return y.apply(void 0,e(i)),l()}switch(s.actor&&t(s.actor),y(s.name+":start",s),s.name){case"type":h.apply(void 0,e(s.args));break;case"erase":C.apply(void 0,e(s.args));break;case"callback":m.apply(void 0,e(s.args));break;case"wait":b.apply(void 0,e(s.args));break;default:console.debug("No scene handler for "+s.name)}return this}function h(s,t){var l=a(),e=D.options.locale,n=D.options.minSpeed.type,i=D.options.maxSpeed.type,v=l.displayValue,_=-1,r=!1,c=null,o=null,p=u.default.map(t);return t=u.default.strip(t),function a(){var h=u.default.strip(l.displayValue.substr(v.length));if(h===t)return s();var C=t.substr(0,_+1),g=h!==C,j=l.shouldBeMistaken(h,t,c,o),m=r||!j;if(g&&m)r=!0,c=null,l.displayValue=v+u.default.inject(h.substr(0,h.length-1),p),_--,o=_;else{r=!1;var b=t.charAt(++_);j&&(b=d.default.randomCharNear(b,e),null==c&&(c=_)),l.displayValue=v+u.default.inject(h+b,p)}return setTimeout(a,l.getTypingSpeed(n,i))}(),this}function C(s,t){var l=a();if(null==l)return s();if(w.erase!==!0)return l.displayValue="",s();var e=D.options.minSpeed.erase,n=D.options.maxSpeed.erase,i=l.displayValue,v=u.default.map(i);i=u.default.strip(i);var _=i.length,r=void 0,c=0;return p.default.isNumber(t)&&(t>0?r=t:c=i.length+t),function t(){return _===c?s():(l.displayValue=u.default.inject(i.substr(0,--_),v),setTimeout(t,r||l.getTypingSpeed(e,n)))}(),this}function m(s,t){return t.call(this,s),this}function b(s,t){return setTimeout(s.bind(this),t),this}function f(s,t){return s.split(",").forEach(function(s){s=s.trim(),p.default.isArray(D.events[s])||(D.events[s]=[]),D.events[s].push(t)}),this}function y(){for(var s=arguments.length,t=Array(s),a=0;a0&&e.concat(D.events["*"]||[]).forEach(function(s){return s.apply(void 0,t)}),this}var w=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];if(w=c.default.merge({},j,w),p.default.isNumber(w.minSpeed)){var k=w,x=k.minSpeed;w.minSpeed={erase:x,type:x}}if(p.default.isNumber(w.maxSpeed)){var A=w,I=A.maxSpeed;w.maxSpeed={erase:I,type:I}}if("detect"===w.locale&&g){var T=g.languages;p.default.isArray(T)&&p.default.isString(T[0])&&(w.locale=T[0].substr(0,2))}d.default.supports(w.locale)||(w.locale=d.default.defaultLocale);var D={options:w,casting:{},status:"ready",onStage:null,currentScene:-1,scenario:[],events:{}};return t(null),Object.freeze(Object.defineProperties({addActor:s,getCurrentActor:a,addScene:l,play:i,replay:v,stop:r,on:f},{options:{get:function(){return D.options},configurable:!0,enumerable:!0},status:{get:function(){return D.status},configurable:!0,enumerable:!0}}))}Object.defineProperty(t,"__esModule",{value:!0});var v=a(1),_=l(v),r=a(3),c=l(r),o=a(2),p=l(o),h=a(4),d=l(h),C=a(6),u=l(C),g="undefined"!=typeof window&&window.navigator,j={autoplay:!0,erase:!0,minSpeed:{erase:80,type:80},maxSpeed:{erase:450,type:450},locale:"detect"};i.init=function(){var s=arguments.length<=0||void 0===arguments[0]?"actor":arguments[0],t=i();return t.addActor(s,{accuracy:1,speed:.8}),t},t.default=i,s.exports=t.default},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}Object.defineProperty(t,"__esModule",{value:!0});var e=a(2),n=l(e),i=a(3),v=l(i),_="undefined"!=typeof window&&window.document,r={speed:.6,accuracy:.6};t.default=function(s){var t=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],a=arguments.length<=2||void 0===arguments[2]?null:arguments[2],l="",e=void 0;if(n.default.isNumber(t)&&(t={speed:t,accuracy:t}),t=v.default.merge({},r,t),_&&(null==a&&(a="#"+s),n.default.isString(a))){var i=a,c=_.querySelector(i);if(null==c)throw new Error("no matches for "+s+"'s selector: "+i);e=c,a=function(s){e.innerHTML=s}}return n.default.isFunction(a)||(a=console.log.bind(console)),Object.defineProperties({$element:e,getTypingSpeed:function(s,a){var l=v.default.randomFloat(t.speed,1);return v.default.getPercentageOf(a,s,l)},shouldBeMistaken:function(s,a){var l=arguments.length<=2||void 0===arguments[2]?null:arguments[2],e=arguments.length<=3||void 0===arguments[3]?null:arguments[3],i=10*t.accuracy;if(i>=8)return!1;if(s.length<=i)return!1;if(s.length===a.length)return!1;if(n.default.isNumber(l)){var _=s.length-l,r=i>=6?10-i:4;if(_>=r)return!1}if(n.default.isNumber(e)){var _=s.length-e,c=2*Math.max(i,2);if(_<=c)return!1}return v.default.randomFloat(0,.8)>t.accuracy}},{displayValue:{get:function(){return l},set:function(s){l=s,a(s)},configurable:!0,enumerable:!0},name:{get:function(){return s},configurable:!0,enumerable:!0}})},s.exports=t.default},function(s,t){"use strict";function a(s){return{}.toString.call(s)}Object.defineProperty(t,"__esModule",{value:!0}),t.default={isNumber:function(s){return"number"==typeof s},isString:function(s){return"[object String]"===a(s)},isObject:function(s){return"[object Object]"===a(s)},isArray:function(s){return"[object Array]"===a(s)},isFunction:function(s){return"function"==typeof s}},s.exports=t.default},function(s,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={merge:function(s){for(var t=[].slice.call(arguments,1),a=0,l=t.length;a0?e[_.default.random(0,e.length-1)]:this.randomChar(t);return n&&(o=o.toUpperCase()),o},randomChar:function(s){if(!this.supports(s))throw new Error('locale "'+s+'" is not supported');var t=c.default[s].list.join("");return t.charAt(_.default.random(0,t.length-1))}},s.exports=t.default},function(s,t){s.exports={en:["qwertyuiop","asdfghjkl","zxcvbnm"],fr:["azertyuiop","qsdfghjklm","wxcvbn"],da:["qwertyuiopå","asdfghjklæø","zxcvbnm"],de:["qwertzuiopü","asdfghjklöä","yxcvbnm"],pl:["qwertyuiopęó","asdfghjkląśł","zxcvbnmżźćń"],pt:["qwertyuiop","asdfghjklç","zxcvbnm"],ru:["йцукенгшщзх","фывапролджэ","ячсмитьбюъ"],es:["qwertyuiop","asdfghjklñ","zxcvbnm"]}},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}function e(s){var t=s.match(/<([^\s>]+)/);return Boolean(t)&&i.default.indexOf(t[1].toLowerCase())>-1}Object.defineProperty(t,"__esModule",{value:!0});var n=a(7),i=l(n);t.default={strip:function(s){return s.replace(/(<([^>]+)>)/gi,"")},map:function(s){for(var t=/<[^>]+>/gi,a=[],l=[],n=void 0,i=void 0;n=t.exec(s);)i={tagName:n[0],position:n.index},"/"===i.tagName.charAt(1)?i.opener=l.pop():"/"===i.tagName.charAt(i.tagName.length-2)||e(i.tagName)||l.push(i),a.push(i);return a},inject:function(s,t){for(var a=0,l=void 0;a0&&l.position<=s.length?s=s.substr(0,l.position)+l.tagName+s.substr(l.position):l.opener&&l.opener.positionli{list-style:none;position:relative;line-height:1.8}.page-changelog .timeline>li:not(:last-child){margin-bottom:50px}.page-changelog .timeline>li:first-child{margin-top:-10px}.page-changelog .timeline>li:first-child h3:before{left:-33px;top:10px;width:17px;height:17px;background-color:#20a0ff;border:0}.page-changelog .timeline ul{padding-left:0}.page-changelog .timeline ul ul{padding-left:20px}.page-changelog .timeline ul ul li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#fff;border:1px solid #5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline li li{font-size:14px;list-style:none;padding-left:0;word-break:break-all}.page-changelog .timeline li li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline h3{margin:0 0 10px}.page-changelog .timeline h3 a{opacity:1;float:none;margin-left:0;color:inherit}.page-changelog .timeline h3:before{content:"";display:block;position:absolute;left:-31px;top:13px;width:13px;height:13px;border-radius:50%;background-color:transparent;border:2px solid #20a0ff;box-sizing:border-box;background-color:#fff}.page-changelog .timeline h4{margin:50px 0 10px}.page-changelog .timeline p{margin:0}.page-changelog .timeline em{position:absolute;left:-127px;font-style:normal;top:6px;font-size:14px;color:#99a9bf}.page-changelog .timeline:before{content:"";width:1px;height:100%;position:absolute;left:0;top:10px;background-color:#eaeefa}',""])},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var e=a(90),n=l(e);t.default={components:{ChangeLog:n.default},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,t=s.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var l=t[1].textContent.trim(),e='

  • '+l+"

    ",n=t.length,i=2;i

  • '+l+"

    ")}e=e.replace(/#(\d+)/g,'#$1'),e=e.replace(/@(\w+)/g,'@$1'),this.$refs.timeline.innerHTML=e+"
    • ",s.$el.remove()}}},function(s,t,a){s.exports=a(91)},function(s,t,a){var l=a(13)(null,a(92),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"changelog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changelog")]),a("h3",{attrs:{id:"1-4-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-12","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.12")]),a("p",[a("em",[s._v("2017-11-30")])]),a("ul",[a("li",[s._v("Fixed input height error of Select when "),a("code",[s._v("size")]),s._v(" is not assigned, #8460")])]),a("h3",{attrs:{id:"1-4-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-11","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.11")]),a("p",[a("em",[s._v("2017-11-24")])]),a("ul",[a("li",[s._v("Now Pagination's jumper will correct invalid page inputs, #8408 (by @decadef20)")]),a("li",[s._v("Fixed high CPU consumption caused by hidden Table, #8484")])]),a("h3",{attrs:{id:"1-4-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-10","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.10")]),a("p",[a("em",[s._v("2017-11-14")])]),a("ul",[a("li",[s._v("Fixed missing Tooltip registration in Menu, #7996")]),a("li",[s._v("Fixed console error of "),a("code",[s._v("clientHeight")]),s._v(" when "),a("code",[s._v("disabled")]),s._v(" of Select dynamically updates, #8018 (by @wubaiqing)")])]),a("h3",{attrs:{id:"1-4-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.9")]),a("p",[a("em",[s._v("2017-11-01")])]),a("ul",[a("li",[s._v("Fixed Form validating not triggered correctly in some conditions, #7744")]),a("li",[s._v("Fixed range selection of DatePicker not working in Chromium 53-57 browsers, #7927")])]),a("h3",{attrs:{id:"1-4-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.8")]),a("p",[a("em",[s._v("2017-10-24")])]),a("ul",[a("li",[s._v("Fixed SubMenu retracting when moving the mouse rapidly on the SubMenu of collapsed Menu, #7579")]),a("li",[s._v("Fixed hidden last shortcut of DateTimePicker when the shortcut menu is long, #7567 (by @DuLinRain)")]),a("li",[s._v("Added "),a("code",[s._v("show-timeout")]),s._v(" and "),a("code",[s._v("hide-timeout")]),s._v(" attributes for Dropdown, #7621 (by @phongkt-dev)")])]),a("h3",{attrs:{id:"1-4-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.7")]),a("p",[a("em",[s._v("2017-10-16")])]),a("ul",[a("li",[s._v("Fixed compatibility of Autocomplete and Vue 2.5.x, #6942 (by @rennai)")]),a("li",[s._v("Added "),a("code",[s._v("allow-focus")]),s._v(" attribute for Switch, #7494 (by @breadadams)")])]),a("h3",{attrs:{id:"1-4-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.6")]),a("p",[a("em",[s._v("2017-09-27")])]),a("ul",[a("li",[s._v("Fixed Slider's button jumping to previous position when clicked, #7190")]),a("li",[s._v("Fixed Tooltip "),a("code",[s._v("disabled")]),s._v(" regression, #7198")]),a("li",[s._v("Fixed Cascader not correctly filter options when "),a("code",[s._v("props")]),s._v(" is set, #7225")]),a("li",[s._v("Fixed an error when range typed DatePicker has an initial value of "),a("code",[s._v("[]")]),s._v(", #7233")])]),a("h3",{attrs:{id:"1-4-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.5")]),a("p",[a("em",[s._v("2017-09-24")])]),a("ul",[a("li",[s._v("Rate's "),a("code",[s._v("colors")]),s._v(" attribute now supports dynamic updates, #6872 @lukaszb")]),a("li",[s._v("Fixed Tree not highlighting tree node whose value of "),a("code",[s._v("node-key")]),s._v(" is 0, #6917")]),a("li",[s._v("Fixed initially disabled Dropdown not showing menu when it's enabled, #6969")]),a("li",[s._v("Added "),a("code",[s._v("hide-after")]),s._v(" attribute for Tooltip, #6401 @ryatziv")]),a("li",[s._v("Fixed cancel button of TimePicker not cancel picked value when clicked, #7028")]),a("li",[s._v("Added "),a("code",[s._v("selectWhenUnmatched")]),s._v(" attribute for Autocomplete, #6428 @ryatziv")]),a("li",[s._v("Fixed when "),a("code",[s._v("beforeUpload")]),s._v(" of a file returns false, other files are aborted by Upload, #7077")]),a("li",[s._v("Fixed disabled dates of DatePicker in month view and year view not displayed correctly in the west hemisphere, #7114")]),a("li",[a("code",[s._v("default-value")]),s._v(" of DatePicker now supports daterange type, #7073 @wacky6")])]),a("h3",{attrs:{id:"1-4-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.4")]),a("p",[a("em",[s._v("2017-09-05")])]),a("ul",[a("li",[s._v("Fixed all months disabled in DatePicker month view when "),a("code",[s._v("disabledDate")]),s._v(" is set, #6768 @qingdengyue")]),a("li",[s._v("Added "),a("code",[s._v("debounce")]),s._v(" attribute for Slider, #6820 @langgo")]),a("li",[s._v("Fixed value of Pagination jumper can be bigger than the total page count, #6842 @huguangju")]),a("li",[s._v("Fixed TimePicker's focus slipping away when selecting hour to 23 with mouse scroll, #6719 @qingdengyue")])]),a("h3",{attrs:{id:"1-4-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.3")]),a("p",[a("em",[s._v("2017-08-25")])]),a("ul",[a("li",[s._v("Fixed style bug when Progress's "),a("code",[s._v("percentage")]),s._v(" is "),a("code",[s._v("0")]),s._v(", #6551 @Kingwl")]),a("li",[s._v("Fixed Carousel items flashing when switching, #6394")]),a("li",[s._v("Fixed disabled Button not prevent event propagation when clicked on its text area, #6421")]),a("li",[s._v("Fixed disabled dates calculation in DatePicker's month view, #6363")]),a("li",[s._v("Fixed key enter event being stopped propagation in Autocomplete, #6499 @leezng")]),a("li",[s._v("Fixed "),a("code",[s._v("amPm")]),s._v(" not supported in DatePicker i18n, #6574")]),a("li",[s._v("Fixed clicking or dragging error of Slider when it switches from invisible to visible, #6593")]),a("li",[s._v("Fixed Alert using small icons when its "),a("code",[s._v("description")]),s._v(" is passed via default slot, #6612 @leezng")])]),a("h3",{attrs:{id:"1-4-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.2")]),a("p",[a("em",[s._v("2017-08-09")])]),a("ul",[a("li",[s._v("Fixed Select marking option of "),a("code",[s._v("value")]),s._v(" equal to "),a("code",[s._v("0")]),s._v(" as selected when the initial value is null and bound to an object-typed value, #6143")]),a("li",[s._v("Fixed Step style issue when "),a("code",[s._v("status")]),s._v(" is "),a("code",[s._v("error")]),s._v(", #6155 @wacky6")]),a("li",[s._v("Fixed Cascader selecting parent item when moving mouse quickly after clicking a leaf item, #6199")]),a("li",[s._v("Fixed Menu not hiding submenus when collapsed, #6200")]),a("li",[s._v("Fixed status of the inner native input of Switch not syncing with the component, #6205 @wacky6")]),a("li",[s._v("Fixed wrong button positioning of Slider after window is resized, #6263")]),a("li",[s._v("Fixed Autocomplete not hiding dropdown menu on blur, #6256")]),a("li",[s._v("Fixed hitting enter on jumper of Pagination not trigger page change event in IE, #6306 @qingdengyue")]),a("li",[s._v("Fixed InputNumber style issue when its "),a("code",[s._v("size")]),s._v(" is "),a("code",[s._v("large")]),s._v(" or "),a("code",[s._v("small")]),s._v(", #6310 @JeremyWuuuuu")]),a("li",[s._v("Fixed i18n failure for some texts in DatePicker, #6328")]),a("li",[s._v("Fixed Slider value changing to minimum when its button is clicked, #6359")])]),a("h3",{attrs:{id:"1-4-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.1")]),a("p",[a("em",[s._v("2017-07-28")])]),a("ul",[a("li",[s._v("Fixed child nodes expanding when checking parent node in Tree, #6029")]),a("li",[s._v("Fixed checking behavior error of Tree, #6034")]),a("li",[s._v("Fixed FormItem not inheriting "),a("code",[s._v("label-width")]),s._v(" as a Form's direct child, #6044")]),a("li",[s._v("Fixed Menu incorrectly showing SubMenu in collapse mode, #6111")]),a("li",[s._v("Fixed render order error of "),a("code",[s._v("v-if")]),s._v(" controlled dynamic TabPanes, #6066")]),a("li",[s._v("Fixed Popover still popping up after mouse leaves within "),a("code",[s._v("open-delay")]),s._v(", #6058 (by @laobubu)")]),a("li",[s._v("Fixed delete buttons still rendered in file list of disabled Upload, #6091")]),a("li",[s._v("Fixed background color error on hover of striped Table, #6024 (by @xtongs)")])]),a("h3",{attrs:{id:"1-4-0-boron"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-0-boron","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.0 Boron")]),a("p",[a("em",[s._v("2017-07-21")])]),a("h4",{attrs:{id:"new-features"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Message\n"),a("ul",[a("li",[a("code",[s._v("message")]),s._v(" attribute now supports VNode, #5463 (by @egyptik)")])])]),a("li",[s._v("ColorPicker\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("active-change")]),s._v(" event, #5775")])])]),a("li",[s._v("Popover\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("open-delay")]),s._v(" attribute, #5842 (by @kaungmyatlwin)")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("A third parameter "),a("code",[s._v("value")]),s._v(" is passed to "),a("code",[s._v("formatter")]),s._v(", #5709 (by @haledeng)")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute, #5937")])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("collapse")]),s._v(" attribute, #5941")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("value-key")]),s._v(" attribute, #5897")])])])]),a("h4",{attrs:{id:"fixes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("i18n failure for some texts, #5485")]),a("li",[s._v("returning a non-zero millisecond value when initial value is empty, #5663")]),a("li",[a("code",[s._v("disabledDate")]),s._v(" affecting undesired date, #4946 (by @liyangworld)")])])]),a("li",[s._v("Steps\n"),a("ul",[a("li",[s._v("style problems when a step is dynamically added or removed, #5456 (by @elfman)")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("highlight row misplaced when an expandable Table has fixed table columns, #5471 (by @elfman)")]),a("li",[a("code",[s._v("classList")]),s._v(" not supported in some browsers, #5613 (by @flynntsc)")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("single Select unable to scroll to the selected item when the dropdown menu pops up, #5564（by @wacky6）")])])]),a("li",[s._v("Radio\n"),a("ul",[a("li",[s._v("border radius lost in RadioGroups with only one Radio, #5646 (by @YYvanYang)")])])]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("unable to reselect previously deleted file when "),a("code",[s._v("auto-upload")]),s._v(" is false, #5706")]),a("li",[s._v("delete button still visible and functioning when "),a("code",[s._v("disabled")]),s._v(", #5841")]),a("li",[s._v("compatibility issue with Vue 2.4 "),a("code",[s._v("key")]),s._v(", #5872")])])]),a("li",[s._v("MessageBox\n"),a("ul",[a("li",[s._v("clicking cancel buttons getting resolved when not invoked as a "),a("code",[s._v("confirm")]),s._v(" or "),a("code",[s._v("prompt")]),s._v(", #5658")])])]),a("li",[s._v("Rate\n"),a("ul",[a("li",[s._v("active icons not reflecting decimal part of initial value, #5785")])])]),a("li",[s._v("Pagination\n"),a("ul",[a("li",[s._v("compatibility issue of total page display with vue-i18n@6.x, #5796 (by @mario56)")]),a("li",[s._v("apostrophe incorrectly showing up when current page is one page less than total page, #5861 (by @openks)")])])]),a("li",[s._v("Loading\n"),a("ul",[a("li",[s._v("style problems when bound to invisible elements, #5649 (by @xiongzixiao)")])])]),a("li",[s._v("Cascader\n"),a("ul",[a("li",[s._v("text in the input box not vertically aligned, #5819 (by @jianzhi92)")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[a("code",[s._v("setCheckedKeys")]),s._v(" and "),a("code",[s._v("setCheckedNodes")]),s._v(" in lazy mode, #5937")]),a("li",[s._v("loading all descendent nodes when a parent node is checked in lazy mode, #5963")])])]),a("li",[s._v("Form\n"),a("ul",[a("li",[s._v("label named slot not working when "),a("code",[s._v("label")]),s._v(" is not assigned on FormItem, #5921")])])]),a("li",[s._v("Tooltip\n"),a("ul",[a("li",[s._v("not working in Vue 2.4.x when the triggering element is a custom component, #5916")])])])]),a("h4",{attrs:{id:"breaking-changes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("when value is an object, "),a("code",[s._v("value-key")]),s._v(" is required as its unique identity key, #5897")])])])]),a("h3",{attrs:{id:"1-3-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.7")]),a("p",[a("em",[s._v("2017-06-18")])]),a("ul",[a("li",[s._v("Fixed Table with async data not showing summary row, #5318")]),a("li",[s._v("Fixed Pagination's jumper value not sync with current page, #5377")]),a("li",[s._v("Fixed DatePicker's shortcut panel overflow issue, #5297 (by @alashow)")]),a("li",[s._v("Fixed clicking Switch not responding when some text on the page is selected, #5411")]),a("li",[s._v("The red wildcard indicating required field of Form is now responsive, #5403")]),a("li",[s._v("Fixed initial-index of Carousel not working, #5334")]),a("li",[s._v("Fixed Popover enable to be focused when nested in a Dialog, #5336")])]),a("h3",{attrs:{id:"1-3-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.6")]),a("p",[a("em",[s._v("2017-06-09")])]),a("ul",[a("li",[s._v("Fixed inconsistency of ColorPicker's default value and panel value, #5183 (by @Kingwl)")]),a("li",[s._v("Fixed ColorPicker not able to change hue in the panel when its default value is white, #5184 (by @Kingwl)")]),a("li",[s._v("Fixed Select's dropdown taking multiple clicks to expand when nested in a Dialog after scrolling, #5226")]),a("li",[s._v("Added "),a("code",[s._v("props")]),s._v(" property for Autocomplete, #5282")]),a("li",[s._v("Fixed dropdown of DatePicker not hiding when Tab key is pressed after manual input, #5149 (by @ChuckFields)")])]),a("h3",{attrs:{id:"1-3-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.5")]),a("p",[a("em",[s._v("2017-06-03")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("default-first-option")]),s._v(" of Select not working in remote filtering, #5084")]),a("li",[s._v("Fixed InputNumber not aligning with other form components, #5127")]),a("li",[s._v("Fixed inline FormItem having no effect on mixed Input, #5151")]),a("li",[s._v("Fixed height of FormItem being different in Firefox from other browsers, #5152")]),a("li",[s._v("Fixed items with a "),a("code",[s._v("value")]),s._v(" of 0 in Cascader can not be expanded, #5172 (by @Kingwl)")]),a("li",[s._v("Fixed Autocomplete not triggering native "),a("code",[s._v("keydown")]),s._v(" and "),a("code",[s._v("keyup")]),s._v(" events, #5129")]),a("li",[s._v("Added "),a("code",[s._v("clear")]),s._v(" event for Select, #5112")]),a("li",[s._v("Fixed Cascader's dropdown menu not updating its position in some situations, #5064")]),a("li",[s._v("Better accessibility for Dialog and MessageBox, #4786")])]),a("h3",{attrs:{id:"1-3-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.4")]),a("p",[a("em",[s._v("2017-05-23")])]),a("ul",[a("li",[s._v("Fixed highlight and stripe effects of Table with expandable rows, #4871 (by @mu-yu)")]),a("li",[s._v("Added "),a("code",[s._v("default-first-option")]),s._v(" for Select, #4838 (by @wacky6)")]),a("li",[s._v('Fixed Select with no options not displaying "No data" text when '),a("code",[s._v("allow-create")]),s._v(" is true, #4977")])]),a("h3",{attrs:{id:"1-3-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.3")]),a("p",[a("em",[s._v("2017-05-14")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("visible-change")]),s._v(" event for Dropdown, #4818 (by @luciy)")]),a("li",[s._v("Added "),a("code",[s._v("tag")]),s._v(" attribute for Col and Row, #4799")]),a("li",[s._v("Fixed Cascader search functionality regression, #4812")]),a("li",[s._v("Fixed DatePicker triggering watch when "),a("code",[s._v("type")]),s._v(" is range, #4837 (by @wacky6)")]),a("li",[s._v("Fixed numbers in TimePicker not align vertically, #4847 (by @pengchongfu)")]),a("li",[s._v("Fixed Dialog not triggering "),a("code",[s._v("before-close")]),s._v(" hook when ESC is pressed, #4819 (by @patriciussanctus)")]),a("li",[s._v("Fixed multiple MessageBox not rendering content correctly when some of the "),a("code",[s._v("message")]),s._v(" is a VNode")]),a("li",[s._v("Fixed Checkbox not focused when navigating with tab")])]),a("h3",{attrs:{id:"1-3-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.2")]),a("p",[a("em",[s._v("2017-05-10")])]),a("ul",[a("li",[s._v("Fixed undefined custom component "),a("code",[s._v("el-collapse-transition")]),s._v(" error when importing some components on demand, #4728")]),a("li",[s._v("Fixed vertical alignment issue of Pagination in FireFox, #4756")]),a("li",[s._v("Fixed dropdown panel view not updating after binding value of DatePicker is programmatically changed when "),a("code",[s._v("type")]),s._v(" is week, #4739")]),a("li",[s._v("Fixed height calculation errors of Table with summary rows, #4736")]),a("li",[s._v("Added "),a("code",[s._v("before-filter")]),s._v(" attribute for Cascader, #4774")]),a("li",[s._v("Added "),a("code",[s._v("debounce")]),s._v(" attribute for InputNumber, #4712（by @pengchongfu）")])]),a("h3",{attrs:{id:"1-3-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.1")]),a("p",[a("em",[s._v("2017-05-06")])]),a("ul",[a("li",[s._v("Fixed Autocomplete clearing input box when typing Chinese, #4718")]),a("li",[s._v("Fixed async Table's summary row not scroll with Table, #4717")]),a("li",[s._v("Fixed Dialog not closing correctly after pressing ESC when "),a("code",[s._v("close-on-press-esc")]),s._v(" is true, #4706")]),a("li",[s._v("Fixed wrong parameter in "),a("code",[s._v("change")]),s._v(" event of Switch when "),a("code",[s._v("on-value")]),s._v(" and "),a("code",[s._v("off-value")]),s._v(" are assigned, #4675")])]),a("h3",{attrs:{id:"1-3-0-beryllium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-0-beryllium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.0 Beryllium")]),a("p",[a("em",[s._v("2017-05-05")])]),a("h4",{attrs:{id:"new-features-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("New component: Transfer")]),a("li",[s._v("Now you can use our pre-defined transitions")]),a("li",[s._v("Vertical mode for Slider, can be activated by the "),a("code",[s._v("vertical")]),s._v(" attribute, #4410 (by @devange)")]),a("li",[s._v("Button style for CheckboxGroup, #3697 (by @mdartic)")]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("setCurrentRow")]),s._v(" method, #4390")]),a("li",[s._v("Added summary row, with three attributes: "),a("code",[s._v("show-summary")]),s._v(", "),a("code",[s._v("sum-text")]),s._v(" and "),a("code",[s._v("summary-method")]),s._v(", #4484")]),a("li",[s._v("Added "),a("code",[s._v("filter-placement")]),s._v(" attribute for TableColumn, #4491")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("Added a "),a("code",[s._v("before-close")]),s._v(" hook, #4432")]),a("li",[s._v("Added "),a("code",[s._v("visible")]),s._v(" attribute, which supports the "),a("code",[s._v(".sync")]),s._v(" modifier, #4539")])])]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute, #4473")]),a("li",[a("code",[s._v("on-change")]),s._v(" now also triggers when a file is added, #4447")]),a("li",[s._v("Added "),a("code",[s._v("abort")]),s._v(" method")])])]),a("li",[s._v("Switch now supports "),a("code",[s._v("on-value")]),s._v(" and "),a("code",[s._v("off-value")]),s._v(", so that you can customize its values, #4403")]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("default-value")]),s._v(" attribute for initially displayed date in the dropdown, #4222 (by @wacky6)")]),a("li",[a("code",[s._v("type")]),s._v(" now supports dynamic updates, #4417 (by @coffeedeveloper)")]),a("li",[s._v("Added "),a("code",[s._v("label")]),s._v(" attribute for CarouselItem, #4317 (by @paul-blundell)")])])]),a("li",[a("code",[s._v("message")]),s._v(" of MessageBox now supports VNode, #4550")]),a("li",[a("code",[s._v("current-page")]),s._v(" of Pagination "),a("code",[s._v("current-page")]),s._v(" now supports "),a("code",[s._v(".sync")]),s._v(", #4539")]),a("li",[s._v("Added "),a("code",[s._v("label")]),s._v(" slot for Form, so you can customize label's content, #4634")])]),a("h4",{attrs:{id:"fixes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[s._v("Compatibility issues of Select and Table with Vue 2.3.x, #4518")]),a("li",[a("code",[s._v("disabledDate")]),s._v(" of DatePicker having no effect on typed value in the input box, #4309")]),a("li",[s._v("An issue when the key of a Tree node is number 0, #4415")]),a("li",[s._v("TimePicker number not align when picked, #4425 (by @pengchongfu)")]),a("li",[s._v("Autocomplete frequently triggering searching method when typing Chinese, #4393 (by @qazbnm456)")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("not able to select the same file multiple times, #4461")]),a("li",[s._v("not displaying preview image when is "),a("code",[s._v("auto-upload")]),s._v(" false, #4572")]),a("li",[s._v("some style errors, #4643")])])]),a("li",[s._v("Style bug of RadioGroup when nested in a FormItem, #4336")]),a("li",[s._v("ColorPicker not clear the color panel when bound value is emptied, #4668 (by @pengchongfu)")]),a("li",[a("code",[s._v("show-overflow-tooltip")]),s._v(" of Table not working in Safari, #4157 (by @renxia)")])]),a("h4",{ +},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjgxcHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDgxIDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+TW9kdWxlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8cmVjdCBpZD0icGF0aC0xIiB4PSI2IiB5PSI1NyIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIiByeD0iNS41Ij48L3JlY3Q+CiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjEiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwLjQ2NjY2NjY2NyAgIDAgMCAwIDAgMC44MDc4NDMxMzcgIDAgMCAwIDEgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICAgICAgPHJlY3QgaWQ9InBhdGgtMyIgeD0iNiIgeT0iNTciIHdpZHRoPSIxMSIgaGVpZ2h0PSIxMSIgcng9IjUuNSI+PC9yZWN0PgogICAgICAgIDxmaWx0ZXIgeD0iLTUwJSIgeT0iLTUwJSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iZmlsdGVyLTQiPgogICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIxIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMC4zOTIxNTY4NjMgICAwIDAgMCAwIDAuNTg4MjM1Mjk0ICAgMCAwIDAgMCAwLjg2Mjc0NTA5OCAgMCAwIDAgMSAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgICAgICA8cmVjdCBpZD0icGF0aC01IiB4PSI2IiB5PSI1NyIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIiByeD0iNS41Ij48L3JlY3Q+CiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItNiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjEiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAxICAgMCAwIDAgMCAwLjY3NDUwOTgwNCAgIDAgMCAwIDAgMC42Nzg0MzEzNzMgIDAgMCAwIDEgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTW9kdWxlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci0yKSIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiMyMEEwRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMtY29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci00KSIgeGxpbms6aHJlZj0iI3BhdGgtMyI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiM4MEE4RTEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMyI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMtY29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTguMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci02KSIgeGxpbms6aHJlZj0iI3BhdGgtNSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiNGRkQ2RDIiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtNSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="},function(s,t,a){function l(s){return a(e(s))}function e(s){return n[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var n={"./changelog.vue":86,"./component.vue":94,"./design.vue":99,"./guide.vue":103,"./index.vue":108,"./nav.vue":113,"./resource.vue":118};l.keys=function(){return Object.keys(n)},l.resolve=e,s.exports=l,l.id=85},function(s,t,a){function l(s){a(87)}var e=a(13)(a(89),a(93),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(88);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("c00c0064",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.page-changelog{padding-bottom:100px}.page-changelog .fr{float:right;padding:0}.page-changelog .fr a{display:block;padding:10px 15px;color:#475669}.page-changelog .fr:hover a{color:#20a0ff}.page-changelog .heading{margin-bottom:40px}.page-changelog .timeline{margin:0 0 0 105px;padding-left:25px;position:relative;color:#5e6d82}.page-changelog .timeline>li{list-style:none;position:relative;line-height:1.8}.page-changelog .timeline>li:not(:last-child){margin-bottom:50px}.page-changelog .timeline>li:first-child{margin-top:-10px}.page-changelog .timeline>li:first-child h3:before{left:-33px;top:10px;width:17px;height:17px;background-color:#20a0ff;border:0}.page-changelog .timeline ul{padding-left:0}.page-changelog .timeline ul ul{padding-left:20px}.page-changelog .timeline ul ul li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#fff;border:1px solid #5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline li li{font-size:14px;list-style:none;padding-left:0;word-break:break-all}.page-changelog .timeline li li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline h3{margin:0 0 10px}.page-changelog .timeline h3 a{opacity:1;float:none;margin-left:0;color:inherit}.page-changelog .timeline h3:before{content:"";display:block;position:absolute;left:-31px;top:13px;width:13px;height:13px;border-radius:50%;background-color:transparent;border:2px solid #20a0ff;box-sizing:border-box;background-color:#fff}.page-changelog .timeline h4{margin:50px 0 10px}.page-changelog .timeline p{margin:0}.page-changelog .timeline em{position:absolute;left:-127px;font-style:normal;top:6px;font-size:14px;color:#99a9bf}.page-changelog .timeline:before{content:"";width:1px;height:100%;position:absolute;left:0;top:10px;background-color:#eaeefa}',""])},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var e=a(90),n=l(e);t.default={components:{ChangeLog:n.default},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,t=s.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var l=t[1].textContent.trim(),e='

  • '+l+"

    ",n=t.length,i=2;i

  • '+l+"

    ")}e=e.replace(/#(\d+)/g,'#$1'),e=e.replace(/@(\w+)/g,'@$1'),this.$refs.timeline.innerHTML=e+"
    • ",s.$el.remove()}}},function(s,t,a){s.exports=a(91)},function(s,t,a){var l=a(13)(null,a(92),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"changelog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changelog")]),a("h3",{attrs:{id:"1-4-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-12","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.12")]),a("p",[a("em",[s._v("2017-11-30")])]),a("ul",[a("li",[s._v("Fixed input height error of Select when "),a("code",[s._v("size")]),s._v(" is not assigned, #8460")])]),a("h3",{attrs:{id:"1-4-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-11","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.11")]),a("p",[a("em",[s._v("2017-11-24")])]),a("ul",[a("li",[s._v("Now Pagination's jumper will correct invalid page inputs, #8408 (by @decadef20)")]),a("li",[s._v("Fixed high CPU consumption caused by hidden Table, #8484")])]),a("h3",{attrs:{id:"1-4-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-10","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.10")]),a("p",[a("em",[s._v("2017-11-14")])]),a("ul",[a("li",[s._v("Fixed missing Tooltip registration in Menu, #7996")]),a("li",[s._v("Fixed console error of "),a("code",[s._v("clientHeight")]),s._v(" when "),a("code",[s._v("disabled")]),s._v(" of Select dynamically updates, #8018 (by @wubaiqing)")])]),a("h3",{attrs:{id:"1-4-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.9")]),a("p",[a("em",[s._v("2017-11-01")])]),a("ul",[a("li",[s._v("Fixed Form validating not triggered correctly in some conditions, #7744")]),a("li",[s._v("Fixed range selection of DatePicker not working in Chromium 53-57 browsers, #7927")])]),a("h3",{attrs:{id:"1-4-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.8")]),a("p",[a("em",[s._v("2017-10-24")])]),a("ul",[a("li",[s._v("Fixed SubMenu retracting when moving the mouse rapidly on the SubMenu of collapsed Menu, #7579")]),a("li",[s._v("Fixed hidden last shortcut of DateTimePicker when the shortcut menu is long, #7567 (by @DuLinRain)")]),a("li",[s._v("Added "),a("code",[s._v("show-timeout")]),s._v(" and "),a("code",[s._v("hide-timeout")]),s._v(" attributes for Dropdown, #7621 (by @phongkt-dev)")])]),a("h3",{attrs:{id:"1-4-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.7")]),a("p",[a("em",[s._v("2017-10-16")])]),a("ul",[a("li",[s._v("Fixed compatibility of Autocomplete and Vue 2.5.x, #6942 (by @rennai)")]),a("li",[s._v("Added "),a("code",[s._v("allow-focus")]),s._v(" attribute for Switch, #7494 (by @breadadams)")])]),a("h3",{attrs:{id:"1-4-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.6")]),a("p",[a("em",[s._v("2017-09-27")])]),a("ul",[a("li",[s._v("Fixed Slider's button jumping to previous position when clicked, #7190")]),a("li",[s._v("Fixed Tooltip "),a("code",[s._v("disabled")]),s._v(" regression, #7198")]),a("li",[s._v("Fixed Cascader not correctly filter options when "),a("code",[s._v("props")]),s._v(" is set, #7225")]),a("li",[s._v("Fixed an error when range typed DatePicker has an initial value of "),a("code",[s._v("[]")]),s._v(", #7233")])]),a("h3",{attrs:{id:"1-4-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.5")]),a("p",[a("em",[s._v("2017-09-24")])]),a("ul",[a("li",[s._v("Rate's "),a("code",[s._v("colors")]),s._v(" attribute now supports dynamic updates, #6872 @lukaszb")]),a("li",[s._v("Fixed Tree not highlighting tree node whose value of "),a("code",[s._v("node-key")]),s._v(" is 0, #6917")]),a("li",[s._v("Fixed initially disabled Dropdown not showing menu when it's enabled, #6969")]),a("li",[s._v("Added "),a("code",[s._v("hide-after")]),s._v(" attribute for Tooltip, #6401 @ryatziv")]),a("li",[s._v("Fixed cancel button of TimePicker not cancel picked value when clicked, #7028")]),a("li",[s._v("Added "),a("code",[s._v("selectWhenUnmatched")]),s._v(" attribute for Autocomplete, #6428 @ryatziv")]),a("li",[s._v("Fixed when "),a("code",[s._v("beforeUpload")]),s._v(" of a file returns false, other files are aborted by Upload, #7077")]),a("li",[s._v("Fixed disabled dates of DatePicker in month view and year view not displayed correctly in the west hemisphere, #7114")]),a("li",[a("code",[s._v("default-value")]),s._v(" of DatePicker now supports daterange type, #7073 @wacky6")])]),a("h3",{attrs:{id:"1-4-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.4")]),a("p",[a("em",[s._v("2017-09-05")])]),a("ul",[a("li",[s._v("Fixed all months disabled in DatePicker month view when "),a("code",[s._v("disabledDate")]),s._v(" is set, #6768 @qingdengyue")]),a("li",[s._v("Added "),a("code",[s._v("debounce")]),s._v(" attribute for Slider, #6820 @langgo")]),a("li",[s._v("Fixed value of Pagination jumper can be bigger than the total page count, #6842 @huguangju")]),a("li",[s._v("Fixed TimePicker's focus slipping away when selecting hour to 23 with mouse scroll, #6719 @qingdengyue")])]),a("h3",{attrs:{id:"1-4-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.3")]),a("p",[a("em",[s._v("2017-08-25")])]),a("ul",[a("li",[s._v("Fixed style bug when Progress's "),a("code",[s._v("percentage")]),s._v(" is "),a("code",[s._v("0")]),s._v(", #6551 @Kingwl")]),a("li",[s._v("Fixed Carousel items flashing when switching, #6394")]),a("li",[s._v("Fixed disabled Button not prevent event propagation when clicked on its text area, #6421")]),a("li",[s._v("Fixed disabled dates calculation in DatePicker's month view, #6363")]),a("li",[s._v("Fixed key enter event being stopped propagation in Autocomplete, #6499 @leezng")]),a("li",[s._v("Fixed "),a("code",[s._v("amPm")]),s._v(" not supported in DatePicker i18n, #6574")]),a("li",[s._v("Fixed clicking or dragging error of Slider when it switches from invisible to visible, #6593")]),a("li",[s._v("Fixed Alert using small icons when its "),a("code",[s._v("description")]),s._v(" is passed via default slot, #6612 @leezng")])]),a("h3",{attrs:{id:"1-4-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.2")]),a("p",[a("em",[s._v("2017-08-09")])]),a("ul",[a("li",[s._v("Fixed Select marking option of "),a("code",[s._v("value")]),s._v(" equal to "),a("code",[s._v("0")]),s._v(" as selected when the initial value is null and bound to an object-typed value, #6143")]),a("li",[s._v("Fixed Step style issue when "),a("code",[s._v("status")]),s._v(" is "),a("code",[s._v("error")]),s._v(", #6155 @wacky6")]),a("li",[s._v("Fixed Cascader selecting parent item when moving mouse quickly after clicking a leaf item, #6199")]),a("li",[s._v("Fixed Menu not hiding submenus when collapsed, #6200")]),a("li",[s._v("Fixed status of the inner native input of Switch not syncing with the component, #6205 @wacky6")]),a("li",[s._v("Fixed wrong button positioning of Slider after window is resized, #6263")]),a("li",[s._v("Fixed Autocomplete not hiding dropdown menu on blur, #6256")]),a("li",[s._v("Fixed hitting enter on jumper of Pagination not trigger page change event in IE, #6306 @qingdengyue")]),a("li",[s._v("Fixed InputNumber style issue when its "),a("code",[s._v("size")]),s._v(" is "),a("code",[s._v("large")]),s._v(" or "),a("code",[s._v("small")]),s._v(", #6310 @JeremyWuuuuu")]),a("li",[s._v("Fixed i18n failure for some texts in DatePicker, #6328")]),a("li",[s._v("Fixed Slider value changing to minimum when its button is clicked, #6359")])]),a("h3",{attrs:{id:"1-4-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.1")]),a("p",[a("em",[s._v("2017-07-28")])]),a("ul",[a("li",[s._v("Fixed child nodes expanding when checking parent node in Tree, #6029")]),a("li",[s._v("Fixed checking behavior error of Tree, #6034")]),a("li",[s._v("Fixed FormItem not inheriting "),a("code",[s._v("label-width")]),s._v(" as a Form's direct child, #6044")]),a("li",[s._v("Fixed Menu incorrectly showing SubMenu in collapse mode, #6111")]),a("li",[s._v("Fixed render order error of "),a("code",[s._v("v-if")]),s._v(" controlled dynamic TabPanes, #6066")]),a("li",[s._v("Fixed Popover still popping up after mouse leaves within "),a("code",[s._v("open-delay")]),s._v(", #6058 (by @laobubu)")]),a("li",[s._v("Fixed delete buttons still rendered in file list of disabled Upload, #6091")]),a("li",[s._v("Fixed background color error on hover of striped Table, #6024 (by @xtongs)")])]),a("h3",{attrs:{id:"1-4-0-boron"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-4-0-boron","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.4.0 Boron")]),a("p",[a("em",[s._v("2017-07-21")])]),a("h4",{attrs:{id:"new-features"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Message\n"),a("ul",[a("li",[a("code",[s._v("message")]),s._v(" attribute now supports VNode, #5463 (by @egyptik)")])])]),a("li",[s._v("ColorPicker\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("active-change")]),s._v(" event, #5775")])])]),a("li",[s._v("Popover\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("open-delay")]),s._v(" attribute, #5842 (by @kaungmyatlwin)")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("A third parameter "),a("code",[s._v("value")]),s._v(" is passed to "),a("code",[s._v("formatter")]),s._v(", #5709 (by @haledeng)")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute, #5937")])])]),a("li",[s._v("Menu\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("collapse")]),s._v(" attribute, #5941")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("value-key")]),s._v(" attribute, #5897")])])])]),a("h4",{attrs:{id:"fixes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("i18n failure for some texts, #5485")]),a("li",[s._v("returning a non-zero millisecond value when initial value is empty, #5663")]),a("li",[a("code",[s._v("disabledDate")]),s._v(" affecting undesired date, #4946 (by @liyangworld)")])])]),a("li",[s._v("Steps\n"),a("ul",[a("li",[s._v("style problems when a step is dynamically added or removed, #5456 (by @elfman)")])])]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("highlight row misplaced when an expandable Table has fixed table columns, #5471 (by @elfman)")]),a("li",[a("code",[s._v("classList")]),s._v(" not supported in some browsers, #5613 (by @flynntsc)")])])]),a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("single Select unable to scroll to the selected item when the dropdown menu pops up, #5564（by @wacky6）")])])]),a("li",[s._v("Radio\n"),a("ul",[a("li",[s._v("border radius lost in RadioGroups with only one Radio, #5646 (by @YYvanYang)")])])]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("unable to reselect previously deleted file when "),a("code",[s._v("auto-upload")]),s._v(" is false, #5706")]),a("li",[s._v("delete button still visible and functioning when "),a("code",[s._v("disabled")]),s._v(", #5841")]),a("li",[s._v("compatibility issue with Vue 2.4 "),a("code",[s._v("key")]),s._v(", #5872")])])]),a("li",[s._v("MessageBox\n"),a("ul",[a("li",[s._v("clicking cancel buttons getting resolved when not invoked as a "),a("code",[s._v("confirm")]),s._v(" or "),a("code",[s._v("prompt")]),s._v(", #5658")])])]),a("li",[s._v("Rate\n"),a("ul",[a("li",[s._v("active icons not reflecting decimal part of initial value, #5785")])])]),a("li",[s._v("Pagination\n"),a("ul",[a("li",[s._v("compatibility issue of total page display with vue-i18n@6.x, #5796 (by @mario56)")]),a("li",[s._v("apostrophe incorrectly showing up when current page is one page less than total page, #5861 (by @openks)")])])]),a("li",[s._v("Loading\n"),a("ul",[a("li",[s._v("style problems when bound to invisible elements, #5649 (by @xiongzixiao)")])])]),a("li",[s._v("Cascader\n"),a("ul",[a("li",[s._v("text in the input box not vertically aligned, #5819 (by @jianzhi92)")])])]),a("li",[s._v("Tree\n"),a("ul",[a("li",[a("code",[s._v("setCheckedKeys")]),s._v(" and "),a("code",[s._v("setCheckedNodes")]),s._v(" in lazy mode, #5937")]),a("li",[s._v("loading all descendent nodes when a parent node is checked in lazy mode, #5963")])])]),a("li",[s._v("Form\n"),a("ul",[a("li",[s._v("label named slot not working when "),a("code",[s._v("label")]),s._v(" is not assigned on FormItem, #5921")])])]),a("li",[s._v("Tooltip\n"),a("ul",[a("li",[s._v("not working in Vue 2.4.x when the triggering element is a custom component, #5916")])])])]),a("h4",{attrs:{id:"breaking-changes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Select\n"),a("ul",[a("li",[s._v("when value is an object, "),a("code",[s._v("value-key")]),s._v(" is required as its unique identity key, #5897")])])])]),a("h3",{attrs:{id:"1-3-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.7")]),a("p",[a("em",[s._v("2017-06-18")])]),a("ul",[a("li",[s._v("Fixed Table with async data not showing summary row, #5318")]),a("li",[s._v("Fixed Pagination's jumper value not sync with current page, #5377")]),a("li",[s._v("Fixed DatePicker's shortcut panel overflow issue, #5297 (by @alashow)")]),a("li",[s._v("Fixed clicking Switch not responding when some text on the page is selected, #5411")]),a("li",[s._v("The red wildcard indicating required field of Form is now responsive, #5403")]),a("li",[s._v("Fixed initial-index of Carousel not working, #5334")]),a("li",[s._v("Fixed Popover enable to be focused when nested in a Dialog, #5336")])]),a("h3",{attrs:{id:"1-3-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.6")]),a("p",[a("em",[s._v("2017-06-09")])]),a("ul",[a("li",[s._v("Fixed inconsistency of ColorPicker's default value and panel value, #5183 (by @Kingwl)")]),a("li",[s._v("Fixed ColorPicker not able to change hue in the panel when its default value is white, #5184 (by @Kingwl)")]),a("li",[s._v("Fixed Select's dropdown taking multiple clicks to expand when nested in a Dialog after scrolling, #5226")]),a("li",[s._v("Added "),a("code",[s._v("props")]),s._v(" property for Autocomplete, #5282")]),a("li",[s._v("Fixed dropdown of DatePicker not hiding when Tab key is pressed after manual input, #5149 (by @ChuckFields)")])]),a("h3",{attrs:{id:"1-3-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.5")]),a("p",[a("em",[s._v("2017-06-03")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("default-first-option")]),s._v(" of Select not working in remote filtering, #5084")]),a("li",[s._v("Fixed InputNumber not aligning with other form components, #5127")]),a("li",[s._v("Fixed inline FormItem having no effect on mixed Input, #5151")]),a("li",[s._v("Fixed height of FormItem being different in Firefox from other browsers, #5152")]),a("li",[s._v("Fixed items with a "),a("code",[s._v("value")]),s._v(" of 0 in Cascader can not be expanded, #5172 (by @Kingwl)")]),a("li",[s._v("Fixed Autocomplete not triggering native "),a("code",[s._v("keydown")]),s._v(" and "),a("code",[s._v("keyup")]),s._v(" events, #5129")]),a("li",[s._v("Added "),a("code",[s._v("clear")]),s._v(" event for Select, #5112")]),a("li",[s._v("Fixed Cascader's dropdown menu not updating its position in some situations, #5064")]),a("li",[s._v("Better accessibility for Dialog and MessageBox, #4786")])]),a("h3",{attrs:{id:"1-3-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.4")]),a("p",[a("em",[s._v("2017-05-23")])]),a("ul",[a("li",[s._v("Fixed highlight and stripe effects of Table with expandable rows, #4871 (by @mu-yu)")]),a("li",[s._v("Added "),a("code",[s._v("default-first-option")]),s._v(" for Select, #4838 (by @wacky6)")]),a("li",[s._v('Fixed Select with no options not displaying "No data" text when '),a("code",[s._v("allow-create")]),s._v(" is true, #4977")])]),a("h3",{attrs:{id:"1-3-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.3")]),a("p",[a("em",[s._v("2017-05-14")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("visible-change")]),s._v(" event for Dropdown, #4818 (by @luciy)")]),a("li",[s._v("Added "),a("code",[s._v("tag")]),s._v(" attribute for Col and Row, #4799")]),a("li",[s._v("Fixed Cascader search functionality regression, #4812")]),a("li",[s._v("Fixed DatePicker triggering watch when "),a("code",[s._v("type")]),s._v(" is range, #4837 (by @wacky6)")]),a("li",[s._v("Fixed numbers in TimePicker not align vertically, #4847 (by @pengchongfu)")]),a("li",[s._v("Fixed Dialog not triggering "),a("code",[s._v("before-close")]),s._v(" hook when ESC is pressed, #4819 (by @patriciussanctus)")]),a("li",[s._v("Fixed multiple MessageBox not rendering content correctly when some of the "),a("code",[s._v("message")]),s._v(" is a VNode")]),a("li",[s._v("Fixed Checkbox not focused when navigating with tab")])]),a("h3",{attrs:{id:"1-3-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.2")]),a("p",[a("em",[s._v("2017-05-10")])]),a("ul",[a("li",[s._v("Fixed undefined custom component "),a("code",[s._v("el-collapse-transition")]),s._v(" error when importing some components on demand, #4728")]),a("li",[s._v("Fixed vertical alignment issue of Pagination in FireFox, #4756")]),a("li",[s._v("Fixed dropdown panel view not updating after binding value of DatePicker is programmatically changed when "),a("code",[s._v("type")]),s._v(" is week, #4739")]),a("li",[s._v("Fixed height calculation errors of Table with summary rows, #4736")]),a("li",[s._v("Added "),a("code",[s._v("before-filter")]),s._v(" attribute for Cascader, #4774")]),a("li",[s._v("Added "),a("code",[s._v("debounce")]),s._v(" attribute for InputNumber, #4712（by @pengchongfu）")])]),a("h3",{attrs:{id:"1-3-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.1")]),a("p",[a("em",[s._v("2017-05-06")])]),a("ul",[a("li",[s._v("Fixed Autocomplete clearing input box when typing Chinese, #4718")]),a("li",[s._v("Fixed async Table's summary row not scroll with Table, #4717")]),a("li",[s._v("Fixed Dialog not closing correctly after pressing ESC when "),a("code",[s._v("close-on-press-esc")]),s._v(" is true, #4706")]),a("li",[s._v("Fixed wrong parameter in "),a("code",[s._v("change")]),s._v(" event of Switch when "),a("code",[s._v("on-value")]),s._v(" and "),a("code",[s._v("off-value")]),s._v(" are assigned, #4675")])]),a("h3",{attrs:{id:"1-3-0-beryllium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-0-beryllium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.0 Beryllium")]),a("p",[a("em",[s._v("2017-05-05")])]),a("h4",{attrs:{id:"new-features-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("New component: Transfer")]),a("li",[s._v("Now you can use our pre-defined transitions")]),a("li",[s._v("Vertical mode for Slider, can be activated by the "),a("code",[s._v("vertical")]),s._v(" attribute, #4410 (by @devange)")]),a("li",[s._v("Button style for CheckboxGroup, #3697 (by @mdartic)")]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("setCurrentRow")]),s._v(" method, #4390")]),a("li",[s._v("Added summary row, with three attributes: "),a("code",[s._v("show-summary")]),s._v(", "),a("code",[s._v("sum-text")]),s._v(" and "),a("code",[s._v("summary-method")]),s._v(", #4484")]),a("li",[s._v("Added "),a("code",[s._v("filter-placement")]),s._v(" attribute for TableColumn, #4491")])])]),a("li",[s._v("Dialog\n"),a("ul",[a("li",[s._v("Added a "),a("code",[s._v("before-close")]),s._v(" hook, #4432")]),a("li",[s._v("Added "),a("code",[s._v("visible")]),s._v(" attribute, which supports the "),a("code",[s._v(".sync")]),s._v(" modifier, #4539")])])]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute, #4473")]),a("li",[a("code",[s._v("on-change")]),s._v(" now also triggers when a file is added, #4447")]),a("li",[s._v("Added "),a("code",[s._v("abort")]),s._v(" method")])])]),a("li",[s._v("Switch now supports "),a("code",[s._v("on-value")]),s._v(" and "),a("code",[s._v("off-value")]),s._v(", so that you can customize its values, #4403")]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("default-value")]),s._v(" attribute for initially displayed date in the dropdown, #4222 (by @wacky6)")]),a("li",[a("code",[s._v("type")]),s._v(" now supports dynamic updates, #4417 (by @coffeedeveloper)")]),a("li",[s._v("Added "),a("code",[s._v("label")]),s._v(" attribute for CarouselItem, #4317 (by @paul-blundell)")])])]),a("li",[a("code",[s._v("message")]),s._v(" of MessageBox now supports VNode, #4550")]),a("li",[a("code",[s._v("current-page")]),s._v(" of Pagination "),a("code",[s._v("current-page")]),s._v(" now supports "),a("code",[s._v(".sync")]),s._v(", #4539")]),a("li",[s._v("Added "),a("code",[s._v("label")]),s._v(" slot for Form, so you can customize label's content, #4634")])]),a("h4",{attrs:{id:"fixes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[s._v("Compatibility issues of Select and Table with Vue 2.3.x, #4518")]),a("li",[a("code",[s._v("disabledDate")]),s._v(" of DatePicker having no effect on typed value in the input box, #4309")]),a("li",[s._v("An issue when the key of a Tree node is number 0, #4415")]),a("li",[s._v("TimePicker number not align when picked, #4425 (by @pengchongfu)")]),a("li",[s._v("Autocomplete frequently triggering searching method when typing Chinese, #4393 (by @qazbnm456)")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("not able to select the same file multiple times, #4461")]),a("li",[s._v("not displaying preview image when is "),a("code",[s._v("auto-upload")]),s._v(" false, #4572")]),a("li",[s._v("some style errors, #4643")])])]),a("li",[s._v("Style bug of RadioGroup when nested in a FormItem, #4336")]),a("li",[s._v("ColorPicker not clear the color panel when bound value is emptied, #4668 (by @pengchongfu)")]),a("li",[a("code",[s._v("show-overflow-tooltip")]),s._v(" of Table not working in Safari, #4157 (by @renxia)")])]),a("h4",{ attrs:{id:"breaking-changes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Only compatible with Vue 2.3.0+")])]),a("h3",{attrs:{id:"1-2-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.9")]),a("p",[a("em",[s._v("2017-04-19")])]),a("ul",[a("li",[s._v("Fixed RadioButton not working properly when some texts on the page are selected, #4217")]),a("li",[s._v("Fixed the toggle-all checkbox of Tree not working in some browsers, #4107 (by @pengchongfu)")]),a("li",[s._v("Fixed Cascader clear button not working, #4167 (by @pengchongfu)")]),a("li",[s._v("Fixed router switching error when the page has a Table with Tooltips, #4085")]),a("li",[s._v("Fixed Upload not able to remove selected files, #4233")]),a("li",[s._v("Added "),a("code",[s._v("onClick")]),s._v(" attribute for Notification, #4221 (by @amouillard)")]),a("li",[s._v("Fixed binding value of DatePicker becoming undefined when cleared, #4186 (by @pengchongfu)")]),a("li",[s._v("Fixed style error of ColorPicker when nested in a FormItem, #4303")]),a("li",[s._v("Added "),a("code",[s._v("enterable")]),s._v(" attribute for Tooltip, #4210")])]),a("h3",{attrs:{id:"1-2-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.8")]),a("p",[a("em",[s._v("2017-04-07")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("resetFields")]),s._v(" of Form reassigning form items, #3840 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",[s._v("max")]),s._v(" and "),a("code",[s._v("min")]),s._v(" attributes for CheckboxGroup, #3700 (by @mdartic)")]),a("li",[s._v("Fixed DatePicker adding one to picked month in some specific days, #3935")]),a("li",[s._v("Added "),a("code",[s._v("closeAll")]),s._v(" method for Message, #3966 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",[s._v("format-tooltip")]),s._v(" attribute for Slider, #3657 (by @liyanlong)")]),a("li",[s._v("Fixed filter panel of Table being when nested in a Dialog, #4023 (by @liyanlong)")]),a("li",[s._v("Fixed single Select unable to create new items in Vue 2.2.x, #3984")]),a("li",[s._v("Fixed Row disappearing in all breakpoints if its "),a("code",[s._v("span")]),s._v(" is set to 0 in some breakpoints, #4053")])]),a("h3",{attrs:{id:"1-2-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.7")]),a("p",[a("em",[s._v("2017-03-29")])]),a("ul",[a("li",[s._v("Fixed Select not compatible with Vue 2.2.6, #3797")]),a("li",[s._v("Improve performance for rendering tooltip in Table, #3478")]),a("li",[s._v("Add "),a("code",[s._v("tooltip-effect")]),s._v(" property for Table")])]),a("h3",{attrs:{id:"1-2-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.6")]),a("p",[a("em",[s._v("2017-03-28")])]),a("ul",[a("li",[s._v("Fixed Switch compatible with SSR, #3752")]),a("li",[s._v("Fixed the time of TimePicker calculating incorrectly, #3479")]),a("li",[s._v("Fixed the week of DatePicker formatting incorrectly, #2774")]),a("li",[s._v("Fixed the week of DatePicker initializing incorrectly, #3058")]),a("li",[s._v("Fixed the events of Popover destroying incorrectly, #3555")]),a("li",[s._v("Fixed InputNumber setInterval, #3514 (by @pengchongfu)")]),a("li",[s._v("Fixed RadioButton css files, #3276")]),a("li",[s._v("Fixed hover style on striped Table, #3696 (by @nicoeg)")]),a("li",[s._v("Fixed Slider's button jumping left issue, #3664 (by @gabrielboliveira)")]),a("li",[s._v("Added "),a("code",[s._v("delete-tag")]),s._v(" event for Select, #3663 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",[s._v("onPick")]),s._v(" option for DatePicker, #2921")]),a("li",[s._v("Added "),a("code",[s._v("status")]),s._v(" for Step, #3722")]),a("li",[s._v("Added full example for on-demand importing, #3302")])]),a("h3",{attrs:{id:"1-2-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.5")]),a("p",[a("em",[s._v("2017-03-19")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("show-tooltip")]),s._v(" property for Slider, #3430 (by @gabrielboliveira)")]),a("li",[s._v("Fixed Slider precision not updating when "),a("code",[s._v("step")]),s._v(" is updated, #3475 (by @gabrielboliveira)")]),a("li",[s._v("Fixed a bug that when the window is at the criticality of showing the scrollbar, the popup of Tooltip inside a Table will cause the Table to shake horizontally, #3549")]),a("li",[s._v("Fixed Table automatically shrinking vertically in some conditions, #3539")]),a("li",[s._v("Fixed popup components inside a Popover not hiding when blank area is clicked, #3451 (by @nicoeg)")]),a("li",[s._v("Now Col will hide itself if its "),a("code",[s._v("xs")]),s._v(", "),a("code",[s._v("sm")]),s._v(", "),a("code",[s._v("md")]),s._v(" or "),a("code",[s._v("lg")]),s._v(" is set to 0, #3564")])]),a("h3",{attrs:{id:"1-2-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.4")]),a("p",[a("em",[s._v("2017-03-09")])]),a("ul",[a("li",[s._v("Fixed Carousel not responding to dynamic data updates, #3159")]),a("li",[s._v("Fixed "),a("code",[s._v("cell-dblclick")]),s._v(" of Table not firing issue, #3305")]),a("li",[s._v("Fixed disabled Cascader not displaying initial value, #3297")]),a("li",[s._v("Fixed Slider not correctly displaying initial value when "),a("code",[s._v("show-input")]),s._v(" is true, #3281")]),a("li",[s._v("Fixed Tooltip error in server-side rendering, #3214")]),a("li",[s._v("Fixed "),a("code",[s._v("range-separator")]),s._v(" of DatePicker not working issue, #3378")]),a("li",[s._v("Added support for dynamically update loading text of Loading directive, #3345 (by @imyzf)")]),a("li",[s._v("Added "),a("code",[s._v("http-request")]),s._v(" attribute for Upload, #3387")]),a("li",[s._v("Added support for hiding col if its "),a("code",[s._v("span")]),s._v(" is 0, #3313")])]),a("h3",{attrs:{id:"1-2-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.3")]),a("p",[a("em",[s._v("2017-03-01")])]),a("ul",[a("li",[s._v("Fixed Tooltip, #3152")])]),a("h3",{attrs:{id:"1-2-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.2")]),a("p",[a("em",[s._v("2017-02-28")])]),a("ul",[a("li",[s._v("Fixed compatibility issues with Vue 2.2, #3002 #3067 #3097")]),a("li",[s._v("Fixed Cascader's dropdown hiding behind Dialog when nested in a Dialog, #3035")]),a("li",[s._v("Fixed incorrect parameter of "),a("code",[s._v("change")]),s._v(" event of Cascader, #3014")]),a("li",[s._v("Add "),a("code",[s._v("change")]),s._v(" event for ColorPicker, #3049 (by @nicoeg)")]),a("li",[s._v("Fixed "),a("code",[s._v("setCheckedKeys")]),s._v(" method of Tree not working on non-leaf nodes, #2967 (by @rainyLeo)")]),a("li",[s._v("Fixed Tooltip not compatible with "),a("code",[s._v("router-link")]),s._v(", #3143")])]),a("h3",{attrs:{id:"1-2-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.1")]),a("p",[a("em",[s._v("2017-02-23")])]),a("ul",[a("li",[s._v("Fixed SSR regression in version 1.2.0, #2982")]),a("li",[s._v("Fixed horizontal scroll buttons not showing in Tabs, #2974")]),a("li",[s._v("Fixed wrong calculation of height after the "),a("code",[s._v("height")]),s._v(" attribute is updated dynamically in Table, #2979")]),a("li",[s._v("Added "),a("code",[s._v("cell-dblclick")]),s._v(" and "),a("code",[s._v("header-dragend")]),s._v(" events for Table, #2983 #2988")]),a("li",[s._v("Fixed form items showing a left padding inside an inline Form with a specified "),a("code",[s._v("label-width")]),s._v(", #2990")]),a("li",[s._v("Fixed Cascader's dropdown misplaces in some conditions, #2992")])]),a("h3",{attrs:{id:"1-2-0-lithium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-0-lithium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.0 Lithium")]),a("p",[a("em",[s._v("2017-02-22")])]),a("h4",{attrs:{id:"new-features-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Two brand new components: Cascader and ColorPicker")]),a("li",[s._v("New attributes "),a("code",[s._v("editable")]),s._v(" and "),a("code",[s._v("addable")]),s._v(", and new events "),a("code",[s._v("tab-add")]),s._v(" and "),a("code",[s._v("edit")]),s._v(" for Tabs")]),a("li",[s._v("Language config files in UMD format")]),a("li",[s._v("New events "),a("code",[s._v("node-expand")]),s._v(" and "),a("code",[s._v("node-collapse")]),s._v(" for Tree, #2507 (by @masterzhang)")]),a("li",[s._v("New attribute "),a("code",[s._v("indent")]),s._v(" for Tree, #2713")]),a("li",[s._v("Dialog's title now supports named slot, #2657")]),a("li",[s._v("New attribute "),a("code",[s._v("range")]),s._v(" for Slider, #2751")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("Attribute "),a("code",[s._v("auto-upload")]),s._v(" that controls if files are uploaded immediately after selecting, and its default value is "),a("code",[s._v("true")])]),a("li",[s._v("Event "),a("code",[s._v("on-change")]),s._v(" that fires when file status changes")]),a("li",[s._v("Attribute "),a("code",[s._v("list-type")]),s._v(" that configures the appearance of file list")])])]),a("li",[s._v("Scroll bars in Autocomplete are made prettier")])]),a("h4",{attrs:{id:"fixes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[s._v("Carousel not responding to contents' update, #2775")]),a("li",[s._v("Numbers in TimePicker not align in some conditions, #2948")]),a("li",[s._v("TimePicker only responding to odd clicks in some conditions, #2884 (by @k55k32)")]),a("li",[s._v("Tabs' display order error when tab-pane is dynamically changed, #2898")]),a("li",[s._v("Menu highlighting menu-item when "),a("code",[s._v("default-active")]),s._v(" is assigned to an non-existent item")]),a("li",[s._v("Collapse's style issue when nested")])]),a("h4",{attrs:{id:"breaking-changes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Tooltip is refactored, no additional HTML tags will be rendered so that the structures of nested component stay unchanged, #2459")]),a("li",[s._v("The backdrop of Dialog now inserts to body element by default, #2556")]),a("li",[s._v("Tabs don't maintain tab instances internally any more, so they should be handled externally via events emitted by Tabs, #2567")]),a("li",[s._v("Upload is refactored\n"),a("ul",[a("li",[a("code",[s._v("default-file-list")]),s._v(" renamed to "),a("code",[s._v("file-list")]),s._v(", and "),a("code",[s._v("show-upload-list")]),s._v(" renamed to "),a("code",[s._v("show-file-list")])]),a("li",[a("code",[s._v("thumbnail-mode")]),s._v(" removed")])])])]),a("h3",{attrs:{id:"1-1-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.6")]),a("p",[a("em",[s._v("2017-01-23")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("customClass")]),s._v(" of MessageBox affecting follow-up instances, #2472")]),a("li",[s._v("Fixed style issue of Select after being activated when located in a non-default-activated tab pane inside Tabs, #2466")]),a("li",[s._v("Fixed style missing issue for some components when imported on demand")]),a("li",[s._v("Fixed disabled filterable multiple Select still showing dropdown when clicked on a certain area, #2540")]),a("li",[s._v("Restored returning to original sorting in sortable Table columns, #2491")]),a("li",[s._v("Added "),a("code",[s._v("reset.css")]),s._v(" in "),a("code",[s._v("theme-default")]),s._v(", #2378")]),a("li",[s._v("Added "),a("code",[s._v("range-separator")]),s._v(" attribute for DatePicker, #2579")]),a("li",[s._v("Published individual component packages: Table, DatePicker, Loading, Upload and Carousel")]),a("li",[s._v("Add Finnish (@groenroos)")])]),a("h3",{attrs:{id:"1-1-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.5")]),a("p",[a("em",[s._v("2017-01-17")])]),a("ul",[a("li",[s._v("Fixed Menu not activating corresponding menu item after router switching in router mode, #2451")]),a("li",[s._v("Fixed "),a("code",[s._v("value")]),s._v(" attribute of Collapse not supporting "),a("code",[s._v("Number")]),s._v(" typed value, #2455")])]),a("h3",{attrs:{id:"1-1-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.4")]),a("p",[a("em",[s._v("2017-01-16")])]),a("ul",[a("li",[s._v("Fixed Input Number triggering "),a("code",[s._v("change")]),s._v(" event when bound value is changed programmatically, #2329")]),a("li",[s._v("Fixed Menu not responding to "),a("code",[s._v("$router")]),s._v(" changing in router mode, #2391")]),a("li",[s._v("Fixed Menu and Tree expanding state malfunctioning when clicked multiple times quickly, #2354")]),a("li",[s._v("Fixed "),a("code",[s._v("change")]),s._v(" event triggering mechanism of Input Number and Checkbox Group, now they do not fire when bound value is changed programmatically")]),a("li",[s._v("Added "),a("code",[s._v("on-icon-click")]),s._v(" attribute for Input, #2414")]),a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute for Radio Group, #2411")]),a("li",[s._v("Added "),a("code",[s._v("accordion")]),s._v(" attribute for Tree, #2408")]),a("li",[s._v("Added "),a("code",[s._v("show-message")]),s._v(" attribute for Form, #2356")]),a("li",[s._v("Fixed sort clicking area of Table, updated default sorting related APIs, #2309 #2405 (by @njleonzhang)")]),a("li",[s._v("Fixed "),a("code",[s._v("firstDayOfWeek")]),s._v(" not working in ranged typed of DatePicker, #2353")]),a("li",[s._v("Fixed DatePicker displaying 1970 when initial value is null, #2388")]),a("li",[s._v("Fixed "),a("code",[s._v("filteredValue")]),s._v(" attribute for Table, #2348")]),a("li",[s._v("Fixed scrollable Table's style with empty data, #2396")]),a("li",[s._v("Added "),a("code",[s._v("beforeClose")]),s._v(" attribute for MessageBox, #2204")]),a("li",[s._v("Fixed filterable Select not showing dropdown when triangle icon is clicked, #2389")])]),a("p",[s._v("Breaking change")]),a("ul",[a("li",[s._v("The "),a("code",[s._v("default-sort-prop")]),s._v(" and "),a("code",[s._v("default-sort-order")]),s._v(" attributes added in 1.1.3 are now merged into an object-typed attribute")])]),a("h3",{attrs:{id:"1-1-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.3")]),a("p",[a("em",[s._v("2017-01-09")])]),a("ul",[a("li",[s._v("Fixed DatePicker not firing change event when cleared for the first time upon page load, #2167")]),a("li",[s._v("Fixed DatePicker year calculating error when choosing the next year, #2152")]),a("li",[s._v("Added "),a("code",[s._v("default-sort-prop")]),s._v(" and "),a("code",[s._v("default-sort-order")]),s._v(" attributes for Table, #2182 (by @njleonzhang)")]),a("li",[s._v("Fixed filterable Select filtering other options with initial value, #2196")]),a("li",[s._v("Added custom i18n processing, making Element compatible with i18n plugins other than "),a("code",[s._v("vue-i18n")]),s._v(", #2129")]),a("li",[s._v("Added "),a("code",[s._v("resize")]),s._v(" attribute for Input, #2263 (by @Kingwl)")]),a("li",[s._v("Fixed Autocomplete not hiding dropdown when blurred, #2247")]),a("li",[s._v("Fixed style issues with nested Tabs, #2212 (by @Kingwl)")]),a("li",[s._v("Fixed Tabs' tab bar locating error when non-first item is initially activated, #2192")])]),a("h3",{attrs:{id:"1-1-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.2")]),a("p",[a("em",[s._v("2016-12-30")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("sortable")]),s._v(" and "),a("code",[s._v("fixed")]),s._v(" attribute of Table not working in Vue 2.1.7+")]),a("li",[s._v("Fixed Input Number not resetting on blur when input with illegal values, #2098")]),a("li",[s._v("Removed "),a("code",[s._v("title")]),s._v(" scoped slot of Collapse, and added "),a("code",[s._v("title")]),s._v(" named slot, #2100")]),a("li",[s._v("Fixed range selection in TimePicker not working issue")]),a("li",[s._v("Fixed Tabs' active tab switching when a non-active tab is removed, #2106")]),a("li",[s._v("Fixed console error reporting when navigating Select with arrow keys, #2120")]),a("li",[s._v("Fixed incorrect validation timing of filterable Select in Form, #2120")])]),a("h3",{attrs:{id:"1-1-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.1")]),a("p",[a("em",[s._v("2016-12-29")])]),a("ul",[a("li",[s._v("Fixed compatibility issue with latest Vue due to compilation")])]),a("h3",{attrs:{id:"1-1-0-helium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-0-helium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.0 Helium")]),a("p",[a("em",[s._v("2016-12-29")])]),a("h4",{attrs:{id:"new-features-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Two brand new components: Carousel and Collapse")]),a("li",[s._v("SSR supported")]),a("li",[s._v("Scrollbars' style inside components is upgraded")]),a("li",[s._v("Table now supports custom templates via "),a("a",{attrs:{href:"http://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("scoped slots")]),s._v("; the good old "),a("code",[s._v("inline-template")]),s._v(" is still compatible, but it's no longer recommended and is likely to be removed in the future")]),a("li",[s._v("Table now supports expandable rows")]),a("li",[s._v("DatePicker now supports specifying the first day of week")]),a("li",[s._v("TimeSelect now supports "),a("code",[s._v("maxTime")])]),a("li",[s._v("Autocomplete now supports "),a("code",[s._v("popper-class")])]),a("li",[s._v("To customize template of Tab-Pane, now you can use the "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("label")])])]),a("h4",{attrs:{id:"fixes-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[a("code",[s._v("change")]),s._v(" event of DatePicker incorrectly triggering multiple times, #2070")]),a("li",[s._v("Width shaking of tab-pane while initializing, #1883")])]),a("h4",{attrs:{id:"breaking-changes-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Only compatible with Vue 2.1.6 and beyond")]),a("li",[s._v("Parameters of Form validateField() methods are updated")]),a("li",[s._v("Alert's render-content attribute is removed, and now you can pass your custom template via default slot")]),a("li",[s._v("The box models of Input and Select are updated from "),a("code",[s._v("block")]),s._v(" to "),a("code",[s._v("inline-block")])]),a("li",[s._v("The box model of Tabs is updated from "),a("code",[s._v("inline-block")]),s._v(" to "),a("code",[s._v("block")]),s._v(", and Tab-Pane's "),a("code",[s._v("label-content")]),s._v(" attribute is removed")]),a("li",[s._v("The dropdown of Autocomplete now inserts directly to "),a("code",[s._v("")]),s._v(", not "),a("code",[s._v("")]),s._v(" any more")])]),a("h3",{attrs:{id:"1-0-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.9")]),a("p",[a("em",[s._v("2016-12-27")])]),a("ul",[a("li",[s._v("Fixed DatePicker incorrectly triggering input event, #1834")]),a("li",[s._v("Fixed Tree reporting "),a("code",[s._v("event is undefined")]),s._v(" error in Firefox, #1945")]),a("li",[s._v("Added "),a("code",[s._v("change")]),s._v(" event for DatePicker, whose parameter is the formatted value, #1841")]),a("li",[s._v("Added "),a("code",[s._v("header-align")]),s._v(" attribute for Table, #1424")]),a("li",[s._v("Fixed single select Table's highlight style not removing when data is removed, #1890")]),a("li",[s._v("Fixed filterable Select lagging issue with more options, #1933")]),a("li",[s._v("Fixed multiple disabled Select not disabling removing selected options issue, #2001")]),a("li",[s._v("Fixed Col style not working in "),a("code",[s._v("xs")]),s._v(", #2011")]),a("li",[s._v("Added "),a("code",[s._v("value")]),s._v(" attribute for Tab, #2008")]),a("li",[s._v("Fixed InputNumber "),a("code",[s._v("change")]),s._v(" event incorrectly firing multiple times in some conditions, #1999")]),a("li",[s._v("Added "),a("code",[s._v("clearable")]),s._v(" attribute for DatePicker, #1994")]),a("li",[s._v("Fixed Form always passing validation in async mode, #1936")])]),a("h3",{attrs:{id:"1-0-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.8")]),a("p",[a("em",[s._v("2016-12-20")])]),a("ul",[a("li",[s._v("Fixed nested Popup from event bubbling, #1677")]),a("li",[s._v("Fixed the issue that datetimerange-typed DatePicker can not select time, #1758")]),a("li",[s._v("Fixed "),a("code",[s._v("change")]),s._v(" event not firing correctly of Slider, #1809")]),a("li",[s._v("Fixed Loading's spinner splitting while animating in some conditions, #1786")]),a("li",[s._v("Added "),a("code",[s._v("loading-text")]),s._v(", "),a("code",[s._v("no-data-text")]),s._v(", "),a("code",[s._v("no-match-text")]),s._v(" properties and "),a("code",[s._v("visible-change")]),s._v(" event for Select, #1849")]),a("li",[s._v("Added "),a("code",[s._v("popper-class")]),s._v(" property for DatePicker, Select and Tooltip, #1806")]),a("li",[s._v("Added "),a("code",[s._v("expand-on-click-node")]),s._v(", "),a("code",[s._v("current-node-key")]),s._v(" properties and "),a("code",[s._v("current-change")]),s._v(" event for Tree, #1805 #1807")]),a("li",[s._v("Added the third parameter "),a("code",[s._v("column")]),s._v(" for Table's "),a("code",[s._v("row-click")]),s._v(" event, #1808")]),a("li",[s._v("Fixed an error when pages with Checkbox switching routes due to "),a("code",[s._v("computed")]),s._v(" property being cached, #1860")]),a("li",[s._v("Added the tab instance as a parameter for TabPanel's "),a("code",[s._v("label-content")]),s._v(" render function, #1857")]),a("li",[s._v("Added infinite submenus support for NavMenu in vertical mode, #1851")]),a("li",[s._v("Updated Checkbox so that it works without a binding value, #1818")]),a("li",[s._v("Added "),a("code",[s._v("onProgress")]),s._v(" hook for Progress, #1782")]),a("li",[s._v("Fixed Tab not updating active bar with dynamic label, #1761")]),a("li",[s._v("Added "),a("code",[s._v("filter-change")]),s._v(" event for Table, and "),a("code",[s._v("column-key")]),s._v(" property for TableColumn, #1876")]),a("li",[s._v("Added "),a("code",[s._v("hide-on-click")]),s._v(" property for Dropdown, #1879")])]),a("h3",{attrs:{id:"1-0-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.7")]),a("p",[a("em",[s._v("2016-12-14")])]),a("ul",[a("li",[s._v("Fixed DatePicker dropdown appears when hovering on the clear button")]),a("li",[s._v("Fixed DatePicker displays a wrong date when its initial value is null")]),a("li",[s._v("Added "),a("code",[s._v("row-contextmenu")]),s._v(" event and "),a("code",[s._v("max-height")]),s._v(" attribute for Table, #1663 #1674")]),a("li",[s._v("Added "),a("code",[s._v("customClass")]),s._v(" attribute for MessageBox, #1707")]),a("li",[s._v("Added "),a("code",[s._v("iconClass")]),s._v(" and "),a("code",[s._v("customClass")]),s._v(" attributes for Message and Notification, #1671")]),a("li",[s._v("Added empty slot for Table, #1737")]),a("li",[s._v("Added old value as a second parameter in change event for InputNumber")])]),a("h3",{attrs:{id:"1-0-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.6")]),a("p",[a("em",[s._v("2016-12-09")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute for Tabs, #1620")]),a("li",[s._v("Added "),a("code",[s._v("size")]),s._v(" attribute for DatePicker input, #1440")]),a("li",[s._v("Fixed "),a("code",[s._v("datetimerange")]),s._v(" DatePicker's panel not showing correct date if initial value is present, #1129")]),a("li",[s._v("Fixed DatePicker display error when switching year, #1607")]),a("li",[s._v("Fixed DatePicker not triggering clickoutside when its icon is clicked, #1604")]),a("li",[s._v("Fixed TimePicker not refreshing value after clicking the clear button, #1583")]),a("li",[s._v("Fixed remote filterable Select display error when its value is an object, #1593")]),a("li",[s._v("Fixed Select's clear button still working bug when it's "),a("code",[s._v("disabled")]),s._v(", #1619")]),a("li",[s._v("Fixed Switch's background color error when its "),a("code",[s._v("disabled")]),s._v(" attribute is dynamically changed, #1627")]),a("li",[s._v("Fixed some style bugs of Table")])]),a("h3",{attrs:{id:"1-0-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.5")]),a("p",[a("em",[s._v("2016-12-06")])]),a("ul",[a("li",[s._v("Fixed Select with async options and binding value displaying value instead of label, #1537")]),a("li",[s._v("Fixed Select reports an error when initial binding value is an empty object, #1533")]),a("li",[s._v("Fixed remote filtering Select not showing dropdown in some conditions, #1531")]),a("li",[s._v("Fixed Slider sometimes drifting a small distance after releasing dragging, #1546")]),a("li",[s._v("Fixed Steps style in IE9, #1543")]),a("li",[s._v("Added Upload generating URL for all file types, #1530")]),a("li",[s._v("Fixed TimeSelect style, removed flexbox, #1335")])]),a("h3",{attrs:{id:"1-0-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.4")]),a("p",[a("em",[s._v("2016-12-02")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("controls")]),s._v(" attribute for Input Number, #1473")]),a("li",[s._v("Fixed Checkbox Group and Radio Group async issue, #1511 #1514")]),a("li",[s._v("Added "),a("code",[s._v("offset")]),s._v(" attribute for Notification, #1419")]),a("li",[s._v("Fixed Slider's value not accurate issue when dragging rapidly, #1458")]),a("li",[s._v("Fixed Slider incorrectly showing multiple decimal digits issue, #1450")]),a("li",[s._v("Fixed Select's binding value and displayed value not in sync in some conditions")]),a("li",[s._v("Added "),a("code",[s._v("multiple-limit")]),s._v(" and "),a("code",[s._v("allow-create")]),s._v(" attributes for Select")]),a("li",[s._v("Fixed Tree leaf nodes' triangle icon not disappear when expanded, #1438")]),a("li",[s._v("Fixed Tree's view not updating issue after fetching child nodes' data, #1439")]),a("li",[s._v("Fixed some Table's style issues in windows system, #1464 #1507")]),a("li",[s._v("Fixed Table's first column's label not showing issue when grouping table head is used with fixed columns, #1451")]),a("li",[s._v("Added "),a("code",[s._v("row-dblclick")]),s._v(" event for Table, #1362")])]),a("h3",{attrs:{id:"1-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.3")]),a("p",[a("em",[s._v("2016-11-28")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("currentPage")]),s._v(" of Pagination not working in some cases, #1336")]),a("li",[s._v("Fixed "),a("code",[s._v("month")]),s._v(" and "),a("code",[s._v("disabledDate")]),s._v(" DatePicker's view not refreshing issue when switching year, #1158")]),a("li",[s._v("Fixed "),a("code",[s._v("readonly")]),s._v(" DatePicker clear button not disabled issue, #1238")]),a("li",[s._v("Fixed Slider not working when binding value is "),a("code",[s._v("NaN")]),s._v(" or "),a("code",[s._v("step")]),s._v(" is smaller than 1, #1239 #1282")]),a("li",[s._v("Added multi-header for Table, #1312")]),a("li",[s._v("Added "),a("code",[s._v("rowStyle")]),s._v(" for Table, #1348")]),a("li",[s._v("Fixed some attributes of TableColumn can not dynamically assigned issue, #1314")]),a("li",[s._v("Added "),a("code",[s._v("filter-node-method")]),s._v(" attribute and "),a("code",[s._v("filter")]),s._v(" method for Tree, #1257")]),a("li",[s._v("Added "),a("code",[s._v("getCheckedKeys")]),s._v(" and "),a("code",[s._v("setCheckedKeys")]),s._v(" methods for Tree, #1254")]),a("li",[s._v("Added deep nesting support for Checkbox/Radio inside Checkbox/Radio Group, #1152")]),a("li",[s._v("Fixed Popper not triggering destroy issue when keep-alive, #1359")]),a("li",[s._v("Added object deep validation for Form, #1363")]),a("li",[s._v("Added "),a("code",[s._v("append")]),s._v(" and "),a("code",[s._v("prepend")]),s._v(" for Autocomplete, #1369")]),a("li",[s._v("Added dynamic "),a("code",[s._v("pageSizes")]),s._v(" support for Pagination, #1372")]),a("li",[s._v("Added custom style API for checked buttons in Radio Button, #1380")]),a("li",[s._v("Added assigning title via slot for Menu Group, #1382")]),a("li",[s._v("Fixed DatePicker year switching bug, #1385")]),a("li",[s._v("Added uploaded file list API for Upload, #1393")]),a("li",[s._v("Added multi-type support for "),a("code",[s._v("label")]),s._v(" attribute of Checkbox, #1400")]),a("li",[s._v("Added "),a("code",[s._v("setChecked")]),s._v(" method for Tree, #1422")])]),a("h3",{attrs:{id:"1-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.2")]),a("p",[a("em",[s._v("2016-11-18")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("context")]),s._v(" for Table to specify which context to access inside of table columns, #1161")]),a("li",[s._v("Added multiple languages")]),a("li",[s._v("Fixed language's dynamic switching issue, #1160")]),a("li",[s._v("Added "),a("code",[s._v("render-content")]),s._v(" for Alert, #568")]),a("li",[s._v("Added styles for focused Button, #982")]),a("li",[s._v("Fixed "),a("code",[s._v("change")]),s._v(" triggering timing in Switch, #1162")]),a("li",[s._v("Fixed TimeSelect being disabled when start time is set to "),a("code",[s._v("00:00")]),s._v(", #676")]),a("li",[s._v("Added "),a("code",[s._v("show-header")]),s._v(" attribute and "),a("code",[s._v("header-click")]),s._v(" method for Table, #1195")]),a("li",[s._v("Improved "),a("code",[s._v("height")]),s._v(" attribute for Table when set to a string, #1195")]),a("li",[s._v("Fixed "),a("code",[s._v("selection-change")]),s._v(" of Table not triggering in some cases, #1198")]),a("li",[s._v("Fixed Table's fixed columns not disappear when "),a("code",[s._v("fixed")]),s._v(" attribute is dynamically changed, #1182")])]),a("h3",{attrs:{id:"1-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.1")]),a("p",[a("em",[s._v("2016-11-16")])]),a("ul",[a("li",[s._v("Fixed Pagination improperly triggering multiple "),a("code",[s._v("current-change")]),s._v(" events")]),a("li",[s._v("Fixed Switch style when nested in a Form, #967")]),a("li",[s._v("Fixed Loading locks scroll of "),a("code",[s._v("body")]),s._v(" in specific scenarios, #968")]),a("li",[a("code",[s._v("span")]),s._v(" of Col is no longer a required attribute, and its default value is "),a("code",[s._v("24")]),s._v(" if omitted")]),a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" and "),a("code",[s._v("editable")]),s._v(" attribute for DatePicker, #976")]),a("li",[s._v("Fixed DatePicker readonly with native behavior, #976")]),a("li",[s._v("Added "),a("code",[s._v("close")]),s._v(" method for Message and Notification to manually close an instance")]),a("li",[s._v("Added clear value feature for DatePicker, #759")]),a("li",[s._v("Fixed Form reports an error when resetting a Date typed field, #937")]),a("li",[s._v("Fixed Table render error using vue-loader 9.9.0")]),a("li",[s._v("Added "),a("code",[s._v("align-center")]),s._v(" attribute for Step, #994")]),a("li",[s._v("Fixed Upload missing Progress component, #1013")]),a("li",[s._v("Layout now supports responsive layout")]),a("li",[s._v("Added "),a("code",[s._v("show-close")]),s._v(" for Dialog")]),a("li",[s._v("Fixed an error when "),a("code",[s._v("vue-i18n")]),s._v(" is imported but not configured, #973")]),a("li",[s._v("Fixed DatePicker not refresh view with an initial value, #1050")]),a("li",[s._v("Fixed DiatePicker not refresh year when switched in month picker, #1070")]),a("li",[s._v("Added $loading service")]),a("li",[s._v("Added "),a("code",[s._v("manual")]),s._v(" trigger in Popover")]),a("li",[s._v("Added props: "),a("code",[s._v("nodeKey")]),s._v(", "),a("code",[s._v("emptyText")]),s._v(", "),a("code",[s._v("checkStrictly")]),s._v(", "),a("code",[s._v("defaultExpandAll")]),s._v(", "),a("code",[s._v("autoExpandParent")]),s._v(", "),a("code",[s._v("defaultCheckedKeys")]),s._v(", "),a("code",[s._v("defaultExpandedKeys")]),s._v(" and method: "),a("code",[s._v("setCheckedNodes")]),s._v(" for Tree")])]),a("h3",{ -attrs:{id:"1-0-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0")]),a("p",[a("em",[s._v("2016-11-9")])]),a("p",[s._v("Element 1.0.0 released.")])])}]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-changelog"},[a("div",{staticClass:"heading"},[a("el-button",{staticClass:"fr"},[a("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[s._v("Github Releases")])]),s._v("\n Changelog\n ")],1),a("ul",{ref:"timeline",staticClass:"timeline"}),a("change-log",{ref:"changeLog"})],1)},staticRenderFns:[]}},function(s,t,a){function l(s){a(95)}var e=a(13)(a(97),a(98),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(96);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("1449c0e3",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".page-component{padding-bottom:95px;box-sizing:border-box}.page-component .content{margin-left:-1px}.page-component .content>h3{margin:45px 0 15px}.page-component .content>table{border-collapse:collapse;width:100%;background-color:#fff;color:#5e6d82;font-size:14px;margin-bottom:45px;line-height:1.5em}.page-component .content>table strong{font-weight:400}.page-component .content>table th{text-align:left;border-top:1px solid #eaeefb;background-color:#eff2f7;white-space:nowrap}.page-component .content>table td,.page-component .content>table th{border-bottom:1px solid #eaeefb;padding:10px;max-width:250px}.page-component .content>table td:first-child,.page-component .content>table th:first-child{padding-left:10px}.page-component .page-component-up{background-color:#58b7ff;position:fixed;right:100px;bottom:150px;width:50px;height:50px;border-radius:25px;cursor:pointer;opacity:.4;transition:.3s}.page-component .page-component-up i{color:#fff;display:block;line-height:50px;text-align:center;font-size:22px}.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}",""])},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var e=a(24),n=l(e),i=a(42),v=l(i);t.default={data:function(){return{lang:this.$route.meta.lang,navsData:n.default,hover:!1,showBackToTop:!1}},methods:{toTop:function(){this.hover=!1,this.showBackToTop=!1,document.body.scrollTop=0,document.documentElement.scrollTop=0},handleScroll:function(){this.showBackToTop=(document.body.scrollTop||document.documentElement.scrollTop)>=.5*document.body.clientHeight}},mounted:function(){this.throttledScrollHandler=(0,v.default)(300,this.handleScroll),document.addEventListener("scroll",this.throttledScrollHandler)},beforeDestroy:function(){document.removeEventListener("scroll",this.throttledScrollHandler)}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-component"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:6}},[a("side-nav",{attrs:{data:s.navsData[s.lang],base:"/"+s.lang+"/component"}})],1),a("el-col",{attrs:{xs:24,sm:18}},[a("router-view",{staticClass:"content"}),a("footer-nav")],1)],1),a("transition",{attrs:{name:"back-top-fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:s.hover},on:{mouseenter:function(t){s.hover=!0},mouseleave:function(t){s.hover=!1},click:s.toTop}},[a("i",{staticClass:"el-icon-caret-top"})])])],1)},staticRenderFns:[]}},function(s,t,a){function l(s){a(100)}var e=a(13)(null,a(102),l,"data-v-f413aa2a",null);s.exports=e.exports},function(s,t,a){var l=a(101);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("b501f028",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".cards[data-v-f413aa2a]{margin:30px 0 70px}.card[data-v-f413aa2a]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-f413aa2a]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-f413aa2a]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-f413aa2a]{font-size:14px;color:#99a9bf}",""])},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("Design Disciplines")]),l("el-row",{staticClass:"cards",attrs:{gutter:14}},[l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(48),alt:"Consistency"}}),l("h4",[s._v("Consistency")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(49),alt:"Feedback"}}),l("h4",[s._v("Feedback")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(50),alt:"Efficiency"}}),l("h4",[s._v("Efficiency")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(51),alt:"Controllability"}}),l("h4",[s._v("Controllability")]),l("span")])])],1),l("h3",[s._v("Consistency")]),s._m(0),l("h3",[s._v("Feedback")]),s._m(1),l("h3",[s._v("Efficiency")]),s._m(2),l("h3",[s._v("Controllability")]),s._m(3)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Consistent with real life: ")]),s._v("in line with the process and logic of real life, and comply with languages and habits that the users are used to.")]),a("li",[a("strong",[s._v("Consistent within interface: ")]),s._v("all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Operation feedback: ")]),s._v("enable the users to clearly perceive their operations by style updates and interactive effects.")]),a("li",[a("strong",[s._v("Visual feedback: ")]),s._v("reflect current state by updating or rearranging elements of the page.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Simplify the process: ")]),s._v("keep operating process simple and intuitive.")]),a("li",[a("strong",[s._v("Definite and clear: ")]),s._v("enunciate your intentions clearly so that the users can quickly understand and make decisions.")]),a("li",[a("strong",[s._v("Easy to identify: ")]),s._v("the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Decision making: ")]),s._v("giving advices about operations is acceptable, but do not make decisions for the users.")]),a("li",[a("strong",[s._v("Controlled consequences: ")]),s._v("users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])}]}},function(s,t,a){function l(s){a(104)}var e=a(13)(a(106),a(107),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(105);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("74bf6d0c",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.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 strong{color:#5e6d82;font-weight:400}.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}@media (max-width:768px){.page-guide .content{padding-left:0}}',""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Design Disciplines"},{path:"/nav",name:"Navigation"}]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-guide"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:5}},[a("side-nav",{attrs:{data:s.navsData,base:"/"+s.lang+"/guide"}})],1),a("el-col",{attrs:{xs:24,sm:19}},[a("router-view",{staticClass:"content"})],1)],1)],1)},staticRenderFns:[]}},function(s,t,a){function l(s){a(109)}var e=a(13)(a(111),a(112),l,"data-v-05bad635",null);s.exports=e.exports},function(s,t,a){var l=a(110);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("8d2aac02",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.cards .container[data-v-05bad635]:after,.cards .container[data-v-05bad635]:before{display:table;content:""}.cards .container[data-v-05bad635]:after{clear:both}.actor[data-v-05bad635]{min-height:65px}.actor[data-v-05bad635]:after{content:"";width:6px;height:50px;vertical-align:-8px;margin-left:5px;background-color:#fff;display:inline-block;animation:blink .4s infinite alternate}.banner[data-v-05bad635]{position:relative;height:420px;color:#fff;margin-bottom:130px}.banner .container[data-v-05bad635]{position:relative}.banner img[data-v-05bad635]{position:absolute;top:15px;right:-10px}.banner-sky[data-v-05bad635]{position:absolute;top:-150px;bottom:-15px;width:100%;margin-top:-140px;transform:skewY(-5deg);transform-origin:center;background-image:linear-gradient(180deg,#0d1a44 13%,#3c4f91 56%,#5fc1e4)}img.banner-stars[data-v-05bad635]{top:-10px;left:50%;transform:translateX(-50%)}.banner-desc[data-v-05bad635]{padding-top:110px;padding-left:30px;font-size:42px;position:relative;z-index:10}.banner-desc h2[data-v-05bad635]{font-size:50px;margin:0;color:#fff}.banner-desc p[data-v-05bad635]{font-size:14px;opacity:.8;width:420px;line-height:1.6;padding-left:3px}.cards[data-v-05bad635]{margin:0 auto 110px;width:1140px}.cards .container[data-v-05bad635]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-05bad635]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-05bad635]{width:160px;height:120px}.card[data-v-05bad635]{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-05bad635]{margin:66px auto 60px}.card h3[data-v-05bad635]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-05bad635]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:1.6}.card a[data-v-05bad635]{height:53px;line-height:52px;font-size:14px;color:#20a0ff;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-05bad635]:hover{color:#fff;background:#20a0ff}.card[data-v-05bad635]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@keyframes blink{0%{opacity:0}to{opacity:1}}@media (max-width:1140px){.cards .container[data-v-05bad635],.cards[data-v-05bad635]{width:100%}.banner .container[data-v-05bad635]{width:100%;box-sizing:border-box}.banner img[data-v-05bad635]{right:0}}@media (max-width:1000px){.banner .container img[data-v-05bad635]{display:none}}@media (max-width:768px){.cards li[data-v-05bad635]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-05bad635]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-05bad635],.banner-stars[data-v-05bad635]{display:none}.banner-desc h2[data-v-05bad635]{font-size:32px}.banner-desc p[data-v-05bad635]{width:auto}}',""])},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var e=a(61),n=l(e);t.default={mounted:function(){function s(t){t.addScene("product designers",1800,-17,800).addScene("UI designers",1800,-12,800).addScene("UX designers",1800,-12,800).addScene("product managers",1800,-16,800).addScene("FE developers",1800,-13,800).addScene(function(a){s(t),a()})}var t=(0,n.default)({maxSpeed:100});t.on("type:start, erase:start",function(){t.getCurrentActor().$element.classList.add("typing")}).on("type:end, erase:end",function(){t.getCurrentActor().$element.classList.remove("typing")}),t.addActor("line2",{speed:1,accuracy:1}).addScene(2600).addScene("line2:For ",500).addScene(function(a){s(t),a()})}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[s._m(0),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(64),alt:""}}),l("h3",[s._v("Guide")]),l("p",[s._v("Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/guide/design",exact:""}},[s._v("View Detail\n ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(65),alt:""}}),l("h3",[s._v("Component")]),l("p",[s._v("Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/component/layout",exact:""}},[s._v("View Detail\n ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(66),alt:""}}),l("h3",[s._v("Resource")]),l("p",[s._v("Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/resource",exact:""}},[s._v("View Detail\n ")])],1)])])])])},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"banner"},[l("div",{staticClass:"banner-sky"}),l("img",{staticClass:"banner-stars",attrs:{src:a(67),alt:"Element"}}),l("div",{staticClass:"container"},[l("div",{staticClass:"banner-desc"},[l("h2",[s._v("A Desktop UI Library")]),l("div",{staticClass:"actor",attrs:{id:"line2"}}),l("p",[s._v("Element, a Vue 2.0 based component library for developers, designers and product managers")])]),l("img",{attrs:{src:a(68),alt:"Element"}})])])}]}},function(s,t,a){function l(s){a(114)}var e=a(13)(a(116),a(117),l,"data-v-d0518674",null);s.exports=e.exports},function(s,t,a){var l=a(115);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("23d8d63a",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,"h3[data-v-d0518674]{margin-bottom:15px}.block[data-v-d0518674]{margin-bottom:55px}p[data-v-d0518674]{margin:0 0 15px}.nav-demos p[data-v-d0518674]{margin-bottom:50px}.nav-demos h5[data-v-d0518674]{margin:0}.nav-demos img[data-v-d0518674]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-d0518674]{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-d0518674]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-d0518674]{display:block;width:100%}.mask[data-v-d0518674]{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-d0518674],.zoom-leave-active[data-v-d0518674]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-d0518674],.zoom-leave-active[data-v-d0518674]{transform:scale(.3);opacity:0}.fade-enter-active[data-v-d0518674],.fade-leave-active[data-v-d0518674]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-d0518674],.fade-leave-active[data-v-d0518674]{opacity:0}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(s){document.body.style.overflow=s?"hidden":""}},methods:{enlarge:function(s,t){var a=t.target,l={},e=document;l.left=(e.body.scrollWidth-s)/2,l.top=100,this.imgUrl=a.src,this.imgBound=a.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=s+"px",this.showDialog=!0}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("Navigation")]),s._m(0),s._m(1),l("div",{staticClass:"block"},[l("h3",[s._v("Side Navigation")]),l("el-row",{attrs:{gutter:20}},[l("el-col",{attrs:{span:9}},[l("p",[s._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.")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:15}},[l("img",{attrs:{src:a(74),alt:"Level 1 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 1 categories")]),l("p",[s._v("Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.")]),l("img",{attrs:{src:a(75),alt:"Level 2 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 2 categories")]),l("p",[s._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.")]),l("img",{attrs:{src:a(76),alt:"Level 3 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 3 categories")]),l("p",[s._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),l("div",{staticClass:"block"},[l("h3",[s._v("Top Navigation")]),l("el-row",[l("el-col",{attrs:{span:10}},[l("p",[s._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.")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:14}},[l("img",{attrs:{src:a(77),alt:""},on:{click:function(t){s.enlarge(846,t)}}}),l("p",[s._v("Suitable for sites with few navigations and large chunks.")])])],1)],1),l("transition",{attrs:{name:"fade"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){s.showDialog=!1}}})]),l("transition",{attrs:{name:"zoom"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:s.imgWrapStyle,on:{click:function(t){s.showDialog=!1}}},[l("div",{staticClass:"imgWrap",style:s.imgStyle},[l("img",{attrs:{src:s.imgUrl,alt:""}})])])])],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("p",[s._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 s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("h3",[s._v("Choose the right navigation")]),a("p",[s._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")])])}]}},function(s,t,a){function l(s){a(119)}var e=a(13)(null,a(121),l,"data-v-bc99180a",null);s.exports=e.exports},function(s,t,a){var l=a(120);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("e1a146d4",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.cards .container[data-v-bc99180a]:after,.cards .container[data-v-bc99180a]:before{display:table;content:""}.cards .container[data-v-bc99180a]:after{clear:both}.page-resource[data-v-bc99180a]{padding-top:55px;box-sizing:border-box}.cards[data-v-bc99180a]{margin:35px auto 110px}.cards .container[data-v-bc99180a]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-bc99180a]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-bc99180a]{font-size:28px;margin:0}p[data-v-bc99180a]{font-size:14px;color:#5e6d82}.card[data-v-bc99180a]{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-bc99180a]{margin:75px auto 35px;height:87px}.card h3[data-v-bc99180a]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-bc99180a]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;line-height:1.6}.card a[data-v-bc99180a]{height:42px;width:190px;display:inline-block;line-height:42px;font-size:14px;background-color:#20a0ff;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-bc99180a]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-bc99180a]{height:auto;padding-bottom:20px}.cards h3[data-v-bc99180a]{height:auto}}',""])},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"page-container page-resource"},[l("h2",[s._v("Resource")]),l("p",[s._v("Here you can download design resources and tools that shaped Element UI. More design resources are being prepared.")]),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(82),alt:""}}),l("h3",[s._v("Axure Components")]),l("p",[s._v("By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"}},[s._v("Download")])])]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(83),alt:""}}),l("h3",[s._v("Sketch Template")]),l("p",[s._v("Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch"}},[s._v("Download")])])]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(84),alt:""}}),l("h3",[s._v("Interaction Design Documentation")]),l("p",[s._v("Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"}},[s._v("Download")])])])])])])}]}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t,a){s.exports=a.p+"static/hamburger.50e4091.png"},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t){"use strict";t.__esModule=!0;var a=t.hasClass=function(s,t){return s.className.match(new RegExp("(\\s|^)"+t+"(\\s|$)"))},l=t.addClass=function(s,t){a(s,t)||(s.className+=" "+t)},e=t.removeClass=function(s,t){if(a(s,t)){var l=new RegExp("(\\s|^)"+t+"(\\s|$)");s.className=s.className.replace(l," ")}};t.toggleClass=function(s,t){a(s,t)?e(s,t):l(s,t)}},,,,,,,,,,,,function(s,t){s.exports=["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload2","view"]},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t,a){function l(s){return a(e(s))}function e(s){return n[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var n={"./en-US/alert.md":393,"./en-US/badge.md":399,"./en-US/breadcrumb.md":404,"./en-US/button.md":407,"./en-US/card.md":413,"./en-US/carousel.md":419,"./en-US/cascader.md":425,"./en-US/checkbox.md":431,"./en-US/collapse.md":435,"./en-US/color-picker.md":441,"./en-US/color.md":447,"./en-US/custom-theme.md":452,"./en-US/date-picker.md":455,"./en-US/datetime-picker.md":461,"./en-US/dialog.md":467,"./en-US/dropdown.md":473,"./en-US/form.md":479,"./en-US/home.md":485,"./en-US/i18n.md":489,"./en-US/icon.md":492,"./en-US/input-number.md":498,"./en-US/input.md":504,"./en-US/installation.md":510,"./en-US/layout.md":513,"./en-US/loading.md":518,"./en-US/menu.md":524,"./en-US/message-box.md":530,"./en-US/message.md":534,"./en-US/notification.md":538,"./en-US/pagination.md":542,"./en-US/popover.md":548,"./en-US/progress.md":554,"./en-US/quickstart.md":557,"./en-US/radio.md":560,"./en-US/rate.md":564,"./en-US/select.md":570,"./en-US/slider.md":576,"./en-US/steps.md":580,"./en-US/switch.md":584,"./en-US/table.md":590,"./en-US/tabs.md":596,"./en-US/tag.md":600,"./en-US/time-picker.md":606,"./en-US/tooltip.md":612,"./en-US/transfer.md":618,"./en-US/transition.md":624,"./en-US/tree.md":630,"./en-US/typography.md":636,"./en-US/upload.md":641};l.keys=function(){return Object.keys(n)},l.resolve=e,s.exports=l,l.id=392},function(s,t,a){s.exports=a(394)},function(s,t,a){function l(s){a(395)}var e=a(13)(a(397),a(398),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(396);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("6b366dbe",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-alert .el-alert{margin:20px 0 0}.demo-box.demo-alert .el-alert:first-child{margin:0}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{hello:function(){alert("Hello World!")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays important alert messages.")]),s._m(1),a("p",[s._v("Alert components are non-overlay elements in the page that does not disappear automatically.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success"}}),a("el-alert",{attrs:{title:"info alert",type:"info"}}),a("el-alert",{attrs:{title:"warning alert",type:"warning"}}),a("el-alert",{attrs:{title:"error alert",type:"error"}})]],2),a("p",[s._v("Alert provides 4 types of themes defined by "),a("code",[s._v("type")]),s._v(", whose default value is "),a("code",[s._v("info")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Customize the close button as texts or other symbols.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n hello() {\n alert('Hello World!');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),a("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),a("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:s.hello}})]],2),a("p",[s._v("Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. "),a("code",[s._v("closable")]),s._v(" attribute decides if the component can be closed or not. It accepts "),a("code",[s._v("boolean")]),s._v(", and the default is "),a("code",[s._v("true")]),s._v(". You can set "),a("code",[s._v("close-text")]),s._v(" attribute to replace the default cross symbol as the close button. Be careful that "),a("code",[s._v("close-text")]),s._v(" must be a string. "),a("code",[s._v("close")]),s._v(" event fires when the component is closed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"unclosable alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag" -},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"customized close-text"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("close-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Gotcha"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"alert with callback"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hello"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n hello() {\n alert("),a("span",{staticClass:"hljs-string"},[s._v("'Hello World!'")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displaying an icon improves readability.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2),a("p",[s._v("Setting the "),a("code",[s._v("show-icon")]),s._v(" attribute displays an icon that corresponds with the current Alert type.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Description includes a message with more detailed information.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2),a("p",[s._v("Besides the required "),a("code",[s._v("title")]),s._v(" attribute, you can add a "),a("code",[s._v("description")]),s._v(" attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"with description"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"This is a description."')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2),a("p",[s._v("At last, this is an example with both icon and description.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizable-close-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizable-close-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizable close button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" With icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" With description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-icon-and-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-icon-and-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" With icon and description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("title")])]),a("td",[s._v("title "),a("strong",[s._v("REQUIRED")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("component type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("descriptive text. Can also be passed with the default slot")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("if closable or not")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-text")]),a("td",[s._v("customized close button text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-icon")]),a("td",[s._v("if a type icon is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("fires when alert is closed")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(400)},function(s,t,a){function l(s){a(401)}var e=a(13)(null,a(403),l,"data-v-39800af8",null);s.exports=e.exports},function(s,t,a){var l=a(402);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("1d99a05c",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.clearfix[data-v-39800af8]:after,.clearfix[data-v-39800af8]:before{display:table;content:""}.clearfix[data-v-39800af8]:after{clear:both}.share-button[data-v-39800af8]{width:36px;padding:10px}.mark[data-v-39800af8]{margin-top:8px;line-height:1;float:right}.item[data-v-39800af8]{margin-right:40px}',""])},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("A number or status mark on buttons and icons.")]),s._m(1),a("p",[s._v("Displays the amount of new messages.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n \n Click Me\n \n \n \n comments\n \n \n \n replies\n \n \n \n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Click Me"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n comments\n "),a("el-badge",{staticClass:"mark",attrs:{value:12}})],1),a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n replies\n "),a("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1),a("p",[s._v("The amount is defined with "),a("code",[s._v("value")]),s._v(" which accepts "),a("code",[s._v("Number")]),s._v(" or "),a("code",[s._v("String")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n comments\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" />")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n replies\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" />")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize the max value.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("The max value is defined by property "),a("code",[s._v("max")]),s._v(" which is a "),a("code",[s._v("Number")]),s._v(". Note that it only works when "),a("code",[s._v("value")]),s._v(" is also a "),a("code",[s._v("Number")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"99"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displays text content other than numbers.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:"new"}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:"hot"}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("When "),a("code",[s._v("value")]),s._v(" is a "),a("code",[s._v("String")]),s._v(", it can display customized text.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"new"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hot"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Use a red dot to mark content that needs to be noticed.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'query\n\n \n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[s._v("query")]),a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[a("el-button",{staticClass:"share-button",attrs:{icon:"share",type:"primary"}})],1)],1),a("p",[s._v("Use the attribute "),a("code",[s._v("is-dot")]),s._v(". It is a "),a("code",[s._v("Boolean")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string" -},[s._v('"item"')]),s._v(">")]),s._v("query"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share-button"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"badge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[s._v("¶")]),s._v(" Badge")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"max-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#max-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" Max value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"little-red-dot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#little-red-dot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Little red dot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("display value")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum value, shows '{max}+' when exceeded. Only works if "),a("code",[s._v("value")]),s._v(" is a "),a("code",[s._v("Number")])]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("is-dot")]),a("td",[s._v("if a little dot is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hidden")]),a("td",[s._v("hidden badge")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(405)},function(s,t,a){var l=a(13)(null,a(406),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays the location of the current page, making it easier to browser back.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n homepage\n promotion management\n promotion list\n promotion detail\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-breadcrumb",{attrs:{separator:"/"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("homepage")]),a("el-breadcrumb-item",[s._v("promotion management")]),a("el-breadcrumb-item",[s._v("promotion list")]),a("el-breadcrumb-item",[s._v("promotion detail")])],1)],1),a("p",[s._v("In "),a("code",[s._v("el-breadcrumb")]),s._v(", each "),a("code",[s._v("el-breadcrumb-item")]),s._v(" is a tag that stands for every level starting from homepage. This component has a "),a("code",[s._v("String")]),s._v(" attribute "),a("code",[s._v("separator")]),s._v(", and it determines the separator. Its default value is '/'.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("separator")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"/"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":to")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("homepage"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion management"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion list"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion detail"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"breadcrumb"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("separator")]),a("td",[s._v("separator character")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("/")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("to")]),a("td",[s._v("target route of the link, same as "),a("code",[s._v("to")]),s._v(" of "),a("code",[s._v("vue-router")])]),a("td",[s._v("string/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("replace")]),a("td",[s._v("if "),a("code",[s._v("true")]),s._v(", the navigation will not leave a history record")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(408)},function(s,t,a){function l(s){a(409)}var e=a(13)(a(411),a(412),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(410);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("7588c803",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-button .el-row{margin-bottom:10px}.demo-box.demo-button .el-button+.el-button{margin-left:10px}.demo-box.demo-button .el-button-group{margin-bottom:20px}.demo-box.demo-button .el-button-group .el-button+.el-button{margin-left:0}.demo-box.demo-button .el-button-group+.el-button-group{margin-left:10px}.demo-box.demo-button .intro-block{padding:0}.demo-button .intro-block .block{padding:30px 24px;overflow:hidden;border-bottom:1px solid #eff2f6}.demo-button .intro-block .block:last-child{border-bottom:none}.demo-button .intro-block .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-button .intro-block .wrapper{float:right;margin-right:20px}",""])},function(s,t,a){"use strict";t.__esModule=!0;var l=a(144);t.default={data:function(){return{isLoading:!1,isLoading2:!1}},methods:{handleClick:function(s){console.log(s),alert("button clicked!")}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[2];(0,l.addClass)(t,"intro-block")})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Commonly used button.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Default Button\nPrimary Button\nText Button\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",[s._v("Default Button")]),a("el-button",{attrs:{type:"primary"}},[s._v("Primary Button")]),a("el-button",{attrs:{type:"text"}},[s._v("Text Button")])],1),a("p",[s._v("Button provides 7 themes defined by the "),a("code",[s._v("type")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Default Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Primary Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(">")]),s._v("Text Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Default Button\nPrimary Button\nText Button\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{plain:!0,disabled:!0}},[s._v("Default Button")]),a("el-button",{attrs:{type:"primary",disabled:""}},[s._v("Primary Button")]),a("el-button",{attrs:{type:"text",disabled:""}},[s._v("Text Button")])],1),a("p",[s._v("Use "),a("code",[s._v("disabled")]),s._v(" attribute to determine whether a button is disabled. It accepts a "),a("code",[s._v("Boolean")]),s._v(" value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("Default Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Primary Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Text Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Different colors represent different meanings.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n \n Success\n Warning\n Danger\n Info\n \n
    \n
    \n Hover to display color\n \n Success\n Warning\n Danger\n Info\n \n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{type:"success"}},[s._v("Success")]),a("el-button",{attrs:{type:"warning"}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger"}},[s._v("Danger")]),a("el-button",{attrs:{type:"info"}},[s._v("Info")])],1)]),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Hover to display color")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{plain:!0,type:"success"}},[s._v("Success")]),a("el-button",{attrs:{plain:!0,type:"warning"}},[s._v("Warning")]),a("el-button",{attrs:{plain:!0,type:"danger"}},[s._v("Danger")]),a("el-button",{attrs:{plain:!0,type:"info"}},[s._v("Info")])],1)])]),a("p",[s._v("Use "),a("code",[s._v("plain")]),s._v(" attribute to create a plain button, and it accepts a "),a("code",[s._v("Boolean")]),s._v(" value. You can assign different "),a("code",[s._v("type")]),s._v(" to a plain button as mentioned above. "),a("strong",[s._v("Note")]),s._v(": When using the plain button, you still can set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("text")]),s._v(", but it makes no difference. A plain button will be styled like a "),a("code",[s._v("text button")]),s._v(" by default.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Hover to display color"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Use icons to add more meaning to Button. You can use icon alone to save some space, or with text together.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\nSearch\nUpload\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}}),a("el-button",{attrs:{type:"primary",icon:"search"}},[s._v("Search")]),a("el-button",{attrs:{type:"primary"}},[s._v("Upload"),a("i",{staticClass:"el-icon-upload el-icon-right"})])],1),a("p",[s._v("Use the "),a("code",[s._v("icon")]),s._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 "),a("code",[s._v("")]),s._v(" tag. Custom icons can be used as well.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("Search"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Upload"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload el-icon-right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Displayed as a button group, can be used to group a series of similar operations.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Previous Page\n Next Page\n\n\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"arrow-left"}},[s._v("Previous Page")]),a("el-button",{attrs:{type:"primary"}},[s._v("Next Page"),a("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}})],1)],1),a("p",[s._v("Use tag "),a("code",[s._v("")]),s._v(" to group your buttons.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"arrow-left"')]),s._v(">")]),s._v("Previous Page"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Next Page"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-arrow-right el-icon-right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Click the button to load data, then the button displays a loading state.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Loading\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{ -attrs:{type:"primary",loading:!0}},[s._v("Loading")])],1),a("p",[s._v("Set "),a("code",[s._v("loading")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" to display loading state.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("Loading"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Besides default size, Button component provides three additional sizes for you to choose among different scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Large Button\nDefault Button\nSmall Button\nMini Button\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",size:"large"}},[s._v("Large Button")]),a("el-button",{attrs:{type:"primary"}},[s._v("Default Button")]),a("el-button",{attrs:{type:"primary",size:"small"}},[s._v("Small Button")]),a("el-button",{attrs:{type:"primary",size:"mini"}},[s._v("Mini Button")])],1),a("p",[s._v("Use attribute "),a("code",[s._v("size")]),s._v(" to set additional sizes with "),a("code",[s._v("large")]),s._v(", "),a("code",[s._v("small")]),s._v(" or "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(">")]),s._v("Large Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Default Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Small Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(">")]),s._v("Mini Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("disableds")]),s._v(" attribute determines if the button is disabled.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"color-indication"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-indication","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color Indication")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icon-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button Group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("button size")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("button type")]),a("td",[s._v("string")]),a("td",[s._v("primary/success/warning/danger/info/text")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("plain")]),a("td",[s._v("determine whether it's a plain button")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("determine whether it's loading")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("disable the button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("button icon, accepts an icon name of Element icon component")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("same as native button's "),a("code",[s._v("autofocus")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("native-type")]),a("td",[s._v("same as native button's "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("button/submit/reset")]),a("td",[s._v("button")])])])])}]}},function(s,t,a){s.exports=a(414)},function(s,t,a){function l(s){a(415)}var e=a(13)(a(417),a(418),l,"data-v-13d5050c",null);s.exports=e.exports},function(s,t,a){var l=a(416);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("2fd01cac",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.clearfix[data-v-13d5050c]:after,.clearfix[data-v-13d5050c]:before{display:table;content:""}.clearfix[data-v-13d5050c]:after{clear:both}.text[data-v-13d5050c]{font-size:14px}.time[data-v-13d5050c]{font-size:13px;color:#999}.bottom[data-v-13d5050c]{margin-top:13px;line-height:12px}.item[data-v-13d5050c]{padding:18px 0}.button[data-v-13d5050c]{padding:0;float:right}.image[data-v-13d5050c]{width:100%;display:block}.box-card[data-v-13d5050c]{width:480px}',""])},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var e=a(151),n=l(e);t.default={data:function(){return{currentDate:n.default.format(new Date,"yyyy-MM-dd HH:mm")}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("section",[s._m(0),l("p",[s._v("Integrate information in a card container.")]),s._m(1),l("p",[s._v("Card includes title, content and operations.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n Card name\n Operation button\n
    \n
    \n {{\'List item \' + o }}\n
    \n    \n\n\n',script:null,style:'\n .text {\n font-size: 14px;\n }\n\n .item {\n padding: 18px 0;\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'}}},[l("div",{staticClass:"source",slot:"source"},[l("el-card",{staticClass:"box-card"},[l("div",{staticClass:"clearfix",slot:"header"},[l("span",{staticStyle:{"line-height":"36px"}},[s._v("Card name")]),l("el-button",{staticStyle:{float:"right"},attrs:{type:"primary"}},[s._v("Operation button")])],1),s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n "+s._s("List item "+t)+"\n ")])})],2)],1),l("p",[s._v("Card is made up of "),l("code",[s._v("header")]),s._v(" and "),l("code",[s._v("body")]),s._v(". "),l("code",[s._v("header")]),s._v(" is optional, and its content distribution depends on a named slot.")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"header"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"line-height: 36px;"')]),s._v(">")]),s._v("Card name"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"float: right;"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Operation button"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n "),l("span",[s._v("{{")]),s._v("'List item ' + o "),l("span",[s._v("}}")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n }\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),l("p",[s._v("The header part can be omitted.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n {{\'List item \' + o }}\n
    \n    \n\n\n',script:null,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"}}},[l("div",{staticClass:"source",slot:"source"},[l("el-card",{staticClass:"box-card"},s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n "+s._s("List item "+t)+"\n ")])}))],1),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n "),l("span",[s._v("{{")]),s._v("'List item ' + o "),l("span",[s._v("}}")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),l("p",[s._v("Display richer content by adding some configs.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n
    \n Yummy hamburger\n
    \n \n Operating button\n
    \n
    \n     \n     \n    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n currentDate: new Date()\n };\n }\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'}}},[l("div",{staticClass:"source",slot:"source"},[l("el-row",s._l(2,function(t,e){return l("el-col",{key:t,attrs:{span:8,offset:e>0?2:0}},[l("el-card",{attrs:{"body-style":{padding:"0px"}}},[l("img",{staticClass:"image",attrs:{src:a(153)}}),l("div",{staticStyle:{padding:"14px"}},[l("span",[s._v("Yummy hamburger")]),l("div",{staticClass:"bottom clearfix"},[l("time",{staticClass:"time"},[s._v(s._s(s.currentDate))]),l("el-button",{staticClass:"button",attrs:{type:"text"}},[s._v("Operating button")])],1)])])],1)}))],1),l("p",[s._v("The "),l("code",[s._v("body-style")]),s._v(" attribute defines CSS style of custom "),l("code",[s._v("body")]),s._v(". This example also uses "),l("code",[s._v("el-col")]),s._v(" for layout.")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"(o, index) in 2"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"index > 0 ? 2 : 0"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":body-style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v("\"{ padding: '0px' }\"")]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"~examples/assets/images/hamburger.png"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"image"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"padding: 14px;"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Yummy hamburger"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"bottom clearfix"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),l("span",[s._v("{{")]),s._v(" currentDate "),l("span",[s._v("}}")]),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"button"')]),s._v(">")]),s._v("Operating button"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".time")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n "),l("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("#999")]),s._v(";\n }\n \n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".bottom")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n "),l("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".button")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n "),l("span",{staticClass:"hljs-attribute"},[s._v("float")]),s._v(": right;\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".image")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("100%")]),s._v(";\n "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n }\n \n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),l("span",{staticClass:"javascript"},[s._v("\n"),l("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),l("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),l("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),l("span",{staticClass:"hljs-attr"},[s._v("currentDate")]),s._v(": "),l("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),l("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("()\n };\n }\n}\n")]),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"simple-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#simple-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Simple card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-images"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-images","aria-hidden":"true"}},[s._v("¶")]),s._v(" With images")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("header")]),a("td",[s._v("Title of the card. Also accepts a DOM passed by "),a("code",[s._v("slot#header")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("body-style")]),a("td",[s._v("CSS style of body")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{ padding: '20px' }")])])])])}]}},function(s,t,a){s.exports=a(420)},function(s,t,a){function l(s){a(421)}var e=a(13)(a(423),a(424),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(422);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("ed5f34a2",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-carousel .block{padding:30px;text-align:center;border-right:1px solid #eff2f6;float:left;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(2n+1){background-color:#d3dce6}.demo-carousel .small h3{font-size:14px;line-height:150px}.demo-carousel .medium h3{font-size:14px;line-height:200px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[0].className+=" small",s[3].className+=" medium"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Loop a series of images or texts in a limited space")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Switch when indicator is hovered (default)")]),a("el-carousel",{attrs:{height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Switch when indicator is clicked")]),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1)]],2),a("p",[s._v("Combine "),a("code",[s._v("el-carousel")]),s._v(" with "),a("code",[s._v("el-carousel-item")]),s._v(", and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside "),a("code",[s._v("el-carousel-item")]),s._v(" tag. By default the carousel switches when mouse hovers over an indicator. Set "),a("code",[s._v("trigger")]),s._v(" to "),a("code",[s._v("click")]),s._v(", and the carousel switches only when an indicator is clicked.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string" -},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is hovered (default)"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is clicked"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("150px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Indicators can be displayed outside the carousel")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-carousel",{attrs:{"indicator-position":"outside"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("The "),a("code",[s._v("indicator-position")]),s._v(" attribute determines where the indicators are located. By default they are inside the carousel, and setting "),a("code",[s._v("indicator-position")]),s._v(" to "),a("code",[s._v("outside")]),s._v(" moves them outside; setting "),a("code",[s._v("indicator-position")]),s._v(" to "),a("code",[s._v("none")]),s._v(" hides the indicators.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("indicator-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"outside"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can define when arrows are displayed")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("The "),a("code",[s._v("arrow")]),s._v(" attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting "),a("code",[s._v("arrow")]),s._v(" to "),a("code",[s._v("always")]),s._v(" or "),a("code",[s._v("never")]),s._v(" shows/hides the arrows permanently.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"5000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("arrow")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"always"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("When a page is wide enough but has limited height, you can activate card mode for carousels")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},s._l(6,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("Setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("card")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"carousel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indicators"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indicators","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indicators")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arrows"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arrows","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arrows")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("height of the carousel")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("initial-index")]),a("td",[s._v("index of the initially active slide (starting from 0)")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how indicators are triggered")]),a("td",[s._v("string")]),a("td",[s._v("hover/click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("autoplay")]),a("td",[s._v("whether automatically loop the slides")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("interval")]),a("td",[s._v("interval of the auto loop, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("indicator-position")]),a("td",[s._v("position of the indicators")]),a("td",[s._v("string")]),a("td",[s._v("outside/none")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("arrow")]),a("td",[s._v("when arrows are shown")]),a("td",[s._v("string")]),a("td",[s._v("always/hover/never")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the Carousel")]),a("td",[s._v("string")]),a("td",[s._v("card")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the active slide switches")]),a("td",[s._v("index of the new active slide, index of the old active slide")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("setActiveItem")]),a("td",[s._v("manually switch slide")]),a("td",[s._v("index of the slide to be switched to, starting from 0; or the "),a("code",[s._v("name")]),s._v(" of corresponding "),a("code",[s._v("el-carousel-item")])])]),a("tr",[a("td",[s._v("prev")]),a("td",[s._v("switch to the previous slide")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next")]),a("td",[s._v("switch to the next slide")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("name of the item, can be used in "),a("code",[s._v("setActiveItem")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("text content for the corresponding indicator")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(426)},function(s,t,a){function l(s){a(427)}var e=a(13)(a(429),a(430),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(428);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("7b3496a0",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-cascader .el-cascader{width:222px}.demo-cascader-size .el-cascader{vertical-align:top;margin-right:15px}.demo-cascader .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;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}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"},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"}]}],optionsWithDisabled:[],selectedOptions:[],selectedOptions2:[],selectedOptions3:["component","data","tag"]}},created:function(){this.optionsWithDisabled=JSON.parse(JSON.stringify(this.options)),this.optionsWithDisabled[0].disabled=!0},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[s.length-1].style.padding="0"})},methods:{handleItemChange:function(s){var t=this;console.log("active item:",s),setTimeout(function(a){s.indexOf("California")>-1&&!t.options2[0].cities.length?t.options2[0].cities=[{label:"Los Angeles"}]:s.indexOf("Florida")>-1&&!t.options2[1].cities.length&&(t.options2[1].cities=[{label:"Orlando"}])},300)},handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("If the options have a clear hierarchical structure, Cascader can be used to view and select them.")]),s._m(1),a("p",[s._v("There are two ways to expand child option items.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Child options expand when clicked (default)\n \n \n
    \n
    \n Child options expand when hovered\n \n \n
    \n\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", +attrs:{id:"1-0-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0")]),a("p",[a("em",[s._v("2016-11-9")])]),a("p",[s._v("Element 1.0.0 released.")])])}]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-changelog"},[a("div",{staticClass:"heading"},[a("el-button",{staticClass:"fr"},[a("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[s._v("Github Releases")])]),s._v("\n Changelog\n ")],1),a("ul",{ref:"timeline",staticClass:"timeline"}),a("change-log",{ref:"changeLog"})],1)},staticRenderFns:[]}},function(s,t,a){function l(s){a(95)}var e=a(13)(a(97),a(98),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(96);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("f3a1ce7a",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".page-component{padding-bottom:95px;box-sizing:border-box}.page-component .content{margin-left:-1px}.page-component .content>h3{margin:45px 0 15px}.page-component .content>table{border-collapse:collapse;width:100%;background-color:#fff;color:#5e6d82;font-size:14px;margin-bottom:45px;line-height:1.5em}.page-component .content>table strong{font-weight:400}.page-component .content>table th{text-align:left;border-top:1px solid #eaeefb;background-color:#eff2f7;white-space:nowrap}.page-component .content>table td,.page-component .content>table th{border-bottom:1px solid #eaeefb;padding:10px;max-width:250px}.page-component .content>table td:first-child,.page-component .content>table th:first-child{padding-left:10px}.page-component .page-component-up{background-color:#58b7ff;position:fixed;right:100px;bottom:150px;width:50px;height:50px;border-radius:25px;cursor:pointer;opacity:.4;transition:.3s}.page-component .page-component-up i{color:#fff;display:block;line-height:50px;text-align:center;font-size:22px}.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}",""])},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var e=a(24),n=l(e),i=a(42),v=l(i);t.default={data:function(){return{lang:this.$route.meta.lang,navsData:n.default,hover:!1,showBackToTop:!1}},methods:{toTop:function(){this.hover=!1,this.showBackToTop=!1,document.body.scrollTop=0,document.documentElement.scrollTop=0},handleScroll:function(){this.showBackToTop=(document.body.scrollTop||document.documentElement.scrollTop)>=.5*document.body.clientHeight}},mounted:function(){this.throttledScrollHandler=(0,v.default)(300,this.handleScroll),document.addEventListener("scroll",this.throttledScrollHandler)},beforeDestroy:function(){document.removeEventListener("scroll",this.throttledScrollHandler)}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-component"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:6}},[a("side-nav",{attrs:{data:s.navsData[s.lang],base:"/"+s.lang+"/component"}})],1),a("el-col",{attrs:{xs:24,sm:18}},[a("router-view",{staticClass:"content"}),a("footer-nav")],1)],1),a("transition",{attrs:{name:"back-top-fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:s.hover},on:{mouseenter:function(t){s.hover=!0},mouseleave:function(t){s.hover=!1},click:s.toTop}},[a("i",{staticClass:"el-icon-caret-top"})])])],1)},staticRenderFns:[]}},function(s,t,a){function l(s){a(100)}var e=a(13)(null,a(102),l,"data-v-4191270f",null);s.exports=e.exports},function(s,t,a){var l=a(101);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("02601d3d",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".cards[data-v-4191270f]{margin:30px 0 70px}.card[data-v-4191270f]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-4191270f]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-4191270f]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-4191270f]{font-size:14px;color:#99a9bf}",""])},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("Design Disciplines")]),l("el-row",{staticClass:"cards",attrs:{gutter:14}},[l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(48),alt:"Consistency"}}),l("h4",[s._v("Consistency")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(49),alt:"Feedback"}}),l("h4",[s._v("Feedback")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(50),alt:"Efficiency"}}),l("h4",[s._v("Efficiency")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(51),alt:"Controllability"}}),l("h4",[s._v("Controllability")]),l("span")])])],1),l("h3",[s._v("Consistency")]),s._m(0),l("h3",[s._v("Feedback")]),s._m(1),l("h3",[s._v("Efficiency")]),s._m(2),l("h3",[s._v("Controllability")]),s._m(3)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Consistent with real life: ")]),s._v("in line with the process and logic of real life, and comply with languages and habits that the users are used to.")]),a("li",[a("strong",[s._v("Consistent within interface: ")]),s._v("all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Operation feedback: ")]),s._v("enable the users to clearly perceive their operations by style updates and interactive effects.")]),a("li",[a("strong",[s._v("Visual feedback: ")]),s._v("reflect current state by updating or rearranging elements of the page.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Simplify the process: ")]),s._v("keep operating process simple and intuitive.")]),a("li",[a("strong",[s._v("Definite and clear: ")]),s._v("enunciate your intentions clearly so that the users can quickly understand and make decisions.")]),a("li",[a("strong",[s._v("Easy to identify: ")]),s._v("the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Decision making: ")]),s._v("giving advices about operations is acceptable, but do not make decisions for the users.")]),a("li",[a("strong",[s._v("Controlled consequences: ")]),s._v("users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])}]}},function(s,t,a){function l(s){a(104)}var e=a(13)(a(106),a(107),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(105);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("32b80c51",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.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 strong{color:#5e6d82;font-weight:400}.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}@media (max-width:768px){.page-guide .content{padding-left:0}}',""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Design Disciplines"},{path:"/nav",name:"Navigation"}]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-guide"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:5}},[a("side-nav",{attrs:{data:s.navsData,base:"/"+s.lang+"/guide"}})],1),a("el-col",{attrs:{xs:24,sm:19}},[a("router-view",{staticClass:"content"})],1)],1)],1)},staticRenderFns:[]}},function(s,t,a){function l(s){a(109)}var e=a(13)(a(111),a(112),l,"data-v-3b0474de",null);s.exports=e.exports},function(s,t,a){var l=a(110);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("21e784a6",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.cards .container[data-v-3b0474de]:after,.cards .container[data-v-3b0474de]:before{display:table;content:""}.cards .container[data-v-3b0474de]:after{clear:both}.actor[data-v-3b0474de]{min-height:65px}.actor[data-v-3b0474de]:after{content:"";width:6px;height:50px;vertical-align:-8px;margin-left:5px;background-color:#fff;display:inline-block;animation:blink .4s infinite alternate}.banner[data-v-3b0474de]{position:relative;height:420px;color:#fff;margin-bottom:130px}.banner .container[data-v-3b0474de]{position:relative}.banner img[data-v-3b0474de]{position:absolute;top:15px;right:-10px}.banner-sky[data-v-3b0474de]{position:absolute;top:-150px;bottom:-15px;width:100%;margin-top:-140px;transform:skewY(-5deg);transform-origin:center;background-image:linear-gradient(180deg,#0d1a44 13%,#3c4f91 56%,#5fc1e4)}img.banner-stars[data-v-3b0474de]{top:-10px;left:50%;transform:translateX(-50%)}.banner-desc[data-v-3b0474de]{padding-top:110px;padding-left:30px;font-size:42px;position:relative;z-index:10}.banner-desc h2[data-v-3b0474de]{font-size:50px;margin:0;color:#fff}.banner-desc p[data-v-3b0474de]{font-size:14px;opacity:.8;width:420px;line-height:1.6;padding-left:3px}.cards[data-v-3b0474de]{margin:0 auto 110px;width:1140px}.cards .container[data-v-3b0474de]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-3b0474de]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-3b0474de]{width:160px;height:120px}.card[data-v-3b0474de]{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-3b0474de]{margin:66px auto 60px}.card h3[data-v-3b0474de]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-3b0474de]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:1.6}.card a[data-v-3b0474de]{height:53px;line-height:52px;font-size:14px;color:#20a0ff;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-3b0474de]:hover{color:#fff;background:#20a0ff}.card[data-v-3b0474de]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@keyframes blink{0%{opacity:0}to{opacity:1}}@media (max-width:1140px){.cards .container[data-v-3b0474de],.cards[data-v-3b0474de]{width:100%}.banner .container[data-v-3b0474de]{width:100%;box-sizing:border-box}.banner img[data-v-3b0474de]{right:0}}@media (max-width:1000px){.banner .container img[data-v-3b0474de]{display:none}}@media (max-width:768px){.cards li[data-v-3b0474de]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-3b0474de]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-3b0474de],.banner-stars[data-v-3b0474de]{display:none}.banner-desc h2[data-v-3b0474de]{font-size:32px}.banner-desc p[data-v-3b0474de]{width:auto}}',""])},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var e=a(61),n=l(e);t.default={mounted:function(){function s(t){t.addScene("product designers",1800,-17,800).addScene("UI designers",1800,-12,800).addScene("UX designers",1800,-12,800).addScene("product managers",1800,-16,800).addScene("FE developers",1800,-13,800).addScene(function(a){s(t),a()})}var t=(0,n.default)({maxSpeed:100});t.on("type:start, erase:start",function(){t.getCurrentActor().$element.classList.add("typing")}).on("type:end, erase:end",function(){t.getCurrentActor().$element.classList.remove("typing")}),t.addActor("line2",{speed:1,accuracy:1}).addScene(2600).addScene("line2:For ",500).addScene(function(a){s(t),a()})}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[s._m(0),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(64),alt:""}}),l("h3",[s._v("Guide")]),l("p",[s._v("Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/guide/design",exact:""}},[s._v("View Detail\n ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(65),alt:""}}),l("h3",[s._v("Component")]),l("p",[s._v("Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/component/layout",exact:""}},[s._v("View Detail\n ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(66),alt:""}}),l("h3",[s._v("Resource")]),l("p",[s._v("Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/resource",exact:""}},[s._v("View Detail\n ")])],1)])])])])},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"banner"},[l("div",{staticClass:"banner-sky"}),l("img",{staticClass:"banner-stars",attrs:{src:a(67),alt:"Element"}}),l("div",{staticClass:"container"},[l("div",{staticClass:"banner-desc"},[l("h2",[s._v("A Desktop UI Library")]),l("div",{staticClass:"actor",attrs:{id:"line2"}}),l("p",[s._v("Element, a Vue 2.0 based component library for developers, designers and product managers")])]),l("img",{attrs:{src:a(68),alt:"Element"}})])])}]}},function(s,t,a){function l(s){a(114)}var e=a(13)(a(116),a(117),l,"data-v-77f359bc",null);s.exports=e.exports},function(s,t,a){var l=a(115);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("694652b4",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,"h3[data-v-77f359bc]{margin-bottom:15px}.block[data-v-77f359bc]{margin-bottom:55px}p[data-v-77f359bc]{margin:0 0 15px}.nav-demos p[data-v-77f359bc]{margin-bottom:50px}.nav-demos h5[data-v-77f359bc]{margin:0}.nav-demos img[data-v-77f359bc]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-77f359bc]{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-77f359bc]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-77f359bc]{display:block;width:100%}.mask[data-v-77f359bc]{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-77f359bc],.zoom-leave-active[data-v-77f359bc]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-77f359bc],.zoom-leave-active[data-v-77f359bc]{transform:scale(.3);opacity:0}.fade-enter-active[data-v-77f359bc],.fade-leave-active[data-v-77f359bc]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-77f359bc],.fade-leave-active[data-v-77f359bc]{opacity:0}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(s){document.body.style.overflow=s?"hidden":""}},methods:{enlarge:function(s,t){var a=t.target,l={},e=document;l.left=(e.body.scrollWidth-s)/2,l.top=100,this.imgUrl=a.src,this.imgBound=a.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=s+"px",this.showDialog=!0}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("Navigation")]),s._m(0),s._m(1),l("div",{staticClass:"block"},[l("h3",[s._v("Side Navigation")]),l("el-row",{attrs:{gutter:20}},[l("el-col",{attrs:{span:9}},[l("p",[s._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.")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:15}},[l("img",{attrs:{src:a(74),alt:"Level 1 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 1 categories")]),l("p",[s._v("Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.")]),l("img",{attrs:{src:a(75),alt:"Level 2 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 2 categories")]),l("p",[s._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.")]),l("img",{attrs:{src:a(76),alt:"Level 3 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 3 categories")]),l("p",[s._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),l("div",{staticClass:"block"},[l("h3",[s._v("Top Navigation")]),l("el-row",[l("el-col",{attrs:{span:10}},[l("p",[s._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.")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:14}},[l("img",{attrs:{src:a(77),alt:""},on:{click:function(t){s.enlarge(846,t)}}}),l("p",[s._v("Suitable for sites with few navigations and large chunks.")])])],1)],1),l("transition",{attrs:{name:"fade"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){s.showDialog=!1}}})]),l("transition",{attrs:{name:"zoom"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:s.imgWrapStyle,on:{click:function(t){s.showDialog=!1}}},[l("div",{staticClass:"imgWrap",style:s.imgStyle},[l("img",{attrs:{src:s.imgUrl,alt:""}})])])])],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("p",[s._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 s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("h3",[s._v("Choose the right navigation")]),a("p",[s._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")])])}]}},function(s,t,a){function l(s){a(119)}var e=a(13)(null,a(121),l,"data-v-3b0011c2",null);s.exports=e.exports},function(s,t,a){var l=a(120);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("3be909bb",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.cards .container[data-v-3b0011c2]:after,.cards .container[data-v-3b0011c2]:before{display:table;content:""}.cards .container[data-v-3b0011c2]:after{clear:both}.page-resource[data-v-3b0011c2]{padding-top:55px;box-sizing:border-box}.cards[data-v-3b0011c2]{margin:35px auto 110px}.cards .container[data-v-3b0011c2]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-3b0011c2]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-3b0011c2]{font-size:28px;margin:0}p[data-v-3b0011c2]{font-size:14px;color:#5e6d82}.card[data-v-3b0011c2]{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-3b0011c2]{margin:75px auto 35px;height:87px}.card h3[data-v-3b0011c2]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-3b0011c2]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;line-height:1.6}.card a[data-v-3b0011c2]{height:42px;width:190px;display:inline-block;line-height:42px;font-size:14px;background-color:#20a0ff;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-3b0011c2]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-3b0011c2]{height:auto;padding-bottom:20px}.cards h3[data-v-3b0011c2]{height:auto}}',""])},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"page-container page-resource"},[l("h2",[s._v("Resource")]),l("p",[s._v("Here you can download design resources and tools that shaped Element UI. More design resources are being prepared.")]),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(82),alt:""}}),l("h3",[s._v("Axure Components")]),l("p",[s._v("By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/1.x/Element_Components_v1.1.0.rplib"}},[s._v("Download")])])]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(83),alt:""}}),l("h3",[s._v("Sketch Template")]),l("p",[s._v("Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/1.x/Element%20UI%20Kit_v1.3.sketch"}},[s._v("Download")])])]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(84),alt:""}}),l("h3",[s._v("Interaction Design Documentation")]),l("p",[s._v("Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/1.x/Element%20Components%20Documentation.zip"}},[s._v("Download")])])])])])])}]}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t,a){s.exports=a.p+"static/hamburger.50e4091.png"},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t){"use strict";t.__esModule=!0;var a=t.hasClass=function(s,t){return s.className.match(new RegExp("(\\s|^)"+t+"(\\s|$)"))},l=t.addClass=function(s,t){a(s,t)||(s.className+=" "+t)},e=t.removeClass=function(s,t){if(a(s,t)){var l=new RegExp("(\\s|^)"+t+"(\\s|$)");s.className=s.className.replace(l," ")}};t.toggleClass=function(s,t){a(s,t)?e(s,t):l(s,t)}},,,,,,,,,,,,function(s,t){s.exports=["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload2","view"]},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t,a){function l(s){return a(e(s))}function e(s){return n[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var n={"./en-US/alert.md":393,"./en-US/badge.md":399,"./en-US/breadcrumb.md":404,"./en-US/button.md":407,"./en-US/card.md":413,"./en-US/carousel.md":419,"./en-US/cascader.md":425,"./en-US/checkbox.md":431,"./en-US/collapse.md":435,"./en-US/color-picker.md":441,"./en-US/color.md":447,"./en-US/custom-theme.md":452,"./en-US/date-picker.md":455,"./en-US/datetime-picker.md":461,"./en-US/dialog.md":467,"./en-US/dropdown.md":473,"./en-US/form.md":479,"./en-US/home.md":485,"./en-US/i18n.md":489,"./en-US/icon.md":492,"./en-US/input-number.md":498,"./en-US/input.md":504,"./en-US/installation.md":510,"./en-US/layout.md":513,"./en-US/loading.md":518,"./en-US/menu.md":524,"./en-US/message-box.md":530,"./en-US/message.md":534,"./en-US/notification.md":538,"./en-US/pagination.md":542,"./en-US/popover.md":548,"./en-US/progress.md":554,"./en-US/quickstart.md":557,"./en-US/radio.md":560,"./en-US/rate.md":564,"./en-US/select.md":570,"./en-US/slider.md":576,"./en-US/steps.md":580,"./en-US/switch.md":584,"./en-US/table.md":590,"./en-US/tabs.md":596,"./en-US/tag.md":600,"./en-US/time-picker.md":606,"./en-US/tooltip.md":612,"./en-US/transfer.md":618,"./en-US/transition.md":624,"./en-US/tree.md":630,"./en-US/typography.md":636,"./en-US/upload.md":641};l.keys=function(){return Object.keys(n)},l.resolve=e,s.exports=l,l.id=392},function(s,t,a){s.exports=a(394)},function(s,t,a){function l(s){a(395)}var e=a(13)(a(397),a(398),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(396);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("c6700b8a",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-alert .el-alert{margin:20px 0 0}.demo-box.demo-alert .el-alert:first-child{margin:0}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{hello:function(){alert("Hello World!")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays important alert messages.")]),s._m(1),a("p",[s._v("Alert components are non-overlay elements in the page that does not disappear automatically.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success"}}),a("el-alert",{attrs:{title:"info alert",type:"info"}}),a("el-alert",{attrs:{title:"warning alert",type:"warning"}}),a("el-alert",{attrs:{title:"error alert",type:"error"}})]],2),a("p",[s._v("Alert provides 4 types of themes defined by "),a("code",[s._v("type")]),s._v(", whose default value is "),a("code",[s._v("info")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Customize the close button as texts or other symbols.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n hello() {\n alert('Hello World!');\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),a("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),a("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:s.hello}})]],2),a("p",[s._v("Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. "),a("code",[s._v("closable")]),s._v(" attribute decides if the component can be closed or not. It accepts "),a("code",[s._v("boolean")]),s._v(", and the default is "),a("code",[s._v("true")]),s._v(". You can set "),a("code",[s._v("close-text")]),s._v(" attribute to replace the default cross symbol as the close button. Be careful that "),a("code",[s._v("close-text")]),s._v(" must be a string. "),a("code",[s._v("close")]),s._v(" event fires when the component is closed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"unclosable alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{ +staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"customized close-text"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("close-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Gotcha"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"alert with callback"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hello"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n hello() {\n alert("),a("span",{staticClass:"hljs-string"},[s._v("'Hello World!'")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displaying an icon improves readability.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2),a("p",[s._v("Setting the "),a("code",[s._v("show-icon")]),s._v(" attribute displays an icon that corresponds with the current Alert type.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Description includes a message with more detailed information.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2),a("p",[s._v("Besides the required "),a("code",[s._v("title")]),s._v(" attribute, you can add a "),a("code",[s._v("description")]),s._v(" attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"with description"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"This is a description."')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2),a("p",[s._v("At last, this is an example with both icon and description.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizable-close-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizable-close-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizable close button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" With icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" With description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-icon-and-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-icon-and-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" With icon and description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("title")])]),a("td",[s._v("title "),a("strong",[s._v("REQUIRED")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("component type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("descriptive text. Can also be passed with the default slot")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("if closable or not")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-text")]),a("td",[s._v("customized close button text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-icon")]),a("td",[s._v("if a type icon is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("fires when alert is closed")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(400)},function(s,t,a){function l(s){a(401)}var e=a(13)(null,a(403),l,"data-v-30a8cd54",null);s.exports=e.exports},function(s,t,a){var l=a(402);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("275c720f",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.clearfix[data-v-30a8cd54]:after,.clearfix[data-v-30a8cd54]:before{display:table;content:""}.clearfix[data-v-30a8cd54]:after{clear:both}.share-button[data-v-30a8cd54]{width:36px;padding:10px}.mark[data-v-30a8cd54]{margin-top:8px;line-height:1;float:right}.item[data-v-30a8cd54]{margin-right:40px}',""])},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("A number or status mark on buttons and icons.")]),s._m(1),a("p",[s._v("Displays the amount of new messages.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n \n Click Me\n \n \n \n comments\n \n \n \n replies\n \n \n \n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Click Me"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n comments\n "),a("el-badge",{staticClass:"mark",attrs:{value:12}})],1),a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n replies\n "),a("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1),a("p",[s._v("The amount is defined with "),a("code",[s._v("value")]),s._v(" which accepts "),a("code",[s._v("Number")]),s._v(" or "),a("code",[s._v("String")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n comments\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" />")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n replies\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" />")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize the max value.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("The max value is defined by property "),a("code",[s._v("max")]),s._v(" which is a "),a("code",[s._v("Number")]),s._v(". Note that it only works when "),a("code",[s._v("value")]),s._v(" is also a "),a("code",[s._v("Number")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"99"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displays text content other than numbers.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n comments\n\n\n replies\n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:"new"}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:"hot"}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("When "),a("code",[s._v("value")]),s._v(" is a "),a("code",[s._v("String")]),s._v(", it can display customized text.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"new"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hot"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Use a red dot to mark content that needs to be noticed.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'query\n\n \n\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[s._v("query")]),a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[a("el-button",{staticClass:"share-button",attrs:{icon:"share",type:"primary"}})],1)],1),a("p",[s._v("Use the attribute "),a("code",[s._v("is-dot")]),s._v(". It is a "),a("code",[s._v("Boolean")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("query"),a("span",{ +staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share-button"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"badge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[s._v("¶")]),s._v(" Badge")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"max-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#max-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" Max value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"little-red-dot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#little-red-dot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Little red dot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("display value")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum value, shows '{max}+' when exceeded. Only works if "),a("code",[s._v("value")]),s._v(" is a "),a("code",[s._v("Number")])]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("is-dot")]),a("td",[s._v("if a little dot is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hidden")]),a("td",[s._v("hidden badge")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(405)},function(s,t,a){var l=a(13)(null,a(406),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays the location of the current page, making it easier to browser back.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n homepage\n promotion management\n promotion list\n promotion detail\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-breadcrumb",{attrs:{separator:"/"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("homepage")]),a("el-breadcrumb-item",[s._v("promotion management")]),a("el-breadcrumb-item",[s._v("promotion list")]),a("el-breadcrumb-item",[s._v("promotion detail")])],1)],1),a("p",[s._v("In "),a("code",[s._v("el-breadcrumb")]),s._v(", each "),a("code",[s._v("el-breadcrumb-item")]),s._v(" is a tag that stands for every level starting from homepage. This component has a "),a("code",[s._v("String")]),s._v(" attribute "),a("code",[s._v("separator")]),s._v(", and it determines the separator. Its default value is '/'.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("separator")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"/"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":to")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("homepage"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion management"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion list"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion detail"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"breadcrumb"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("separator")]),a("td",[s._v("separator character")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("/")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("to")]),a("td",[s._v("target route of the link, same as "),a("code",[s._v("to")]),s._v(" of "),a("code",[s._v("vue-router")])]),a("td",[s._v("string/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("replace")]),a("td",[s._v("if "),a("code",[s._v("true")]),s._v(", the navigation will not leave a history record")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(408)},function(s,t,a){function l(s){a(409)}var e=a(13)(a(411),a(412),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(410);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("74309a35",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-button .el-row{margin-bottom:10px}.demo-box.demo-button .el-button+.el-button{margin-left:10px}.demo-box.demo-button .el-button-group{margin-bottom:20px}.demo-box.demo-button .el-button-group .el-button+.el-button{margin-left:0}.demo-box.demo-button .el-button-group+.el-button-group{margin-left:10px}.demo-box.demo-button .intro-block{padding:0}.demo-button .intro-block .block{padding:30px 24px;overflow:hidden;border-bottom:1px solid #eff2f6}.demo-button .intro-block .block:last-child{border-bottom:none}.demo-button .intro-block .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-button .intro-block .wrapper{float:right;margin-right:20px}",""])},function(s,t,a){"use strict";t.__esModule=!0;var l=a(144);t.default={data:function(){return{isLoading:!1,isLoading2:!1}},methods:{handleClick:function(s){console.log(s),alert("button clicked!")}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[2];(0,l.addClass)(t,"intro-block")})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Commonly used button.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Default Button\nPrimary Button\nText Button\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",[s._v("Default Button")]),a("el-button",{attrs:{type:"primary"}},[s._v("Primary Button")]),a("el-button",{attrs:{type:"text"}},[s._v("Text Button")])],1),a("p",[s._v("Button provides 7 themes defined by the "),a("code",[s._v("type")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Default Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Primary Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(">")]),s._v("Text Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Default Button\nPrimary Button\nText Button\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{plain:!0,disabled:!0}},[s._v("Default Button")]),a("el-button",{attrs:{type:"primary",disabled:""}},[s._v("Primary Button")]),a("el-button",{attrs:{type:"text",disabled:""}},[s._v("Text Button")])],1),a("p",[s._v("Use "),a("code",[s._v("disabled")]),s._v(" attribute to determine whether a button is disabled. It accepts a "),a("code",[s._v("Boolean")]),s._v(" value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("Default Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Primary Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Text Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Different colors represent different meanings.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n \n Success\n Warning\n Danger\n Info\n \n
    \n
    \n Hover to display color\n \n Success\n Warning\n Danger\n Info\n \n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{type:"success"}},[s._v("Success")]),a("el-button",{attrs:{type:"warning"}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger"}},[s._v("Danger")]),a("el-button",{attrs:{type:"info"}},[s._v("Info")])],1)]),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Hover to display color")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{plain:!0,type:"success"}},[s._v("Success")]),a("el-button",{attrs:{plain:!0,type:"warning"}},[s._v("Warning")]),a("el-button",{attrs:{plain:!0,type:"danger"}},[s._v("Danger")]),a("el-button",{attrs:{plain:!0,type:"info"}},[s._v("Info")])],1)])]),a("p",[s._v("Use "),a("code",[s._v("plain")]),s._v(" attribute to create a plain button, and it accepts a "),a("code",[s._v("Boolean")]),s._v(" value. You can assign different "),a("code",[s._v("type")]),s._v(" to a plain button as mentioned above. "),a("strong",[s._v("Note")]),s._v(": When using the plain button, you still can set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("text")]),s._v(", but it makes no difference. A plain button will be styled like a "),a("code",[s._v("text button")]),s._v(" by default.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Hover to display color"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Use icons to add more meaning to Button. You can use icon alone to save some space, or with text together.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\nSearch\nUpload\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}}),a("el-button",{attrs:{type:"primary",icon:"search"}},[s._v("Search")]),a("el-button",{attrs:{type:"primary"}},[s._v("Upload"),a("i",{staticClass:"el-icon-upload el-icon-right"})])],1),a("p",[s._v("Use the "),a("code",[s._v("icon")]),s._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 "),a("code",[s._v("")]),s._v(" tag. Custom icons can be used as well.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("Search"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Upload"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload el-icon-right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Displayed as a button group, can be used to group a series of similar operations.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Previous Page\n Next Page\n\n\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"arrow-left"}},[s._v("Previous Page")]),a("el-button",{attrs:{type:"primary"}},[s._v("Next Page"),a("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}})],1)],1),a("p",[s._v("Use tag "),a("code",[s._v("")]),s._v(" to group your buttons.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"arrow-left"')]),s._v(">")]),s._v("Previous Page"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Next Page"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-arrow-right el-icon-right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Click the button to load data, then the button displays a loading state.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Loading\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",loading:!0}},[s._v("Loading")])],1),a("p",[s._v("Set "),a("code",[s._v("loading")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" to display loading state.")]),a("div",{ +staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("Loading"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Besides default size, Button component provides three additional sizes for you to choose among different scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Large Button\nDefault Button\nSmall Button\nMini Button\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",size:"large"}},[s._v("Large Button")]),a("el-button",{attrs:{type:"primary"}},[s._v("Default Button")]),a("el-button",{attrs:{type:"primary",size:"small"}},[s._v("Small Button")]),a("el-button",{attrs:{type:"primary",size:"mini"}},[s._v("Mini Button")])],1),a("p",[s._v("Use attribute "),a("code",[s._v("size")]),s._v(" to set additional sizes with "),a("code",[s._v("large")]),s._v(", "),a("code",[s._v("small")]),s._v(" or "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(">")]),s._v("Large Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Default Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Small Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(">")]),s._v("Mini Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("disableds")]),s._v(" attribute determines if the button is disabled.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"color-indication"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-indication","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color Indication")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icon-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button Group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("button size")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("button type")]),a("td",[s._v("string")]),a("td",[s._v("primary/success/warning/danger/info/text")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("plain")]),a("td",[s._v("determine whether it's a plain button")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("determine whether it's loading")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("disable the button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("button icon, accepts an icon name of Element icon component")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("same as native button's "),a("code",[s._v("autofocus")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("native-type")]),a("td",[s._v("same as native button's "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("button/submit/reset")]),a("td",[s._v("button")])])])])}]}},function(s,t,a){s.exports=a(414)},function(s,t,a){function l(s){a(415)}var e=a(13)(a(417),a(418),l,"data-v-37cee81d",null);s.exports=e.exports},function(s,t,a){var l=a(416);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("5aefe4cc",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.clearfix[data-v-37cee81d]:after,.clearfix[data-v-37cee81d]:before{display:table;content:""}.clearfix[data-v-37cee81d]:after{clear:both}.text[data-v-37cee81d]{font-size:14px}.time[data-v-37cee81d]{font-size:13px;color:#999}.bottom[data-v-37cee81d]{margin-top:13px;line-height:12px}.item[data-v-37cee81d]{padding:18px 0}.button[data-v-37cee81d]{padding:0;float:right}.image[data-v-37cee81d]{width:100%;display:block}.box-card[data-v-37cee81d]{width:480px}',""])},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var e=a(151),n=l(e);t.default={data:function(){return{currentDate:n.default.format(new Date,"yyyy-MM-dd HH:mm")}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("section",[s._m(0),l("p",[s._v("Integrate information in a card container.")]),s._m(1),l("p",[s._v("Card includes title, content and operations.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n Card name\n Operation button\n
    \n
    \n {{\'List item \' + o }}\n
    \n    \n\n\n',script:null,style:'\n .text {\n font-size: 14px;\n }\n\n .item {\n padding: 18px 0;\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'}}},[l("div",{staticClass:"source",slot:"source"},[l("el-card",{staticClass:"box-card"},[l("div",{staticClass:"clearfix",slot:"header"},[l("span",{staticStyle:{"line-height":"36px"}},[s._v("Card name")]),l("el-button",{staticStyle:{float:"right"},attrs:{type:"primary"}},[s._v("Operation button")])],1),s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n "+s._s("List item "+t)+"\n ")])})],2)],1),l("p",[s._v("Card is made up of "),l("code",[s._v("header")]),s._v(" and "),l("code",[s._v("body")]),s._v(". "),l("code",[s._v("header")]),s._v(" is optional, and its content distribution depends on a named slot.")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"header"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"line-height: 36px;"')]),s._v(">")]),s._v("Card name"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"float: right;"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Operation button"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n "),l("span",[s._v("{{")]),s._v("'List item ' + o "),l("span",[s._v("}}")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n }\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),l("p",[s._v("The header part can be omitted.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n {{\'List item \' + o }}\n
    \n    \n\n\n',script:null,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"}}},[l("div",{staticClass:"source",slot:"source"},[l("el-card",{staticClass:"box-card"},s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n "+s._s("List item "+t)+"\n ")])}))],1),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n "),l("span",[s._v("{{")]),s._v("'List item ' + o "),l("span",[s._v("}}")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),l("p",[s._v("Display richer content by adding some configs.")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n
    \n Yummy hamburger\n
    \n \n Operating button\n
    \n
    \n     \n     \n    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n currentDate: new Date()\n };\n }\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'}}},[l("div",{staticClass:"source",slot:"source"},[l("el-row",s._l(2,function(t,e){return l("el-col",{key:t,attrs:{span:8,offset:e>0?2:0}},[l("el-card",{attrs:{"body-style":{padding:"0px"}}},[l("img",{staticClass:"image",attrs:{src:a(153)}}),l("div",{staticStyle:{padding:"14px"}},[l("span",[s._v("Yummy hamburger")]),l("div",{staticClass:"bottom clearfix"},[l("time",{staticClass:"time"},[s._v(s._s(s.currentDate))]),l("el-button",{staticClass:"button",attrs:{type:"text"}},[s._v("Operating button")])],1)])])],1)}))],1),l("p",[s._v("The "),l("code",[s._v("body-style")]),s._v(" attribute defines CSS style of custom "),l("code",[s._v("body")]),s._v(". This example also uses "),l("code",[s._v("el-col")]),s._v(" for layout.")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"(o, index) in 2"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"index > 0 ? 2 : 0"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":body-style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v("\"{ padding: '0px' }\"")]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"~examples/assets/images/hamburger.png"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"image"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"padding: 14px;"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Yummy hamburger"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"bottom clearfix"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),l("span",[s._v("{{")]),s._v(" currentDate "),l("span",[s._v("}}")]),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"button"')]),s._v(">")]),s._v("Operating button"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".time")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n "),l("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("#999")]),s._v(";\n }\n \n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".bottom")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n "),l("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".button")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n "),l("span",{staticClass:"hljs-attribute"},[s._v("float")]),s._v(": right;\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".image")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("100%")]),s._v(";\n "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n }\n \n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),l("span",{staticClass:"javascript"},[s._v("\n"),l("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),l("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),l("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),l("span",{staticClass:"hljs-attr"},[s._v("currentDate")]),s._v(": "),l("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),l("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("()\n };\n }\n}\n")]),l("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"simple-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#simple-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Simple card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-images"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-images","aria-hidden":"true"}},[s._v("¶")]),s._v(" With images")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("header")]),a("td",[s._v("Title of the card. Also accepts a DOM passed by "),a("code",[s._v("slot#header")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("body-style")]),a("td",[s._v("CSS style of body")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{ padding: '20px' }")])])])])}]}},function(s,t,a){s.exports=a(420)},function(s,t,a){function l(s){a(421)}var e=a(13)(a(423),a(424),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(422);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("4849dd90",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-carousel .block{padding:30px;text-align:center;border-right:1px solid #eff2f6;float:left;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(2n+1){background-color:#d3dce6}.demo-carousel .small h3{font-size:14px;line-height:150px}.demo-carousel .medium h3{font-size:14px;line-height:200px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[0].className+=" small",s[3].className+=" medium"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Loop a series of images or texts in a limited space")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Switch when indicator is hovered (default)")]),a("el-carousel",{attrs:{height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Switch when indicator is clicked")]),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1)]],2),a("p",[s._v("Combine "),a("code",[s._v("el-carousel")]),s._v(" with "),a("code",[s._v("el-carousel-item")]),s._v(", and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside "),a("code",[s._v("el-carousel-item")]),s._v(" tag. By default the carousel switches when mouse hovers over an indicator. Set "),a("code",[s._v("trigger")]),s._v(" to "),a("code",[s._v("click")]),s._v(", and the carousel switches only when an indicator is clicked.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{ +staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is hovered (default)"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is clicked"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("150px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Indicators can be displayed outside the carousel")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-carousel",{attrs:{"indicator-position":"outside"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("The "),a("code",[s._v("indicator-position")]),s._v(" attribute determines where the indicators are located. By default they are inside the carousel, and setting "),a("code",[s._v("indicator-position")]),s._v(" to "),a("code",[s._v("outside")]),s._v(" moves them outside; setting "),a("code",[s._v("indicator-position")]),s._v(" to "),a("code",[s._v("none")]),s._v(" hides the indicators.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("indicator-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"outside"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can define when arrows are displayed")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("The "),a("code",[s._v("arrow")]),s._v(" attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting "),a("code",[s._v("arrow")]),s._v(" to "),a("code",[s._v("always")]),s._v(" or "),a("code",[s._v("never")]),s._v(" shows/hides the arrows permanently.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"5000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("arrow")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"always"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("When a page is wide enough but has limited height, you can activate card mode for carousels")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},s._l(6,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("Setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("card")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"carousel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indicators"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indicators","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indicators")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arrows"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arrows","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arrows")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("height of the carousel")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("initial-index")]),a("td",[s._v("index of the initially active slide (starting from 0)")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how indicators are triggered")]),a("td",[s._v("string")]),a("td",[s._v("hover/click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("autoplay")]),a("td",[s._v("whether automatically loop the slides")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("interval")]),a("td",[s._v("interval of the auto loop, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("indicator-position")]),a("td",[s._v("position of the indicators")]),a("td",[s._v("string")]),a("td",[s._v("outside/none")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("arrow")]),a("td",[s._v("when arrows are shown")]),a("td",[s._v("string")]),a("td",[s._v("always/hover/never")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the Carousel")]),a("td",[s._v("string")]),a("td",[s._v("card")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the active slide switches")]),a("td",[s._v("index of the new active slide, index of the old active slide")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("setActiveItem")]),a("td",[s._v("manually switch slide")]),a("td",[s._v("index of the slide to be switched to, starting from 0; or the "),a("code",[s._v("name")]),s._v(" of corresponding "),a("code",[s._v("el-carousel-item")])])]),a("tr",[a("td",[s._v("prev")]),a("td",[s._v("switch to the previous slide")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next")]),a("td",[s._v("switch to the next slide")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("name of the item, can be used in "),a("code",[s._v("setActiveItem")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("text content for the corresponding indicator")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(426)},function(s,t,a){function l(s){a(427)}var e=a(13)(a(429),a(430),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(428);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("6d18195c",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-cascader .el-cascader{width:222px}.demo-cascader-size .el-cascader{vertical-align:top;margin-right:15px}.demo-cascader .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;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}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{options2:[{label:"California",cities:[]},{label:"Florida",cities:[]}],props:{value:"label",children:"cities"},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"}]}],optionsWithDisabled:[],selectedOptions:[],selectedOptions2:[],selectedOptions3:["component","data","tag"]}},created:function(){this.optionsWithDisabled=JSON.parse(JSON.stringify(this.options)),this.optionsWithDisabled[0].disabled=!0},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[s.length-1].style.padding="0"})},methods:{handleItemChange:function(s){var t=this;console.log("active item:",s),setTimeout(function(a){s.indexOf("California")>-1&&!t.options2[0].cities.length?t.options2[0].cities=[{label:"Los Angeles"}]:s.indexOf("Florida")>-1&&!t.options2[1].cities.length&&(t.options2[1].cities=[{label:"Orlando"}])},300)},handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("If the options have a clear hierarchical structure, Cascader can be used to view and select them.")]),s._m(1),a("p",[s._v("There are two ways to expand child option items.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Child options expand when clicked (default)\n \n \n
    \n
    \n Child options expand when hovered\n \n \n
    \n\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", style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Child options expand when clicked (default)")]),a("el-cascader",{attrs:{options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions,callback:function(t){s.selectedOptions=t},expression:"selectedOptions"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Child options expand when hovered")]),a("el-cascader",{attrs:{"expand-trigger":"hover",options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions2,callback:function(t){s.selectedOptions2=t},expression:"selectedOptions2"}})],1)]),a("p",[s._v("Assigning the "),a("code",[s._v("options")]),s._v(" attribute to an array of options renders a Cascader. The "),a("code",[s._v("expand-trigger")]),s._v(" attribute defines how child options are expanded. This example also demonstrates the "),a("code",[s._v("change")]),s._v(" event, whose parameter is the value of Cascader, an array made up of the values of each selected level.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when clicked (default)"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when hovered"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("expand-trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions2")]),s._v(": []\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value);\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.optionsWithDisabled}})],1),a("p",[s._v("In this example, the first item in "),a("code",[s._v("options")]),s._v(" array has a "),a("code",[s._v("disabled: true")]),s._v(" field, so it is disabled. By default, Cascader checks the "),a("code",[s._v("disabled")]),s._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 "),a("code",[s._v("props")]),s._v(" attribute (see the API table below for details). And of course, field name "),a("code",[s._v("value")]),s._v(", "),a("code",[s._v("label")]),s._v(" and "),a("code",[s._v("children")]),s._v(" can also be customized in the same way.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"optionsWithDisabled"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name" },[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("optionsWithDisabled")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("The input can display only the last level instead of all levels.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"show-all-levels":!1}})],1),a("p",[s._v("The "),a("code",[s._v("show-all-levels")]),s._v(" attribute defines if all levels are displayed. If it is "),a("code",[s._v("false")]),s._v(", only the last level is displayed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":show-all-levels")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{ staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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 selectedOptions3: ['component', 'data', 'tag']\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options},model:{value:s.selectedOptions3,callback:function(t){s.selectedOptions3=t},expression:"selectedOptions3"}})],1),a("p",[s._v("The default value can be defined with an array.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions3"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{ staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions3")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v("]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Parent options can also be selected.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"change-on-select":""}})],1),a("p",[s._v("By default only the options in the last level can be selected. By assigning "),a("code",[s._v("change-on-select")]),s._v(" to "),a("code",[s._v("true")]),s._v(", options in parent levels can also be selected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{ staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Load child options when their parent option is clicked or hovered over.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options2,props:s.props},on:{"active-item-change":s.handleItemChange}})],1),a("p",[s._v("In this example, the options array does not have data of cities when initialized. With the "),a("code",[s._v("active-item-change")]),s._v(" event, you can load the cities of a specific state dynamically. Besides, this example also demonstrates how "),a("code",[s._v("props")]),s._v(" is used.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@active-item-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleItemChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": []\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Florida'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": []\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cities'")]),s._v("\n }\n };\n },\n\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleItemChange(val) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'active item:'")]),s._v(", val);\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities.length) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities = [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v("\n }];\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'Florida'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities.length) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities = [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Orlando'")]),s._v("\n }];\n }\n }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Search and select options with a keyword.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Only options of the last level can be selected\n \n
    \n
    \n Options of all levels can be selected\n \n
    \n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Only options of the last level can be selected")]),a("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:""}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Options of all levels can be selected")]),a("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:"","change-on-select":""}})],1)]),a("p",[s._v("Adding "),a("code",[s._v("filterable")]),s._v(" to "),a("code",[s._v("el-cascader")]),s._v(" enables filtering")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Only options of the last level can be selected"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Try searching: Guide"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n >")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Options of all levels can be selected"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Try searching: Guide"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n >")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{ staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n }]\n }]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"cascader"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cascader")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled option")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Disable an option by setting a "),a("code",[s._v("disabled")]),s._v(" field in the option object.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"display-only-the-last-level"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#display-only-the-last-level","aria-hidden":"true"}},[s._v("¶")]),s._v(" Display only the last level")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-default-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-default-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" With default value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"change-on-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Change on select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dynamically-load-child-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dynamically-load-child-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dynamically load child options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filterable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filterable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("options")]),a("td",[s._v("data of the options")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("selected value")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Cascader's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("input placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Select")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Cascader is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether selected value can be cleared")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-trigger")]),a("td",[s._v("trigger mode of expanding current item")]),a("td",[s._v("string")]),a("td",[s._v("click / hover")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("show-all-levels")]),a("td",[s._v("whether to display all levels of the selected value in the input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether the options can be searched")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing filter keyword, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("change-on-select")]),a("td",[s._v("whether selecting an option of any level is permitted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large / small / mini")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of option object is used as the option's label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("specify which key of option object is used as the option's value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("specify which key of option object is used as the option's child options")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("specify which key of option object indicates if the option is disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-filter")]),a("td",[s._v("hook function before filtering with the value to be filtered as its parameter. If "),a("code",[s._v("false")]),s._v(" is returned or a "),a("code",[s._v("Promise")]),s._v(" is returned and then is rejected, filtering will be aborted")]),a("td",[s._v("function(value)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("active-item-change")]),a("td",[s._v("triggers when active option changes, only works when "),a("code",[s._v("change-on-select")]),s._v(" is "),a("code",[s._v("false")])]),a("td",[s._v("an array of active options")])])])])}]}},function(s,t,a){s.exports=a(432)},function(s,t,a){var l=a(13)(a(433),a(434),null,null,null);s.exports=l.exports},function(s,t){"use strict";var a=["Shanghai","Beijing","Guangzhou","Shenzhen"];s.exports={data:function(){return{checkList:["selected and disabled","Option A"],checked:!0,checked1:!1,checked2:!0,isValid:"valid",checkAll:!1,cities:a,checkedCities:["Shanghai","Beijing"],checkedCities1:["Shanghai","Beijing"],isIndeterminate:!0,checkboxGroup1:["Shanghai"],checkboxGroup2:["Beijing"],checkboxGroup3:["Guangzhou"]}},methods:{handleChange:function(s){console.log(s)},handleCheckAllChange:function(s){this.checkedCities=s.target.checked?a:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(s){var t=s.length;this.checkAll=t===this.cities.length,this.isIndeterminate=t>0&&t\n \n Option\n\n\n',script:"\n export default {\n data() {\n return {\n checked: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox",{model:{value:s.checked,callback:function(t){s.checked=t},expression:"checked"}},[s._v("Option")])]],2),a("p",[s._v("Define "),a("code",[s._v("v-model")]),s._v("(bind variable) in "),a("code",[s._v("el-checkbox")]),s._v(". The default value is a "),a("code",[s._v("Boolean")]),s._v(" for single "),a("code",[s._v("checkbox")]),s._v(", and it becomes "),a("code",[s._v("true")]),s._v(" when selected. Content inside the "),a("code",[s._v("el-checkbox")]),s._v(" tag will become the description following the button of the checkbox.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked"')]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checked")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Disabled state for checkbox.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n checked1: false,\n checked2: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked1,callback:function(t){s.checked1=t},expression:"checked1"}},[s._v("Option")]),a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked2,callback:function(t){s.checked2=t},expression:"checked2"}},[s._v("Option")])]],2),a("p",[s._v("Set the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checked1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("checked2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._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.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n checkList: ['selected and disabled','Option A']\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox-group",{model:{value:s.checkList,callback:function(t){s.checkList=t},expression:"checkList"}},[a("el-checkbox",{attrs:{label:"Option A"}}),a("el-checkbox",{attrs:{label:"Option B"}}),a("el-checkbox",{attrs:{label:"Option C"}}),a("el-checkbox",{attrs:{label:"disabled",disabled:""}}),a("el-checkbox",{attrs:{label:"selected and disabled",disabled:""}})],1)]],2),a("p",[a("code",[s._v("checkbox-group")]),s._v(" element can manage multiple checkboxes in one group by using "),a("code",[s._v("v-model")]),s._v(" which is bound as an "),a("code",[s._v("Array")]),s._v(". Inside the "),a("code",[s._v("el-checkbox")]),s._v(" element, "),a("code",[s._v("label")]),s._v(" is the value of the checkbox. If no content is nested in that tag, "),a("code",[s._v("label")]),s._v(" will be rendered as the description following the button of the checkbox. "),a("code",[s._v("label")]),s._v(" also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkList"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option A"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option B"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option C"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selected and disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkList")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'selected and disabled'")]),s._v(","),a("span",{staticClass:"hljs-string"},[s._v("'Option A'")]),s._v("]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n export default {\n data() {\n return {\n checkAll: true,\n checkedCities: ['Shanghai', 'Beijing'],\n cities: cityOptions,\n isIndeterminate: true\n };\n },\n methods: {\n handleCheckAllChange(event) {\n this.checkedCities = event.target.checked ? 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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox",{attrs:{indeterminate:s.isIndeterminate},on:{change:s.handleCheckAllChange},model:{value:s.checkAll,callback:function(t){s.checkAll=t},expression:"checkAll"}},[s._v("Check all")]),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{on:{change:s.handleCheckedCitiesChange},model:{value:s.checkedCities,callback:function(t){s.checkedCities=t},expression:"checkedCities"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":indeterminate")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"isIndeterminate"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkAll"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckAllChange"')]),s._v(">")]),s._v("Check all"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckedCitiesChange"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{ -staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkAll")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions,\n "),a("span",{staticClass:"hljs-attr"},[s._v("isIndeterminate")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleCheckAllChange(event) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkedCities = event.target.checked ? cityOptions : [];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n },\n handleCheckedCitiesChange(value) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" checkedCount = value.length;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkAll = checkedCount === "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = checkedCount > "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(" && checkedCount < "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox-group",{attrs:{min:1,max:2},model:{value:s.checkedCities1,callback:function(t){s.checkedCities1=t},expression:"checkedCities1"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" \n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities1")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Checkbox with button styles.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n\n export default {\n data () {\n return {\n checkboxGroup1: ['Shanghai'],\n checkboxGroup2: ['Beijing'],\n checkboxGroup3: ['Guangzhou'],\n cities: cityOptions\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{model:{value:s.checkboxGroup1,callback:function(t){s.checkboxGroup1=t},expression:"checkboxGroup1"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])})),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup2,callback:function(t){s.checkboxGroup2=t},expression:"checkboxGroup2"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t,disabled:"Shenzhen"===t}},[s._v(s._s(t))])})),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{attrs:{size:"large",fill:"#324057","text-color":"#a4aebd",min:1,max:3},model:{value:s.checkboxGroup3,callback:function(t){s.checkboxGroup3=t},expression:"checkboxGroup3"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("p",[s._v("You just need to change "),a("code",[s._v("")]),s._v(" element into "),a("code",[s._v("")]),s._v(" element. We also provide "),a("code",[s._v("size")]),s._v(" attribute for these buttons: "),a("code",[s._v("large")]),s._v(" and "),a("code",[s._v("small")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"city === 'Shenzhen'\"")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("fill")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#324057"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#a4aebd"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup1")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup2")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup3")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-state"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-state","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled State")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indeterminate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indeterminate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("indeterminate")]),s._v(" property can help you to achieve a 'check all' effect.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"minimum-maximum-items-checked"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-items-checked","aria-hidden":"true"}},[s._v("¶")]),s._v(" Minimum / Maximum items checked")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("min")]),s._v(" and "),a("code",[s._v("max")]),s._v(" properties can help you to limit the number of checked items.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("value of the checkbox when used inside a "),a("code",[s._v("checkbox-group")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("true-label")]),a("td",[s._v("value of the checkbox if it's checked")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("false-label")]),a("td",[s._v("value of the checkbox if it's not checked")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("if the checkbox is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("checked")]),a("td",[s._v("if the checkbox is checked")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indeterminate")]),a("td",[s._v("same as "),a("code",[s._v("indeterminate")]),s._v(" in native checkbox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("the size of checkbox buttons")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("border and background color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20a0ff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("font color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("minimum number of checkbox checked")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum number of checkbox checked")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("Event object")])])])])}]}},function(s,t,a){s.exports=a(436)},function(s,t,a){function l(s){a(437)}var e=a(13)(a(439),a(440),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(438);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("cd4ee7e8",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-collapse .el-collapse-item__header .header-icon{margin-left:5px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeNames:["1"],activeName:"1"}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Collapse to store contents.")]),s._m(1),a("p",[s._v("You can expand multiple panels")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    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;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n\n',script:"\n export default {\n data() {\n return {\n activeNames: ['1']\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{on:{change:s.handleChange},model:{value:s.activeNames,callback:function(t){s.activeNames=t},expression:"activeNames"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._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;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeNames"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._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;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{ -staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("activeNames")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("]\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("In accordion mode, only one panel can be expanded at once")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    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;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n\n',script:"\n export default {\n data() {\n return {\n activeName: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._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;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("p",[s._v("Activate accordion mode using the "),a("code",[s._v("accordion")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._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;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n
    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;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",{attrs:{name:"1"}},[a("template",{slot:"title"},[s._v("\n Consistency"),a("i",{staticClass:"header-icon el-icon-information"})]),a("div",[s._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;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("\n Consistency"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"header-icon el-icon-information"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._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;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"accordion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accordion")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-title"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-title","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom title")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Besides using the "),a("code",[s._v("title")]),s._v(" attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("whether to activate accordion mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("currently active panel")]),a("td",[s._v("string (accordion mode)/array (non-accordion mode)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when active panels change")]),a("td",[s._v("activeNames: array (non-accordion mode)/string (accordion mode)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("unique identification of the panel")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of the panel")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(442)},function(s,t,a){function l(s){a(443)}var e=a(13)(a(445),a(446),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(444);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("564f611a",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-color-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;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}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{color1:"#20a0ff",color2:null,color3:"rgba(19, 206, 102, 0.8)"}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("ColorPicker is a color selector supporting multiple color formats.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n With default value\n \n
    \n
    \n With no default value\n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n color1: '#20a0ff',\n color2: null\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With default value")]),a("el-color-picker",{model:{value:s.color1,callback:function(t){s.color1=t},expression:"color1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With no default value")]),a("el-color-picker",{model:{value:s.color2,callback:function(t){s.color2=t},expression:"color2"}})],1)]),a("p",[s._v("ColorPicker requires a string typed variable to be bound to v-model.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With default value"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With no default value"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("color1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#20a0ff'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("color2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n color3: 'rgba(19, 206, 102, 0.8)'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-color-picker",{attrs:{"show-alpha":""},model:{value:s.color3,callback:function(t){s.color3=t},expression:"color3"}})],1),a("p",[s._v("ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the "),a("code",[s._v("show-alpha")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("show-alpha")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("color3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rgba(19, 206, 102, 0.8)'")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"colorpicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" ColorPicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true" -}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alpha"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alpha")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("show-alpha")]),a("td",[s._v("whether to display the alpha slider")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color-format")]),a("td",[s._v("color format of v-model")]),a("td",[s._v("string")]),a("td",[s._v("hsl / hsv / hex / rgb")]),a("td",[s._v("hex (when show-alpha is false)/ rgb (when show-alpha is true)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("color value")])]),a("tr",[a("td",[s._v("active-change")]),a("td",[s._v("triggers when the current active color changes")]),a("td",[s._v("active color value")])])])])}]}},function(s,t,a){s.exports=a(448)},function(s,t,a){function l(s){a(449)}var e=a(13)(null,a(451),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(450);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("b76895b2",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-color-box{border-radius:4px;padding:20px;height:74px;box-sizing:border-box;color:#fff;font-size:14px}.demo-color-box .value{font-size:12px;opacity:.69;line-height:24px}.demo-color-box-group .demo-color-box{border-radius:0}.demo-color-box-group .demo-color-box:first-child{border-radius:4px 4px 0 0}.demo-color-box-group .demo-color-box:last-child{border-radius:0 0 4px 4px}.bg-blue-light{background-color:#58b7ff}.bg-blue,.bg-info{background-color:#20a0ff}.bg-blue-dark{background-color:#1d8ce0}.bg-success{background-color:#13ce66}.bg-warning{background-color:#f7ba2a}.bg-danger{background-color:#ff4949}.bg-black{background-color:#1f2d3d}.bg-black-light{background-color:#324057}.bg-black-lighter{background-color:#475669}.bg-silver{background-color:#8492a6}.bg-silver-light{background-color:#99a9bf}.bg-silver-lighter{background-color:#c0ccda}.bg-gray{background-color:#d3dce6}.bg-gray-light{background-color:#e5e9f2}.bg-gray-lighter{background-color:#eff2f7}.bg-white-dark{background-color:#f9fafc}.color-gray{color:#5e6d82}",""])},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.")]),s._m(1),a("p",[s._v("The main color of Element is bright and friendly blue.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue-light"},[s._v("Light Blue"),a("div",{staticClass:"value"},[s._v("#58B7FF")])])]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#20A0FF")])])]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue-dark"},[s._v("Dark Blue"),a("div",{staticClass:"value"},[s._v("#1D8CE0")])])])],1),s._m(2),a("p",[s._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}},[a("div",{staticClass:"demo-color-box bg-info"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#20A0FF")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-success"},[s._v("Success"),a("div",{staticClass:"value"},[s._v("#13CE66")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-warning"},[s._v("Warning"),a("div",{staticClass:"value"},[s._v("#F7BA2A")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-danger"},[s._v("Danger"),a("div",{staticClass:"value"},[s._v("#FF4949")])])])],1),s._m(3),a("p",[s._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}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-black"},[s._v("Black"),a("div",{staticClass:"value"},[s._v("#1F2D3D")])]),a("div",{staticClass:"demo-color-box bg-black-light"},[s._v("Light Black"),a("div",{staticClass:"value"},[s._v("#324057")])]),a("div",{staticClass:"demo-color-box bg-black-lighter"},[s._v("Extra Light Black"),a("div",{staticClass:"value"},[s._v("#475669")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-silver"},[s._v("Silver"),a("div",{staticClass:"value"},[s._v("#8492A6")])]),a("div",{staticClass:"demo-color-box bg-silver-light"},[s._v("Light Silver"),a("div",{staticClass:"value"},[s._v("#99A9BF")])]),a("div",{staticClass:"demo-color-box bg-silver-lighter"},[s._v("Extra Light Silver"),a("div",{staticClass:"value"},[s._v("#C0CCDA")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box color-gray bg-gray"},[s._v("Gray"),a("div",{staticClass:"value"},[s._v("#D3DCE6")])]),a("div",{staticClass:"demo-color-box color-gray bg-gray-light"},[s._v("Light Gray"),a("div",{staticClass:"value"},[s._v("#E5E9F2")])]),a("div",{staticClass:"demo-color-box color-gray bg-gray-lighter"},[s._v("Extra Light Gray"),a("div",{staticClass:"value"},[s._v("#EFF2F7")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group",staticStyle:{border:"1px solid #e0e6ed","border-radius":"4px"}},[a("div",{staticClass:"demo-color-box color-gray bg-white-dark"},[s._v("Dark White"),a("div",{staticClass:"value"},[s._v("#F9FAFC")])]),a("div",{staticClass:"demo-color-box color-gray bg-white"},[s._v("White"),a("div",{staticClass:"value"},[s._v("#FFFFFF")])])])])],1)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"main-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#main-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Main Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"secondary-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#secondary-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Secondary Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"neutral-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#neutral-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Neutral Color")])}]}},function(s,t,a){s.exports=a(453)},function(s,t,a){var l=a(13)(null,a(454),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom theme")]),a("p",[s._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, and this is where our theme customization tools kick in.")]),a("h2",{attrs:{id:"changing-theme-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changing-theme-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changing theme color")]),a("p",[s._v("If you just want to change the theme color of Element, the "),a("a",{attrs:{href:"https://elementui.github.io/theme-preview/#/en-US"}},[s._v("theme preview website")]),s._v(" is recommended.")]),a("p",[s._v("The main color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.")]),a("p",[s._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).")]),a("h2",{attrs:{id:"more-customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" More customizations")]),a("p",[s._v("If you need more customization than just changing the theme color, please follow these steps:")]),a("h3",{attrs:{id:"install-related-tool"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#install-related-tool","aria-hidden":"true"}},[s._v("¶")]),s._v(" Install related tool")]),a("p",[s._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.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("npm i element-theme -g\n")])]),a("p",[s._v("Then install the default theme from npm or GitHub.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("# from npm\nnpm i element-theme-default -D\n\n# from GitHub\nnpm i https://github.com/ElementUI/theme-default -D\n")])]),a("h3",{attrs:{id:"initialize-variable-file"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#initialize-variable-file","aria-hidden":"true"}},[s._v("¶")]),s._v(" Initialize variable file")]),a("p",[s._v("After successfully installing the above packages, a command named "),a("code",[s._v("et")]),s._v(" is available in CLI (if the packages are installed locally, use "),a("code",[s._v("node_modules/.bin/et")]),s._v(" instead). Run "),a("code",[s._v("-i")]),s._v(" to initialize the variable file which outputs to "),a("code",[s._v("element-variables.css")]),s._v(" by default. And you can specify its output directory as you will.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et -i [custom output file]\n\n> ✔ Generator variables file\n")])]),a("p",[s._v("In "),a("code",[s._v("element-variables.css")]),s._v(" you can find all the variables we used to style Element and they are defined in CSS4 style:")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":root")]),s._v(" {\n\n "),a("span",{staticClass:"hljs-comment"},[s._v("/* Colors\n -------------------------- */")]),s._v("\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20a0ff")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-success")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#13ce66")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-warning")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#f7ba2a")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-danger")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#ff4949")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-info")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#50BFFF")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#2e90fe")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-light")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#5da9ff")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-lighter")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(var(--color-blue), "),a("span",{staticClass:"hljs-number"},[s._v("0.12")]),s._v(");\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-white")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-black")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#000")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-grey")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#C0CCDA")]),s._v(";\n")])]),a("h3",{attrs:{id:"modify-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modify-variables","aria-hidden":"true"}},[s._v("¶")]),s._v(" Modify variables")]),a("p",[s._v("Just edit "),a("code",[s._v("element-variables.css")]),s._v(", e.g. changing the theme color to red:")]),a("pre",[a("code",{staticClass:"hljs language-CSS"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-selector-tag"},[s._v("red")]),s._v(";\n")])]),a("h3",{attrs:{id:"build-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#build-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Build theme")]),a("p",[s._v("After saving the variable file, use "),a("code",[s._v("et")]),s._v(" to build your theme. You can activate "),a("code",[s._v("watch")]),s._v(" mode by adding a parameter "),a("code",[s._v("-w")]),s._v(". And if you customized the variable file's output, you need to add a parameter "),a("code",[s._v("-c")]),s._v(" and variable file's name:")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h3",{attrs:{id:"import-custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import custom theme")]),a("p",[s._v("By default the build theme file is placed inside "),a("code",[s._v("./theme")]),s._v(". You can specify its output directory with parameter "),a("code",[s._v("-o")]),s._v(". Importing your own theme is just like importing the default theme, only this time you import the file you just built:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'../theme/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n\nVue.use(ElementUI)\n")])]),a("h3",{attrs:{id:"import-component-theme-on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-component-theme-on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import component theme on demand")]),a("p",[s._v("If you are using "),a("code",[s._v("babel-plugin-component")]),s._v(" for on-demand import, just modify "),a("code",[s._v(".babelrc")]),s._v(" and specify "),a("code",[s._v("styleLibraryName")]),s._v(" to the path where your custom theme is located relative to "),a("code",[s._v(".babelrc")]),s._v(". Note that "),a("code",[s._v("~")]),s._v(" is required:")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"~theme"')]),s._v("\n }\n ]]]\n}\n")])]),a("p",[s._v("If you are unfamiliar with "),a("code",[s._v("babel-plugin-component")]),s._v(", please refer to "),a("a",{attrs:{href:"./#/en-US/component/quickstart"}},[s._v("Quick Start")]),s._v(". For more details, check out the "),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[s._v("project repository")]),s._v(" of "),a("code",[s._v("element-theme")]),s._v(".")])])}]}},function(s,t,a){s.exports=a(456)},function(s,t,a){function l(s){a(457)}var e=a(13)(a(459),a(460),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(458);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("3d032c27",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-block.demo-date-picker .source{padding:0;display:-ms-flexbox;display:flex}.demo-date-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;-ms-flex:1;flex:1}.demo-date-picker .block:last-child{border-right:none}.demo-date-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,t){"use strict";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"A week ago",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"Last month",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:"",value4:"",value5:"",value6:"",value7:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Date Picker for date input.")]),s._m(1),a("p",[s._v("Basic date picker measured by 'day'.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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 };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Picker with quick options")]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("The measurement is determined by the "),a("code",[s._v("type")]),s._v(" attribute. You can enable quick options by creating a "),a("code",[s._v("picker-options")]),s._v(" object with "),a("code",[s._v("shortcuts")]),s._v(" property. The disabled date is set by "),a("code",[s._v("disabledDate")]),s._v(", which is a function.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a day"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Picker with quick options"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a day"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Today'")]),s._v(",\n onClick(picker) {\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Yesterday'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'A week ago'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n }\n }]\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can choose week, month or year by extending the standard date picker component.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Week\n \n \n
    \n
    \n Month\n \n \n
    \n
    \n Year\n \n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n value3: '',\n value4: '',\n value5: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Week")]),a("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Month")]),a("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Year")]),a("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Week"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"week"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("format")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Week WW"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a week"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Month"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"month"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a month"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag" -},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Year"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"year"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a year"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Picking a date range is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"daterange",placeholder:"Pick a range"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With quick options")]),a("el-date-picker",{attrs:{type:"daterange",align:"right",placeholder:"Pick a range","picker-options":s.pickerOptions2},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a range"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With quick options"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a range"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last week'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last month'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last 3 months'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }]\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DatePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"enter-date"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#enter-date","aria-hidden":"true"}},[s._v("¶")]),s._v(" Enter Date")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"other-measurements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#other-measurements","aria-hidden":"true"}},[s._v("¶")]),s._v(" Other measurements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date Range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",[s._v("yyyy")]),s._v(" month "),a("code",[s._v("MM")]),s._v(" day "),a("code",[s._v("dd")]),s._v(", hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DatePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("optional default time of the picker")]),a("td",[s._v("Date")]),a("td",[s._v("anything accepted by "),a("code",[s._v("new Date()")])]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("first day of week")]),a("td",[s._v("Number")]),a("td",[s._v("1 to 7")]),a("td",[s._v("7")])]),a("tr",[a("td",[s._v("onPick")]),a("td",[s._v("a callback that triggers when the seleted date is changed. Only for "),a("code",[s._v("daterange")]),s._v(" and "),a("code",[s._v("datetimerange")]),s._v(".")]),a("td",[s._v("Function({ maxDate, minDate })")]),a("td",[s._v("-")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",[s._v("pick")]),s._v(" event. Example: "),a("code",[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(462)},function(s,t,a){function l(s){a(463)}var e=a(13)(a(465),a(466),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(464);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("48196c66",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-block.demo-datetime-picker .source{padding:0;display:-ms-flexbox;display:flex}.demo-datetime-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;-ms-flex:1;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}",""])},function(s,t){"use strict";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"A week ago",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"Last month",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:new Date,value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",value11:"",value12:"",value13:"",value14:"",value15:"",value16:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Select date and time in one picker.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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 };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("You can select date and time in one picker at the same time by setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("datetime")]),s._v(". The way to use shortcuts is the same as Date Picker.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select date and time"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select date and time"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Today'")]),s._v(",\n onClick(picker) {\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Yesterday'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'A week ago'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n }\n }]\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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 value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n value4: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"datetimerange",placeholder:"Select time range"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),a("el-date-picker",{attrs:{type:"datetimerange","picker-options":s.pickerOptions2,placeholder:"Select time range",align:"right"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1)]],2),a("p",[s._v("You can select date and time range by setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("datetimerange")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight" -},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select time range"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select time range"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last week'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last month'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last 3 months'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }]\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("11")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(")],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datetimepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DateTimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",[s._v("yyyy")]),s._v(" month "),a("code",[s._v("MM")]),s._v(" day "),a("code",[s._v("dd")]),s._v(", hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DateTimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",[s._v("pick")]),s._v(" event. Example: "),a("code",[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(468)},function(s,t,a){function l(s){a(469)}var e=a(13)(a(471),a(472),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(470);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("5a99cc82",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-dialog .dialog-footer button:first-child{margin-right:10px}.demo-box.demo-dialog .full-image{width:100%}.demo-box.demo-dialog .el-dialog__wrapper{margin:0}.demo-box.demo-dialog .el-input,.demo-box.demo-dialog .el-select{width:300px}.demo-box.demo-dialog .el-button--text{margin-right:15px}",""])},function(s,t){"use strict";s.exports={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"}],dialogVisible:!1,dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}},methods:{handleClose:function(s){this.$confirm("Are you sure to close this dialog?").then(function(t){s()}).catch(function(s){})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Informs users while preserving the current page state.")]),s._m(1),a("p",[s._v("Dialog pops up a dialog box, and it's quite customizable.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'click to open the Dialog\n\n\n This is a message\n \n Cancel\n Confirm\n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogVisible=!0}}},[s._v("click to open the Dialog")]),a("el-dialog",{attrs:{title:"Tips",visible:s.dialogVisible,size:"tiny","before-close":s.handleClose},on:{"update:visible":function(t){s.dialogVisible=t}}},[a("span",[s._v("This is a message")]),a("span",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},[s._v("Confirm")])],1)])],1),a("p",[s._v("Set the "),a("code",[s._v("visible")]),s._v(" attribute with a "),a("code",[s._v("Boolean")]),s._v(", and Dialog shows when it is "),a("code",[s._v("true")]),s._v(". The Dialog has two parts: "),a("code",[s._v("body")]),s._v(" and "),a("code",[s._v("footer")]),s._v(", and the latter requires a "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("footer")]),s._v(". The optional "),a("code",[s._v("title")]),s._v(" attribute (empty by default) is for defining a title. Finally, this example demonstrates how "),a("code",[s._v("before-close")]),s._v(" is used.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("click to open the Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tips"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":visible.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":before-close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("This is a message"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleClose(done) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm("),a("span",{staticClass:"hljs-string"},[s._v("'Are you sure to close this dialog?'")]),s._v(")\n .then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n done();\n })\n .catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {});\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._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。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\nopen a Table nested Dialog\n\n\n \n \n \n \n \n\n\n\nopen a Form nested Dialog\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n Cancel\n Confirm\n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogTableVisible=!0}}},[s._v("open a Table nested Dialog")]),a("el-dialog",{attrs:{title:"Shipping address",visible:s.dialogTableVisible},on:{"update:visible":function(t){s.dialogTableVisible=t}}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogFormVisible=!0}}},[s._v("open a Form nested Dialog")]),a("el-dialog",{attrs:{title:"Shipping address",visible:s.dialogFormVisible},on:{"update:visible":function(t){s.dialogFormVisible=t}}},[a("el-form",{attrs:{model:s.form}},[a("el-form-item",{attrs:{label:"Promotion name","label-width":s.formLabelWidth}},[a("el-input",{attrs:{"auto-complete":"off"},model:{value:s.form.name,callback:function(t){s.form.name=t},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"Zones","label-width":s.formLabelWidth}},[a("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:s.form.region,callback:function(t){s.form.region=t},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),a("span",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("Confirm")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible = true"')]),s._v(">")]),s._v("open a Table nested Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Shipping address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":visible.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = true"')]),s._v(">")]),s._v("open a Form nested Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Shipping address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":visible.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{ -staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zones"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please select a zone"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone No.1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone No.2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("dialogTableVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("dialogFormVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelWidth")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'120px'")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dialog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dialog")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("visible")]),a("td",[s._v("visibility of Dialog, supports the .sync modifier")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of Dialog. Can also be passed with a named slot (see the following table)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Dialog")]),a("td",[s._v("string")]),a("td",[s._v("tiny/small/large/full")]),a("td",[s._v("small")])]),a("tr",[a("td",[s._v("top")]),a("td",[s._v("value for "),a("code",[s._v("top")]),s._v(" of Dialog CSS, works when "),a("code",[s._v("size")]),s._v(" is not "),a("code",[s._v("full")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("15%")])]),a("tr",[a("td",[s._v("modal")]),a("td",[s._v("whether a mask is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("modal-append-to-body")]),a("td",[s._v("whether to append modal to body element. If false, the modal will be appended to Dialog's parent element")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock-scroll")]),a("td",[s._v("whether scroll of body is disabled while Dialog is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("custom-class")]),a("td",[s._v("custom class names for Dialog")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close-on-click-modal")]),a("td",[s._v("whether the Dialog can be closed by clicking the mask")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-on-press-escape")]),a("td",[s._v("whether the Dialog can be closed by pressing ESC")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-close")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("before-close")]),a("td",[s._v("callback before Dialog closes, and it will prevent Dialog from closing")]),a("td",[s._v("function(done)，done is used to close the Dialog")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("content of Dialog")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("content of the Dialog title")])]),a("tr",[a("td",[s._v("footer")]),a("td",[s._v("content of the Dialog footer")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("open")]),a("td",[s._v("triggers when the Dialog opens")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("triggers when the Dialog closes")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(474)},function(s,t,a){function l(s){a(475)}var e=a(13)(a(477),a(478),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(476);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("ef55a3b6",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box .el-dropdown{vertical-align:top}.demo-box .el-dropdown+.el-dropdown{margin-left:15px}.demo-box .el-dropdown-link{cursor:pointer;color:#20a0ff}.demo-box .el-icon-caret-bottom{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}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Toggleable menu for displaying lists of links and actions.")]),s._m(1),a("p",[s._v("Hover on the dropdown menu to unfold it for more actions.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),a("p",[s._v("The triggering element is rendered by the default "),a("code",[s._v("slot")]),s._v(", and the dropdown part is rendered by the "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("dropdown")]),s._v(". By default, dropdown list shows when you hover on the triggering element without having to click it.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Use the button to trigger the dropdown list.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n Dropdown List\n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n Dropdown List\n "),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("p",[s._v("Use "),a("code",[s._v("split-button")]),s._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 "),a("code",[s._v("divider")]),s._v(" to item four.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("split-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n Dropdown List\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Click the triggering element or hover on it.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n hover to trigger\n \n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n \n \n \n click to trigger\n \n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"block-col-2"},[a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("hover to trigger")]),a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("click to trigger")]),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1)],1)],1),a("p",[s._v("Use the attribute "),a("code",[s._v("trigger")]),s._v(". By default, it is "),a("code",[s._v("hover")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block-col-2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover to trigger"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{ -staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("click to trigger"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{attrs:{"hide-on-click":!1}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":hide-on-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Clicking each dropdown item fires an event whose parameter is assigned by each item.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n',script:"\n export default {\n methods: {\n handleCommand(command) {\n this.$message('click on item ' + command);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{on:{command:s.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[s._v("Action 1")]),a("el-dropdown-item",{attrs:{command:"b"}},[s._v("Action 2")]),a("el-dropdown-item",{attrs:{command:"c"}},[s._v("Action 3")]),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[s._v("Action 5")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCommand"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"a"')]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"b"')]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"c"')]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"d"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"e"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleCommand(command) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'click on item '")]),s._v(" + command);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dropdown"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"triggering-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#triggering-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Triggering element")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"how-to-trigger"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-to-trigger","aria-hidden":"true"}},[s._v("¶")]),s._v(" How to trigger")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-hiding-behavior"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-hiding-behavior","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu hiding behavior")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("hide-on-click")]),s._v(" to define if menu closes on clicking.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"command-event"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#command-event","aria-hidden":"true"}},[s._v("¶")]),s._v(" Command event")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("menu button type, refer to "),a("code",[s._v("Button")]),s._v(" Component, only works when "),a("code",[s._v("split-button")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("menu button size, refer to "),a("code",[s._v("Button")]),s._v(" Component, only works when "),a("code",[s._v("split-button")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("split-button")]),a("td",[s._v("whether a button group is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("component size, refer to "),a("code",[s._v("Button")]),s._v(" component")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("menu-align")]),a("td",[s._v("horizontal alignment")]),a("td",[s._v("string")]),a("td",[s._v("start/end")]),a("td",[s._v("end")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how to trigger")]),a("td",[s._v("string")]),a("td",[s._v("hover/click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("hide-on-click")]),a("td",[s._v("whether to hide menu after clicking menu-item")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-timeout")]),a("td",[s._v("Delay time before show a dropdown")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("250")])]),a("tr",[a("td",[s._v("hide-timeout")]),a("td",[s._v("Delay time before hide a dropdown")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("150")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("if "),a("code",[s._v("split-button")]),s._v(" is "),a("code",[s._v("true")]),s._v(", triggers when left button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("command")]),a("td",[s._v("triggers when a dropdown item is clicked")]),a("td",[s._v("the command dispatched from the dropdown item")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("triggers when the dropdown appears/disappears")]),a("td",[s._v("true when it appears, and false otherwise")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Menu Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("command")]),a("td",[s._v("a command to be dispatched to Dropdown's "),a("code",[s._v("command")]),s._v(" callback")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the item is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("divided")]),a("td",[s._v("whether a divider is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(480)},function(s,t,a){function l(s){a(481)}var e=a(13)(a(483),a(484),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(482);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("dbd9631c",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.demo-form.demo-en-US .el-select .el-input{width:360px}.demo-form.demo-en-US .el-form{width:480px}.demo-form.demo-en-US .line{text-align:center}.demo-form.demo-en-US .el-checkbox-group{width:320px;margin:0;padding:0;list-style:none}.demo-form.demo-en-US .el-checkbox-group .el-checkbox{float:left;width:160px;padding-right:20px;margin:0;padding:0}.demo-form.demo-en-US .el-checkbox-group .el-checkbox+.el-checkbox{margin-left:0}.demo-form.demo-en-US .el-checkbox-group:after,.demo-form.demo-en-US .el-checkbox-group:before{content:" ";display:table}.demo-form.demo-en-US .el-checkbox-group:after{clear:both;visibility:hidden;font-size:0;height:0}.demo-form.demo-en-US .demo-form-normal{width:480px}.demo-form.demo-en-US .demo-form-inline{width:auto}.demo-form.demo-en-US .demo-form-inline .el-input{width:150px}.demo-form.demo-en-US .demo-form-inline>*{margin-right:10px}.demo-form.demo-en-US .demo-ruleForm{width:480px}.demo-form.demo-en-US .demo-ruleForm .el-select .el-input{width:360px}.demo-form.demo-en-US .demo-dynamic .el-input{margin-right:10px;width:270px;vertical-align:top}.demo-form.demo-en-US .fr{float:right}',""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s=this,t=function(s,t,a){return t?void setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("Age must be greater than 18")):a():a(new Error("Please input digits"))},1e3):a(new Error("Please input the age"))},a=function(t,a,l){""===a?l(new Error("Please input the password")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),l())},l=function(t,a,l){""===a?l(new Error("Please input the password again")):a!==s.ruleForm2.pass?l(new Error("Two inputs don't match!")):l()};return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formInline:{user:"",region:""},labelPosition:"right",formLabelAlign:{name:"",region:"",type:""},ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},ruleForm2:{pass:"",checkPass:"",age:""},formLabelWidth:"80px",options:[],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"}]},rules2:{pass:[{validator:a,trigger:"blur"}],checkPass:[{validator:l,trigger:"blur"}],age:[{validator:t,trigger:"blur"}]},dynamicValidateForm:{domains:[{key:Date.now(),value:""}],email:""},numberValidateForm:{age:""}}},methods:{onSubmit:function(){console.log("submit!")},onRuleFormSubmit:function(){console.log("onRuleFormSubmit")},submitForm:function(s){this.$refs[s].validate(function(s){return s?void alert("submit!"):(console.log("error submit!!"),!1)})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){var t=this.dynamicValidateForm.domains.indexOf(s);t!==-1&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Create\n Cancel\n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"form",attrs:{model:s.form,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:s.form.name,callback:function(t){s.form.name=t},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:s.form.region,callback:function(t){s.form.region=t},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),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:s.form.date1,callback:function(t){s.form.date1=t},expression:"form.date1"}})],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.form.date2,callback:function(t){s.form.date2=t},expression:"form.date2"}})],1)],1),a("el-form-item",{attrs:{label:"Instant delivery"}},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.form.delivery,callback:function(t){s.form.delivery=t},expression:"form.delivery"}})],1),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:s.form.type,callback:function(t){s.form.type=t},expression:"form.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{model:{value:s.form.resource,callback:function(t){s.form.resource=t},expression:"form.resource"}},[a("el-radio",{attrs:{label:"Sponsor"}}),a("el-radio",{attrs:{label:"Venue"}})],1)],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.form.desc,callback:function(t){s.form.desc=t},expression:"form.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Create")]),a("el-button",[s._v("Cancel")])],1)],1)],1),a("p",[s._v("In each "),a("code",[s._v("form")]),s._v(" component, you need a "),a("code",[s._v("form-item")]),s._v(" field to be the container of your input item.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity name"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"please select your zone"')]),s._v(">")]),s._v("\n "),a("span",{ +staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkAll")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions,\n "),a("span",{staticClass:"hljs-attr"},[s._v("isIndeterminate")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleCheckAllChange(event) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkedCities = event.target.checked ? cityOptions : [];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n },\n handleCheckedCitiesChange(value) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" checkedCount = value.length;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkAll = checkedCount === "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = checkedCount > "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(" && checkedCount < "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox-group",{attrs:{min:1,max:2},model:{value:s.checkedCities1,callback:function(t){s.checkedCities1=t},expression:"checkedCities1"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" \n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities1")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Checkbox with button styles.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n\n export default {\n data () {\n return {\n checkboxGroup1: ['Shanghai'],\n checkboxGroup2: ['Beijing'],\n checkboxGroup3: ['Guangzhou'],\n cities: cityOptions\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{model:{value:s.checkboxGroup1,callback:function(t){s.checkboxGroup1=t},expression:"checkboxGroup1"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])})),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup2,callback:function(t){s.checkboxGroup2=t},expression:"checkboxGroup2"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t,disabled:"Shenzhen"===t}},[s._v(s._s(t))])})),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{attrs:{size:"large",fill:"#324057","text-color":"#a4aebd",min:1,max:3},model:{value:s.checkboxGroup3,callback:function(t){s.checkboxGroup3=t},expression:"checkboxGroup3"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("p",[s._v("You just need to change "),a("code",[s._v("")]),s._v(" element into "),a("code",[s._v("")]),s._v(" element. We also provide "),a("code",[s._v("size")]),s._v(" attribute for these buttons: "),a("code",[s._v("large")]),s._v(" and "),a("code",[s._v("small")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"city === 'Shenzhen'\"")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("fill")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#324057"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#a4aebd"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup1")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup2")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup3")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-state"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-state","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled State")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indeterminate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indeterminate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("indeterminate")]),s._v(" property can help you to achieve a 'check all' effect.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"minimum-maximum-items-checked"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-items-checked","aria-hidden":"true"}},[s._v("¶")]),s._v(" Minimum / Maximum items checked")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("min")]),s._v(" and "),a("code",[s._v("max")]),s._v(" properties can help you to limit the number of checked items.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("value of the checkbox when used inside a "),a("code",[s._v("checkbox-group")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("true-label")]),a("td",[s._v("value of the checkbox if it's checked")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("false-label")]),a("td",[s._v("value of the checkbox if it's not checked")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("if the checkbox is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("checked")]),a("td",[s._v("if the checkbox is checked")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indeterminate")]),a("td",[s._v("same as "),a("code",[s._v("indeterminate")]),s._v(" in native checkbox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("the size of checkbox buttons")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("border and background color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20a0ff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("font color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("minimum number of checkbox checked")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum number of checkbox checked")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("Event object")])])])])}]}},function(s,t,a){s.exports=a(436)},function(s,t,a){function l(s){a(437)}var e=a(13)(a(439),a(440),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(438);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("5952653b",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-collapse .el-collapse-item__header .header-icon{margin-left:5px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeNames:["1"],activeName:"1"}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Collapse to store contents.")]),s._m(1),a("p",[s._v("You can expand multiple panels")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    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;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n\n',script:"\n export default {\n data() {\n return {\n activeNames: ['1']\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{on:{change:s.handleChange},model:{value:s.activeNames,callback:function(t){s.activeNames=t},expression:"activeNames"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._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;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeNames"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._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;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{ +staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("activeNames")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("]\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("In accordion mode, only one panel can be expanded at once")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    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;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n\n',script:"\n export default {\n data() {\n return {\n activeName: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._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;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("p",[s._v("Activate accordion mode using the "),a("code",[s._v("accordion")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._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;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n
    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;
    \n
    Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
    \n     \n \n
    Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
    \n
    Visual feedback: reflect current state by updating or rearranging elements of the page.
    \n     \n \n
    Simplify the process: keep operating process simple and intuitive;
    \n
    Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
    \n
    Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
    \n     \n \n
    Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
    \n
    Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
    \n     \n    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",{attrs:{name:"1"}},[a("template",{slot:"title"},[s._v("\n Consistency"),a("i",{staticClass:"header-icon el-icon-information"})]),a("div",[s._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;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("\n Consistency"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"header-icon el-icon-information"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._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;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"accordion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accordion")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-title"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-title","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom title")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Besides using the "),a("code",[s._v("title")]),s._v(" attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("whether to activate accordion mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("currently active panel")]),a("td",[s._v("string (accordion mode)/array (non-accordion mode)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when active panels change")]),a("td",[s._v("activeNames: array (non-accordion mode)/string (accordion mode)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("unique identification of the panel")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of the panel")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(442)},function(s,t,a){function l(s){a(443)}var e=a(13)(a(445),a(446),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(444);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("03f52e88",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-color-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;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}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{color1:"#20a0ff",color2:null,color3:"rgba(19, 206, 102, 0.8)"}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("ColorPicker is a color selector supporting multiple color formats.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n With default value\n \n
    \n
    \n With no default value\n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n color1: '#20a0ff',\n color2: null\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With default value")]),a("el-color-picker",{model:{value:s.color1,callback:function(t){s.color1=t},expression:"color1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With no default value")]),a("el-color-picker",{model:{value:s.color2,callback:function(t){s.color2=t},expression:"color2"}})],1)]),a("p",[s._v("ColorPicker requires a string typed variable to be bound to v-model.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With default value"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With no default value"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("color1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#20a0ff'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("color2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n color3: 'rgba(19, 206, 102, 0.8)'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-color-picker",{attrs:{"show-alpha":""},model:{value:s.color3,callback:function(t){s.color3=t},expression:"color3"}})],1),a("p",[s._v("ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the "),a("code",[s._v("show-alpha")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("show-alpha")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("color3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rgba(19, 206, 102, 0.8)'")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"colorpicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" ColorPicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true" +}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alpha"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alpha")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("show-alpha")]),a("td",[s._v("whether to display the alpha slider")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color-format")]),a("td",[s._v("color format of v-model")]),a("td",[s._v("string")]),a("td",[s._v("hsl / hsv / hex / rgb")]),a("td",[s._v("hex (when show-alpha is false)/ rgb (when show-alpha is true)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("color value")])]),a("tr",[a("td",[s._v("active-change")]),a("td",[s._v("triggers when the current active color changes")]),a("td",[s._v("active color value")])])])])}]}},function(s,t,a){s.exports=a(448)},function(s,t,a){function l(s){a(449)}var e=a(13)(null,a(451),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(450);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("5b5bd608",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-color-box{border-radius:4px;padding:20px;height:74px;box-sizing:border-box;color:#fff;font-size:14px}.demo-color-box .value{font-size:12px;opacity:.69;line-height:24px}.demo-color-box-group .demo-color-box{border-radius:0}.demo-color-box-group .demo-color-box:first-child{border-radius:4px 4px 0 0}.demo-color-box-group .demo-color-box:last-child{border-radius:0 0 4px 4px}.bg-blue-light{background-color:#58b7ff}.bg-blue,.bg-info{background-color:#20a0ff}.bg-blue-dark{background-color:#1d8ce0}.bg-success{background-color:#13ce66}.bg-warning{background-color:#f7ba2a}.bg-danger{background-color:#ff4949}.bg-black{background-color:#1f2d3d}.bg-black-light{background-color:#324057}.bg-black-lighter{background-color:#475669}.bg-silver{background-color:#8492a6}.bg-silver-light{background-color:#99a9bf}.bg-silver-lighter{background-color:#c0ccda}.bg-gray{background-color:#d3dce6}.bg-gray-light{background-color:#e5e9f2}.bg-gray-lighter{background-color:#eff2f7}.bg-white-dark{background-color:#f9fafc}.color-gray{color:#5e6d82}",""])},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.")]),s._m(1),a("p",[s._v("The main color of Element is bright and friendly blue.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue-light"},[s._v("Light Blue"),a("div",{staticClass:"value"},[s._v("#58B7FF")])])]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#20A0FF")])])]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue-dark"},[s._v("Dark Blue"),a("div",{staticClass:"value"},[s._v("#1D8CE0")])])])],1),s._m(2),a("p",[s._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}},[a("div",{staticClass:"demo-color-box bg-info"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#20A0FF")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-success"},[s._v("Success"),a("div",{staticClass:"value"},[s._v("#13CE66")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-warning"},[s._v("Warning"),a("div",{staticClass:"value"},[s._v("#F7BA2A")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-danger"},[s._v("Danger"),a("div",{staticClass:"value"},[s._v("#FF4949")])])])],1),s._m(3),a("p",[s._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}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-black"},[s._v("Black"),a("div",{staticClass:"value"},[s._v("#1F2D3D")])]),a("div",{staticClass:"demo-color-box bg-black-light"},[s._v("Light Black"),a("div",{staticClass:"value"},[s._v("#324057")])]),a("div",{staticClass:"demo-color-box bg-black-lighter"},[s._v("Extra Light Black"),a("div",{staticClass:"value"},[s._v("#475669")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-silver"},[s._v("Silver"),a("div",{staticClass:"value"},[s._v("#8492A6")])]),a("div",{staticClass:"demo-color-box bg-silver-light"},[s._v("Light Silver"),a("div",{staticClass:"value"},[s._v("#99A9BF")])]),a("div",{staticClass:"demo-color-box bg-silver-lighter"},[s._v("Extra Light Silver"),a("div",{staticClass:"value"},[s._v("#C0CCDA")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box color-gray bg-gray"},[s._v("Gray"),a("div",{staticClass:"value"},[s._v("#D3DCE6")])]),a("div",{staticClass:"demo-color-box color-gray bg-gray-light"},[s._v("Light Gray"),a("div",{staticClass:"value"},[s._v("#E5E9F2")])]),a("div",{staticClass:"demo-color-box color-gray bg-gray-lighter"},[s._v("Extra Light Gray"),a("div",{staticClass:"value"},[s._v("#EFF2F7")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group",staticStyle:{border:"1px solid #e0e6ed","border-radius":"4px"}},[a("div",{staticClass:"demo-color-box color-gray bg-white-dark"},[s._v("Dark White"),a("div",{staticClass:"value"},[s._v("#F9FAFC")])]),a("div",{staticClass:"demo-color-box color-gray bg-white"},[s._v("White"),a("div",{staticClass:"value"},[s._v("#FFFFFF")])])])])],1)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"main-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#main-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Main Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"secondary-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#secondary-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Secondary Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"neutral-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#neutral-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Neutral Color")])}]}},function(s,t,a){s.exports=a(453)},function(s,t,a){var l=a(13)(null,a(454),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom theme")]),a("p",[s._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, and this is where our theme customization tools kick in.")]),a("h2",{attrs:{id:"changing-theme-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changing-theme-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changing theme color")]),a("p",[s._v("If you just want to change the theme color of Element, the "),a("a",{attrs:{href:"https://elementui.github.io/theme-preview/#/en-US"}},[s._v("theme preview website")]),s._v(" is recommended.")]),a("p",[s._v("The main color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.")]),a("p",[s._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).")]),a("h2",{attrs:{id:"more-customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" More customizations")]),a("p",[s._v("If you need more customization than just changing the theme color, please follow these steps:")]),a("h3",{attrs:{id:"install-related-tool"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#install-related-tool","aria-hidden":"true"}},[s._v("¶")]),s._v(" Install related tool")]),a("p",[s._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.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("npm i element-theme -g\n")])]),a("p",[s._v("Then install the default theme from npm or GitHub.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("# from npm\nnpm i element-theme-default -D\n\n# from GitHub\nnpm i https://github.com/ElementUI/theme-default -D\n")])]),a("h3",{attrs:{id:"initialize-variable-file"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#initialize-variable-file","aria-hidden":"true"}},[s._v("¶")]),s._v(" Initialize variable file")]),a("p",[s._v("After successfully installing the above packages, a command named "),a("code",[s._v("et")]),s._v(" is available in CLI (if the packages are installed locally, use "),a("code",[s._v("node_modules/.bin/et")]),s._v(" instead). Run "),a("code",[s._v("-i")]),s._v(" to initialize the variable file which outputs to "),a("code",[s._v("element-variables.css")]),s._v(" by default. And you can specify its output directory as you will.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et -i [custom output file]\n\n> ✔ Generator variables file\n")])]),a("p",[s._v("In "),a("code",[s._v("element-variables.css")]),s._v(" you can find all the variables we used to style Element and they are defined in CSS4 style:")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":root")]),s._v(" {\n\n "),a("span",{staticClass:"hljs-comment"},[s._v("/* Colors\n -------------------------- */")]),s._v("\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20a0ff")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-success")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#13ce66")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-warning")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#f7ba2a")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-danger")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#ff4949")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-info")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#50BFFF")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#2e90fe")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-light")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#5da9ff")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-lighter")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(var(--color-blue), "),a("span",{staticClass:"hljs-number"},[s._v("0.12")]),s._v(");\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-white")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-black")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#000")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-grey")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#C0CCDA")]),s._v(";\n")])]),a("h3",{attrs:{id:"modify-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modify-variables","aria-hidden":"true"}},[s._v("¶")]),s._v(" Modify variables")]),a("p",[s._v("Just edit "),a("code",[s._v("element-variables.css")]),s._v(", e.g. changing the theme color to red:")]),a("pre",[a("code",{staticClass:"hljs language-CSS"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-selector-tag"},[s._v("red")]),s._v(";\n")])]),a("h3",{attrs:{id:"build-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#build-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Build theme")]),a("p",[s._v("After saving the variable file, use "),a("code",[s._v("et")]),s._v(" to build your theme. You can activate "),a("code",[s._v("watch")]),s._v(" mode by adding a parameter "),a("code",[s._v("-w")]),s._v(". And if you customized the variable file's output, you need to add a parameter "),a("code",[s._v("-c")]),s._v(" and variable file's name:")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h3",{attrs:{id:"import-custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import custom theme")]),a("p",[s._v("By default the build theme file is placed inside "),a("code",[s._v("./theme")]),s._v(". You can specify its output directory with parameter "),a("code",[s._v("-o")]),s._v(". Importing your own theme is just like importing the default theme, only this time you import the file you just built:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'../theme/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n\nVue.use(ElementUI)\n")])]),a("h3",{attrs:{id:"import-component-theme-on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-component-theme-on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import component theme on demand")]),a("p",[s._v("If you are using "),a("code",[s._v("babel-plugin-component")]),s._v(" for on-demand import, just modify "),a("code",[s._v(".babelrc")]),s._v(" and specify "),a("code",[s._v("styleLibraryName")]),s._v(" to the path where your custom theme is located relative to "),a("code",[s._v(".babelrc")]),s._v(". Note that "),a("code",[s._v("~")]),s._v(" is required:")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"~theme"')]),s._v("\n }\n ]]]\n}\n")])]),a("p",[s._v("If you are unfamiliar with "),a("code",[s._v("babel-plugin-component")]),s._v(", please refer to "),a("a",{attrs:{href:"./#/en-US/component/quickstart"}},[s._v("Quick Start")]),s._v(". For more details, check out the "),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[s._v("project repository")]),s._v(" of "),a("code",[s._v("element-theme")]),s._v(".")])])}]}},function(s,t,a){s.exports=a(456)},function(s,t,a){function l(s){a(457)}var e=a(13)(a(459),a(460),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(458);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("1009701e",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-block.demo-date-picker .source{padding:0;display:-ms-flexbox;display:flex}.demo-date-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;-ms-flex:1;flex:1}.demo-date-picker .block:last-child{border-right:none}.demo-date-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}",""])},function(s,t){"use strict";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"A week ago",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"Last month",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:"",value4:"",value5:"",value6:"",value7:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Date Picker for date input.")]),s._m(1),a("p",[s._v("Basic date picker measured by 'day'.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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 };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Picker with quick options")]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("The measurement is determined by the "),a("code",[s._v("type")]),s._v(" attribute. You can enable quick options by creating a "),a("code",[s._v("picker-options")]),s._v(" object with "),a("code",[s._v("shortcuts")]),s._v(" property. The disabled date is set by "),a("code",[s._v("disabledDate")]),s._v(", which is a function.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a day"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Picker with quick options"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a day"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Today'")]),s._v(",\n onClick(picker) {\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Yesterday'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'A week ago'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n }\n }]\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can choose week, month or year by extending the standard date picker component.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Week\n \n \n
    \n
    \n Month\n \n \n
    \n
    \n Year\n \n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n value3: '',\n value4: '',\n value5: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Week")]),a("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Month")]),a("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Year")]),a("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Week"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"week"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("format")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Week WW"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a week"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Month"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"month"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a month"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag" +},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Year"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"year"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a year"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Picking a date range is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"daterange",placeholder:"Pick a range"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With quick options")]),a("el-date-picker",{attrs:{type:"daterange",align:"right",placeholder:"Pick a range","picker-options":s.pickerOptions2},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a range"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With quick options"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a range"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last week'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last month'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last 3 months'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }]\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DatePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"enter-date"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#enter-date","aria-hidden":"true"}},[s._v("¶")]),s._v(" Enter Date")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"other-measurements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#other-measurements","aria-hidden":"true"}},[s._v("¶")]),s._v(" Other measurements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date Range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",[s._v("yyyy")]),s._v(" month "),a("code",[s._v("MM")]),s._v(" day "),a("code",[s._v("dd")]),s._v(", hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DatePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("optional default time of the picker")]),a("td",[s._v("Date")]),a("td",[s._v("anything accepted by "),a("code",[s._v("new Date()")])]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("first day of week")]),a("td",[s._v("Number")]),a("td",[s._v("1 to 7")]),a("td",[s._v("7")])]),a("tr",[a("td",[s._v("onPick")]),a("td",[s._v("a callback that triggers when the seleted date is changed. Only for "),a("code",[s._v("daterange")]),s._v(" and "),a("code",[s._v("datetimerange")]),s._v(".")]),a("td",[s._v("Function({ maxDate, minDate })")]),a("td",[s._v("-")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",[s._v("pick")]),s._v(" event. Example: "),a("code",[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(462)},function(s,t,a){function l(s){a(463)}var e=a(13)(a(465),a(466),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(464);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("09744765",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-block.demo-datetime-picker .source{padding:0;display:-ms-flexbox;display:flex}.demo-datetime-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;-ms-flex:1;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}",""])},function(s,t){"use strict";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"A week ago",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"Last month",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:new Date,value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",value11:"",value12:"",value13:"",value14:"",value15:"",value16:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Select date and time in one picker.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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 };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("You can select date and time in one picker at the same time by setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("datetime")]),s._v(". The way to use shortcuts is the same as Date Picker.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select date and time"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select date and time"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Today'")]),s._v(",\n onClick(picker) {\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Yesterday'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'A week ago'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n }\n }]\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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 value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n value4: ''\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"datetimerange",placeholder:"Select time range"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),a("el-date-picker",{attrs:{type:"datetimerange","picker-options":s.pickerOptions2,placeholder:"Select time range",align:"right"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1)]],2),a("p",[s._v("You can select date and time range by setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("datetimerange")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight" +},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select time range"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select time range"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last week'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last month'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last 3 months'")]),s._v(",\n onClick(picker) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n }\n }]\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("11")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(")],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datetimepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DateTimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",[s._v("yyyy")]),s._v(" month "),a("code",[s._v("MM")]),s._v(" day "),a("code",[s._v("dd")]),s._v(", hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DateTimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",[s._v("pick")]),s._v(" event. Example: "),a("code",[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(468)},function(s,t,a){function l(s){a(469)}var e=a(13)(a(471),a(472),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(470);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("37c3a774",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-dialog .dialog-footer button:first-child{margin-right:10px}.demo-box.demo-dialog .full-image{width:100%}.demo-box.demo-dialog .el-dialog__wrapper{margin:0}.demo-box.demo-dialog .el-input,.demo-box.demo-dialog .el-select{width:300px}.demo-box.demo-dialog .el-button--text{margin-right:15px}",""])},function(s,t){"use strict";s.exports={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"}],dialogVisible:!1,dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}},methods:{handleClose:function(s){this.$confirm("Are you sure to close this dialog?").then(function(t){s()}).catch(function(s){})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Informs users while preserving the current page state.")]),s._m(1),a("p",[s._v("Dialog pops up a dialog box, and it's quite customizable.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'click to open the Dialog\n\n\n This is a message\n \n Cancel\n Confirm\n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogVisible=!0}}},[s._v("click to open the Dialog")]),a("el-dialog",{attrs:{title:"Tips",visible:s.dialogVisible,size:"tiny","before-close":s.handleClose},on:{"update:visible":function(t){s.dialogVisible=t}}},[a("span",[s._v("This is a message")]),a("span",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},[s._v("Confirm")])],1)])],1),a("p",[s._v("Set the "),a("code",[s._v("visible")]),s._v(" attribute with a "),a("code",[s._v("Boolean")]),s._v(", and Dialog shows when it is "),a("code",[s._v("true")]),s._v(". The Dialog has two parts: "),a("code",[s._v("body")]),s._v(" and "),a("code",[s._v("footer")]),s._v(", and the latter requires a "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("footer")]),s._v(". The optional "),a("code",[s._v("title")]),s._v(" attribute (empty by default) is for defining a title. Finally, this example demonstrates how "),a("code",[s._v("before-close")]),s._v(" is used.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("click to open the Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tips"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":visible.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":before-close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("This is a message"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleClose(done) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm("),a("span",{staticClass:"hljs-string"},[s._v("'Are you sure to close this dialog?'")]),s._v(")\n .then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n done();\n })\n .catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {});\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._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。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\nopen a Table nested Dialog\n\n\n \n \n \n \n \n\n\n\nopen a Form nested Dialog\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n Cancel\n Confirm\n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogTableVisible=!0}}},[s._v("open a Table nested Dialog")]),a("el-dialog",{attrs:{title:"Shipping address",visible:s.dialogTableVisible},on:{"update:visible":function(t){s.dialogTableVisible=t}}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogFormVisible=!0}}},[s._v("open a Form nested Dialog")]),a("el-dialog",{attrs:{title:"Shipping address",visible:s.dialogFormVisible},on:{"update:visible":function(t){s.dialogFormVisible=t}}},[a("el-form",{attrs:{model:s.form}},[a("el-form-item",{attrs:{label:"Promotion name","label-width":s.formLabelWidth}},[a("el-input",{attrs:{"auto-complete":"off"},model:{value:s.form.name,callback:function(t){s.form.name=t},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"Zones","label-width":s.formLabelWidth}},[a("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:s.form.region,callback:function(t){s.form.region=t},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),a("span",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("Confirm")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible = true"')]),s._v(">")]),s._v("open a Table nested Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Shipping address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":visible.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = true"')]),s._v(">")]),s._v("open a Form nested Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Shipping address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":visible.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{ +staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zones"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please select a zone"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone No.1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone No.2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("dialogTableVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("dialogFormVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelWidth")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'120px'")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dialog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dialog")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("visible")]),a("td",[s._v("visibility of Dialog, supports the .sync modifier")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of Dialog. Can also be passed with a named slot (see the following table)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Dialog")]),a("td",[s._v("string")]),a("td",[s._v("tiny/small/large/full")]),a("td",[s._v("small")])]),a("tr",[a("td",[s._v("top")]),a("td",[s._v("value for "),a("code",[s._v("top")]),s._v(" of Dialog CSS, works when "),a("code",[s._v("size")]),s._v(" is not "),a("code",[s._v("full")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("15%")])]),a("tr",[a("td",[s._v("modal")]),a("td",[s._v("whether a mask is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("modal-append-to-body")]),a("td",[s._v("whether to append modal to body element. If false, the modal will be appended to Dialog's parent element")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock-scroll")]),a("td",[s._v("whether scroll of body is disabled while Dialog is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("custom-class")]),a("td",[s._v("custom class names for Dialog")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close-on-click-modal")]),a("td",[s._v("whether the Dialog can be closed by clicking the mask")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-on-press-escape")]),a("td",[s._v("whether the Dialog can be closed by pressing ESC")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-close")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("before-close")]),a("td",[s._v("callback before Dialog closes, and it will prevent Dialog from closing")]),a("td",[s._v("function(done)，done is used to close the Dialog")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("content of Dialog")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("content of the Dialog title")])]),a("tr",[a("td",[s._v("footer")]),a("td",[s._v("content of the Dialog footer")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("open")]),a("td",[s._v("triggers when the Dialog opens")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("triggers when the Dialog closes")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(474)},function(s,t,a){function l(s){a(475)}var e=a(13)(a(477),a(478),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(476);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("8b085456",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box .el-dropdown{vertical-align:top}.demo-box .el-dropdown+.el-dropdown{margin-left:15px}.demo-box .el-dropdown-link{cursor:pointer;color:#20a0ff}.demo-box .el-icon-caret-bottom{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}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Toggleable menu for displaying lists of links and actions.")]),s._m(1),a("p",[s._v("Hover on the dropdown menu to unfold it for more actions.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),a("p",[s._v("The triggering element is rendered by the default "),a("code",[s._v("slot")]),s._v(", and the dropdown part is rendered by the "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("dropdown")]),s._v(". By default, dropdown list shows when you hover on the triggering element without having to click it.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Use the button to trigger the dropdown list.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n Dropdown List\n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n Dropdown List\n "),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("p",[s._v("Use "),a("code",[s._v("split-button")]),s._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 "),a("code",[s._v("divider")]),s._v(" to item four.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("split-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n Dropdown List\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Click the triggering element or hover on it.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n hover to trigger\n \n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n \n \n \n click to trigger\n \n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"block-col-2"},[a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("hover to trigger")]),a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("click to trigger")]),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1)],1)],1),a("p",[s._v("Use the attribute "),a("code",[s._v("trigger")]),s._v(". By default, it is "),a("code",[s._v("hover")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block-col-2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover to trigger"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{ +staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("click to trigger"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{attrs:{"hide-on-click":!1}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":hide-on-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Clicking each dropdown item fires an event whose parameter is assigned by each item.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Dropdown List\n \n \n Action 1\n Action 2\n Action 3\n Action 4\n Action 5\n \n\n\n',script:"\n export default {\n methods: {\n handleCommand(command) {\n this.$message('click on item ' + command);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{on:{command:s.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[s._v("Action 1")]),a("el-dropdown-item",{attrs:{command:"b"}},[s._v("Action 2")]),a("el-dropdown-item",{attrs:{command:"c"}},[s._v("Action 3")]),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[s._v("Action 5")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCommand"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"a"')]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"b"')]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"c"')]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"d"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"e"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleCommand(command) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'click on item '")]),s._v(" + command);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dropdown"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"triggering-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#triggering-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Triggering element")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"how-to-trigger"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-to-trigger","aria-hidden":"true"}},[s._v("¶")]),s._v(" How to trigger")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-hiding-behavior"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-hiding-behavior","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu hiding behavior")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("hide-on-click")]),s._v(" to define if menu closes on clicking.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"command-event"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#command-event","aria-hidden":"true"}},[s._v("¶")]),s._v(" Command event")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("menu button type, refer to "),a("code",[s._v("Button")]),s._v(" Component, only works when "),a("code",[s._v("split-button")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("menu button size, refer to "),a("code",[s._v("Button")]),s._v(" Component, only works when "),a("code",[s._v("split-button")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("split-button")]),a("td",[s._v("whether a button group is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("component size, refer to "),a("code",[s._v("Button")]),s._v(" component")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("menu-align")]),a("td",[s._v("horizontal alignment")]),a("td",[s._v("string")]),a("td",[s._v("start/end")]),a("td",[s._v("end")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how to trigger")]),a("td",[s._v("string")]),a("td",[s._v("hover/click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("hide-on-click")]),a("td",[s._v("whether to hide menu after clicking menu-item")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-timeout")]),a("td",[s._v("Delay time before show a dropdown")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("250")])]),a("tr",[a("td",[s._v("hide-timeout")]),a("td",[s._v("Delay time before hide a dropdown")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("150")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("if "),a("code",[s._v("split-button")]),s._v(" is "),a("code",[s._v("true")]),s._v(", triggers when left button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("command")]),a("td",[s._v("triggers when a dropdown item is clicked")]),a("td",[s._v("the command dispatched from the dropdown item")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("triggers when the dropdown appears/disappears")]),a("td",[s._v("true when it appears, and false otherwise")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Menu Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("command")]),a("td",[s._v("a command to be dispatched to Dropdown's "),a("code",[s._v("command")]),s._v(" callback")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the item is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("divided")]),a("td",[s._v("whether a divider is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(480)},function(s,t,a){function l(s){a(481)}var e=a(13)(a(483),a(484),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(482);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("036e77fa",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.demo-form.demo-en-US .el-select .el-input{width:360px}.demo-form.demo-en-US .el-form{width:480px}.demo-form.demo-en-US .line{text-align:center}.demo-form.demo-en-US .el-checkbox-group{width:320px;margin:0;padding:0;list-style:none}.demo-form.demo-en-US .el-checkbox-group .el-checkbox{float:left;width:160px;padding-right:20px;margin:0;padding:0}.demo-form.demo-en-US .el-checkbox-group .el-checkbox+.el-checkbox{margin-left:0}.demo-form.demo-en-US .el-checkbox-group:after,.demo-form.demo-en-US .el-checkbox-group:before{content:" ";display:table}.demo-form.demo-en-US .el-checkbox-group:after{clear:both;visibility:hidden;font-size:0;height:0}.demo-form.demo-en-US .demo-form-normal{width:480px}.demo-form.demo-en-US .demo-form-inline{width:auto}.demo-form.demo-en-US .demo-form-inline .el-input{width:150px}.demo-form.demo-en-US .demo-form-inline>*{margin-right:10px}.demo-form.demo-en-US .demo-ruleForm{width:480px}.demo-form.demo-en-US .demo-ruleForm .el-select .el-input{width:360px}.demo-form.demo-en-US .demo-dynamic .el-input{margin-right:10px;width:270px;vertical-align:top}.demo-form.demo-en-US .fr{float:right}',""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s=this,t=function(s,t,a){return t?void setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("Age must be greater than 18")):a():a(new Error("Please input digits"))},1e3):a(new Error("Please input the age"))},a=function(t,a,l){""===a?l(new Error("Please input the password")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),l())},l=function(t,a,l){""===a?l(new Error("Please input the password again")):a!==s.ruleForm2.pass?l(new Error("Two inputs don't match!")):l()};return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formInline:{user:"",region:""},labelPosition:"right",formLabelAlign:{name:"",region:"",type:""},ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},ruleForm2:{pass:"",checkPass:"",age:""},formLabelWidth:"80px",options:[],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"}]},rules2:{pass:[{validator:a,trigger:"blur"}],checkPass:[{validator:l,trigger:"blur"}],age:[{validator:t,trigger:"blur"}]},dynamicValidateForm:{domains:[{key:Date.now(),value:""}],email:""},numberValidateForm:{age:""}}},methods:{onSubmit:function(){console.log("submit!")},onRuleFormSubmit:function(){console.log("onRuleFormSubmit")},submitForm:function(s){this.$refs[s].validate(function(s){return s?void alert("submit!"):(console.log("error submit!!"),!1)})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){var t=this.dynamicValidateForm.domains.indexOf(s);t!==-1&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Create\n Cancel\n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"form",attrs:{model:s.form,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:s.form.name,callback:function(t){s.form.name=t},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:s.form.region,callback:function(t){s.form.region=t},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),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:s.form.date1,callback:function(t){s.form.date1=t},expression:"form.date1"}})],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.form.date2,callback:function(t){s.form.date2=t},expression:"form.date2"}})],1)],1),a("el-form-item",{attrs:{label:"Instant delivery"}},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.form.delivery,callback:function(t){s.form.delivery=t},expression:"form.delivery"}})],1),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:s.form.type,callback:function(t){s.form.type=t},expression:"form.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{model:{value:s.form.resource,callback:function(t){s.form.resource=t},expression:"form.resource"}},[a("el-radio",{attrs:{label:"Sponsor"}}),a("el-radio",{attrs:{label:"Venue"}})],1)],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.form.desc,callback:function(t){s.form.desc=t},expression:"form.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Create")]),a("el-button",[s._v("Cancel")])],1)],1)],1),a("p",[s._v("In each "),a("code",[s._v("form")]),s._v(" component, you need a "),a("code",[s._v("form-item")]),s._v(" field to be the container of your input item.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity name"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"please select your zone"')]),s._v(">")]),s._v("\n "),a("span",{ staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone one"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone two"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity time"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Instant delivery"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity type"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.type"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Online activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Offline activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Simple brand exposure"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Resources"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.resource"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Sponsor"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Venue"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("Create"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("When the vertical space is limited and the form is relatively simple, you can put it in one line.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n Query\n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:s.formInline}},[a("el-form-item",{attrs:{label:"Approved by"}},[a("el-input",{attrs:{placeholder:"Approved by"},model:{value:s.formInline.user,callback:function(t){s.formInline.user=t},expression:"formInline.user"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:s.formInline.region,callback:function(t){s.formInline.region=t},expression:"formInline.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Query")])],1)],1)],1),a("p",[s._v("Set the "),a("code",[s._v("inline")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" and the form will be inline.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":inline")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-form-inline"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Approved by"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline.user"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Approved by"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone one"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone two"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("Query"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("formInline")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("user")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Depending on your design, there are several different ways to align your label element.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Left\n Right\n Top\n\n
    \n\n \n \n \n \n \n \n \n \n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.labelPosition,callback:function(t){s.labelPosition=t},expression:"labelPosition"}},[a("el-radio-button",{attrs:{label:"left"}},[s._v("Left")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("Right")]),a("el-radio-button",{attrs:{label:"top"}},[s._v("Top")])],1),a("div",{staticStyle:{margin:"20px"}}),a("el-form",{attrs:{"label-position":s.labelPosition,"label-width":"100px",model:s.formLabelAlign}},[a("el-form-item",{attrs:{label:"Name"}},[a("el-input",{model:{value:s.formLabelAlign.name,callback:function(t){s.formLabelAlign.name=t},expression:"formLabelAlign.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-input",{model:{value:s.formLabelAlign.region,callback:function(t){s.formLabelAlign.region=t},expression:"formLabelAlign.region"}})],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{model:{value:s.formLabelAlign.type,callback:function(t){s.formLabelAlign.type=t},expression:"formLabelAlign.type"}})],1)],1)],1),a("p",[s._v("The "),a("code",[s._v("label-position")]),s._v(" attribute decides how labels align, it can be "),a("code",[s._v("top")]),s._v(" or "),a("code",[s._v("left")]),s._v(". When set to "),a("code",[s._v("top")]),s._v(", labels will be placed at the top of the form field.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("Left"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("Right"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("Top"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.region"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("labelPosition")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'right'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelAlign")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Form component allows you to verify your data, helping you find and correct errors.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n -\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Create\n Reset\n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm,rules:s.rules,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[a("el-input",{model:{value:s.ruleForm.name,callback:function(t){s.ruleForm.name=t},expression:"ruleForm.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:s.ruleForm.region,callback:function(t){s.ruleForm.region=t},expression:"ruleForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),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:s.ruleForm.date1,callback:function(t){s.ruleForm.date1=t},expression:"ruleForm.date1"}})],1)],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date2"}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.ruleForm.date2,callback:function(t){s.ruleForm.date2=t},expression:"ruleForm.date2"}})],1)],1)],1),a("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.ruleForm.delivery,callback:function(t){s.ruleForm.delivery=t},expression:"ruleForm.delivery"}})],1),a("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[a("el-checkbox-group",{model:{value:s.ruleForm.type,callback:function(t){s.ruleForm.type=t},expression:"ruleForm.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[a("el-radio-group",{model:{value:s.ruleForm.resource,callback:function(t){s.ruleForm.resource=t},expression:"ruleForm.resource"}},[a("el-radio",{attrs:{label:"Sponsorship"}}),a("el-radio",{attrs:{label:"Venue"}})],1)],1),a("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.ruleForm.desc,callback:function(t){s.ruleForm.desc=t},expression:"ruleForm.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm")}}},[s._v("Create")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Just add the "),a("code",[s._v("rules")]),s._v(" attribute for "),a("code",[s._v("Form")]),s._v(" component, pass validation rules, and set "),a("code",[s._v("prop")]),s._v(" attribute for "),a("code",[s._v("Form-Item")]),s._v(" as a specific key that needs to be validated. See more information at "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[s._v("async-validator")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"region"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone one"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone two"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Instant delivery"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delivery"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity type"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.type"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Online activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Offline activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Simple brand exposure"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Resources"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"resource"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.resource"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Sponsorship"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Venue"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"desc"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm')\"")]),s._v(">")]),s._v("Create"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("rules")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please input Activity name'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("min")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("max")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Length should be 3 to 5'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please select Activity zone'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please pick a date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please pick a time'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'array'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please select at least one activity type'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please select activity resource'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please input activity form'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n ]\n }\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n \n \n \n \n \n Submit\n Reset\n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm2,rules:s.rules2,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Password",prop:"pass"}},[a("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.pass,callback:function(t){s.ruleForm2.pass=t},expression:"ruleForm2.pass"}})],1),a("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[a("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.checkPass,callback:function(t){s.ruleForm2.checkPass=t},expression:"ruleForm2.checkPass"}})],1),a("el-form-item",{attrs:{label:"Age",prop:"age"}},[a("el-input",{model:{ value:s.ruleForm2.age,callback:function(t){s.ruleForm2.age=s._n(t)},expression:"ruleForm2.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm2")}}},[s._v("Submit")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm2")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("This example shows how to customize your own validation rules to finish a two-factor password verification.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pass"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.pass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Confirm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkPass"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.checkPass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model.number")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.age"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm2')\"")]),s._v(">")]),s._v("Submit"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm2')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" checkAge = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the age'")]),s._v("));\n }\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v(".isInteger(value)) {\n callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input digits'")]),s._v("));\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value < "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(") {\n callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Age must be greater than 18'")]),s._v("));\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n callback();\n }\n }\n }, "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(");\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validatePass = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the password'")]),s._v("));\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.checkPass !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.ruleForm2.validateField("),a("span",{staticClass:"hljs-string"},[s._v("'checkPass'")]),s._v(");\n }\n callback();\n }\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validatePass2 = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the password again'")]),s._v("));\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value !== "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.pass) {\n callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Two inputs don\\'t match!'")]),s._v("));\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n callback();\n }\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm2")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("rules2")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validatePass, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validatePass2, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": checkAge, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n ]\n }\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n Delete\n \n \n Submit\n New domain\n Reset\n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:s.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:s.dynamicValidateForm.email,callback:function(t){s.dynamicValidateForm.email=t},expression:"dynamicValidateForm.email"}})],1),s._l(s.dynamicValidateForm.domains,function(t,l){return a("el-form-item",{key:t.key,attrs:{label:"Domain"+l,prop:"domains."+l+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(s){t.value=s},expression:"domain.value"}}),a("el-button",{on:{click:function(a){a.preventDefault(),s.removeDomain(t)}}},[s._v("Delete")])],1)}),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("dynamicValidateForm")}}},[s._v("Submit")]),a("el-button",{on:{click:s.addDomain}},[s._v("New domain")]),a("el-button",{on:{click:function(t){s.resetForm("dynamicValidateForm")}}},[s._v("Reset")])],1)],2)],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-dynamic"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"email"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Email"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[\n { required: true, message: 'Please input email address', trigger: 'blur' },\n { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }\n ]\"")]),s._v("\n >")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm.email"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(domain, index) in dynamicValidateForm.domains"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'Domain' + index\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.key"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'domains.' + index + '.value'\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n required: true, message: 'domain can not be null', trigger: 'blur'\n }\"")]),s._v("\n >")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.value"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeDomain(domain)"')]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Submit"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addDomain"')]),s._v(">")]),s._v("New domain"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicValidateForm")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("domains")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("email")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n },\n removeDomain(item) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" index = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.indexOf(item);\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n }\n },\n addDomain() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v(".now(),\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n Submit\n Reset\n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:s.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","auto-complete":"off"},model:{value:s.numberValidateForm.age,callback:function(t){s.numberValidateForm.age=s._n(t)},expression:"numberValidateForm.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("numberValidateForm")}}},[s._v("Submit")]),a("el-button",{on:{click:function(t){s.resetForm("numberValidateForm")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Number Validate need a "),a("code",[s._v(".number")]),s._v(" modifier added on the input "),a("code",[s._v("v-model")]),s._v(" binding，it's used to transform the string value to the number which is provided by Vuejs.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[\n { required: true, message: 'age is required'},\n { type: 'number', message: 'age must be a number'}\n ]\"")]),s._v("\n >")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model.number")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm.age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('numberValidateForm')\"")]),s._v(">")]),s._v("Submit"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('numberValidateForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("numberValidateForm")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n };\n },\n "),a("span",{ -staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Form consists of "),a("code",[s._v("input")]),s._v(", "),a("code",[s._v("radio")]),s._v(", "),a("code",[s._v("select")]),s._v(", "),a("code",[s._v("checkbox")]),s._v(" and so on. With form, you can collect, verify and submit data.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("It includes all kinds of input items, such as "),a("code",[s._v("input")]),s._v(", "),a("code",[s._v("select")]),s._v(", "),a("code",[s._v("radio")]),s._v(" and "),a("code",[s._v("checkbox")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"inline-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inline-form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Inline form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alignment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alignment")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"validation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Validation")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-validation-rules"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-validation-rules","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom validation rules")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"delete-or-add-form-items-dynamically"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#delete-or-add-form-items-dynamically","aria-hidden":"true"}},[s._v("¶")]),s._v(" Delete or add form items dynamically")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"number-validate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#number-validate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Number Validate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("When an "),a("code",[s._v("el-form-item")]),s._v(" is nested in another "),a("code",[s._v("el-form-item")]),s._v(", its label width will be "),a("code",[s._v("0")]),s._v(". You can set "),a("code",[s._v("label-width")]),s._v(" on that "),a("code",[s._v("el-form-item")]),s._v(" if needed.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("model")]),a("td",[s._v("data of form component")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("validation rules of form")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inline")]),a("td",[s._v("whether the form is inline")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label-position")]),a("td",[s._v("position of label")]),a("td",[s._v("string")]),a("td",[s._v("left/right/top")]),a("td",[s._v("right")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("width of label, and all its direct child form items will inherit this value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-suffix")]),a("td",[s._v("suffix of the label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("whether to show the error message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("validate")]),a("td",[s._v("the method to validate the whole form")]),a("td",[s._v("Function(callback: Function(boolean))")])]),a("tr",[a("td",[s._v("validateField")]),a("td",[s._v("the method to validate a certain form item")]),a("td",[s._v("Function(prop: string, callback: Function(errorMessage: string))")])]),a("tr",[a("td",[s._v("resetFields")]),a("td",[s._v("reset all the fields and remove validation result")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("prop")]),a("td",[s._v("a key of "),a("code",[s._v("model")]),s._v(". In the use of validate and resetFields method, the attribute is required")]),a("td",[s._v("string")]),a("td",[s._v("keys of model that passed to "),a("code",[s._v("form")])]),a("td")]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("width of label, e.g. '50px'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("required")]),a("td",[s._v("whether the field is required or not, will be determined by validation rules if omitted")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("validation rules of form")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("error")]),a("td",[s._v("field error message, set its value and the field will validate error and show this message immediately")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("whether to show the error message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("content of Form Item")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("content of label")])])])])}]}},function(s,t,a){s.exports=a(486)},function(s,t,a){var l=a(13)(a(487),a(488),null,null,null);s.exports=l.exports},function(s,t,a){"use strict";var l=a(225);s.exports={ready:function(){(0,l.addClass)(this.$el.parentNode,"no-toc")}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h1",[s._v("Components Document")])])}]}},function(s,t,a){s.exports=a(490)},function(s,t,a){var l=a(13)(null,a(491),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"internationalization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#internationalization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Internationalization")]),a("p",[s._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:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[s._v("Or if you are importing Element on demand:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" lang "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale'")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// configure language")]),s._v("\nlocale.use(lang)\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// import components")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[s._v("The Chinese language pack is imported by default, even if you're using another language. But with "),a("code",[s._v("NormalModuleReplacementPlugin")]),s._v(" provided by webpack you can replace default locale:")]),a("p",[s._v("webpack.config.js")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v("plugins")]),s._v(": [\n "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),a("span",{staticClass:"hljs-regexp"},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v(")\n ]\n}\n")])]),a("h2",{attrs:{id:"compatible-with"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),a("code",[s._v("vue-i18n@5.x")])]),a("p",[s._v("Element is compatible with "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[s._v("vue-i18n@5.x")]),s._v(", which makes multilingual switching even easier.")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = "),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v("\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", zhLocale)\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", enLocale)\n")])]),a("h2",{attrs:{id:"compatible-with-other-i18n-plugins"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-other-i18n-plugins","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with other i18n plugins")]),a("p",[s._v("Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(Element, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("path, options")]),s._v(") ")]),s._v("{\n "),a("span",{staticClass:"hljs-comment"},[s._v("// ...")]),s._v("\n }\n})\n")])]),a("h2",{attrs:{id:"compatible-with-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),a("code",[s._v("vue-i18n@6.x")])]),a("p",[s._v("You need to manually handle it for compatibility with "),a("code",[s._v("6.x")]),s._v(".")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" messages = {\n "),a("span",{staticClass:"hljs-attr"},[s._v("en")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'hello'")]),s._v(",\n ...enLocale "),a("span",{staticClass:"hljs-comment"},[s._v("// Or use `Object.assign({ message: 'hello' }, enLocale)`")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("zh")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'你好'")]),s._v(",\n ...zhLocale "),a("span",{staticClass:"hljs-comment"},[s._v("// Or use `Object.assign({ message: '你好' }, zhLocale)`")]),s._v("\n }\n}\n"),a("span",{staticClass:"hljs-comment"},[s._v("// Create VueI18n instance with options")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" i18n = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" VueI18n({\n "),a("span",{staticClass:"hljs-attr"},[s._v("locale")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale")]),s._v("\n messages, "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale messages")]),s._v("\n})\n\nVue.use(Element, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(": "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("key, value")]),s._v(") =>")]),s._v(" i18n.t(key. value)\n})\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({ i18n }).$mount("),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(")\n")])]),a("h2",{attrs:{id:"custom-i18n-in-on-demand-components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-i18n-in-on-demand-components","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom i18n in on-demand components")]),a("pre",[a("code",{staticClass:"hljs language-js"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" DatePicker "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element/lib/date-picker'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" messages = {\n "),a("span",{staticClass:"hljs-attr"},[s._v("en")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'hello'")]),s._v(",\n ...enLocale\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("zh")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'你好'")]),s._v(",\n ...zhLocale\n }\n}\n"),a("span",{staticClass:"hljs-comment"},[s._v("// Create VueI18n instance with options")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" i18n = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" VueI18n({\n "),a("span",{staticClass:"hljs-attr"},[s._v("locale")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale")]),s._v("\n messages, "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale messages")]),s._v("\n})\n\nElementLocale.i18n("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("key, value")]),s._v(") =>")]),s._v(" i18n.t(key, value))\n")])]),a("h2",{attrs:{id:"import-via-cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-via-cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import via CDN")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui@1.4"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui@1.4/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n ELEMENT.locale(ELEMENT.lang.en)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])]),a("p",[s._v("Compatible with "),a("code",[s._v("vue-i18n")])]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue-i18n/dist/vue-i18n.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui@1.4"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui@1.4/lib/umd/locale/zh-CN.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui@1.4/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", ELEMENT.lang.en)\n Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", ELEMENT.lang.zhCN)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])]),a("p",[s._v("Currently Element ships with the following languages:")]),a("ul",{staticClass:"language-list"},[a("li",[s._v("Simplified Chinese (zh-CN)")]),a("li",[s._v("English (en)")]),a("li",[s._v("German (de)")]),a("li",[s._v("Portuguese (pt)")]),a("li",[s._v("Spanish (es)")]),a("li",[s._v("Danish (da)")]),a("li",[s._v("French (fr)")]),a("li",[s._v("Norwegian (nb-NO)")]),a("li",[s._v("Traditional Chinese (zh-TW)")]),a("li",[s._v("Italian (it)")]),a("li",[s._v("Korean (ko)")]),a("li",[s._v("Japanese (ja)")]),a("li",[s._v("Dutch (nl)")]),a("li",[s._v("Vietnamese (vi)")]),a("li",[s._v("Russian (ru-RU)")]),a("li",[s._v("Turkish (tr-TR)")]),a("li",[s._v("Brazilian Portuguese (pt-br)")]),a("li",[s._v("Farsi (fa)")]),a("li",[s._v("Thai (th)")]),a("li",[s._v("Indonesian (id)")]),a("li",[s._v("Bulgarian (bg)")]),a("li",[s._v("Polish (pl)")]),a("li",[s._v("Finnish (fi)")]),a("li",[s._v("Swedish (sv-SE)")]),a("li",[s._v("Greek (el)")]),a("li",[s._v("Slovak (sk)")]),a("li",[s._v("Catalunya (ca)")]),a("li",[s._v("Czech (cz)")]),a("li",[s._v("Ukrainian (ua)")]),a("li",[s._v("Turkmen (tk)")]),a("li",[s._v("Tamil (ta)")]),a("li",[s._v("Latvian (lv)")]),a("li",[s._v("Afrikaans (af-ZA)")]),a("li",[s._v("Estonian (ee)")]),a("li",[s._v("Slovenian (sl)")]),a("li",[s._v("Arabic (ar)")]),a("li",[s._v("Hebrew (he)")])]),a("p",[s._v("If your target language is not included, you are more than welcome to contribute: just add another language config "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/master/src/locale/lang"}},[s._v("here")]),s._v(" and create a pull request.")])])}]}},function(s,t,a){s.exports=a(493)},function(s,t,a){function l(s){a(494)}var e=a(13)(a(496),a(497),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(495);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("a86e65b4",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.icon-list li:after{display:inline-block;content:"";height:100%;vertical-align:middle}.demo-icon .source>i{color:#8492a6;margin:0 20px;font-size:1.5em;vertical-align:middle}.demo-icon .source>button{margin:0 20px}.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;transition:color .15s linear;border-right:1px solid #eee;border-bottom:1px solid #eee;margin-right:-1px;margin-bottom:-1px}.icon-list li span{display:inline-block;line-height:normal;vertical-align:middle;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;color:#99a9bf}.icon-list li i{display:block;font-size:24px;margin-bottom:15px;color:#8492a6}.icon-list li:hover{color:#5cb6ff}',""])},function(s,t,a){"use strict";t.__esModule=!0;var l=a(237);t.default={data:function(){return{icons:l}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element provides a set of common icons.")]),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\nSearch\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("i",{staticClass:"el-icon-edit"}),a("i",{staticClass:"el-icon-share"}),a("i",{staticClass:"el-icon-delete"}),a("el-button",{attrs:{type:"primary",icon:"search"}},[s._v("Search")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr" -},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("Search"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n")])])])]),s._m(3),a("ul",{staticClass:"icon-list"},s._l(s.icons,function(t){return a("li",{key:t},[a("span",[a("i",{class:"el-icon-"+t}),s._v("\n "+s._s("el-icon-"+t)+"\n ")])])})),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),a("p",[s._v("Now you can use them as you do with Element built-in icons. For example, in el-input:")]),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Just assign the class name to "),a("code",[s._v("el-icon-iconName")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icons")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"third-party-icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#third-party-icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" Third-party icons")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Some of Element's components has an "),a("code",[s._v("icon")]),s._v(" attribute, e.g. Input. If you want to use a third-party icon in the "),a("code",[s._v("icon")]),s._v(" attribute, here's what you need to do:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("span",[s._v("1.")]),s._v(" Modify the class name prefix of the third-party library\n")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Please read third-party icon library documentation on how to do it. For example, if you're using "),a("a",{attrs:{href:"http://iconfont.cn/"}},[s._v("iconfont.cn")]),s._v(', you can find prefix editor in the "Edit Project" dialog. If you\'re using '),a("a",{attrs:{href:"http://fontawesome.io/"}},[s._v("Font Awesome")]),s._v(", you can refer to "),a("a",{attrs:{href:"https://github.com/ElementUI/element-font-awesome"}},[s._v("this demo")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("span",[s._v("2.")]),s._v(" Add some CSS:\n")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-CSS"},[a("span",{staticClass:"hljs-selector-attr"},[s._v('[class^="el-icon-my"]')]),s._v(", "),a("span",{staticClass:"hljs-selector-attr"},[s._v('[class*=" el-icon-my"]')]),s._v(" {\n"),a("span",{staticClass:"hljs-attribute"},[s._v("font-family")]),s._v(":"),a("span",{staticClass:"hljs-string"},[s._v('"your-font-family"')]),s._v(" "),a("span",{staticClass:"hljs-meta"},[s._v("!important")]),s._v(";\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("/* The following is based on original CSS rules of third-party library */")]),s._v("\n"),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": inherit;\n"),a("span",{staticClass:"hljs-attribute"},[s._v("font-style")]),s._v(":normal;\n"),a("span",{staticClass:"hljs-attribute"},[s._v("-webkit-font-smoothing")]),s._v(": antialiased;\n"),a("span",{staticClass:"hljs-attribute"},[s._v("-moz-osx-font-smoothing")]),s._v(": grayscale;\n}\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-xxx"')]),s._v(" />")]),s._v("\n")])])}]}},function(s,t,a){s.exports=a(499)},function(s,t,a){function l(s){a(500)}var e=a(13)(a(502),a(503),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(501);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("02ef4027",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-input-number .el-input-number+.el-input-number{margin-left:10px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{num1:1,num2:1,num3:5,num4:1,num5:1,num6:1}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input numerical values with a customizable range.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{min:1,max:10},on:{change:s.handleChange},model:{value:s.num1,callback:function(t){s.num1=t},expression:"num1"}})]],2),a("p",[s._v("Bind a variable to "),a("code",[s._v("v-model")]),s._v(" in "),a("code",[s._v("")]),s._v(" element and you are set.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("num1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value)\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num2: 1\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{disabled:!0},model:{value:s.num2,callback:function(t){s.num2=t},expression:"num2"}})]],2),a("p",[s._v("The "),a("code",[s._v("disabled")]),s._v(" attribute accepts a "),a("code",[s._v("boolean")]),s._v(", and if the value is "),a("code",[s._v("true")]),s._v(", the component is disabled. If you just need to control the value within a range, you can add "),a("code",[s._v("min")]),s._v(" attribute to set the minimum value and "),a("code",[s._v("max")]),s._v(" to set the maximum value. By default, the minimum value is "),a("code",[s._v("0")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("num2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Allows you to define incremental steps.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num3: 5\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{step:2},model:{value:s.num3,callback:function(t){s.num3=t},expression:"num3"}})]],2),a("p",[s._v("Add "),a("code",[s._v("step")]),s._v(" attribute to set the step.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("num3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num4: 1,\n num5: 1,\n num6: 1\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{size:"large"},model:{value:s.num4,callback:function(t){s.num4=t},expression:"num4"}}),a("el-input-number",{model:{value:s.num5,callback:function(t){s.num5=t},expression:"num5"}}),a("el-input-number",{attrs:{size:"small"},model:{value:s.num6,callback:function(t){s.num6=t},expression:"num6"}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num5"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("num4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("num5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("num6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"inputnumber"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[s._v("¶")]),s._v(" InputNumber")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"size"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#size","aria-hidden":"true"}},[s._v("¶")]),s._v(" Size")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Additional "),a("code",[s._v("large")]),s._v(" and "),a("code",[s._v("small")]),s._v(" sizes of the input box are available")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("the minimum allowed value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("the maximum allowed value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[a("code",[s._v("Infinity")])])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("incremental step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of the component")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the component is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("controls")]),a("td",[s._v("whether to enable the control buttons")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the value changes")]),a("td",[s._v("value after change")])])])])}]}},function(s,t,a){s.exports=a(505)},function(s,t,a){function l(s){a(506)}var e=a(13)(a(508),a(509),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(507);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("f2705b68",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-input.demo-en-US .el-select .el-input{width:110px}.demo-input.demo-en-US .el-input{width:180px}.demo-input.demo-en-US .el-textarea{width:414px}.demo-input.demo-en-US .el-input-group{width:100%}.demo-input.demo-en-US .demo-input-size .el-input{vertical-align:top;margin:0 10px 10px 0}.demo-input.demo-en-US .demo-autocomplete{text-align:center}.demo-input.demo-en-US .demo-autocomplete .sub-title{margin-bottom:10px;font-size:14px;color:#8492a6}.demo-input.demo-en-US .demo-autocomplete .el-col:not(:last-child){border-right:1px solid rgba(224,230,237,.5)}.demo-input.demo-en-US .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}",""])},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var e=a(2),n=l(e);n.default.component("my-item-en",{functional:!0,render:function(s,t){var a=t.props.item;return s("li",t.data,[s("div",{attrs:{class:"value"}},[a.value]),s("span",{attrs:{class:"link"}},[a.link])])},props:{item:{type:Object,required:!0}}}),t.default={data:function(){return{links:[],input:"",input1:"",input2:"",input3:"",input4:"",input5:"",input6:"",input7:"",input8:"",input9:"",textarea:"",textarea2:"",textarea3:"",select:"",state1:"",state2:"",state3:"",state4:""}},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"}]},querySearch:function(s,t){var a=this.links,l=s?a.filter(this.createStateFilter(s)):a;t(l)},querySearchAsync:function(s,t){var a=this.links,l=s?a.filter(this.createStateFilter(s)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(l)},3e3*Math.random())},createStateFilter:function(s){return function(t){return 0===t.value.indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.links=this.loadAll()}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input data using mouse or keyboard.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\nexport default {\n data() {\n return {\n input: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input,callback:function(t){s.input=t},expression:"input"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("input")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input1: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:s.input1,callback:function(t){s.input1=t},expression:"input1"}})],1),a("p",[s._v("Disable the Input with the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("input1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Add an icon to indicate input type.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input2: ''\n }\n },\n methods: {\n handleIconClick(ev) {\n console.log(ev);\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Pick a date",icon:"search","on-icon-click":s.handleIconClick},model:{value:s.input2,callback:function(t){s.input2=t},expression:"input2"}})],1),a("p",[s._v("You can add an icon at the end of Input by setting the "),a("code",[s._v("icon")]),s._v(" attribute and use "),a("code",[s._v("on-icon-click")]),s._v(" hook to complete some work after clicking the icon.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("input2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleIconClick(ev) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(ev);\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:s.textarea,callback:function(t){s.textarea=t},expression:"textarea"}})],1),a("p",[s._v("Control the height by setting the "),a("code",[s._v("rows")]),s._v(" prop.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":rows")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("textarea")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n
    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea2: '',\n textarea3: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:s.textarea2,callback:function(t){s.textarea2=t},expression:"textarea2"}}),a("div",{staticStyle:{margin:"20px 0"}}),a("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:s.textarea3,callback:function(t){s.textarea3=t},expression:"textarea3"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("autosize")]),s._v("\n "),a("span",{ +staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Form consists of "),a("code",[s._v("input")]),s._v(", "),a("code",[s._v("radio")]),s._v(", "),a("code",[s._v("select")]),s._v(", "),a("code",[s._v("checkbox")]),s._v(" and so on. With form, you can collect, verify and submit data.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("It includes all kinds of input items, such as "),a("code",[s._v("input")]),s._v(", "),a("code",[s._v("select")]),s._v(", "),a("code",[s._v("radio")]),s._v(" and "),a("code",[s._v("checkbox")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"inline-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inline-form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Inline form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alignment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alignment")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"validation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Validation")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-validation-rules"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-validation-rules","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom validation rules")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"delete-or-add-form-items-dynamically"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#delete-or-add-form-items-dynamically","aria-hidden":"true"}},[s._v("¶")]),s._v(" Delete or add form items dynamically")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"number-validate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#number-validate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Number Validate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("When an "),a("code",[s._v("el-form-item")]),s._v(" is nested in another "),a("code",[s._v("el-form-item")]),s._v(", its label width will be "),a("code",[s._v("0")]),s._v(". You can set "),a("code",[s._v("label-width")]),s._v(" on that "),a("code",[s._v("el-form-item")]),s._v(" if needed.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("model")]),a("td",[s._v("data of form component")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("validation rules of form")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inline")]),a("td",[s._v("whether the form is inline")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label-position")]),a("td",[s._v("position of label")]),a("td",[s._v("string")]),a("td",[s._v("left/right/top")]),a("td",[s._v("right")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("width of label, and all its direct child form items will inherit this value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-suffix")]),a("td",[s._v("suffix of the label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("whether to show the error message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("validate")]),a("td",[s._v("the method to validate the whole form")]),a("td",[s._v("Function(callback: Function(boolean))")])]),a("tr",[a("td",[s._v("validateField")]),a("td",[s._v("the method to validate a certain form item")]),a("td",[s._v("Function(prop: string, callback: Function(errorMessage: string))")])]),a("tr",[a("td",[s._v("resetFields")]),a("td",[s._v("reset all the fields and remove validation result")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("prop")]),a("td",[s._v("a key of "),a("code",[s._v("model")]),s._v(". In the use of validate and resetFields method, the attribute is required")]),a("td",[s._v("string")]),a("td",[s._v("keys of model that passed to "),a("code",[s._v("form")])]),a("td")]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("width of label, e.g. '50px'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("required")]),a("td",[s._v("whether the field is required or not, will be determined by validation rules if omitted")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("validation rules of form")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("error")]),a("td",[s._v("field error message, set its value and the field will validate error and show this message immediately")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("whether to show the error message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("content of Form Item")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("content of label")])])])])}]}},function(s,t,a){s.exports=a(486)},function(s,t,a){var l=a(13)(a(487),a(488),null,null,null);s.exports=l.exports},function(s,t,a){"use strict";var l=a(225);s.exports={ready:function(){(0,l.addClass)(this.$el.parentNode,"no-toc")}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h1",[s._v("Components Document")])])}]}},function(s,t,a){s.exports=a(490)},function(s,t,a){var l=a(13)(null,a(491),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"internationalization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#internationalization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Internationalization")]),a("p",[s._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:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[s._v("Or if you are importing Element on demand:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" lang "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale'")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// configure language")]),s._v("\nlocale.use(lang)\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// import components")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[s._v("The Chinese language pack is imported by default, even if you're using another language. But with "),a("code",[s._v("NormalModuleReplacementPlugin")]),s._v(" provided by webpack you can replace default locale:")]),a("p",[s._v("webpack.config.js")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v("plugins")]),s._v(": [\n "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),a("span",{staticClass:"hljs-regexp"},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v(")\n ]\n}\n")])]),a("h2",{attrs:{id:"compatible-with"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),a("code",[s._v("vue-i18n@5.x")])]),a("p",[s._v("Element is compatible with "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[s._v("vue-i18n@5.x")]),s._v(", which makes multilingual switching even easier.")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = "),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v("\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", zhLocale)\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", enLocale)\n")])]),a("h2",{attrs:{id:"compatible-with-other-i18n-plugins"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-other-i18n-plugins","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with other i18n plugins")]),a("p",[s._v("Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(Element, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("path, options")]),s._v(") ")]),s._v("{\n "),a("span",{staticClass:"hljs-comment"},[s._v("// ...")]),s._v("\n }\n})\n")])]),a("h2",{attrs:{id:"compatible-with-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),a("code",[s._v("vue-i18n@6.x")])]),a("p",[s._v("You need to manually handle it for compatibility with "),a("code",[s._v("6.x")]),s._v(".")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" messages = {\n "),a("span",{staticClass:"hljs-attr"},[s._v("en")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'hello'")]),s._v(",\n ...enLocale "),a("span",{staticClass:"hljs-comment"},[s._v("// Or use `Object.assign({ message: 'hello' }, enLocale)`")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("zh")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'你好'")]),s._v(",\n ...zhLocale "),a("span",{staticClass:"hljs-comment"},[s._v("// Or use `Object.assign({ message: '你好' }, zhLocale)`")]),s._v("\n }\n}\n"),a("span",{staticClass:"hljs-comment"},[s._v("// Create VueI18n instance with options")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" i18n = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" VueI18n({\n "),a("span",{staticClass:"hljs-attr"},[s._v("locale")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale")]),s._v("\n messages, "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale messages")]),s._v("\n})\n\nVue.use(Element, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(": "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("key, value")]),s._v(") =>")]),s._v(" i18n.t(key. value)\n})\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({ i18n }).$mount("),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(")\n")])]),a("h2",{attrs:{id:"custom-i18n-in-on-demand-components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-i18n-in-on-demand-components","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom i18n in on-demand components")]),a("pre",[a("code",{staticClass:"hljs language-js"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" DatePicker "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element/lib/date-picker'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" messages = {\n "),a("span",{staticClass:"hljs-attr"},[s._v("en")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'hello'")]),s._v(",\n ...enLocale\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("zh")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'你好'")]),s._v(",\n ...zhLocale\n }\n}\n"),a("span",{staticClass:"hljs-comment"},[s._v("// Create VueI18n instance with options")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" i18n = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" VueI18n({\n "),a("span",{staticClass:"hljs-attr"},[s._v("locale")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale")]),s._v("\n messages, "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale messages")]),s._v("\n})\n\nElementLocale.i18n("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("key, value")]),s._v(") =>")]),s._v(" i18n.t(key, value))\n")])]),a("h2",{attrs:{id:"import-via-cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-via-cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import via CDN")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui@1.4"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui@1.4/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n ELEMENT.locale(ELEMENT.lang.en)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])]),a("p",[s._v("Compatible with "),a("code",[s._v("vue-i18n")])]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue-i18n/dist/vue-i18n.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui@1.4"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui@1.4/lib/umd/locale/zh-CN.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui@1.4/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", ELEMENT.lang.en)\n Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", ELEMENT.lang.zhCN)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])]),a("p",[s._v("Currently Element ships with the following languages:")]),a("ul",{staticClass:"language-list"},[a("li",[s._v("Simplified Chinese (zh-CN)")]),a("li",[s._v("English (en)")]),a("li",[s._v("German (de)")]),a("li",[s._v("Portuguese (pt)")]),a("li",[s._v("Spanish (es)")]),a("li",[s._v("Danish (da)")]),a("li",[s._v("French (fr)")]),a("li",[s._v("Norwegian (nb-NO)")]),a("li",[s._v("Traditional Chinese (zh-TW)")]),a("li",[s._v("Italian (it)")]),a("li",[s._v("Korean (ko)")]),a("li",[s._v("Japanese (ja)")]),a("li",[s._v("Dutch (nl)")]),a("li",[s._v("Vietnamese (vi)")]),a("li",[s._v("Russian (ru-RU)")]),a("li",[s._v("Turkish (tr-TR)")]),a("li",[s._v("Brazilian Portuguese (pt-br)")]),a("li",[s._v("Farsi (fa)")]),a("li",[s._v("Thai (th)")]),a("li",[s._v("Indonesian (id)")]),a("li",[s._v("Bulgarian (bg)")]),a("li",[s._v("Polish (pl)")]),a("li",[s._v("Finnish (fi)")]),a("li",[s._v("Swedish (sv-SE)")]),a("li",[s._v("Greek (el)")]),a("li",[s._v("Slovak (sk)")]),a("li",[s._v("Catalunya (ca)")]),a("li",[s._v("Czech (cz)")]),a("li",[s._v("Ukrainian (ua)")]),a("li",[s._v("Turkmen (tk)")]),a("li",[s._v("Tamil (ta)")]),a("li",[s._v("Latvian (lv)")]),a("li",[s._v("Afrikaans (af-ZA)")]),a("li",[s._v("Estonian (ee)")]),a("li",[s._v("Slovenian (sl)")]),a("li",[s._v("Arabic (ar)")]),a("li",[s._v("Hebrew (he)")])]),a("p",[s._v("If your target language is not included, you are more than welcome to contribute: just add another language config "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/master/src/locale/lang"}},[s._v("here")]),s._v(" and create a pull request.")])])}]}},function(s,t,a){s.exports=a(493)},function(s,t,a){function l(s){a(494)}var e=a(13)(a(496),a(497),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(495);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("5d767598",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,'.icon-list li:after{display:inline-block;content:"";height:100%;vertical-align:middle}.demo-icon .source>i{color:#8492a6;margin:0 20px;font-size:1.5em;vertical-align:middle}.demo-icon .source>button{margin:0 20px}.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;transition:color .15s linear;border-right:1px solid #eee;border-bottom:1px solid #eee;margin-right:-1px;margin-bottom:-1px}.icon-list li span{display:inline-block;line-height:normal;vertical-align:middle;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;color:#99a9bf}.icon-list li i{display:block;font-size:24px;margin-bottom:15px;color:#8492a6}.icon-list li:hover{color:#5cb6ff}',""])},function(s,t,a){"use strict";t.__esModule=!0;var l=a(237);t.default={data:function(){return{icons:l}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element provides a set of common icons.")]),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\nSearch\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("i",{staticClass:"el-icon-edit"}),a("i",{staticClass:"el-icon-share"}),a("i",{staticClass:"el-icon-delete"}),a("el-button",{attrs:{type:"primary",icon:"search"}},[s._v("Search")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr" +},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("Search"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n")])])])]),s._m(3),a("ul",{staticClass:"icon-list"},s._l(s.icons,function(t){return a("li",{key:t},[a("span",[a("i",{class:"el-icon-"+t}),s._v("\n "+s._s("el-icon-"+t)+"\n ")])])})),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),a("p",[s._v("Now you can use them as you do with Element built-in icons. For example, in el-input:")]),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Just assign the class name to "),a("code",[s._v("el-icon-iconName")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icons")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"third-party-icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#third-party-icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" Third-party icons")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Some of Element's components has an "),a("code",[s._v("icon")]),s._v(" attribute, e.g. Input. If you want to use a third-party icon in the "),a("code",[s._v("icon")]),s._v(" attribute, here's what you need to do:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("span",[s._v("1.")]),s._v(" Modify the class name prefix of the third-party library\n")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Please read third-party icon library documentation on how to do it. For example, if you're using "),a("a",{attrs:{href:"http://iconfont.cn/"}},[s._v("iconfont.cn")]),s._v(', you can find prefix editor in the "Edit Project" dialog. If you\'re using '),a("a",{attrs:{href:"http://fontawesome.io/"}},[s._v("Font Awesome")]),s._v(", you can refer to "),a("a",{attrs:{href:"https://github.com/ElementUI/element-font-awesome"}},[s._v("this demo")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("span",[s._v("2.")]),s._v(" Add some CSS:\n")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-CSS"},[a("span",{staticClass:"hljs-selector-attr"},[s._v('[class^="el-icon-my"]')]),s._v(", "),a("span",{staticClass:"hljs-selector-attr"},[s._v('[class*=" el-icon-my"]')]),s._v(" {\n"),a("span",{staticClass:"hljs-attribute"},[s._v("font-family")]),s._v(":"),a("span",{staticClass:"hljs-string"},[s._v('"your-font-family"')]),s._v(" "),a("span",{staticClass:"hljs-meta"},[s._v("!important")]),s._v(";\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("/* The following is based on original CSS rules of third-party library */")]),s._v("\n"),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": inherit;\n"),a("span",{staticClass:"hljs-attribute"},[s._v("font-style")]),s._v(":normal;\n"),a("span",{staticClass:"hljs-attribute"},[s._v("-webkit-font-smoothing")]),s._v(": antialiased;\n"),a("span",{staticClass:"hljs-attribute"},[s._v("-moz-osx-font-smoothing")]),s._v(": grayscale;\n}\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-xxx"')]),s._v(" />")]),s._v("\n")])])}]}},function(s,t,a){s.exports=a(499)},function(s,t,a){function l(s){a(500)}var e=a(13)(a(502),a(503),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(501);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("9784c9ba",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-input-number .el-input-number+.el-input-number{margin-left:10px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{num1:1,num2:1,num3:5,num4:1,num5:1,num6:1}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input numerical values with a customizable range.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{min:1,max:10},on:{change:s.handleChange},model:{value:s.num1,callback:function(t){s.num1=t},expression:"num1"}})]],2),a("p",[s._v("Bind a variable to "),a("code",[s._v("v-model")]),s._v(" in "),a("code",[s._v("")]),s._v(" element and you are set.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("num1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(value) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value)\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num2: 1\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{disabled:!0},model:{value:s.num2,callback:function(t){s.num2=t},expression:"num2"}})]],2),a("p",[s._v("The "),a("code",[s._v("disabled")]),s._v(" attribute accepts a "),a("code",[s._v("boolean")]),s._v(", and if the value is "),a("code",[s._v("true")]),s._v(", the component is disabled. If you just need to control the value within a range, you can add "),a("code",[s._v("min")]),s._v(" attribute to set the minimum value and "),a("code",[s._v("max")]),s._v(" to set the maximum value. By default, the minimum value is "),a("code",[s._v("0")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("num2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Allows you to define incremental steps.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num3: 5\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{step:2},model:{value:s.num3,callback:function(t){s.num3=t},expression:"num3"}})]],2),a("p",[s._v("Add "),a("code",[s._v("step")]),s._v(" attribute to set the step.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("num3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:"\n export default {\n data() {\n return {\n num4: 1,\n num5: 1,\n num6: 1\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{size:"large"},model:{value:s.num4,callback:function(t){s.num4=t},expression:"num4"}}),a("el-input-number",{model:{value:s.num5,callback:function(t){s.num5=t},expression:"num5"}}),a("el-input-number",{attrs:{size:"small"},model:{value:s.num6,callback:function(t){s.num6=t},expression:"num6"}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num5"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("num4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("num5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("num6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"inputnumber"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[s._v("¶")]),s._v(" InputNumber")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"size"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#size","aria-hidden":"true"}},[s._v("¶")]),s._v(" Size")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Additional "),a("code",[s._v("large")]),s._v(" and "),a("code",[s._v("small")]),s._v(" sizes of the input box are available")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("the minimum allowed value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("the maximum allowed value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[a("code",[s._v("Infinity")])])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("incremental step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of the component")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the component is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("controls")]),a("td",[s._v("whether to enable the control buttons")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the value changes")]),a("td",[s._v("value after change")])])])])}]}},function(s,t,a){s.exports=a(505)},function(s,t,a){function l(s){a(506)}var e=a(13)(a(508),a(509),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(507);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("2f9b868e",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-input.demo-en-US .el-select .el-input{width:110px}.demo-input.demo-en-US .el-input{width:180px}.demo-input.demo-en-US .el-textarea{width:414px}.demo-input.demo-en-US .el-input-group{width:100%}.demo-input.demo-en-US .demo-input-size .el-input{vertical-align:top;margin:0 10px 10px 0}.demo-input.demo-en-US .demo-autocomplete{text-align:center}.demo-input.demo-en-US .demo-autocomplete .sub-title{margin-bottom:10px;font-size:14px;color:#8492a6}.demo-input.demo-en-US .demo-autocomplete .el-col:not(:last-child){border-right:1px solid rgba(224,230,237,.5)}.demo-input.demo-en-US .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}",""])},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var e=a(2),n=l(e);n.default.component("my-item-en",{functional:!0,render:function(s,t){var a=t.props.item;return s("li",t.data,[s("div",{attrs:{class:"value"}},[a.value]),s("span",{attrs:{class:"link"}},[a.link])])},props:{item:{type:Object,required:!0}}}),t.default={data:function(){return{links:[],input:"",input1:"",input2:"",input3:"",input4:"",input5:"",input6:"",input7:"",input8:"",input9:"",textarea:"",textarea2:"",textarea3:"",select:"",state1:"",state2:"",state3:"",state4:""}},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"}]},querySearch:function(s,t){var a=this.links,l=s?a.filter(this.createStateFilter(s)):a;t(l)},querySearchAsync:function(s,t){var a=this.links,l=s?a.filter(this.createStateFilter(s)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(l)},3e3*Math.random())},createStateFilter:function(s){return function(t){return 0===t.value.indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.links=this.loadAll()}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input data using mouse or keyboard.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\nexport default {\n data() {\n return {\n input: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input,callback:function(t){s.input=t},expression:"input"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("input")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input1: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:s.input1,callback:function(t){s.input1=t},expression:"input1"}})],1),a("p",[s._v("Disable the Input with the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("input1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Add an icon to indicate input type.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input2: ''\n }\n },\n methods: {\n handleIconClick(ev) {\n console.log(ev);\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Pick a date",icon:"search","on-icon-click":s.handleIconClick},model:{value:s.input2,callback:function(t){s.input2=t},expression:"input2"}})],1),a("p",[s._v("You can add an icon at the end of Input by setting the "),a("code",[s._v("icon")]),s._v(" attribute and use "),a("code",[s._v("on-icon-click")]),s._v(" hook to complete some work after clicking the icon.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("input2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleIconClick(ev) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(ev);\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:s.textarea,callback:function(t){s.textarea=t},expression:"textarea"}})],1),a("p",[s._v("Control the height by setting the "),a("code",[s._v("rows")]),s._v(" prop.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":rows")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("textarea")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n
    \n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea2: '',\n textarea3: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:s.textarea2,callback:function(t){s.textarea2=t},expression:"textarea2"}}),a("div",{staticStyle:{margin:"20px 0"}}),a("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:s.textarea3,callback:function(t){s.textarea3=t},expression:"textarea3"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("autosize")]),s._v("\n "),a("span",{ staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":autosize")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{ minRows: 2, maxRows: 4}"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea3"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("textarea2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("textarea3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Prepend or append an element, generally a label or a button.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n
    \n
    \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n \n
    \n\n\n\n',script:"\nexport default {\n data() {\n return {\n input3: '',\n input4: '',\n input5: '',\n select: ''\n }\n }\n}\n",style:"\n .el-select .el-input {\n width: 110px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input3,callback:function(t){s.input3=t},expression:"input3"}},[a("template",{slot:"prepend"},[s._v("Http://")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input4,callback:function(t){s.input4=t},expression:"input4"}},[a("template",{slot:"append"},[s._v(".com")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input5,callback:function(t){s.input5=t},expression:"input5"}},[a("el-select",{attrs:{placeholder:"Select"},slot:"prepend",model:{value:s.select,callback:function(t){s.select=t},expression:"select"}},[a("el-option",{attrs:{label:"Restaurant",value:"1"}}),a("el-option",{attrs:{label:"Order No.",value:"2"}}),a("el-option",{attrs:{label:"Tel",value:"3"}})],1),a("el-button",{attrs:{icon:"search"},slot:"append"})],1)],1)]),a("p",[s._v("Use "),a("code",[s._v("slot")]),s._v(" to distribute elements that prepend or append to Input.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(">")]),s._v("Http://"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(">")]),s._v(".com"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input5"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"select"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Restaurant"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Order No."')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tel"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-select")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-input")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("110px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("input3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("input4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("input5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("select")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n \n \n \n \n \n \n \n
    \n\n\n',script:"\nexport default {\n data() {\n return {\n input6: '',\n input7: '',\n input8: '',\n input9: ''\n }\n }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"demo-input-size"},[a("el-input",{attrs:{size:"large",placeholder:"Please Input"},model:{value:s.input6,callback:function(t){s.input6=t},expression:"input6"}}),a("el-input",{attrs:{placeholder:"Please Input"},model:{value:s.input7,callback:function(t){s.input7=t},expression:"input7"}}),a("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:s.input8,callback:function(t){s.input8=t},expression:"input8"}}),a("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:s.input9,callback:function(t){s.input9=t},expression:"input9"}})],1)]),a("p",[s._v("Add "),a("code",[s._v("size")]),s._v(" attribute to change the size of Input. In addition to the default size, there are three other options: "),a("code",[s._v("large")]),s._v(", "),a("code",[s._v("small")]),s._v(" and "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-input-size"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input6"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input7"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input8"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input9"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("input6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("input7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("input8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("input9")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("You can get some recommended tips based on the current input.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    list suggestions when activated
    \n \n     \n \n
    list suggestions on input
    \n \n     \n    \n\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.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',style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("list suggestions when activated")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input"},on:{select:s.handleSelect},model:{value:s.state1,callback:function(t){s.state1=t},expression:"state1"}})],1),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("list suggestions on input")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:s.handleSelect},model:{value:s.state2,callback:function(t){s.state2=t},expression:"state2"}})],1)],1)],1),a("p",[s._v("Autocomplete component provides input suggestions. The "),a("code",[s._v("fetch-suggestions")]),s._v(" attribute is a method that returns suggested input. In this example, "),a("code",[s._v("querySearch(queryString, cb)")]),s._v(" returns suggestions to Autocomplete via "),a("code",[s._v("cb(data)")]),s._v(" when suggestions are ready.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-autocomplete"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions when activated"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n >")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions on input"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":trigger-on-focus")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n >")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("links")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("state1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n querySearch(queryString, cb) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? links.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n "),a("span",{staticClass:"hljs-comment"},[s._v("// call callback function to return suggestions")]),s._v("\n cb(results);\n },\n createFilter(queryString) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("link")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n };\n },\n loadAll() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cooking"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"mint-ui"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vuex"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue-router"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"babel"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n ];\n },\n handleSelect(item) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n }\n },\n mounted() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("Customize how suggestions are displayed.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:'\n Vue.component(\'my-item-en\', {\n functional: true,\n render: function (h, ctx) {\n var item = ctx.props.item;\n return h(\'li\', ctx.data, [\n h(\'div\', { attrs: { class: \'value\' } }, [item.value]),\n h(\'span\', { attrs: { class: \'link\' } }, [item.link])\n ]);\n },\n props: {\n item: { type: Object, required: true }\n }\n });\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 ? link.filter(this.createFilter(queryString)) : links;\n // call callback function to return recommended data\n cb(results);\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.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',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" }}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":s.querySearch,"custom-item":"my-item-en",placeholder:"Please input",icon:"edit","on-icon-click":s.handleIconClick},on:{select:s.handleSelect},model:{value:s.state3,callback:function(t){s.state3=t},expression:"state3"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("popper-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-autocomplete"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("custom-item")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-item-en"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\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")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n Vue.component("),a("span",{staticClass:"hljs-string"},[s._v("'my-item-en'")]),s._v(", {\n "),a("span",{staticClass:"hljs-attr"},[s._v("functional")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("h, ctx")]),s._v(") ")]),s._v("{\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" item = ctx.props.item;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" h("),a("span",{staticClass:"hljs-string"},[s._v("'li'")]),s._v(", ctx.data, [\n h("),a("span",{staticClass:"hljs-string"},[s._v("'div'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'value'")]),s._v(" } }, [item.value]),\n h("),a("span",{staticClass:"hljs-string"},[s._v("'span'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'link'")]),s._v(" } }, [item.link])\n ]);\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("item")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Object")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" }\n }\n });\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("links")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("state3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n querySearch(queryString, cb) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? link.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n "),a("span",{staticClass:"hljs-comment"},[s._v("// call callback function to return recommended data")]),s._v("\n cb(results);\n },\n createFilter(queryString) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("link")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n };\n },\n loadAll() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cooking"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"mint-ui"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vuex"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue-router"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"babel"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n ];\n },\n handleSelect(item) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n },\n handleIconClick(ev) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(ev);\n }\n },\n mounted() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("Search data from server-side.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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.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',style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"Please input"},on:{select:s.handleSelect},model:{value:s.state4,callback:function(t){s.state4=t},expression:"state4"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearchAsync"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("links")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("state4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("timeout")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n loadAll() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cooking"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"mint-ui"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vuex"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue-router"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"babel"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n ];\n },\n querySearchAsync(queryString, cb) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? links.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n\n clearTimeout("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout);\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout = setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n cb(results);\n }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(" * "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random());\n },\n createFilter(queryString) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("link")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n };\n },\n handleSelect(item) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n }\n },\n mounted() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input with icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[s._v("¶")]),s._v(" Textarea")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Resizable for entering multiple lines of text information. Add attribute "),a("code",[s._v('type="textarea"')]),s._v(" to change "),a("code",[s._v("input")]),s._v(" into native "),a("code",[s._v("textarea")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autosize-textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autosize-textarea","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autosize Textarea")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Setting the "),a("code",[s._v("autosize")]),s._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 "),a("code",[s._v("autosize")]),s._v(" to specify the minimum and maximum number of lines the textarea can automatically adjust.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mixed-input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mixed-input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Mixed input")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"remote-search"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[s._v("¶")]),s._v(" Remote search")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("Same as the "),a("code",[s._v("type")]),s._v(" attribute of native input, except that it can be "),a("code",[s._v("textarea")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("maxlength")]),a("td",[s._v("maximum Input text length")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("minlength")]),a("td",[s._v("minimum Input text length")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder of Input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Input is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input, works when "),a("code",[s._v("type")]),s._v(" is not 'textarea'")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("icon name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rows")]),a("td",[s._v("number of rows of textarea, only works when "),a("code",[s._v("type")]),s._v(" is 'textarea'")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("autosize")]),a("td",[s._v("whether textarea has an adaptive height, only works when "),a("code",[s._v("type")]),s._v(" is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }")]),a("td",[s._v("boolean/object")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("auto-complete")]),a("td",[s._v("same as "),a("code",[s._v("auto-complete")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("on/off")]),a("td",[s._v("off")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("same as "),a("code",[s._v("readonly")]),s._v(" in native input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("same as "),a("code",[s._v("max")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("same as "),a("code",[s._v("min")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("same as "),a("code",[s._v("step")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resize")]),a("td",[s._v("control the resizability")]),a("td",[s._v("string")]),a("td",[s._v("none, both, horizontal, vertical")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("same as "),a("code",[s._v("autofocus")]),s._v(" in native input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("form")]),a("td",[s._v("same as "),a("code",[s._v("form")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("hook function when clicking on the input icon")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("triggers when the icon inside Input is clicked")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when the icon inside Input is blur")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when the icon inside Input is focus")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the icon inside Input value change")]),a("td",[s._v("(value: string | number)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("the placeholder of Autocomplete")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Autocomplete is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("icon name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("custom-item")]),a("td",[s._v("component name of your customized suggestion list item")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fetch-suggestions")]),a("td",[s._v("a method to fetch input suggestions. When suggestions are ready, invoke "),a("code",[s._v("callback(data:[])")]),s._v(" to return them to Autocomplete")]),a("td",[s._v("Function(queryString, callback)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for autocomplete's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("trigger-on-focus")]),a("td",[s._v("whether show suggestions when input focus")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("hook function when clicking on the input icon")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("select-when-unmatched")]),a("td",[s._v("whether to emit a "),a("code",[s._v("select")]),s._v(" event on enter when there is no autocomplete match")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of option object is used as the option's label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("specify which key of option object is used as the option's value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("value")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("triggers when a suggestion is clicked")]),a("td",[s._v("suggestion being clicked")])])])])}]}},function(s,t,a){s.exports=a(511)},function(s,t,a){var l=a(13)(null,a(512),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"installation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Installation")]),a("h3",{attrs:{id:"npm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[s._v("¶")]),s._v(" npm")]),a("p",[s._v("Installing with npm is recommended and it works seamlessly with "),a("a",{attrs:{href:"https://webpack.js.org/"}},[s._v("webpack")]),s._v(".")]),a("div",{staticClass:"tip"},[a("p",[s._v("Note that this doc is for 1.x, so you need the "),a("code",[s._v("legacy")]),s._v(" tag when installing.")])]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("npm i element-ui@legacy -S\n")])]),a("h3",{attrs:{id:"cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" CDN")]),a("p",[s._v("Get the latest version from "),a("a",{attrs:{href:"https://unpkg.com/element-ui@1.4/"}},[s._v("unpkg.com/element-ui")]),s._v(" , and import JavaScript and CSS file in your page.")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui@1.4/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui@1.4/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])]),a("div",{staticClass:"tip"},[a("p",[s._v("We recommend our users to lock Element's version when using CDN. For example, if you're using Element 1.4.8, you can lock CSS and JavaScript files like this: "),a("code",[s._v("https://unpkg.com/element-ui@1.4.8/lib/theme-default/index.css")]),s._v(", "),a("code",[s._v("https://unpkg.com/element-ui@1.4.8/lib/index.js")]),s._v(".")])]),a("h3",{attrs:{id:"hello-world"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hello world")]),a("p",[s._v("If you are using CDN, a hello-world page is easy with Element. "),a("a",{attrs:{href:"https://jsfiddle.net/hzfpyvg6/18/"}},[s._v("Online Demo")])]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-meta"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag" -},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("meta")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("charset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"UTF-8"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui@1.4/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"app"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible = true"')]),s._v(">")]),s._v("Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Hello world"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Try Element"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/vue@2.5/dist/vue.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui@1.4/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n el: "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n data: "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" ")]),s._v("{\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { visible: "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }\n }\n })\n ")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])]),a("p",[s._v("If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.")])])}]}},function(s,t,a){s.exports=a(514)},function(s,t,a){function l(s){a(515)}var e=a(13)(null,a(517),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(516);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("1a212991",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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}",""])},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Quickly and easily create layouts with the basic 24-column.")]),s._m(1),a("p",[s._v("Create basic grid layout using columns.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n    \n\n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n
    \n
    \n    \n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("p",[s._v("With "),a("code",[s._v("row")]),s._v(" and "),a("code",[s._v("col")]),s._v(", we can easily manipulate the layout using the "),a("code",[s._v("span")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"24"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-dark"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\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")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Column spacing is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n
    \n    \n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("Row provides "),a("code",[s._v("gutter")]),s._v(" attribute to specify spacings between columns, and its default value is 0.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\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")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Form a more complex hybrid layout by combining the basic 1/24 columns.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{ +},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("meta")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("charset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"UTF-8"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui@1.4/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"app"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible = true"')]),s._v(">")]),s._v("Button"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Hello world"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Try Element"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/vue@2.5/dist/vue.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui@1.4/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n el: "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n data: "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" ")]),s._v("{\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { visible: "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }\n }\n })\n ")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])]),a("p",[s._v("If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.")])])}]}},function(s,t,a){s.exports=a(514)},function(s,t,a){function l(s){a(515)}var e=a(13)(null,a(517),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(516);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("3b5149ad",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".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}",""])},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Quickly and easily create layouts with the basic 24-column.")]),s._m(1),a("p",[s._v("Create basic grid layout using columns.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n    \n\n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n
    \n
    \n    \n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("p",[s._v("With "),a("code",[s._v("row")]),s._v(" and "),a("code",[s._v("col")]),s._v(", we can easily manipulate the layout using the "),a("code",[s._v("span")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"24"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-dark"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\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")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Column spacing is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n
    \n    \n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("Row provides "),a("code",[s._v("gutter")]),s._v(" attribute to specify spacings between columns, and its default value is 0.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\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")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Form a more complex hybrid layout by combining the basic 1/24 columns.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n    \n\n
    \n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{ staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\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")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can specify column offsets.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n    \n\n
    \n
    \n    \n\n
    \n    \n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:12,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("You can specify the number of column offset by setting the value of "),a("code",[s._v("offset")]),s._v(" attribute of Col.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\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")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Use the flex layout to make flexible alignment of columns.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n
    \n
    \n
    \n    \n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),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"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),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"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("You can enable flex layout by setting "),a("code",[s._v("type")]),s._v(" attribute to 'flex', and define the layout of child elements by setting "),a("code",[s._v("justify")]),s._v(" attribute with start, center, end, space-between or space-around.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"center"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"space-between"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"space-around"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\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")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n
    \n    \n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:10}},[a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-col")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-dark")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-light")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e5e9f2")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".grid-content")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("min-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"column-spacing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#column-spacing","aria-hidden":"true"}},[s._v("¶")]),s._v(" Column spacing")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hybrid-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hybrid-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hybrid layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"column-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#column-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" Column offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alignment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alignment")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"responsive-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Responsive Layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"row-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Row Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("gutter")]),a("td",[s._v("grid spacing")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("layout mode, you can use flex, works in modern browsers")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("justify")]),a("td",[s._v("horizontal alignment of flex layout")]),a("td",[s._v("string")]),a("td",[s._v("start/end/center/space-around/space-between")]),a("td",[s._v("start")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("vertical alignment of flex layout")]),a("td",[s._v("string")]),a("td",[s._v("top/middle/bottom")]),a("td",[s._v("top")])]),a("tr",[a("td",[s._v("tag")]),a("td",[s._v("custom element tag")]),a("td",[s._v("string")]),a("td",[s._v("*")]),a("td",[s._v("div")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"col-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Col Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("span")]),a("td",[s._v("number of column the grid spans")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("24")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("number of spacing on the left side of the grid")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("push")]),a("td",[s._v("number of columns that grid moves to the right")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("pull")]),a("td",[s._v("number of columns that grid moves to the left")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("xs")]),a("td",[a("code",[s._v("<768px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sm")]),a("td",[a("code",[s._v("≥768px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("md")]),a("td",[a("code",[s._v("≥992")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lg")]),a("td",[a("code",[s._v("≥1200")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("tag")]),a("td",[s._v("custom element tag")]),a("td",[s._v("string")]),a("td",[s._v("*")]),a("td",[s._v("div")])])])])}]}},function(s,t,a){s.exports=a(519)},function(s,t,a){function l(s){a(520)}var e=a(13)(a(522),a(523),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(521);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("c3ec76c6",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-loading .el-table{border:none}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={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,loading2:!0,fullscreenLoading:!1}},methods:{openFullScreen:function(){var s=this;this.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},3e3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Show animation while loading data.")]),s._m(1),a("p",[s._v("Displays animation in a container (such as a table) while loading data.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\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",style:"\n body {\n margin: 0;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading.body",value:s.loading,expression:"loading",modifiers:{body:!0}}],staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Element provides two ways to invoke Loading: directive and service. For the custom directive "),a("code",[s._v("v-loading")]),s._v(", you just need to bind a "),a("code",[s._v("boolean")]),s._v(" value to it. By default, the loading mask will append to the element where the directive is used. Adding the "),a("code",[s._v("body")]),s._v(" modifier makes the mask append to the body element.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading.body")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-tag"},[s._v("body")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize a text message.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...",data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Add attribute "),a("code",[s._v("element-loading-text")]),s._v(" to the element on which "),a("code",[s._v("v-loading")]),s._v(" is bound, and its value will be displayed under the spinner.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("element-loading-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Loading..."')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("loading2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Show a full screen animation while loading data.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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 }, 3000);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:s.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:s.openFullScreen}},[s._v("\n Full screen loading for 3 seconds\n ")])]],2),a("p",[s._v("Add the "),a("code",[s._v("fullscreen")]),s._v(" modifier to create a full screen mask, and it will append to body. In this case, if you disable scrolling on body, you add another modifier "),a("code",[s._v("lock")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"openFullScreen"')]),s._v("\n "),a("span",{staticClass:"hljs-attr" -},[s._v("v-loading.fullscreen.lock")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fullscreenLoading"')]),s._v(">")]),s._v("\n Full screen loading for 3 seconds\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreenLoading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n openFullScreen() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can also invoke Loading with a service. Import Loading service:")]),s._m(5),a("p",[s._v("Invoke it:")]),s._m(6),s._m(7),s._m(8),a("p",[s._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:")]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-inside-a-container"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-inside-a-container","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading inside a container")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"full-screen-loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#full-screen-loading","aria-hidden":"true"}},[s._v("¶")]),s._v(" Full screen loading")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"service"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[s._v("¶")]),s._v(" Service")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Loading } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("Loading.service(options);\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The parameter "),a("code",[s._v("options")]),s._v(" is the configuration of Loading, and its details can be found in the following table. "),a("code",[s._v("LoadingService")]),s._v(" returns a Loading instance, and you can close it by invoking its "),a("code",[s._v("close")]),s._v(" method:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),a("span",{staticClass:"hljs-comment"},[s._v("// true")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Calling the "),a("code",[s._v("close")]),s._v(" method on any one of them can close this full screen Loading.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If Element is imported entirely, a globally method "),a("code",[s._v("$loading")]),s._v(" will be registered to Vue.prototype. You can invoke it like this: "),a("code",[s._v("this.$loading(options)")]),s._v(", and it also returns a Loading instance.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("target")]),a("td",[s._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 "),a("code",[s._v("document.querySelector")]),s._v(" to get the corresponding DOM node")]),a("td",[s._v("object/string")]),a("td",[s._v("—")]),a("td",[s._v("document.body")])]),a("tr",[a("td",[s._v("body")]),a("td",[s._v("same as the "),a("code",[s._v("body")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("same as the "),a("code",[s._v("fullscreen")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock")]),a("td",[s._v("same as the "),a("code",[s._v("lock")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text")]),a("td",[s._v("loading text that displays under the spinner")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Loading")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(525)},function(s,t,a){function l(s){a(526)}var e=a(13)(a(528),a(529),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(527);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("73ef1f4b",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-menu .el-menu-demo{padding-left:55px}.demo-box.demo-menu .el-menu-vertical-demo:not(.el-menu--collapse){width:200px;min-height:400px}.demo-box.demo-menu .line{height:1px;background-color:#e0e6ed;margin:35px -24px}.demo-box.demo-menu h5{font-size:14px;color:#8492a6;margin-top:10px}.demo-box.demo-menu .tac{text-align:center}.demo-box.demo-menu .tac .el-menu-vertical-demo{display:inline-block;text-align:left}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeIndex:"1",activeIndex2:"1",isCollapse:!0}},methods:{handleOpen:function(s,t){console.log(s,t)},handleClose:function(s,t){console.log(s,t)},handleSelect:function(s,t){console.log(s,t)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Menu that provides navigation for your website.")]),s._m(1),a("p",[s._v("Top bar NavMenu can be used in a variety of scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Processing Center\n \n \n item one\n item two\n item three\n \n Orders\n\n
    \n\n Processing Center\n \n \n item one\n item two\n item three\n \n Orders\n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-menu",{staticClass:"el-menu-demo",attrs:{theme:"dark","default-active":s.activeIndex,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("Workspace")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1),a("div",{staticClass:"line"}),a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex2,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("Workspace")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1)],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleSelect(key, keyPath) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Vertical NavMenu with sub-menus.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    With icons
    \n \n \n \n \n item one\n item one\n \n \n item three\n \n \n \n item one\n \n \n Navigator Two\n Navigator Three\n \n     \n \n
    Without icons
    \n \n \n \n \n item one\n item two\n \n \n item three\n \n \n \n item one\n \n \n Navigator Two\n Navigator Three\n \n     \n \n
    Groups
    \n \n \n Navigator One\n Navigator Two\n \n \n Navigator Three\n Navigator Four\n \n \n     \n    \n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:8}},[a("h5",[s._v("With icons")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item one")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),s._v("Navigator Two")]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),s._v("Navigator Three")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("Without icons")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",theme:"dark"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[s._v("Navigator One")]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item two")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[s._v("Navigator Two")]),a("el-menu-item",{attrs:{index:"3"}},[s._v("Navigator Three")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("Groups")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{mode:"vertical","default-active":"1"}},[a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Two")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Three")]),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Four")])],1)],1)],1)],1)],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tac"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("With icons"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group One"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{ +staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\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")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    \n
    \n
    \n
    \n    \n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:10}},[a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-col")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-dark")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-light")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e5e9f2")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".grid-content")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("min-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"column-spacing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#column-spacing","aria-hidden":"true"}},[s._v("¶")]),s._v(" Column spacing")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hybrid-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hybrid-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hybrid layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"column-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#column-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" Column offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alignment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alignment")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"responsive-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Responsive Layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"row-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Row Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("gutter")]),a("td",[s._v("grid spacing")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("layout mode, you can use flex, works in modern browsers")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("justify")]),a("td",[s._v("horizontal alignment of flex layout")]),a("td",[s._v("string")]),a("td",[s._v("start/end/center/space-around/space-between")]),a("td",[s._v("start")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("vertical alignment of flex layout")]),a("td",[s._v("string")]),a("td",[s._v("top/middle/bottom")]),a("td",[s._v("top")])]),a("tr",[a("td",[s._v("tag")]),a("td",[s._v("custom element tag")]),a("td",[s._v("string")]),a("td",[s._v("*")]),a("td",[s._v("div")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"col-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Col Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("span")]),a("td",[s._v("number of column the grid spans")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("24")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("number of spacing on the left side of the grid")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("push")]),a("td",[s._v("number of columns that grid moves to the right")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("pull")]),a("td",[s._v("number of columns that grid moves to the left")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("xs")]),a("td",[a("code",[s._v("<768px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sm")]),a("td",[a("code",[s._v("≥768px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("md")]),a("td",[a("code",[s._v("≥992")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lg")]),a("td",[a("code",[s._v("≥1200")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (e.g. {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("tag")]),a("td",[s._v("custom element tag")]),a("td",[s._v("string")]),a("td",[s._v("*")]),a("td",[s._v("div")])])])])}]}},function(s,t,a){s.exports=a(519)},function(s,t,a){function l(s){a(520)}var e=a(13)(a(522),a(523),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(521);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("7fe0c8d4",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-loading .el-table{border:none}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={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,loading2:!0,fullscreenLoading:!1}},methods:{openFullScreen:function(){var s=this;this.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},3e3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Show animation while loading data.")]),s._m(1),a("p",[s._v("Displays animation in a container (such as a table) while loading data.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\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",style:"\n body {\n margin: 0;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading.body",value:s.loading,expression:"loading",modifiers:{body:!0}}],staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Element provides two ways to invoke Loading: directive and service. For the custom directive "),a("code",[s._v("v-loading")]),s._v(", you just need to bind a "),a("code",[s._v("boolean")]),s._v(" value to it. By default, the loading mask will append to the element where the directive is used. Adding the "),a("code",[s._v("body")]),s._v(" modifier makes the mask append to the body element.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading.body")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-tag"},[s._v("body")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize a text message.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...",data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Add attribute "),a("code",[s._v("element-loading-text")]),s._v(" to the element on which "),a("code",[s._v("v-loading")]),s._v(" is bound, and its value will be displayed under the spinner.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("element-loading-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Loading..."')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518, Jinshajiang Road, Putuo District'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("loading2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Show a full screen animation while loading data.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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 }, 3000);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:s.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:s.openFullScreen}},[s._v("\n Full screen loading for 3 seconds\n ")])]],2),a("p",[s._v("Add the "),a("code",[s._v("fullscreen")]),s._v(" modifier to create a full screen mask, and it will append to body. In this case, if you disable scrolling on body, you add another modifier "),a("code",[s._v("lock")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"openFullScreen"')]),s._v("\n "),a("span",{staticClass:"hljs-attr" +},[s._v("v-loading.fullscreen.lock")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fullscreenLoading"')]),s._v(">")]),s._v("\n Full screen loading for 3 seconds\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreenLoading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n openFullScreen() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can also invoke Loading with a service. Import Loading service:")]),s._m(5),a("p",[s._v("Invoke it:")]),s._m(6),s._m(7),s._m(8),a("p",[s._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:")]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-inside-a-container"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-inside-a-container","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading inside a container")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"full-screen-loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#full-screen-loading","aria-hidden":"true"}},[s._v("¶")]),s._v(" Full screen loading")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"service"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[s._v("¶")]),s._v(" Service")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Loading } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("Loading.service(options);\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The parameter "),a("code",[s._v("options")]),s._v(" is the configuration of Loading, and its details can be found in the following table. "),a("code",[s._v("LoadingService")]),s._v(" returns a Loading instance, and you can close it by invoking its "),a("code",[s._v("close")]),s._v(" method:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),a("span",{staticClass:"hljs-comment"},[s._v("// true")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Calling the "),a("code",[s._v("close")]),s._v(" method on any one of them can close this full screen Loading.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If Element is imported entirely, a globally method "),a("code",[s._v("$loading")]),s._v(" will be registered to Vue.prototype. You can invoke it like this: "),a("code",[s._v("this.$loading(options)")]),s._v(", and it also returns a Loading instance.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("target")]),a("td",[s._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 "),a("code",[s._v("document.querySelector")]),s._v(" to get the corresponding DOM node")]),a("td",[s._v("object/string")]),a("td",[s._v("—")]),a("td",[s._v("document.body")])]),a("tr",[a("td",[s._v("body")]),a("td",[s._v("same as the "),a("code",[s._v("body")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("same as the "),a("code",[s._v("fullscreen")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock")]),a("td",[s._v("same as the "),a("code",[s._v("lock")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text")]),a("td",[s._v("loading text that displays under the spinner")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Loading")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(525)},function(s,t,a){function l(s){a(526)}var e=a(13)(a(528),a(529),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(527);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("39d19a72",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-menu .el-menu-demo{padding-left:55px}.demo-box.demo-menu .el-menu-vertical-demo:not(.el-menu--collapse){width:200px;min-height:400px}.demo-box.demo-menu .line{height:1px;background-color:#e0e6ed;margin:35px -24px}.demo-box.demo-menu h5{font-size:14px;color:#8492a6;margin-top:10px}.demo-box.demo-menu .tac{text-align:center}.demo-box.demo-menu .tac .el-menu-vertical-demo{display:inline-block;text-align:left}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeIndex:"1",activeIndex2:"1",isCollapse:!0}},methods:{handleOpen:function(s,t){console.log(s,t)},handleClose:function(s,t){console.log(s,t)},handleSelect:function(s,t){console.log(s,t)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Menu that provides navigation for your website.")]),s._m(1),a("p",[s._v("Top bar NavMenu can be used in a variety of scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Processing Center\n \n \n item one\n item two\n item three\n \n Orders\n\n
    \n\n Processing Center\n \n \n item one\n item two\n item three\n \n Orders\n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-menu",{staticClass:"el-menu-demo",attrs:{theme:"dark","default-active":s.activeIndex,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("Workspace")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1),a("div",{staticClass:"line"}),a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex2,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("Workspace")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1)],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleSelect(key, keyPath) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Vertical NavMenu with sub-menus.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    With icons
    \n \n \n \n \n item one\n item one\n \n \n item three\n \n \n \n item one\n \n \n Navigator Two\n Navigator Three\n \n     \n \n
    Without icons
    \n \n \n \n \n item one\n item two\n \n \n item three\n \n \n \n item one\n \n \n Navigator Two\n Navigator Three\n \n     \n \n
    Groups
    \n \n \n Navigator One\n Navigator Two\n \n \n Navigator Three\n Navigator Four\n \n \n     \n    \n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:8}},[a("h5",[s._v("With icons")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item one")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),s._v("Navigator Two")]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),s._v("Navigator Three")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("Without icons")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",theme:"dark"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[s._v("Navigator One")]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item two")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[s._v("Navigator Two")]),a("el-menu-item",{attrs:{index:"3"}},[s._v("Navigator Three")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("Groups")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{mode:"vertical","default-active":"1"}},[a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Two")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Three")]),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Four")])],1)],1)],1)],1)],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tac"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("With icons"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group One"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{ staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("Without icons"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group One"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("Groups"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group One"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("Navigator Four"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleOpen(key, keyPath) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n },\n handleClose(key, keyPath) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Vertical NavMenu could be collapsed.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n expand\n collapse\n\n\n \n \n \n Group One\n item one\n item two\n \n \n item three\n \n \n item four\n item one\n \n \n \n \n Navigator Two\n \n \n \n Navigator Three\n \n\n\n\n\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",style:"\n .el-menu-vertical-demo:not(.el-menu--collapse) {\n width: 200px;\n min-height: 400px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:s.isCollapse,callback:function(t){s.isCollapse=t},expression:"isCollapse"}},[a("el-radio-button",{attrs:{label:!1}},[s._v("expand")]),a("el-radio-button",{attrs:{label:!0}},[s._v("collapse")])],1),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:s.isCollapse},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),a("span",{slot:"title"},[s._v("Navigator One")])]),a("el-menu-item-group",[a("span",{slot:"title"},[s._v("Group One")]),a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item two")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("span",{slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],1)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),a("span",{slot:"title"},[s._v("Navigator Two")])]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),a("span",{slot:"title"},[s._v("Navigator Three")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"isCollapse"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("expand"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("collapse"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":collapse")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"isCollapse"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Group One"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-menu-vertical-demo")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":not(.el-menu--collapse)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("min-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("400px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("isCollapse")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleOpen(key, keyPath) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n },\n handleClose(key, keyPath) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"navmenu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[s._v("¶")]),s._v(" NavMenu")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"top-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Top bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"side-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Side bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("mode")]),a("td",[s._v("menu display mode")]),a("td",[s._v("string")]),a("td",[s._v("horizontal/vertical")]),a("td",[s._v("vertical")])]),a("tr",[a("td",[s._v("collapse")]),a("td",[s._v("whether the menu is collapsed (available only in vertical mode)")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("theme")]),a("td",[s._v("theme color")]),a("td",[s._v("string")]),a("td",[s._v("light/dark")]),a("td",[s._v("light")])]),a("tr",[a("td",[s._v("default-active")]),a("td",[s._v("index of currently active menu")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-openeds")]),a("td",[s._v("array that contains keys of currently active sub-menus")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("unique-opened")]),a("td",[s._v("whether only one sub-menu can be active")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("menu-trigger")]),a("td",[s._v("how sub-menus are triggered, only works when "),a("code",[s._v("mode")]),s._v(" is 'horizontal'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("router")]),a("td",[s._v("whether "),a("code",[s._v("vue-router")]),s._v(" mode is activated. If true, index will be used as 'path' to activate the route action")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])]); },function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("callback function when menu is activated")]),a("td",[s._v("index: index of activated menu, indexPath: index path of activated menu")])]),a("tr",[a("td",[s._v("open")]),a("td",[s._v("callback function when sub-menu expands")]),a("td",[s._v("index: index of expanded sub-menu, indexPath: index path of expanded sub-menu")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("callback function when sub-menu collapses")]),a("td",[s._v("index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("callback function when menu-item is clicked")]),a("td",[s._v("el: menu-item instance")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"submenu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" SubMenu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("unique identification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("unique identification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("route")]),a("td",[s._v("Vue Router object")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-group-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Group Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("group title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(531)},function(s,t,a){var l=a(13)(a(532),a(533),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{open:function(){var s=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(t){s.$message({type:"info",message:"action: "+t})}})},open2:function(){var s=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){setTimeout(function(){s.$message({message:"Delete completed",type:"success"})},200)}).catch(function(){setTimeout(function(){s.$message({message:"Delete canceled",type:"info"})},200)})},open3:function(){var s=this;this.$prompt("Please input your email","Tips",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+\/=?^_`{|}~-]+(?:\.[\w!#$%&'*+\/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(t){var a=t.value;setTimeout(function(){s.$message({type:"success",message:"Your email is:"+a})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"Input canceled"})},200)})},open4:function(){var s=this,t=this.$createElement;this.$msgbox({title:"Message",message:t("p",null,[t("span",null,"Message can be "),t("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Cancel",beforeClose:function(s,t,a){"confirm"===s?(t.confirmButtonLoading=!0,t.confirmButtonText="Loading...",setTimeout(function(){a(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):a()}}).then(function(t){setTimeout(function(){s.$message({type:"info",message:"action: "+t})},200)})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information.")]),s._m(1),a("p",[s._v("Alert interrupts user operation until the user confirms.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open}},[s._v("Click to open the Message Box")])]],2),a("p",[s._v("Open an alert by calling the "),a("code",[s._v("$alert")]),s._v(" method. It simulates the system's "),a("code",[s._v("alert")]),s._v(", and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters "),a("code",[s._v("message")]),s._v(" and "),a("code",[s._v("title")]),s._v(" are received. It is worth mentioning that when the box is closed, it returns a "),a("code",[s._v("Promise")]),s._v(" object for further processing. If you are not sure if your target browsers support "),a("code",[s._v("Promise")]),s._v(", you should import a third party polyfill or use callbacks instead like this example.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("Click to open the Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$alert("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Title'")]),s._v(", {\n "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("callback")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`action: "),a("span",{staticClass:"hljs-subst"},[s._v("${ action }")]),s._v("`")]),s._v("\n });\n }\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Confirm is used to ask users' confirmation.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open2}},[s._v("Click to open the Message Box")])]],2),a("p",[s._v("Call "),a("code",[s._v("$confirm")]),s._v(" method to open a confirm, and it simulates the system's "),a("code",[s._v("confirm")]),s._v(". We can also highly customize Message Box by passing a third attribute "),a("code",[s._v("options")]),s._v(" which is a literal object. The attribute "),a("code",[s._v("type")]),s._v(" indicates the message type, and it's value can be "),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("error")]),s._v(", "),a("code",[s._v("info")]),s._v(" and "),a("code",[s._v("warning")]),s._v(". Note that the second attribute "),a("code",[s._v("title")]),s._v(" must be a "),a("code",[s._v("string")]),s._v(", and if it is an "),a("code",[s._v("object")]),s._v(", it will be handled as the attribute "),a("code",[s._v("options")]),s._v(". Here we use "),a("code",[s._v("Promise")]),s._v(" to handle further processing.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("Click to open the Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open2() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm("),a("span",{staticClass:"hljs-string"},[s._v("'This will permanently delete the file. Continue?'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Warning'")]),s._v(", {\n "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Delete completed'")]),s._v("\n });\n }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Delete canceled'")]),s._v("\n }); \n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Prompt is used when user input is required.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open3}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("Call "),a("code",[s._v("$prompt")]),s._v(" method to open a prompt, and it simulates the system's "),a("code",[s._v("prompt")]),s._v(". You can use "),a("code",[s._v("inputPattern")]),s._v(" parameter to specify your own RegExp pattern. Use "),a("code",[s._v("inputValidator")]),s._v(" to specify validation method, and it should return "),a("code",[s._v("Boolean")]),s._v(" or "),a("code",[s._v("String")]),s._v(". Returning "),a("code",[s._v("false")]),s._v(" or "),a("code",[s._v("String")]),s._v(" means the validation has failed, and the string returned will be used as the "),a("code",[s._v("inputErrorMessage")]),s._v(". In addition, you can customize the placeholder of the input box with "),a("code",[s._v("inputPlaceholder")]),s._v(" parameter.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open3() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$prompt("),a("span",{staticClass:"hljs-string"},[s._v("'Please input your e-mail'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tip'")]),s._v(", {\n "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("inputPattern")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("inputErrorMessage")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Invalid Email'")]),s._v("\n }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("value")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Your email is:'")]),s._v(" + value\n });\n }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input canceled'")]),s._v("\n }); \n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Can be customized to show various content.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open4}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("The three methods mentioned above are repackagings of the "),a("code",[s._v("$msgbox")]),s._v(" method. This example calls "),a("code",[s._v("$msgbox")]),s._v(" method directly using the "),a("code",[s._v("showCancelButton")]),s._v(" attribute, which is used to indicate if a cancel button is displayed. Besides we can use "),a("code",[s._v("cancelButtonClass")]),s._v(" to add a custom style and "),a("code",[s._v("cancelButtonText")]),s._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 "),a("code",[s._v("beforeClose")]),s._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: "),a("code",[s._v("action")]),s._v(", "),a("code",[s._v("instance")]),s._v(" and "),a("code",[s._v("done")]),s._v(". Using it enables you to manipulate the instance before it closes, e.g. activating "),a("code",[s._v("loading")]),s._v(" for confirm button; you can invoke the "),a("code",[s._v("done")]),s._v(" method to close the MessageBox instance (if "),a("code",[s._v("done")]),s._v(" is not called inside "),a("code",[s._v("beforeClose")]),s._v(", the instance will not be closed).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open4() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" h = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$createElement;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$msgbox({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": h("),a("span",{staticClass:"hljs-string"},[s._v("'p'")]),s._v(", "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(", [\n h("),a("span",{staticClass:"hljs-string"},[s._v("'span'")]),s._v(", "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Message can be '")]),s._v("),\n h("),a("span",{staticClass:"hljs-string"},[s._v("'i'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color: teal'")]),s._v(" }, "),a("span",{staticClass:"hljs-string"},[s._v("'VNode'")]),s._v(")\n ]),\n "),a("span",{staticClass:"hljs-attr"},[s._v("showCancelButton")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("beforeClose")]),s._v(": "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("action, instance, done")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'confirm'")]),s._v(") {\n instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n instance.confirmButtonText = "),a("span",{staticClass:"hljs-string"},[s._v("'Loading...'")]),s._v(";\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n done();\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n done();\n }\n }\n }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'action: '")]),s._v(" + action\n });\n });\n },\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"messagebox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[s._v("¶")]),s._v(" MessageBox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"confirm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[s._v("¶")]),s._v(" Confirm")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"prompt"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prompt")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customization")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added the following global methods for Vue.prototype: "),a("code",[s._v("$msgbox")]),s._v(", "),a("code",[s._v("$alert")]),s._v(", "),a("code",[s._v("$confirm")]),s._v(" and "),a("code",[s._v("$prompt")]),s._v(". So in a vue instance you can call "),a("code",[s._v("MessageBox")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",[s._v("MessageBox")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { MessageBox } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The corresponding methods are: "),a("code",[s._v("MessageBox")]),s._v(", "),a("code",[s._v("MessageBox.alert")]),s._v(", "),a("code",[s._v("MessageBox.confirm")]),s._v(" and "),a("code",[s._v("MessageBox.prompt")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of the MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("content of the MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("message type, used for icon display")]),a("td",[s._v("string")]),a("td",[s._v("success/info/warning/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("callback")]),a("td",[s._v("MessageBox closing callback if you don't prefer Promise")]),a("td",[s._v("function(action), where action can be 'confirm' or 'cancel', and "),a("code",[s._v("instance")]),s._v(" is the MessageBox instance. You can access to that instance's attributes and methods")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("beforeClose")]),a("td",[s._v("callback before MessageBox closes, and it will prevent MessageBox from closing")]),a("td",[s._v("function(action, instance, done), where "),a("code",[s._v("action")]),s._v(" can be 'confirm' or 'cancel'; "),a("code",[s._v("instance")]),s._v(" is the MessageBox instance, and you can access to that instance's attributes and methods; "),a("code",[s._v("done")]),s._v(" is for closing the instance")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lockScroll")]),a("td",[s._v("whether to lock body scroll when MessageBox prompts")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("showCancelButton")]),a("td",[s._v("whether to show a cancel button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false (true when called with confirm and prompt)")])]),a("tr",[a("td",[s._v("showConfirmButton")]),a("td",[s._v("whether to show a confirm button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("cancelButtonText")]),a("td",[s._v("text content of cancel button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Cancel")])]),a("tr",[a("td",[s._v("confirmButtonText")]),a("td",[s._v("text content of confirm button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("OK")])]),a("tr",[a("td",[s._v("cancelButtonClass")]),a("td",[s._v("custom class name of cancel button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("confirmButtonClass")]),a("td",[s._v("custom class name of confirm button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closeOnClickModal")]),a("td",[s._v("whether MessageBox can be closed by clicking the mask")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true (false when called with alert)")])]),a("tr",[a("td",[s._v("closeOnPressEscape")]),a("td",[s._v("whether MessageBox can be closed by pressing the ESC")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true (false when called with alert)")])]),a("tr",[a("td",[s._v("showInput")]),a("td",[s._v("whether to show an input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false (true when called with prompt)")])]),a("tr",[a("td",[s._v("inputPlaceholder")]),a("td",[s._v("placeholder of input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValue")]),a("td",[s._v("initial value of input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputPattern")]),a("td",[s._v("regexp for the input")]),a("td",[s._v("regexp")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValidator")]),a("td",[s._v("validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputErrorMessage")]),a("td",[s._v("error message when validation fails")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Illegal input")])])])]); }]}},function(s,t,a){s.exports=a(535)},function(s,t,a){var l=a(13)(a(536),a(537),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){this.$message("This is a message.")},openVn:function(){var s=this.$createElement;this.$message({message:s("p",null,[s("span",null,"Message can be "),s("i",{style:"color: teal"},"VNode")])})},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.")},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"})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._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.")]),s._m(1),a("p",[s._v("Displays at the top, and disappears after 3 seconds.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("Show message")]),a("el-button",{attrs:{plain:!0},on:{click:s.openVn}},[s._v("VNode")])]],2),a("p",[s._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 "),a("code",[s._v("$message")]),s._v(" method for invoking. Message can take a string or VNode as parameter, and it will be shown as the main body.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("Show message"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"openVn"')]),s._v(">")]),s._v("VNode"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message.'")]),s._v(");\n },\n \n openVn() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" h = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$createElement;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": h("),a("span",{staticClass:"hljs-string"},[s._v("'p'")]),s._v(", "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(", [\n h("),a("span",{staticClass:"hljs-string"},[s._v("'span'")]),s._v(", "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Message can be '")]),s._v("),\n h("),a("span",{staticClass:"hljs-string"},[s._v("'i'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color: teal'")]),s._v(" }, "),a("span",{staticClass:"hljs-string"},[s._v("'VNode'")]),s._v(")\n ])\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Used to show the feedback of Success, Warning, Message and Error activities.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open2}},[s._v("success")]),a("el-button",{attrs:{plain:!0},on:{click:s.open3}},[s._v("warning")]),a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("message")]),a("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("error")])]],2),a("p",[s._v("When you need more customizations, Message component can also take an object as parameter. For example, setting value of "),a("code",[s._v("type")]),s._v(" can define different types, and its default is "),a("code",[s._v("info")]),s._v(". In such cases the main body is passed in as the value of "),a("code",[s._v("message")]),s._v(". Also, we have registered methods for different types, so you can directly call it without passing a type like "),a("code",[s._v("open4")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("success"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("warning"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("message"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("error"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message.'")]),s._v(");\n },\n open2() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Congrats, this is a success message.'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n });\n },\n\n open3() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning, this is a warning message.'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n });\n },\n\n open4() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'Oops, this is a error message.'")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("A close button can be added.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open5}},[s._v("message")]),a("el-button",{attrs:{plain:!0},on:{click:s.open6}},[s._v("success")]),a("el-button",{attrs:{plain:!0},on:{click:s.open7}},[s._v("warning")]),a("el-button",{attrs:{plain:!0},on:{click:s.open8}},[s._v("error")])]],2),a("p",[s._v("A default Message cannot be closed manually. If you need a closable message, you can set "),a("code",[s._v("showClose")]),s._v(" field. Besides, same as notification, message has a controllable "),a("code",[s._v("duration")]),s._v(". Default duration is 3000 ms, and it won't disappear when set to "),a("code",[s._v("0")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("message"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("success"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("warning"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open8"')]),s._v(">")]),s._v("error"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open5() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a message.'")]),s._v("\n });\n },\n\n open6() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Congrats, this is a success message.'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n });\n },\n\n open7() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning, this is a warning message.'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n });\n },\n\n open8() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Oops, this is a error message.'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'error'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"message"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[s._v("¶")]),s._v(" Message")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[s._v("¶")]),s._v(" Types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"closable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Closable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added a global method "),a("code",[s._v("$message")]),s._v(" for Vue.prototype. So in a vue instance you can call "),a("code",[s._v("Message")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",[s._v("Message")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Message } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In this case you should call "),a("code",[s._v("Message(options)")]),s._v(". We have also registered methods for different types, e.g. "),a("code",[s._v("Message.success(options)")]),s._v(".\nYou can call "),a("code",[s._v("Message.closeAll()")]),s._v(" to manually close all the instances.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("message")]),a("td",[s._v("message text")]),a("td",[s._v("string / VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("message type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class, overrides "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Message")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("display duration, millisecond. If set to 0, it will not turn off automatically")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed with the message instance as the parameter")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Message")]),s._v(" and "),a("code",[s._v("this.$message")]),s._v(" returns the current Message instance. To manually close the instance, you can call "),a("code",[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Message")])])])])}]}},function(s,t,a){s.exports=a(539)},function(s,t,a){var l=a(13)(a(540),a(541),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){var s=this.$createElement;this.$notify({title:"Title",message:s("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})},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"})},open7:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})},onClose:function(){console.log("Notification is closed")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays a global notification message at the upper right corner of the page.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open}},[s._v("\n Closes automatically\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open2}},[s._v("\n Won't close automatically\n ")])]],2),a("p",[s._v("Element has registered the "),a("code",[s._v("$notify")]),s._v(" method and it receives an object as its parameter. In the simplest case, you can set the "),a("code",[s._v("title")]),s._v(" field and the"),a("code",[s._v("message")]),s._v(" field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting "),a("code",[s._v("duration")]),s._v(" you can control its duration. Specifically, if set to "),a("code",[s._v("0")]),s._v(", it will not close automatically. Note that "),a("code",[s._v("duration")]),s._v(" receives a "),a("code",[s._v("Number")]),s._v(" in milliseconds.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("\n Closes automatically\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("\n Won't close automatically\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" h = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$createElement;\n\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Title'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": h("),a("span",{staticClass:"hljs-string"},[s._v("'i'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color: teal'")]),s._v(" }, "),a("span",{staticClass:"hljs-string"},[s._v("'This is a reminder'")]),s._v(")\n });\n },\n\n open2() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Prompt'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a message that does not automatically close'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("duration")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("We provide four types: success, warning, info and error.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open3}},[s._v("\n Success\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open4}},[s._v("\n Warning\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open5}},[s._v("\n Info\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open6}},[s._v("\n Error\n ")])]],2),a("p",[s._v("Element provides four notification types: "),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("warning")]),s._v(", "),a("code",[s._v("info")]),s._v(" and "),a("code",[s._v("error")]),s._v(". They are set by the "),a("code",[s._v("type")]),s._v(" field, and other values will be ignored. We also registered methods for these types that can be invoked directly like "),a("code",[s._v("open5")]),s._v(" and "),a("code",[s._v("open6")]),s._v(" without passing a "),a("code",[s._v("type")]),s._v(" field.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{ -staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("\n Success\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("\n Warning\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("\n Info\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("\n Error\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open3() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Success'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a success message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n });\n },\n\n open4() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a warning message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n });\n },\n\n open5() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.info({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Info'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is an info message'")]),s._v("\n });\n },\n\n open6() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.error({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Error'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is an error message'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Customize Notification's offset from the top edge of the screen")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open7() {\n this.$notify.success({\n title: 'Success',\n message: 'This is a success message',\n offset: 100\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n Notification with offset\n ")])]],2),a("p",[s._v("Set the "),a("code",[s._v("offset")]),s._v(" attribute to customize Notification's offset from the top edge of the screen. Note that every Notification instance of the same moment should have the same offset.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("\n Notification with offset\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open7() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.success({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Success'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a success message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("offset")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"notification"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-types","aria-hidden":"true"}},[s._v("¶")]),s._v(" With types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" With offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added a global method "),a("code",[s._v("$notify")]),s._v(" for Vue.prototype. So in a vue instance you can call "),a("code",[s._v("Notification")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",[s._v("Notification")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Notification } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In this case you should call "),a("code",[s._v("Notification(options)")]),s._v(". We have also registered methods for different types, e.g. "),a("code",[s._v("Notification.success(options)")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("description text")]),a("td",[s._v("string/Vue.VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("notification type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class. It will be overridden by "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Notification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("duration before close. It will not automatically close if set 0")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4500")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function when notification clicked")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Notification")]),s._v(" and "),a("code",[s._v("this.$notify")]),s._v(" returns the current Message instance. To manually close the instance, you can call "),a("code",[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Notification")])])])])}]}},function(s,t,a){s.exports=a(543)},function(s,t,a){function l(s){a(544)}var e=a(13)(a(546),a(547),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(545);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("5c360e98",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-pagination .source.first{padding:0}.demo-pagination .first .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;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{float:right;width:70%;margin:5px 20px 0 0}",""])},function(s,t,a){"use strict";t.__esModule=!0;var l=a(144);t.default={data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},methods:{handleSizeChange:function(s){console.log(s+" items per page")},handleCurrentChange:function(s){console.log("current page: "+s)}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[0],a=s[s.length-1];(0,l.addClass)(t,"first"),(0,l.addClass)(a,"last")})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("If you have too much data to display in one page, use pagination.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n When you have few pages\n \n \n
    \n
    \n When you have more than 7 pages\n \n \n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("When you have few pages")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("When you have more than 7 pages")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)]),a("p",[s._v("Set "),a("code",[s._v("layout")]),s._v(" with different pagination elements you wish to display separated with a comma. Pagination elements are: "),a("code",[s._v("prev")]),s._v(" (a button navigating to the previous page), "),a("code",[s._v("next")]),s._v(" (a button navigating to the next page), "),a("code",[s._v("pager")]),s._v(" (page list), "),a("code",[s._v("jumper")]),s._v(" (a jump-to input), "),a("code",[s._v("total")]),s._v(" (total item count), "),a("code",[s._v("size")]),s._v(" (a select to determine page size) and "),a("code",[s._v("->")]),s._v("(every element after this symbol will be pulled to the right).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have few pages"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have more than 7 pages"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Use small pagination in the case of limited space.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1),a("p",[s._v("Just set the "),a("code",[s._v("small")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" and the Pagination becomes smaller.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("small")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Add more modules based on your scenario.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Total item count")]),a("el-pagination",{attrs:{"current-page":s.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Change page size")]),a("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage2=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Jump to")]),a("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage3=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("All combined")]),a("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage4=t}}})],1)]],2),a("p",[s._v("This example is a complete use case. It uses "),a("code",[s._v("size-change")]),s._v(" and "),a("code",[s._v("current-change")]),s._v(" event to handle page size changes and current page changes. "),a("code",[s._v("page-sizes")]),s._v(" accepts an array of integers, each of which represents a different page size in the "),a("code",[s._v("sizes")]),s._v(" select options, e.g. "),a("code",[s._v("[100, 200, 300, 400]")]),s._v(" indicates that the select will have four options: 100, 200, 300 or 400 items per page.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Total item count"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Change page size"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sizes, prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Jump to"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next, jumper"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("All combined"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, sizes, prev, pager, next, jumper"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword" -},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleSizeChange(val) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`"),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v(" items per page`")]),s._v(");\n },\n handleCurrentChange(val) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`current page: "),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v("`")]),s._v(");\n }\n },\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"small-pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#small-pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Small Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-elements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-elements","aria-hidden":"true"}},[s._v("¶")]),s._v(" More elements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("small")]),a("td",[s._v("whether to use small pagination")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("page-size")]),a("td",[s._v("item count of each page")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("10")])]),a("tr",[a("td",[s._v("total")]),a("td",[s._v("total item count")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("page-count")]),a("td",[s._v("total page count. Set either "),a("code",[s._v("total")]),s._v(" or "),a("code",[s._v("page-count")]),s._v(" and pages will be displayed; if you need "),a("code",[s._v("page-sizes")]),s._v(", "),a("code",[s._v("total")]),s._v(" is required")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("current-page")]),a("td",[s._v("current page number, supports the .sync modifier")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("layout")]),a("td",[s._v("layout of Pagination, elements separated with a comma")]),a("td",[s._v("string")]),a("td",[a("code",[s._v("sizes")]),s._v(", "),a("code",[s._v("prev")]),s._v(", "),a("code",[s._v("pager")]),s._v(", "),a("code",[s._v("next")]),s._v(", "),a("code",[s._v("jumper")]),s._v(", "),a("code",[s._v("->")]),s._v(", "),a("code",[s._v("total")]),s._v(", "),a("code",[s._v("slot")])]),a("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[s._v("page-sizes")]),a("td",[s._v("options of item count per page")]),a("td",[s._v("number[]")]),a("td",[s._v("—")]),a("td",[s._v("[10, 20, 30, 40, 50, 100]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("size-change")]),a("td",[s._v("triggers when "),a("code",[s._v("page-size")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",[s._v("page-size")])])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when "),a("code",[s._v("current-page")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",[s._v("current-page")])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("custom content. To use this, you need to declare "),a("code",[s._v("slot")]),s._v(" in "),a("code",[s._v("layout")])])])])])}]}},function(s,t,a){s.exports=a(549)},function(s,t,a){function l(s){a(550)}var e=a(13)(a(552),a(553),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(551);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("6b7cde51",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-popover .el-popover+.el-popover{margin-left:10px}.demo-box.demo-popover .el-input{width:360px}.demo-box.demo-popover .el-button{margin-left:10px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{visible2:!1,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"}],gridData2:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City",$info:!0},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City",$positive:!0}],gridData3:[{tag:"Home",date:"2016-05-03",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-02",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-04",name:"Jack",address:"New York City"},{tag:"Home",date:"2016-05-01",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-08",name:"Jack",address:"New York City"},{tag:"Home",date:"2016-05-06",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-07",name:"Jack",address:"New York City"}],singleSelection:{},multipleSelection:[],model:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\nHover to activate\nClick to activate\n\n Focus to activate\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}}),a("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}}),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[s._v("Hover to activate")]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[s._v("Click to activate")]),a("el-popover",{attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}},[a("el-button",{slot:"reference"},[s._v("Focus to activate")])],1)],1),a("p",[s._v("Add "),a("code",[s._v("ref")]),s._v(" in your popover, then in your button, use "),a("code",[s._v("v-popover")]),s._v(" directive to link the button and the popover. The attribute "),a("code",[s._v("trigger")]),s._v(" is used to define how popover is triggered: "),a("code",[s._v("hover")]),s._v(", "),a("code",[s._v("click")]),s._v(" or "),a("code",[s._v("focus")]),s._v(". Alternatively, you can specify reference using a named "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover1")]),s._v(">")]),s._v("Hover to activate"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover2")]),s._v(">")]),s._v("Click to activate"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"focus"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(">")]),s._v("Focus to activate"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Other components can be nested in popover. Following is an example of nested table.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n\n\nClick to activate\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover4",attrs:{placement:"right",width:"400",trigger:"click"}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),a("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),a("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1)],1),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover4",arg:"popover4"}]},[s._v("Click to activate")])],1),a("p",[s._v("replace the "),a("code",[s._v("content")]),s._v(" attribute with a default "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover4")]),s._v(">")]),s._v("Click to activate"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n }]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Of course, you can nest other operations. It's more light-weight than using a dialog.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n

    Are you sure to delete this?

    \n
    \n cancel\n confirm\n
    \n    \n\nDelete\n\n\n',script:"\n export default {\n data() {\n return {\n visible2: false,\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover5",attrs:{placement:"top",width:"160"},model:{value:s.visible2,callback:function(t){s.visible2=t},expression:"visible2"}},[a("p",[s._v("Are you sure to delete this?")]),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(t){s.visible2=!1}}},[s._v("cancel")]),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){s.visible2=!1}}},[s._v("confirm")])],1)]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},[s._v("Delete")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover5"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"160"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Are you sure to delete this?"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text-align: right; margin: 0"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("cancel"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("confirm"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover5")]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("visible2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"popover"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[s._v("¶")]),s._v(" Popover")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Similar to Tooltip, Popover is also built with "),a("code",[s._v("Vue-popper")]),s._v(". So for some duplicated attributes, please refer to the documentation of Tooltip.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-information"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-information","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested information")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-operation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-operation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested operation")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how the popover is triggered")]),a("td",[s._v("string")]),a("td",[s._v("click/focus/hover/manual")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("popover title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("popover content, can be replaced with a default "),a("code",[s._v("slot")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("popover width")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("Min width 150px")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("popover placement")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Popover is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("whether popover is visible")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("popover offset")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("popover transition animation")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether a tooltip arrow is displayed or not. For more info, please refer to "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[s._v("parameters for "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),a("td",[s._v("object")]),a("td",[s._v("please refer to "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),a("td",[a("code",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for popover")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("delay of appearance when "),a("code",[s._v("trigger")]),s._v(" is hover, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("text content of popover")])]),a("tr",[a("td",[s._v("reference")]),a("td",[s._v("HTML element that triggers popover")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor", +staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("\n Success\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("\n Warning\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("\n Info\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("\n Error\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open3() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Success'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a success message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n });\n },\n\n open4() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a warning message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n });\n },\n\n open5() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.info({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Info'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is an info message'")]),s._v("\n });\n },\n\n open6() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.error({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Error'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is an error message'")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Customize Notification's offset from the top edge of the screen")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n open7() {\n this.$notify.success({\n title: 'Success',\n message: 'This is a success message',\n offset: 100\n });\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n Notification with offset\n ")])]],2),a("p",[s._v("Set the "),a("code",[s._v("offset")]),s._v(" attribute to customize Notification's offset from the top edge of the screen. Note that every Notification instance of the same moment should have the same offset.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("\n Notification with offset\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open7() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.success({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Success'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a success message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("offset")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"notification"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-types","aria-hidden":"true"}},[s._v("¶")]),s._v(" With types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" With offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added a global method "),a("code",[s._v("$notify")]),s._v(" for Vue.prototype. So in a vue instance you can call "),a("code",[s._v("Notification")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",[s._v("Notification")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Notification } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In this case you should call "),a("code",[s._v("Notification(options)")]),s._v(". We have also registered methods for different types, e.g. "),a("code",[s._v("Notification.success(options)")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("description text")]),a("td",[s._v("string/Vue.VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("notification type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class. It will be overridden by "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Notification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("duration before close. It will not automatically close if set 0")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4500")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function when notification clicked")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Notification")]),s._v(" and "),a("code",[s._v("this.$notify")]),s._v(" returns the current Message instance. To manually close the instance, you can call "),a("code",[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Notification")])])])])}]}},function(s,t,a){s.exports=a(543)},function(s,t,a){function l(s){a(544)}var e=a(13)(a(546),a(547),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(545);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("5c2d19c0",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-pagination .source.first{padding:0}.demo-pagination .first .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;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{float:right;width:70%;margin:5px 20px 0 0}",""])},function(s,t,a){"use strict";t.__esModule=!0;var l=a(144);t.default={data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},methods:{handleSizeChange:function(s){console.log(s+" items per page")},handleCurrentChange:function(s){console.log("current page: "+s)}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[0],a=s[s.length-1];(0,l.addClass)(t,"first"),(0,l.addClass)(a,"last")})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("If you have too much data to display in one page, use pagination.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n When you have few pages\n \n \n
    \n
    \n When you have more than 7 pages\n \n \n
    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("When you have few pages")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("When you have more than 7 pages")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)]),a("p",[s._v("Set "),a("code",[s._v("layout")]),s._v(" with different pagination elements you wish to display separated with a comma. Pagination elements are: "),a("code",[s._v("prev")]),s._v(" (a button navigating to the previous page), "),a("code",[s._v("next")]),s._v(" (a button navigating to the next page), "),a("code",[s._v("pager")]),s._v(" (page list), "),a("code",[s._v("jumper")]),s._v(" (a jump-to input), "),a("code",[s._v("total")]),s._v(" (total item count), "),a("code",[s._v("size")]),s._v(" (a select to determine page size) and "),a("code",[s._v("->")]),s._v("(every element after this symbol will be pulled to the right).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have few pages"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have more than 7 pages"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Use small pagination in the case of limited space.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1),a("p",[s._v("Just set the "),a("code",[s._v("small")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" and the Pagination becomes smaller.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("small")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Add more modules based on your scenario.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Total item count")]),a("el-pagination",{attrs:{"current-page":s.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Change page size")]),a("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage2=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Jump to")]),a("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage3=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("All combined")]),a("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange,"update:currentPage":function(t){s.currentPage4=t}}})],1)]],2),a("p",[s._v("This example is a complete use case. It uses "),a("code",[s._v("size-change")]),s._v(" and "),a("code",[s._v("current-change")]),s._v(" event to handle page size changes and current page changes. "),a("code",[s._v("page-sizes")]),s._v(" accepts an array of integers, each of which represents a different page size in the "),a("code",[s._v("sizes")]),s._v(" select options, e.g. "),a("code",[s._v("[100, 200, 300, 400]")]),s._v(" indicates that the select will have four options: 100, 200, 300 or 400 items per page.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Total item count"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Change page size"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sizes, prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Jump to"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next, jumper"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("All combined"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page.sync")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, sizes, prev, pager, next, jumper"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword" +},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleSizeChange(val) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`"),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v(" items per page`")]),s._v(");\n },\n handleCurrentChange(val) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`current page: "),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v("`")]),s._v(");\n }\n },\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"small-pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#small-pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Small Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-elements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-elements","aria-hidden":"true"}},[s._v("¶")]),s._v(" More elements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("small")]),a("td",[s._v("whether to use small pagination")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("page-size")]),a("td",[s._v("item count of each page")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("10")])]),a("tr",[a("td",[s._v("total")]),a("td",[s._v("total item count")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("page-count")]),a("td",[s._v("total page count. Set either "),a("code",[s._v("total")]),s._v(" or "),a("code",[s._v("page-count")]),s._v(" and pages will be displayed; if you need "),a("code",[s._v("page-sizes")]),s._v(", "),a("code",[s._v("total")]),s._v(" is required")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("current-page")]),a("td",[s._v("current page number, supports the .sync modifier")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("layout")]),a("td",[s._v("layout of Pagination, elements separated with a comma")]),a("td",[s._v("string")]),a("td",[a("code",[s._v("sizes")]),s._v(", "),a("code",[s._v("prev")]),s._v(", "),a("code",[s._v("pager")]),s._v(", "),a("code",[s._v("next")]),s._v(", "),a("code",[s._v("jumper")]),s._v(", "),a("code",[s._v("->")]),s._v(", "),a("code",[s._v("total")]),s._v(", "),a("code",[s._v("slot")])]),a("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[s._v("page-sizes")]),a("td",[s._v("options of item count per page")]),a("td",[s._v("number[]")]),a("td",[s._v("—")]),a("td",[s._v("[10, 20, 30, 40, 50, 100]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("size-change")]),a("td",[s._v("triggers when "),a("code",[s._v("page-size")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",[s._v("page-size")])])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when "),a("code",[s._v("current-page")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",[s._v("current-page")])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("custom content. To use this, you need to declare "),a("code",[s._v("slot")]),s._v(" in "),a("code",[s._v("layout")])])])])])}]}},function(s,t,a){s.exports=a(549)},function(s,t,a){function l(s){a(550)}var e=a(13)(a(552),a(553),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(551);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("260fe9b6",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-popover .el-popover+.el-popover{margin-left:10px}.demo-box.demo-popover .el-input{width:360px}.demo-box.demo-popover .el-button{margin-left:10px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{visible2:!1,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"}],gridData2:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City",$info:!0},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City",$positive:!0}],gridData3:[{tag:"Home",date:"2016-05-03",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-02",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-04",name:"Jack",address:"New York City"},{tag:"Home",date:"2016-05-01",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-08",name:"Jack",address:"New York City"},{tag:"Home",date:"2016-05-06",name:"Jack",address:"New York City"},{tag:"Company",date:"2016-05-07",name:"Jack",address:"New York City"}],singleSelection:{},multipleSelection:[],model:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\nHover to activate\nClick to activate\n\n Focus to activate\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}}),a("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}}),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[s._v("Hover to activate")]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[s._v("Click to activate")]),a("el-popover",{attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}},[a("el-button",{slot:"reference"},[s._v("Focus to activate")])],1)],1),a("p",[s._v("Add "),a("code",[s._v("ref")]),s._v(" in your popover, then in your button, use "),a("code",[s._v("v-popover")]),s._v(" directive to link the button and the popover. The attribute "),a("code",[s._v("trigger")]),s._v(" is used to define how popover is triggered: "),a("code",[s._v("hover")]),s._v(", "),a("code",[s._v("click")]),s._v(" or "),a("code",[s._v("focus")]),s._v(". Alternatively, you can specify reference using a named "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover1")]),s._v(">")]),s._v("Hover to activate"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover2")]),s._v(">")]),s._v("Click to activate"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"focus"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(">")]),s._v("Focus to activate"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Other components can be nested in popover. Following is an example of nested table.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n \n\n\nClick to activate\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover4",attrs:{placement:"right",width:"400",trigger:"click"}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),a("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),a("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1)],1),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover4",arg:"popover4"}]},[s._v("Click to activate")])],1),a("p",[s._v("replace the "),a("code",[s._v("content")]),s._v(" attribute with a default "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover4")]),s._v(">")]),s._v("Click to activate"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n }]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Of course, you can nest other operations. It's more light-weight than using a dialog.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n

    Are you sure to delete this?

    \n
    \n cancel\n confirm\n
    \n    \n\nDelete\n\n\n',script:"\n export default {\n data() {\n return {\n visible2: false,\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover5",attrs:{placement:"top",width:"160"},model:{value:s.visible2,callback:function(t){s.visible2=t},expression:"visible2"}},[a("p",[s._v("Are you sure to delete this?")]),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(t){s.visible2=!1}}},[s._v("cancel")]),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){s.visible2=!1}}},[s._v("confirm")])],1)]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},[s._v("Delete")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover5"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"160"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Are you sure to delete this?"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text-align: right; margin: 0"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("cancel"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("confirm"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover5")]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("visible2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"popover"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[s._v("¶")]),s._v(" Popover")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Similar to Tooltip, Popover is also built with "),a("code",[s._v("Vue-popper")]),s._v(". So for some duplicated attributes, please refer to the documentation of Tooltip.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-information"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-information","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested information")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-operation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-operation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested operation")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how the popover is triggered")]),a("td",[s._v("string")]),a("td",[s._v("click/focus/hover/manual")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("popover title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("popover content, can be replaced with a default "),a("code",[s._v("slot")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("popover width")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("Min width 150px")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("popover placement")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Popover is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("whether popover is visible")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("popover offset")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("popover transition animation")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether a tooltip arrow is displayed or not. For more info, please refer to "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[s._v("parameters for "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),a("td",[s._v("object")]),a("td",[s._v("please refer to "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),a("td",[a("code",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for popover")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("delay of appearance when "),a("code",[s._v("trigger")]),s._v(" is hover, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("text content of popover")])]),a("tr",[a("td",[s._v("reference")]),a("td",[s._v("HTML element that triggers popover")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor", attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("show")]),a("td",[s._v("triggers when popover shows")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("hide")]),a("td",[s._v("triggers when popover hides")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(555)},function(s,t,a){var l=a(13)(null,a(556),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Progress is used to show the progress of current operation, and inform the user the current status.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{percentage:0}}),a("el-progress",{attrs:{percentage:70}}),a("el-progress",{attrs:{percentage:100,status:"success"}}),a("el-progress",{attrs:{percentage:50,status:"exception"}})],1),a("p",[s._v("Use "),a("code",[s._v("percentage")]),s._v(" attribute to set the percentage. It's "),a("strong",[s._v("required")]),s._v(" and must be between "),a("code",[s._v("0-100")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("In this case the percentage takes no additional space.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1),a("p",[a("code",[s._v("stroke-width")]),s._v(" attribute decides the "),a("code",[s._v("width")]),s._v(" of progress bar, and use "),a("code",[s._v("text-inside")]),s._v(" attribute to put description inside the progress bar.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{type:"circle",percentage:0}}),a("el-progress",{attrs:{type:"circle",percentage:25}}),a("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),a("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1),a("p",[s._v("You can specify "),a("code",[s._v("type")]),s._v(" attribute to "),a("code",[s._v("circle")]),s._v(" to use circular progress bar, and use "),a("code",[s._v("width")]),s._v(" attribute to change the size of circle.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"25"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"progress"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[s._v("¶")]),s._v(" Progress")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"linear-progress-bar-external-percentage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-external-percentage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Linear progress bar (external percentage)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"linear-progress-bar-internal-percentage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-internal-percentage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Linear progress bar (internal percentage)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"circular-progress-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#circular-progress-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Circular progress bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("percentage")])]),a("td",[s._v("percentage, "),a("strong",[s._v("required")])]),a("td",[s._v("number")]),a("td",[s._v("0-100")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("the type of progress bar")]),a("td",[s._v("string")]),a("td",[s._v("line/circle")]),a("td",[s._v("line")])]),a("tr",[a("td",[s._v("stroke-width")]),a("td",[s._v("the width of progress bar")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("6")])]),a("tr",[a("td",[s._v("text-inside")]),a("td",[s._v("whether to place the percentage inside progress bar, only works when "),a("code",[s._v("type")]),s._v(" is 'line'")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("the current status of progress bar")]),a("td",[s._v("string")]),a("td",[s._v("success/exception")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("the canvas width of circle progress bar")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("126")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("whether to show percentage")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(558)},function(s,t,a){var l=a(13)(null,a(559),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"quick-start"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},[s._v("¶")]),s._v(" Quick start")]),a("p",[s._v("This part walks you through the process of using Element in a webpack project.")]),a("h3",{attrs:{id:"use-starter-kit"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-starter-kit","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use Starter Kit")]),a("p",[s._v("We provide a general "),a("a",{attrs:{href:"https://github.com/ElementUI/element-starter/tree/1.x"}},[s._v("project template")]),s._v(" for you. For those who are familiar with "),a("a",{attrs:{href:"https://github.com/ElementUI/element-cooking-starter"}},[s._v("cooking")]),s._v(" or "),a("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter/tree/1.x"}},[s._v("Laravel")]),s._v(", we also provide corresponding templates, and you can download and use them as well.")]),a("p",[s._v("If you prefer not to use them, please read the following.")]),a("h3",{attrs:{id:"config-files"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#config-files","aria-hidden":"true"}},[s._v("¶")]),s._v(" Config files")]),a("p",[s._v("Create a new project, and its structure should be")]),a("pre",[a("code",{staticClass:"hljs language-text"},[s._v("|- src/ --------------------- source code\n |- App.vue\n |- main.js -------------- entry\n|- .babelrc ----------------- babel config\n|- index.html --------------- HTML template\n|- package.json ------------- npm config\n|- README.md ---------------- readme\n|- webpack.config.js -------- webpack config\n")])]),a("p",[s._v("Typical configurations for these config files are:")]),a("p",[a("strong",[s._v(".babelrc")])]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v('"presets"')]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v('"vue-app"')]),s._v("]\n}\n")])]),a("br"),a("p",[a("strong",[s._v("package.json")])]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v('"name"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-starter"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"scripts"')]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v('"dev"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"build"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cross-env NODE_ENV=production webpack --progress --hide-modules"')]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v('"dependencies"')]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v('"element-ui"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"legacy"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"vue"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"2.5.2"')]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v('"devDependencies"')]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-core"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.0.0"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.0.0"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-preset-vue-app"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^1.2.0"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"cross-env"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^1.0.6"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"css-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.23.1"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"file-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.8.5"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"style-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.13.1"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"vue-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^9.8.0"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"webpack"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"beta"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"webpack-dev-server"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"beta"')]),s._v("\n }\n}\n")])]),a("br"),a("p",[a("strong",[s._v("webpack.config.js")])]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" path = "),a("span",{staticClass:"hljs-built_in"},[s._v("require")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'path'")]),s._v(")\n"),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" webpack = "),a("span",{staticClass:"hljs-built_in"},[s._v("require")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'webpack'")]),s._v(")\n\n"),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports = {\n "),a("span",{staticClass:"hljs-attr"},[s._v("entry")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'./src/main.js'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("output")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("path")]),s._v(": path.resolve(__dirname, "),a("span",{staticClass:"hljs-string"},[s._v("'./dist'")]),s._v("),\n "),a("span",{staticClass:"hljs-attr"},[s._v("publicPath")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'/dist/'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("filename")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'build.js'")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("module")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("loaders")]),s._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.vue$/")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'vue-loader'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.js$/")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'babel-loader'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("exclude")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/node_modules/")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.css$/")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'style-loader!css-loader'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'file-loader'")]),s._v("\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.(png|jpe?g|gif|svg)(\\?\\S*)?$/")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'file-loader'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("query")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'[name].[ext]?[hash]'")]),s._v("\n }\n }\n ]\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("devServer")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("historyApiFallback")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("noInfo")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("devtool")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#eval-source-map'")]),s._v("\n}\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (process.env.NODE_ENV === "),a("span",{staticClass:"hljs-string"},[s._v("'production'")]),s._v(") {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.devtool = "),a("span",{staticClass:"hljs-string"},[s._v("'#source-map'")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("// http://vue-loader.vuejs.org/en/workflow/production.html")]),s._v("\n "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins = ("),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins || []).concat([\n "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.DefinePlugin({\n "),a("span",{staticClass:"hljs-string"},[s._v("'process.env'")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("NODE_ENV")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'\"production\"'")]),s._v("\n }\n }),\n "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.optimize.UglifyJsPlugin({\n "),a("span",{staticClass:"hljs-attr"},[s._v("compress")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("warnings")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n }\n })\n ])\n}\n")])]),a("h3",{attrs:{id:"import-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import Element")]),a("p",[s._v("You can import Element entirely, or just import what you need. Let's start with fully import.")]),a("h4",{attrs:{id:"fully-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fully-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fully import")]),a("p",[s._v("In main.js:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/theme-default/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.use(ElementUI)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("The above imports Element entirely. Note that CSS file needs to be imported separately.")]),a("h4",{attrs:{id:"on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" On demand")]),a("p",[s._v("With the help of "),a("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[s._v("babel-plugin-component")]),s._v(", we can import components we actually need, making the project smaller than otherwise.")]),a("p",[s._v("First, install babel-plugin-component:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm install babel-plugin-component -D\n")])]),a("p",[s._v("Then edit .babelrc:")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v('"presets"')]),s._v(": [\n ["),a("span",{staticClass:"hljs-string"},[s._v('"es2015"')]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v('"modules"')]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }]\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"theme-default"')]),s._v("\n }\n ]]]\n}\n")])]),a("p",[s._v("Next, if you need Button and Select, edit main.js:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n"),a("span",{staticClass:"hljs-comment"},[s._v("/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */")]),s._v("\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("Full example (Component list reference "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/dev/components.json"}},[s._v("components.json")]),s._v(")")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" {\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 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 Spinner,\n Badge,\n Card,\n Rate,\n Steps,\n Step,\n Carousel,\n Scrollbar,\n CarouselItem,\n Collapse,\n CollapseItem,\n Cascader,\n ColorPicker,\n Loading,\n MessageBox,\n Message,\n Notification\n} "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\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(Spinner)\nVue.use(Badge)\nVue.use(Card)\nVue.use(Rate)\nVue.use(Steps)\nVue.use(Step)\nVue.use(Carousel)\nVue.use(Scrollbar)\nVue.use(CarouselItem)\nVue.use(Collapse)\nVue.use(CollapseItem)\nVue.use(Cascader)\nVue.use(ColorPicker)\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:"start-coding"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#start-coding","aria-hidden":"true"}},[s._v("¶")]),s._v(" Start coding")]),a("p",[s._v("Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[a("span",{staticClass:"hljs-comment"},[s._v("# visit localhost:8086")]),s._v("\nnpm run dev\n")])]),a("p",[s._v("Build:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm run build\n")])]),a("p",[s._v("Please refer to each component's documentation to learn how to use them.")])])}]}},function(s,t,a){s.exports=a(561)},function(s,t,a){var l=a(13)(a(562),a(563),null,null,null);s.exports=l.exports},function(s,t){ -"use strict";s.exports={data:function(){return{radio:"1",radio1:"selected and disabled",radio2:3,radio3:"New York",radio4:"New York",radio5:"New York"}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Single selection among multiple options.")]),s._m(1),a("p",[s._v("Radio should not have too many options. Otherwise, use the Select component instead.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{staticClass:"radio",attrs:{label:"1"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("optionA")]),a("el-radio",{staticClass:"radio",attrs:{label:"2"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("optionB")])]],2),a("p",[s._v("Creating a radio component is easy, you just need to bind a variable to Radio's "),a("code",[s._v("v-model")]),s._v(". It equals to the value of "),a("code",[s._v("label")]),s._v(" of the chosen radio. The type of "),a("code",[s._v("label")]),s._v(" is "),a("code",[s._v("String")]),s._v(" or "),a("code",[s._v("Number")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("optionA"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio1: 'selected and disabled'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("optionA")]),a("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("optionB")])]],2),a("p",[s._v("You just need to add the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(">")]),s._v("optionA"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selected and disabled"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'selected and disabled'")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Suitable for choosing from some mutually exclusive options.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n optionA\n optionB\n optionC\n\n\n\n',script:"\n export default {\n data () {\n return {\n radio2: 3\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{model:{value:s.radio2,callback:function(t){s.radio2=t},expression:"radio2"}},[a("el-radio",{attrs:{label:3}},[s._v("optionA")]),a("el-radio",{attrs:{label:6}},[s._v("optionB")]),a("el-radio",{attrs:{label:9}},[s._v("optionC")])],1)],1),a("p",[s._v("Combine "),a("code",[s._v("")]),s._v(" with "),a("code",[s._v("")]),s._v(" to display a radio group. Bind a variable with "),a("code",[s._v("v-model")]),s._v(" of "),a("code",[s._v("")]),s._v(" element and set label value in "),a("code",[s._v("")]),s._v(". It also provides "),a("code",[s._v("change")]),s._v(" event with the current value as its parameter.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("optionA"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("optionC"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Radio with button styles.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n\n
    \n\n \n \n \n \n\n
    \n\n \n \n \n \n\n\n\n',script:"\n export default {\n data () {\n return {\n radio3: 'New York',\n radio4: 'New York',\n radio5: 'New York'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{model:{value:s.radio3,callback:function(t){s.radio3=t},expression:"radio3"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{model:{value:s.radio4,callback:function(t){s.radio4=t},expression:"radio4"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington",disabled:!0}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{attrs:{disabled:!0},model:{value:s.radio5,callback:function(t){s.radio5=t},expression:"radio5"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),a("p",[s._v("You just need to change "),a("code",[s._v("")]),s._v(" element into "),a("code",[s._v("")]),s._v(" element. We also provide "),a("code",[s._v("size")]),s._v(" attribute for these buttons: "),a("code",[s._v("large")]),s._v(" and "),a("code",[s._v("small")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("disabled")]),s._v(" attribute is used to disable the radio.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio button group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of radio")]),a("td",[s._v("string/number/boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("the size of radio buttons")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("border and background color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20a0ff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("font color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the bound value changes")]),a("td",[s._v("the label value of the chosen radio")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of radio")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(565)},function(s,t,a){function l(s){a(566)}var e=a(13)(a(568),a(569),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(567);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("611a51ea",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-rate .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;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}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:null,value2:null,value3:null,value4:null,value5:3.7}},mounted:function(){this.$nextTick(function(){var s=document.querySelector(".source");s.style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for rating")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n \n
    \n
    \n Color for different levels\n \n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n value1: null,\n value2: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-rate",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Color for different levels")]),a("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]),a("p",[s._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 "),a("code",[s._v("colors")]),s._v(" attribute, and their two thresholds can be defined by "),a("code",[s._v("low-threshold")]),s._v(" and "),a("code",[s._v("high-threshold")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Color for different levels"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Using text to indicate rating score")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value3: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("p",[s._v("Add attribute "),a("code",[s._v("show-text")]),s._v(" to display text at the right of Rate. You can assign texts for different scores using "),a("code",[s._v("texts")]),s._v(". "),a("code",[s._v("texts")]),s._v(" is an array whose length should be equal to the max score "),a("code",[s._v("max")]),s._v(".")]),a("div",{ -staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":texts")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['oops', 'disappointed', 'normal', 'good', 'great']\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can use different icons to distinguish different rate components.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value4: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[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:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("You can customize icons for three different levels using "),a("code",[s._v("icon-classes")]),s._v(". In this example, we also use "),a("code",[s._v("void-icon-class")]),s._v(" to set the icon if it is unselected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":icon-classes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("void-icon-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"icon-rate-face-off"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Read-only Rate is for displaying rating score. Half star is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n value5: 3.7\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{attrs:{disabled:"","show-text":"","text-color":"#ff9900","text-template":"{value} points"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1),a("p",[s._v("Use attribute "),a("code",[s._v("disabled")]),s._v(" to make the component read-only. Add "),a("code",[s._v("show-text")]),s._v(" to display the rating score at the right side. Additionally, you can use attribute "),a("code",[s._v("text-template")]),s._v(" to provide a text template. It must contain "),a("code",[s._v("{value}")]),s._v(", and "),a("code",[s._v("{value}")]),s._v(" will be replaced with the rating score.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff9900"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("text-template")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{value} points"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3.7")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"rate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" With text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" More icons")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"read-only"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#read-only","aria-hidden":"true"}},[s._v("¶")]),s._v(" Read-only")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("max")]),a("td",[s._v("max rating score")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("5")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Rate is read-only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-half")]),a("td",[s._v("whether picking half start is allowed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("low-threshold")]),a("td",[s._v("threshold value between low and medium level. The value itself will be included in low level")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("high-threshold")]),a("td",[s._v("threshold value between medium and high level. The value itself will be included in high level")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4")])]),a("tr",[a("td",[s._v("colors")]),a("td",[s._v("color array for icons. It should have 3 elements, each of which corresponds with a score level")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),a("tr",[a("td",[s._v("void-color")]),a("td",[s._v("color of unselected icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C6D1DE")])]),a("tr",[a("td",[s._v("disabled-void-color")]),a("td",[s._v("color of unselected read-only icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#EFF2F7")])]),a("tr",[a("td",[s._v("icon-classes")]),a("td",[s._v("array of class names of icons. It should have 3 elements, each of which corresponds with a score level")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),a("tr",[a("td",[s._v("void-icon-class")]),a("td",[s._v("class name of unselected icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-off")])]),a("tr",[a("td",[s._v("disabled-void-icon-class")]),a("td",[s._v("class name of unselected read-only icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-on")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("whether to display texts")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("color of texts")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#1F2D3D")])]),a("tr",[a("td",[s._v("texts")]),a("td",[s._v("text array")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['极差', '失望', '一般', '满意', '惊喜']")])]),a("tr",[a("td",[s._v("text-template")]),a("td",[s._v("text template when the component is read-only")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("{value}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("Triggers when rate value is changed")]),a("td",[s._v("value after changing")])])])])}]}},function(s,t,a){s.exports=a(571)},function(s,t,a){function l(s){a(572)}var e=a(13)(a(574),a(575),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(573);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("edf438b8",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-select .el-select{width:240px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{list:null,options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],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"}]}],options4:[],options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],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"}],value:"",value2:"",value3:"",value4:"",value5:[],value6:"",value7:"",value8:"",value9:[],value10:[],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(s){return{value:s,label:s}})},methods:{remoteMethod:function(s){var t=this;""!==s?(this.loading=!0,setTimeout(function(){t.loading=!1,t.options4=t.list.filter(function(t){return t.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("When there are plenty of options, use a drop-down menu to display and select desired ones.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value,callback:function(t){s.value=t},expression:"value"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[a("code",[s._v("v-model")]),s._v(" is the value of "),a("code",[s._v("el-option")]),s._v(" that is currently selected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}},s._l(s.options2,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value,disabled:s.disabled}})}))]],2),a("p",[s._v("Set the value of "),a("code",[s._v("disabled")]),s._v(" in "),a("code",[s._v("el-option")]),s._v(" to "),a("code",[s._v("true")]),s._v(" to disable this option.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.disabled"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Disable the whole component.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("disabled")]),s._v(" of "),a("code",[s._v("el-select")]),s._v(" to make it disabled.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can clear Select using a clear icon.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("clearable")]),s._v(" attribute for "),a("code",[s._v("el-select")]),s._v(" and a clear icon will appear. Note that "),a("code",[s._v("clearable")]),s._v(" is only for single select.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string" +"use strict";s.exports={data:function(){return{radio:"1",radio1:"selected and disabled",radio2:3,radio3:"New York",radio4:"New York",radio5:"New York"}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Single selection among multiple options.")]),s._m(1),a("p",[s._v("Radio should not have too many options. Otherwise, use the Select component instead.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{staticClass:"radio",attrs:{label:"1"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("optionA")]),a("el-radio",{staticClass:"radio",attrs:{label:"2"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("optionB")])]],2),a("p",[s._v("Creating a radio component is easy, you just need to bind a variable to Radio's "),a("code",[s._v("v-model")]),s._v(". It equals to the value of "),a("code",[s._v("label")]),s._v(" of the chosen radio. The type of "),a("code",[s._v("label")]),s._v(" is "),a("code",[s._v("String")]),s._v(" or "),a("code",[s._v("Number")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("optionA"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data () {\n return {\n radio1: 'selected and disabled'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("optionA")]),a("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("optionB")])]],2),a("p",[s._v("You just need to add the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(">")]),s._v("optionA"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selected and disabled"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'selected and disabled'")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Suitable for choosing from some mutually exclusive options.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n optionA\n optionB\n optionC\n\n\n\n',script:"\n export default {\n data () {\n return {\n radio2: 3\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{model:{value:s.radio2,callback:function(t){s.radio2=t},expression:"radio2"}},[a("el-radio",{attrs:{label:3}},[s._v("optionA")]),a("el-radio",{attrs:{label:6}},[s._v("optionB")]),a("el-radio",{attrs:{label:9}},[s._v("optionC")])],1)],1),a("p",[s._v("Combine "),a("code",[s._v("")]),s._v(" with "),a("code",[s._v("")]),s._v(" to display a radio group. Bind a variable with "),a("code",[s._v("v-model")]),s._v(" of "),a("code",[s._v("")]),s._v(" element and set label value in "),a("code",[s._v("")]),s._v(". It also provides "),a("code",[s._v("change")]),s._v(" event with the current value as its parameter.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("optionA"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("optionC"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Radio with button styles.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n \n\n
    \n\n \n \n \n \n\n
    \n\n \n \n \n \n\n\n\n',script:"\n export default {\n data () {\n return {\n radio3: 'New York',\n radio4: 'New York',\n radio5: 'New York'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{model:{value:s.radio3,callback:function(t){s.radio3=t},expression:"radio3"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{model:{value:s.radio4,callback:function(t){s.radio4=t},expression:"radio4"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington",disabled:!0}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{attrs:{disabled:!0},model:{value:s.radio5,callback:function(t){s.radio5=t},expression:"radio5"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),a("p",[s._v("You just need to change "),a("code",[s._v("")]),s._v(" element into "),a("code",[s._v("")]),s._v(" element. We also provide "),a("code",[s._v("size")]),s._v(" attribute for these buttons: "),a("code",[s._v("large")]),s._v(" and "),a("code",[s._v("small")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("disabled")]),s._v(" attribute is used to disable the radio.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio button group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of radio")]),a("td",[s._v("string/number/boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("the size of radio buttons")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("border and background color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20a0ff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("font color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the bound value changes")]),a("td",[s._v("the label value of the chosen radio")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of radio")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(565)},function(s,t,a){function l(s){a(566)}var e=a(13)(a(568),a(569),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(567);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("120c4460",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-rate .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;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}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:null,value2:null,value3:null,value4:null,value5:3.7}},mounted:function(){this.$nextTick(function(){var s=document.querySelector(".source");s.style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for rating")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n Default\n \n
    \n
    \n Color for different levels\n \n \n
    \n\n\n',script:"\n export default {\n data() {\n return {\n value1: null,\n value2: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-rate",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Color for different levels")]),a("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]),a("p",[s._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 "),a("code",[s._v("colors")]),s._v(" attribute, and their two thresholds can be defined by "),a("code",[s._v("low-threshold")]),s._v(" and "),a("code",[s._v("high-threshold")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Color for different levels"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Using text to indicate rating score")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value3: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("p",[s._v("Add attribute "),a("code",[s._v("show-text")]),s._v(" to display text at the right of Rate. You can assign texts for different scores using "),a("code",[s._v("texts")]),s._v(". "),a("code",[s._v("texts")]),s._v(" is an array whose length should be equal to the max score "),a("code",[s._v("max")]),s._v(".")]),a("div",{ +staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":texts")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['oops', 'disappointed', 'normal', 'good', 'great']\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can use different icons to distinguish different rate components.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value4: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[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:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("You can customize icons for three different levels using "),a("code",[s._v("icon-classes")]),s._v(". In this example, we also use "),a("code",[s._v("void-icon-class")]),s._v(" to set the icon if it is unselected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":icon-classes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("void-icon-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"icon-rate-face-off"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Read-only Rate is for displaying rating score. Half star is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n value5: 3.7\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{attrs:{disabled:"","show-text":"","text-color":"#ff9900","text-template":"{value} points"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1),a("p",[s._v("Use attribute "),a("code",[s._v("disabled")]),s._v(" to make the component read-only. Add "),a("code",[s._v("show-text")]),s._v(" to display the rating score at the right side. Additionally, you can use attribute "),a("code",[s._v("text-template")]),s._v(" to provide a text template. It must contain "),a("code",[s._v("{value}")]),s._v(", and "),a("code",[s._v("{value}")]),s._v(" will be replaced with the rating score.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff9900"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("text-template")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{value} points"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3.7")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"rate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" With text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" More icons")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"read-only"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#read-only","aria-hidden":"true"}},[s._v("¶")]),s._v(" Read-only")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("max")]),a("td",[s._v("max rating score")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("5")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Rate is read-only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-half")]),a("td",[s._v("whether picking half start is allowed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("low-threshold")]),a("td",[s._v("threshold value between low and medium level. The value itself will be included in low level")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("high-threshold")]),a("td",[s._v("threshold value between medium and high level. The value itself will be included in high level")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4")])]),a("tr",[a("td",[s._v("colors")]),a("td",[s._v("color array for icons. It should have 3 elements, each of which corresponds with a score level")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),a("tr",[a("td",[s._v("void-color")]),a("td",[s._v("color of unselected icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C6D1DE")])]),a("tr",[a("td",[s._v("disabled-void-color")]),a("td",[s._v("color of unselected read-only icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#EFF2F7")])]),a("tr",[a("td",[s._v("icon-classes")]),a("td",[s._v("array of class names of icons. It should have 3 elements, each of which corresponds with a score level")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),a("tr",[a("td",[s._v("void-icon-class")]),a("td",[s._v("class name of unselected icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-off")])]),a("tr",[a("td",[s._v("disabled-void-icon-class")]),a("td",[s._v("class name of unselected read-only icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-on")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("whether to display texts")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("color of texts")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#1F2D3D")])]),a("tr",[a("td",[s._v("texts")]),a("td",[s._v("text array")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['极差', '失望', '一般', '满意', '惊喜']")])]),a("tr",[a("td",[s._v("text-template")]),a("td",[s._v("text template when the component is read-only")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("{value}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("Triggers when rate value is changed")]),a("td",[s._v("value after changing")])])])])}]}},function(s,t,a){s.exports=a(571)},function(s,t,a){function l(s){a(572)}var e=a(13)(a(574),a(575),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(573);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("2535a6f4",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-select .el-select{width:240px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{list:null,options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],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"}]}],options4:[],options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],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"}],value:"",value2:"",value3:"",value4:"",value5:[],value6:"",value7:"",value8:"",value9:[],value10:[],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(s){return{value:s,label:s}})},methods:{remoteMethod:function(s){var t=this;""!==s?(this.loading=!0,setTimeout(function(){t.loading=!1,t.options4=t.list.filter(function(t){return t.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("When there are plenty of options, use a drop-down menu to display and select desired ones.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value,callback:function(t){s.value=t},expression:"value"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[a("code",[s._v("v-model")]),s._v(" is the value of "),a("code",[s._v("el-option")]),s._v(" that is currently selected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}},s._l(s.options2,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value,disabled:s.disabled}})}))]],2),a("p",[s._v("Set the value of "),a("code",[s._v("disabled")]),s._v(" in "),a("code",[s._v("el-option")]),s._v(" to "),a("code",[s._v("true")]),s._v(" to disable this option.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.disabled"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Disable the whole component.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("disabled")]),s._v(" of "),a("code",[s._v("el-select")]),s._v(" to make it disabled.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can clear Select using a clear icon.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("clearable")]),s._v(" attribute for "),a("code",[s._v("el-select")]),s._v(" and a clear icon will appear. Note that "),a("code",[s._v("clearable")]),s._v(" is only for single select.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string" },[s._v('"value4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("clearable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Multiple select uses tags to display selected options.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("multiple")]),s._v(" attribute for "),a("code",[s._v("el-select")]),s._v(" to enable multiple mode. In this case, the value of "),a("code",[s._v("v-model")]),s._v(" will be an array of selected options.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": []\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("You can customize HTML templates for options.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}},s._l(s.cities,function(t){return a("el-option",{key:t.value,attrs:{label:t.label,value:t.value}},[a("span",{staticStyle:{float:"left"}},[s._v(s._s(t.label))]),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[s._v(s._s(t.value))])])}))]],2),a("p",[s._v("Insert customized HTML templates into the slot of "),a("code",[s._v("el-option")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in cities"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: left"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.label "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: right; color: #8492a6; font-size: 13px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.value "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Nanjing'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Nanjing'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Display options in groups.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}},s._l(s.options3,function(t){return a("el-option-group",{key:t.label,attrs:{label:t.label}},s._l(t.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))}))]],2),a("p",[s._v("Use "),a("code",[s._v("el-option-group")]),s._v(" to group the options, and its "),a("code",[s._v("label")]),s._v(" attribute stands for the name of the group.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group in options3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in group.options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popular cities'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'City name'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dalian'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dalian'")]),s._v("\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("You can filter options for your desired ones.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Adding "),a("code",[s._v("filterable")]),s._v(" to "),a("code",[s._v("el-select")]),s._v(" enables filtering. By default, Select will find all the options whose "),a("code",[s._v("label")]),s._v(" attribute contains the input value. If you prefer other filtering strategies, you can pass the "),a("code",[s._v("filter-method")]),s._v(". "),a("code",[s._v("filter-method")]),s._v(" is a "),a("code",[s._v("Function")]),s._v(" that gets called when the input value changes, and its parameter is the current input value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("Enter keywords and search data from server.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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',style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"",remote:"",placeholder:"Please enter a keyword","remote-method":s.remoteMethod,loading:s.loading},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}},s._l(s.options4,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set the value of "),a("code",[s._v("filterable")]),s._v(" and "),a("code",[s._v("remote")]),s._v(" with "),a("code",[s._v("true")]),s._v(" to enable remote search, and you should pass the "),a("code",[s._v("remote-method")]),s._v(". "),a("code",[s._v("remote-method")]),s._v(" is a "),a("code",[s._v("Function")]),s._v(" that gets called when the input value changes, and its parameter is the current input value. Note that if "),a("code",[s._v("el-option")]),s._v(" is rendered with the "),a("code",[s._v("v-for")]),s._v(" directive, you should add the "),a("code",[s._v("key")]),s._v(" attribute for "),a("code",[s._v("el-option")]),s._v(". Its value needs to be unique, such as "),a("code",[s._v("item.value")]),s._v(" in the following example.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n "),a("span",{ staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("remote")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please enter a keyword"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":remote-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"remoteMethod"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options4")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("list")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("states")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v('"Alabama"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Alaska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Arizona"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Arkansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"California"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Colorado"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Connecticut"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Delaware"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Florida"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Georgia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Hawaii"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Idaho"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Illinois"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Indiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Iowa"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kentucky"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Louisiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maine"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maryland"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Massachusetts"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Michigan"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Minnesota"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Mississippi"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Missouri"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Montana"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Nebraska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Nevada"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Hampshire"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"New Jersey"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Mexico"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"North Carolina"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"North Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Ohio"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Oklahoma"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Oregon"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Pennsylvania"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Rhode Island"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"South Carolina"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"South Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Tennessee"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Texas"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Utah"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Vermont"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Virginia"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"West Virginia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Wisconsin"')]),s._v(",\n "),a("span",{staticClass:"hljs-string"},[s._v('"Wyoming"')]),s._v("]\n }\n },\n mounted() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".states.map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": item, "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": item };\n });\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n remoteMethod(query) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (query !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n });\n }, "),a("span",{staticClass:"hljs-number"},[s._v("200")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = [];\n }\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("Create and select new items that are not included in select options")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"Choose tags for your article"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}},s._l(s.options5,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("By using the "),a("code",[s._v("allow-create")]),s._v(" attribute, users can create new items by typing in the input box. Note that for "),a("code",[s._v("allow-create")]),s._v(" to work, "),a("code",[s._v("filterable")]),s._v(" must be "),a("code",[s._v("true")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value10"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("allow-create")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Choose tags for your article"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options5"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options5")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value10")]),s._v(": []\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled option")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"clearable-single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clearable-single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Clearable single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-filtering"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-filtering","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option filtering")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"remote-search"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[s._v("¶")]),s._v(" Remote Search")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"create-new-items"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#create-new-items","aria-hidden":"true"}},[s._v("¶")]),s._v(" Create new items")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("If the binding value of Select is an object, make sure to assign "),a("code",[s._v("value-key")]),s._v(" as its unique identity key name.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("whether multiple-select is activated")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Select is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value-key")]),a("td",[s._v("unique identity key name for value, required when value is an object")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether single select can be cleared")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("multiple-limit")]),a("td",[s._v("maximum number of options user can select when "),a("code",[s._v("multiple")]),s._v(" is "),a("code",[s._v("true")]),s._v(". No limit when set to 0")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("the name attribute of select input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Select")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether Select is filterable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-create")]),a("td",[s._v("whether creating new items is allowed. To use this, "),a("code",[s._v("filterable")]),s._v(" must be true")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("custom filter method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("remote")]),a("td",[s._v("whether options are loaded from server")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("remote-method")]),a("td",[s._v("custom remote search method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("whether Select is loading data from server")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading-text")]),a("td",[s._v("displayed text while loading data from server")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Loading")])]),a("tr",[a("td",[s._v("no-match-text")]),a("td",[s._v("displayed text when no data matches the filtering query")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("No matching data")])]),a("tr",[a("td",[s._v("no-data-text")]),a("td",[s._v("displayed text when there is no options")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("No data")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Select's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-first-option")]),a("td",[s._v("select first matching option on enter key. Use with "),a("code",[s._v("filterable")]),s._v(" or "),a("code",[s._v("remote")])]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the selected value changes")]),a("td",[s._v("current selected value")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("triggers when the dropdown appears/disappears")]),a("td",[s._v("true when it appears, and false otherwise")])]),a("tr",[a("td",[s._v("remove-tag")]),a("td",[s._v("triggers when a tag is removed in multiple mode")]),a("td",[s._v("removed tag value")])]),a("tr",[a("td",[s._v("clear")]),a("td",[s._v("triggers when the clear icon is clicked in a clearable Select")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("name of the group")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disable all options in this group")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("value of option")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label of option, same as "),a("code",[s._v("value")]),s._v(" if omitted")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether option is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(577)},function(s,t,a){var l=a(13)(a(578),a(579),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42,value6:0,value7:0,value8:0,value9:[4,8],value10:0}},methods:{formatTooltip:function(s){return s/100}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Drag the slider within a fixed range.")]),s._m(1),a("p",[s._v("The current value is displayed when the slider is being dragged.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default value")]),a("el-slider",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Customized initial value")]),a("el-slider",{model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Hide Tooltip")]),a("el-slider",{attrs:{"show-tooltip":!1},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Format Tooltip")]),a("el-slider",{attrs:{"format-tooltip":s.formatTooltip},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Disabled")]),a("el-slider",{attrs:{disabled:""},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]],2),a("p",[s._v("Customize the initial value of the slider by setting the binding value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default value"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Customized initial value"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Hide Tooltip"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":show-tooltip")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Format Tooltip"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":format-tooltip")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatTooltip"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Disabled"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr" },[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("50")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("48")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("42")]),s._v("\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n formatTooltip(val) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" val / "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v(";\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("The options can be discrete.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value6: 0,\n value7: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Breakpoints not displayed")]),a("el-slider",{attrs:{step:10},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Breakpoints displayed")]),a("el-slider",{attrs:{step:10,"show-stops":""},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("p",[s._v("Set step size with the "),a("code",[s._v("step")]),s._v(" attribute. You can display breakpoints by setting the "),a("code",[s._v("show-stops")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints not displayed"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints displayed"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Set value via a input box.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value8: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{"show-input":""},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}})],1)]],2),a("p",[s._v("Set the "),a("code",[s._v("show-input")]),s._v(" attribute to display an input box on the right.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-input")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Selecting a range of values is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value9: [4, 8]\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}})],1)]],2),a("p",[s._v("Setting the "),a("code",[s._v("range")]),s._v(" attribute activates range mode, where the binding value is an array made up of two boundary values.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("range")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v("]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value10: 0\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}})],1)]],2),a("p",[s._v("Setting the "),a("code",[s._v("vertical")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" enables vertical mode. In vertical mode, the "),a("code",[s._v("height")]),s._v(" attribute is required.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value10"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("vertical")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value10")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"slider"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"discrete-values"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#discrete-values","aria-hidden":"true"}},[s._v("¶")]),s._v(" Discrete values")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slider-with-input-box"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider-with-input-box","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider with input box")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"range-selection"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#range-selection","aria-hidden":"true"}},[s._v("¶")]),s._v(" Range selection")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"vertical-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Vertical mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("min")]),a("td",[s._v("minimum value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("100")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Slider is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("step size")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("show-input")]),a("td",[s._v("whether to display an input box, works when "),a("code",[s._v("range")]),s._v(" is false")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-input-controls")]),a("td",[s._v("whether to display control buttons when "),a("code",[s._v("show-input")]),s._v(" is true")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-stops")]),a("td",[s._v("whether to display breakpoints")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-tooltip")]),a("td",[s._v("whether to display tooltip value")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("format-tooltip")]),a("td",[s._v("format to display tooltip value")]),a("td",[s._v("Function(value)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("range")]),a("td",[s._v("whether to select a range")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("vertical")]),a("td",[s._v("vertical mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Slider height, required in vertical mode")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing, in millisecond, works when "),a("code",[s._v("show-input")]),s._v(" is true")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released)")]),a("td",[s._v("value after changing")])])])])}]}},function(s,t,a){s.exports=a(581)},function(s,t,a){var l=a(13)(a(582),a(583),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{active:0}},methods:{next:function(){this.active++>2&&(this.active=0)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._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.")]),s._m(1),a("p",[s._v("Simple step bar.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n\nNext step\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:s.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("Next step")])],1),a("p",[s._v("Set "),a("code",[s._v("active")]),s._v(" attribute with "),a("code",[s._v("Number")]),s._v(" type, which indicates the index of steps and starts from 0. You can set "),a("code",[s._v("space")]),s._v(" attribute when the width of the step needs to be fixed which accepts "),a("code",[s._v("Boolean")]),s._v(" type. The unit of the "),a("code",[s._v("space")]),s._v(" attribute is "),a("code",[s._v("px")]),s._v(". If not set, it is responsive. Setting the "),a("code",[s._v("finish-status")]),s._v(" attribute can change the state of the steps that have been completed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"active"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 12px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"next"')]),s._v(">")]),s._v("Next step"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("active")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n };\n },\n\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n next() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".active++ > "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".active = "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Shows the status of the step for each step.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:1,"finish-status":"success"}},[a("el-step",{attrs:{title:"Done"}}),a("el-step",{attrs:{title:"Processing"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1),a("p",[s._v("Use "),a("code",[s._v("title")]),s._v(" attribute to set the name of the step, or override the attribute by using a named "),a("code",[s._v("slot")]),s._v(". We have listed all the slot names for you at the end of this page.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Done"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Processing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("There is description for each step.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:200,active:1}},[a("el-step",{attrs:{title:"Step 1",description:"Some description"}}),a("el-step",{attrs:{title:"Step 2",description:"Some description"}}),a("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("A variety of custom icons can be used in the step bar.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:1}},[a("el-step",{attrs:{title:"Step 1",icon:"edit"}}),a("el-step",{attrs:{title:"Step 2",icon:"upload"}}),a("el-step",{attrs:{title:"Step 3",icon:"picture"}})],1)],1),a("p",[s._v("The icon is set by the "),a("code",[s._v("icon")]),s._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 "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html" -},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Vertical step bars.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,direction:"vertical",active:1}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1),a("p",[s._v("You only need to set the "),a("code",[s._v("direction")]),s._v(" attribute to"),a("code",[s._v("vertical")]),s._v(" in the "),a("code",[s._v("el-steps")]),s._v(" element.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("direction")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-that-contains-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-that-contains-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar that contains status")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"vertical-step-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-step-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Vertical step bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("space")]),a("td",[s._v("the spacing of each step, will be responsive if omitted. Support percentage.")]),a("td",[s._v("Number,String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("direction")]),a("td",[s._v("display direction")]),a("td",[s._v("string")]),a("td",[s._v("vertical/horizontal")]),a("td",[s._v("horizontal")])]),a("tr",[a("td",[s._v("active")]),a("td",[s._v("current activation step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("process-status")]),a("td",[s._v("status of current step")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("process")])]),a("tr",[a("td",[s._v("finish-status")]),a("td",[s._v("status of end step")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("finish")])]),a("tr",[a("td",[s._v("align-center")]),a("td",[s._v("whether step description is centered")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("center whole "),a("code",[s._v("Steps")]),s._v(" component")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("step icon")]),a("td",[s._v("icons provided by Element Icon. Can be overwritten by a named slot if you want to use custom icons")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("current status. It will be automatically set by Steps if not configured.")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("-")]),a("td")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("icon")]),a("td",[s._v("custom icon")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")])])])])}]}},function(s,t,a){s.exports=a(585)},function(s,t,a){function l(s){a(586)}var e=a(13)(a(588),a(589),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(587);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("378772c5",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-switch .el-switch{margin:20px 20px 20px 0}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:!0,value2:!0,value3:"100",value4:!0}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Switch is used for switching between two opposing states.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value1: true,\n value2: true\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}}),a("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("p",[s._v("Bind "),a("code",[s._v("v-model")]),s._v(" to a "),a("code",[s._v("Boolean")]),s._v(" typed variable. You can add "),a("code",[s._v("on-text")]),s._v(" or "),a("code",[s._v("off-text")]),s._v(" attribute to show texts when the component is "),a("code",[s._v("on")]),s._v(" or "),a("code",[s._v("off")]),s._v(", respectively. The "),a("code",[s._v("on-color")]),s._v(" and "),a("code",[s._v("off-color")]),s._v(" attribute decides the background color in two states.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n\n\n\n',script:"\n export default {\n data() {\n return {\n value3: '100'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{content:"Switch value: "+s.value3,placement:"top"}},[a("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949","on-value":"100","off-value":"0"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1)],1),a("p",[s._v("You can set "),a("code",[s._v("on-value")]),s._v(" and "),a("code",[s._v("off-value")]),s._v(" attributes. They both receive a "),a("code",[s._v("Boolean")]),s._v(", "),a("code",[s._v("String")]),s._v(" or "),a("code",[s._v("Number")]),s._v(" typed value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'Switch value: ' + value3\"")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("on-value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("off-value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'100'")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value4: true\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{attrs:{"on-text":"","off-text":"",disabled:""},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}}),a("el-switch",{attrs:{disabled:""},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("Adding the "),a("code",[s._v("disabled")]),s._v(" attribute disables Switch.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"switch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[s._v("¶")]),s._v(" Switch")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"extended-value-types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#extended-value-types","aria-hidden":"true"}},[s._v("¶")]),s._v(" Extended value types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Switch is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("width of Switch")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("58 (with text) / 46 (no text)")])]),a("tr",[a("td",[s._v("on-icon-class")]),a("td",[s._v("class name of the icon displayed when in "),a("code",[s._v("on")]),s._v(" state, overrides "),a("code",[s._v("on-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("off-icon-class")]),a("td",[s._v("class name of the icon displayed when in "),a("code",[s._v("off")]),s._v(" state, overrides "),a("code",[s._v("off-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-text")]),a("td",[s._v("text displayed when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("ON")])]),a("tr",[a("td",[s._v("off-text")]),a("td",[s._v("text displayed when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("OFF")])]),a("tr",[a("td",[s._v("on-value")]),a("td",[s._v("switch value when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("off-value")]),a("td",[s._v("switch value when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("on-color")]),a("td",[s._v("background color when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20A0FF")])]),a("tr",[a("td",[s._v("off-color")]),a("td",[s._v("background color when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C0CCDA")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("input name of Switch")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("allow-focus")]),a("td",[s._v("allow "),a("code",[s._v("focus")]),s._v(" and "),a("code",[s._v("blur")]),s._v(" events on the input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when value changes")]),a("td",[s._v("value after changing")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers on blur (if "),a("code",[s._v("allow-focus")]),s._v(" is true)")]),a("td",[s._v("event: Event")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers on focus (if "),a("code",[s._v("allow-focus")]),s._v(" is true)")]),a("td",[s._v("event: Event")])])])])}]}},function(s,t,a){s.exports=a(591)},function(s,t,a){function l(s){a(592)}var e=a(13)(a(594),a(595),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(593);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("337edc4c",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".el-table .info-row{background:#c9e5f5}.el-table .positive-row{background:#e2f0e4}.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%}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={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"}],tableData2:[{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",$info:!0},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",$positive:!0}],tableData3:[{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"}],tableData4:[{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"}],tableData6:[{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}],currentRow:null,multipleSelection:[]}},methods:{getSummaries:function(s){var t=s.columns,a=s.data,l=[];return t.forEach(function(s,t){if(0===t)return void(l[t]="Total Cost");var e=a.map(function(t){return Number(t[s.property])});e.every(function(s){return isNaN(s)})?l[t]="N/A":l[t]="$ "+e.reduce(function(s,t){var a=Number(t);return isNaN(a)?s:s+t},0)}),l},setCurrent:function(s){this.$refs.singleTable.setCurrentRow(s)},toggleSelection:function(s){var t=this;s?s.forEach(function(s){t.$refs.multipleTable.toggleRowSelection(s)}):this.$refs.multipleTable.clearSelection()},handleClick:function(){console.log("click")},handleEdit:function(s,t){console.log(s,t)},handleDelete:function(s,t){console.log(s,t)},handleSelectionChange:function(s){this.multipleSelection=s},handleCurrentChange:function(s){this.currentRow=s},formatter:function(s,t){return s.address},filterTag:function(s,t){return t.tag===s},tableRowClassName:function(s,t){return 1===t?"info-row":3===t?"positive-row":""},deleteRow:function(s,t){t.splice(s,1)}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display multiple data with similar format. You can sort, filter, compare your data in a table.")]),s._m(1),a("p",[s._v("Basic table is just for data display.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:' \n\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 ",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("After setting attribute "),a("code",[s._v("data")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(" with an object array, you can use "),a("code",[s._v("prop")]),s._v(" (corresponding to a key of the object in "),a("code",[s._v("data")]),s._v(" array) in "),a("code",[s._v("el-table-column")]),s._v(" to insert data to table columns, and set the attribute "),a("code",[s._v("label")]),s._v(" to define the column name. You can also use the attribute "),a("code",[s._v("width")]),s._v(" to define the width of columns.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[s._v(" "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{ +},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Vertical step bars.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n \n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,direction:"vertical",active:1}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1),a("p",[s._v("You only need to set the "),a("code",[s._v("direction")]),s._v(" attribute to"),a("code",[s._v("vertical")]),s._v(" in the "),a("code",[s._v("el-steps")]),s._v(" element.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("direction")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-that-contains-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-that-contains-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar that contains status")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"vertical-step-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-step-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Vertical step bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("space")]),a("td",[s._v("the spacing of each step, will be responsive if omitted. Support percentage.")]),a("td",[s._v("Number,String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("direction")]),a("td",[s._v("display direction")]),a("td",[s._v("string")]),a("td",[s._v("vertical/horizontal")]),a("td",[s._v("horizontal")])]),a("tr",[a("td",[s._v("active")]),a("td",[s._v("current activation step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("process-status")]),a("td",[s._v("status of current step")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("process")])]),a("tr",[a("td",[s._v("finish-status")]),a("td",[s._v("status of end step")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("finish")])]),a("tr",[a("td",[s._v("align-center")]),a("td",[s._v("whether step description is centered")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("center whole "),a("code",[s._v("Steps")]),s._v(" component")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("step icon")]),a("td",[s._v("icons provided by Element Icon. Can be overwritten by a named slot if you want to use custom icons")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("current status. It will be automatically set by Steps if not configured.")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("-")]),a("td")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("icon")]),a("td",[s._v("custom icon")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")])])])])}]}},function(s,t,a){s.exports=a(585)},function(s,t,a){function l(s){a(586)}var e=a(13)(a(588),a(589),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(587);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("f35d1b76",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-switch .el-switch{margin:20px 20px 20px 0}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:!0,value2:!0,value3:"100",value4:!0}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Switch is used for switching between two opposing states.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value1: true,\n value2: true\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}}),a("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("p",[s._v("Bind "),a("code",[s._v("v-model")]),s._v(" to a "),a("code",[s._v("Boolean")]),s._v(" typed variable. You can add "),a("code",[s._v("on-text")]),s._v(" or "),a("code",[s._v("off-text")]),s._v(" attribute to show texts when the component is "),a("code",[s._v("on")]),s._v(" or "),a("code",[s._v("off")]),s._v(", respectively. The "),a("code",[s._v("on-color")]),s._v(" and "),a("code",[s._v("off-color")]),s._v(" attribute decides the background color in two states.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n\n\n\n',script:"\n export default {\n data() {\n return {\n value3: '100'\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{content:"Switch value: "+s.value3,placement:"top"}},[a("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949","on-value":"100","off-value":"0"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1)],1),a("p",[s._v("You can set "),a("code",[s._v("on-value")]),s._v(" and "),a("code",[s._v("off-value")]),s._v(" attributes. They both receive a "),a("code",[s._v("Boolean")]),s._v(", "),a("code",[s._v("String")]),s._v(" or "),a("code",[s._v("Number")]),s._v(" typed value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'Switch value: ' + value3\"")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("on-value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("off-value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'100'")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n value4: true\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{attrs:{"on-text":"","off-text":"",disabled:""},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}}),a("el-switch",{attrs:{disabled:""},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("Adding the "),a("code",[s._v("disabled")]),s._v(" attribute disables Switch.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"switch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[s._v("¶")]),s._v(" Switch")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"extended-value-types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#extended-value-types","aria-hidden":"true"}},[s._v("¶")]),s._v(" Extended value types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Switch is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("width of Switch")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("58 (with text) / 46 (no text)")])]),a("tr",[a("td",[s._v("on-icon-class")]),a("td",[s._v("class name of the icon displayed when in "),a("code",[s._v("on")]),s._v(" state, overrides "),a("code",[s._v("on-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("off-icon-class")]),a("td",[s._v("class name of the icon displayed when in "),a("code",[s._v("off")]),s._v(" state, overrides "),a("code",[s._v("off-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-text")]),a("td",[s._v("text displayed when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("ON")])]),a("tr",[a("td",[s._v("off-text")]),a("td",[s._v("text displayed when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("OFF")])]),a("tr",[a("td",[s._v("on-value")]),a("td",[s._v("switch value when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("off-value")]),a("td",[s._v("switch value when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("on-color")]),a("td",[s._v("background color when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20A0FF")])]),a("tr",[a("td",[s._v("off-color")]),a("td",[s._v("background color when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C0CCDA")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("input name of Switch")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("allow-focus")]),a("td",[s._v("allow "),a("code",[s._v("focus")]),s._v(" and "),a("code",[s._v("blur")]),s._v(" events on the input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when value changes")]),a("td",[s._v("value after changing")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers on blur (if "),a("code",[s._v("allow-focus")]),s._v(" is true)")]),a("td",[s._v("event: Event")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers on focus (if "),a("code",[s._v("allow-focus")]),s._v(" is true)")]),a("td",[s._v("event: Event")])])])])}]}},function(s,t,a){s.exports=a(591)},function(s,t,a){function l(s){a(592)}var e=a(13)(a(594),a(595),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(593);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("5976b41d",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".el-table .info-row{background:#c9e5f5}.el-table .positive-row{background:#e2f0e4}.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%}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={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"}],tableData2:[{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",$info:!0},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",$positive:!0}],tableData3:[{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"}],tableData4:[{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"}],tableData6:[{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}],currentRow:null,multipleSelection:[]}},methods:{getSummaries:function(s){var t=s.columns,a=s.data,l=[];return t.forEach(function(s,t){if(0===t)return void(l[t]="Total Cost");var e=a.map(function(t){return Number(t[s.property])});e.every(function(s){return isNaN(s)})?l[t]="N/A":l[t]="$ "+e.reduce(function(s,t){var a=Number(t);return isNaN(a)?s:s+t},0)}),l},setCurrent:function(s){this.$refs.singleTable.setCurrentRow(s)},toggleSelection:function(s){var t=this;s?s.forEach(function(s){t.$refs.multipleTable.toggleRowSelection(s)}):this.$refs.multipleTable.clearSelection()},handleClick:function(){console.log("click")},handleEdit:function(s,t){console.log(s,t)},handleDelete:function(s,t){console.log(s,t)},handleSelectionChange:function(s){this.multipleSelection=s},handleCurrentChange:function(s){this.currentRow=s},formatter:function(s,t){return s.address},filterTag:function(s,t){return t.tag===s},tableRowClassName:function(s,t){return 1===t?"info-row":3===t?"positive-row":""},deleteRow:function(s,t){t.splice(s,1)}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display multiple data with similar format. You can sort, filter, compare your data in a table.")]),s._m(1),a("p",[s._v("Basic table is just for data display.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:' \n\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 ",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("After setting attribute "),a("code",[s._v("data")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(" with an object array, you can use "),a("code",[s._v("prop")]),s._v(" (corresponding to a key of the object in "),a("code",[s._v("data")]),s._v(" array) in "),a("code",[s._v("el-table-column")]),s._v(" to insert data to table columns, and set the attribute "),a("code",[s._v("label")]),s._v(" to define the column name. You can also use the attribute "),a("code",[s._v("width")]),s._v(" to define the width of columns.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[s._v(" "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{ staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n ")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Striped table makes it easier to distinguish different rows.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,stripe:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Attribute "),a("code",[s._v("stripe")]),s._v(" accepts a "),a("code",[s._v("Boolean")]),s._v(". If "),a("code",[s._v("true")]),s._v(", table will be striped.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("stripe")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("By default, Table has no vertical border. If you need it, you can set attribute "),a("code",[s._v("border")]),s._v(" to "),a("code",[s._v("true")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v('You can highlight your table content to distinguish between "success, information, warning, danger" and other states.')]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n methods: {\n tableRowClassName(row, index) {\n if (index === 1) {\n return 'info-row';\n } else if (index === 3) {\n return 'positive-row';\n }\n return '';\n }\n },\n data() {\n return {\n tableData2: [{\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",style:"\n .el-table .info-row {\n background: #c9e5f5;\n }\n\n .el-table .positive-row {\n background: #e2f0e4;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData2,"row-class-name":s.tableRowClassName}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Use "),a("code",[s._v("row-class-name")]),s._v(" in "),a("code",[s._v("el-table")]),s._v(" to add custom classes to a certain row. Then you can style it with custom classes.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":row-class-name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableRowClassName"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".info-row")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#c9e5f5")]),s._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".positive-row")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e2f0e4")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n tableRowClassName(row, index) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'info-row'")]),s._v(";\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'positive-row'")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n }\n },\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("When there are too many rows, you can use a fixed header.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250",border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("By setting the attribute "),a("code",[s._v("height")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(", you can fix the table header without any other codes.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string" },[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }],\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("When there are too many columns, you can fix some of them.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:s.handleClick}},[s._v("Detail")]),a("el-button",{attrs:{type:"text",size:"small"}},[s._v("Edit")])]}]])})],1)]],2),a("p",[s._v("Attribute "),a("code",[s._v("fixed")]),s._v(" is used in "),a("code",[s._v("el-table-column")]),s._v(", it accepts a "),a("code",[s._v("Boolean")]),s._v(". If "),a("code",[s._v("true")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Detail"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Edit"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleClick() {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'click'")]),s._v(");\n }\n },\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:"",height:"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)]],2),a("p",[s._v("Fix columns and header at the same time by combining the above two examples.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{ staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._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.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n methods: {\n deleteRow(index, rows) {\n rows.splice(index, 1);\n }\n },\n data() {\n return {\n tableData4: [{\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData4,border:"","max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(a){a.preventDefault(),s.deleteRow(t.$index,s.tableData4)}}},[s._v("\n Remove\n ")])]}]])})],1)]],2),a("p",[s._v("By setting the attribute "),a("code",[s._v("max-height")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(", you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("max-height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click.native.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"deleteRow(scope.$index, tableData4)"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n Remove\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n deleteRow(index, rows) {\n rows.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n }\n },\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData4")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("When the data structure is complex, you can use group header to show the data hierarchy.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{label:"Delivery Info"}},[a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{label:"Address Info"}},[a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)],1)],1)]],2),a("p",[s._v("Only need to place el-table-column inside a el-table-column, you can achieve group header.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Delivery Info"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address Info"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{ @@ -50,13 +50,13 @@ staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs- staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":default-sort")]),s._v(" = "),a("span",{staticClass:"hljs-string"},[s._v("\"{prop: 'date', order: 'descending'}\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n formatter(row, column) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(13),a("p",[s._v("Filter the table to find desired data.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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 formatter(row, column) {\n return row.address;\n },\n filterTag(value, row) {\n return row.tag === value;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",formatter:s.formatter}}),a("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":s.filterTag,"filter-placement":"bottom-end"},scopedSlots:s._u([["default",function(t){return[a("el-tag",{attrs:{type:"Home"===t.row.tag?"primary":"success","close-transition":""}},[s._v(s._s(t.row.tag))])]}]])})],1)]],2),a("p",[s._v("Set attribute "),a("code",[s._v("filters")]),s._v(" and "),a("code",[s._v("filter-method")]),s._v(" in "),a("code",[s._v("el-table-column")]),s._v(" makes this column filterable. "),a("code",[s._v("filters")]),s._v(" is an array, and "),a("code",[s._v("filter-method")]),s._v(" is a function deciding which rows are displayed. It has two parameters: "),a("code",[s._v("value")]),s._v(" and "),a("code",[s._v("row")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tag"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":filters")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterTag"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filter-placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"scope.row.tag === 'Home' ? 'primary' : 'success'\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("close-transition")]),s._v(">")]),a("span",[s._v("{{")]),s._v("scope.row.tag"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n }]\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n formatter(row, column) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n },\n filterTag(value, row) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.tag === value;\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(14),a("p",[s._v("Customize table column so it can be integrated with other components.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{label:"Date",width:"180"},scopedSlots:s._u([["default",function(t){return[a("el-icon",{attrs:{name:"time"}}),a("span",{staticStyle:{"margin-left":"10px"}},[s._v(s._s(t.row.date))])]}]])}),a("el-table-column",{attrs:{label:"Name",width:"180"},scopedSlots:s._u([["default",function(t){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[s._v("Name: "+s._s(t.row.name))]),a("p",[s._v("Addr: "+s._s(t.row.address))]),a("div",{staticClass:"name-wrapper",slot:"reference"},[a("el-tag",[s._v(s._s(t.row.name))])],1)])]}]])}),a("el-table-column",{attrs:{label:"Operations"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{size:"small"},on:{click:function(a){s.handleEdit(t.$index,t.row)}}},[s._v("Edit")]),a("el-button",{attrs:{size:"small",type:"danger"},on:{click:function(a){s.handleDelete(t.$index,t.row)}}},[s._v("Delete")])]}]])})],1)]],2),a("p",[s._v("You have access to the following data: row, column, $index and store (state management of Table) by "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped slot")]),s._v(". (Scoped slots is supported from "),a("code",[s._v("1.1")]),s._v(", "),a("code",[s._v("inline-template")]),s._v(" still works, but it's not recommended).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-left: 10px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.date "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Name: "),a("span",[s._v("{{")]),s._v(" scope.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Addr: "),a("span",[s._v("{{")]),s._v(" scope.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name-wrapper"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleEdit(scope.$index, scope.row)"')]),s._v(">")]),s._v("Edit"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleDelete(scope.$index, scope.row)"')]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleEdit(index, row) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n },\n handleDelete(index, row) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(15),a("p",[s._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.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n', script:"\n export default {\n data() {\n return {\n tableData3: [{\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:s._u([["default",function(t){return[a("p",[s._v("State: "+s._s(t.row.state))]),a("p",[s._v("City: "+s._s(t.row.city))]),a("p",[s._v("Address: "+s._s(t.row.address))]),a("p",[s._v("Zip: "+s._s(t.row.zip))])]}]])}),a("el-table-column",{attrs:{label:"Date",prop:"date"}}),a("el-table-column",{attrs:{label:"Name",prop:"name"}})],1)]],2),a("p",[s._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 '),a("code",[s._v("Scoped slot")]),s._v(" in custom column templates.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"expand"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("State: "),a("span",[s._v("{{")]),s._v(" props.row.state "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("City: "),a("span",[s._v("{{")]),s._v(" props.row.city "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Address: "),a("span",[s._v("{{")]),s._v(" props.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Zip: "),a("span",[s._v("{{")]),s._v(" props.row.zip "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(16),a("p",[s._v("For table of numbers, you can add an extra row at the table footer displaying each column's sum.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n tableData6: [{\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,border:"","show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name"}}),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:s.tableData6,border:"",height:"200","summary-method":s.getSummaries,"show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name"}}),a("el-table-column",{attrs:{prop:"amount1",label:"Cost 1 ($)"}}),a("el-table-column",{attrs:{prop:"amount2",label:"Cost 2 ($)"}}),a("el-table-column",{attrs:{prop:"amount3",label:"Cost 3 ($)"}})],1)]],2),a("p",[s._v("You can add the summary row by setting "),a("code",[s._v("show-summary")]),s._v(" to "),a("code",[s._v("true")]),s._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 "),a("code",[s._v("sum-text")]),s._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 "),a("code",[s._v("summary-method")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData6"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-summary")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ID"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Amount 1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Amount 2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Amount 3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData6"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":summary-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getSummaries"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-summary")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%; margin-top: 20px"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ID"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Cost 1 ($)"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Cost 2 ($)"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Cost 3 ($)"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData6")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987122'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'234'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'3.2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987123'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'165'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'4.43'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("12")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987124'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'324'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1.9'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987125'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'621'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2.2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("17")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987126'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'539'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'4.1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("\n }]\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n getSummaries(param) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" { columns, data } = param;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" sums = [];\n columns.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("column, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n sums[index] = "),a("span",{staticClass:"hljs-string"},[s._v("'Total Cost'")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" values = data.map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v("(item[column.property]));\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!values.every("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("value")]),s._v(" =>")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("isNaN")]),s._v("(value))) {\n sums[index] = "),a("span",{staticClass:"hljs-string"},[s._v("'$ '")]),s._v(" + values.reduce("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("prev, curr")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" value = "),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v("(curr);\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),a("span",{staticClass:"hljs-built_in"},[s._v("isNaN")]),s._v("(value)) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" prev + curr;\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" prev;\n }\n }, "),a("span",{ staticClass:"hljs-number"},[s._v("0")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n sums[index] = "),a("span",{staticClass:"hljs-string"},[s._v("'N/A'")]),s._v(";\n }\n });\n\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" sums;\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"striped-table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#striped-table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Striped Table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-border"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-border","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with border")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with status")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-column"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-column","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed column")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-columns-and-header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-columns-and-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed columns and header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fluid-height-table-with-fixed-header-and-columns"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fluid-height-table-with-fixed-header-and-columns","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fluid-height Table with fixed header (and columns)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping-table-head"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping-table-head","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping table head")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sorting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sorting","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sorting")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filter"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filter","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filter")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-column-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-column-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom column template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"expandable-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#expandable-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Expandable row")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"summary-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#summary-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Summary row")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("table data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Table's height. By default it has an "),a("code",[s._v("auto")]),s._v(" height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max-height")]),a("td",[s._v("Table's max-height. The height of the table starts from "),a("code",[s._v("auto")]),s._v(" until it reaches the maxHeight limit. The "),a("code",[s._v("maxHeight")]),s._v(" is measured in pixels, same as "),a("code",[s._v("height")])]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("stripe")]),a("td",[s._v("whether table is striped")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("whether table has vertical border")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fit")]),a("td",[s._v("whether width of column automatically fits its container")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-header")]),a("td",[s._v("whether table header is visible")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("highlight-current-row")]),a("td",[s._v("whether current row is highlighted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-row-key")]),a("td",[s._v("key of current row, a set only prop")]),a("td",[s._v("string,number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-class-name")]),a("td",[s._v("function that returns custom class names for a row, or a string assigning class names for every row")]),a("td",[s._v("Function(row, index)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-style")]),a("td",[s._v("function that returns custom style for a row, or a string assigning custom style for every row")]),a("td",[s._v("Function(row, index)/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-key")]),a("td",[s._v("key of row data, used for optimizing rendering. Required if "),a("code",[s._v("reserve-selection")]),s._v(" is on. When its type is String, multi-level access is supported, e.g. "),a("code",[s._v("user.info.id")]),s._v(", but "),a("code",[s._v("user.info[0].id")]),s._v(" is not supported, in which case "),a("code",[s._v("Function")]),s._v(" should be used.")]),a("td",[s._v("Function(row)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("Displayed text when data is empty. You can customize this area with "),a("code",[s._v('slot="empty"')])]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("No Data")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v('whether expand all rows by default, only works when the table has a column type="expand"')]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-row-keys")]),a("td",[s._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")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td")]),a("tr",[a("td",[s._v("default-sort")]),a("td",[s._v("set the default sort column and order. property "),a("code",[s._v("prop")]),s._v(" is used to set default sort column, property "),a("code",[s._v("order")]),s._v(" is used to set default sort order")]),a("td",[s._v("Object")]),a("td",[a("code",[s._v("order")]),s._v(": ascending, descending")]),a("td",[s._v("if "),a("code",[s._v("prop")]),s._v(" is set, and "),a("code",[s._v("order")]),s._v(" is not set, then "),a("code",[s._v("order")]),s._v(" is default to ascending")])]),a("tr",[a("td",[s._v("tooltip-effect")]),a("td",[s._v("tooltip "),a("code",[s._v("effect")]),s._v(" property")]),a("td",[s._v("String")]),a("td",[s._v("dark/light")]),a("td")]),a("tr",[a("td",[s._v("show-summary")]),a("td",[s._v("whether to display a summary row")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sum-text")]),a("td",[s._v("displayed text for the first column of summary row")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("Sum")])]),a("tr",[a("td",[s._v("summary-method")]),a("td",[s._v("custom summary method")]),a("td",[s._v("Function({ columns, data })")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("triggers when user clicks the checkbox in a row")]),a("td",[s._v("selection, row")])]),a("tr",[a("td",[s._v("select-all")]),a("td",[s._v("triggers when user clicks the checkbox in table header")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("selection-change")]),a("td",[s._v("triggers when selection changes")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("cell-mouse-enter")]),a("td",[s._v("triggers when hovering into a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-mouse-leave")]),a("td",[s._v("triggers when hovering out of a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-click")]),a("td",[s._v("triggers when clicking a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-dblclick")]),a("td",[s._v("triggers when double clicking a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("row-click")]),a("td",[s._v("triggers when clicking a row")]),a("td",[s._v("row, event, column")])]),a("tr",[a("td",[s._v("row-contextmenu")]),a("td",[s._v("triggers when user right clicks on a row")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("row-dblclick")]),a("td",[s._v("triggers when double clicking a row")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("header-click")]),a("td",[s._v("triggers when clicking a column header")]),a("td",[s._v("column, event")])]),a("tr",[a("td",[s._v("sort-change")]),a("td",[s._v("triggers when Table's sorting changes")]),a("td",[s._v("{ column, prop, order }")])]),a("tr",[a("td",[s._v("filter-change")]),a("td",[s._v("column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered")]),a("td",[s._v("filters")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when current row changes")]),a("td",[s._v("currentRow, oldCurrentRow")])]),a("tr",[a("td",[s._v("header-dragend")]),a("td",[s._v("triggers when finish dragging header")]),a("td",[s._v("newWidth, oldWidth, column, event")])]),a("tr",[a("td",[s._v("expand")]),a("td",[s._v("triggers when user expands or collapses a row")]),a("td",[s._v("row, expanded")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("clearSelection")]),a("td",[s._v("used in multiple selection Table, clear selection, might be useful when "),a("code",[s._v("reserve-selection")]),s._v(" is on")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("toggleRowSelection")]),a("td",[s._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")]),a("td",[s._v("row, selected")])]),a("tr",[a("td",[s._v("setCurrentRow")]),a("td",[s._v("used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection.")]),a("td",[s._v("row")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("append")]),a("td",[s._v("Contents to be inserted after the last row. It is still nested inside the "),a("code",[s._v("")]),s._v(" tag. 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 s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-column-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table-column Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the column. If set to "),a("code",[s._v("selection")]),s._v(", the column will display checkbox. If set to "),a("code",[s._v("index")]),s._v(", the column will display index of the row (staring from 1). If set to "),a("code",[s._v("expand")]),s._v(", the column will display expand icon.")]),a("td",[s._v("string")]),a("td",[s._v("selection/index/expand")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("column label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("column-key")]),a("td",[s._v("column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered")]),a("td",[s._v("string")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prop")]),a("td",[s._v("field name. You can also use its alias: "),a("code",[s._v("property")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("column width")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min-width")]),a("td",[s._v("column minimum width. Columns with "),a("code",[s._v("width")]),s._v(" has a fixed width, while columns with "),a("code",[s._v("min-width")]),s._v(" has a width that is distributed in proportion")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fixed")]),a("td",[s._v("whether column is fixed at left/right. Will be fixed at left if "),a("code",[s._v("true")])]),a("td",[s._v("string/boolean")]),a("td",[s._v("true/left/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-header")]),a("td",[s._v("render function for table header of this column")]),a("td",[s._v("Function(h, { column, $index })")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sortable")]),a("td",[s._v("whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the "),a("code",[s._v("sort-change")]),s._v(" event of Table")]),a("td",[s._v("boolean, string")]),a("td",[s._v("true, false, custom")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sort-method")]),a("td",[s._v("sorting method, works when "),a("code",[s._v("sortable")]),s._v(" is "),a("code",[s._v("true")]),s._v(". Should return a boolean.")]),a("td",[s._v("Function(a, b)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resizable")]),a("td",[s._v("whether column width can be resized, works when "),a("code",[s._v("border")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("formatter")]),a("td",[s._v("function that formats cell content")]),a("td",[s._v("Function(row, column, cellValue)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-overflow-tooltip")]),a("td",[s._v("whether to hide extra content and show them in a tooltip when hovering on the cell")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("string")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("header-align")]),a("td",[s._v("alignment of the table header. If omitted, the value of the above "),a("code",[s._v("align")]),s._v(" attribute will be applied")]),a("td",[s._v("String")]),a("td",[s._v("left/center/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("class-name")]),a("td",[s._v("class name of cells in the column")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-class-name")]),a("td",[s._v("class name of the label of this column")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("selectable")]),a("td",[s._v("function that determines if a certain row can be selected, works when "),a("code",[s._v("type")]),s._v(" is 'selection'")]),a("td",[s._v("Function(row, index)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("reserve-selection")]),a("td",[s._v("whether to reserve selection after data refreshing, works when "),a("code",[s._v("type")]),s._v(" is 'selection'")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filters")]),a("td",[s._v("an array of data filtering options. For each element in this array, "),a("code",[s._v("text")]),s._v(" and "),a("code",[s._v("value")]),s._v(" are required")]),a("td",[s._v("Array[{ text, value }]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-placement")]),a("td",[s._v("placement for the filter dropdown")]),a("td",[s._v("String")]),a("td",[s._v("same as Tooltip's "),a("code",[s._v("placement")])]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-multiple")]),a("td",[s._v("whether data filtering supports multiple options")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("data filtering method. If "),a("code",[s._v("filter-multiple")]),s._v(" is on, this method will be called multiple times for each row, and a row will display if one of the calls returns "),a("code",[s._v("true")])]),a("td",[s._v("Function(value, row)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filtered-value")]),a("td",[s._v("filter value for selected data, might be useful when table header is rendered with "),a("code",[s._v("render-header")])]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(597)},function(s,t,a){var l=a(13)(a(598),a(599),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeName:"second",activeName2:"first",editableTabsValue:"2",editableTabsValue2:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],editableTabs2:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{handleClick:function(s,t){console.log(s,t)},handleTabsEdit:function(s,t){var a=this;if("add"===t){var l=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:l,content:"New Tab content"}),this.editableTabsValue=l}"remove"===t&&!function(){var t=a.editableTabs,l=a.editableTabsValue;l===s&&t.forEach(function(a,e){if(a.name===s){var n=t[e+1]||t[e-1];n&&(l=n.name)}}),a.editableTabsValue=l,a.editableTabs=t.filter(function(t){return t.name!==s})}()},addTab:function(s){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(s){var t=this.editableTabs2,a=this.editableTabsValue2;a===s&&t.forEach(function(l,e){if(l.name===s){var n=t[e+1]||t[e-1];n&&(a=n.name)}}),this.editableTabsValue2=a,this.editableTabs2=t.filter(function(t){return t.name!==s})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Divide data collections which are related yet belong to different types.")]),s._m(1),a("p",[s._v("Basic and concise tabs.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{on:{"tab-click":s.handleClick},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-tab-pane",{attrs:{label:"User",name:"first"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config",name:"second"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role",name:"third"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[s._v("Task")])],1)]],2),a("p",[s._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 "),a("code",[s._v("value")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"first"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"second"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"third"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fourth"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'first'")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleClick(tab, event) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Tabs styled as cards.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{attrs:{type:"card"},on:{"tab-click":s.handleClick}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)]],2),a("p",[s._v("Set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("card")]),s._v(" can get a card-styled tab.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'first'")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleClick(tab, event) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Border card tabs.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n User\n Config\n Role\n Task\n\n', -script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("border-card")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can use named slot to customize the tab label content.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Route\n Route\n \n Config\n Role\n Task\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{slot:"label"},[a("i",{staticClass:"el-icon-date"}),s._v(" Route")]),s._v("\n Route\n ")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"label"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v(" Route"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n Route\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Only card type Tabs support addable & closeable.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n {{item.content}}\n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:s.handleTabsEdit},model:{value:s.editableTabsValue,callback:function(t){s.editableTabsValue=t},expression:"editableTabsValue"}},s._l(s.editableTabs,function(t,l){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n "+s._s(t.content)+"\n ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("editable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@edit")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleTabsEdit"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n >")]),s._v("\n "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleTabsEdit(targetName, action) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'add'")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n });\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = newTabName;\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'remove'")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = activeName;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n }\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n add tab\n \n
    \n\n \n {{item.content}}\n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(t){s.addTab(s.editableTabsValue2)}}},[s._v("\n add tab\n ")])],1),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":s.removeTab},model:{value:s.editableTabsValue2,callback:function(t){s.editableTabsValue2=t},expression:"editableTabsValue2"}},s._l(s.editableTabs2,function(t,l){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n "+s._s(t.content)+"\n ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addTab(editableTabsValue2)"')]),s._v("\n >")]),s._v("\n add tab\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("closable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeTab"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n >")]),s._v("\n "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n addTab(targetName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n });\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = newTabName;\n },\n removeTab(targetName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = activeName;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2 = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tabs"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card Style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"border-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Border card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom Tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"add-close-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add-close-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Add & close tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customized-trigger-button-of-new-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customized-trigger-button-of-new-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customized trigger button of new tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of Tab")]),a("td",[s._v("string")]),a("td",[s._v("card/border-card")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab is closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("addable")]),a("td",[s._v("whether Tab is addable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether Tab is addable and closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("active-name(deprecated)")]),a("td",[s._v("name of the selected tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("name of first tab")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("name of the selected tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("name of first tab")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("tab-click")]),a("td",[s._v("triggers when a tab is clicked")]),a("td",[s._v("clicked tab")])]),a("tr",[a("td",[s._v("tab-remove")]),a("td",[s._v("triggers when tab-remove button is clicked")]),a("td",[s._v("name of the removed tab")])]),a("tr",[a("td",[s._v("tab-add")]),a("td",[s._v("triggers when tab-add button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("edit")]),a("td",[s._v("triggers when tab-add button or tab-remove is clicked")]),a("td",[s._v("(targetName, action)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tab-pane-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tab-pane Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("title of the tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tab is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1'")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab is closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(601)},function(s,t,a){function l(s){a(602)}var e=a(13)(a(604),a(605),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(603);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("8657de22",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-tag .el-tag+.el-tag{margin-left:10px}.demo-box.demo-tag .button-new-tag{margin-left:10px;height:24px;line-height:22px;padding-top:0;padding-bottom:0}.demo-box.demo-tag .input-new-tag{width:78px;margin-left:10px;vertical-align:bottom}.demo-box.demo-tag .input-new-tag .el-input__inner{height:24px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"gray"},{name:"Tag 3",type:"primary"},{name:"Tag 4",type:"success"},{name:"Tag 5",type:"warning"},{name:"Tag 6",type:"danger"}],dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(s){this.dynamicTags.splice(this.dynamicTags.indexOf(s),1)},showInput:function(){var s=this;this.inputVisible=!0,this.$nextTick(function(t){s.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var s=this.inputValue;s&&this.dynamicTags.push(s),this.inputVisible=!1,this.inputValue=""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for marking and selection.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Tag One\nTag Two\nTag Three\nTag Four\nTag Five\nTag Six\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tag",[s._v("Tag One")]),a("el-tag",{attrs:{type:"gray"}},[s._v("Tag Two")]),a("el-tag",{attrs:{type:"primary"}},[s._v("Tag Three")]),a("el-tag",{attrs:{type:"success"}},[s._v("Tag Four")]),a("el-tag",{attrs:{type:"warning"}},[s._v("Tag Five")]),a("el-tag",{attrs:{type:"danger"}},[s._v("Tag Six")])],1),a("p",[s._v("Use the "),a("code",[s._v("type")]),s._v(" attribute to define Tag's type. In addition, the "),a("code",[s._v("color")]),s._v(" attribute can be used to set the background color of the Tag.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("Tag One"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gray"')]),s._v(">")]),s._v("Tag Two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{ -staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Tag Three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Tag Four"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Tag Five"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Tag Six"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n{{tag.name}}\n\n\n\n',script:"\n export default {\n data() {\n return {\n tags: [\n { name: 'Tag 1', type: '' },\n { name: 'Tag 2', type: 'gray' },\n { name: 'Tag 3', type: 'primary' },\n { name: 'Tag 4', type: 'success' },\n { name: 'Tag 5', type: 'warning' },\n { name: 'Tag 6', type: 'danger' }\n ]\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},s._l(s.tags,function(t){return a("el-tag",{key:t.name,attrs:{closable:!0,type:t.type}},[s._v("\n"+s._s(t.name)+"\n")])})),a("p",[a("code",[s._v("closable")]),s._v(" attribute can be used to define a removable tag. It accepts a "),a("code",[s._v("Boolean")]),s._v(". By default the removal of Tag has a fading animation. If you don't want to use it, you can set the "),a("code",[s._v("close-transition")]),s._v(" attribute, which accepts a "),a("code",[s._v("Boolean")]),s._v(", to "),a("code",[s._v("true")]),s._v(". "),a("code",[s._v("close")]),s._v(" event triggers when Tag is removed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in tags"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag.name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag.type"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag.name"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tags")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 1'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 2'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'gray'")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 3'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'primary'")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 4'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 5'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 6'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'danger'")]),s._v(" }\n ]\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n{{tag}}\n\n\n\n+ New Tag\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[s._l(s.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:!0,"close-transition":!1},on:{close:function(a){s.handleClose(t)}}},[s._v("\n"+s._s(t)+"\n")])}),s.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:s.handleInputConfirm},nativeOn:{keyup:function(t){return"button"in t||!s._k(t.keyCode,"enter",13)?void s.handleInputConfirm(t):null}},model:{value:s.inputValue,callback:function(t){s.inputValue=t},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:s.showInput}},[s._v("+ New Tag")])],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in dynamicTags"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":close-transition")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose(tag)"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input-new-tag"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputVisible"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputValue"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"saveTagInput"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@keyup.enter.native")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@blur")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n>")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"button-new-tag"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showInput"')]),s._v(">")]),s._v("+ New Tag"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicTags")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Tag 1'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 2'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 3'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("inputVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("inputValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleClose(tag) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.splice("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.indexOf(tag), "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n },\n\n showInput() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$nextTick("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n handleInputConfirm() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" inputValue = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (inputValue) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.push(inputValue);\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue = "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tag")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"removable-tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removable-tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Removable Tag")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"edit-dynamically"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#edit-dynamically","aria-hidden":"true"}},[s._v("¶")]),s._v(" Edit Dynamically")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use the "),a("code",[s._v("close")]),s._v(" event to add and remove tag dynamically.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("theme")]),a("td",[s._v("string")]),a("td",[s._v("primary/gray/success/warning/danger")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab can be removed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("close-transition")]),a("td",[s._v("whether to disable animations")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hit")]),a("td",[s._v("whether Tag has a highlighted border")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color")]),a("td",[s._v("background color of the tag")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("triggers when Tab is removed")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(607)},function(s,t,a){function l(s){a(608)}var e=a(13)(a(610),a(611),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(609);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("54e8aa3b",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box .el-date-editor+.el-date-editor{margin-left:10px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:"",value2:new Date(2016,9,10,18,40),value3:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],startTime:"",endTime:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Time Picker for time input.")]),s._m(1),a("p",[s._v("Provide a list of fixed time for users to choose.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value1: ''\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("p",[s._v("Use "),a("code",[s._v("el-time-select")]),s._v(" label, then assign start time, end time and time step with "),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v(" and "),a("code",[s._v("step")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select time"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Can pick an arbitrary time.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value2: new Date(2016, 9, 10, 18, 40)\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("Use "),a("code",[s._v("el-time-picker")]),s._v(" label, and you can limit the time range by using "),a("code",[s._v("selectableRange")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Arbitrary time"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("If start time is picked at first, then the end time will change accordingly.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n",script:"\n export default {\n data() {\n return {\n startTime: '',\n endTime: ''\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:s.startTime,callback:function(t){s.startTime=t},expression:"startTime"}}),a("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},model:{value:s.endTime,callback:function(t){s.endTime=t},expression:"endTime"}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Start time"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"startTime"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"End time"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"endTime"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\"")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("startTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("endTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Can pick an arbitrary time range.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{attrs:{"is-range":"",placeholder:"Pick a time range"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})]],2),a("p",[s._v("We can pick a time range by adding an "),a("code",[s._v("is-range")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("is-range")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time range"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")]\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"timepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" TimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fixed-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixed time picker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arbitrary-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arbitrary time picker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fixed-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixed time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arbitrary-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arbitrary time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("value of the picker")]),a("td",[s._v("date for Time Picker, and string for Time Select")]),a("td",[s._v("hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("HH:mm:ss")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for TimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])])])]); -},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-select-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Select Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("start")]),a("td",[s._v("start time")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("09:00")])]),a("tr",[a("td",[s._v("end")]),a("td",[s._v("end time")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("18:00")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("time step")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:30")])]),a("tr",[a("td",[s._v("minTime")]),a("td",[s._v("minimum time, any time before this time will be disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:00")])]),a("tr",[a("td",[s._v("maxTime")]),a("td",[s._v("maximum time, any time after this time will be disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("selectableRange")]),a("td",[s._v("available time range, e.g."),a("code",[s._v("'18:30:00 - 20:30:00'")]),s._v("or"),a("code",[s._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[s._v("string/array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("HH:mm:ss")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(613)},function(s,t,a){function l(s){a(614)}var e=a(13)(a(616),a(617),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(615);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("0b2552c1",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-tooltip.demo-en-US .el-tooltip+.el-tooltip{margin-left:15px}.demo-tooltip.demo-en-US .box{width:400px}.demo-tooltip.demo-en-US .box .top{text-align:center}.demo-tooltip.demo-en-US .box .left{float:left;width:110px}.demo-tooltip.demo-en-US .box .right{float:right;width:110px}.demo-tooltip.demo-en-US .box .bottom{clear:both;text-align:center}.demo-tooltip.demo-en-US .box .item{margin:4px}.demo-tooltip.demo-en-US .box .left .el-tooltip__popper,.demo-tooltip.demo-en-US .box .right .el-tooltip__popper{padding:8px 10px}.demo-tooltip.demo-en-US .box .el-tooltip{margin-left:0}.demo-tooltip.demo-en-US:first-of-type .source .el-button{width:110px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{disabled:!1}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display prompt information for mouse hover.")]),s._m(1),a("p",[s._v("Tooltip has 9 placements.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n
    \n \n top-start\n \n \n top\n \n \n top-end\n \n
    \n
    \n \n left-start\n \n \n left\n \n \n left-end\n \n
    \n\n
    \n \n right-start\n \n \n right\n \n \n right-end\n \n
    \n
    \n \n bottom-start\n \n \n bottom\n \n \n bottom-end\n \n
    \n
    \n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[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",[s._v("top-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[a("el-button",[s._v("top")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[a("el-button",[s._v("top-end")])],1)],1),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[a("el-button",[s._v("left-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[a("el-button",[s._v("left")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[a("el-button",[s._v("left-end")])],1)],1),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[a("el-button",[s._v("right-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[a("el-button",[s._v("right")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[a("el-button",[s._v("right-end")])],1)],1),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[a("el-button",[s._v("bottom-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[a("el-button",[s._v("bottom")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[a("el-button",[s._v("bottom-end")])],1)],1)])]),a("p",[s._v("Use attribute "),a("code",[s._v("content")]),s._v(" to set the display content when hover. The attribute "),a("code",[s._v("placement")]),s._v(" determines the position of the tooltip. Its value is "),a("code",[s._v("[orientation]-[alignment]")]),s._v(" with four orientations "),a("code",[s._v("top")]),s._v(", "),a("code",[s._v("left")]),s._v(", "),a("code",[s._v("right")]),s._v(", "),a("code",[s._v("bottom")]),s._v(" and three alignments "),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v(", "),a("code",[s._v("null")]),s._v(", and the default alignment is null. Take "),a("code",[s._v('placement="left-end"')]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"box"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Left prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top-start"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Right prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top-end"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Top prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-start"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left-start"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Bottom prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left-end"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Top prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-start"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right-start"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Bottom prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right-end"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Left prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom-start"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Right prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom-end"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\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")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Dark\n\n\n Light\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[a("el-button",[s._v("Dark")])],1),a("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[a("el-button",[s._v("Light")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("effect")]),s._v(" to modify theme, and the default value is "),a("code",[s._v("dark")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Dark"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Light"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Display multiple lines of text and set their format.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    multiple lines
    second line
    \n Top center\n    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{placement:"top"}},[a("div",{slot:"content"},[s._v("multiple lines"),a("br"),s._v("second line")]),a("el-button",[s._v("Top center")])],1)],1),a("p",[s._v("Override attribute "),a("code",[s._v("content")]),s._v(" of "),a("code",[s._v("el-tooltip")]),s._v(" by adding a slot named "),a("code",[s._v("content")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"content"')]),s._v(">")]),s._v("multiple lines"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("br")]),s._v("/>")]),s._v("second line"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Top center"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("In addition to basic usages, there are some attributes that allow you to customize your own:")]),s._m(6),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tooltip",{attrs:{disabled:s.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(t){s.disabled=!s.disabled}}},[s._v("click to "+s._s(s.disabled?"active":"close")+" tooltip function")])],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click to close tooltip function"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled = !disabled"')]),s._v(">")]),s._v("click to "),a("span",[s._v("{{")]),s._v("disabled ? 'active' : 'close'"),a("span",[s._v("}}")]),s._v(" tooltip function"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{ -staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-enter-active")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("transition")]),s._v(": all ."),a("span",{staticClass:"hljs-number"},[s._v("3s")]),s._v(" ease;\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-leave-active")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("transition")]),s._v(": all ."),a("span",{staticClass:"hljs-number"},[s._v("3s")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("cubic-bezier")]),s._v("(1.0, 0.5, 0.8, 1.0);\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-enter")]),s._v(", "),a("span",{staticClass:"hljs-selector-class"},[s._v(".expand-fade-leave-active")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tooltip"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tooltip")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Theme")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Tooltip has two themes: "),a("code",[s._v("dark")]),s._v(" and "),a("code",[s._v("light")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" More Content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"advanced-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#advanced-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Advanced usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("transition")]),s._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 s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("disabled")]),s._v(" attribute allows you to disable "),a("code",[s._v("tooltip")]),s._v(". You just need set it to "),a("code",[s._v("true")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In fact, Tooltip is an extension based on "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(", you can use any attribute that are allowed in Vue-popper.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("The "),a("code",[s._v("router-link")]),s._v(" component is not supported in tooltip, please use "),a("code",[s._v("vm.$router.push")]),s._v(".")]),a("p",[s._v("Disabled form elements are not supported in tooltip, see more information at "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[s._v("MDN")]),s._v(", please wrap disabled form elements.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("effect")]),a("td",[s._v("Tooltip theme")]),a("td",[s._v("string")]),a("td",[s._v("dark/light")]),a("td",[s._v("dark")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("display content, can be overridden by "),a("code",[s._v("slot#content")])]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("position of Tooltip")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("visibility of Tooltip")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tooltip is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset of the Tooltip")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("animation name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether an arrow is displayed. For more information, check "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(" page")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" parameters")]),a("td",[s._v("Object")]),a("td",[s._v("refer to "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" doc")]),a("td",[a("code",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("delay of appearance, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("manual")]),a("td",[s._v("whether to control Tooltip manually. "),a("code",[s._v("mouseenter")]),s._v(" and "),a("code",[s._v("mouseleave")]),s._v(" won't have effects if set to "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Tooltip's popper")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("enterable")]),a("td",[s._v("whether the mouse can enter the tooltip")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("hide-after")]),a("td",[s._v("timeout in milliseconds to hide tooltip")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])])}]}},function(s,t,a){s.exports=a(619)},function(s,t,a){function l(s){a(620)}var e=a(13)(a(622),a(623),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(621);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("678cd373",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-transfer .transfer-footer{margin-left:20px;padding:6px 5px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s=function(s){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"Option "+a,disabled:a%4===0});return t},t=function(s){var t=[],a=["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "],l=["CA","IL","MD","TX","FL","CO","CT"];return a.forEach(function(s,a){t.push({label:s,key:a,initial:l[a]})}),t},a=function(s){for(var t=[],a=1;a<=15;a++)t.push({value:a,desc:"Option "+a,disabled:a%4===0});return t};return{data:s(),data2:t(),data3:a(),value1:[1,4],value2:[],value3:[1],value4:[],filterMethod:function(s,t){return t.initial.toLowerCase().indexOf(s.toLowerCase())>-1},renderFunc:function(s,t){return s("span",null,[t.key," - ",t.label])}}},methods:{handleChange:function(s,t,a){console.log(s,t,a)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{data:s.data},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})]],2),a("p",[s._v("Data is passed to Transfer via the "),a("code",[s._v("data")]),s._v(" attribute. The data needs to be an object array, and each object should have these attributes: "),a("code",[s._v("key")]),s._v(" being the identification of the data item, "),a("code",[s._v("label")]),s._v(" being the displayed text, and "),a("code",[s._v("disabled")]),s._v(" indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to "),a("code",[s._v("v-model")]),s._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 "),a("code",[s._v("v-model")]),s._v(" with an array.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": i,\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`Option "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n });\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": generateData(),\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can search and filter data items.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{filterable:"","filter-method":s.filterMethod,"filter-placeholder":"State Abbreviations",data:s.data2},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("Set the "),a("code",[s._v("filterable")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" to enable filter mode. By default, if the data item "),a("code",[s._v("label")]),s._v(" contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the "),a("code",[s._v("filter-method")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterMethod"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filter-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State Abbreviations"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData2 = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" states = ["),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Illinois'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Maryland'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Texas'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Florida'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Colorado'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Connecticut '")]),s._v("];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" initials = ["),a("span",{staticClass:"hljs-string"},[s._v("'CA'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'IL'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'MD'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'TX'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'FL'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'CO'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'CT'")]),s._v("];\n states.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("city, index")]),s._v(") =>")]),s._v(" {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": city,\n "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": index,\n "),a("span",{staticClass:"hljs-attr"},[s._v("initial")]),s._v(": initials[index]\n });\n });\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": generateData2(),\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": [],\n filterMethod(query, item) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.initial.toLowerCase().indexOf(query.toLowerCase()) > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n }\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\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 renderFunc(h, option) {\n return { option.key } - { option.label };\n }\n };\n },\n\n methods: {\n handleChange(value, direction, movedKeys) {\n console.log(value, direction, movedKeys);\n }\n }\n };\n",style:"\n .transfer-footer {\n margin-left: 20px;\n padding: 6px 5px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":s.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],"footer-format":{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:s.data},on:{change:s.handleChange},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{size:"small"},slot:"left-footer"},[s._v("Operation")]),a("el-button",{staticClass:"transfer-footer",attrs:{size:"small"},slot:"right-footer"},[s._v("Operation")])],1)]],2),a("p",[s._v("Use "),a("code",[s._v("titles")]),s._v(", "),a("code",[s._v("button-texts")]),s._v(", "),a("code",[s._v("render-content")]),s._v(" and "),a("code",[s._v("footer-format")]),s._v(" to respectively customize list titles, button texts, render function for data items, checking status texts in list footer. For list footer contents, two named slots are provided: "),a("code",[s._v("left-footer")]),s._v(" and "),a("code",[s._v("right-footer")]),s._v(". Plus, if you want some items initially checked, you can use "),a("code",[s._v("left-default-checked")]),s._v(" and "),a("code",[s._v("right-default-checked")]),s._v(". Finally, this example demonstrate the "),a("code",[s._v("change")]),s._v(" event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),a("code",[s._v("render-content")]),s._v(" will work if relevant dependencies are correctly configured.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":left-default-checked")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[2, 3]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":right-default-checked")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[1]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":render-content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"renderFunc"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":titles")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['Source', 'Target']\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":button-texts")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['To left', 'To right']\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":footer-format")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n noChecked: '${total}',\n hasChecked: '${checked}/${total}'\n }\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transfer-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Operation"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transfer-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Operation"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transfer-footer")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("5px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": i,\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`Option "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n });\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": generateData(),\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("],\n renderFunc(h, option) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"xml"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("{ option.key } - { option.label }"),a("span",{staticClass:"hljs-tag"},[s._v("")])]),s._v(";\n }\n };\n },\n\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(value, direction, movedKeys) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value, direction, movedKeys);\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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 value4: []\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:s.data3},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})]],2),a("p",[s._v("The data items in this example do not have "),a("code",[s._v("key")]),s._v("s or "),a("code",[s._v("label")]),s._v("s, instead they have "),a("code",[s._v("value")]),s._v("s and "),a("code",[s._v("desc")]),s._v("s. So you need to set aliases for "),a("code",[s._v("key")]),s._v(" and "),a("code",[s._v("label")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n key: 'value',\n label: 'desc'\n }\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData3 = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{ -staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": i,\n "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`Option "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n });\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data3")]),s._v(": generateData3(),\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": []\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"transfer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[s._v("¶")]),s._v(" Transfer")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filterable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filterable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"prop-aliases"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prop-aliases","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prop aliases")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("By default, Transfer looks for "),a("code",[s._v("key")]),s._v(", "),a("code",[s._v("label")]),s._v(" and "),a("code",[s._v("disabled")]),s._v(" in a data item. If your data items have different key names, you can use the "),a("code",[s._v("props")]),s._v(" attribute to define aliases.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("data source")]),a("td",[s._v("array[{ key, label, disabled }]")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether Transfer is filterable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-placeholder")]),a("td",[s._v("placeholder for the filter input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Enter keyword")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("custom filter method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("titles")]),a("td",[s._v("custom list titles")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['List 1', 'List 2']")])]),a("tr",[a("td",[s._v("button-texts")]),a("td",[s._v("custom button texts")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("custom render function for data items")]),a("td",[s._v("function(h, option)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("footer-format")]),a("td",[s._v("texts for checking status in list footer")]),a("td",[s._v("object{noChecked, hasChecked}")]),a("td",[s._v("—")]),a("td",[s._v("{ noChecked: '${total} items', hasChecked: '${checked}/${total} checked' }")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("prop aliases for data source")]),a("td",[s._v("object{key, label, disabled}")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("left-default-checked")]),a("td",[s._v("key array of initially checked data items of the left list")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("right-default-checked")]),a("td",[s._v("key array of initially checked data items of the right list")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("left-footer")]),a("td",[s._v("content of left list footer")])]),a("tr",[a("td",[s._v("right-footer")]),a("td",[s._v("content of right list footer")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when data items change in the right list")]),a("td",[s._v("key array of current data items in the right list, transfer direction (left or right), moved item keys")])])])])}]}},function(s,t,a){s.exports=a(625)},function(s,t,a){function l(s){a(626)}var e=a(13)(a(628),a(629),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(627);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("3e14cc5b",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".transition-box{margin-bottom:10px;width:200px;height:100px;border-radius:4px;background-color:#20a0ff;text-align:center;color:#fff;padding:40px 20px;margin-right:20px;box-sizing:border-box}",""])},function(s,t){"use strict";s.exports={data:function(){return{show:!0,show2:!0,show3:!0}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #20A0FF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show=!s.show}}},[s._v("Click Me")]),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:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in-linear")])]),a("transition",{attrs:{name:"el-fade-in"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in")])])],1)],1)]],2),a("p",[s._v("We have two fading effects: "),a("code",[s._v("el-fade-in-linear")]),s._v(" and "),a("code",[s._v("el-fade-in")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show = !show"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-fade-in-linear"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in-linear"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-fade-in"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{staticClass:"hljs-attr"},[s._v("show")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show2: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #20A0FF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show2=!s.show2}}},[s._v("Click Me")]),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:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-center")])]),a("transition",{attrs:{name:"el-zoom-in-top"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-top")])]),a("transition",{attrs:{name:"el-zoom-in-bottom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-bottom")])])],1)],1)]],2),a("p",[a("code",[s._v("el-zoom-in-center")]),s._v(", "),a("code",[s._v("el-zoom-in-top")]),s._v(" and "),a("code",[s._v("el-zoom-in-bottom")]),s._v(" are provided.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2 = !show2"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-center"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-center"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-top"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-bottom"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-bottom"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{staticClass:"hljs-attr"},[s._v("show2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show3: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #20A0FF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show3=!s.show3}}},[s._v("Click Me")]),a("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[a("el-collapse-transition",[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show3,expression:"show3"}]},[a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")]),a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")])])])],1)],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show3 = !show3"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px; height: 200px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{staticClass:"hljs-attr"},[s._v("show3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"built-in-transition"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#built-in-transition","aria-hidden":"true"}},[s._v("¶")]),s._v(" Built-in transition")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use Element's built-in transitions directly. Before that, please read the "),a("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[s._v("transition docs")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fade"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[s._v("¶")]),s._v(" fade")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zoom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[s._v("¶")]),s._v(" zoom")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("For collapse effect, use the "),a("code",[s._v("el-collapse-transition")]),s._v(" component.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" On demand")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-js"},[a("span",{staticClass:"hljs-comment"},[s._v("// fade/zoom")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/theme-defaut/base.css'")]),s._v(";\n"),a("span",{staticClass:"hljs-comment"},[s._v("// collapse")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" CollapseTransition "),a("span",{ -staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/transitions/collapse-transition'")]),s._v(";\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}]}},function(s,t,a){s.exports=a(631)},function(s,t,a){function l(s){a(632)}var e=a(13)(a(634),a(635),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(633);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("24031ab1",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-tree .leaf{width:20px;background:#ddd}.demo-tree .folder{width:20px;background:#888}.demo-tree .buttons,.demo-tree .filter-tree{margin-top:20px}",""])},function(s,t){"use strict";t.__esModule=!0;var a=[{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"}]}]}],l=[{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"}]}],e=[{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}]}]}],n=1e3,i=[{name:"region1"},{name:"region2"}],v=1,_={label:"name",children:"zones"},r={children:"children",label:"label"};t.default={watch:{filterText:function(s){this.$refs.tree2.filter(s)}},methods:{handleCheckChange:function(s,t,a){console.log(s,t,a)},handleNodeClick:function(s){console.log(s)},loadNode:function(s,t){if(0===s.level)return t([{name:"Root1"},{name:"Root2"}]);if(s.level>3)return t([]);var a;a="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s=void 0;s=a?[{name:"zone"+v++},{name:"zone"+v++}]:[],t(s)},500)},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([])},append:function(s,t){s.append({id:n++,label:"testtest",children:[]},t)},remove:function(s,t){s.remove(t)},renderContent:function(s,t){var a=this,l=t.node,e=t.data,n=t.store;return s("span",{style:"white-space: normal"},[s("span",null,[s("span",null,[l.label])]),s("span",{style:"float: right; margin-right: 20px"},[s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.append(n,e)}}},["Append"]),s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.remove(n,e)}}},["Delete"])])])},filterNode:function(s,t){return!s||t.label.indexOf(s)!==-1}},data:function(){return{data:a,data2:l,data3:e,regions:i,defaultProps:r,props:_,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display a set of data with hierarchies.")]),s._m(1),a("p",[s._v("Basic tree structure.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-2-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-1'")]),s._v("\n }]\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n }\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleNodeClick(data) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Used for node selection. In the following example, data for each layer is acquired after being clicked. If there is no child data, the expanding icon will disappear.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n regions: [{\n 'name': 'region1'\n }, {\n 'name': 'region2'\n }],\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.regions,props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"regions"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":load")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loadNode"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("lazy")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@check-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("regions")]),s._v(": [{\n "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zones'")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("count")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleCheckChange(data, checked, indeterminate) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n },\n loadNode(node, resolve) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([{ "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Root1'")]),s._v(" }, { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Root2'")]),s._v(" }]);\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level > "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([]);\n\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" hasChild;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v(") {\n hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v(") {\n hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n hasChild = "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random() > "),a("span",{staticClass:"hljs-number"},[s._v("0.5")]),s._v(";\n }\n\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" data;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (hasChild) {\n data = [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n }];\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n data = [];\n }\n\n resolve(data);\n }, "),a("span",{staticClass:"hljs-number"},[s._v("500")]),s._v(");\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("The checkbox of a node can be set as disabled.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data3,props:s.defaultProps,"show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@check-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }]\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disabled'")]),s._v(",\n },\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Tree nodes can be initially expanded or checked")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:s.defaultProps}})],1),a("p",[s._v("Use "),a("code",[s._v("default-expanded-keys")]),s._v(" and "),a("code",[s._v("default-checked-keys")]),s._v(" to set initially expanded and initially checked nodes respectively. Note that for them to work, "),a("code",[s._v("node-key")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":default-expanded-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[2, 3]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":default-checked-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[5]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n
    \n get by node\n get by key\n set by node\n set by key\n reset\n
    \n\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:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("border-card")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can use named slot to customize the tab label content.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n Route\n Route\n \n Config\n Role\n Task\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{slot:"label"},[a("i",{staticClass:"el-icon-date"}),s._v(" Route")]),s._v("\n Route\n ")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"label"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v(" Route"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n Route\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Only card type Tabs support addable & closeable.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n {{item.content}}\n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:s.handleTabsEdit},model:{value:s.editableTabsValue,callback:function(t){s.editableTabsValue=t},expression:"editableTabsValue"}},s._l(s.editableTabs,function(t,l){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n "+s._s(t.content)+"\n ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("editable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@edit")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleTabsEdit"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n >")]),s._v("\n "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleTabsEdit(targetName, action) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'add'")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n });\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = newTabName;\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'remove'")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = activeName;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n }\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n \n add tab\n \n
    \n\n \n {{item.content}}\n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(t){s.addTab(s.editableTabsValue2)}}},[s._v("\n add tab\n ")])],1),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":s.removeTab},model:{value:s.editableTabsValue2,callback:function(t){s.editableTabsValue2=t},expression:"editableTabsValue2"}},s._l(s.editableTabs2,function(t,l){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n "+s._s(t.content)+"\n ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addTab(editableTabsValue2)"')]),s._v("\n >")]),s._v("\n add tab\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("closable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeTab"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n >")]),s._v("\n "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n addTab(targetName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n });\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = newTabName;\n },\n removeTab(targetName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = activeName;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2 = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tabs"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card Style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"border-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Border card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom Tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"add-close-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add-close-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Add & close tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customized-trigger-button-of-new-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customized-trigger-button-of-new-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customized trigger button of new tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of Tab")]),a("td",[s._v("string")]),a("td",[s._v("card/border-card")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab is closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("addable")]),a("td",[s._v("whether Tab is addable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether Tab is addable and closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("active-name(deprecated)")]),a("td",[s._v("name of the selected tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("name of first tab")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("name of the selected tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("name of first tab")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("tab-click")]),a("td",[s._v("triggers when a tab is clicked")]),a("td",[s._v("clicked tab")])]),a("tr",[a("td",[s._v("tab-remove")]),a("td",[s._v("triggers when tab-remove button is clicked")]),a("td",[s._v("name of the removed tab")])]),a("tr",[a("td",[s._v("tab-add")]),a("td",[s._v("triggers when tab-add button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("edit")]),a("td",[s._v("triggers when tab-add button or tab-remove is clicked")]),a("td",[s._v("(targetName, action)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tab-pane-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tab-pane Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("title of the tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tab is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1'")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab is closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(601)},function(s,t,a){function l(s){a(602)}var e=a(13)(a(604),a(605),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(603);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("2c95cbc1",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box.demo-tag .el-tag+.el-tag{margin-left:10px}.demo-box.demo-tag .button-new-tag{margin-left:10px;height:24px;line-height:22px;padding-top:0;padding-bottom:0}.demo-box.demo-tag .input-new-tag{width:78px;margin-left:10px;vertical-align:bottom}.demo-box.demo-tag .input-new-tag .el-input__inner{height:24px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"gray"},{name:"Tag 3",type:"primary"},{name:"Tag 4",type:"success"},{name:"Tag 5",type:"warning"},{name:"Tag 6",type:"danger"}],dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(s){this.dynamicTags.splice(this.dynamicTags.indexOf(s),1)},showInput:function(){var s=this;this.inputVisible=!0,this.$nextTick(function(t){s.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var s=this.inputValue;s&&this.dynamicTags.push(s),this.inputVisible=!1,this.inputValue=""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for marking and selection.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'Tag One\nTag Two\nTag Three\nTag Four\nTag Five\nTag Six\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tag",[s._v("Tag One")]),a("el-tag",{attrs:{type:"gray"}},[s._v("Tag Two")]),a("el-tag",{attrs:{type:"primary"}},[s._v("Tag Three")]),a("el-tag",{attrs:{type:"success"}},[s._v("Tag Four")]),a("el-tag",{attrs:{type:"warning"}},[s._v("Tag Five")]),a("el-tag",{attrs:{type:"danger"}},[s._v("Tag Six")])],1),a("p",[s._v("Use the "),a("code",[s._v("type")]),s._v(" attribute to define Tag's type. In addition, the "),a("code",[s._v("color")]),s._v(" attribute can be used to set the background color of the Tag.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("Tag One"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gray"')]),s._v(">")]),s._v("Tag Two"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{ +staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Tag Three"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Tag Four"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Tag Five"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Tag Six"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n{{tag.name}}\n\n\n\n',script:"\n export default {\n data() {\n return {\n tags: [\n { name: 'Tag 1', type: '' },\n { name: 'Tag 2', type: 'gray' },\n { name: 'Tag 3', type: 'primary' },\n { name: 'Tag 4', type: 'success' },\n { name: 'Tag 5', type: 'warning' },\n { name: 'Tag 6', type: 'danger' }\n ]\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},s._l(s.tags,function(t){return a("el-tag",{key:t.name,attrs:{closable:!0,type:t.type}},[s._v("\n"+s._s(t.name)+"\n")])})),a("p",[a("code",[s._v("closable")]),s._v(" attribute can be used to define a removable tag. It accepts a "),a("code",[s._v("Boolean")]),s._v(". By default the removal of Tag has a fading animation. If you don't want to use it, you can set the "),a("code",[s._v("close-transition")]),s._v(" attribute, which accepts a "),a("code",[s._v("Boolean")]),s._v(", to "),a("code",[s._v("true")]),s._v(". "),a("code",[s._v("close")]),s._v(" event triggers when Tag is removed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in tags"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag.name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag.type"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag.name"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tags")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 1'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 2'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'gray'")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 3'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'primary'")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 4'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 5'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 6'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'danger'")]),s._v(" }\n ]\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n{{tag}}\n\n\n\n+ New Tag\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[s._l(s.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:!0,"close-transition":!1},on:{close:function(a){s.handleClose(t)}}},[s._v("\n"+s._s(t)+"\n")])}),s.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:s.handleInputConfirm},nativeOn:{keyup:function(t){return"button"in t||!s._k(t.keyCode,"enter",13)?void s.handleInputConfirm(t):null}},model:{value:s.inputValue,callback:function(t){s.inputValue=t},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:s.showInput}},[s._v("+ New Tag")])],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in dynamicTags"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":close-transition")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose(tag)"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input-new-tag"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputVisible"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputValue"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"saveTagInput"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@keyup.enter.native")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@blur")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n>")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"button-new-tag"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showInput"')]),s._v(">")]),s._v("+ New Tag"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicTags")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Tag 1'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 2'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 3'")]),s._v("],\n "),a("span",{staticClass:"hljs-attr"},[s._v("inputVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("inputValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleClose(tag) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.splice("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.indexOf(tag), "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n },\n\n showInput() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$nextTick("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n handleInputConfirm() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" inputValue = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (inputValue) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.push(inputValue);\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue = "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tag")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"removable-tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removable-tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Removable Tag")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"edit-dynamically"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#edit-dynamically","aria-hidden":"true"}},[s._v("¶")]),s._v(" Edit Dynamically")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use the "),a("code",[s._v("close")]),s._v(" event to add and remove tag dynamically.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("theme")]),a("td",[s._v("string")]),a("td",[s._v("primary/gray/success/warning/danger")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab can be removed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("close-transition")]),a("td",[s._v("whether to disable animations")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hit")]),a("td",[s._v("whether Tag has a highlighted border")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color")]),a("td",[s._v("background color of the tag")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("triggers when Tab is removed")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(607)},function(s,t,a){function l(s){a(608)}var e=a(13)(a(610),a(611),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(609);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("0bda1dc2",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-box .el-date-editor+.el-date-editor{margin-left:10px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:"",value2:new Date(2016,9,10,18,40),value3:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],startTime:"",endTime:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Time Picker for time input.")]),s._m(1),a("p",[s._v("Provide a list of fixed time for users to choose.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n\n",script:"\n export default {\n data() {\n return {\n value1: ''\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("p",[s._v("Use "),a("code",[s._v("el-time-select")]),s._v(" label, then assign start time, end time and time step with "),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v(" and "),a("code",[s._v("step")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select time"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Can pick an arbitrary time.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value2: new Date(2016, 9, 10, 18, 40)\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("Use "),a("code",[s._v("el-time-picker")]),s._v(" label, and you can limit the time range by using "),a("code",[s._v("selectableRange")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Arbitrary time"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("If start time is picked at first, then the end time will change accordingly.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"\n\n\n",script:"\n export default {\n data() {\n return {\n startTime: '',\n endTime: ''\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:s.startTime,callback:function(t){s.startTime=t},expression:"startTime"}}),a("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},model:{value:s.endTime,callback:function(t){s.endTime=t},expression:"endTime"}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Start time"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"startTime"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"End time"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"endTime"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\"")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("startTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("endTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Can pick an arbitrary time range.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:"\n export default {\n data() {\n return {\n value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{attrs:{"is-range":"",placeholder:"Pick a time range"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})]],2),a("p",[s._v("We can pick a time range by adding an "),a("code",[s._v("is-range")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("is-range")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time range"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")]\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"timepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" TimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fixed-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixed time picker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arbitrary-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arbitrary time picker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fixed-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixed time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arbitrary-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arbitrary time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("value of the picker")]),a("td",[s._v("date for Time Picker, and string for Time Select")]),a("td",[s._v("hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("HH:mm:ss")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for TimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])])])]); +},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-select-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Select Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("start")]),a("td",[s._v("start time")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("09:00")])]),a("tr",[a("td",[s._v("end")]),a("td",[s._v("end time")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("18:00")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("time step")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:30")])]),a("tr",[a("td",[s._v("minTime")]),a("td",[s._v("minimum time, any time before this time will be disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:00")])]),a("tr",[a("td",[s._v("maxTime")]),a("td",[s._v("maximum time, any time after this time will be disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("selectableRange")]),a("td",[s._v("available time range, e.g."),a("code",[s._v("'18:30:00 - 20:30:00'")]),s._v("or"),a("code",[s._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[s._v("string/array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("HH:mm:ss")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(613)},function(s,t,a){function l(s){a(614)}var e=a(13)(a(616),a(617),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(615);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("1326f295",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-tooltip.demo-en-US .el-tooltip+.el-tooltip{margin-left:15px}.demo-tooltip.demo-en-US .box{width:400px}.demo-tooltip.demo-en-US .box .top{text-align:center}.demo-tooltip.demo-en-US .box .left{float:left;width:110px}.demo-tooltip.demo-en-US .box .right{float:right;width:110px}.demo-tooltip.demo-en-US .box .bottom{clear:both;text-align:center}.demo-tooltip.demo-en-US .box .item{margin:4px}.demo-tooltip.demo-en-US .box .left .el-tooltip__popper,.demo-tooltip.demo-en-US .box .right .el-tooltip__popper{padding:8px 10px}.demo-tooltip.demo-en-US .box .el-tooltip{margin-left:0}.demo-tooltip.demo-en-US:first-of-type .source .el-button{width:110px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{disabled:!1}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display prompt information for mouse hover.")]),s._m(1),a("p",[s._v("Tooltip has 9 placements.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'
    \n
    \n \n top-start\n \n \n top\n \n \n top-end\n \n
    \n
    \n \n left-start\n \n \n left\n \n \n left-end\n \n
    \n\n
    \n \n right-start\n \n \n right\n \n \n right-end\n \n
    \n
    \n \n bottom-start\n \n \n bottom\n \n \n bottom-end\n \n
    \n
    \n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[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",[s._v("top-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[a("el-button",[s._v("top")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[a("el-button",[s._v("top-end")])],1)],1),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[a("el-button",[s._v("left-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[a("el-button",[s._v("left")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[a("el-button",[s._v("left-end")])],1)],1),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[a("el-button",[s._v("right-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[a("el-button",[s._v("right")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[a("el-button",[s._v("right-end")])],1)],1),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[a("el-button",[s._v("bottom-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[a("el-button",[s._v("bottom")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[a("el-button",[s._v("bottom-end")])],1)],1)])]),a("p",[s._v("Use attribute "),a("code",[s._v("content")]),s._v(" to set the display content when hover. The attribute "),a("code",[s._v("placement")]),s._v(" determines the position of the tooltip. Its value is "),a("code",[s._v("[orientation]-[alignment]")]),s._v(" with four orientations "),a("code",[s._v("top")]),s._v(", "),a("code",[s._v("left")]),s._v(", "),a("code",[s._v("right")]),s._v(", "),a("code",[s._v("bottom")]),s._v(" and three alignments "),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v(", "),a("code",[s._v("null")]),s._v(", and the default alignment is null. Take "),a("code",[s._v('placement="left-end"')]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"box"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Left prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top-start"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Right prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top-end"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Top prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-start"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left-start"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Bottom prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left-end"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Top prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-start"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right-start"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Bottom prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right-end"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Left prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom-start"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Right prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom-end"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\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")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Dark\n\n\n Light\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[a("el-button",[s._v("Dark")])],1),a("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[a("el-button",[s._v("Light")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("effect")]),s._v(" to modify theme, and the default value is "),a("code",[s._v("dark")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Dark"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Light"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Display multiple lines of text and set their format.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n
    multiple lines
    second line
    \n Top center\n    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{placement:"top"}},[a("div",{slot:"content"},[s._v("multiple lines"),a("br"),s._v("second line")]),a("el-button",[s._v("Top center")])],1)],1),a("p",[s._v("Override attribute "),a("code",[s._v("content")]),s._v(" of "),a("code",[s._v("el-tooltip")]),s._v(" by adding a slot named "),a("code",[s._v("content")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"content"')]),s._v(">")]),s._v("multiple lines"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("br")]),s._v("/>")]),s._v("second line"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Top center"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("In addition to basic usages, there are some attributes that allow you to customize your own:")]),s._m(6),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n',script:null,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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tooltip",{attrs:{disabled:s.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(t){s.disabled=!s.disabled}}},[s._v("click to "+s._s(s.disabled?"active":"close")+" tooltip function")])],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click to close tooltip function"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled = !disabled"')]),s._v(">")]),s._v("click to "),a("span",[s._v("{{")]),s._v("disabled ? 'active' : 'close'"),a("span",[s._v("}}")]),s._v(" tooltip function"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{ +staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-enter-active")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("transition")]),s._v(": all ."),a("span",{staticClass:"hljs-number"},[s._v("3s")]),s._v(" ease;\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-leave-active")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("transition")]),s._v(": all ."),a("span",{staticClass:"hljs-number"},[s._v("3s")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("cubic-bezier")]),s._v("(1.0, 0.5, 0.8, 1.0);\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-enter")]),s._v(", "),a("span",{staticClass:"hljs-selector-class"},[s._v(".expand-fade-leave-active")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tooltip"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tooltip")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Theme")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Tooltip has two themes: "),a("code",[s._v("dark")]),s._v(" and "),a("code",[s._v("light")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" More Content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"advanced-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#advanced-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Advanced usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("transition")]),s._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 s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("disabled")]),s._v(" attribute allows you to disable "),a("code",[s._v("tooltip")]),s._v(". You just need set it to "),a("code",[s._v("true")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In fact, Tooltip is an extension based on "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(", you can use any attribute that are allowed in Vue-popper.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("The "),a("code",[s._v("router-link")]),s._v(" component is not supported in tooltip, please use "),a("code",[s._v("vm.$router.push")]),s._v(".")]),a("p",[s._v("Disabled form elements are not supported in tooltip, see more information at "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[s._v("MDN")]),s._v(", please wrap disabled form elements.")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("effect")]),a("td",[s._v("Tooltip theme")]),a("td",[s._v("string")]),a("td",[s._v("dark/light")]),a("td",[s._v("dark")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("display content, can be overridden by "),a("code",[s._v("slot#content")])]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("position of Tooltip")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("visibility of Tooltip")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tooltip is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset of the Tooltip")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("animation name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether an arrow is displayed. For more information, check "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(" page")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" parameters")]),a("td",[s._v("Object")]),a("td",[s._v("refer to "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" doc")]),a("td",[a("code",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("delay of appearance, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("manual")]),a("td",[s._v("whether to control Tooltip manually. "),a("code",[s._v("mouseenter")]),s._v(" and "),a("code",[s._v("mouseleave")]),s._v(" won't have effects if set to "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Tooltip's popper")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("enterable")]),a("td",[s._v("whether the mouse can enter the tooltip")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("hide-after")]),a("td",[s._v("timeout in milliseconds to hide tooltip")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])])}]}},function(s,t,a){s.exports=a(619)},function(s,t,a){function l(s){a(620)}var e=a(13)(a(622),a(623),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(621);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("743faec4",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-transfer .transfer-footer{margin-left:20px;padding:6px 5px}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s=function(s){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"Option "+a,disabled:a%4===0});return t},t=function(s){var t=[],a=["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "],l=["CA","IL","MD","TX","FL","CO","CT"];return a.forEach(function(s,a){t.push({label:s,key:a,initial:l[a]})}),t},a=function(s){for(var t=[],a=1;a<=15;a++)t.push({value:a,desc:"Option "+a,disabled:a%4===0});return t};return{data:s(),data2:t(),data3:a(),value1:[1,4],value2:[],value3:[1],value4:[],filterMethod:function(s,t){return t.initial.toLowerCase().indexOf(s.toLowerCase())>-1},renderFunc:function(s,t){return s("span",null,[t.key," - ",t.label])}}},methods:{handleChange:function(s,t,a){console.log(s,t,a)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{data:s.data},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})]],2),a("p",[s._v("Data is passed to Transfer via the "),a("code",[s._v("data")]),s._v(" attribute. The data needs to be an object array, and each object should have these attributes: "),a("code",[s._v("key")]),s._v(" being the identification of the data item, "),a("code",[s._v("label")]),s._v(" being the displayed text, and "),a("code",[s._v("disabled")]),s._v(" indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to "),a("code",[s._v("v-model")]),s._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 "),a("code",[s._v("v-model")]),s._v(" with an array.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": i,\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`Option "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n });\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": generateData(),\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("]\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can search and filter data items.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{filterable:"","filter-method":s.filterMethod,"filter-placeholder":"State Abbreviations",data:s.data2},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("Set the "),a("code",[s._v("filterable")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" to enable filter mode. By default, if the data item "),a("code",[s._v("label")]),s._v(" contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the "),a("code",[s._v("filter-method")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterMethod"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filter-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State Abbreviations"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData2 = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" states = ["),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Illinois'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Maryland'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Texas'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Florida'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Colorado'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Connecticut '")]),s._v("];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" initials = ["),a("span",{staticClass:"hljs-string"},[s._v("'CA'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'IL'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'MD'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'TX'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'FL'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'CO'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'CT'")]),s._v("];\n states.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("city, index")]),s._v(") =>")]),s._v(" {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": city,\n "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": index,\n "),a("span",{staticClass:"hljs-attr"},[s._v("initial")]),s._v(": initials[index]\n });\n });\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": generateData2(),\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": [],\n filterMethod(query, item) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.initial.toLowerCase().indexOf(query.toLowerCase()) > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n }\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\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 renderFunc(h, option) {\n return { option.key } - { option.label };\n }\n };\n },\n\n methods: {\n handleChange(value, direction, movedKeys) {\n console.log(value, direction, movedKeys);\n }\n }\n };\n",style:"\n .transfer-footer {\n margin-left: 20px;\n padding: 6px 5px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":s.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],"footer-format":{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:s.data},on:{change:s.handleChange},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{size:"small"},slot:"left-footer"},[s._v("Operation")]),a("el-button",{staticClass:"transfer-footer",attrs:{size:"small"},slot:"right-footer"},[s._v("Operation")])],1)]],2),a("p",[s._v("Use "),a("code",[s._v("titles")]),s._v(", "),a("code",[s._v("button-texts")]),s._v(", "),a("code",[s._v("render-content")]),s._v(" and "),a("code",[s._v("footer-format")]),s._v(" to respectively customize list titles, button texts, render function for data items, checking status texts in list footer. For list footer contents, two named slots are provided: "),a("code",[s._v("left-footer")]),s._v(" and "),a("code",[s._v("right-footer")]),s._v(". Plus, if you want some items initially checked, you can use "),a("code",[s._v("left-default-checked")]),s._v(" and "),a("code",[s._v("right-default-checked")]),s._v(". Finally, this example demonstrate the "),a("code",[s._v("change")]),s._v(" event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),a("code",[s._v("render-content")]),s._v(" will work if relevant dependencies are correctly configured.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":left-default-checked")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[2, 3]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":right-default-checked")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[1]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":render-content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"renderFunc"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":titles")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['Source', 'Target']\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":button-texts")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['To left', 'To right']\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":footer-format")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n noChecked: '${total}',\n hasChecked: '${checked}/${total}'\n }\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transfer-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Operation"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transfer-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Operation"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transfer-footer")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("5px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": i,\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`Option "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n });\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": generateData(),\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("],\n renderFunc(h, option) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"xml"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("{ option.key } - { option.label }"),a("span",{staticClass:"hljs-tag"},[s._v("")])]),s._v(";\n }\n };\n },\n\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(value, direction, movedKeys) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value, direction, movedKeys);\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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 value4: []\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:s.data3},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})]],2),a("p",[s._v("The data items in this example do not have "),a("code",[s._v("key")]),s._v("s or "),a("code",[s._v("label")]),s._v("s, instead they have "),a("code",[s._v("value")]),s._v("s and "),a("code",[s._v("desc")]),s._v("s. So you need to set aliases for "),a("code",[s._v("key")]),s._v(" and "),a("code",[s._v("label")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n key: 'value',\n label: 'desc'\n }\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData3 = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{ +staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": i,\n "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`Option "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n });\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n };\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data3")]),s._v(": generateData3(),\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": []\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"transfer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[s._v("¶")]),s._v(" Transfer")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filterable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filterable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"prop-aliases"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prop-aliases","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prop aliases")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("By default, Transfer looks for "),a("code",[s._v("key")]),s._v(", "),a("code",[s._v("label")]),s._v(" and "),a("code",[s._v("disabled")]),s._v(" in a data item. If your data items have different key names, you can use the "),a("code",[s._v("props")]),s._v(" attribute to define aliases.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("data source")]),a("td",[s._v("array[{ key, label, disabled }]")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether Transfer is filterable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-placeholder")]),a("td",[s._v("placeholder for the filter input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Enter keyword")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("custom filter method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("titles")]),a("td",[s._v("custom list titles")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['List 1', 'List 2']")])]),a("tr",[a("td",[s._v("button-texts")]),a("td",[s._v("custom button texts")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("custom render function for data items")]),a("td",[s._v("function(h, option)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("footer-format")]),a("td",[s._v("texts for checking status in list footer")]),a("td",[s._v("object{noChecked, hasChecked}")]),a("td",[s._v("—")]),a("td",[s._v("{ noChecked: '${total} items', hasChecked: '${checked}/${total} checked' }")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("prop aliases for data source")]),a("td",[s._v("object{key, label, disabled}")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("left-default-checked")]),a("td",[s._v("key array of initially checked data items of the left list")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("right-default-checked")]),a("td",[s._v("key array of initially checked data items of the right list")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("left-footer")]),a("td",[s._v("content of left list footer")])]),a("tr",[a("td",[s._v("right-footer")]),a("td",[s._v("content of right list footer")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when data items change in the right list")]),a("td",[s._v("key array of current data items in the right list, transfer direction (left or right), moved item keys")])])])])}]}},function(s,t,a){s.exports=a(625)},function(s,t,a){function l(s){a(626)}var e=a(13)(a(628),a(629),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(627);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("4fec799b",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".transition-box{margin-bottom:10px;width:200px;height:100px;border-radius:4px;background-color:#20a0ff;text-align:center;color:#fff;padding:40px 20px;margin-right:20px;box-sizing:border-box}",""])},function(s,t){"use strict";s.exports={data:function(){return{show:!0,show2:!0,show3:!0}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #20A0FF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show=!s.show}}},[s._v("Click Me")]),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:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in-linear")])]),a("transition",{attrs:{name:"el-fade-in"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in")])])],1)],1)]],2),a("p",[s._v("We have two fading effects: "),a("code",[s._v("el-fade-in-linear")]),s._v(" and "),a("code",[s._v("el-fade-in")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show = !show"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-fade-in-linear"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in-linear"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-fade-in"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{staticClass:"hljs-attr"},[s._v("show")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show2: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #20A0FF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show2=!s.show2}}},[s._v("Click Me")]),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:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-center")])]),a("transition",{attrs:{name:"el-zoom-in-top"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-top")])]),a("transition",{attrs:{name:"el-zoom-in-bottom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-bottom")])])],1)],1)]],2),a("p",[a("code",[s._v("el-zoom-in-center")]),s._v(", "),a("code",[s._v("el-zoom-in-top")]),s._v(" and "),a("code",[s._v("el-zoom-in-bottom")]),s._v(" are provided.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2 = !show2"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-center"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-center"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-top"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-top"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-bottom"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-bottom"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{staticClass:"hljs-attr"},[s._v("show2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n',script:"\n export default {\n data: () => ({\n show3: true\n })\n }\n",style:"\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #20A0FF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show3=!s.show3}}},[s._v("Click Me")]),a("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[a("el-collapse-transition",[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show3,expression:"show3"}]},[a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")]),a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")])])])],1)],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show3 = !show3"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px; height: 200px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n "),a("span",{staticClass:"hljs-attr"},[s._v("show3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n })\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),s._m(7)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"built-in-transition"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#built-in-transition","aria-hidden":"true"}},[s._v("¶")]),s._v(" Built-in transition")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use Element's built-in transitions directly. Before that, please read the "),a("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[s._v("transition docs")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fade"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[s._v("¶")]),s._v(" fade")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zoom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[s._v("¶")]),s._v(" zoom")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("For collapse effect, use the "),a("code",[s._v("el-collapse-transition")]),s._v(" component.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" On demand")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-js"},[a("span",{staticClass:"hljs-comment"},[s._v("// fade/zoom")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/theme-defaut/base.css'")]),s._v(";\n"),a("span",{staticClass:"hljs-comment"},[s._v("// collapse")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" CollapseTransition "),a("span",{ +staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/transitions/collapse-transition'")]),s._v(";\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}]}},function(s,t,a){s.exports=a(631)},function(s,t,a){function l(s){a(632)}var e=a(13)(a(634),a(635),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(633);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("69aa6b38",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-tree .leaf{width:20px;background:#ddd}.demo-tree .folder{width:20px;background:#888}.demo-tree .buttons,.demo-tree .filter-tree{margin-top:20px}",""])},function(s,t){"use strict";t.__esModule=!0;var a=[{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"}]}]}],l=[{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"}]}],e=[{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}]}]}],n=1e3,i=[{name:"region1"},{name:"region2"}],v=1,_={label:"name",children:"zones"},r={children:"children",label:"label"};t.default={watch:{filterText:function(s){this.$refs.tree2.filter(s)}},methods:{handleCheckChange:function(s,t,a){console.log(s,t,a)},handleNodeClick:function(s){console.log(s)},loadNode:function(s,t){if(0===s.level)return t([{name:"Root1"},{name:"Root2"}]);if(s.level>3)return t([]);var a;a="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s=void 0;s=a?[{name:"zone"+v++},{name:"zone"+v++}]:[],t(s)},500)},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([])},append:function(s,t){s.append({id:n++,label:"testtest",children:[]},t)},remove:function(s,t){s.remove(t)},renderContent:function(s,t){var a=this,l=t.node,e=t.data,n=t.store;return s("span",{style:"white-space: normal"},[s("span",null,[s("span",null,[l.label])]),s("span",{style:"float: right; margin-right: 20px"},[s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.append(n,e)}}},["Append"]),s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.remove(n,e)}}},["Delete"])])])},filterNode:function(s,t){return!s||t.label.indexOf(s)!==-1}},data:function(){return{data:a,data2:l,data3:e,regions:i,defaultProps:r,props:_,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display a set of data with hierarchies.")]),s._m(1),a("p",[s._v("Basic tree structure.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-2-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-1'")]),s._v("\n }]\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n }\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleNodeClick(data) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Used for node selection. In the following example, data for each layer is acquired after being clicked. If there is no child data, the expanding icon will disappear.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n export default {\n data() {\n return {\n regions: [{\n 'name': 'region1'\n }, {\n 'name': 'region2'\n }],\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.regions,props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"regions"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":load")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loadNode"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("lazy")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@check-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("regions")]),s._v(": [{\n "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zones'")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("count")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleCheckChange(data, checked, indeterminate) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n },\n loadNode(node, resolve) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([{ "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Root1'")]),s._v(" }, { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Root2'")]),s._v(" }]);\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level > "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([]);\n\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" hasChild;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v(") {\n hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v(") {\n hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n hasChild = "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random() > "),a("span",{staticClass:"hljs-number"},[s._v("0.5")]),s._v(";\n }\n\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" data;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (hasChild) {\n data = [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n }];\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n data = [];\n }\n\n resolve(data);\n }, "),a("span",{staticClass:"hljs-number"},[s._v("500")]),s._v(");\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("The checkbox of a node can be set as disabled.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data3,props:s.defaultProps,"show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@check-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n }]\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disabled'")]),s._v(",\n },\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Tree nodes can be initially expanded or checked")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:s.defaultProps}})],1),a("p",[s._v("Use "),a("code",[s._v("default-expanded-keys")]),s._v(" and "),a("code",[s._v("default-checked-keys")]),s._v(" to set initially expanded and initially checked nodes respectively. Note that for them to work, "),a("code",[s._v("node-key")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":default-expanded-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[2, 3]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":default-checked-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[5]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n
    \n get by node\n get by key\n set by node\n set by key\n reset\n
    \n\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", style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{ref:"tree",attrs:{data:s.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:s.defaultProps}}),a("div",{staticClass:"buttons"},[a("el-button",{on:{click:s.getCheckedNodes}},[s._v("get by node")]),a("el-button",{on:{click:s.getCheckedKeys}},[s._v("get by key")]),a("el-button",{on:{click:s.setCheckedNodes}},[s._v("set by node")]),a("el-button",{on:{click:s.setCheckedKeys}},[s._v("set by key")]),a("el-button",{on:{click:s.resetChecked}},[s._v("reset")])],1)],1),a("p",[s._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, "),a("code",[s._v("node-key")]),s._v(" is required.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("highlight-current")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"buttons"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getCheckedNodes"')]),s._v(">")]),s._v("get by node"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getCheckedKeys"')]),s._v(">")]),s._v("get by key"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCheckedNodes"')]),s._v(">")]),s._v("set by node"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCheckedKeys"')]),s._v(">")]),s._v("set by key"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"resetChecked"')]),s._v(">")]),s._v("reset"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n getCheckedNodes() {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedNodes());\n },\n getCheckedKeys() {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedKeys());\n },\n setCheckedNodes() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedNodes([{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n }]);\n },\n setCheckedKeys() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys(["),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("]);\n },\n resetChecked() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys([]);\n }\n },\n\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("The content of tree nodes can be customized, so you can add icons or buttons as you will")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n',script:"\n let id = 1000;\n\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 methods: {\n append(store, data) {\n store.append({ id: id++, label: 'testtest', children: [] }, data);\n },\n\n remove(store, data) {\n store.remove(data);\n },\n\n renderContent(h, { node, data, store }) {\n return (\n \n \n {node.label}\n \n \n this.append(store, data) }>Append\n this.remove(store, data) }>Delete\n \n );\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,props:s.defaultProps,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":s.renderContent}})],1),a("p",[s._v("Use "),a("code",[s._v("render-content")]),s._v(" to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),a("code",[s._v("render-content")]),s._v(" will work if relevant dependencies are correctly configured.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":expand-on-click-node")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":render-content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"renderContent"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n let id = "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(";\n\n export "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n data2: [{\n id: "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n children: [{\n id: "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n children: [{\n id: "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n id: "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n id: "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n children: [{\n id: "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n }, {\n id: "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n id: "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n children: [{\n id: "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n }, {\n id: "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n defaultProps: {\n children: "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n label: "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n }\n }\n },\n\n methods: {\n append(store, data) {\n store.append({ id: id++, label: "),a("span",{staticClass:"hljs-string"},[s._v("'testtest'")]),s._v(", children: [] }, data);\n },\n\n remove(store, data) {\n store.remove(data);\n },\n\n renderContent(h, { node, data, store }) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (\n \n \n {node.label}\n \n \n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".append(store, data) }>Append\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".remove(store, data) }>Delete\n \n );\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Tree nodes can be filtered")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\n\n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:s.filterText,callback:function(t){s.filterText=t},expression:"filterText"}}),a("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:s.data2,props:s.defaultProps,"default-expand-all":"","filter-node-method":s.filterNode}})],1),a("p",[s._v("Invoke the "),a("code",[s._v("filter")]),s._v(" method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, "),a("code",[s._v("filter-node-method")]),s._v(" is required, and its value is the filtering method.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Filter keyword"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterText"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filter-tree"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-node-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterNode"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("watch")]),s._v(": {\n filterText(val) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree2.filter(val);\n }\n },\n\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n filterNode(value, data) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data.label.indexOf(value) !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n }\n },\n\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n }\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Only one node among the same level can be expanded at one time.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps,accordion:""},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-2-1'")]),s._v("\n }]\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v(",\n "),a("span",{ -staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-1'")]),s._v("\n }]\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n }\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleNodeClick(data) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tree"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"selectable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selectable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Selectable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-checkbox","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled checkbox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"default-expanded-and-default-checked"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#default-expanded-and-default-checked","aria-hidden":"true"}},[s._v("¶")]),s._v(" Default expanded and default checked")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checking-tree-nodes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checking-tree-nodes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checking tree nodes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-node-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-node-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom node content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tree-node-filtering"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree-node-filtering","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree node filtering")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"accordion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accordion")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("tree data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("text displayed when data is void")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("node-key")]),a("td",[s._v("unique identity key name for nodes, its value should be unique across the whole tree")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("load")]),a("td",[s._v("method for loading subtree data")]),a("td",[s._v("function(node, resolve)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("render function for tree node")]),a("td",[s._v("Function(h, { node }")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("highlight-current")]),a("td",[s._v("whether current node is highlighted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-node-key")]),a("td",[s._v("key of current node, a set only prop")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v("whether to expand all nodes by default")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-on-click-node")]),a("td",[s._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.")]),a("td",[s._v("—")]),a("td",[s._v("true")]),a("td")]),a("tr",[a("td",[s._v("auto-expand-parent")]),a("td",[s._v("whether to expand father node when a child node is expanded")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("default-expanded-keys")]),a("td",[s._v("array of keys of initially expanded nodes")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-checkbox")]),a("td",[s._v("whether node is selectable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("check-strictly")]),a("td",[s._v("whether checked state of a node not affects its father and child nodes when "),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-checked-keys")]),a("td",[s._v("array of keys of initially checked nodes")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-node-method")]),a("td",[s._v("this function will be executed on each node when use filter method. if return "),a("code",[s._v("false")]),s._v(", tree node will be hidden.")]),a("td",[s._v("Function(value, data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("whether only one node among the same level can be expanded at one time")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indent")]),a("td",[s._v("horizontal indentation of nodes in adjacent levels in pixels")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("16")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of node object is used as the node's label")]),a("td",[s._v("string, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("specify which node object is used as the node's subtree")]),a("td",[s._v("string, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("specify which key of node object represents if node's checkbox is disabled")]),a("td",[s._v("boolean, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Tree")]),s._v(" has the following method, which returns the currently selected array of nodes.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("filter")]),a("td",[s._v("filter all tree nodes, filtered nodes will be hidden")]),a("td",[s._v("Accept a parameter which will be used as first parameter for filter-node-method")])]),a("tr",[a("td",[s._v("getCheckedNodes")]),a("td",[s._v("If the node can be selected ("),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")]),s._v("), it returns the currently selected array of nodes")]),a("td",[s._v("Accept a boolean type parameter whose default value is "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setCheckedNodes")]),a("td",[s._v("set certain nodes to be checked, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("an array of nodes to be checked")])]),a("tr",[a("td",[s._v("getCheckedKeys")]),a("td",[s._v("If the node can be selected ("),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")]),s._v("), it returns the currently selected array of node's keys")]),a("td",[s._v("(leafOnly) Accept a boolean type parameter whose default value is "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setCheckedKeys")]),a("td",[s._v("set certain nodes to be checked, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._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 "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setChecked")]),a("td",[s._v("set node to be checked or not, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._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.")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("node-click")]),a("td",[s._v("triggers when a node is clicked")]),a("td",[s._v("three parameters: node object corresponding to the node clicked, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("check-change")]),a("td",[s._v("triggers when the selected state of the node changes")]),a("td",[s._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")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when current node changes")]),a("td",[s._v("two parameters: node object corresponding to the current node, "),a("code",[s._v("node")]),s._v(" property of TreeNode")])]),a("tr",[a("td",[s._v("node-expand")]),a("td",[s._v("triggers when current node open")]),a("td",[s._v("three parameters: node object corresponding to the node opened, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("node-collapse")]),a("td",[s._v("triggers when current node close")]),a("td",[s._v("three parameters: node object corresponding to the node closed, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])])])])}]}},function(s,t,a){s.exports=a(637)},function(s,t,a){function l(s){a(638)}var e=a(13)(null,a(640),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(639);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("773d8950",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-typo-box{height:200px;width:200px;position:relative;border:1px solid #eaeefb;font-size:40px;color:#1f2d3d;text-align:center;line-height:162px;padding-bottom:36px;box-sizing:border-box;display:inline-block;margin-right:17px;border-radius:4px}.demo-typo-box .name{position:absolute;bottom:0;width:100%;height:35px;border-top:1px solid #eaeefb;font-size:14px;color:#8492a6;line-height:35px;text-align:left;text-indent:10px;font-family:Helvetica Neue}.demo-typo-size .h1{font-size:20px}.demo-typo-size .h2{font-size:18px}.demo-typo-size .h3{font-size:16px}.demo-typo-size .text-regular{font-size:14px}.demo-typo-size .text-small{font-size:13px}.demo-typo-size .text-smaller{font-size:12px}.demo-typo-size .color-dark-light{color:#99a9bf}.typo-PingFang{font-family:PingFang SC}.typo-Hiragino{font-family:Hiragino Sans GB}.typo-Microsoft{font-family:Microsoft YaHei}.typo-Helvetica-Neue{font-family:Helvetica Neue}.typo-Helvetica{font-family:Helvetica}.typo-Arial{font-family:Arial}",""])},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"typography"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#typography","aria-hidden":"true"}},[s._v("¶")]),s._v(" Typography")]),a("p",[s._v("We create a font convention to ensure the best presentation across different platforms.")]),a("h3",{attrs:{id:"chinese-font"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chinese-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" Chinese Font")]),a("div",{staticClass:"demo-typo-box typo-PingFang"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("PingFang SC")])]),a("div",{staticClass:"demo-typo-box typo-Hiragino"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("Hiragino Sans GB")])]),a("div",{staticClass:"demo-typo-box typo-Microsoft"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("Microsoft YaHei")])]),a("h3",{attrs:{id:"english-numberic-font"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#english-numberic-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" English / Numberic Font")]),a("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Helvetica Neue")])]),a("div",{staticClass:"demo-typo-box typo-Helvetica"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Helvetica")])]),a("div",{staticClass:"demo-typo-box typo-Arial"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Arial")])]),a("h3",{attrs:{id:"font-family"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font-family")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("font-family")]),s._v(': "'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Neue")]),s._v('",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(',"'),a("span",{staticClass:"hljs-selector-tag"},[s._v("PingFang")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("SC")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Hiragino")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Sans")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("GB")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Microsoft")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("YaHei")]),s._v('","微软雅黑",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Arial")]),s._v(","),a("span",{staticClass:"hljs-selector-tag"},[s._v("sans-serif")]),s._v(";\n")])]),a("h3",{attrs:{id:"font-convention"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-convention","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font Convention")]),a("table",{staticClass:"demo-typo-size"},[a("tbody",[a("tr",[a("td",{staticClass:"h1"},[s._v("Main Title")]),a("td",{staticClass:"h1"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("20px Extra large")])]),a("tr",[a("td",{staticClass:"h2"},[s._v("Title")]),a("td",{staticClass:"h2"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("18px large")])]),a("tr",[a("td",{staticClass:"h3"},[s._v("Small Title")]),a("td",{staticClass:"h3"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("16px Medium")])]),a("tr",[a("td",{staticClass:"text-regular"},[s._v("Body")]),a("td",{staticClass:"text-regular"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("14px Small")])]),a("tr",[a("td",{staticClass:"text-small"},[s._v("Body (small)")]),a("td",{staticClass:"text-small"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("13px Extra Small")])]),a("tr",[a("td",{staticClass:"text-smaller"},[s._v("Supplementary text")]),a("td",{staticClass:"text-smaller"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("12px Extra Extra Small")])])])])])}]}},function(s,t,a){s.exports=a(642)},function(s,t,a){function l(s){a(643)}var e=a(13)(a(645),a(646),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(644);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("4fb7a61e",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".upload-tip{color:#8492a6;font-size:12px;margin-top:7px}.demo-box{margin-bottom:24px}.demo-box .upload-demo{width:360px}.demo-box .avatar-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.demo-box .avatar-uploader .el-upload:hover{border-color:#20a0ff}.demo-box .avatar-uploader .avatar-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;text-align:center}.demo-box .avatar-uploader .avatar{width:178px;height:178px;display:block}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],fileList2:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],fileList3:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],imageUrl:"",dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(s,t){console.log(s,t)},beforeUpload:function(s){return!(s.size>4e7)||(console.warn(s.name+" is too large!"),!1)},handlePreview:function(s){console.log(s)},handlePictureCardPreview:function(s){this.dialogImageUrl=s.url,this.dialogVisible=!0},submitUpload:function(){this.$refs.upload.submit()},handleAvatarSuccess:function(s,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(s){var t="image/jpeg"===s.type,a=s.size/1024/1024<2;return t||this.$message.error("Avatar picture must be JPG format!"),a||this.$message.error("Avatar picture size can not exceed 2MB!"),t&&a},handleChange:function(s,t){this.fileList3=t.slice(-3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Upload files by clicking or drag-and-drop")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Click to upload\n
    jpg/png files with a size less than 500kb
    \n    \n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("p",[s._v("Customize upload button type and text using "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePreview(file) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n\n\n\n\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",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: #20a0ff;\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":s.handleAvatarSuccess,"before-upload":s.beforeAvatarUpload}},[s.imageUrl?a("img",{staticClass:"avatar",attrs:{src:s.imageUrl}}):a("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar-uploader"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":show-file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-success")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleAvatarSuccess"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":before-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beforeAvatarUpload"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus avatar-uploader-icon"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1px")]),s._v(" dashed "),a("span",{staticClass:"hljs-number"},[s._v("#d9d9d9")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("position")]),s._v(": relative;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("overflow")]),s._v(": hidden;\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":hover")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-color")]),s._v(": "),a("span",{ +staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-1'")]),s._v("\n }]\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-1'")]),s._v("\n }]\n }]\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n }\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleNodeClick(data) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tree"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"selectable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selectable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Selectable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-checkbox","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled checkbox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"default-expanded-and-default-checked"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#default-expanded-and-default-checked","aria-hidden":"true"}},[s._v("¶")]),s._v(" Default expanded and default checked")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checking-tree-nodes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checking-tree-nodes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checking tree nodes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-node-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-node-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom node content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tree-node-filtering"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree-node-filtering","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree node filtering")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"accordion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accordion")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("tree data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("text displayed when data is void")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("node-key")]),a("td",[s._v("unique identity key name for nodes, its value should be unique across the whole tree")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("load")]),a("td",[s._v("method for loading subtree data")]),a("td",[s._v("function(node, resolve)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("render function for tree node")]),a("td",[s._v("Function(h, { node }")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("highlight-current")]),a("td",[s._v("whether current node is highlighted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-node-key")]),a("td",[s._v("key of current node, a set only prop")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v("whether to expand all nodes by default")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-on-click-node")]),a("td",[s._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.")]),a("td",[s._v("—")]),a("td",[s._v("true")]),a("td")]),a("tr",[a("td",[s._v("auto-expand-parent")]),a("td",[s._v("whether to expand father node when a child node is expanded")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("default-expanded-keys")]),a("td",[s._v("array of keys of initially expanded nodes")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-checkbox")]),a("td",[s._v("whether node is selectable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("check-strictly")]),a("td",[s._v("whether checked state of a node not affects its father and child nodes when "),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-checked-keys")]),a("td",[s._v("array of keys of initially checked nodes")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-node-method")]),a("td",[s._v("this function will be executed on each node when use filter method. if return "),a("code",[s._v("false")]),s._v(", tree node will be hidden.")]),a("td",[s._v("Function(value, data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("whether only one node among the same level can be expanded at one time")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indent")]),a("td",[s._v("horizontal indentation of nodes in adjacent levels in pixels")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("16")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of node object is used as the node's label")]),a("td",[s._v("string, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("specify which node object is used as the node's subtree")]),a("td",[s._v("string, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("specify which key of node object represents if node's checkbox is disabled")]),a("td",[s._v("boolean, function(data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Tree")]),s._v(" has the following method, which returns the currently selected array of nodes.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("filter")]),a("td",[s._v("filter all tree nodes, filtered nodes will be hidden")]),a("td",[s._v("Accept a parameter which will be used as first parameter for filter-node-method")])]),a("tr",[a("td",[s._v("getCheckedNodes")]),a("td",[s._v("If the node can be selected ("),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")]),s._v("), it returns the currently selected array of nodes")]),a("td",[s._v("Accept a boolean type parameter whose default value is "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setCheckedNodes")]),a("td",[s._v("set certain nodes to be checked, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("an array of nodes to be checked")])]),a("tr",[a("td",[s._v("getCheckedKeys")]),a("td",[s._v("If the node can be selected ("),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")]),s._v("), it returns the currently selected array of node's keys")]),a("td",[s._v("(leafOnly) Accept a boolean type parameter whose default value is "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setCheckedKeys")]),a("td",[s._v("set certain nodes to be checked, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._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 "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setChecked")]),a("td",[s._v("set node to be checked or not, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._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.")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("node-click")]),a("td",[s._v("triggers when a node is clicked")]),a("td",[s._v("three parameters: node object corresponding to the node clicked, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("check-change")]),a("td",[s._v("triggers when the selected state of the node changes")]),a("td",[s._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")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when current node changes")]),a("td",[s._v("two parameters: node object corresponding to the current node, "),a("code",[s._v("node")]),s._v(" property of TreeNode")])]),a("tr",[a("td",[s._v("node-expand")]),a("td",[s._v("triggers when current node open")]),a("td",[s._v("three parameters: node object corresponding to the node opened, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("node-collapse")]),a("td",[s._v("triggers when current node close")]),a("td",[s._v("three parameters: node object corresponding to the node closed, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])])])])}]}},function(s,t,a){s.exports=a(637)},function(s,t,a){function l(s){a(638)}var e=a(13)(null,a(640),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(639);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("0a5b2e12",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".demo-typo-box{height:200px;width:200px;position:relative;border:1px solid #eaeefb;font-size:40px;color:#1f2d3d;text-align:center;line-height:162px;padding-bottom:36px;box-sizing:border-box;display:inline-block;margin-right:17px;border-radius:4px}.demo-typo-box .name{position:absolute;bottom:0;width:100%;height:35px;border-top:1px solid #eaeefb;font-size:14px;color:#8492a6;line-height:35px;text-align:left;text-indent:10px;font-family:Helvetica Neue}.demo-typo-size .h1{font-size:20px}.demo-typo-size .h2{font-size:18px}.demo-typo-size .h3{font-size:16px}.demo-typo-size .text-regular{font-size:14px}.demo-typo-size .text-small{font-size:13px}.demo-typo-size .text-smaller{font-size:12px}.demo-typo-size .color-dark-light{color:#99a9bf}.typo-PingFang{font-family:PingFang SC}.typo-Hiragino{font-family:Hiragino Sans GB}.typo-Microsoft{font-family:Microsoft YaHei}.typo-Helvetica-Neue{font-family:Helvetica Neue}.typo-Helvetica{font-family:Helvetica}.typo-Arial{font-family:Arial}",""])},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"typography"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#typography","aria-hidden":"true"}},[s._v("¶")]),s._v(" Typography")]),a("p",[s._v("We create a font convention to ensure the best presentation across different platforms.")]),a("h3",{attrs:{id:"chinese-font"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chinese-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" Chinese Font")]),a("div",{staticClass:"demo-typo-box typo-PingFang"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("PingFang SC")])]),a("div",{staticClass:"demo-typo-box typo-Hiragino"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("Hiragino Sans GB")])]),a("div",{staticClass:"demo-typo-box typo-Microsoft"},[s._v("\n 和畅惠风\n "),a("div",{staticClass:"name"},[s._v("Microsoft YaHei")])]),a("h3",{attrs:{id:"english-numberic-font"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#english-numberic-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" English / Numberic Font")]),a("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Helvetica Neue")])]),a("div",{staticClass:"demo-typo-box typo-Helvetica"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Helvetica")])]),a("div",{staticClass:"demo-typo-box typo-Arial"},[s._v("\n RGag\n "),a("div",{staticClass:"name"},[s._v("Arial")])]),a("h3",{attrs:{id:"font-family"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font-family")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("font-family")]),s._v(': "'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Neue")]),s._v('",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(',"'),a("span",{staticClass:"hljs-selector-tag"},[s._v("PingFang")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("SC")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Hiragino")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Sans")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("GB")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Microsoft")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("YaHei")]),s._v('","微软雅黑",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Arial")]),s._v(","),a("span",{staticClass:"hljs-selector-tag"},[s._v("sans-serif")]),s._v(";\n")])]),a("h3",{attrs:{id:"font-convention"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-convention","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font Convention")]),a("table",{staticClass:"demo-typo-size"},[a("tbody",[a("tr",[a("td",{staticClass:"h1"},[s._v("Main Title")]),a("td",{staticClass:"h1"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("20px Extra large")])]),a("tr",[a("td",{staticClass:"h2"},[s._v("Title")]),a("td",{staticClass:"h2"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("18px large")])]),a("tr",[a("td",{staticClass:"h3"},[s._v("Small Title")]),a("td",{staticClass:"h3"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("16px Medium")])]),a("tr",[a("td",{staticClass:"text-regular"},[s._v("Body")]),a("td",{staticClass:"text-regular"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("14px Small")])]),a("tr",[a("td",{staticClass:"text-small"},[s._v("Body (small)")]),a("td",{staticClass:"text-small"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("13px Extra Small")])]),a("tr",[a("td",{staticClass:"text-smaller"},[s._v("Supplementary text")]),a("td",{staticClass:"text-smaller"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("12px Extra Extra Small")])])])])])}]}},function(s,t,a){s.exports=a(642)},function(s,t,a){function l(s){a(643)}var e=a(13)(a(645),a(646),l,null,null);s.exports=e.exports},function(s,t,a){var l=a(644);"string"==typeof l&&(l=[[s.id,l,""]]),l.locals&&(s.exports=l.locals);a(11)("77ef4c08",l,!0)},function(s,t,a){t=s.exports=a(6)(),t.push([s.id,".upload-tip{color:#8492a6;font-size:12px;margin-top:7px}.demo-box{margin-bottom:24px}.demo-box .upload-demo{width:360px}.demo-box .avatar-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.demo-box .avatar-uploader .el-upload:hover{border-color:#20a0ff}.demo-box .avatar-uploader .avatar-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;text-align:center}.demo-box .avatar-uploader .avatar{width:178px;height:178px;display:block}",""])},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],fileList2:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],fileList3:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",status:"finished"}],imageUrl:"",dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(s,t){console.log(s,t)},beforeUpload:function(s){return!(s.size>4e7)||(console.warn(s.name+" is too large!"),!1)},handlePreview:function(s){console.log(s)},handlePictureCardPreview:function(s){this.dialogImageUrl=s.url,this.dialogVisible=!0},submitUpload:function(){this.$refs.upload.submit()},handleAvatarSuccess:function(s,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(s){var t="image/jpeg"===s.type,a=s.size/1024/1024<2;return t||this.$message.error("Avatar picture must be JPG format!"),a||this.$message.error("Avatar picture size can not exceed 2MB!"),t&&a},handleChange:function(s,t){this.fileList3=t.slice(-3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Upload files by clicking or drag-and-drop")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Click to upload\n
    jpg/png files with a size less than 500kb
    \n    \n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("p",[s._v("Customize upload button type and text using "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePreview(file) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n \n\n\n\n\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",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: #20a0ff;\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":s.handleAvatarSuccess,"before-upload":s.beforeAvatarUpload}},[s.imageUrl?a("img",{staticClass:"avatar",attrs:{src:s.imageUrl}}):a("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar-uploader"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":show-file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-success")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleAvatarSuccess"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":before-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beforeAvatarUpload"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus avatar-uploader-icon"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1px")]),s._v(" dashed "),a("span",{staticClass:"hljs-number"},[s._v("#d9d9d9")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("cursor")]),s._v(": pointer;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("position")]),s._v(": relative;\n "),a("span",{staticClass:"hljs-attribute"},[s._v("overflow")]),s._v(": hidden;\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":hover")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-color")]),s._v(": "),a("span",{ staticClass:"hljs-number"},[s._v("#20a0ff")]),s._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader-icon")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("28px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#8c939d")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n }\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("imageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleAvatarSuccess(res, file) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".imageUrl = URL.createObjectURL(file.raw);\n },\n beforeAvatarUpload(file) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isJPG = file.type === "),a("span",{staticClass:"hljs-string"},[s._v("'image/jpeg'")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isLt2M = file.size / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" < "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(";\n\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isJPG) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'Avatar picture must be JPG format!'")]),s._v(");\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isLt2M) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'Avatar picture size can not exceed 2MB!'")]),s._v(");\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" isJPG && isLt2M;\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n\n\n \n\n\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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":s.handlePictureCardPreview,"on-remove":s.handleRemove}},[a("i",{staticClass:"el-icon-plus"})]),a("el-dialog",{attrs:{size:"tiny"},model:{value:s.dialogVisible,callback:function(t){s.dialogVisible=t},expression:"dialogVisible"}},[a("img",{attrs:{width:"100%",src:s.dialogImageUrl,alt:""}})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture-card"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePictureCardPreview"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100%"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogImageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("alt")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("dialogImageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePictureCardPreview(file) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogImageUrl = file.url;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Click to upload\n
    jpg/png files with a size less than 500kb
    \n    \n\n',script:"\n export default {\n data() {\n return {\n fileList2: [{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",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList2,"list-type":"picture"}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("fileList2")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePreview(file) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(7),s._m(8),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n Click to upload\n
    jpg/png files with a size less than 500kb
    \n    \n\n',script:"\n export default {\n data() {\n return {\n fileList3: [{\n name: 'food.jpeg',\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',\n status: 'finished'\n }, {\n name: 'food2.jpeg',\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',\n status: 'finished'\n }]\n };\n },\n methods: {\n handleChange(file, fileList) {\n this.fileList3 = fileList.slice(-3);\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":s.handleChange,"file-list":s.fileList3}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("fileList3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'finished'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'finished'")]),s._v("\n }]\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(file, fileList) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fileList3 = fileList.slice("),a("span",{staticClass:"hljs-number"},[s._v("-3")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("You can drag your file to a certain area to upload it.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n \n
    Drop file here or click to upload
    \n
    jpg/png files with a size less than 500kb
    \n    \n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList,multiple:""}},[a("i",{staticClass:"el-icon-upload"}),a("div",{staticClass:"el-upload__text"},[s._v("Drop file here or "),a("em",[s._v("click to upload")])]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("drag")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__text"')]),s._v(">")]),s._v("Drop file here or "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),s._v("click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(10),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'\n select file\n upload to server\n
    jpg/png files with a size less than 500kb
    \n    \n\n',script:"\n export default {\n methods: {\n submitUpload() {\n this.$refs.upload.submit();\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[a("el-button",{attrs:{size:"small",type:"primary"},slot:"trigger"},[s._v("select file")]),a("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:s.submitUpload}},[s._v("upload to server")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":auto-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"trigger"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("select file"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-left: 10px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"submitUpload"')]),s._v(">")]),s._v("upload to server"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n submitUpload() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.upload.submit();\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"click-to-upload-files"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#click-to-upload-files","aria-hidden":"true"}},[s._v("¶")]),s._v(" Click to upload files")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"user-avatar-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#user-avatar-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" User avatar upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("before-upload")]),s._v(" hook to limit the upload file format and size.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"photo-wall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#photo-wall","aria-hidden":"true"}},[s._v("¶")]),s._v(" Photo Wall")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("list-type")]),s._v(" to change the fileList style.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filelist-with-thumbnail"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filelist-with-thumbnail","aria-hidden":"true"}},[s._v("¶")]),s._v(" FileList with thumbnail")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"file-list-control"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#file-list-control","aria-hidden":"true"}},[s._v("¶")]),s._v(" File list control")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("on-change")]),s._v(" hook function to control upload file list")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"drag-to-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#drag-to-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Drag to upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"manual-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#manual-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Manual upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("action")]),a("td",[s._v("required, request URL")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("headers")]),a("td",[s._v("request headers")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("whether uploading multiple files is permitted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("data")]),a("td",[s._v("additions options of request")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("key name for uploaded file")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("file")])]),a("tr",[a("td",[s._v("with-credentials")]),a("td",[s._v("whether cookies are sent")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-file-list")]),a("td",[s._v("whether to show the uploaded file list")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("drag")]),a("td",[s._v("whether to activate drag and drop mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("accept")]),a("td",[s._v("accepted "),a("a",{ attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[s._v("file types")]),s._v(", will not work when "),a("code",[s._v("thumbnail-mode")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-preview")]),a("td",[s._v("hook function when clicking the uploaded files")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-remove")]),a("td",[s._v("hook function when files are removed")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-success")]),a("td",[s._v("hook function when uploaded successfully")]),a("td",[s._v("function(response, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-error")]),a("td",[s._v("hook function when some errors occurs")]),a("td",[s._v("function(err, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-progress")]),a("td",[s._v("hook function when some progress occurs")]),a("td",[s._v("function(event, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-change")]),a("td",[s._v("hook function when select file or upload file success or upload file fail")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-upload")]),a("td",[s._v("hook function before uploading with the file to be uploaded as its parameter. If "),a("code",[s._v("false")]),s._v(" is returned or a "),a("code",[s._v("Promise")]),s._v(" is returned and then is rejected, uploading will be aborted")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("thumbnail-mode")]),a("td",[s._v("whether thumbnail is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("file-list")]),a("td",[s._v("default uploaded files, e.g. [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[]")])]),a("tr",[a("td",[s._v("list-type")]),a("td",[s._v("type of fileList")]),a("td",[s._v("string")]),a("td",[s._v("text/picture/picture-card")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("auto-upload")]),a("td",[s._v("whether to auto upload file")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("http-request")]),a("td",[s._v("override default xhr behavior, allowing you to implement your own upload-file's request")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disable upload")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Methods Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("clearFiles")]),a("td",[s._v("clear the uploaded file list (this method is not supported in the "),a("code",[s._v("before-upload")]),s._v(" hook)")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("abort")]),a("td",[s._v("cancel upload request")]),a("td",[s._v("（ file: fileList's item ）")])])])])}]}}])); \ No newline at end of file diff --git a/1.4/index.html b/1.4/index.html index b58f54672..cf97aba55 100644 --- a/1.4/index.html +++ b/1.4/index.html @@ -6,7 +6,7 @@ Element - +
    @@ -17,7 +17,7 @@ - +