element/1.0/docs.944a09b.js

webpackJsonp([0,2],[function(s,t,a){s.exports=a(1)},function(s,t,a){(function(s){"use strict";function t(s){return s&&s.__esModule?s:{default:s}}var n=a(2),e=t(n),l=a(3),i=t(l),r=a(19),c=t(r),o=a(20),p=t(o),h=a(536),d=t(h);a(858);var C=a(865),m=t(C),u=a(871),j=t(u),g=a(877),b=t(g),f=a(884),v=t(f),y=a(889),w=t(y),k=a(894),x=t(k);e.default.use(d.default),e.default.use(c.default),e.default.component("demo-block",m.default),e.default.component("main-footer",j.default),e.default.component("main-header",b.default),e.default.component("side-nav",v.default),e.default.component("footer-nav",w.default);var _=new c.default({mode:"hash",base:s,routes:p.default});_.afterEach(function(s){var t=x.default[s.meta.lang];for(var a in t)if(new RegExp("^"+a,"g").test(s.name))return void(document.title=t[a]);document.title="Element"}),new e.default({render:function(s){return s(i.default)},router:_}).$mount("#app")}).call(t,"/")},,function(s,t,a){var n,e;a(4),n=a(12);var l=a(18);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,s.exports=n},function(s,t){},,,,,,,,function(s,t,a){"use strict";function n(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s},l=a(13),i=a(14),r=n(i),c=a(17),o=n(c);(0,l.use)(location.href.indexOf("zh-CN")>-1?r.default:o.default),t.default={name:"app",computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"}},watch:{lang:function(){this.localize()}},methods:{localize:function(){(0,l.use)("zh-CN"===this.lang?r.default:o.default)},renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var s=document.querySelectorAll("h2 a,h3 a"),t=location.href.split("#").splice(0,2).join("#");[].slice.call(s).forEach(function(s){var a=s.getAttribute("href");s.href=t+a})}},goAnchor:function(){if(location.href.match(/#/g).length>1){var s=function(){var s=location.href.match(/#[^#]+$/g);if(!s)return{v:void 0};var t=document.querySelector(s[0]);return t?void setTimeout(function(s){document.documentElement.scrollTop=document.body.scrollTop=t.offsetTop+120},50):{v:void 0}}();if("object"===("undefined"==typeof s?"undefined":e(s)))return s.v}}},mounted:function(){this.localize(),this.renderAnchorHref(),this.goAnchor()},created:function(){var s=this;window.addEventListener("hashchange",function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,s.renderAnchorHref()):s.goAnchor()})}}},,,,,function(s,t){"use strict";t.__esModule=!0,t.default={el:{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:"January",month2:"February",month3:"March",month4:"April",month5:"May",month6:"June",month7:"July",month8:"August",month9:"September",month10:"October",month11:"November",month12:"December",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"},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"},tree:{emptyText:"No Data"}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",{attrs:{id:"app"}},["play"!==s.lang?t("main-header"):s._e(),t("div",{staticClass:"main-cnt"},[t("router-view")]),"play"!==s.lang?t("main-footer"):s._e()])},staticRen
attrs:{id:"1-0-3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-3","aria-hidden":"true"}},["¶"])," 1.0.3"]),t("p",[t("em",["2016-11-28"])]),t("ul",[t("li",["修复 Pagination 的 ",t("code",["currentPage"])," 在某些情况下设置无效的情况，#1336"]),t("li",["修复 DatePicker 为 ",t("code",["month"])," 且设置了 ",t("code",["disabledDate"])," 的情况下切换年份时界面未更新的问题，#1158"]),t("li",["修复 DatePicker readonly 时未禁用清除按钮的问题，#1238"]),t("li",["修复 Slider 绑定值为 ",t("code",["NaN"])," 以及 ",t("code",["step"])," 小于 1 时无法正常工作的问题，#1239 #1282"]),t("li",["增加 Table 的多表头功能，#1312"]),t("li",["增加 Table 的 ",t("code",["rowStyle"])," 属性，#1348"]),t("li",["修复 TableColumn 的某些属性无法动态设置的问题，#1314"]),t("li",["增加 Tree 的 ",t("code",["filter-node-method"])," 属性和 ",t("code",["filter"])," 方法，#1257"]),t("li",["增加 Tree 的 ",t("code",["getCheckedKeys"])," 和 ",t("code",["setCheckedKeys"])," 方法，#1254"]),t("li",["重构 Checkbox/Radio 支持嵌套 Group 绑定值，#1152"]),t("li",["修复 Popper 在 keep-alive 下无法触发销毁的问题，#1359"]),t("li",["增加 Form 中深对象验证的支持，#1363"]),t("li",["增加 Autocomplete 里的 ",t("code",["append"])," 和 ",t("code",["prepend"])," API，#1369"]),t("li",["增加 Pagination ",t("code",["pageSizes"])," 属性的动态支持，#1372"]),t("li",["增加 Radio Button 自定义选中按钮样式的 API，#1380"]),t("li",["增加 Menu Group 支持通过 slot 来设置 title，#1382"]),t("li",["修复 DatePicker 选择年的 bug，#1385"]),t("li",["新增 Upload 默认已上传的文件列表 API，#1393"]),t("li",["增加 Checkbox ",t("code",["label"])," 属性绑定的多类型支持，#1400"]),t("li",["增加 Tree 的 ",t("code",["setChecked"])," 方法，#1422"])]),t("h3",{attrs:{id:"1-0-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-2","aria-hidden":"true"}},["¶"])," 1.0.2"]),t("p",[t("em",["2016-11-18"])]),t("ul",[t("li",["新增 Table ",t("code",["context"])," 属性，可以指定自定义 column 内部可获取的上下文，#1161"]),t("li",["新增 多种语言支持"]),t("li",["修复 没有正确动态渲染语言的问题，#1160"]),t("li",["新增 Alert 的 ",t("code",["render-content"])," 属性，#568"]),t("li",["新增 Button 的 focus 样式，#982"]),t("li",["修复 Switch 的 ",t("code",["change"])," 事件触发时机错误的问题，#1162"]),t("li",["修复 TimeSelect 开始时间设置 ",t("code",["00:00"])," 后会被禁用的问题，#676"]),t("li",["新增 Table ",t("code",["show-header"])," 属性，",t("code",["header-click"])," 事件。#1195"]),t("li",["完善 Table 的 ",t("code",["height"])," 属性，当 ",t("code",["height"])," 属性为字符串的时候，表示 Table 的高度受外部样式控制，#1195"]),t("li",["修复 Table 的 ",t("code",["selection-change"])," 在某些情况下不触发的问题，#1198"]),t("li",["修复 Table 动态修改 ",t("code",["fixed"])," 属性可能会造成锁定列不消失的问题，#1182"])]),t("h3",{attrs:{id:"1-0-1"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-1","aria-hidden":"true"}},["¶"])," 1.0.1"]),t("p",[t("em",["2016-11-16"])]),t("ul",[t("li",["修复 Pagination 错误地多次触发 ",t("code",["current-change"])," 事件的问题"]),t("li",["修复 Switch 在 Form 中的样式错误，#967"]),t("li",["修复 Loading 在某些情况下错误地锁定 ",t("code",["body"])," 滚动的问题，#968"]),t("li",["Col 组件的 ",t("code",["span"])," 属性不再是必填属性，在省略的情况下其默认值为 ",t("code",["24"])]),t("li",["新增 DatePicker ",t("code",["disabled"])," 和 ",t("code",["editable"])," 属性，#976"]),t("li",["修复 DatePicker 的 ",t("code",["readonly"])," 与原生行为一致，现在通过设置 editable=false 禁止输入但是可通过弹框选日期，#976"]),t("li",["新增 Message 和 Notification 的 ",t("code",["close"])," 方法，用<EFBFBD>
},['"info"']),"\n    ",t("span",{staticClass:"hljs-attr"},["description"]),"=",t("span",{staticClass:"hljs-string"},['"more text description"']),"\n    ",t("span",{staticClass:"hljs-attr"},["show-icon"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-alert"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-alert"]),"\n    ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"warning alert"']),"\n    ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"warning"']),"\n    ",t("span",{staticClass:"hljs-attr"},["description"]),"=",t("span",{staticClass:"hljs-string"},['"more text description"']),"\n    ",t("span",{staticClass:"hljs-attr"},["show-icon"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-alert"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-alert"]),"\n    ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"error alert"']),"\n    ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"error"']),"\n    ",t("span",{staticClass:"hljs-attr"},["description"]),"=",t("span",{staticClass:"hljs-string"},['"more text description"']),"\n    ",t("span",{staticClass:"hljs-attr"},["show-icon"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-alert"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},["¶"])," Attributes"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",[t("strong",["title"])]),t("td",["title ",t("strong",["REQUIRED"])]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["type"]),t("td",["component type"]),t("td",["string"]),t("td",["success/warning/info/error"]),t("td",["info"])]),t("tr",[t("td",["description"]),t("td",["supportive text"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["render-content"]),t("td",["render function for content area, overrides ",t("code",["description"])]),t("td",["function(h)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["closable"]),t("td",["if closable or not"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["close-text"]),t("td",["customized close button text"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["show-icon"]),t("td",["if a type icon is displayed"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},["¶"])," Events"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Event Name"]),t("th",["Description"]),t("th",["Parameters"])])]),t("tbody",[t("tr",[t("td",["close"]),t("td",["fires when alert is closed"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(57)},function(s,t,a){var n,e;a(58);var l=a(60);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,e._scopeId="data-v-5bbf2362",s.exports=n},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("section",[s._m(0),s._m(1),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge :value="12" class="item">\n  <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="3" 
slot:"source",staticClass:"source"},[t("el-button",{attrs:{type:"primary",loading:!0}},["Loading"])]),s._m(27),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(28)])]),s._m(29),s._m(30),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" size="large">Large Button</el-button>\n<el-button type="primary">Default Button</el-button>\n<el-button type="primary" size="small">Small Button</el-button>\n<el-button type="primary" size="mini">Mini Button</el-button>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-button",{attrs:{type:"primary",size:"large"}},["Large Button"]),t("el-button",{attrs:{type:"primary"}},["Default Button"]),t("el-button",{attrs:{type:"primary",size:"small"}},["Small Button"]),t("el-button",{attrs:{type:"primary",size:"mini"}},["Mini Button"])]),s._m(31),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(32)])]),s._m(33),s._m(34)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},["¶"])," Button"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Commonly used button."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},["¶"])," Basic usage"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Button provides 7 themes defined by the ",t("code",["type"])," attribute."])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"Default Button",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"']),">"]),"Primary Button",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"']),">"]),"Text Button",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"disabled-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-button","aria-hidden":"true"}},["¶"])," Disabled Button"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["The ",t("code",["disableds"])," attribute determines if the button is disabled."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use ",t("code",["disabled"])," attribute to determine whether a button is disabled. It accepts a ",t("code",["Boolean"])," value."])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},[":disabled"]),"=",t("span",{staticClass:"hljs-string"},['"true"']),">"]),"Default Button",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),"Primary Button",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hlj
},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"with-images"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-images","aria-hidden":"true"}},["¶"])," With images"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Display richer content by adding some configs."])},function(){var s=this,t=s.$createElement;s._c;return t("img",{staticClass:"image",attrs:{src:a(76)}})},function(){var s=this,t=s.$createElement;s._c;return t("span",["Yummy hamburger"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["The ",t("code",["body-style"])," attribute defines CSS style of custom ",t("code",["body"]),". This example also uses ",t("code",["el-col"])," for layout."])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-row"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"8"'])," ",t("span",{staticClass:"hljs-attr"},["v-for"]),"=",t("span",{staticClass:"hljs-string"},['"(o, index) in 2"'])," ",t("span",{staticClass:"hljs-attr"},[":offset"]),"=",t("span",{staticClass:"hljs-string"},['"index > 0 ? 2 : 0"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-card"])," ",t("span",{staticClass:"hljs-attr"},[":body-style"]),"=",t("span",{staticClass:"hljs-string"},["\"{ padding: '0px' }\""]),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["img"])," ",t("span",{staticClass:"hljs-attr"},["src"]),"=",t("span",{staticClass:"hljs-string"},['"~examples/assets/images/hamburger.png"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"image"']),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"padding: 14px;"']),">"]),"\n        ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"]),">"]),"Yummy hamburger",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n        ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"bottom clearfix"']),">"]),"\n          ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["time"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"time"']),">"]),t("span",["{{"])," currentDate ",t("span",["}}"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["time"]),">"]),"\n          ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"button"']),">"]),"Operating button",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n        ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-card"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-row"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"css"},["\n  ",t("span",{staticClass:"hljs-selector-class"},[".time"])," {\n    ",t("span",{staticClass:"hljs-attribute"},["font-size
},["from"])," ",t("span",{staticClass:"hljs-string"},["'vue'"]),"\n\nVue.use(ElementUI)\n"])]),t("h3",{attrs:{id:"import-component-theme-on-demand"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-component-theme-on-demand","aria-hidden":"true"}},["¶"])," Import component theme on demand"]),t("p",["If you are using ",t("code",["babel-plugin-component"])," for on-demand import, just modify ",t("code",[".babelrc"])," and specify ",t("code",["styleLibraryName"])," to the path where your custom theme is located relative to ",t("code",[".babelrc"]),". Note that ",t("code",["~"])," is required:"]),t("pre",[t("code",{staticClass:"hljs language-json"},["{\n  ",t("span",{staticClass:"hljs-attr"},['"plugins"']),": [[",t("span",{staticClass:"hljs-string"},['"component"']),", [\n    {\n      ",t("span",{staticClass:"hljs-attr"},['"libraryName"']),": ",t("span",{staticClass:"hljs-string"},['"element-ui"']),",\n      ",t("span",{staticClass:"hljs-attr"},['"styleLibraryName"']),": ",t("span",{staticClass:"hljs-string"},['"~theme"']),"\n    }\n  ]]]\n}\n"])]),t("p",["If you are unfamiliar with ",t("code",["babel-plugin-component"]),", please refer to ",t("a",{attrs:{href:"./#/en-US/component/quickstart"}},["Quick Start"]),". For more details, check out the ",t("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},["project repository"])," of ",t("code",["element-theme"]),"."])])}]}},function(s,t,a){s.exports=a(88)},function(s,t,a){var n,e;n=a(89);var l=a(90);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,s.exports=n},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;s._c;return t("section",[s._m(0),s._m(1),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker v-model="value1" type="date" placeholder="Pick a day">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Picker with quick options</span>\n    <el-date-picker v-model="value2" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\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}}},[t("div",{slot:"source",staticClass:"source"},[[t("div",{staticClass:"block"},[s._m(4),t("el-date-picker",{directives:[{name:"model",rawNa
s.exports=n},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;s._c;return t("section",[s._m(0),s._m(1),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker v-model="value1" type="datetime" placeholder="Select date and time">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With shortcuts</span>\n    <el-date-picker v-model="value2" type="datetime" placeholder="Select date and time" :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\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}}},[t("div",{slot:"source",staticClass:"source"},[[t("div",{staticClass:"block"},[s._m(3),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],attrs:{type:"datetime",placeholder:"Select date and time"},domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})]),t("div",{staticClass:"block"},[s._m(4),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{type:"datetime",placeholder:"Select date and time","picker-options":s.pickerOptions1},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})])]]),s._m(5),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(6)])]),s._m(7),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">Default</span>\n    <el-date-picker v-model="value3" type="datetimerange" placeholder="Select time range" style="width:350px">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">With shortcuts</span>\n    <el-date-picker v-model="value4" type="datetimerange" :picker-options="pickerOptions2" placeholder="Select time range" align="right" style="width:350px">\n    </el-date-picker>\n  </div>\n</template>\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          
},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"dialogVisible = true"']),">"]),"click to open the Dialog",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dialog"])," ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"Tips"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"dialogVisible"'])," ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"tiny"']),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"]),">"]),"This is a message",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"footer"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"dialog-footer"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"dialogVisible = false"']),">"]),"Cancel",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"dialogVisible = false"']),">"]),"Confirm",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-dialog"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["dialogVisible"]),": ",t("span",{staticClass:"hljs-literal"},["false"]),"\n      };\n    }\n  };\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"customizations"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},["¶"])," Customizations"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["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。"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-comment"},["<!-- Table -->"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"dialogTableVisible = true"'])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"']),">"]),"open a Table nested Dialog",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dialog"])," ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClas
},["</",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"Action 3",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"Action 4",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"Action 5",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-dropdown-menu"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-dropdown"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dropdown"])," ",t("span",{staticClass:"hljs-attr"},["split-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleClick"']),">"]),"\n  Dropdown List\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dropdown-menu"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"dropdown"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"Action 1",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"Action 2",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"Action 3",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"Action 4",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"Action 5",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-dropdown-item"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-dropdown-menu"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-dropdown"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"how-to-trigger"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-to-trigger","aria-hidden":"true"}},["¶"])," How to trigger"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Click the triggering element or hover on it."])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["hover to trigger"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"el-dropdown-link"},["\n        Dropdown List",t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["click to trigger"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"el-dropdown-link"},["\n        Dropdown List",t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use the attribute ",t("code",["trigger"]),". By default, it is ",t("code",["hover"]),"."])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("sp
script:"\n  export default {\n    data() {\n      return {\n        formStacked: {\n          name: '',\n          region: '',\n          type: ''\n        }\n      };\n    }\n  }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-form",{staticClass:"demo-form-stacked",attrs:{"label-position":"top",model:s.formStacked}},[t("el-form-item",{attrs:{label:"Name"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formStacked.name,expression:"formStacked.name"}],domProps:{value:s.formStacked.name},on:{input:function(t){s.formStacked.name=t}}})]),t("el-form-item",{attrs:{label:"Activity zone"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formStacked.region,expression:"formStacked.region"}],domProps:{value:s.formStacked.region},on:{input:function(t){s.formStacked.region=t}}})]),t("el-form-item",{attrs:{label:"Activity form"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formStacked.type,expression:"formStacked.type"}],domProps:{value:s.formStacked.type},on:{input:function(t){s.formStacked.type=t}}})])])]),s._m(13),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(14)])]),s._m(15),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="formAlignRight" label-width="120px">\n  <el-form-item label="Activity name">\n    <el-input v-model="formAlignRight.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Promote area">\n    <el-input v-model="formAlignRight.region"></el-input>\n  </el-form-item>\n  <el-form-item label="Form of activity">\n    <el-input v-model="formAlignRight.type"></el-input>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        formAlignRight: {\n          name: '',\n          region: '',\n          type: ''\n        }\n      };\n    }\n  }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-form",{attrs:{model:s.formAlignRight,"label-width":"120px"}},[t("el-form-item",{attrs:{label:"Activity name"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formAlignRight.name,expression:"formAlignRight.name"}],domProps:{value:s.formAlignRight.name},on:{input:function(t){s.formAlignRight.name=t}}})]),t("el-form-item",{attrs:{label:"Promote area"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formAlignRight.region,expression:"formAlignRight.region"}],domProps:{value:s.formAlignRight.region},on:{input:function(t){s.formAlignRight.region=t}}})]),t("el-form-item",{attrs:{label:"Form of activity"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formAlignRight.type,expression:"formAlignRight.type"}],domProps:{value:s.formAlignRight.type},on:{input:function(t){s.formAlignRight.type=t}}})])])]),s._m(16),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(17)])]),s._m(18),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="formAlignLeft" label-position="left" label-width="120px">\n  <el-form-item label="Activity name">\n    <el-input v-model="formAlignLeft.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Promotion area">\n    <el-input v-model="formAlignLeft.region"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input v-model="formAlignLeft.type"></el-input>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        formAlignLeft: {\n          name: '',\n          region: '',\n          type: ''\n        }\n      };\n    }\n  }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-form",{attrs:{model:s.formAlignLeft,"label-position":"left","label-width":"120px"}},[t("el-form-item",{attrs:{label:"Activity name"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formAlignLeft.name,expression:"formAlignLeft.name"}],domProps:{value:s.formAlignLeft.name},on:{input:function(t){s.formAlignLeft.name=t}}})]),t("el-form-item",{attrs:{label:"Promotion area"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formAlignLeft.region
},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["form"]),": {\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n          ",t("span",{staticClass:"hljs-attr"},["region"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n          ",t("span",{staticClass:"hljs-attr"},["date1"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n          ",t("span",{staticClass:"hljs-attr"},["date2"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n          ",t("span",{staticClass:"hljs-attr"},["delivery"]),": ",t("span",{staticClass:"hljs-literal"},["false"]),",\n          ",t("span",{staticClass:"hljs-attr"},["type"]),": [],\n          ",t("span",{staticClass:"hljs-attr"},["resource"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n          ",t("span",{staticClass:"hljs-attr"},["desc"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n        }\n      }\n    },\n    ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n      onSubmit() {\n        ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(",t("span",{staticClass:"hljs-string"},["'submit!'"]),");\n      }\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"inline-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inline-form","aria-hidden":"true"}},["¶"])," Inline form"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["When the vertical space is limited and the form is relatively simple, you can put it in one line."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set the ",t("code",["inline"])," attribute to ",t("code",["true"])," and the form will be inline."])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form"])," ",t("span",{staticClass:"hljs-attr"},[":inline"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"formInline"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demo-form-inline"']),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form-item"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"formInline.user"'])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Approved by"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-form-item"]),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form-item"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-select"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"formInline.region"'])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Activity zone"']),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Zone one"'])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"shanghai"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-option"]),">"]),"\n      ",t(
},["el-form"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["ruleForm"]),": {\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n          ",t("span",{staticClass:"hljs-attr"},["region"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n          ",t("span",{staticClass:"hljs-attr"},["date1"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n          ",t("span",{staticClass:"hljs-attr"},["date2"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n          ",t("span",{staticClass:"hljs-attr"},["delivery"]),": ",t("span",{staticClass:"hljs-literal"},["false"]),",\n          ",t("span",{staticClass:"hljs-attr"},["type"]),": [],\n          ",t("span",{staticClass:"hljs-attr"},["resource"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n          ",t("span",{staticClass:"hljs-attr"},["desc"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n        },\n        ",t("span",{staticClass:"hljs-attr"},["rules"]),": {\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": [\n            { ",t("span",{staticClass:"hljs-attr"},["required"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),", ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'Please input Activity name'"]),", ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'blur'"])," },\n            { ",t("span",{staticClass:"hljs-attr"},["min"]),": ",t("span",{staticClass:"hljs-number"},["3"]),", ",t("span",{staticClass:"hljs-attr"},["max"]),": ",t("span",{staticClass:"hljs-number"},["5"]),", ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'Length should be 3 to 5'"]),", ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'blur'"])," }\n          ],\n          ",t("span",{staticClass:"hljs-attr"},["region"]),": [\n            { ",t("span",{staticClass:"hljs-attr"},["required"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),", ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'Please select Activity zone'"]),", ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'change'"])," }\n          ],\n          ",t("span",{staticClass:"hljs-attr"},["date1"]),": [\n            { ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'date'"]),", ",t("span",{staticClass:"hljs-attr"},["required"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),", ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'Please pick a date'"]),", ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'change'"])," }\n          ],\n          ",t("span",{staticClass:"hljs-attr"},["date2"]),": [\n            { ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'date'"]),", ",t("span",{staticClass:"hljs-attr"},["required"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),", ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'Please pick a time'"]),", ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'change'"])," }\n          ],\n          ",t("span",{staticClass:"hljs-attr"},["type"]),": [\n            { ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'array'"]),", ",t("span",{staticClass:"hljs-attr"},["required"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),", ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{sta
},["from"])," ",t("span",{staticClass:"hljs-string"},["'element-ui/lib/locale/lang/en'"]),"\n",t("span",{staticClass:"hljs-keyword"},["import"])," locale ",t("span",{staticClass:"hljs-keyword"},["from"])," ",t("span",{staticClass:"hljs-string"},["'element-ui/lib/locale'"]),"\n\n",t("span",{staticClass:"hljs-comment"},["// configure language"]),"\nlocale.use(lang)\n\n",t("span",{staticClass:"hljs-comment"},["// import components"]),"\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n"])]),t("p",["The Chinese language pack is imported by default, even if you're using another language. But with ",t("code",["NormalModuleReplacementPlugin"])," provided by webpack you can replace default locale:"]),t("p",["webpack.config.js"]),t("pre",[t("code",{staticClass:"hljs language-javascript"},["{\n  ",t("span",{staticClass:"hljs-attr"},["plugins"]),": [\n    ",t("span",{staticClass:"hljs-keyword"},["new"])," webpack.NormalModuleReplacementPlugin(",t("span",{staticClass:"hljs-regexp"},["/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/"]),", ",t("span",{staticClass:"hljs-string"},["'element-ui/lib/locale/lang/en'"]),")\n  ]\n}\n"])]),t("p",["Currently Element ships with the following languages:"]),t("ul",{staticClass:"language-list"},[t("li",["Simplified Chinese (zh-CN)"]),t("li",["English (en)"]),t("li",["German (de)"]),t("li",["Portuguese (pt)"]),t("li",["Spanish (es)"]),t("li",["Danish (da)"]),t("li",["French (fr)"]),t("li",["Norwegian (nb-NO)"]),t("li",["Traditional Chinese (zh-TW)"]),t("li",["Italian (it)"]),t("li",["Korean (ko)"]),t("li",["Japanese (ja)"]),t("li",["Dutch (nl)"]),t("li",["Vietnamese (vi)"]),t("li",["Russian (ru-RU)"]),t("li",["Turkish (tr-TR)"]),t("li",["Brazilian Portuguese (pt-br)"]),t("li",["Farsi (fa)"]),t("li",["Thai (th)"]),t("li",["Indonesian (id)"])]),t("p",["If your target language is not included, you are more than welcome to contribute: just add another language config ",t("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/master/src/locale/lang"}},["here"])," and create a pull request."])])}]}},function(s,t,a){s.exports=a(118)},function(s,t,a){var n,e;n=a(119);var l=a(121);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,s.exports=n},function(s,t,a){"use strict";t.__esModule=!0;var n=a(120);t.default={data:function(){return{icons:n}}}},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){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("section",[s._m(0),s._m(1),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="search">Search</el-button>\n\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[s._m(4),s._m(5),s._m(6),t("el-button",{attrs:{type:"primary",icon:"search"}},["Search"])]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(7)])]),s._m(8),t("ul",{staticClass:"icon-list"},[s._l(s.icons,function(a){return t("li",[t("span",[t("i",{class:"el-icon-"+a}),"\n      "+s._s("el-icon-"+a)+"\n    "])])})])])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},["¶"])," Icon"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Element provides a set of common icons."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ba
input:function(t){s.state4=t}}})]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(33)])]),s._m(34),s._m(35),s._m(36),s._m(37),s._m(38),s._m(39),s._m(40),s._m(41)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},["¶"])," Input"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Input data using mouse or keyboard."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},["¶"])," Basic usage"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"]),"\n  ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Please input"']),"\n  ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"input"']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n  data() {\n    ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n      ",t("span",{staticClass:"hljs-attr"},["input"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n    }\n  }\n}\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},["¶"])," Disabled"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Disable the Input with the ",t("code",["disabled"])," attribute."])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"]),"\n  ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Please input"']),"\n  ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"input1"']),"\n  ",t("span",{staticClass:"hljs-attr"},[":disabled"]),"=",t("span",{staticClass:"hljs-string"},['"true"']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n  data() {\n    ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n      ",t("span",{staticClass:"hljs-attr"},["input1"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n    }\n  }\n}\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"input-with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-with-icon","aria-hidden":"true"}},["¶"])," Input with icon"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Add an icon to indicate input type."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can add an icon at the end of Input by setting the ",t("code",["icon"])," attribute."])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"]),"\n  ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Pick a date"']),"\n  ",t("span",{staticClass:"hljs-attr"},["
staticClass:"hljs-string"},['"link"']),": ",t("span",{staticClass:"hljs-string"},['"https://github.com/vuejs/vue-router"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"babel"']),", ",t("span",{staticClass:"hljs-string"},['"link"']),": ",t("span",{staticClass:"hljs-string"},['"https://github.com/babel/babel"'])," }\n         ];\n      },\n      handleSelect(item) {\n        ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(item);\n      }\n    },\n    mounted() {\n      ",t("span",{staticClass:"hljs-keyword"},["this"]),".links = ",t("span",{staticClass:"hljs-keyword"},["this"]),".loadAll();\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"remote-search"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},["¶"])," Remote search"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Search data from server-side."])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-autocomplete"]),"\n  ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"state4"']),"\n  ",t("span",{staticClass:"hljs-attr"},[":fetch-suggestions"]),"=",t("span",{staticClass:"hljs-string"},['"querySearchAsync"']),"\n  ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Please input"']),"\n  ",t("span",{staticClass:"hljs-attr"},["@select"]),"=",t("span",{staticClass:"hljs-string"},['"handleSelect"']),"\n>"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-autocomplete"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["links"]),": [],\n        ",t("span",{staticClass:"hljs-attr"},["state4"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n        ",t("span",{staticClass:"hljs-attr"},["timeout"]),":  ",t("span",{staticClass:"hljs-literal"},["null"]),"\n      };\n    },\n    ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n      loadAll() {\n        ",t("span",{staticClass:"hljs-keyword"},["return"])," [\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"vue"']),", ",t("span",{staticClass:"hljs-string"},['"link"']),": ",t("span",{staticClass:"hljs-string"},['"https://github.com/vuejs/vue"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"element"']),", ",t("span",{staticClass:"hljs-string"},['"link"']),": ",t("span",{staticClass:"hljs-string"},['"https://github.com/ElemeFE/element"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"cooking"']),", ",t("span",{staticClass:"hljs-string"},['"link"']),": ",t("span",{staticClass:"hljs-string"},['"https://github.com/ElemeFE/cooking"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"mint-ui"']),", ",t("span",{staticClass:"hljs-string"},['"link"']),": ",t("span",{staticClass:"hljs-string"},['"https://github.com/ElemeFE/mint-ui"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"vuex"']),", ",t("span",{staticClass:"hljs-string"},['"link"']),": ",t("span",{staticClass:"hljs-string"},['"https://github.com/vuejs/vuex"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"vue-router"'
staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-row"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-row"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"12"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"grid-content bg-purple"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"12"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"grid-content bg-purple-light"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-row"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-row"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"8"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"grid-content bg-purple"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"8"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"grid-content bg-purple-light"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"8"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"grid-content bg-purple"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-row"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-row"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"6"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs
},['"6"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"grid-content bg-purple"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"6"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"grid-content bg-purple-light"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"6"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"grid-content bg-purple"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-row"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-row"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"flex"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"row-bg"'])," ",t("span",{staticClass:"hljs-attr"},["justify"]),"=",t("span",{staticClass:"hljs-string"},['"center"']),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"6"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"grid-content bg-purple"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"6"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"grid-content bg-purple-light"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"6"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"grid-content bg-purple"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-row"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-row"])," ",t("span",{s
},["false"]),"\n      }\n    },\n    ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n      openFullScreen() {\n        ",t("span",{staticClass:"hljs-keyword"},["this"]),".fullscreenLoading = ",t("span",{staticClass:"hljs-literal"},["true"]),";\n        setTimeout(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["()"])," =>"])," {\n          ",t("span",{staticClass:"hljs-keyword"},["this"]),".fullscreenLoading = ",t("span",{staticClass:"hljs-literal"},["false"]),";\n        }, ",t("span",{staticClass:"hljs-number"},["3000"]),");\n      }\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"service"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},["¶"])," Service"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can also invoke Loading with a service. Import Loading service:"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},["import"])," { Loading } ",t("span",{staticClass:"hljs-keyword"},["from"])," ",t("span",{staticClass:"hljs-string"},["'element-ui'"]),";\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Invoke it:"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-javascript"},["Loading.service(options);\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("p",["The parameter ",t("code",["options"])," is the configuration of Loading, and its details can be found in the following table. ",t("code",["LoadingService"])," returns a Loading instance, and you can close it by invoking its ",t("code",["close"])," method:"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},["let"])," loadingInstance = Loading.service(options);\nloadingInstance.close();\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("p",["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:"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},["let"])," loadingInstance1 = Loading.service({ ",t("span",{staticClass:"hljs-attr"},["fullscreen"]),": ",t("span",{staticClass:"hljs-literal"},["true"])," });\n",t("span",{staticClass:"hljs-keyword"},["let"])," loadingInstance2 = Loading.service({ ",t("span",{staticClass:"hljs-attr"},["fullscreen"]),": ",t("span",{staticClass:"hljs-literal"},["true"])," });\n",t("span",{staticClass:"hljs-built_in"},["console"]),".log(loadingInstance1 === loadingInstance2); ",t("span",{staticClass:"hljs-comment"},["// true"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Calling the ",t("code",["close"])," method on any one of them can close this full screen Loading."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["If Element is imported entirely, a globally method ",t("code",["$loading"])," will be registered to Vue.prototype. You can invoke it like this: ",t("code",["this.$loading(options)"]),", and it also returns a Loading instance."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},["¶"])," Options"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["target"]),t("td",["the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it w
staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"title"']),">"]),"item four",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n          ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-menu-item"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"1-4-1"']),">"]),"item one",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-menu-item"]),">"]),"\n        ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-submenu"]),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-submenu"]),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-menu-item"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),"Navigator Two",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-menu-item"]),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-menu-item"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"3"']),">"]),"Navigator Three",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-menu-item"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-menu"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"8"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["h5"]),">"]),"Groups",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["h5"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-menu"])," ",t("span",{staticClass:"hljs-attr"},["mode"]),"=",t("span",{staticClass:"hljs-string"},['"vertical"'])," ",t("span",{staticClass:"hljs-attr"},["default-active"]),"=",t("span",{staticClass:"hljs-string"},['"1"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-menu-vertical-demo"']),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-menu-item-group"])," ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"Group One"']),">"]),"\n        ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-menu-item"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"1"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-message"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"Navigator One",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-menu-item"]),">"]),"\n        ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-menu-item"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-message"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"Navigator Two",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-menu-item"]),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-menu-item-group"]),">"]),"\n
s._c;return t("p",["The corresponding methods are: ",t("code",["MessageBox"]),", ",t("code",["MessageBox.alert"]),", ",t("code",["MessageBox.confirm"])," and ",t("code",["MessageBox.prompt"]),"."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},["¶"])," Options"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["title"]),t("td",["title of the MessageBox"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["message"]),t("td",["content of the MessageBox"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["type"]),t("td",["message type, used for icon display"]),t("td",["string"]),t("td",["success/info/warning/error"]),t("td",["—"])]),t("tr",[t("td",["customClass"]),t("td",["custom class name for MessageBox"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["callback"]),t("td",["MessageBox closing callback if you don't prefer Promise"]),t("td",["function(action), where action can be 'confirm' or 'cancel'"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["lockScroll"]),t("td",["whether to lock body scroll when MessageBox prompts"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["showCancelButton"]),t("td",["whether to show a cancel button"]),t("td",["boolean"]),t("td",["—"]),t("td",["false (true when called with confirm and prompt)"])]),t("tr",[t("td",["showConfirmButton"]),t("td",["whether to show a confirm button"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["cancelButtonText"]),t("td",["text content of cancel button"]),t("td",["string"]),t("td",["—"]),t("td",["Cancel"])]),t("tr",[t("td",["confirmButtonText"]),t("td",["text content of confirm button"]),t("td",["string"]),t("td",["—"]),t("td",["OK"])]),t("tr",[t("td",["cancelButtonClass"]),t("td",["custom class name of cancel button"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["confirmButtonClass"]),t("td",["custom class name of confirm button"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["closeOnClickModal"]),t("td",["whether MessageBox can be closed by clicking the mask"]),t("td",["boolean"]),t("td",["—"]),t("td",["true (false when called with alert)"])]),t("tr",[t("td",["closeOnPressEscape"]),t("td",["whether MessageBox can be closed by pressing the ESC"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["showInput"]),t("td",["whether to show an input"]),t("td",["boolean"]),t("td",["—"]),t("td",["false (true when called with prompt)"])]),t("tr",[t("td",["inputPlaceholder"]),t("td",["placeholder of input"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["inputPattern"]),t("td",["regexp for the input"]),t("td",["regexp"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["inputValidator"]),t("td",["validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage"]),t("td",["function"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["inputErrorMessage"]),t("td",["error message when validation fails"]),t("td",["string"]),t("td",["—"]),t("td",["Illegal input"])])])])}]}},function(s,t,a){s.exports=a(151)},function(s,t,a){var n,e;n=a(152);var l=a(153);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,s.exports=n},function(s,t){"use strict";s.exports={methods:{open:function(){this.$message("This is a message")},open2:function(){this.$message({message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message.error("Oops, thi
staticClass:"hljs-attr"},["plain"]),"\n    ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open3"']),">"]),"\n    Success\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),"\n    ",t("span",{staticClass:"hljs-attr"},["plain"]),"\n    ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open4"']),">"]),"\n    Warning\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),"\n    ",t("span",{staticClass:"hljs-attr"},["plain"]),"\n    ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open5"']),">"]),"\n    Info\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),"\n    ",t("span",{staticClass:"hljs-attr"},["plain"]),"\n    ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open6"']),">"]),"\n    Error\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n      open3() {\n        ",t("span",{staticClass:"hljs-keyword"},["this"]),".$notify({\n          ",t("span",{staticClass:"hljs-attr"},["title"]),": ",t("span",{staticClass:"hljs-string"},["'Success'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'This is a success message'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'success'"]),"\n        });\n      },\n\n      open4() {\n        ",t("span",{staticClass:"hljs-keyword"},["this"]),".$notify({\n          ",t("span",{staticClass:"hljs-attr"},["title"]),": ",t("span",{staticClass:"hljs-string"},["'Warning'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'This is a warning message'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'warning'"]),"\n        });\n      },\n\n      open5() {\n        ",t("span",{staticClass:"hljs-keyword"},["this"]),".$notify.info({\n          ",t("span",{staticClass:"hljs-attr"},["title"]),": ",t("span",{staticClass:"hljs-string"},["'Info'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'This is an info message'"]),"\n        });\n      },\n\n      open6() {\n        ",t("span",{staticClass:"hljs-keyword"},["this"]),".$notify.error({\n          ",t("span",{staticClass:"hljs-attr"},["title"]),": ",t("span",{staticClass:"hljs-string"},["'Error'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'This is an error message'"]),"\n        });\n      }\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"with-offset"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-offset","aria-hidden":"true"}},["¶"])," With offset"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Customize Notification's offset from the top edge of the screen"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set the ",t("code",["offset"])," attribute to 
s.exports=n},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;s._c;return t("section",[s._m(0),s._m(1),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover ref="popover1" placement="top-start" title="Title" width="200" trigger="hover" content="this is content, this is content, this is content">\n</el-popover>\n\n<el-popover ref="popover2" placement="bottom" title="Title" width="200" trigger="click" content="this is content, this is content, this is content">\n</el-popover>\n\n<el-button v-popover:popover1>Hover to activate</el-button>\n<el-button v-popover:popover2>Click to activate</el-button>\n<el-popover placement="right" title="Title" width="200" trigger="focus" content="this is content, this is content, this is content">\n  <el-button slot="reference">Focus to activate</el-button>\n</el-popover>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}}),t("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}}),t("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},["Hover to activate"]),t("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},["Click to activate"]),t("el-popover",{attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}},[t("el-button",{slot:"reference"},["Focus to activate"])])]),s._m(3),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(4)])]),s._m(5),s._m(6),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover ref="popover4" placement="right" width="400" trigger="click">\n  <el-table :data="gridData">\n    <el-table-column width="150" property="date" label="date"></el-table-column>\n    <el-table-column width="100" property="name" label="name"></el-table-column>\n    <el-table-column width="300" property="address" label="address"></el-table-column>\n  </el-table>\n</el-popover>\n\n<el-button v-popover:popover4>Click to activate</el-button>\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}}},[t("div",{slot:"source",staticClass:"source"},[t("el-popover",{ref:"popover4",attrs:{placement:"right",width:"400",tr
},[":percentage"]),"=",t("span",{staticClass:"hljs-string"},['"0"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-progress"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-progress"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"circle"'])," ",t("span",{staticClass:"hljs-attr"},[":percentage"]),"=",t("span",{staticClass:"hljs-string"},['"25"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-progress"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-progress"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"circle"'])," ",t("span",{staticClass:"hljs-attr"},[":percentage"]),"=",t("span",{staticClass:"hljs-string"},['"100"'])," ",t("span",{staticClass:"hljs-attr"},["status"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-progress"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-progress"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"circle"'])," ",t("span",{staticClass:"hljs-attr"},[":percentage"]),"=",t("span",{staticClass:"hljs-string"},['"50"'])," ",t("span",{staticClass:"hljs-attr"},["status"]),"=",t("span",{staticClass:"hljs-string"},['"exception"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-progress"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},["¶"])," Attributes"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",[t("strong",["percentage"])]),t("td",["percentage, ",t("strong",["required"])]),t("td",["number"]),t("td",["0-100"]),t("td",["0"])]),t("tr",[t("td",["type"]),t("td",["the type of progress bar"]),t("td",["string"]),t("td",["line/circle"]),t("td",["line"])]),t("tr",[t("td",["stroke-width"]),t("td",["the width of progress bar"]),t("td",["number"]),t("td",["—"]),t("td",["6"])]),t("tr",[t("td",["text-inside"]),t("td",["whether to place the percentage inside progress bar, only works when ",t("code",["type"])," is 'line'"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["status"]),t("td",["the current status of progress bar"]),t("td",["string"]),t("td",["success/exception"]),t("td",["—"])]),t("tr",[t("td",["width"]),t("td",["the canvas width of circle progress bar"]),t("td",["number"]),t("td",["—"]),t("td",["126"])]),t("tr",[t("td",["show-text"]),t("td",["whether to show percentage"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])])])])}]}},function(s,t,a){s.exports=a(170)},function(s,t,a){var n,e,l=a(171);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,s.exports=n},function(s,t){s.exports={render:function(){var s=this;s.$createElement,s._c;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("section",[t("h2",{attrs:{id:"quick-start"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},["¶"])," Quick start"]),t("p",["This part walks you through the process of using Element in a webpack project."]),t("h3",{attrs:{id:"use-starter-kit"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#use-starter-kit","aria-hidden":"true"}},["¶"])," Use Starter Kit"]),t("p",["We provide a general ",t("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},["project template"])," for you. For those who are familiar with ",t("a",{attrs:{href:"https://github.com/ElementUI
},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"radio-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},["¶"])," Radio-group Attributes"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["size"]),t("td",["the size of radio buttons"]),t("td",["string"]),t("td",["large/small"]),t("td",["—"])]),t("tr",[t("td",["fill"]),t("td",["border and background color when button is active"]),t("td",["string"]),t("td",["—"]),t("td",["#20a0ff"])]),t("tr",[t("td",["text-color"]),t("td",["font color when button is active"]),t("td",["string"]),t("td",["—"]),t("td",["#ffffff"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"radio-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},["¶"])," Radio-group Events"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Event Name"]),t("th",["Description"]),t("th",["Parameters"])])]),t("tbody",[t("tr",[t("td",["change"]),t("td",["triggers when the bound value changes"]),t("td",["the label value of the chosen radio"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"radio-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},["¶"])," Radio-button Attributes"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["label"]),t("td",["the value of radio"]),t("td",["string/number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["disabled"]),t("td",["whether radio is disabled"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])}]}},function(s,t,a){s.exports=a(177)},function(s,t,a){var n,e;n=a(178);var l=a(179);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,s.exports=n},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;s._c;return t("section",[s._m(0),s._m(1),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">Default</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">Color for different levels</span>\n  <el-rate v-model="value2" :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n  </el-rate>\n</div>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("div",{staticClass:"block"},[s._m(3),t("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})]),t("div",{staticClass:"block"},[s._m(4),t("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})])]),s._m(5),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(6)])]),s._m(7),s._m(8),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<el-rate v-model=\"value3\" :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\" show-text>\n</el-rate>\n\n\n",script:"\n  export default {\n    data() {\n      retur
staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value9" multiple filterable="" remote placeholder="Please enter a keyword" :remote-method="remoteMethod" :loading="loading">\n    <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\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}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value9,expression:"value9"}],attrs:{multiple:"",filterable:"",remote:"",placeholder:"Please enter a keyword","remote-method":s.remoteMethod,loading:s.loading},domProps:{value:s.value9},on:{input:function(t){s.value9=t}}},[s._l(s.options4,function(s){return t("el-option",{key:s.value,attrs:{label:s.label},domProps:{value:s.value}})})])]]),s._m(34),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(35)])]),s._m(36),s._m(37),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value10" multiple filterable="" allow-create placeholder="Choose tags for your article">\n    <el-option v-for="item in options5" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\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}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value10,expression:"value10"}],attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"Choose tags for your article"},domProps:{value:s.value10},on:{input:function(t){s.value10=t}}},[s._l(s.options5,function(s){return t("el-option",{attrs:{label:s.label},domProps:{value:s.value}})})])]]),s._m(38),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(39)])]),s._m(40),s._m(41),s._m(42),s._m(43),s._m(44),s._m(45),s._m(46),s._m(47)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},["¶"])," Select"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["When there are plenty of options, use a drop-down menu to display and select desired ones."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:
staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"option-filtering"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-filtering","aria-hidden":"true"}},["¶"])," Option filtering"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can filter options for your desired ones."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Adding ",t("code",["filterable"])," to ",t("code",["el-select"])," enables filtering. By default, Select will find all the options whose ",t("code",["label"])," attribute contains the input value. If you prefer other filtering strategies, you can pass the ",t("code",["filter-method"]),". ",t("code",["filter-method"])," is a ",t("code",["Function"])," that gets called when the input value changed, and its parameter is the current input value."])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-select"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value8"'])," ",t("span",{staticClass:"hljs-attr"},["filterable"])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Select"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"]),"\n      ",t("span",{staticClass:"hljs-attr"},["v-for"]),"=",t("span",{staticClass:"hljs-string"},['"item in options"']),"\n      ",t("span",{staticClass:"hljs-attr"},[":label"]),"=",t("span",{staticClass:"hljs-string"},['"item.label"']),"\n      ",t("span",{staticClass:"hljs-attr"},[":value"]),"=",t("span",{staticClass:"hljs-string"},['"item.value"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-option"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-select"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["options"]),": [{\n          ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Option1'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Option1'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Option2'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Option2'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Option3'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Option3'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Option4'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Option4'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Option5'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Option5'"]),"\n        }],\n        ",t("span",{staticClass:"hljs-attr"},["value8"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n      }\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</"
},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"block"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demonstration"']),">"]),"Breakpoints displayed",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-slider"]),"\n      ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value5"']),"\n      ",t("span",{staticClass:"hljs-attr"},[":step"]),"=",t("span",{staticClass:"hljs-string"},['"10"']),"\n      ",t("span",{staticClass:"hljs-attr"},["show-stops"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-slider"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["value4"]),": ",t("span",{staticClass:"hljs-number"},["0"]),",\n        ",t("span",{staticClass:"hljs-attr"},["value5"]),": ",t("span",{staticClass:"hljs-number"},["0"]),"\n      }\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"slider-with-input-box"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-with-input-box","aria-hidden":"true"}},["¶"])," Slider with input box"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set value via a input box."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set the ",t("code",["show-input"])," attribute to display an input box on the right."])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"block"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-slider"]),"\n      ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value6"']),"\n      ",t("span",{staticClass:"hljs-attr"},["show-input"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-slider"]),">"]),"  \n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["value6"]),": ",t("span",{staticClass:"hljs-number"},["0"]),"\n      }\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},["¶"])," Attributes"])},function(){var s=this,
},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},["¶"])," Attributes"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["disabled"]),t("td",["whether Switch is disabled"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["width"]),t("td",["width of Switch"]),t("td",["number"]),t("td",["—"]),t("td",["58 (with text) / 46 (no text)"])]),t("tr",[t("td",["on-close-icon"]),t("td",["class name of the icon displayed when in ",t("code",["on"])," state, overrides ",t("code",["on-text"])]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["off-close-icon"]),t("td",["class name of the icon displayed when in ",t("code",["off"])," state, overrides ",t("code",["off-text"])]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["on-text"]),t("td",["text displayed when in ",t("code",["on"])," state"]),t("td",["string"]),t("td",["—"]),t("td",["ON"])]),t("tr",[t("td",["off-text"]),t("td",["text displayed when in ",t("code",["off"])," state"]),t("td",["string"]),t("td",["—"]),t("td",["OFF"])]),t("tr",[t("td",["on-color"]),t("td",["background color when in ",t("code",["on"])," state"]),t("td",["string"]),t("td",["—"]),t("td",["#20A0FF"])]),t("tr",[t("td",["off-color"]),t("td",["background color when in ",t("code",["off"])," state"]),t("td",["string"]),t("td",["—"]),t("td",["#C0CCDA"])]),t("tr",[t("td",["name"]),t("td",["input name of Switch"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},["¶"])," Events"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Event Name"]),t("th",["Description"]),t("th",["Parameters"])])]),t("tbody",[t("tr",[t("td",["change"]),t("td",["triggers when value changes"]),t("td",["value after changing"])])])])}]}},function(s,t,a){s.exports=a(197)},function(s,t,a){var n,e;n=a(198);var l=a(199);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,s.exports=n},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"
style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData,border:"",style:"width: 100%"}},[t("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Address",formatter:s.formatter}})])]]),s._m(47),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(48)])]),s._m(49),s._m(50),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" border style="width: 100%">\n    <el-table-column prop="date" label="Date" sortable width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="Name" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="Address" :formatter="formatter">\n    </el-table-column>\n    <el-table-column prop="tag" label="Tag" width="100" :filters="[{ text: \'Home\', value: \'Home\' }, { text: \'Office\', value: \'Office\' }]" :filter-method="filterTag" inline-template>\n      <el-tag :type="row.tag === \'Home\' ? \'primary\' : \'success\'" close-transition>{{row.tag}}</el-tag>\n    </el-table-column>\n  </el-table>\n</template>\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}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData,border:"",style:"width: 100%"}},[t("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Address",formatter:s.formatter}}),t("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":s.filterTag},inlineTemplate:{render:function(){var s=this,t=s.$createElement;s._c;return t("el-tag",{attrs:{type:"Home"===s.row.tag?"primary":"success","close-transition":""}},[s._s(s.row.tag)])},staticRenderFns:[]}})])]]),s._m(51),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(52)])]),s._m(53),s._m(54),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" border style="width: 100%">\n    <el-table-column inline-template label="Date" width="180">\n      <div>\n        <el-icon name="time"></el-icon>\n        <span style="margin-left: 10px">{{ row.date }}</span>\n      </div>\n    </el-table-column>\n    <el-table-column inline-template label="Name" width="180">\n      <el-popover trigger="hover" placement="top">\n        <p>Name: {{ row.name }}</p>\n        <p>Addr: {{ row.address }}</p>\n        <div slot="reference" class="name-wrapper">\n          <el-tag>{{ row.name }}</el-tag>\n        </div>\n      </el-popover>\n    </el-table-column>\n    <el-table-column :context="_self" inline-template label="Operations">\n      <div>\n        <el-button size="small" @click="handleEdit($index, row)">\n          Edit\n        </el-button>\n        <el-button size="small" type="danger" @click="handleDelete($index, row)">\n          Delete\n        </el-button>\n      </div>\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n 
},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-02'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tom'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No. 189, Grove St, Los Angeles'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-04'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tom'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No. 189, Grove St, Los Angeles'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-01'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tom'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No. 189, Grove St, Los Angeles'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-08'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tom'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No. 189, Grove St, Los Angeles'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-06'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tom'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No. 189, Grove St, Los Angeles'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-07'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tom'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No. 189, Grove St, Los Angeles'"]),"\n        }],\n      }\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"table-with-fixed-column"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-column","aria-hidden":"true"}},["¶"])," Table with fixed column"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["When there are too many columns, you can fix some of them."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Attribute ",t("code",["fixed"])," is used in ",t("code",["el-table-column"]),", it accepts a ",t("code",["Boolean"]),". If ",t("code",["true"]),", 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."])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table"]),"\n    ",t("span",{staticClass:"hljs-attr"},[":data"]),"=",t("span",{staticClass:"hljs-string"},['"tableData"']),"\n    ",t("span",{staticClass:"hljs-attr"},["border"]),"\n    ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width: 100%"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["fixed"]),"\n      ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"date"']),"\n      ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span"
staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-02'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tom'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["state"]),": ",t("span",{staticClass:"hljs-string"},["'California'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'Los Angeles'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No. 189, Grove St, Los Angeles'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-string"},["'CA 90036'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-04'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tom'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["state"]),": ",t("span",{staticClass:"hljs-string"},["'California'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'Los Angeles'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No. 189, Grove St, Los Angeles'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-string"},["'CA 90036'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-01'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tom'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["state"]),": ",t("span",{staticClass:"hljs-string"},["'California'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'Los Angeles'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No. 189, Grove St, Los Angeles'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-string"},["'CA 90036'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-08'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tom'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["state"]),": ",t("span",{staticClass:"hljs-string"},["'California'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'Los Angeles'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No. 189, Grove St, Los Angeles'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-string"},["'CA 90036'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-06'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tom'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["state"]),": ",t("span",{staticClass:"hljs-string"},["'California'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'Los Angeles'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No. 189, Grove St, Los Angeles'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-string"},["'CA 90036'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-07'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tom'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["state"]),": ",t("span",{staticClass:"hljs-string"},["'Californi
},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"name"']),"\n      ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Name"']),"\n      ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"180"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"address"']),"\n      ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Address"']),"\n      ",t("span",{staticClass:"hljs-attr"},[":formatter"]),"=",t("span",{staticClass:"hljs-string"},['"formatter"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["tableData"]),": [{\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-03'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tom'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No. 189, Grove St, Los Angeles'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-02'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tom'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No. 189, Grove St, Los Angeles'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-04'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tom'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No. 189, Grove St, Los Angeles'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-01'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tom'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No. 189, Grove St, Los Angeles'"]),"\n        }]\n      }\n    },\n    ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n      formatter(row, column) {\n        ",t("span",{staticClass:"hljs-keyword"},["return"])," row.address;\n      }\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"filter"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filter","aria-hidden":"true"}},["¶"])," Filter"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Filter the table to find desired data."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set attribute ",t("code",["filters"])," and ",t("code",["filter-method"])," in ",t(
handleRemove:function(s){console.log(s)},handleClick:function(s,t){console.log(s,t)},renderTab:function(s,t){return s("span",null,[s("i",{class:"el-icon-date"},[])," ",t.label])}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("section",[s._m(0),s._m(1),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="User" name="first">User</el-tab-pane>\n    <el-tab-pane label="Config" name="second">Config</el-tab-pane>\n    <el-tab-pane label="Role" name="third">Role</el-tab-pane>\n    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>\n  </el-tabs>\n</template>\n\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}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-tabs",{directives:[{name:"model",rawName:"v-model",value:s.activeName,expression:"activeName"}],domProps:{value:s.activeName},on:{"tab-click":s.handleClick,input:function(t){s.activeName=t}}},[t("el-tab-pane",{attrs:{label:"User",name:"first"}},["User"]),t("el-tab-pane",{attrs:{label:"Config",name:"second"}},["Config"]),t("el-tab-pane",{attrs:{label:"Role",name:"third"}},["Role"]),t("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},["Task"])])]]),s._m(4),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(5)])]),s._m(6),s._m(7),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-tabs type="card" @tab-click="handleClick">\n    <el-tab-pane label="User">User</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Role</el-tab-pane>\n    <el-tab-pane label="Task">Task</el-tab-pane>\n  </el-tabs>\n</template>\n\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}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-tabs",{attrs:{type:"card"},on:{"tab-click":s.handleClick}},[t("el-tab-pane",{attrs:{label:"User"}},["User"]),t("el-tab-pane",{attrs:{label:"Config"}},["Config"]),t("el-tab-pane",{attrs:{label:"Role"}},["Role"]),t("el-tab-pane",{attrs:{label:"Task"}},["Task"])])]]),s._m(8),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(9)])]),s._m(10),s._m(11),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">\n    <el-tab-pane label="User">User</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Role</el-tab-pane>\n    <el-tab-pane label="Task">Task</el-tab-pane>\n  </el-tabs>\n</template>\n\n',script:"\n  export default {\n    methods: {\n      handleRemove(tab) {\n        console.log(tab);\n      },\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-tabs",{attrs:{type:"card",closable:!0},on:{"tab-click":s.handleClick,"tab-remove":s.handleRemove}},[t("el-tab-pane",{attrs:{label:"User"}},["User"]),t("el-tab-pane",{attrs:{label:"Config"}},["Config"]),t("el-tab-pane",{attrs:{label:"Role"}},["Role"]),t("el-tab-pane",{attrs:{label:"Task"}},["Task"])])]]),s._m(12),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(13)])]),s._m(14),s._m(15),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs type="border-card">\n  <el-tab-pane label="User">User</el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Role</el-tab-pane>\n  <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-tabs",{attrs:{type:"border-card"}},[t("el-tab-pane",{attrs:{label:"User"}},["User"]),t("el-ta
},["5"]),", ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tag Three'"]),", ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'primary'"])," },\n          { ",t("span",{staticClass:"hljs-attr"},["key"]),": ",t("span",{staticClass:"hljs-number"},["3"]),", ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tag Four'"]),", ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'success'"])," },\n          { ",t("span",{staticClass:"hljs-attr"},["key"]),": ",t("span",{staticClass:"hljs-number"},["4"]),", ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tag Five'"]),", ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'warning'"])," },\n          { ",t("span",{staticClass:"hljs-attr"},["key"]),": ",t("span",{staticClass:"hljs-number"},["6"]),", ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tag Six'"]),", ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'danger'"])," }\n        ]\n      };\n    },\n    ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n      handleClose(tag) {\n        ",t("span",{staticClass:"hljs-keyword"},["this"]),".tags.splice(",t("span",{staticClass:"hljs-keyword"},["this"]),".tags.indexOf(tag), ",t("span",{staticClass:"hljs-number"},["1"]),");\n      }\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},["¶"])," Attributes"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["type"]),t("td",["theme"]),t("td",["string"]),t("td",["primary/gray/success/warning/danger"]),t("td",["—"])]),t("tr",[t("td",["closable"]),t("td",["whether Tab can be removed"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["close-transition"]),t("td",["whether the removal animation is disabled"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["hit"]),t("td",["whether Tag has a highlighted border"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["color"]),t("td",["background color of the tag"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},["¶"])," Events"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Event Name"]),t("th",["Description"]),t("th",["Parameters"])])]),t("tbody",[t("tr",[t("td",["close"]),t("td",["triggers when Tab is removed"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(211)},function(s,t,a){var n,e;n=a(212);var l=a(213);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,s.exports=n},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;s._c;return t("section",[s._m(0),s._m(1),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<el-time-select v-model=\"value1\" :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\" placeholder=\"Select time\">\n</el-time-select>\n\n\n",script:"\n  export default {\n    data() {\n      return {
},["el-tooltip"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"item"'])," ",t("span",{staticClass:"hljs-attr"},["effect"]),"=",t("span",{staticClass:"hljs-string"},['"dark"'])," ",t("span",{staticClass:"hljs-attr"},["content"]),"=",t("span",{staticClass:"hljs-string"},['"Top Right prompts info"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"top-end"']),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"top-end",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tooltip"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"left"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tooltip"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"item"'])," ",t("span",{staticClass:"hljs-attr"},["effect"]),"=",t("span",{staticClass:"hljs-string"},['"dark"'])," ",t("span",{staticClass:"hljs-attr"},["content"]),"=",t("span",{staticClass:"hljs-string"},['"Left Top prompts info"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"left-start"']),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"left-start",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tooltip"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tooltip"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"item"'])," ",t("span",{staticClass:"hljs-attr"},["effect"]),"=",t("span",{staticClass:"hljs-string"},['"dark"'])," ",t("span",{staticClass:"hljs-attr"},["content"]),"=",t("span",{staticClass:"hljs-string"},['"Left Center prompts info"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"left"']),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"left",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tooltip"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tooltip"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"item"'])," ",t("span",{staticClass:"hljs-attr"},["effect"]),"=",t("span",{staticClass:"hljs-string"},['"dark"'])," ",t("span",{staticClass:"hljs-attr"},["content"]),"=",t("span",{staticClass:"hljs-string"},['"Left Bottom prompts info"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"left-end"']),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"left-end",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tooltip"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tooltip"])," ",t("span",{staticClass
},["()"])," =>"])," {\n          ",t("span",{staticClass:"hljs-keyword"},["var"])," data;\n          ",t("span",{staticClass:"hljs-keyword"},["if"])," (hasChild) {\n            data = [{\n              ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'zone'"])," + ",t("span",{staticClass:"hljs-keyword"},["this"]),".count++\n            }, {\n              ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'zone'"])," + ",t("span",{staticClass:"hljs-keyword"},["this"]),".count++\n            }];\n          } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n            data = [];\n          }\n\n          resolve(data);\n        }, ",t("span",{staticClass:"hljs-number"},["500"]),");\n      }\n    }\n  };\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},["¶"])," Attributes"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["data"]),t("td",["tree data"]),t("td",["array"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["empty-text"]),t("td",["text displayed when data is void"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["node-key"]),t("td",["unique identity key name for nodes, its value should be unique across the whole tree"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["props"]),t("td",["configuration options, see the following table"]),t("td",["object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["load"]),t("td",["method for loading subtree data"]),t("td",["function(node, resolve)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["render-content"]),t("td",["render function for tree node"]),t("td",["Function(h, { node }"]),t("td",["-"]),t("td",["-"])]),t("tr",[t("td",["highlight-current"]),t("td",["whether current node is highlighted"]),t("td",["boolean"]),t("td",["-"]),t("td",["false"])]),t("tr",[t("td",["current-node-key"]),t("td",["key of current node, a set only prop"]),t("td",["string, number"]),t("td",["-"]),t("td",["-"])]),t("tr",[t("td",["default-expand-all"]),t("td",["whether to expand all nodes by default"]),t("td",["boolean"]),t("td",["-"]),t("td",["false"])]),t("tr",[t("td",["expand-on-click-node"]),t("td",["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."]),t("td",["-"]),t("td",["true"]),t("td")]),t("tr",[t("td",["auto-expand-parent"]),t("td",["whether to expand father node when a child node is expanded"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["default-expanded-keys"]),t("td",["array of keys of initially expanded nodes"]),t("td",["array"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["show-checkbox"]),t("td",["whether node is selectable"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["check-strictly"]),t("td",["whether checked state of a node not affects its father and child nodes when ",t("code",["show-checkbox"])," is ",t("code",["true"])]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["default-checked-keys"]),t("td",["array of keys of initially checked nodes"]),t("td",["array"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["filter-node-method"]),t("td",["this function will be executed on each node when use filter method. if return ",t("code",["false"]),", tree node will be hidden."]),t("td",["Function(value, data, node)"]),t("td",["-"]),t("td",["-"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},["¶"])," props"])},function(){var s=
attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},["file types"]),", will not work when ",t("code",["thumbnail-mode"])," is ",t("code",["true"])]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["on-preview"]),t("td",["hook function when clicking the uploaded files"]),t("td",["function(file)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["on-remove"]),t("td",["hook function when files are removed"]),t("td",["function(file, fileList)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["on-success"]),t("td",["hook function when uploaded successfully"]),t("td",["function(response, file, fileList)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["on-error"]),t("td",["hook function when some errors occurs"]),t("td",["function(err, response, file)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["on-progress"]),t("td",["hook function when some progress occurs"]),t("td",["function(event, file, fileList)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["before-upload"]),t("td",["hook function before uploading with the file to be uploaded as its parameter. If ",t("code",["false"])," or a ",t("code",["Promise"])," is returned, uploading will be aborted"]),t("td",["function(file)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["thumbnail-mode"]),t("td",["whether thumbnail is displayed"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["default-file-list"]),t("td",["default uploaded files, i.e: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]"]),t("td",["array"]),t("td",["—"]),t("td",["[]"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},["¶"])," Events"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Event Name"]),t("th",["Description"]),t("th",["Parameters"])])]),t("tbody",[t("tr",[t("td",["clearFiles"]),t("td",["clear the uploaded file list"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(232)},function(s,t,a){var n,e;a(233),n=a(235);var l=a(236);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,s.exports=n},function(s,t){},,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;s._c;return t("section",[s._m(0),s._m(1),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="成功提示的文案" type="success">\n  </el-alert>\n  <el-alert title="消息提示的文案" type="info">\n  </el-alert>\n  <el-alert title="警告提示的文案" type="warning">\n  </el-alert>\n  <el-alert title="错误提示的文案" type="error">\n  </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-alert",{attrs:{title:"成功提示的文案",type:"success"}}),t("el-alert",{attrs:{title:"消息提示的文案",type:"info"}}),t("el-alert",{attrs:{title:"警告提示的文案",type:"warning"}}),t("el-alert",{attrs:{title:"错误提示的文案",type:"error"}})]]),s._m(4),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(5)])]),s._m(6),s._m(7),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="不可关闭的 alert" type="success" :closable="false">\n  </el-alert>\n  <el-alert title="自定义 close-text" type="info" close-text="知道了">\n  </el-alert>\n  <el-alert title="设置了回调的 alert" type="warning" @close="hello">\n  </el-alert>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      hello() {\n        alert('Hello World!');\n      }\n    }\n  }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[
staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-badge"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-badge"])," ",t("span",{staticClass:"hljs-attr"},[":value"]),"=",t("span",{staticClass:"hljs-string"},['"100"'])," ",t("span",{staticClass:"hljs-attr"},[":max"]),"=",t("span",{staticClass:"hljs-string"},['"10"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"item"']),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"small"']),">"]),"回复",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-badge"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"css"},["\n",t("span",{staticClass:"hljs-selector-class"},[".item"])," {\n  ",t("span",{staticClass:"hljs-attribute"},["margin-top"]),": ",t("span",{staticClass:"hljs-number"},["10px"]),";\n  ",t("span",{staticClass:"hljs-attribute"},["margin-right"]),": ",t("span",{staticClass:"hljs-number"},["40px"]),";\n}\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["style"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},["¶"])," 自定义内容"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["可以显示数字以外的文本内容。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["定义",t("code",["value"]),"为",t("code",["String"]),"类型是时可以用于显示自定义文本。"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-badge"])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"new"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"item"']),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"small"']),">"]),"评论",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-badge"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-badge"])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"hot"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"item"']),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"small"']),">"]),"回复",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-badge"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"css"},["\n",t("span",{staticClass:"hljs-selector-class"},[".item"])," {\n  ",t("span",{staticClass:"hljs-attribute"},["margin-top"]),": ",t("span",{staticClass:"hljs-number"},["10px"]),";\n  ",t("span",{staticClass:"hljs-attribute"},["margin-right"]),": ",t("span",{staticClass:"hljs-number"},["40px"]),";\n}\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["style"]),">"]),"\n
staticClass:"hljs-name"},["el-button"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"share"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"delete"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button-group"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"jia-zai-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-zhong","aria-hidden":"true"}},["¶"])," 加载中"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["点击按钮后进行数据加载操作，在按钮上显示加载状态。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["要设置为 loading 状态，只要设置",t("code",["loading"]),"属性为",t("code",["true"]),"即可。"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},[":loading"]),"=",t("span",{staticClass:"hljs-string"},['"true"']),">"]),"加载中",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},["¶"])," 不同尺寸"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["额外的尺寸：",t("code",["large"]),"、",t("code",["small"]),"、",t("code",["mini"]),"，通过设置",t("code",["size"]),"属性来配置它们。"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"large"']),">"]),"大型按钮",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"']),">"]),"正常按钮",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"small"']),">"]),"小型按钮",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",
staticClass:"hljs-name"},["el-checkbox"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"禁用"'])," ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-checkbox"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"选中且禁用"'])," ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-checkbox"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-checkbox-group"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data () {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["checkList"]),": [",t("span",{staticClass:"hljs-string"},["'选中且禁用'"]),",",t("span",{staticClass:"hljs-string"},["'复选框 A'"]),"]\n      };\n    }\n  };\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"checkbox-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},["¶"])," Checkbox Attributes"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["参数"]),t("th",["说明"]),t("th",["类型"]),t("th",["可选值"]),t("th",["默认值"])])]),t("tbody",[t("tr",[t("td",["label"]),t("td",["选中状态的值（只有在",t("code",["checkbox-group"]),"或者绑定对象类型为",t("code",["array"]),"时有效）"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["true-label"]),t("td",["选中时的值"]),t("td",["string, number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["false-label"]),t("td",["没有选中时的值"]),t("td",["string, number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["name"]),t("td",["原生 name 属性"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["disabled"]),t("td",["按钮禁用"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["checked"]),t("td",["当前是否勾选"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["indeterminate"]),t("td",["设置 indeterminate 状态，只负责样式控制"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"checkbox-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},["¶"])," Checkbox-group Events"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["事件名称"]),t("th",["说明"]),t("th",["回调参数"])])]),t("tbody",[t("tr",[t("td",["change"]),t("td",["当绑定值变化时触发的事件"]),t("td",["event 事件对象"])])])])}]}},function(s,t,a){s.exports=a(266)},function(s,t,a){var n,e;a(267);var l=a(269);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,s.exports=n},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("section",[s._m(0),s._m(1),s._m(2),s._m(3),t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:8}},[s._m(4)]),t("el-col",{attrs:{span:8}},[s._m(
},['"选择月"']),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-date-picker"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"block"']),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demonstration"']),">"]),"年",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-date-picker"]),"\n    ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value5"']),"\n    ",t("span",{staticClass:"hljs-attr"},["align"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),"\n    ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"year"']),"\n    ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"选择年"']),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-date-picker"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["value3"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n        ",t("span",{staticClass:"hljs-attr"},["value4"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n        ",t("span",{staticClass:"hljs-attr"},["value5"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n      };\n    }\n  };\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"xuan-ze-ri-qi-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri-qi-fan-wei","aria-hidden":"true"}},["¶"])," 选择日期范围"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["可在一个选择器中便捷地选择一个时间范围"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["默认"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["带快捷选项"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"block"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demonstration"']),">"]),"默认",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-date-picker"]),"\n      ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value6"']),"\n      ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"daterange"']),"\n      ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"选择日期范围"']),"\n      ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{st
},["''"]),",\n        ",t("span",{staticClass:"hljs-attr"},["value4"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n      };\n    }\n  };\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},["¶"])," Attributes"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["参数"]),t("th",["说明"]),t("th",["类型"]),t("th",["可选值"]),t("th",["默认值"])])]),t("tbody",[t("tr",[t("td",["readonly"]),t("td",["完全只读"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["disabled"]),t("td",["禁用"]),t("td",["boolean"]),t("td",["-"]),t("td",["false"])]),t("tr",[t("td",["editable"]),t("td",["文本框可输入"]),t("td",["boolean"]),t("td",["-"]),t("td",["true"])]),t("tr",[t("td",["clearable"]),t("td",["是否显示清除按钮"]),t("td",["boolean"]),t("td",["-"]),t("td",["true"])]),t("tr",[t("td",["size"]),t("td",["输入框尺寸"]),t("td",["string"]),t("td",["large, small, mini"]),t("td",["—"])]),t("tr",[t("td",["placeholder"]),t("td",["占位内容"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["type"]),t("td",["显示类型"]),t("td",["string"]),t("td",["year/month/date/week/ datetime/datetimerange/daterange"]),t("td",["date"])]),t("tr",[t("td",["format"]),t("td",["时间日期格式化"]),t("td",["string"]),t("td",["年 ",t("code",["yyyy"]),"，月 ",t("code",["MM"]),"，日 ",t("code",["dd"]),"，小时 ",t("code",["HH"]),"，分 ",t("code",["mm"]),"，秒 ",t("code",["ss"])]),t("td",["yyyy-MM-dd"])]),t("tr",[t("td",["align"]),t("td",["对齐方式"]),t("td",["string"]),t("td",["left, center, right"]),t("td",["left"])]),t("tr",[t("td",["popper-class"]),t("td",["DateTimePicker 下拉框的类名"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["picker-options"]),t("td",["当前时间日期选择器特有的选项参考下表"]),t("td",["object"]),t("td",["—"]),t("td",["{}"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},["¶"])," Picker Options"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["参数"]),t("th",["说明"]),t("th",["类型"]),t("th",["可选值"]),t("th",["默认值"])])]),t("tbody",[t("tr",[t("td",["shortcuts"]),t("td",["设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表"]),t("td",["Object[]"]),t("td",["-"]),t("td",["-"])]),t("tr",[t("td",["disabledDate"]),t("td",["设置禁用状态，参数为当前日期，要求返回 Boolean"]),t("td",["Function"]),t("td",["-"]),t("td",["-"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},["¶"])," Shortcuts"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["参数"]),t("th",["说明"]),t("th",["类型"]),t("th",["可选值"]),t("th",["默认值"])])]),t("tbody",[t("tr",[t("td",["text"]),t("td",["标题文本"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["onClick"]),t("td",["选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())"]),t("td",["function"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},["¶"])," Events"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Event Name"]),t("th",["Description"]),t("th",["Parameters"])])]),t("tbody",[t("tr
staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">hover 激活</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item>黄金糕</el-dropdown-item>\n        <el-dropdown-item>狮子头</el-dropdown-item>\n        <el-dropdown-item>螺蛳粉</el-dropdown-item>\n        <el-dropdown-item>双皮奶</el-dropdown-item>\n        <el-dropdown-item>蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">click 激活</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item>黄金糕</el-dropdown-item>\n        <el-dropdown-item>狮子头</el-dropdown-item>\n        <el-dropdown-item>螺蛳粉</el-dropdown-item>\n        <el-dropdown-item>双皮奶</el-dropdown-item>\n        <el-dropdown-item>蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-row",{staticClass:"block-col-2"},[t("el-col",{attrs:{span:12}},[s._m(14),t("el-dropdown",[s._m(15),t("el-dropdown-menu",{slot:"dropdown"},[t("el-dropdown-item",["黄金糕"]),t("el-dropdown-item",["狮子头"]),t("el-dropdown-item",["螺蛳粉"]),t("el-dropdown-item",["双皮奶"]),t("el-dropdown-item",["蚵仔煎"])])])]),t("el-col",{attrs:{span:12}},[s._m(16),t("el-dropdown",{attrs:{trigger:"click"}},[s._m(17),t("el-dropdown-menu",{slot:"dropdown"},[t("el-dropdown-item",["黄金糕"]),t("el-dropdown-item",["狮子头"]),t("el-dropdown-item",["螺蛳粉"]),t("el-dropdown-item",["双皮奶"]),t("el-dropdown-item",["蚵仔煎"])])])])])]),s._m(18),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(19)])]),s._m(20),s._m(21),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-dropdown",{attrs:{"hide-on-click":!1}},[s._m(22),t("el-dropdown-menu",{slot:"dropdown"},[t("el-dropdown-item",["黄金糕"]),t("el-dropdown-item",["狮子头"]),t("el-dropdown-item",["螺蛳粉"]),t("el-dropdown-item",{attrs:{disabled:""}},["双皮奶"]),t("el-dropdown-item",{attrs:{divided:""}},["蚵仔煎"])])])]),s._m(23),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(24)])]),s._m(25),s._m(26),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">黄金糕</el-dropdown-item>\n    <el-dropdown-item command="b">狮子头</el-dropdown-item>\n    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n',script:"\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message('click on item ' + command);\n      }\n    }\n  }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-dropdown",{on:{command:s.handleCommand}},[s._m(27)
})},handleSubmit2:function(s){this.$refs.ruleForm2.validate(function(s){return s?void alert("申请已提交"):(console.log("error submit!!"),!1)})},handleSubmit3:function(s){this.$refs.dynamicForm.validate(function(s){return s?void alert("申请已提交"):(console.log("error submit!!"),!1)})},handleReset:function(){this.$refs.ruleForm.resetFields()},handleReset2:function(){this.$refs.ruleForm2.resetFields()},handleReset3:function(){this.$refs.dynamicForm.resetFields()},handleValidate:function(s,t){console.log(s,t)},onSubmit:function(){console.log("submit!")},onRuleFormSubmit:function(){console.log("onRuleFormSubmit")},removeDomain:function(s){var t=this.dynamicForm.domains.indexOf(s);t!==-1&&this.dynamicForm.domains.splice(t,1)},addDomain:function(){this.dynamicForm.domains.push({value:"",key:Date.now()})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("section",[s._m(0),s._m(1),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form ref="form" :model="form" label-width="80px">\n  <el-form-item label="活动名称">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="form.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="即时配送">\n    <el-switch on-text="" off-text v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="活动性质">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n      <el-checkbox label="地推活动" name="type"></el-checkbox>\n      <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="线上品牌商赞助"></el-radio>\n      <el-radio label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="活动形式">\n    <el-input type="textarea" v-model="form.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">立即创建</el-button>\n    <el-button>取消</el-button>\n  </el-form-item>\n</el-form>\n\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}}},[t("div",{slot:"source",staticClass:"source"},[t("el-form",{ref:"form",attrs:{model:s.form,"label-width":"80px"}},[t("el-form-item",{attrs:{label:"活动名称"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.form.name,expression:"form.name"}],domProps:{value:s.form.name},on:{input:function(t){s.form.name=t}}})]),t("el-form-item",{attrs:{label:"活动区域"}},[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.form.region,expression:"form.region"}],attrs:{placeholder:"请选择活动区域"},domProps:{value:s.form.region},on:{input:function(t){s.form.region=t}}},[t("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t("el-option",{attrs:{label:"区域二",value:"beijing"}})])
staticClass:"hljs-name"},["el-time-picker"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"fixed-time"'])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"选择时间"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"form.date2"'])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width: 100%;"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-time-picker"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-form-item"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form-item"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"即时配送"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-switch"])," ",t("span",{staticClass:"hljs-attr"},["on-text"]),"=",t("span",{staticClass:"hljs-string"},['""'])," ",t("span",{staticClass:"hljs-attr"},["off-text"]),"=",t("span",{staticClass:"hljs-string"},['""'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"form.delivery"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-switch"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-form-item"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form-item"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"活动性质"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox-group"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"form.type"']),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"美食/餐厅线上活动"'])," ",t("span",{staticClass:"hljs-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"type"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-checkbox"]),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"地推活动"'])," ",t("span",{staticClass:"hljs-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"type"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-checkbox"]),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"线下主题活动"'])," ",t("span",{staticClass:"hljs-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"type"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-checkbox"]),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"单纯品牌曝光"'])," ",t("span",{staticClass:"hljs-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"type"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-checkbox"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-checkbox-group"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-form-item"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form-
},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm.delivery"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-switch"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-form-item"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form-item"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"活动性质"'])," ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"type"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox-group"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm.type"']),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"美食/餐厅线上活动"'])," ",t("span",{staticClass:"hljs-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"type"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-checkbox"]),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"地推活动"'])," ",t("span",{staticClass:"hljs-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"type"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-checkbox"]),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"线下主题活动"'])," ",t("span",{staticClass:"hljs-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"type"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-checkbox"]),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"单纯品牌曝光"'])," ",t("span",{staticClass:"hljs-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"type"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-checkbox"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-checkbox-group"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-form-item"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form-item"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"特殊资源"'])," ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"resource"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-radio-group"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm.resource"']),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-radio"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"线上品牌商赞助"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-radio"]),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-radio"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"线下场地免费"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-radio"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-radio-group"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</"
},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"form-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},["¶"])," Form Methods"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["方法名"]),t("th",["说明"])])]),t("tbody",[t("tr",[t("td",["validate(cb)"]),t("td",["对整个表单进行校验的方法"])]),t("tr",[t("td",["validateField(prop, cb)"]),t("td",["对部分表单字段进行校验的方法"])]),t("tr",[t("td",["resetFields"]),t("td",["对整个表单进行重置，将所有字段值重置为初始值并移除校验结果"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"form-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},["¶"])," Form-Item Attributes"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["参数"]),t("th",["说明"]),t("th",["类型"]),t("th",["可选值"]),t("th",["默认值"])])]),t("tbody",[t("tr",[t("td",["prop"]),t("td",["表单域 model 字段"]),t("td",["string"]),t("td",["传入 Form 组件的 ",t("code",["model"])," 中的字段"]),t("td",["—"])]),t("tr",[t("td",["label"]),t("td",["标签文本"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["label-width"]),t("td",["表单域标签的的宽度，例如 '50px'"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["required"]),t("td",["是否必填，如不设置，则会根据校验规则自动生成"]),t("td",["bolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["rules"]),t("td",["表单验证规则"]),t("td",["object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["error"]),t("td",["表单域验证错误信息, 设置该值会使表单验证状态变为",t("code",["error"]),"，并显示该错误信息"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(304)},function(s,t,a){var n,e;n=a(305);var l=a(306);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,s.exports=n},function(s,t,a){"use strict";var n=a(112);s.exports={ready:function(){(0,n.addClass)(this.$el.parentNode,"no-toc")}}},function(s,t){s.exports={render:function(){var s=this;s.$createElement,s._c;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("section",[t("h1",["组件说明文档"])])}]}},function(s,t,a){s.exports=a(308)},function(s,t,a){var n,e;a(309);var l=a(311);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,s.exports=n},function(s,t){},,function(s,t){s.exports={render:function(){var s=this;s.$createElement,s._c;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("section",[t("h2",{attrs:{id:"guo-ji-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#guo-ji-hua","aria-hidden":"true"}},["¶"])," 国际化"]),t("p",["Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中："]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-comment"},["// 完整引入 Element"]),"\n",t("span",{staticClass:"hljs-keyword"},["import"])," Vue ",t("span",{staticClass:"hljs-keyword"},["from"])," ",t("span",{staticClass:"hljs-string"},["'vue'"]),"\n",t("span",{staticClass:"hljs-keyword"},["import"])," ElementUI ",t("span",{staticClass:"hljs-keyword"},["from"])," ",t("span",{staticClass:"hljs-string"},["'element-ui'"]),"\n",t("span",{staticClass:"hljs-keyword"},["import"])," locale ",t("span",{staticClass:"hljs-keyword"},["from"])," ",t("span",{staticClass:"hljs-string"},["'element-ui/lib/locale/lang/en'"]),"\n\nVue.use(ElementUI, { locale })\n"])]),t("p
style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-row",{staticClass:"border-grid"},[t("el-col",{staticClass:"tac",attrs:{span:12}},[s._m(24),t("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state1,expression:"state1"}],staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"请输入内容"},domProps:{value:s.state1},on:{select:s.handleSelect,input:function(t){s.state1=t}}})]),t("el-col",{staticClass:"tac",attrs:{span:12}},[s._m(25),t("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state2,expression:"state2"}],staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"请输入内容","trigger-on-focus":!1},domProps:{value:s.state2},on:{select:s.handleSelect,input:function(t){s.state2=t}}})])])]),s._m(26),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(27)])]),s._m(28),s._m(29),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-autocomplete class="my-autocomplete" v-model="state3" :fetch-suggestions="querySearch" custom-item="my-item-zh" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>\n\n\n\n\n',script:'\n  Vue.component(\'my-item-zh\', {\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: \'name\' } }, [item.value]),\n        h(\'span\', { attrs: { class: \'addr\' } }, [item.address])\n      ]);\n    },\n    props: {\n      item: { type: Object, required: true }\n    }\n  });\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复<E58589>
},['"handleSelect"']),"\n    >"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-autocomplete"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-row"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["restaurants"]),": [],\n        ",t("span",{staticClass:"hljs-attr"},["state1"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n        ",t("span",{staticClass:"hljs-attr"},["state2"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n      };\n    },\n    ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n      querySearch(queryString, cb) {\n        ",t("span",{staticClass:"hljs-keyword"},["var"])," restaurants = ",t("span",{staticClass:"hljs-keyword"},["this"]),".restaurants;\n        ",t("span",{staticClass:"hljs-keyword"},["var"])," results = queryString ? restaurants.filter(",t("span",{staticClass:"hljs-keyword"},["this"]),".createFilter(queryString)) : restaurants;\n        ",t("span",{staticClass:"hljs-comment"},["// 调用 callback 返回建议列表的数据"]),"\n        cb(results);\n      },\n      createFilter(queryString) {\n        ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["restaurant"]),") =>"])," {\n          ",t("span",{staticClass:"hljs-keyword"},["return"])," (restaurant.value.indexOf(queryString.toLowerCase()) === ",t("span",{staticClass:"hljs-number"},["0"]),");\n        };\n      },\n      loadAll() {\n        ",t("span",{staticClass:"hljs-keyword"},["return"])," [\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"三全鲜食（北新泾店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"长宁区新渔路144号"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"Hot honey 首尔炸鸡（仙霞路）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区淞虹路661号"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"新旺角茶餐厅"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市普陀区真北路988号创邑金沙谷6号楼113"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"泷千家(天山西路店)"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"天山西路438号"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"胖仙女纸杯蛋糕（上海凌空店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"贡茶"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区金钟路633号"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"豪大大香鸡排超级奶爸"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市嘉定区曹安公路曹安路1685号"'])," },\n          { ",
s._c;return t("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},["¶"])," 远程搜索"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["从服务端搜索数据"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-autocomplete"]),"\n  ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"state4"']),"\n  ",t("span",{staticClass:"hljs-attr"},[":fetch-suggestions"]),"=",t("span",{staticClass:"hljs-string"},['"querySearchAsync"']),"\n  ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请输入内容"']),"\n  ",t("span",{staticClass:"hljs-attr"},["@select"]),"=",t("span",{staticClass:"hljs-string"},['"handleSelect"']),"\n>"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-autocomplete"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["restaurants"]),": [],\n        ",t("span",{staticClass:"hljs-attr"},["state4"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n        ",t("span",{staticClass:"hljs-attr"},["timeout"]),":  ",t("span",{staticClass:"hljs-literal"},["null"]),"\n      };\n    },\n    ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n      loadAll() {\n        ",t("span",{staticClass:"hljs-keyword"},["return"])," [\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"三全鲜食（北新泾店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"长宁区新渔路144号"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"Hot honey 首尔炸鸡（仙霞路）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区淞虹路661号"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"新旺角茶餐厅"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市普陀区真北路988号创邑金沙谷6号楼113"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"泷千家(天山西路店)"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"天山西路438号"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"胖仙女纸杯蛋糕（上海凌空店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"贡茶"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区金钟路633号"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"豪大大香鸡排超级奶爸"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市嘉定区曹安公路曹安路1685号"'])," },\n          { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"茶芝兰（奶茶，手抓饼）"']),", ",t("span",{staticClass:"hljs-string"},['"address"'
}}},[t("div",{slot:"source",staticClass:"source"},[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:16}},[s._m(32)]),t("el-col",{attrs:{span:8}},[s._m(33)])]),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:8}},[s._m(34)]),t("el-col",{attrs:{span:8}},[s._m(35)]),t("el-col",{attrs:{span:4}},[s._m(36)]),t("el-col",{attrs:{span:4}},[s._m(37)])]),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:4}},[s._m(38)]),t("el-col",{attrs:{span:16}},[s._m(39)]),t("el-col",{attrs:{span:4}},[s._m(40)])])]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(41)])]),s._m(42),s._m(43),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n\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"}}},[t("div",{slot:"source",staticClass:"source"},[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[s._m(44)]),t("el-col",{attrs:{span:6,offset:6}},[s._m(45)])]),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6,offset:6}},[s._m(46)]),t("el-col",{attrs:{span:6,offset:6}},[s._m(47)])]),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:12,offset:6}},[s._m(48)])])]),s._m(49),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(50)])]),s._m(51),s._m(52),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row type="flex" class="row-bg">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n\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"}}
})},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"grid-content bg-purple"})},function(){var s=this,t=s.$createElement;s._c;return t("p",["通过制定 col 组件的 ",t("code",["offset"])," 属性可以指定分栏偏移的栏数。"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-row"])," ",t("span",{staticClass:"hljs-attr"},[":gutter"]),"=",t("span",{staticClass:"hljs-string"},['"20"']),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"6"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"grid-content bg-purple"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"6"'])," ",t("span",{staticClass:"hljs-attr"},[":offset"]),"=",t("span",{staticClass:"hljs-string"},['"6"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"grid-content bg-purple"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-row"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-row"])," ",t("span",{staticClass:"hljs-attr"},[":gutter"]),"=",t("span",{staticClass:"hljs-string"},['"20"']),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"6"'])," ",t("span",{staticClass:"hljs-attr"},[":offset"]),"=",t("span",{staticClass:"hljs-string"},['"6"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"grid-content bg-purple"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"6"'])," ",t("span",{staticClass:"hljs-attr"},[":offset"]),"=",t("span",{staticClass:"hljs-string"},['"6"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"grid-content bg-purple"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-row"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-row"])," ",t("span",{staticClass:"hljs-attr"},[":gutter"]),"=",t("span",{staticClass:"hljs-string"},['"20"']),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"12"'])," ",t("span",{staticClass:"hljs-attr"},[":offset"]),"=",t("span
}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-wen-an","aria-hidden":"true"}},["¶"])," 加载文案"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["可自定义加载文案。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["在绑定了",t("code",["v-loading"]),"指令的元素上添加",t("code",["element-loading-text"]),"属性，其值会被渲染为加载文案，并显示在加载图标的下方。"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table"]),"\n    ",t("span",{staticClass:"hljs-attr"},["v-loading"]),"=",t("span",{staticClass:"hljs-string"},['"loading2"']),"\n    ",t("span",{staticClass:"hljs-attr"},["element-loading-text"]),"=",t("span",{staticClass:"hljs-string"},['"拼命加载中"']),"\n    ",t("span",{staticClass:"hljs-attr"},[":data"]),"=",t("span",{staticClass:"hljs-string"},['"tableData"']),"\n    ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width: 100%"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"date"']),"\n      ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"日期"']),"\n      ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"180"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"name"']),"\n      ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"姓名"']),"\n      ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"180"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"address"']),"\n      ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"地址"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["tableData"]),": [{\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-03'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'王小虎'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-02'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'王小虎'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),"
staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-menu-item"]),">"]),"\n        ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-submenu"]),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-submenu"]),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-menu-item"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-menu"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"导航二",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-menu-item"]),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-menu-item"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"3"']),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-setting"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"导航三",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-menu-item"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-menu"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-col"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"8"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["h5"]),">"]),"不带 icon",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["h5"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-menu"])," ",t("span",{staticClass:"hljs-attr"},["default-active"]),"=",t("span",{staticClass:"hljs-string"},['"2"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-menu-vertical-demo"'])," ",t("span",{staticClass:"hljs-attr"},["@open"]),"=",t("span",{staticClass:"hljs-string"},['"handleOpen"'])," ",t("span",{staticClass:"hljs-attr"},["@close"]),"=",t("span",{staticClass:"hljs-string"},['"handleClose"'])," ",t("span",{staticClass:"hljs-attr"},["theme"]),"=",t("span",{staticClass:"hljs-string"},['"dark"']),">"]),"\n      ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-submenu"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"1"']),">"]),"\n        ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"title"']),">"]),"导航一",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n        ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-menu-item-group"])," ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"分组一"']),">"]),"\n          ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-menu-item"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"1-1"']),">"]),"选项1",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-menu-item"]),">"]),"\n          ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-menu-item"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"1-2"']),">"]),"选项2",t("span",{staticCla
},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n      open4() {\n        ",t("span",{staticClass:"hljs-keyword"},["this"]),".$msgbox({\n          ",t("span",{staticClass:"hljs-attr"},["title"]),": ",t("span",{staticClass:"hljs-string"},["'消息'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["showCancelButton"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),",\n          ",t("span",{staticClass:"hljs-attr"},["confirmButtonText"]),": ",t("span",{staticClass:"hljs-string"},["'确定'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["cancelButtonText"]),": ",t("span",{staticClass:"hljs-string"},["'取消'"]),"\n        }).then(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["action"])," =>"])," {\n          ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\n            ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'info'"]),",\n            ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'action: '"])," + action\n          });\n        });\n      },\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},["¶"])," 全局方法"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Element 为 Vue.prototype 添加了如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 vue instance 中可以采用本页面中的方式调用 ",t("code",["MessageBox"]),"。"])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},["¶"])," 单独引用"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["单独引入 ",t("code",["MessageBox"]),"："])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},["import"])," { MessageBox } ",t("span",{staticClass:"hljs-keyword"},["from"])," ",t("span",{staticClass:"hljs-string"},["'element-ui'"]),";\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("p",["对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt。"])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},["¶"])," Options"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["参数"]),t("th",["说明"]),t("th",["类型"]),t("th",["可选值"]),t("th",["默认值"])])]),t("tbody",[t("tr",[t("td",["title"]),t("td",["MessageBox 标题"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["message"]),t("td",["MessageBox 消息正文内容"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["type"]),t("td",["消息类型，用于显示图标"]),t("td",["string"]),t("td",["success/info/warning/error"]),t("td",["—"])]),t("tr",[t("td",["customClass"]),t("td",["MessageBox 的自定义类名"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["ca
staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open3"']),">"]),"\n    成功\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),"\n    ",t("span",{staticClass:"hljs-attr"},["plain"]),"\n    ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open4"']),">"]),"\n    警告\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),"\n    ",t("span",{staticClass:"hljs-attr"},["plain"]),"\n    ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open5"']),">"]),"\n    消息\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),"\n    ",t("span",{staticClass:"hljs-attr"},["plain"]),"\n    ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open6"']),">"]),"\n    错误\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n      open3() {\n        ",t("span",{staticClass:"hljs-keyword"},["this"]),".$notify({\n          ",t("span",{staticClass:"hljs-attr"},["title"]),": ",t("span",{staticClass:"hljs-string"},["'成功'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'这是一条成功的提示消息'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'success'"]),"\n        });\n      },\n\n      open4() {\n        ",t("span",{staticClass:"hljs-keyword"},["this"]),".$notify({\n          ",t("span",{staticClass:"hljs-attr"},["title"]),": ",t("span",{staticClass:"hljs-string"},["'警告'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'这是一条警告的提示消息'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'warning'"]),"\n        });\n      },\n\n      open5() {\n        ",t("span",{staticClass:"hljs-keyword"},["this"]),".$notify.info({\n          ",t("span",{staticClass:"hljs-attr"},["title"]),": ",t("span",{staticClass:"hljs-string"},["'消息'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'这是一条消息的提示消息'"]),"\n        });\n      },\n\n      open6() {\n        ",t("span",{staticClass:"hljs-keyword"},["this"]),".$notify.error({\n          ",t("span",{staticClass:"hljs-attr"},["title"]),": ",t("span",{staticClass:"hljs-string"},["'错误'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'这是一条错误的提示消息'"]),"\n        });\n      }\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"dai-you-pian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-pian-yi","aria-hidden":"true"}},["¶"])," 带有偏移"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["让 Notification 偏移一些位置"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Notification 提供设置偏移量的功能，通过设置 ",t("code",["offset"]),"
script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"标题",width:"200",trigger:"hover",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),t("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"标题",width:"200",trigger:"click",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),t("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},["hover 激活"]),t("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},["click 激活"]),t("el-popover",{attrs:{placement:"right",title:"标题",width:"200",trigger:"focus",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[t("el-button",{slot:"reference"},["focus 激活"])])]),s._m(3),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(4)])]),s._m(5),s._m(6),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover ref="popover4" placement="right" width="400" trigger="click">\n  <el-table :data="gridData">\n    <el-table-column width="150" property="date" label="日期"></el-table-column>\n    <el-table-column width="100" property="name" label="姓名"></el-table-column>\n    <el-table-column width="300" property="address" label="地址"></el-table-column>\n  </el-table>\n</el-popover>\n\n<el-button v-popover:popover4>click 激活</el-button>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      };\n    }\n  };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-popover",{ref:"popover4",attrs:{placement:"right",width:"400",trigger:"click"}},[t("el-table",{attrs:{data:s.gridData}},[t("el-table-column",{attrs:{width:"150",property:"date",label:"日期"}}),t("el-table-column",{attrs:{width:"100",property:"name",label:"姓名"}}),t("el-table-column",{attrs:{width:"300",property:"address",label:"地址"}})])]),t("el-button",{directives:[{name:"popover",rawName:"v-popover:popover4",arg:"popover4"}]},["click 激活"])]),s._m(7),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(8)])]),s._m(9),s._m(10),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover ref="popover5" placement="top" width="160" v-model="visible2">\n  <p>这是一段内容这是一段内容确定删除吗？</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>\n  </div>\n</el-popover>\n\n<el-button v-popover:popover5>删除</el-button>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-popover",{directives:[{name:"model",rawName:"v-model",value:s.visible2,expression:"visible2"}],ref:"popover5",attrs:{placement:"top",width:"160"},domProps:{value:s.visible2},on:{input:function(t){s.visible2=t}}},[s._m(11),t("div",{attrs:{style:"text-align: right; margin: 0"}},[t("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(t){s.visible2=!1}}},["取消"]),t("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){s.visible2=!1}}},["确定"])])]),t("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},["删除"])]),t("div",{slot:"highlight",staticClass:"highligh
}},[t("a",{staticClass:"header-anchor",attrs:{href:"#kuai-su-shang-shou","aria-hidden":"true"}},["¶"])," 快速上手"]),t("p",["本节将介绍如何在项目中使用 Element。"]),t("h3",{attrs:{id:"shi-yong-starter-kit"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-starter-kit","aria-hidden":"true"}},["¶"])," 使用 Starter Kit"]),t("p",["我们提供了通用的",t("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},["项目模板"]),"，你可以直接使用。对于熟悉 ",t("a",{attrs:{href:"https://github.com/ElementUI/element-cooking-starter"}},["cooking"])," 或 ",t("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},["Laravel"])," 的用户，我们也准备了相应的模板，同样可以直接下载使用。"]),t("p",["如果不希望使用我们提供的模板，请继续阅读。"]),t("h3",{attrs:{id:"pei-zhi-wen-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pei-zhi-wen-jian","aria-hidden":"true"}},["¶"])," 配置文件"]),t("p",["新建项目，项目结构为"]),t("pre",[t("code",{staticClass:"hljs language-text"},["|- src/  --------------------- 项目源代码\n    |- App.vue\n    |- main.js  -------------- 入口文件\n|- .babelrc  ----------------- babel 配置文件\n|- index.html  --------------- HTML 模板\n|- package.json  ------------- npm 配置文件\n|- README.md  ---------------- 项目帮助文档\n|- webpack.config.js  -------- webpack 配置文件\n"])]),t("p",["几个配置文件的典型配置如下："]),t("p",[t("strong",[".babelrc"])]),t("pre",[t("code",{staticClass:"hljs language-json"},["{\n  ",t("span",{staticClass:"hljs-attr"},['"presets"']),": [\n    [",t("span",{staticClass:"hljs-string"},['"es2015"']),", { ",t("span",{staticClass:"hljs-attr"},['"modules"']),": ",t("span",{staticClass:"hljs-literal"},["false"])," }]\n  ]\n}\n"])]),t("br"),t("p",[t("strong",["package.json"])]),t("pre",[t("code",{staticClass:"hljs language-json"},["{\n  ",t("span",{staticClass:"hljs-attr"},['"name"']),": ",t("span",{staticClass:"hljs-string"},['"element-starter"']),",\n  ",t("span",{staticClass:"hljs-attr"},['"scripts"']),": {\n    ",t("span",{staticClass:"hljs-attr"},['"dev"']),": ",t("span",{staticClass:"hljs-string"},['"cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086"']),",\n    ",t("span",{staticClass:"hljs-attr"},['"build"']),": ",t("span",{staticClass:"hljs-string"},['"cross-env NODE_ENV=production webpack --progress --hide-modules"']),"\n  },\n  ",t("span",{staticClass:"hljs-attr"},['"dependencies"']),": {\n    ",t("span",{staticClass:"hljs-attr"},['"element-ui"']),": ",t("span",{staticClass:"hljs-string"},['"^1.0.0"']),",\n    ",t("span",{staticClass:"hljs-attr"},['"vue"']),": ",t("span",{staticClass:"hljs-string"},['"^2.0.5"']),"\n  },\n  ",t("span",{staticClass:"hljs-attr"},['"devDependencies"']),": {\n    ",t("span",{staticClass:"hljs-attr"},['"babel-core"']),": ",t("span",{staticClass:"hljs-string"},['"^6.0.0"']),",\n    ",t("span",{staticClass:"hljs-attr"},['"babel-loader"']),": ",t("span",{staticClass:"hljs-string"},['"^6.0.0"']),",\n    ",t("span",{staticClass:"hljs-attr"},['"babel-preset-es2015"']),": ",t("span",{staticClass:"hljs-string"},['"^6.13.2"']),",\n    ",t("span",{staticClass:"hljs-attr"},['"cross-env"']),": ",t("span",{staticClass:"hljs-string"},['"^1.0.6"']),",\n    ",t("span",{staticClass:"hljs-attr"},['"css-loader"']),": ",t("span",{staticClass:"hljs-string"},['"^0.23.1"']),",\n    ",t("span",{staticClass:"hljs-attr"},['"file-loader"']),": ",t("span",{staticClass:"hljs-string"},['"^0.8.5"']),",\n    ",t("span",{staticClass:"hljs-attr"},['"style-loader"']),": ",t("span",{staticClass:"hljs-string"},['"^0.13.1"']),",\n    ",t("span",{staticClass:"hljs-attr"},['"vue-loader"']),": ",t("span",{staticClass:"hljs-string"},['"^9.8.0"']),",\n    ",t("span",{staticClass:"hljs-attr"},['"webpack"']),": ",t("span",{staticClass:"hljs-string"},['"beta"']),",\n    ",t("span",{staticClass:"hljs-attr"},['"webpack-dev-server"']),": ",t("span",{staticClass:"hljs-string"},['"beta"']),"\
script:"\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{"show-text":""},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})]),s._m(9),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(10)])]),s._m(11),s._m(12),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<el-rate v-model=\"value4\" :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']\">\n</el-rate>\n\n\n",script:"\n  export default {\n    data() {\n      return {\n        value4: null\n      }\n    }\n  }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],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"]},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}})]),s._m(13),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(14)])]),s._m(15),s._m(16),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-rate v-model="value5" disabled show-text text-color="#ff9900" text-template="{value}">\n</el-rate>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value5,expression:"value5"}],attrs:{disabled:"","show-text":"","text-color":"#ff9900","text-template":"{value}"},domProps:{value:s.value5},on:{input:function(t){s.value5=t}}})]),s._m(17),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(18)])]),s._m(19),s._m(20),s._m(21),s._m(22)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"rate-ping-fen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate-ping-fen","aria-hidden":"true"}},["¶"])," Rate 评分"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["评分组件"])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},["¶"])," 基础用法"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["默认不区分颜色"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["区分颜色"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过",t("code",["colors"]),"属性设置，而它们对应的两个阈值则通过 ",t("code",["low-threshold"])," 和 ",t("code",["high-threshold"])," 设定。"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"block"']),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demonstration"']),">"]),"默认不区分颜色",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-rate"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value1"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-rate"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hl
staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'选项1'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'黄金糕'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'选项2'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'双皮奶'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'选项3'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'蚵仔煎'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'选项4'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'龙须面'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'选项5'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'北京烤鸭'"]),"\n        }],\n        ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n      }\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"you-jin-yong-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#you-jin-yong-xuan-xiang","aria-hidden":"true"}},["¶"])," 有禁用选项"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["在",t("code",["el-option"]),"中，设定",t("code",["disabled"]),"值为 true，即可禁用该选项"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-select"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value2"'])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请选择"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"]),"\n      ",t("span",{staticClass:"hljs-attr"},["v-for"]),"=",t("span",{staticClass:"hljs-string"},['"item in options2"']),"\n      ",t("span",{staticClass:"hljs-attr"},[":label"]),"=",t("span",{staticClass:"hljs-string"},['"item.label"']),"\n      ",t("span",{staticClass:"hljs-attr"},[":value"]),"=",t("span",{staticClass:"hljs-string"},['"item.value"']),"\n      ",t("span",{staticClass:"hljs-attr"},[":disabled"]),"=",t("span",{staticClass:"hljs-string"},['"item.disabled"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-option"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-select"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["options2"]),": [{\n          ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'选项1'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'黄金糕'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'选项2'"]),",\n          ",t("span",{staticClass:
staticClass:"hljs-attr"},["value9"]),": [],\n        ",t("span",{staticClass:"hljs-attr"},["list"]),": [],\n        ",t("span",{staticClass:"hljs-attr"},["loading"]),": ",t("span",{staticClass:"hljs-literal"},["false"]),",\n        ",t("span",{staticClass:"hljs-attr"},["states"]),": [",t("span",{staticClass:"hljs-string"},['"Alabama"']),", ",t("span",{staticClass:"hljs-string"},['"Alaska"']),", ",t("span",{staticClass:"hljs-string"},['"Arizona"']),",\n        ",t("span",{staticClass:"hljs-string"},['"Arkansas"']),", ",t("span",{staticClass:"hljs-string"},['"California"']),", ",t("span",{staticClass:"hljs-string"},['"Colorado"']),",\n        ",t("span",{staticClass:"hljs-string"},['"Connecticut"']),", ",t("span",{staticClass:"hljs-string"},['"Delaware"']),", ",t("span",{staticClass:"hljs-string"},['"Florida"']),",\n        ",t("span",{staticClass:"hljs-string"},['"Georgia"']),", ",t("span",{staticClass:"hljs-string"},['"Hawaii"']),", ",t("span",{staticClass:"hljs-string"},['"Idaho"']),", ",t("span",{staticClass:"hljs-string"},['"Illinois"']),",\n        ",t("span",{staticClass:"hljs-string"},['"Indiana"']),", ",t("span",{staticClass:"hljs-string"},['"Iowa"']),", ",t("span",{staticClass:"hljs-string"},['"Kansas"']),", ",t("span",{staticClass:"hljs-string"},['"Kentucky"']),",\n        ",t("span",{staticClass:"hljs-string"},['"Louisiana"']),", ",t("span",{staticClass:"hljs-string"},['"Maine"']),", ",t("span",{staticClass:"hljs-string"},['"Maryland"']),",\n        ",t("span",{staticClass:"hljs-string"},['"Massachusetts"']),", ",t("span",{staticClass:"hljs-string"},['"Michigan"']),", ",t("span",{staticClass:"hljs-string"},['"Minnesota"']),",\n        ",t("span",{staticClass:"hljs-string"},['"Mississippi"']),", ",t("span",{staticClass:"hljs-string"},['"Missouri"']),", ",t("span",{staticClass:"hljs-string"},['"Montana"']),",\n        ",t("span",{staticClass:"hljs-string"},['"Nebraska"']),", ",t("span",{staticClass:"hljs-string"},['"Nevada"']),", ",t("span",{staticClass:"hljs-string"},['"New Hampshire"']),",\n        ",t("span",{staticClass:"hljs-string"},['"New Jersey"']),", ",t("span",{staticClass:"hljs-string"},['"New Mexico"']),", ",t("span",{staticClass:"hljs-string"},['"New York"']),",\n        ",t("span",{staticClass:"hljs-string"},['"North Carolina"']),", ",t("span",{staticClass:"hljs-string"},['"North Dakota"']),", ",t("span",{staticClass:"hljs-string"},['"Ohio"']),",\n        ",t("span",{staticClass:"hljs-string"},['"Oklahoma"']),", ",t("span",{staticClass:"hljs-string"},['"Oregon"']),", ",t("span",{staticClass:"hljs-string"},['"Pennsylvania"']),",\n        ",t("span",{staticClass:"hljs-string"},['"Rhode Island"']),", ",t("span",{staticClass:"hljs-string"},['"South Carolina"']),",\n        ",t("span",{staticClass:"hljs-string"},['"South Dakota"']),", ",t("span",{staticClass:"hljs-string"},['"Tennessee"']),", ",t("span",{staticClass:"hljs-string"},['"Texas"']),",\n        ",t("span",{staticClass:"hljs-string"},['"Utah"']),", ",t("span",{staticClass:"hljs-string"},['"Vermont"']),", ",t("span",{staticClass:"hljs-string"},['"Virginia"']),",\n        ",t("span",{staticClass:"hljs-string"},['"Washington"']),", ",t("span",{staticClass:"hljs-string"},['"West Virginia"']),", ",t("span",{staticClass:"hljs-string"},['"Wisconsin"']),",\n        ",t("span",{staticClass:"hljs-string"},['"Wyoming"']),"]\n      }\n    },\n    mounted() {\n      ",t("span",{staticClass:"hljs-keyword"},["this"]),".list = ",t("span",{staticClass:"hljs-keyword"},["this"]),".states.map(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["item"])," =>"])," {\n        ",t("span",{staticClass:"hljs-keyword"},["return"])," { ",t("span",{staticClass:"hljs-attr"},["value"]),": item, ",t("span",{staticClass:"hljs-attr"},["label"]),": item };\n      });\n    },\n    ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n      remoteMethod(query) {\n        ",t("span",{staticClass:"hljs-keyword"},["if"])," (query !== ",t("span",{staticClass:"hljs-string"},["''"]),") {\n          ",t("span",{staticClass:"hljs-keyword"},["this"]),".loadin
script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-steps",{attrs:{space:100,direction:"vertical",active:1}},[t("el-step",{attrs:{title:"步骤 1"}}),t("el-step",{attrs:{title:"步骤 2"}}),t("el-step",{attrs:{title:"步骤 3"}})])]),s._m(19),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(20)])]),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"steps-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-bu-zou-tiao","aria-hidden":"true"}},["¶"])," Steps 步骤条"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。"])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},["¶"])," 基础用法"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["简单的步骤条。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["设置",t("code",["active"]),"属性，接受一个",t("code",["Number"]),"，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置",t("code",["space"]),"属性即可，它接受",t("code",["Boolean"]),"，单位为",t("code",["px"]),"，如果不设置，则为自适应。设置",t("code",["finish-status"]),"属性可以改变已经完成的步骤的状态。"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-steps"])," ",t("span",{staticClass:"hljs-attr"},[":space"]),"=",t("span",{staticClass:"hljs-string"},['"100"'])," ",t("span",{staticClass:"hljs-attr"},[":active"]),"=",t("span",{staticClass:"hljs-string"},['"active"'])," ",t("span",{staticClass:"hljs-attr"},["finish-status"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-step"])," ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"步骤 1"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-step"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-step"])," ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"步骤 2"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-step"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-step"])," ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"步骤 3"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-step"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-steps"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"margin-top: 12px;"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"next"']),">"]),"下一步",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["active"]),": ",t("span",{staticClass:"hljs-number"},["0"]),"\n      };\n    },\n\n    ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n      next() {\n        ",t("span",{staticClass:"hljs-keywo
}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData2,style:"width: 100%","row-class-name":s.tableRowClassName}},[t("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"地址"}})])]]),s._m(15),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(16)])]),s._m(17),s._m(18),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData3" height="250" border style="width: 100%">\n    <el-table-column prop="date" label="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData3: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      }\n    }\n  }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData3,height:"250",border:"",style:"width: 100%"}},[t("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"地址"}})])]]),s._m(19),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(20)])]),s._m(21),s._m(22),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" border style="width: 100%">\n    <el-table-column fixed prop="date" label="日期" width="150">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="120">\n    </el-table-column>\n    <el-table-column prop="province" label="省份" width="120">\n    </el-table-column>\n    <el-table-column prop="city" label="市区" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" width="300">\n    </el-table-column>\n    <el-table-column prop="zip" label="邮编" width="120">\n    </el-table-column>\n    <el-table-column inline-template :context="_self" fixed="right" label="操作" width="100">\n      <span>\n        <el-button @click="handleClick" type="text" size="small">查看</el-button>\n        <el-button type="text" size="small">编辑</el-button>\n      </span>\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      handleClick() {\n        console.log(1);\n      }\n    },\n\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          c
},["el-table-column"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"name"']),"\n      ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"姓名"']),"\n      ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"180"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"address"']),"\n      ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"地址"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["tableData"]),": [{\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-02'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'王小虎'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-04'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'王小虎'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1517 弄'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-01'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'王小虎'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1519 弄'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-03'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'王小虎'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1516 弄'"]),"\n        }]\n      }\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"dai-bian-kuang-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-bian-kuang-biao-ge","aria-hidden":"true"}},["¶"])," 带边框表格"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用",t("code",["border"]),"属性，它接受一个",t("code",["Boolean"]),"，设置为",t("code",["true"]),"即可启用。"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n  ",
},["label"]),"=",t("span",{staticClass:"hljs-string"},['"日期"']),"\n      ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"150"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"name"']),"\n      ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"姓名"']),"\n      ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"120"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"province"']),"\n      ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"省份"']),"\n      ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"120"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"city"']),"\n      ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"市区"']),"\n      ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"120"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"address"']),"\n      ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"地址"']),"\n      ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"300"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"zip"']),"\n      ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"邮编"']),"\n      ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"120"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["tableData3"]),": [{\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-03'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'王小虎'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{static
},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table"]),"\n    ",t("span",{staticClass:"hljs-attr"},[":data"]),"=",t("span",{staticClass:"hljs-string"},['"tableData"']),"\n    ",t("span",{staticClass:"hljs-attr"},["highlight-current-row"]),"\n    ",t("span",{staticClass:"hljs-attr"},["@current-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleCurrentChange"']),"\n    ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width: 100%"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"index"']),"\n      ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"50"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["property"]),"=",t("span",{staticClass:"hljs-string"},['"date"']),"\n      ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"日期"']),"\n      ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"120"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["property"]),"=",t("span",{staticClass:"hljs-string"},['"name"']),"\n      ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"姓名"']),"\n      ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"120"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"]),"\n      ",t("span",{staticClass:"hljs-attr"},["property"]),"=",t("span",{staticClass:"hljs-string"},['"address"']),"\n      ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"地址"']),">"]),"\n    ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table-column"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-table"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["tableData"]),": [{\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-02'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'王小虎'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-04'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'王小虎'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市
},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["tableData"]),": [{\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-02'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'王小虎'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-04'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'王小虎'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1517 弄'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-01'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'王小虎'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1519 弄'"]),"\n        }, {\n          ",t("span",{staticClass:"hljs-attr"},["date"]),": ",t("span",{staticClass:"hljs-string"},["'2016-05-03'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'王小虎'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1516 弄'"]),"\n        }]\n      }\n    },\n    ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n      handleEdit(index, row) {\n        ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(index, row);\n      },\n      handleDelete(index, row) {\n        ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(index, row);\n      }\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"table-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},["¶"])," Table Attributes"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["参数"]),t("th",["说明"]),t("th",["类型"]),t("th",["可选值"]),t("th",["默认值"])])]),t("tbody",[t("tr",[t("td",["data"]),t("td",["显示的数据"]),t("td",["array"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["height"]),t("td",["Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则 Table 的高度受控于外部样式。"]),t("td",["string/number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["stripe"]),t("td",["是否为斑马纹 table"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["border"]),t("td",["是否带有纵向边框"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["fit"]),t("td",["列的宽度是否自撑开"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["show-header"]),t("td",["是否显示表头"]),t("td",["boolean"]),t("td",["-"]),t("td",["true"])]),t("tr",[t("td",["highlight-current-row"]),t("td",["是否要高亮当前行"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["row-class-name"]),t("td",["行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。"]),t("td",["Function(row, index)/String"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["row-sty
staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"消息中心"']),">"]),"消息中心",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tab-pane"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tab-pane"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"角色管理"']),">"]),"角色管理",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tab-pane"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tab-pane"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"定时任务补偿"']),">"]),"定时任务补偿",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tab-pane"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tabs"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n      renderTab(h, tab) {\n        ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"xml"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"]),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-date"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"])," {tab.label}",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"])]),";\n      }\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"dong-tai-zeng-jia-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jia-biao-qian-ye","aria-hidden":"true"}},["¶"])," 动态增加标签页"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["展示如何通过触发器来动态增加标签页"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"margin-bottom: 20px;"']),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"small"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},["\"tabs.push({ name: 'Tab ' + ++tabIndex, title: 'new Tab', content: 'new Tab content' })\""]),">"]),"add tab",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tabs"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"card"'])," ",t("span",{staticClass:"hljs-attr"},["closable"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tab-pane"])," ",t("span",{staticClass:"hljs-attr"},["v-for"]),"=",t("span",{staticClass:"hljs-string"},['"(item, index) in tabs"'])," ",t("span",{staticClass:"hljs-attr"},[":label"]),"=",t("span",{staticClass:"hljs-string"},['"item.title"'])," ",t("span",{staticClass:"hljs-attr"},[":name"]),"=",t("span",{staticClass:"hljs-string"},['"item.name"']),">"]),t("span",["{{"]),"item.content",t("span",["}}"]),t("span",{staticClass:"hljs-tag"},["</",t("span
},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"time-select-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},["¶"])," Time Select Options"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["参数"]),t("th",["说明"]),t("th",["类型"]),t("th",["可选值"]),t("th",["默认值"])])]),t("tbody",[t("tr",[t("td",["start"]),t("td",["开始时间"]),t("td",["string"]),t("td",["—"]),t("td",["09:00"])]),t("tr",[t("td",["end"]),t("td",["结束时间"]),t("td",["string"]),t("td",["—"]),t("td",["18:00"])]),t("tr",[t("td",["step"]),t("td",["间隔时间"]),t("td",["string"]),t("td",["—"]),t("td",["00:30"])]),t("tr",[t("td",["minTime"]),t("td",["最小时间，小于该时间的时间段将被禁用"]),t("td",["string"]),t("td",["—"]),t("td",["00:00"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"time-picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},["¶"])," Time Picker Options"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["参数"]),t("th",["说明"]),t("th",["类型"]),t("th",["可选值"]),t("th",["默认值"])])]),t("tbody",[t("tr",[t("td",["selectableRange"]),t("td",["可选时间段，例如",t("code",["'18:30:00 - 20:30:00'"]),"或者传入数组",t("code",["['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']"])]),t("td",["string/array"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},["¶"])," Events"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Event Name"]),t("th",["Description"]),t("th",["Parameters"])])]),t("tbody",[t("tr",[t("td",["change"]),t("td",["当 input 的值改变时触发，返回值和文本框一致"]),t("td",["formatted value"])])])])}]}},function(s,t,a){s.exports=a(437)},function(s,t,a){var n,e;a(438),n=a(440);var l=a(441);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,s.exports=n},function(s,t){},,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;s._c;return t("section",[s._m(0),s._m(1),s._m(2),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">\n      <el-button>上左</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">\n      <el-button>上边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">\n      <el-button>上右</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">\n      <el-button>左上</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">\n      <el-button>左边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">\n      <el-button>左下</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">\n      <el-button>右上</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">\n      <el-button>右边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" co
style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(4)])]),s._m(5),s._m(6),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="regions" :props="props" :load="loadNode" lazy="" show-checkbox @check-change="handleCheckChange">\n</el-tree>\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: 'region1' }, { name: 'region2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-tree",{attrs:{data:s.regions,props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})]),t("div",{slot:"highlight",staticClass:"highlight"},[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),s._m(16)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"tree-shu-xing-kong-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-shu-xing-kong-jian","aria-hidden":"true"}},["¶"])," Tree 树形控件"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["用清晰的层级结构展示信息，可展开或折叠。"])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},["¶"])," 基础用法"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["基础的树形结构展示。"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tree"])," ",t("span",{staticClass:"hljs-attr"},[":data"]),"=",t("span",{staticClass:"hljs-string"},['"data"'])," ",t("span",{staticClass:"hljs-attr"},[":props"]),"=",t("span",{staticClass:"hljs-string"},['"defaultProps"'])," ",t("span",{staticClass:"hljs-attr"},["@node-click"]),"=",t("span",{staticClass:"hljs-string"},['"handleNodeClick"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tree"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["data"]),": [{\n          ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'一级 1'"]),",\n          ",t("span",{staticClass:"hljs-attr"},["children"]),": [{\n            ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'二级 1-1'"]),"\n          }]\n        }, {\
staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-upload__tip"'])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"tip"']),">"]),"只能上传jpg/png文件，且不超过500kb",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-upload"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n  ",t("span",{staticClass:"hljs-keyword"},["export"])," ",t("span",{staticClass:"hljs-keyword"},["default"])," {\n    data() {\n      ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n        ",t("span",{staticClass:"hljs-attr"},["fileList"]),": [{",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'food.jpeg'"]),", ",t("span",{staticClass:"hljs-attr"},["url"]),": ",t("span",{staticClass:"hljs-string"},["'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'"]),"}, {",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'food2.jpeg'"]),", ",t("span",{staticClass:"hljs-attr"},["url"]),": ",t("span",{staticClass:"hljs-string"},["'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'"]),"}]\n      };\n    },\n    ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n      handleRemove(file, fileList) {\n        ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(file, fileList);\n      },\n      handlePreview(file) {\n        ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(file);\n      }\n    }\n  }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"shang-chuan-dan-ge-tu-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shang-chuan-dan-ge-tu-pian","aria-hidden":"true"}},["¶"])," 上传单个图片"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["专门针对图片类型文件的上传，上传后在原位置显示缩略图。"])},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-upload"})},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"el-dragger__text"},["将文件拖到此处，或",t("em",["点击上传"])])},function(){var s=this,t=s.$createElement;s._c;return t("p",[t("code",["thumbnail-mode"])," 属性允许你将上传组件强制只允许图片上传，并支持展示上传文件的缩略图。"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-upload"]),"\n  ",t("span",{staticClass:"hljs-attr"},["action"]),"=",t("span",{staticClass:"hljs-string"},['"//jsonplaceholder.typicode.com/posts/"']),"\n  ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"drag"']),"\n  ",t("span",{staticClass:"hljs-attr"},[":thumbnail-mode"]),"=",t("span",{staticClass:"hljs-string"},['"true"']),"\n  ",t("span",{staticClass:"hljs-attr"},[":on-preview"]),"=",t("span",{staticClass:"hljs-string"},['"handlePreview"']),"\n  ",t("span",{staticClass:"hljs-attr"},[":on-remove"]),"=",t("span",{staticClass:"hljs-string"},['"handleRemove"']),"\n  ",t("span",{staticClass:"hljs-attr"},[":default-file-list"]),"=",t("span",{staticClass:"hljs-string"},['"fileList"']),"\n>"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-upload"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\n  ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t
},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+8PFqwD6wM0oT80vmPuRiEjtKjsJMi0
},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9Ijg4cHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDg4IDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2tldGNoIFRlbXBsYXRlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iU2tldGNoLVRlbXBsYXRlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjUiPgogICAgICAgICAgICAgICAgPGcgaWQ9ImJyb3dzZXIiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wNDI3MzUsIDYuNzcyMjY5KSIgZmlsbD0iI0M5RTFGQiIgb3BhY2l0eT0iMC4yMzg4MDU5NyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjIwMDg4NDc2LDI4LjUwNTczMzcgTDQ0LjE3MDEzOTEsMjguNTA1NzMzNyBDNDUuOTEwNTI2NSwyOC41MDU3MzM3IDQ3LjMyMTc1NzUsMjcuMTAyNjMxMiA0Ny4zMjE3NTc1LDI1LjM3MjI2ODIgTDQ3LjMyMTc1NzUsMC4zMDU2MDg3MjUgQzQ3LjMyMTc1NzUsMi4wMzU5NzE3MiA0NS45MTA1MjY1LDMuNDM5MDc0MjYgNDQuMTcwMTM5MSwzLjQzOTA3NDI2IEwzLjIwMDg4NDc2LDMuNDM5MDc0MjYgQzEuNDYwNDk3MzksMy40MzkwNzQyNiAwLjA0OTI2NjM1MDMsMi4wMzU5NzE3MiAwLjA0OTI2NjM1MDMsMC4zMDU2MDg3MjUgTDAuMDQ5MjY2MzUwMywyNS4zNzIyNjgyIEMwLjA0OTI2NjM1MDMsMjcuMTAyOTg2MSAxLjQ2MDE0MDM4LDI4LjUwNTczMzcgMy4yMDA4ODQ3NiwyOC41MDU3MzM3IEwzLjIwMDg4NDc2LDI4LjUwNTczMzcgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik01OS45MjcxNjAxLDI4LjUwNTczMzcgTDc4LjgzNjE1NjYsMjguNTA1NzMzNyBDODAuNTc2NTQ0LDI4LjUwNTczMzcgODEuOTg3Nzc1LDI3LjEwMjYzMTIgODEuOTg3Nzc1LDI1LjM3MjI2ODIgTDgxLjk4Nzc3NSwwLjMwNTYwODcyNSBDODEuOTg3Nzc1LDIuMDM1OTcxNzIgODAuNTc2NTQ0LDMuNDM5MDc0MjYgNzguODM2MTU2NiwzLjQzOTA3NDI2IEw1OS45MjcxNjAxLDMuNDM5MDc0MjYgQzU4LjE4Njc3MjgsMy40MzkwNzQyNiA1Ni43NzU1NDE3LDIuMDM1OTcxNzIgNTYuNzc1NTQxNywwLjMwNTYwODcyNSBMNTYuNzc1NTQxNywyNS4zNzIyNjgyIEM1Ni43NzU1NDE3LDI3LjEwMjk4NjEgNTguMTg2NzcyOCwyOC41MDU3MzM3IDU5LjkyNzE2MDEsMjguNTA1NzMzNyBMNTkuOTI3MTYwMSwyOC41MDU3MzM3IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEw0NC4yMTI4NzM2LDEwLjIxMTY5ODYgQzQ1Ljk1MzI2MSwxMC4yMTE2OTg2IDQ3LjM2NDQ5Miw4LjgwODU5NjAzIDQ3LjM2NDQ5Miw3LjA3ODIzMzA0IEw0Ny4zNjQ0OTIsMy45NDQ3Njc1MSBDNDcuMzY0NDkyLDIuMjE0NDA0NTEgNDUuOTUzMjYxLDAuODExMzAxOTY5IDQ0LjIxMjg3MzYsMC44MTEzMDE5NjkgTDMuMjQzNjE5MjksMC44MTEzMDE5NjkgQzEuNTAzMjMxOTEsMC44MTEzMDE5NjkgMC4wOTIwMDA4NzY0LDIuMjE0NDA0NTEgMC4wOTIwMDA4NzY0LDMuOTQ0NzY3NTEgTDAuMDkyMDAwODc2NCw3LjA3ODIzMzA0IEMwLjA5MjAwMDg3NjQsOC44MDg1OTYwMyAxLjUwMjg3NDkxLDEwLjIxMTY5ODYgMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEwzLjI0MzYxOTI5LDEwLjIxMTY5ODYgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTU5Ljk2OTg5NDcsMTAuMjExNjk4NiBMNzguODc4ODkxMSwxMC4yMTE2OTg2IEM4MC42MTkyNzg1LDEwLjIxMTY5ODYgODIuMDMwNTA5Niw4LjgwODU5NjAzIDgyLjAzMDUwOTYsNy4wNzgyMzMwNCBMODIuMDMwNTA5NiwzLjk0NDc2NzUxIEM4Mi4wMzA1MDk2LDIuMjE0NDA0NTEgODAuNjE5Mjc4NSwwLjgxMTMwMTk2OSA3OC44Nzg4OTExLDAuODExMzAxOTY5IEw1OS45Njk4OTQ3LDAuODExMzAxOTY5IEM1OC4yMjk1MDczLDAuODExMzAxOTY5IDU2LjgxODI3NjMsMi4yMTQ0MDQ1MSA1Ni44MTgyNzYzLDMuOTQ0NzY3NTEgTDU2LjgxODI3NjMsNy4wNzgyMzMwNCBDNTYuODE4Mjc2Myw4LjgwODU5NjAzIDU4LjIyOTUwNzMsMTAuMjExNjk4NiA1OS45Njk4OTQ3LDEwLjIxMTY5ODYgTDU5Ljk2OTg5NDcsMTAuMjExNjk4NiBaIiBpZD0iU2hhcGUiIGZpbGw9IiMyMEEwRkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMTExNzc4LCA0NC4zOTY1NzIpIiBmaWxsPSIjQzlFMUZCIiBvcGFjaXR5PSIwLjIzODgwNTk3Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMuNjM5NDk2NTksMjguNDgxNTk3NCBDMy42Mzk0OTY1OSwzMC4yMTE5NjA0IDIuMTM2NTcxMzcsMzEuNjE1MDYyOSAwLjI4MzEwMzAxMywzMS42MTUwNjI5IEw2Mi41NjY3MDg4LDMxLjYxNTA2MjkgQzY0LjQyMDE3NzIsMzEuNjE1MDYyOSA2NS45MjMxMDI0LDMwLjIxMTk2MDQgNjUuOTIzMTAyNCwyOC40ODE1OTc0IEw2NS45MjMxMDI0LDMuNDE0OTM3OTIgQzY1LjkyMzEwMjQsMS42ODQ1NzQ5MiA2NC40MjAxNzcyLDAuMjgxNDcyMzggNjIuNTY2NzA4OCwwLjI4MTQ3MjM4IEwwLjI4MzEwMzAxMywwLjI4MTQ3MjM4IEMyLjEzNj
},function(s,t,a){s.exports=a.p+"static/banner-bg.75437e1.svg"},function(s,t,a){s.exports=a.p+"static/guide.0a8462c.png"},function(s,t,a){s.exports=a.p+"static/component.bd3411b.png"},function(s,t,a){s.exports=a.p+"static/resource.a72b8f8.png"},function(s,t,a){var n,e;a(524),n=a(526);var l=a(527);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,e._scopeId="data-v-377a3bfe",s.exports=n},function(s,t){},,function(s,t,a){"use strict";function n(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var e=a(515),l=n(e);t.default={mounted:function(){function s(t){t.addScene("产品设计师",1800,-5,800).addScene("交互设计师",1800,-5,500).addScene("视觉设计师",1800,-5,700).addScene("产品经理",1800,-4,600).addScene("前端工程师",1800,-5,800).addScene(function(a){s(t),a()})}var t=(0,l.default)();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:.5,accuracy:1}).addScene(2600).addScene("line2:只为守护世界和平",300,-6,1e3).addScene("让你少加班",300,-5).addScene("line2:只为这样的你: ",400).addScene(function(a){s(t),a()})}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",[s._m(0),t("div",{staticClass:"cards"},[t("ul",{staticClass:"container"},[t("li",[t("div",{staticClass:"card"},[s._m(1),s._m(2),s._m(3),t("router-link",{attrs:{"active-class":"active",to:"/zh-CN/guide/design",exact:""}},["查看详情\n          "])])]),t("li",[t("div",{staticClass:"card"},[s._m(4),s._m(5),s._m(6),t("router-link",{attrs:{"active-class":"active",to:"/zh-CN/component/layout",exact:""}},["查看详情\n          "])])]),t("li",[t("div",{staticClass:"card"},[s._m(7),s._m(8),s._m(9),t("router-link",{attrs:{"active-class":"active",to:"/zh-CN/resource",exact:""}},["查看详情\n          "])])])])])])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-sky"}),t("img",{staticClass:"banner-stars",attrs:{src:a(518),alt:"Element"}}),t("div",{staticClass:"container"},[t("div",{staticClass:"banner-desc"},[t("h2",["网站快速成型工具"]),t("div",{staticClass:"actor",attrs:{id:"line2"}}),t("p",["Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。"])]),t("img",{attrs:{src:a(519),alt:"Element"}})])])},function(){var s=this,t=s.$createElement;s._c;return t("img",{attrs:{src:a(520),alt:""}})},function(){var s=this,t=s.$createElement;s._c;return t("h3",["指南"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。"])},function(){var s=this,t=s.$createElement;s._c;return t("img",{attrs:{src:a(521),alt:""}})},function(){var s=this,t=s.$createElement;s._c;return t("h3",["组件"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。"])},function(){var s=this,t=s.$createElement;s._c;return t("img",{attrs:{src:a(522),alt:""}})},function(){var s=this,t=s.$createElement;s._c;return t("h3",["资源"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。"])}]}},function(s,t,a){var n,e;n=a(529);var l=a(535);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,s.exports=n},function(s,t,a){"use strict";function n(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var e=a(530),l=n(e);t.default={components:{PlayComponent:l.default}}},function(s,t,a){var n,e;a
}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"side-nav",style:s.navStyle},[t("el-dropdown",{directives:[{name:"show",rawName:"v-show",value:s.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-dropdown",class:{"is-active":s.dropdownVisible},attrs:{trigger:"click"}},[t("span",["\n      "+s._s(s.langConfig.dropdown)+s._s(s.version)+"\n      ",s._m(0)]),t("el-dropdown-menu",{slot:"dropdown",staticClass:"nav-dropdown-list",attrs:{offset:-80},on:{input:s.handleDropdownToggle}},[s._l(Object.keys(s.versions),function(a){return t("el-dropdown-item",{nativeOn:{click:function(t){s.switchVersion(a)}}},["\n        "+s._s(a)+"\n      "])})])]),t("ul",[s._l(s.data,function(a){return t("li",{staticClass:"nav-item"},[a.path?t("router-link",{attrs:{"active-class":"active",to:s.base+a.path,exact:""},domProps:{textContent:s._s(a.title||a.name)}}):t("a",{on:{click:s.expandMenu}},[s._s(a.name)]),a.children?t("ul",{staticClass:"pure-menu-list sub-nav"},[s._l(a.children,function(a){return t("li",{staticClass:"nav-item"},[t("router-link",{attrs:{"active-class":"active",to:s.base+a.path,exact:""},domProps:{textContent:s._s(a.title||a.name)}})])})]):s._e(),a.groups?[s._l(a.groups,function(a){return t("div",{staticClass:"nav-group"},[t("div",{staticClass:"nav-group__title",on:{click:s.expandMenu}},[s._s(a.groupName)]),t("ul",{staticClass:"pure-menu-list"},[s._l(a.list,function(a){return a.disabled?s._e():t("li",{staticClass:"nav-item"},[t("router-link",{attrs:{"active-class":"active",to:s.base+a.path,exact:""},domProps:{textContent:s._s(a.title)}})])})])])})]:s._e()])})])])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})}]}},function(s,t,a){var n,e;a(890),n=a(892);var l=a(893);e=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(e=n=n.default),"function"==typeof e&&(e=e.options),e.render=l.render,e.staticRenderFns=l.staticRenderFns,s.exports=n},function(s,t){},,function(s,t,a){"use strict";function n(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var e=a(21),l=n(e);t.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 s=this,t=l.default[this.lang];this.nav=t[0].children.concat(t[1]),t[2].groups.map(function(s){return s.list}).forEach(function(t){s.nav=s.nav.concat(t)})},updateNav:function(){this.currentComponent="/"+this.$route.path.split("/")[3];for(var s=0,t=this.nav.length;s<t;s++)if(this.nav[s].path===this.currentComponent){this.currentIndex=s;break}this.leftNav=this.nav[this.currentIndex-1],this.rightNav=this.nav[this.currentIndex+1]},handleNavClick:function(s){this.$router.push("/"+this.lang+"/component"+("prev"===s?this.leftNav.path:this.rightNav.path))}},created:function(){this.setNav(),this.updateNav()}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"footer-nav"},[s.leftNav?t("span",{staticClass:"footer-nav-link footer-nav-left",on:{click:function(t){s.handleNavClick("prev")}}},[s._m(0),"\n    "+s._s(s.leftNav.title||s.leftNav.name)+"\n  "]):s._e(),s.rightNav?t("span",{staticClass:"footer-nav-link footer-nav-right",on:{click:function(t){s.handleNavClick("next")}}},["\n    "+s._s(s.rightNav.title||s.rightNav.name)+"\n    ",s._m(1)]):s._e()])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-arrow-left"})},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-arrow-right"})}]}},function(s,t){s.exports={"zh-CN":{home:"Element - 网站快速成型工具",guide:"指南 | Element",component:"组件 | Element",resource:"资源 | Element"},"en-US":{home:"Element - A Desktop UI Toolkit for Web",guide:"Guide | Element",component:"Component | Element",resource:"Resource | Element"}}}]);