mirror of https://github.com/ElemeFE/element
75 lines
2.4 MiB
75 lines
2.4 MiB
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()])},staticRenderFns:[]}},function(s,t){s.exports=VueRouter},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),i=a(22),r=n(i),c=function(s){function t(s,t,e){var l="/changelog"===s.path?a(34)("./"+t+"/changelog.vue"):a(51)("./"+t+s.path+".md"),i={path:s.path.slice(1),meta:{title:s.title||s.name,description:s.description,lang:t},name:"component-"+(s.title||s.name),component:l.default||l};n[e].children.push(i)}var n=[];return Object.keys(s).forEach(function(e,l){var i=s[e];n.push({path:"/"+e+"/component",redirect:"/"+e+"/component/installation",component:a(23)("./"+e+"/component.vue"),children:[]}),i.forEach(function(s){s.groups?s.groups.forEach(function(s){s.list.forEach(function(s){t(s,e,l)})}):s.children?s.children.forEach(function(s){t(s,e,l)}):t(s,e,l)})}),n},o=c(l.default),p=function(s){var t={path:"/"+s+"/guide",redirect:"/"+s+"/guide/design",component:a(459)("./"+s+"/guide.vue"),children:[{path:"design",name:"guide-design"+s,meta:{lang:s},component:a(470)("./"+s+"/design.vue")},{path:"nav",name:"guide-nav"+s,meta:{lang:s},component:a(483)("./"+s+"/nav.vue")}]},n={path:"/"+s+"/resource",meta:{lang:s},name:"resource"+s,component:a(498)("./"+s+"/resource.vue")},e={path:"/"+s,meta:{lang:s},name:"home"+s,component:a(510)("./"+s+"/index.vue")};return[t,n,e]};r.default.forEach(function(s){o=o.concat(p(s.lang))}),o.push({path:"/play",name:"play",component:a(528)});var h=localStorage.getItem("ELEMENT_LANGUAGE")||window.navigator.language||"en-US",d="/en-US";h.indexOf("zh-")!==-1&&(d="/zh-CN"),o=o.concat([{path:"/",redirect:d},{path:"*",redirect:d}]),t.default=o},function(s,t){s.exports={"zh-CN":[{name:"开发指南",children:[{path:"/installation",name:"安装"},{path:"/quickstart",name:"快速上手"},{path:"/i18n",name:"国际化"},{path:"/custom-theme",name:"自定义主题"}]},{name:"更新日志",path:"/changelog"},{name:"基础组件",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout 布局"},{path:"/color",title:"Color 色彩"},{path:"/typography",title:"Typography 字体"},{path:"/icon",title:"Icon 图标"},{path:"/button",title:"Button 按钮"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio 单选框"},{path:"/checkbox",title:"Checkbox 多选框"},{path:"/input",title:"Input 输入框"},{path:"/input-number",title:"InputNumber 计数器"},{path:"/select",title:"Select 选择器"},{path:"/switch",title:"Switch 开关"},{path:"/slider",title:"Slider 滑块"},{path:"/time-picker",title:"TimePicker 时间选择器"},{path:"/date-picker",title:"DatePicker 日期选择器"},{path:"/datetime-picker",title:"DateTimePicker 日期时间选择器"},{path:"/upload",title:"Upload 上传"},{path:"/rate",title:"Rate 评分"},{path:"/form",title:"Form 表单"}]},{groupName:"Data",list:[{path:"/table",title:"Table 表格"},{path:"/tag",title:"Tag 标签"},{path:"/progress",title:"Progress 进度条"},{path:"/tree",title:"Tree 树形控件"},{path:"/pagination",title:"Pagination 分页"},{path:"/badge",title:"Badge 标记"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert 警告"},{path:"/loading",title:"Loading 加载"},{path:"/message",title:"Message 消息提示"},{path:"/message-box",title:"MessageBox 弹框"},{path:"/notification",title:"Notification 通知"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu 导航菜单"},{path:"/tabs",title:"Tabs 标签页"},{path:"/breadcrumb",title:"Breadcrumb 面包屑"},{path:"/dropdown",title:"Dropdown 下拉菜单"},{path:"/steps",title:"Steps 步骤"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog 对话框"},{path:"/tooltip",title:"Tooltip 文字提示"},{path:"/popover",title:"Popover 弹出框"},{path:"/card",title:"Card 卡片"}]}]}],"en-US":[{name:"Development",children:[{path:"/installation",name:"Installation"},{path:"/quickstart",name:"Quick Start"},{path:"/i18n",name:"Internationalization"},{path:"/custom-theme",name:"Custom Theme"}]},{name:"Changelog",path:"/changelog"},{name:"Components",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout"},{path:"/color",title:"Color"},{path:"/typography",title:"Typography"},{path:"/icon",title:"Icon"},{path:"/button",title:"Button"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio"},{path:"/checkbox",title:"Checkbox"},{path:"/input",title:"Input"},{path:"/input-number",title:"InputNumber"},{path:"/select",title:"Select"},{path:"/switch",title:"Switch"},{path:"/slider",title:"Slider"},{path:"/time-picker",title:"TimePicker"},{path:"/date-picker",title:"DatePicker"},{path:"/datetime-picker",title:"DateTimePicker"},{path:"/upload",title:"Upload"},{path:"/rate",title:"Rate"},{path:"/form",title:"Form"}]},{groupName:"Data",list:[{path:"/table",title:"Table"},{path:"/tag",title:"Tag"},{path:"/progress",title:"Progress"},{path:"/tree",title:"Tree"},{path:"/pagination",title:"Pagination"},{path:"/badge",title:"Badge"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert"},{path:"/loading",title:"Loading"},{path:"/message",title:"Message"},{path:"/message-box",title:"MessageBox"},{path:"/notification",title:"Notification"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu"},{path:"/tabs",title:"Tabs"},{path:"/breadcrumb",title:"Breadcrumb"},{path:"/dropdown",title:"Dropdown"},{path:"/steps",title:"Steps"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog"},{path:"/tooltip",title:"Tooltip"},{path:"/popover",title:"Popover"},{path:"/card",title:"Card"}]}]}]}},function(s,t){s.exports=[{lang:"zh-CN"},{lang:"en-US"}]},function(s,t,a){function n(s){return a(e(s))}function e(s){return l[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var l={"./en-US/component.vue":24,"./zh-CN/component.vue":29};n.keys=function(){return Object.keys(l)},n.resolve=e,s.exports=n,n.id=23},function(s,t,a){var n,e;a(25),n=a(27);var l=a(28);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{lang:this.$route.meta.lang,navsData:l.default}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"page-container page-component"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:6}},[t("side-nav",{attrs:{data:s.navsData[s.lang],base:"/"+s.lang+"/component"}})]),t("el-col",{attrs:{xs:24,sm:18}},[t("router-view",{staticClass:"content"}),t("footer-nav")])])])},staticRenderFns:[]}},function(s,t,a){var n,e;a(30),n=a(32);var l=a(33);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{lang:this.$route.meta.lang,navsData:l.default}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"page-container page-component"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:6}},[t("side-nav",{attrs:{data:s.navsData[s.lang],base:"/"+s.lang+"/component"}})]),t("el-col",{attrs:{xs:24,sm:18}},[t("router-view",{staticClass:"content"}),t("footer-nav")])])])},staticRenderFns:[]}},function(s,t,a){function n(s){return a(e(s))}function e(s){return l[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var l={"./en-US/changelog.vue":35,"./zh-CN/changelog.vue":43};n.keys=function(){return Object.keys(l)},n.resolve=e,s.exports=n,n.id=34},function(s,t,a){var n,e;a(36),n=a(38);var l=a(42);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(39),l=n(e);t.default={components:{ChangeLog:l.default},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,t=s.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var n=t[1].textContent.trim(),e='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+n+'" target="_blank">'+n+"</a></h3>",l=t.length,i=2;i<l;i++){var r=t[i];a=t[i].querySelector("a"),a&&a.remove(),"H3"!==r.tagName?e+=t[i].outerHTML:(n=t[i].textContent.trim(),e+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+n+'" target="_blank">'+n+"</a></h3>")}e=e.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>'),this.$refs.timeline.innerHTML=e+"</li>",s.$el.remove()}}},function(s,t,a){s.exports=a(40)},function(s,t,a){var n,e,l=a(41);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:"changelog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},["¶"])," Changelog"]),t("h3",{attrs:{id:"1-0-9"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-9","aria-hidden":"true"}},["¶"])," 1.0.9"]),t("p",[t("em",["2016-12-27"])]),t("ul",[t("li",["Fixed DatePicker incorrectly triggering input event, #1834"]),t("li",["Fixed Tree reporting ",t("code",["event is undefined"])," error in Firefox, #1945"]),t("li",["Added ",t("code",["change"])," event for DatePicker, whose parameter is the formatted value, #1841"]),t("li",["Added ",t("code",["header-align"])," attribute for Table, #1424"]),t("li",["Fixed single select Table's highlight style not removing when data is removed, #1890"]),t("li",["Fixed filterable Select lagging issue with more options, #1933"]),t("li",["Fixed multiple disabled Select not disabling removing selected options issue, #2001"]),t("li",["Fixed Col style not working in ",t("code",["xs"]),", #2011"]),t("li",["Added ",t("code",["value"])," attribute for Tab, #2008"]),t("li",["Fixed InputNumber ",t("code",["change"])," event incorrectly firing multiple times in some conditions, #1999"]),t("li",["Added ",t("code",["clearable"])," attribute for DatePicker, #1994"]),t("li",["Fixed Form always passing validation in async mode, #1936"])]),t("h3",{attrs:{id:"1-0-8"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-8","aria-hidden":"true"}},["¶"])," 1.0.8"]),t("p",[t("em",["2016-12-20"])]),t("ul",[t("li",["Fixed nested Popup from event bubbling, #1677"]),t("li",["Fixed the issue that datetimerange-typed DatePicker can not select time, #1758"]),t("li",["Fixed ",t("code",["change"])," event not firing correctly of Slider, #1809"]),t("li",["Fixed Loading's spinner splitting while animating in some conditions, #1786"]),t("li",["Added ",t("code",["loading-text"]),", ",t("code",["no-data-text"]),", ",t("code",["no-match-text"])," properties and ",t("code",["visible-change"])," event for Select, #1849"]),t("li",["Added ",t("code",["popper-class"])," property for DatePicker, Select and Tooltip, #1806"]),t("li",["Added ",t("code",["expand-on-click-node"]),", ",t("code",["current-node-key"])," properties and ",t("code",["current-change"])," event for Tree, #1805 #1807"]),t("li",["Added the third parameter ",t("code",["column"])," for Table's ",t("code",["row-click"])," event, #1808"]),t("li",["Fixed an error when pages with Checkbox switching routes due to ",t("code",["computed"])," property being cached, #1860"]),t("li",["Added the tab instance as a parameter for TabPanel's ",t("code",["label-content"])," render function, #1857"]),t("li",["Added infinite submenus support for NavMenu in vertical mode, #1851"]),t("li",["Updated Checkbox so that it works without a binding value, #1818"]),t("li",["Added ",t("code",["onProgress"])," hook for Progress, #1782"]),t("li",["Fixed Tab not updating active bar with dynamic label, #1761"]),t("li",["Added ",t("code",["filter-change"])," event for Table, and ",t("code",["column-key"])," property for TableColumn, #1876"]),t("li",["Added ",t("code",["hide-on-click"])," property for Dropdown, #1879"])]),t("h3",{attrs:{id:"1-0-7"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-7","aria-hidden":"true"}},["¶"])," 1.0.7"]),t("p",[t("em",["2016-12-14"])]),t("ul",[t("li",["Fixed DatePicker dropdown appears when hovering on the clear button"]),t("li",["Fixed DatePicker displays a wrong date when its initial value is null"]),t("li",["Added ",t("code",["row-contextmenu"])," event and ",t("code",["max-height"])," attribute for Table, #1663 #1674"]),t("li",["Added ",t("code",["customClass"])," attribute for MessageBox, #1707"]),t("li",["Added ",t("code",["iconClass"])," and ",t("code",["customClass"])," attributes for Message and Notification, #1671"]),t("li",["Added empty slot for Table, #1737"]),t("li",["Added old value as a second parameter in change event for InputNumber"])]),t("h3",{attrs:{id:"1-0-6"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-6","aria-hidden":"true"}},["¶"])," 1.0.6"]),t("p",[t("em",["2016-12-09"])]),t("ul",[t("li",["Added ",t("code",["disabled"])," attribute for Tabs, #1620"]),t("li",["Added ",t("code",["size"])," attribute for DatePicker input, #1440"]),t("li",["Fixed ",t("code",["datetimerange"])," DatePicker's panel not showing correct date if initial value is present, #1129"]),t("li",["Fixed DatePicker display error when switching year, #1607"]),t("li",["Fixed DatePicker not triggering clickoutside when its icon is clicked, #1604"]),t("li",["Fixed TimePicker not refreshing value after clicking the clear button, #1583"]),t("li",["Fixed remote filterable Select display error when its value is an object, #1593"]),t("li",["Fixed Select's clear button still working bug when it's ",t("code",["disabled"]),", #1619"]),t("li",["Fixed Switch's background color error when its ",t("code",["disabled"])," attribute is dynamically changed, #1627"]),t("li",["Fixed some style bugs of Table"])]),t("h3",{attrs:{id:"1-0-5"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-5","aria-hidden":"true"}},["¶"])," 1.0.5"]),t("p",[t("em",["2016-12-06"])]),t("ul",[t("li",["Fixed Select with async options and binding value displaying value instead of label, #1537"]),t("li",["Fixed Select reports an error when initial binding value is an empty object, #1533"]),t("li",["Fixed remote filtering Select not showing dropdown in some conditions, #1531"]),t("li",["Fixed Slider sometimes drifting a small distance after releasing dragging, #1546"]),t("li",["Fixed Steps style in IE9, #1543"]),t("li",["Added Upload generating URL for all file types, #1530"]),t("li",["Fixed TimeSelect style, removed flexbox, #1335"])]),t("h3",{attrs:{id:"1-0-4"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-4","aria-hidden":"true"}},["¶"])," 1.0.4"]),t("p",[t("em",["2016-12-02"])]),t("ul",[t("li",["Added ",t("code",["controls"])," attribute for Input Number, #1473"]),t("li",["Fixed Checkbox Group and Radio Group async issue, #1511 #1514"]),t("li",["Added ",t("code",["offset"])," attribute for Notification, #1419"]),t("li",["Fixed Slider's value not accurate issue when dragging rapidly, #1458"]),t("li",["Fixed Slider incorrectly showing multiple decimal digits issue, #1450"]),t("li",["Fixed Select's binding value and displayed value not in sync in some conditions"]),t("li",["Added ",t("code",["multiple-limit"])," and ",t("code",["allow-create"])," attributes for Select"]),t("li",["Fixed Tree leaf nodes' triangle icon not disappear when expanded, #1438"]),t("li",["Fixed Tree's view not updating issue after fetching child nodes' data, #1439"]),t("li",["Fixed some Table's style issues in windows system, #1464 #1507"]),t("li",["Fixed Table's first column's label not showing issue when grouping table head is used with fixed columns, #1451"]),t("li",["Added ",t("code",["row-dblclick"])," event for Table, #1362"])]),t("h3",{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",["Fixed ",t("code",["currentPage"])," of Pagination not working in some cases, #1336"]),t("li",["Fixed ",t("code",["month"])," and ",t("code",["disabledDate"])," DatePicker's view not refreshing issue when switching year, #1158"]),t("li",["Fixed ",t("code",["readonly"])," DatePicker clear button not disabled issue, #1238"]),t("li",["Fixed Slider not working when binding value is ",t("code",["NaN"])," or ",t("code",["step"])," is smaller than 1, #1239 #1282"]),t("li",["Added multi-header for Table, #1312"]),t("li",["Added ",t("code",["rowStyle"])," for Table, #1348"]),t("li",["Fixed some attributes of TableColumn can not dynamically assigned issue, #1314"]),t("li",["Added ",t("code",["filter-node-method"])," attribute and ",t("code",["filter"])," method for Tree, #1257"]),t("li",["Added ",t("code",["getCheckedKeys"])," and ",t("code",["setCheckedKeys"])," methods for Tree, #1254"]),t("li",["Added deep nesting support for Checkbox/Radio inside Checkbox/Radio Group, #1152"]),t("li",["Fixed Popper not triggering destroy issue when keep-alive, #1359"]),t("li",["Added object deep validation for Form, #1363"]),t("li",["Added ",t("code",["append"])," and ",t("code",["prepend"])," for Autocomplete, #1369"]),t("li",["Added dynamic ",t("code",["pageSizes"])," support for Pagination, #1372"]),t("li",["Added custom style API for checked buttons in Radio Button, #1380"]),t("li",["Added assigning title via slot for Menu Group, #1382"]),t("li",["Fixed DatePicker year switching bug, #1385"]),t("li",["Added uploaded file list API for Upload, #1393"]),t("li",["Added multi-type support for ",t("code",["label"])," attribute of Checkbox, #1400"]),t("li",["Added ",t("code",["setChecked"])," method for Tree, #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",["Added ",t("code",["context"])," for Table to specify which context to access inside of table columns, #1161"]),t("li",["Added multiple languages"]),t("li",["Fixed language's dynamic switching issue, #1160"]),t("li",["Added ",t("code",["render-content"])," for Alert, #568"]),t("li",["Added styles for focused Button, #982"]),t("li",["Fixed ",t("code",["change"])," triggering timing in Switch, #1162"]),t("li",["Fixed TimeSelect being disabled when start time is set to ",t("code",["00:00"]),", #676"]),t("li",["Added ",t("code",["show-header"])," attribute and ",t("code",["header-click"])," method for Table, #1195"]),t("li",["Improved ",t("code",["height"])," attribute for Table when set to a string, #1195"]),t("li",["Fixed ",t("code",["selection-change"])," of Table not triggering in some cases, #1198"]),t("li",["Fixed Table's fixed columns not disappear when ",t("code",["fixed"])," attribute is dynamically changed, #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",["Fixed Pagination improperly triggering multiple ",t("code",["current-change"])," events"]),t("li",["Fixed Switch style when nested in a Form, #967"]),t("li",["Fixed Loading locks scroll of ",t("code",["body"])," in specific scenarios, #968"]),t("li",[t("code",["span"])," of Col is no longer a required attribute, and its default value is ",t("code",["24"])," if omitted"]),t("li",["Added ",t("code",["disabled"])," and ",t("code",["editable"])," attribute for DatePicker, #976"]),t("li",["Fixed DatePicker readonly with native behavior, #976"]),t("li",["Added ",t("code",["close"])," method for Message and Notification to manually close an instance"]),t("li",["Added clear value feature for DatePicker, #759"]),t("li",["Fixed Form reports an error when resetting a Date typed field, #937"]),t("li",["Fixed Table render error using vue-loader 9.9.0"]),t("li",["Added ",t("code",["align-center"])," attribute for Step, #994"]),t("li",["Fixed Upload missing Progress component, #1013"]),t("li",["Layout now supports responsive layout"]),t("li",["Added ",t("code",["show-close"])," for Dialog"]),t("li",["Fixed an error when ",t("code",["vue-i18n"])," is imported but not configured, #973"]),t("li",["Fixed DatePicker not refresh view with an initial value, #1050"]),t("li",["Fixed DiatePicker not refresh year when switched in month picker, #1070"]),t("li",["Added $loading service"]),t("li",["Added ",t("code",["manual"])," trigger in Popover"]),t("li",["Added props: ",t("code",["nodeKey"]),", ",t("code",["emptyText"]),", ",t("code",["checkStrictly"]),", ",t("code",["defaultExpandAll"]),", ",t("code",["autoExpandParent"]),", ",t("code",["defaultCheckedKeys"]),", ",t("code",["defaultExpandedKeys"])," and method: ",t("code",["setCheckedNodes"])," for Tree"])]),t("h3",{attrs:{id:"1-0-0"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0","aria-hidden":"true"}},["¶"])," 1.0.0"]),t("p",[t("em",["2016-11-9"])]),t("p",["Element 1.0.0 released."])])}]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[s._m(0)]),"\n Changelog\n "]),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},["Github Releases"])}]}},function(s,t,a){var n,e;a(44),n=a(46);var l=a(50);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(47),l=n(e);t.default={components:{ChangeLog:l.default},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,t=s.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var n=t[1].textContent.trim(),e='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+n+'" target="_blank">'+n+"</a></h3>",l=t.length,i=2;i<l;i++){var r=t[i];a=t[i].querySelector("a"),a&&a.remove(),"H3"!==r.tagName?e+=t[i].outerHTML:(n=t[i].textContent.trim(),e+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+n+'" target="_blank">'+n+"</a></h3>")}e=e.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>'),this.$refs.timeline.innerHTML=e+"</li>",s.$el.remove()}}},function(s,t,a){s.exports=a(48)},function(s,t,a){var n,e,l=a(49);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:"geng-xin-ri-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#geng-xin-ri-zhi","aria-hidden":"true"}},["¶"])," 更新日志"]),t("h3",{attrs:{id:"1-0-9"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-9","aria-hidden":"true"}},["¶"])," 1.0.9"]),t("p",[t("em",["2016-12-27"])]),t("ul",[t("li",["修复 DatePicker 不能正确触发 input 事件的问题，现在只有当日期改变时才触发，#1834"]),t("li",["修复 Tree 在 Firefox 下会提示 event is undefined 的问题，#1945"]),t("li",["新增 DatePicker 的 ",t("code",["change"])," 事件，返回和输入框一致的格式化后的值，#1841"]),t("li",["新增 Table 的 ",t("code",["header-align"])," 属性，#1424"]),t("li",["修复单选的 Table 在数据移除时，高亮状态仍然存在的问题，#1890"]),t("li",["修复可搜索的 Select 在选项较多时的卡顿问题，#1933"]),t("li",["修复多选的 Select 在禁用状态下仍然能够手动删除选中项的问题，#2001"]),t("li",["修复 Col ",t("code",["xs"])," 分辨率下样式无效的问题，#2011"]),t("li",["新增 Tab 组件的 ",t("code",["value"])," 属性并支持 ",t("code",["v-model"])," 用法，#2008"]),t("li",["修复 Input Number 在某些条件下 change 事件被触发多次的问题，#1999"]),t("li",["新增 DatePicker 的 ",t("code",["clearable"])," 属性，#1994"]),t("li",["修复 Form 异步验证时某些条件下总是验证通过的问题，#1936"])]),t("h3",{attrs:{id:"1-0-8"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-8","aria-hidden":"true"}},["¶"])," 1.0.8"]),t("p",[t("em",["2016-12-20"])]),t("ul",[t("li",["修复 Popup 在叠加使用时阻止事件冒泡，#1677"]),t("li",["修复 DatePicker 类型为 datetimerange 时无法选择时间的问题，#1758"]),t("li",["修复 Slider 的 ",t("code",["change"])," 事件不能正确触发的问题，#1809"]),t("li",["修复 Loading 的 spinner 在某些情况下转动时出现碎片的问题，#1786"]),t("li",["新增 Select 的 ",t("code",["loading-text"]),"、",t("code",["no-data-text"]),"、",t("code",["no-match-text"])," 属性和 ",t("code",["visible-change"])," 事件，#1849"]),t("li",["新增 DatePicker、Select 和 Tooltip 的 ",t("code",["popper-class"])," 属性，#1806"]),t("li",["新增 Tree 的 ",t("code",["expand-on-click-node"]),"、",t("code",["current-node-key"])," 属性和 ",t("code",["current-change"])," 事件，#1805 #1807"]),t("li",["新增 Table ",t("code",["row-click"])," 事件的第三个参数 ",t("code",["column"]),"，#1808"]),t("li",["修复 Checkbox 的在路由切换时因为 computed 属性被缓存导致的bug，#1860"]),t("li",["新增 TabPanel ",t("code",["label-content"])," 渲染钩子方法中增加 tab 实例的参数，#1857"]),t("li",["新增 NavMenu 组件增加无限级子菜单（vertical模式）的支持，#1851"]),t("li",["新增 Checkbox 现在支持不绑定 value 也可以正常使用，#1818"]),t("li",["新增 Progress 的 ",t("code",["onProgress"])," 钩子函数，#1782"]),t("li",["修复 Tab 组件 active bar 在动态 label 下没有更新的问题，#1761"]),t("li",["新增 Table 的 ",t("code",["filter-change"])," 事件和 TableColumn 的 ",t("code",["column-key"])," 属性，#1876"]),t("li",["新增 Dropdown ",t("code",["hide-on-click"])," 属性，#1879"])]),t("h3",{attrs:{id:"1-0-7"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-7","aria-hidden":"true"}},["¶"])," 1.0.7"]),t("p",[t("em",["2016-12-14"])]),t("ul",[t("li",["修复 DatePicker 在有值的情况下 hover 清空按钮时会错误地显示弹框"]),t("li",["修复 DatePicker 设置默认值为 null 会错误地显示时间值"]),t("li",["新增 Table 的 ",t("code",["row-contextmenu"])," 事件和 ",t("code",["max-height"])," 属性，#1663 #1674"]),t("li",["新增 MessageBox 的 ",t("code",["customClass"])," 属性，#1707"]),t("li",["新增 Message 和 Notification 的 ",t("code",["iconClass"])," 和 ",t("code",["customClass"])," 属性，#1671"]),t("li",["新增 Table 支持 empty slot，#1737"]),t("li",["改进 InputNumber change 事件增加 old value 的参数"])]),t("h3",{attrs:{id:"1-0-6"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-6","aria-hidden":"true"}},["¶"])," 1.0.6"]),t("p",[t("em",["2016-12-09"])]),t("ul",[t("li",["新增 Tabs 组件的 ",t("code",["disabled"])," 属性，#1620"]),t("li",["新增 DatePicker 的 input 支持 ",t("code",["size"]),"，#1440"]),t("li",["修复 DatePicker 为 ",t("code",["datetimerange"])," 类型并设置初始值时，面板未显示正确日期的问题，#1129"]),t("li",["修复 DatePicker 切换年份时显示异常的问题，#1607"]),t("li",["修复 DatePicker 点击 icon 未触发 clickoutside 的问题，#1604"]),t("li",["修复 TimePicker 点击清空按钮后再次点击不会更新初始值的问题，#1583"]),t("li",["修复 Select 远程搜索且 value 为对象类型时的显示问题，#1593"]),t("li",["修复 Select 为 ",t("code",["disabled"])," 时，",t("code",["clearable"])," 仍然可以工作的问题，#1619"]),t("li",["修复 自定义背景颜色的 Switch 在动态切换 ",t("code",["disabled"])," 时，背景颜色错误的问题，#1627"]),t("li",["修复 Table 的一些样式问题"])]),t("h3",{attrs:{id:"1-0-5"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-5","aria-hidden":"true"}},["¶"])," 1.0.5"]),t("p",[t("em",["2016-12-06"])]),t("ul",[t("li",["修复 Select 异步获取选项和绑定值时，输入框中显示 value 而不是 label 的问题，#1537"]),t("li",["修复 Select 的初始值为一个空对象时会报错的问题，#1533"]),t("li",["修复 Select 远程搜索有时不显示下拉框的问题，#1531"]),t("li",["修复 Slider 拖动释放后，滑块有几率产生一小段位移的问题，#1546"]),t("li",["修复 IE9 下 Steps 的样式问题，#1543"]),t("li",["新增 Upload 对所有文件类型生成 URL 的功能，#1530"]),t("li",["修复 TimeSelect 的样式，移除 flexbox, #1335"])]),t("h3",{attrs:{id:"1-0-4"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-4","aria-hidden":"true"}},["¶"])," 1.0.4"]),t("p",[t("em",["2016-12-02"])]),t("ul",[t("li",["新增 Input Number 的 ",t("code",["controls"])," 属性，#1473"]),t("li",["修复 Checkbox Group、Radio Group 在异步赋值时出现的问题，#1511 #1514"]),t("li",["增加 Notification 的 ",t("code",["offset"])," 属性，#1419"]),t("li",["修复 Slider 在快速拖动时取值不准确的问题，#1458"]),t("li",["修复 Slider 在某些情况下绑定值为多位小数的问题，#1450"]),t("li",["修复 Select 在某些情况下绑定值和显示值不同步的问题"]),t("li",["新增 Select 的 ",t("code",["multiple-limit"])," 和 ",t("code",["allow-create"])," 属性"]),t("li",["修复 Tree 的叶子节点在点击展开后三角图标不消失的问题，#1438"]),t("li",["修复 Tree 有时在获取子级数据后视图不更新的问题，#1439"]),t("li",["修复 Table 在 windows 系统下的若干样式问题，#1464 #1507"]),t("li",["修复 Table 多级表头与固定列同时使用时，多级表头第一列 label 不显示的问题，#1451"]),t("li",["新增 Table 的 ",t("code",["row-dblclick"])," 事件，#1362"])]),t("h3",{
|
||
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"])," 方法，用于手动关闭实例"]),t("li",["新增 DatePicker 清除功能，#759"]),t("li",["修复 Form 重置日期报错，#937"]),t("li",["修复 Tab 设置active-name不是首个tab时的样式问题，#1034"]),t("li",["修复 Table 的 inline-template 在 vue-loader 9.9.0 渲染报错"]),t("li",["新增 Step 支持内容居中对齐，#994"]),t("li",["修复 Upload 单独引入时提示 Progress 组件不存在，#1013"]),t("li",["Layout 支持响应式布局"]),t("li",["新增 Dialog ",t("code",["show-close"])," 属性"]),t("li",["修复 和 ",t("code",["vue-i18n"])," 一起使用时，未初始化 i18n 会报错，#973"]),t("li",["修复 DatePicker 设置初始值后界面未更新 #1050"]),t("li",["修复 DatePicker 月份选择器直接切换年份并未更新年份数据 #1070"]),t("li",["新增 $loading 服务，用以调用 Loading"]),t("li",["新增 Popover 可手动控制显示隐藏，将 trigger 设置为 ",t("code",["manual"])]),t("li",["新增 Tree 的 ",t("code",["nodeKey"]),"、",t("code",["emptyText"]),"、",t("code",["checkStrictly"]),"、",t("code",["defaultExpandAll"]),"、",t("code",["autoExpandParent"]),"、",t("code",["defaultCheckedKeys"]),"、",t("code",["defaultExpandedKeys"])," 属性，",t("code",["setCheckedNodes"])," 方法。"])]),t("h3",{attrs:{id:"1-0-0"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0","aria-hidden":"true"}},["¶"])," 1.0.0"]),t("p",[t("em",["2016-11-9"])]),t("ul",[t("li",["修复 TimePicker 选择范围时结束时间小于开始时间会重置开始时间, #894"]),t("li",["修复结合 ",t("code",["vue-i18n"])," 使用时会提示不能覆盖 ",t("code",["$t"])," 方法的问题"]),t("li",["新增 Loading 自定义加载文案的功能，并优化了视觉表现"]),t("li",["修复 Input blur 事件的参数不是 event 对象的问题"]),t("li",[t("code",["window.ELEMENT.locale.use"])," 改成 ",t("code",["window.ELEMENT.locale"])])]),t("h3",{attrs:{id:"1-0-0-rc-9"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-9","aria-hidden":"true"}},["¶"])," 1.0.0-rc.9"]),t("p",[t("em",["2016-11-07"])]),t("ul",[t("li",["新增 MessageBox 确定按钮自动获取焦点, #721"]),t("li",["修复 Popover focus 失效, #734"]),t("li",["修复 Clickoutside 报错, #729"]),t("li",["修复 DatePicker 选择日期范围时当选中同一天再调整时间会出错"]),t("li",["更新 TimePicker 滚动条在 IE10+ 下隐藏"]),t("li",["新增 Dropdown 的 command api #432"]),t("li",["修复 Slider 在 Form 中的显示问题"]),t("li",["修复 Upload 在 onSuccess、onError 钩子无法拿到服务端返回信息的问题"]),t("li",["改善 tabs 现在支持动态更新"]),t("li",["Table 新增 highlightCurrentRow 属性、新增 current-change 事件"]),t("li",["TableColumn 的 showTooltipWhenOverflow 更名为 showOverflowTooltip（两个属性均可用）"]),t("li",["TableColumn 新增属性 render-header"]),t("li",["Pagination 新增属性 pageCount"]),t("li",["DatePicker 修复重置 value 后默认选中日期没有重置, #878"])]),t("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin","aria-hidden":"true"}},["¶"])," 非兼容性更新"]),t("ul",[t("li",["Upload on-error 钩子函数参数变更为 function(err, response, file), on-success 钩子函数参数变更为 function(response, file, fileList)"])]),t("h3",{attrs:{id:"1-0-0-rc-8"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-8","aria-hidden":"true"}},["¶"])," 1.0.0-rc.8"]),t("p",[t("em",["2016-10-28"])]),t("ul",[t("li",["修复 Form reset method 对日期控件不起效的问题"]),t("li",["修复 Dialog/Message Box/Tooltip/Popover/... 等若干组件的样式错误"]),t("li",["修复 Message Box 的 prompt 在打开时会携带之前的验证状态的问题"]),t("li",["修复 Autocomplete 的弹出框不会消失 #439"]),t("li",["新增 Input 图标的点击事件 #444"]),t("li",["修复 Loading 关闭后有几率滚动失效的问题"]),t("li",["修复 远程搜索的 Select 不能正确渲染默认初始值的问题"]),t("li",["修复 Switch 的 width 属性无效的问题"]),t("li",["Table 增加 rowClassName 属性"]),t("li",["TableColumn 增加 fixed 属性，可选值：true, false, left, right"]),t("li",["TableColumn 增加属性：filters、filterMultiple、filterMethod、filteredValue"]),t("li",['TableColumn[type="selection"] 增加 selectable 属性']),t("li",["修复 Input textarea 在动态赋值时 autosize 没有触发的问题"]),t("li",["修复 Input Number min max 属性设置后点击加减出现的崩溃的bug"]),t("li",["优化 TimePicker/DatePicker 输入日期行为"]),t("li",["修复 DatePicker 输入禁用状态的日期却生效的问题 #484"]),t("li",["新增 Slider 的 disabled 属性"]),t("li",["新增 Menu 的 menu-trigger 属性"]),t("li",["新增 i18n 的支持"])]),t("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-2","aria-hidden":"true"}},["¶"])," 非兼容性更新"]),t("ul",[t("li",["Tabs 组件的 click 和 remove 事件回调参数从 name 改为事件对应的 tab 组件实例"]),t("li",["全屏 Loading 现在默认不再锁定屏幕滚动。如果需要的话，可添加 ",t("code",["lock"])," 修饰符"]),t("li",["Table 删除属性 fixedColumnCount、customCriteria、customBackgroundColors、selectionMode"]),t("li",["Table 的 selectionchange、cellmouseenter、cellmouseleave、cellclick 事件更名为 selection-change、cell-mouse-enter、cell-mouse-leave、cell-click。"]),t("li",["Pagination 的 currentchange、sizechange 事件更名为 current-change、size-change"])]),t("h3",{attrs:{id:"1-0-0-rc-7"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-7","aria-hidden":"true"}},["¶"])," 1.0.0-rc.7"]),t("p",[t("em",["2016-10-13"])]),t("ul",[t("li",["Upload 新增 Data 属性支持额外数据的传输"]),t("li",["DatePicker 修复 ",t("code",["$t"])," 报错"]),t("li",["Popper 重构 vue-popper"]),t("li",["Pagination 修复输入后再点击切换，输入框的值不更新"]),t("li",["Step: 修复自定义 icon 的样式"]),t("li",["修复 Tree 组件 checkbox 点击失效的问题"]),t("li",["Breadcrumb 增加路由跳转的功能"]),t("li",["修复 可清空的 Select 中清空按钮的不恰当动画"]),t("li",["DatePicker 修复使用 Tab 键切换时弹出框未隐藏"])]),t("h3",{attrs:{id:"1-0-0-rc-6"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-6","aria-hidden":"true"}},["¶"])," 1.0.0-rc.6"]),t("p",[t("em",["2016-10-11"])]),t("ul",[t("li",["修复 Tabs 切换后 Tab-panel 被销毁的问题"]),t("li",["修复 TimePicker 错误的隐藏面板"]),t("li",["修复 Table Cell 的样式, #204"]),t("li",["修复 Menu default-active 属性不能为空的问题, #200"]),t("li",["修复 Menu unique-opened 开启后无法展开子菜单的问题, #200"]),t("li",["为 Notification 和 Message 的不同 type 添加独立的调用方法"]),t("li",["为 Message Box 和 Dialog 添加 lockScroll 属性，用于定义是否在弹框出现时将 body 滚动锁定"]),t("li",["新增 Input textarea 类型的 rows, autosize 属性"]),t("li",["为 Tree 添加 getCheckedNodes 方法和 node-click、check-change 回调"]),t("li",["新增 DatePicker 禁用日期功能 #253"]),t("li",["修复 多选可搜索的 Select 下拉选项自动展开的问题"]),t("li",["为 Dialog 添加 top 属性"]),t("li",["修复 Menu 组件垂直模式下开启 router 属性会立刻跳转的问题 #295"]),t("li",["Checkbox change 事件现在只能被人为的交互操作所触发"]),t("li",["新增 Checkbox checked 属性"]),t("li",["修复 Select 远程搜索时使用键盘选择选项无法更新 v-model 的问题"])]),t("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-3","aria-hidden":"true"}},["¶"])," 非兼容性更新"]),t("ul",[t("li",["Dropdown 组件重构，现在可以以更加的灵活方便的形式来自定义触发下拉的元素，以及可以定义下菜单的样式"])]),t("h3",{attrs:{id:"1-0-0-rc-5"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-5","aria-hidden":"true"}},["¶"])," 1.0.0-rc.5"]),t("p",[t("em",["2016-09-30"])]),t("ul",[t("li",["修复 Table 头部不同步的问题"]),t("li",["修复 Menu 组件 default-active 绑定动态值无法更新的问题"]),t("li",["新增特性 Menu 组件中若选中子菜单项现在会自动展开所有父级菜单"]),t("li",["修复 vue-popper 引入 popper 路径错误"]),t("li",["修复 DatePicker 初始值是合法时间类型但无法设置成功的问题"]),t("li",["修复 Pagination 的图标没有正确切换样式, #163"]),t("li",["修复 Row 组件 align 属性不生效的问题"]),t("li",["修复 Tabs 关闭标签页时对应 Tab-panel 没有移除的问题"]),t("li",["新增 Menu 组件中 MenuItem 的 route 属性"])]),t("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-4"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-4","aria-hidden":"true"}},["¶"])," 非兼容性更新"]),t("ul",[t("li",["Menu 组件的 ",t("code",["unique-opend"])," 属性修正为 ",t("code",["unique-opened"])])]),t("h3",{attrs:{id:"1-0-0-rc-4"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-4","aria-hidden":"true"}},["¶"])," 1.0.0-rc.4"]),t("p",[t("em",["2016-09-21"])]),t("ul",[t("li",["修复 Select 多选时选项变为空数组后 placeholder 不出现的问题"]),t("li",["修复 Time Picker 时间选择可滚动"]),t("li",["修复 Tooltip 有时会错位的问题"]),t("li",["修复 丢失的组件 css 文件"]),t("li",["修复 Table 在 Safari 下边框没对齐"]),t("li",["修复 TimePicker 图标样式被默认图标样式覆盖"]),t("li",["修复 在 mounted 钩子函数中改变 Select 绑定值不生效的问题"]),t("li",["修复 在多个依次出现的 Dialog 或 Message Box 全部关闭后页面有几率不可滚动的问题"]),t("li",["修复 Table 初次渲染时宽度重新计算 #78"]),t("li",["新增 时间、日期选择器增加 align 属性，可设置对齐方式"]),t("li",["新增 TableColumn 的 align 属性"]),t("li",["新增 autocomplete 的 select 事件"])]),t("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-5"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-5","aria-hidden":"true"}},["¶"])," 非兼容性更新"]),t("ul",[t("li",["Select 组件样式的 ",t("code",["display"])," 属性默认值修改为 ",t("code",["block"])])]),t("h3",{attrs:{id:"1-0-0-rc-3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-3","aria-hidden":"true"}},["¶"])," 1.0.0-rc.3"]),t("p",[t("em",["2016-09-09"])]),t("ul",[t("li",["修复 Slider 存在输入框时，输入框与 Slider 的值不同步的问题"]),t("li",["修复 Steps 样式"]),t("li",["修复 无法安装的问题"])]),t("h3",{attrs:{id:"1-0-0-rc-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-2","aria-hidden":"true"}},["¶"])," 1.0.0-rc.2"]),t("p",[t("em",["2016-09-09"])]),t("ul",[t("li",["修复 Upload 上传的问题，并增加上传成功和失败的钩子函数"]),t("li",["Button 组件增加 ",t("code",["nativeType"])," 属性，用于组件内 ",t("code",["<button>"])," 标签的原生 ",t("code",["type"])," 属性，默认值为 ",t("code",["button"])]),t("li",["修复 Table 自定义模板中渲染静态数据错误"]),t("li",["修复 Table 中被固定列的高度不与其他列的高度协调的问题"]),t("li",["修复 Time Picker 的 ",t("code",["picker-options"])," 属性"]),t("li",["修复一些组件图标丢失的问题"]),t("li",["修复 远程搜索的 Select 在 Form 中的显示问题"]),t("li",["修复 Input Number 输入小数和非数字值时的问题"]),t("li",["修复 Select 选中 value 为 0 的值时绑定值不更新的问题"]),t("li",["修复 Tree 取消选择某节点后，其同级节点均被取消的问题"]),t("li",["修复 Upload 的 headers 属性设置无效"]),t("li",["修复 Pagination 包含 sizes 子组件时 page-size 无效的问题"]),t("li",["优化 增加打包成 commonjs 且不压缩的文件，默认引入 commonjs"])]),t("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-6"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-6","aria-hidden":"true"}},["¶"])," 非兼容性更新"]),t("ul",[t("li",["Menu 组件 ",t("code",["mode"])," 属性默认值修改为 ",t("code",["vertical"])]),t("li",["Progress 组件升级，增加环形进度条的类型，以及增加了诸多属性，详细请查阅文档"]),t("li",["Popover 现在可以通过 slot 指定 reference"])]),t("h3",{attrs:{id:"1-0-0-rc-1"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-1","aria-hidden":"true"}},["¶"])," 1.0.0-rc.1"]),t("p",[t("em",["2016-08-30"])]),t("p",["Element 1.0.0-rc.1 发布"])])}]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[s._m(0)]),"\n 更新日志\n "]),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},["Github Releases"])}]}},function(s,t,a){function n(s){return a(e(s))}function e(s){return l[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var l={"./en-US/alert.md":52,"./en-US/badge.md":56,"./en-US/breadcrumb.md":61,"./en-US/button.md":64,"./en-US/card.md":69,"./en-US/checkbox.md":77,"./en-US/color.md":81,"./en-US/custom-theme.md":84,"./en-US/date-picker.md":87,"./en-US/datetime-picker.md":91,"./en-US/dialog.md":95,"./en-US/dropdown.md":99,"./en-US/form.md":103,"./en-US/home.md":109,"./en-US/i18n.md":114,"./en-US/icon.md":117,"./en-US/input-number.md":122,"./en-US/input.md":126,"./en-US/installation.md":132,"./en-US/layout.md":135,"./en-US/loading.md":138,"./en-US/menu.md":142,"./en-US/message-box.md":146,"./en-US/message.md":150,"./en-US/notification.md":154,"./en-US/pagination.md":158,"./en-US/popover.md":162,"./en-US/progress.md":166,"./en-US/quickstart.md":169,"./en-US/radio.md":172,"./en-US/rate.md":176,"./en-US/select.md":180,"./en-US/slider.md":184,"./en-US/steps.md":188,"./en-US/switch.md":192,"./en-US/table.md":196,"./en-US/tabs.md":200,"./en-US/tag.md":204,"./en-US/time-picker.md":210,"./en-US/tooltip.md":214,"./en-US/tree.md":220,"./en-US/typography.md":224,"./en-US/upload.md":227,"./zh-CN/alert.md":231,"./zh-CN/badge.md":237,"./zh-CN/breadcrumb.md":244,"./zh-CN/button.md":247,"./zh-CN/card.md":253,"./zh-CN/checkbox.md":259,"./zh-CN/color.md":265,"./zh-CN/custom-theme.md":270,"./zh-CN/date-picker.md":273,"./zh-CN/datetime-picker.md":279,"./zh-CN/dialog.md":285,"./zh-CN/dropdown.md":291,"./zh-CN/form.md":297,"./zh-CN/home.md":303,"./zh-CN/i18n.md":307,"./zh-CN/icon.md":312,"./zh-CN/input-number.md":318,"./zh-CN/input.md":324,"./zh-CN/installation.md":330,"./zh-CN/layout.md":333,"./zh-CN/loading.md":338,"./zh-CN/menu.md":344,"./zh-CN/message-box.md":350,"./zh-CN/message.md":354,"./zh-CN/notification.md":358,"./zh-CN/pagination.md":362,"./zh-CN/popover.md":368,"./zh-CN/progress.md":374,"./zh-CN/quickstart.md":379,"./zh-CN/radio.md":382,"./zh-CN/rate.md":386,"./zh-CN/select.md":392,"./zh-CN/slider.md":398,"./zh-CN/steps.md":404,"./zh-CN/switch.md":408,"./zh-CN/table.md":414,"./zh-CN/tabs.md":420,"./zh-CN/tag.md":424,"./zh-CN/time-picker.md":430,"./zh-CN/tooltip.md":436,"./zh-CN/tree.md":442,"./zh-CN/typography.md":448,"./zh-CN/upload.md":453};n.keys=function(){return Object.keys(l)},n.resolve=e,s.exports=n,n.id=51},function(s,t,a){s.exports=a(53)},function(s,t,a){var n,e;n=a(54);var l=a(55);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={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="success alert" type="success">\n </el-alert>\n <el-alert title="info alert" type="info">\n </el-alert>\n <el-alert title="warning alert" type="warning">\n </el-alert>\n <el-alert title="error alert" type="error">\n </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-alert",{attrs:{title:"success alert",type:"success"}}),t("el-alert",{attrs:{title:"info alert",type:"info"}}),t("el-alert",{attrs:{title:"warning alert",type:"warning"}}),t("el-alert",{attrs:{title:"error alert",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="unclosable alert" type="success" :closable="false">\n </el-alert>\n <el-alert title="customized close-text" type="info" close-text="Gotcha">\n </el-alert>\n <el-alert title="alert with callback" 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"},[[t("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),t("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),t("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:s.hello}})]]),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-alert title="success alert" type="success" show-icon>\n </el-alert>\n <el-alert title="info alert" type="info" show-icon>\n </el-alert>\n <el-alert title="warning alert" type="warning" show-icon>\n </el-alert>\n <el-alert title="error alert" type="error" show-icon>\n </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),t("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),t("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),t("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]]),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:'<template>\n <el-alert title="with description" type="success" description="This is a description.">\n </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]]),s._m(16),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(17)])]),s._m(18),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-alert title="success alert" type="success" description="more text description" show-icon>\n </el-alert>\n <el-alert title="info alert" type="info" description="more text description" show-icon>\n </el-alert>\n <el-alert title="warning alert" type="warning" description="more text description" show-icon>\n </el-alert>\n <el-alert title="error alert" type="error" description="more text description" show-icon>\n </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),t("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),t("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),t("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]]),s._m(19),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(20)])]),s._m(21),s._m(22),s._m(23),s._m(24)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},["¶"])," Alert"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Displays important alert messages."])},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",["Alert components are non-overlay elements in the page that does not disappear automatically."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Alert provides 4 types of themes defined by ",t("code",["type"]),", whose default value is ",t("code",["info"]),"."])},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-alert"]),"\n ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"success alert"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),">"]),"\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"},['"info alert"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"info"']),">"]),"\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-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-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:"customizable-close-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizable-close-button","aria-hidden":"true"}},["¶"])," Customizable close button"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Customize the close button as texts or other symbols."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. ",t("code",["closable"])," attribute decides if the component can be closed or not. It accepts ",t("code",["boolean"]),", and the default is ",t("code",["true"]),". You can set ",t("code",["close-text"])," attribute to replace the default cross symbol as the close button. Be careful that ",t("code",["close-text"])," must be a string. ",t("code",["close"])," event fires when the component is closed."])},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-alert"]),"\n ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"unclosable alert"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),"\n ",t("span",{staticClass:"hljs-attr"},[":closable"]),"=",t("span",{staticClass:"hljs-string"},['"false"']),">"]),"\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"},['"customized close-text"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"info"']),"\n ",t("span",{staticClass:"hljs-attr"},["close-text"]),"=",t("span",{staticClass:"hljs-string"},['"Gotcha"']),">"]),"\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"},['"alert with callback"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"warning"']),"\n ",t("span",{staticClass:"hljs-attr"},["@close"]),"=",t("span",{staticClass:"hljs-string"},['"hello"']),">"]),"\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\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 hello() {\n alert(",t("span",{staticClass:"hljs-string"},["'Hello World!'"]),");\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-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-icon","aria-hidden":"true"}},["¶"])," With icon"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Displaying an icon improves readability."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Setting the ",t("code",["show-icon"])," attribute displays an icon that corresponds with the current Alert type."])},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-alert"]),"\n ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"success alert"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),"\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"},['"info alert"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"info"']),"\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"},["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"},["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:"with-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-description","aria-hidden":"true"}},["¶"])," With description"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Description includes a message with more detailed information."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Besides the required ",t("code",["title"])," attribute, you can add a ",t("code",["description"])," attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically."])},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-alert"]),"\n ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"with description"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),"\n ",t("span",{staticClass:"hljs-attr"},["description"]),"=",t("span",{staticClass:"hljs-string"},['"This is a description."']),">"]),"\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:"with-icon-and-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-icon-and-description","aria-hidden":"true"}},["¶"])," With icon and description"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["At last, this is an example with both icon and description."])},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-alert"]),"\n ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"success alert"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),"\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"},['"info alert"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"
|
||
},['"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" class="item">\n <el-button size="small">replies</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n <span class="el-dropdown-link">\n Click Me<i class="el-icon-caret-bottom el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item class="clearfix">\n comments\n <el-badge class="mark" :value="12">\n </el-badge></el-dropdown-item>\n <el-dropdown-item class="clearfix">\n replies\n <el-badge class="mark" :value="3">\n </el-badge></el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[t("div",{slot:"source",staticClass:"source"},[t("el-badge",{staticClass:"item",domProps:{value:12}},[t("el-button",{attrs:{size:"small"}},["comments"])]),t("el-badge",{staticClass:"item",domProps:{value:3}},[t("el-button",{attrs:{size:"small"}},["replies"])]),t("el-dropdown",{attrs:{trigger:"click"}},[s._m(4),t("el-dropdown-menu",{slot:"dropdown"},[t("el-dropdown-item",{staticClass:"clearfix"},["\n comments\n ",t("el-badge",{staticClass:"mark",domProps:{value:12}})]),t("el-dropdown-item",{staticClass:"clearfix"},["\n replies\n ",t("el-badge",{staticClass:"mark",domProps:{value:3}})])])])]),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-badge :value="200" :max="99" class="item">\n <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n <el-button size="small">replies</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[t("div",{slot:"source",staticClass:"source"},[t("el-badge",{staticClass:"item",attrs:{max:99},domProps:{value:200}},[t("el-button",{attrs:{size:"small"}},["comments"])]),t("el-badge",{staticClass:"item",attrs:{max:10},domProps:{value:100}},[t("el-button",{attrs:{size:"small"}},["replies"])])]),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-badge value="new" class="item">\n <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n <el-button size="small">replies</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[t("div",{slot:"source",staticClass:"source"},[t("el-badge",{staticClass:"item",attrs:{value:"new"}},[t("el-button",{attrs:{size:"small"}},["comments"])]),t("el-badge",{staticClass:"item",attrs:{value:"hot"}},[t("el-button",{attrs:{size:"small"}},["replies"])])]),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-badge is-dot class="item">query</el-badge>\n<el-badge is-dot class="item">\n <el-button class="share-button" icon="share" type="primary"></el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[t("div",{slot:"source",staticClass:"source"},[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},["query"]),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"share",type:"primary"}})])]),s._m(17),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(18)])]),s._m(19),s._m(20)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"badge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},["¶"])," Badge"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["A number or status mark on buttons and icons."])},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",["Displays the amount of new messages."])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"el-dropdown-link"},["\n Click Me",t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})])},function(){var s=this,t=s.$createElement;s._c;return t("p",["The amount is defined with ",t("code",["value"])," which accepts ",t("code",["Number"])," or ",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"},['"12"'])," ",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"']),">"]),"comments",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"},['"3"'])," ",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"']),">"]),"replies",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"},["el-dropdown"])," ",t("span",{staticClass:"hljs-attr"},["trigger"]),"=",t("span",{staticClass:"hljs-string"},['"click"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-dropdown-link"']),">"]),"\n Click Me",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-caret-bottom el-icon--right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\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"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"clearfix"']),">"]),"\n comments\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-badge"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"mark"'])," ",t("span",{staticClass:"hljs-attr"},[":value"]),"=",t("span",{staticClass:"hljs-string"},['"12"'])," />"]),"\n ",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"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"clearfix"']),">"]),"\n replies\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-badge"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"mark"'])," ",t("span",{staticClass:"hljs-attr"},[":value"]),"=",t("span",{staticClass:"hljs-string"},['"3"'])," />"]),"\n ",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\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:"max-value"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#max-value","aria-hidden":"true"}},["¶"])," Max value"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can customize the max value."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["The max value is defined by property ",t("code",["max"])," which is a ",t("code",["Number"]),". Note that it only works when ",t("code",["value"])," is also a ",t("code",["Number"]),"."])},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"},['"200"'])," ",t("span",{staticClass:"hljs-attr"},[":max"]),"=",t("span",{staticClass:"hljs-string"},['"99"'])," ",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"']),">"]),"comments",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"},['"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"']),">"]),"replies",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:"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",["Displays text content other than numbers."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["When ",t("code",["value"])," is a ",t("code",["String"]),", it can display customized 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"},["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"']),">"]),"comments",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"']),">"]),"replies",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:"little-red-dot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#little-red-dot","aria-hidden":"true"}},["¶"])," Little red dot"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use a red dot to mark content that needs to be noticed."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use the attribute ",t("code",["is-dot"]),". It is a ",t("code",["Boolean"]),"."])},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"},["is-dot"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"item"']),">"]),"query",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"},["is-dot"])," ",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"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"share-button"'])," ",t("span",{staticClass:"hljs-attr"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"share"'])," ",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-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:"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",["value"]),t("td",["display value"]),t("td",["string, number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["max"]),t("td",["maximum value, shows '{max}+' when exceeded. Only works if ",t("code",["value"])," is a ",t("code",["Number"])]),t("td",["number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["is-dot"]),t("td",["if a little dot is displayed"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])}]}},function(s,t,a){s.exports=a(62)},function(s,t,a){var n,e,l=a(63);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,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-breadcrumb separator="/">\n <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n <el-breadcrumb-item>promotion management</el-breadcrumb-item>\n <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},["homepage"]),t("el-breadcrumb-item",["promotion management"]),t("el-breadcrumb-item",["promotion list"]),t("el-breadcrumb-item",["promotion detail"])])]),s._m(3),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(4)])]),s._m(5),s._m(6),s._m(7),s._m(8)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},["¶"])," Breadcrumb"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Displays the location of the current page, making it easier to browser back."])},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",["In ",t("code",["el-breadcrumb"]),", each ",t("code",["el-breadcrumb-item"])," is a tag that stands for every level starting from homepage. This component has a ",t("code",["String"])," attribute ",t("code",["separator"]),", and it determines the separator. Its default value is '/'."])},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-breadcrumb"])," ",t("span",{staticClass:"hljs-attr"},["separator"]),"=",t("span",{staticClass:"hljs-string"},['"/"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-breadcrumb-item"])," ",t("span",{staticClass:"hljs-attr"},[":to"]),"=",t("span",{staticClass:"hljs-string"},["\"{ path: '/' }\""]),">"]),"homepage",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-breadcrumb-item"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-breadcrumb-item"]),">"]),"promotion management",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-breadcrumb-item"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-breadcrumb-item"]),">"]),"promotion list",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-breadcrumb-item"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-breadcrumb-item"]),">"]),"promotion detail",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-breadcrumb-item"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-breadcrumb"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"breadcrumb-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},["¶"])," Breadcrumb 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",["separator"]),t("td",["separator character"]),t("td",["string"]),t("td",["—"]),t("td",["/"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"breadcrumb-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},["¶"])," Breadcrumb Item 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",["to"]),t("td",["target route of the link, same as ",t("code",["to"])," of ",t("code",["vue-router"])]),t("td",["string/object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["replace"]),t("td",["if ",t("code",["true"]),", the navigation will not leave a history record"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])}]}},function(s,t,a){s.exports=a(65)},function(s,t,a){var n,e;n=a(66);var l=a(68);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(67);t.default={data:function(){return{isLoading:!1,isLoading2:!1}},methods:{handleClick:function(s){console.log(s),alert("button clicked!")}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[2];(0,n.addClass)(t,"intro-block")})}}},,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-button>Default Button</el-button>\n<el-button type="primary">Primary Button</el-button>\n<el-button type="text">Text Button</el-button>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-button",["Default Button"]),t("el-button",{attrs:{type:"primary"}},["Primary Button"]),t("el-button",{attrs:{type:"text"}},["Text Button"])]),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-button :plain="true" :disabled="true">Default Button</el-button>\n<el-button type="primary" disabled>Primary Button</el-button>\n<el-button type="text" disabled>Text Button</el-button>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-button",{attrs:{plain:!0,disabled:!0}},["Default Button"]),t("el-button",{attrs:{type:"primary",disabled:""}},["Primary Button"]),t("el-button",{attrs:{type:"text",disabled:""}},["Text Button"])]),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:'<div class="block">\n <span class="demonstration">Default</span>\n <span class="wrapper">\n <el-button type="success">Success</el-button>\n <el-button type="warning">Warning</el-button>\n <el-button type="danger">Danger</el-button>\n <el-button type="info">Info</el-button>\n </span>\n</div>\n<div class="block">\n <span class="demonstration">Hover to display color</span>\n <span class="wrapper">\n <el-button :plain="true" type="success">Success</el-button>\n <el-button :plain="true" type="warning">Warning</el-button>\n <el-button :plain="true" type="danger">Danger</el-button>\n <el-button :plain="true" type="info">Info</el-button>\n </span>\n</div>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("div",{staticClass:"block"},[s._m(11),t("span",{staticClass:"wrapper"},[t("el-button",{attrs:{type:"success"}},["Success"]),t("el-button",{attrs:{type:"warning"}},["Warning"]),t("el-button",{attrs:{type:"danger"}},["Danger"]),t("el-button",{attrs:{type:"info"}},["Info"])])]),t("div",{staticClass:"block"},[s._m(12),t("span",{staticClass:"wrapper"},[t("el-button",{attrs:{plain:!0,type:"success"}},["Success"]),t("el-button",{attrs:{plain:!0,type:"warning"}},["Warning"]),t("el-button",{attrs:{plain:!0,type:"danger"}},["Danger"]),t("el-button",{attrs:{plain:!0,type:"info"}},["Info"])])])]),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-button type="primary" icon="edit"></el-button>\n<el-button type="primary" icon="share"></el-button>\n<el-button type="primary" icon="delete"></el-button>\n<el-button type="primary" icon="search">Search</el-button>\n<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-button",{attrs:{type:"primary",icon:"edit"}}),t("el-button",{attrs:{type:"primary",icon:"share"}}),t("el-button",{attrs:{type:"primary",icon:"delete"}}),t("el-button",{attrs:{type:"primary",icon:"search"}},["Search"]),t("el-button",{attrs:{type:"primary"}},["Upload",s._m(17)])]),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-button-group>\n <el-button type="primary" icon="arrow-left">Previous Page</el-button>\n <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>\n</el-button-group>\n<el-button-group>\n <el-button type="primary" icon="edit"></el-button>\n <el-button type="primary" icon="share"></el-button>\n <el-button type="primary" icon="delete"></el-button>\n</el-button-group>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"arrow-left"}},["Previous Page"]),t("el-button",{attrs:{type:"primary"}},["Next Page",s._m(22)])]),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"edit"}}),t("el-button",{attrs:{type:"primary",icon:"share"}}),t("el-button",{attrs:{type:"primary",icon:"delete"}})])]),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-button type="primary" :loading="true">Loading</el-button>\n',script:null,style:null}}},[t("div",{
|
||
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:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"'])," ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),"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:"color-indication"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-indication","aria-hidden":"true"}},["¶"])," Color Indication"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Different colors represent different meanings."])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Default"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Hover to display color"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use ",t("code",["plain"])," attribute to create a plain button, and it accepts a ",t("code",["Boolean"])," value. You can assign different ",t("code",["type"])," to a plain button as mentioned above. ",t("strong",["Note"]),": When using the plain button, you still can set ",t("code",["type"])," to ",t("code",["text"]),", but it makes no difference. A plain button will be styled like a ",t("code",["text button"])," by default."])},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"']),">"]),"Default",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"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"wrapper"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),">"]),"Success",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"},['"warning"']),">"]),"Warning",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"},['"danger"']),">"]),"Danger",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"},['"info"']),">"]),"Info",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"},["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"']),">"]),"Hover to display color",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"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"wrapper"']),">"]),"\n ",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"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),">"]),"Success",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"warning"']),">"]),"Warning",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"danger"']),">"]),"Danger",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"info"']),">"]),"Info",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"},["div"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"icon-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon-button","aria-hidden":"true"}},["¶"])," Icon Button"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use icons to add more meaning to Button. You can use icon alone to save some space, or with text together."])},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-upload el-icon-right"})},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use the ",t("code",["icon"])," attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an ",t("code",["<i>"])," tag. Custom icons can be used as well."])},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"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"edit"']),">"]),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"},['"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"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"search"']),">"]),"Search",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"']),">"]),"Upload",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 el-icon-right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),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:"button-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-group","aria-hidden":"true"}},["¶"])," Button Group"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Displayed as a button group, can be used to group a series of similar operations."])},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-arrow-right el-icon-right"})},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use tag ",t("code",["<el-button-group>"])," to group your buttons."])},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-group"]),">"]),"\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"},['"arrow-left"']),">"]),"Previous Page",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"']),">"]),"Next Page",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-arrow-right el-icon-right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),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",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button-group"]),">"]),"\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"},['"edit"']),">"]),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"},['"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:"loading-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-button","aria-hidden":"true"}},["¶"])," Loading Button"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Click the button to load data, then the button displays a loading state."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set ",t("code",["loading"])," attribute to ",t("code",["true"])," to display loading state."])},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"']),">"]),"Loading",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:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},["¶"])," Sizes"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Besides default size, Button component provides three additional sizes for you to choose among different scenarios."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use attribute ",t("code",["size"])," to set additional sizes with ",t("code",["large"]),", ",t("code",["small"])," or ",t("code",["mini"]),"."])},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"']),">"]),"Large 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"']),">"]),"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"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"small"']),">"]),"Small 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"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"mini"']),">"]),"Mini 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:"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",["size"]),t("td",["button size"]),t("td",["string"]),t("td",["large/small/mini"]),t("td",["—"])]),t("tr",[t("td",["type"]),t("td",["button type"]),t("td",["string"]),t("td",["primary/success/warning/danger/info/text"]),t("td",["—"])]),t("tr",[t("td",["plain"]),t("td",["determine whether it's a plain button"]),t("td",["Boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["loading"]),t("td",["determine whether it's loading"]),t("td",["Boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["disabled"]),t("td",["disable the button"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["icon"]),t("td",["button icon, accepts an icon name of Element icon component"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["autofocus"]),t("td",["same as native button's ",t("code",["autofocus"])]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["native-type"]),t("td",["same as native button's ",t("code",["type"])]),t("td",["string"]),t("td",["button/submit/reset"]),t("td",["button"])])])])}]}},function(s,t,a){s.exports=a(70)},function(s,t,a){var n,e;a(71),n=a(73);var l=a(75);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-4d33fc60",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(74),l=n(e);t.default={data:function(){return{currentDate:l.default.format(new Date,"yyyy-MM-dd HH:mm")}}}},,function(s,t,a){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-card class="box-card">\n <div slot="header" class="clearfix">\n <span style="line-height: 36px;">Card name</span>\n <el-button style="float: right;" type="primary">Operation button</el-button>\n </div>\n <div v-for="o in 4" class="text item">\n {{\'List item \' + o }}\n </div>\n</el-card>\n\n\n',script:null,style:'\n .text {\n font-size: 14px;\n }\n\n .item {\n padding: 18px 0;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n .clearfix:after {\n clear: both\n }\n\n .box-card {\n width: 480px;\n }\n'}}},[t("div",{slot:"source",staticClass:"source"},[t("el-card",{staticClass:"box-card"},[t("div",{slot:"header",staticClass:"clearfix"},[s._m(4),t("el-button",{attrs:{style:"float: right;",type:"primary"}},["Operation button"])]),s._l(4,function(a){return t("div",{staticClass:"text item"},["\n "+s._s("List item "+a)+"\n "])})])]),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-card class="box-card">\n <div v-for="o in 4" class="text item">\n {{\'List item \' + o }}\n </div>\n</el-card>\n\n\n',script:null,style:"\n .text {\n font-size: 14px;\n }\n\n .item {\n padding: 18px 0;\n }\n\n .box-card {\n width: 480px;\n }\n"}}},[t("div",{slot:"source",staticClass:"source"},[t("el-card",{staticClass:"box-card"},[s._l(4,function(a){return t("div",{staticClass:"text item"},["\n "+s._s("List item "+a)+"\n "])})])]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(9)])]),s._m(10),s._m(11),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row>\n <el-col :span="8" v-for="(o, index) in 2" :offset="index > 0 ? 2 : 0">\n <el-card :body-style="{ padding: \'0px\' }">\n <img src="~examples/assets/images/hamburger.png" class="image">\n <div style="padding: 14px;">\n <span>Yummy hamburger</span>\n <div class="bottom clearfix">\n <time class="time">{{ currentDate }}</time>\n <el-button type="text" class="button">Operating button</el-button>\n </div>\n </div>\n </el-card>\n </el-col>\n</el-row>\n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n currentDate: new Date()\n };\n }\n}\n",style:'\n .time {\n font-size: 13px;\n color: #999;\n }\n \n .bottom {\n margin-top: 13px;\n line-height: 12px;\n }\n\n .button {\n padding: 0;\n float: right;\n }\n\n .image {\n width: 100%;\n display: block;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n \n .clearfix:after {\n clear: both\n }\n'}}},[t("div",{slot:"source",staticClass:"source"},[t("el-row",[s._l(2,function(a,n){return t("el-col",{attrs:{span:8,offset:n>0?2:0}},[t("el-card",{attrs:{"body-style":{padding:"0px"}}},[s._m(12,!0),t("div",{attrs:{style:"padding: 14px;"}},[s._m(13,!0),t("div",{staticClass:"bottom clearfix"},[t("time",{staticClass:"time"},[s._s(s.currentDate)]),t("el-button",{staticClass:"button",attrs:{type:"text"}},["Operating button"])])])])])})])]),s._m(14),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(15)])]),s._m(16),s._m(17)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},["¶"])," Card"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Integrate information in a card container."])},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",["Card includes title, content and operations."])},function(){var s=this,t=s.$createElement;s._c;return t("span",{attrs:{style:"line-height: 36px;"}},["Card name"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Card is made up of ",t("code",["header"])," and ",t("code",["body"]),". ",t("code",["header"])," is optional, and its content distribution depends on a named slot."])},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-card"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"box-card"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"header"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"clearfix"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"line-height: 36px;"']),">"]),"Card name",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"float: right;"'])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"']),">"]),"Operation 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"])," ",t("span",{staticClass:"hljs-attr"},["v-for"]),"=",t("span",{staticClass:"hljs-string"},['"o in 4"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"text item"']),">"]),"\n ",t("span",["{{"]),"'List item ' + o ",t("span",["}}"]),"\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\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"css"},["\n ",t("span",{staticClass:"hljs-selector-class"},[".text"])," {\n ",t("span",{staticClass:"hljs-attribute"},["font-size"]),": ",t("span",{staticClass:"hljs-number"},["14px"]),";\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".item"])," {\n ",t("span",{staticClass:"hljs-attribute"},["padding"]),": ",t("span",{staticClass:"hljs-number"},["18px"])," ",t("span",{staticClass:"hljs-number"},["0"]),";\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".clearfix"]),t("span",{staticClass:"hljs-selector-pseudo"},[":before"]),",\n ",t("span",{staticClass:"hljs-selector-class"},[".clearfix"]),t("span",{staticClass:"hljs-selector-pseudo"},[":after"])," {\n ",t("span",{staticClass:"hljs-attribute"},["display"]),": table;\n ",t("span",{staticClass:"hljs-attribute"},["content"]),": ",t("span",{staticClass:"hljs-string"},['""']),";\n }\n ",t("span",{staticClass:"hljs-selector-class"},[".clearfix"]),t("span",{staticClass:"hljs-selector-pseudo"},[":after"])," {\n ",t("span",{staticClass:"hljs-attribute"},["clear"]),": both\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".box-card"])," {\n ",t("span",{staticClass:"hljs-attribute"},["width"]),": ",t("span",{staticClass:"hljs-number"},["480px"]),";\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:"simple-card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#simple-card","aria-hidden":"true"}},["¶"])," Simple card"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["The header part can be omitted."])},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-card"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"box-card"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["v-for"]),"=",t("span",{staticClass:"hljs-string"},['"o in 4"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"text item"']),">"]),"\n ",t("span",["{{"]),"'List item ' + o ",t("span",["}}"]),"\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\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"css"},["\n ",t("span",{staticClass:"hljs-selector-class"},[".text"])," {\n ",t("span",{staticClass:"hljs-attribute"},["font-size"]),": ",t("span",{staticClass:"hljs-number"},["14px"]),";\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".item"])," {\n ",t("span",{staticClass:"hljs-attribute"},["padding"]),": ",t("span",{staticClass:"hljs-number"},["18px"])," ",t("span",{staticClass:"hljs-number"},["0"]),";\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".box-card"])," {\n ",t("span",{staticClass:"hljs-attribute"},["width"]),": ",t("span",{staticClass:"hljs-number"},["480px"]),";\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:"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"]),": ",t("span",{staticClass:"hljs-number"},["13px"]),";\n ",t("span",{staticClass:"hljs-attribute"},["color"]),": ",t("span",{staticClass:"hljs-number"},["#999"]),";\n }\n \n ",t("span",{staticClass:"hljs-selector-class"},[".bottom"])," {\n ",t("span",{staticClass:"hljs-attribute"},["margin-top"]),": ",t("span",{staticClass:"hljs-number"},["13px"]),";\n ",t("span",{staticClass:"hljs-attribute"},["line-height"]),": ",t("span",{staticClass:"hljs-number"},["12px"]),";\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".button"])," {\n ",t("span",{staticClass:"hljs-attribute"},["padding"]),": ",t("span",{staticClass:"hljs-number"},["0"]),";\n ",t("span",{staticClass:"hljs-attribute"},["float"]),": right;\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".image"])," {\n ",t("span",{staticClass:"hljs-attribute"},["width"]),": ",t("span",{staticClass:"hljs-number"},["100%"]),";\n ",t("span",{staticClass:"hljs-attribute"},["display"]),": block;\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".clearfix"]),t("span",{staticClass:"hljs-selector-pseudo"},[":before"]),",\n ",t("span",{staticClass:"hljs-selector-class"},[".clearfix"]),t("span",{staticClass:"hljs-selector-pseudo"},[":after"])," {\n ",t("span",{staticClass:"hljs-attribute"},["display"]),": table;\n ",t("span",{staticClass:"hljs-attribute"},["content"]),": ",t("span",{staticClass:"hljs-string"},['""']),";\n }\n \n ",t("span",{staticClass:"hljs-selector-class"},[".clearfix"]),t("span",{staticClass:"hljs-selector-pseudo"},[":after"])," {\n ",t("span",{staticClass:"hljs-attribute"},["clear"]),": both\n }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["style"]),">"]),"\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"},["currentDate"]),": ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"()\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",["header"]),t("td",["Title of the card. Also accepts a DOM passed by ",t("code",["slot#header"])]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["body-style"]),t("td",["CSS style of body"]),t("td",["object"]),t("td",["—"]),t("td",["{ padding: '20px' }"])])])])}]}},function(s,t,a){s.exports=a.p+"static/hamburger.50e4091.png"},function(s,t,a){s.exports=a(78)},function(s,t,a){var n,e;n=a(79);var l=a(80);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{checkList:["selected and disabled","Option A"],checked:!0,checked1:!1,checked2:!0,isValid:"valid"}}}},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 <!-- `checked` should be true or false -->\n <el-checkbox v-model="checked">Option</el-checkbox>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n checked: true\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checked,expression:"checked"}],domProps:{value:s.checked},on:{input:function(t){s.checked=t}}},["Option"])]]),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-checkbox v-model="checked1" disabled>Option</el-checkbox>\n <el-checkbox v-model="checked2" disabled>Option</el-checkbox>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n checked1: false,\n checked2: true\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checked1,expression:"checked1"}],attrs:{disabled:""},domProps:{value:s.checked1},on:{input:function(t){s.checked1=t}}},["Option"]),t("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checked2,expression:"checked2"}],attrs:{disabled:""},domProps:{value:s.checked2},on:{input:function(t){s.checked2=t}}},["Option"])]]),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-checkbox-group v-model="checkList">\n <el-checkbox label="Option A"></el-checkbox>\n <el-checkbox label="Option B"></el-checkbox>\n <el-checkbox label="Option C"></el-checkbox>\n <el-checkbox label="disabled" disabled></el-checkbox>\n <el-checkbox label="selected and disabled" disabled></el-checkbox>\n </el-checkbox-group>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n checkList: ['selected and disabled','Option A']\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.checkList,expression:"checkList"}],domProps:{value:s.checkList},on:{input:function(t){s.checkList=t}}},[t("el-checkbox",{attrs:{label:"Option A"}}),t("el-checkbox",{attrs:{label:"Option B"}}),t("el-checkbox",{attrs:{label:"Option C"}}),t("el-checkbox",{attrs:{label:"disabled",disabled:""}}),t("el-checkbox",{attrs:{label:"selected and disabled",disabled:""}})])]]),s._m(12),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(13)])]),s._m(14),s._m(15),s._m(16),s._m(17)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},["¶"])," Checkbox"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["A group of options for multiple choices."])},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",["Checkbox can be used alone to switch between two states."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Define ",t("code",["v-model"]),"(bind variable) in ",t("code",["el-checkbox"]),". The default value is a ",t("code",["Boolean"])," for single ",t("code",["checkbox"]),", and it becomes ",t("code",["true"])," when selected."])},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-comment"},["<!-- `checked` should be true or false -->"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"checked"']),">"]),"Option",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-checkbox"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\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"},["checked"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),"\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:"disabled-state"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-state","aria-hidden":"true"}},["¶"])," Disabled State"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Disabled state for checkbox."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set 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"},["template"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"checked1"'])," ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),"Option",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"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"checked2"'])," ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),"Option",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-checkbox"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\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"},["checked1"]),": ",t("span",{staticClass:"hljs-literal"},["false"]),",\n ",t("span",{staticClass:"hljs-attr"},["checked2"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),"\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-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group","aria-hidden":"true"}},["¶"])," Checkbox group"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked."])},function(){var s=this,t=s.$createElement;s._c;return t("p",[t("code",["checkbox-group"])," element can manage multiple checkboxes in one group by using ",t("code",["v-model"])," which is bound as an ",t("code",["Array"]),". ",t("code",["label"])," can modify the description following the button of the checkbox. It is also the value of the checkbox. ",t("code",["label"])," corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa."])},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-checkbox-group"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"checkList"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Option A"']),">"]),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"},['"Option B"']),">"]),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"},['"Option C"']),">"]),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"},['"disabled"'])," ",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"},['"selected and disabled"'])," ",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"},["'selected and disabled'"]),",",t("span",{staticClass:"hljs-string"},["'Option 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",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Options"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["label"]),t("td",["value of the checkbox when used inside a ",t("code",["checkbox-group"])]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["true-label"]),t("td",["value of the checkbox if it's checked"]),t("td",["string, number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["false-label"]),t("td",["value of the checkbox if it's not checked"]),t("td",["string, number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["name"]),t("td",["native 'name' attribute"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["disabled"]),t("td",["if the checkbox is disabled"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["checked"]),t("td",["if the checkbox is checked"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["indeterminate"]),t("td",["same as ",t("code",["indeterminate"])," in native checkbox"]),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",["Event Name"]),t("th",["Description"]),t("th",["Parameters"])])]),t("tbody",[t("tr",[t("td",["change"]),t("td",["triggers when the binding value changes"]),t("td",["Event object"])])])])}]}},function(s,t,a){s.exports=a(82)},function(s,t,a){var n,e,l=a(83);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,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(5)]),t("el-col",{attrs:{span:8}},[s._m(6)])]),s._m(7),s._m(8),t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:6}},[s._m(9)]),t("el-col",{attrs:{span:6}},[s._m(10)]),t("el-col",{attrs:{span:6}},[s._m(11)]),t("el-col",{attrs:{span:6}},[s._m(12)])]),s._m(13),s._m(14),t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:6}},[s._m(15)]),t("el-col",{attrs:{span:6}},[s._m(16)]),t("el-col",{attrs:{span:6}},[s._m(17)]),t("el-col",{attrs:{span:6}},[s._m(18)])])])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},["¶"])," Color"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"main-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#main-color","aria-hidden":"true"}},["¶"])," Main Color"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["The main color of Element is bright and friendly blue."])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box bg-blue-light"},["Light Blue",t("div",{staticClass:"value"},["#58B7FF"])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box bg-blue"},["Blue",t("div",{staticClass:"value"},["#20A0FF"])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box bg-blue-dark"},["Dark Blue",t("div",{staticClass:"value"},["#1D8CE0"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"secondary-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#secondary-color","aria-hidden":"true"}},["¶"])," Secondary Color"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)"])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box bg-info"},["Blue",t("div",{staticClass:"value"},["#20A0FF"])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box bg-success"},["Success",t("div",{staticClass:"value"},["#13CE66"])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box bg-warning"},["Warning",t("div",{staticClass:"value"},["#F7BA2A"])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box bg-danger"},["Danger",t("div",{staticClass:"value"},["#FF4949"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"neutral-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#neutral-color","aria-hidden":"true"}},["¶"])," Neutral Color"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure."])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box-group"},[t("div",{staticClass:"demo-color-box bg-black"},["Black",t("div",{staticClass:"value"},["#1F2D3D"])]),t("div",{staticClass:"demo-color-box bg-black-light"},["Light Black",t("div",{staticClass:"value"},["#324057"])]),t("div",{staticClass:"demo-color-box bg-black-lighter"},["Extra Light Black",t("div",{staticClass:"value"},["#475669"])])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box-group"},[t("div",{staticClass:"demo-color-box bg-silver"},["Silver",t("div",{staticClass:"value"},["#8492A6"])]),t("div",{staticClass:"demo-color-box bg-silver-light"},["Light Silver",t("div",{staticClass:"value"},["#99A9BF"])]),t("div",{staticClass:"demo-color-box bg-silver-lighter"},["Extra Light Silver",t("div",{staticClass:"value"},["#C0CCDA"])])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box-group"},[t("div",{staticClass:"demo-color-box color-gray bg-gray"},["Gray",t("div",{staticClass:"value"},["#D3DCE6"])]),t("div",{staticClass:"demo-color-box color-gray bg-gray-light"},["Light Gray",t("div",{staticClass:"value"},["#E5E9F2"])]),t("div",{staticClass:"demo-color-box color-gray bg-gray-lighter"},["Extra Light Gray",t("div",{staticClass:"value"},["#EFF2F7"])])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box-group",attrs:{style:"border: 1px solid #e0e6ed;border-radius: 4px;"}},[t("div",{staticClass:"demo-color-box color-gray bg-white-dark"},["Dark White",t("div",{staticClass:"value"},["#F9FAFC"])]),t("div",{staticClass:"demo-color-box color-gray bg-white"},["White",t("div",{staticClass:"value"},["#FFFFFF"])])])}]}},function(s,t,a){s.exports=a(85)},function(s,t,a){var n,e,l=a(86);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:"custom-theme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme","aria-hidden":"true"}},["¶"])," Custom theme"]),t("p",["Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea, and this is where our theme customization tool kicks in."]),t("h3",{attrs:{id:"install-related-tool"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#install-related-tool","aria-hidden":"true"}},["¶"])," Install related tool"]),t("p",["First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them."]),t("pre",[t("code",{staticClass:"hljs language-shell"},["npm i element-theme -g\n"])]),t("p",["Then install the default theme from npm or GitHub."]),t("pre",[t("code",{staticClass:"hljs language-shell"},["# from npm\nnpm i element-theme-default -D\n\n# from GitHub\nnpm i https://github.com/ElementUI/theme-default -D\n"])]),t("h3",{attrs:{id:"initialize-variable-file"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#initialize-variable-file","aria-hidden":"true"}},["¶"])," Initialize variable file"]),t("p",["After successfully installing the above packages, a command named ",t("code",["et"])," is available in CLI (if the packages are installed locally, use ",t("code",["node_modules/.bin/et"])," instead). Run ",t("code",["-i"])," to initialize the variable file which outputs to ",t("code",["element-variables.css"])," by default. And you can specify its output directory as you will."]),t("pre",[t("code",{staticClass:"hljs language-shell"},["et -i [custom output file]\n\n> ✔ Generator variables file\n"])]),t("p",["In ",t("code",["element-variables.css"])," you can find all the variables we used to style Element and they are defined in CSS4 style:"]),t("pre",[t("code",{staticClass:"hljs language-css"},[t("span",{staticClass:"hljs-selector-pseudo"},[":root"])," {\n\n ",t("span",{staticClass:"hljs-comment"},["/* Colors\n -------------------------- */"]),"\n ",t("span",{staticClass:"hljs-attribute"},["--color-primary"]),": ",t("span",{staticClass:"hljs-number"},["#20a0ff"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-success"]),": ",t("span",{staticClass:"hljs-number"},["#13ce66"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-warning"]),": ",t("span",{staticClass:"hljs-number"},["#f7ba2a"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-danger"]),": ",t("span",{staticClass:"hljs-number"},["#ff4949"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-info"]),": ",t("span",{staticClass:"hljs-number"},["#50BFFF"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-blue"]),": ",t("span",{staticClass:"hljs-number"},["#2e90fe"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-blue-light"]),": ",t("span",{staticClass:"hljs-number"},["#5da9ff"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-blue-lighter"]),": ",t("span",{staticClass:"hljs-built_in"},["rgba"]),"(var(--color-blue), ",t("span",{staticClass:"hljs-number"},["0.12"]),");\n ",t("span",{staticClass:"hljs-attribute"},["--color-white"]),": ",t("span",{staticClass:"hljs-number"},["#fff"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-black"]),": ",t("span",{staticClass:"hljs-number"},["#000"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-grey"]),": ",t("span",{staticClass:"hljs-number"},["#C0CCDA"]),";\n"])]),t("h3",{attrs:{id:"modify-variables"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#modify-variables","aria-hidden":"true"}},["¶"])," Modify variables"]),t("p",["Just edit ",t("code",["element-variables.css"]),", e.g. changing the theme color to red:"]),t("pre",[t("code",{staticClass:"hljs language-CSS"},[t("span",{staticClass:"hljs-selector-tag"},["--color-primary"]),": ",t("span",{staticClass:"hljs-selector-tag"},["red"]),";\n"])]),t("h3",{attrs:{id:"build-theme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#build-theme","aria-hidden":"true"}},["¶"])," Build theme"]),t("p",["After saving the variable file, use ",t("code",["et"])," to build your theme. You can activate ",t("code",["watch"])," mode by adding a parameter ",t("code",["-w"]),". And if you customized the variable file's output, you need to add a parameter ",t("code",["-c"])," and variable file's name:"]),t("pre",[t("code",{staticClass:"hljs language-shell"},["et\n\n> ✔ build theme font\n> ✔ build element theme\n"])]),t("h3",{attrs:{id:"import-custom-theme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-custom-theme","aria-hidden":"true"}},["¶"])," Import custom theme"]),t("p",["By default the build theme file is placed inside ",t("code",["./theme"]),". You can specify its output directory with parameter ",t("code",["-o"]),". Importing your own theme is just like importing the default theme, only this time you import the file you just built:"]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},["import"])," ",t("span",{staticClass:"hljs-string"},["'../theme/index.css'"]),"\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"])," Vue ",t("span",{staticClass:"hljs-keyword"
|
||
},["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",rawName:"v-model",value:s.value1,expression:"value1"}],attrs:{type:"date",placeholder:"Pick a day"},domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})]),t("div",{staticClass:"block"},[s._m(5),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{type:"date",placeholder:"Pick a day","picker-options":s.pickerOptions1},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})])]]),s._m(6),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(7)])]),s._m(8),s._m(9),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n <span class="demonstration">Week</span>\n <el-date-picker v-model="value3" type="week" format="Week WW" placeholder="Pick a week">\n </el-date-picker>\n</div>\n<div class="block">\n <span class="demonstration">Month</span>\n <el-date-picker v-model="value4" type="month" placeholder="Pick a month">\n </el-date-picker>\n</div>\n<div class="block">\n <span class="demonstration">Year</span>\n <el-date-picker v-model="value5" type="year" placeholder="Pick a year">\n </el-date-picker>\n</div>\n\n\n',script:"\n export default {\n data() {\n return {\n value3: '',\n value4: '',\n value5: ''\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("div",{staticClass:"block"},[s._m(10),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})]),t("div",{staticClass:"block"},[s._m(11),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],attrs:{type:"month",placeholder:"Pick a month"},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}})]),t("div",{staticClass:"block"},[s._m(12),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value5,expression:"value5"}],attrs:{type:"year",placeholder:"Pick a year"},domProps:{value:s.value5},on:{input:function(t){s.value5=t}}})])]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(13)])]),s._m(14),s._m(15),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="value6" type="daterange" placeholder="Pick a range" style="width: 220px">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">With quick options</span>\n <el-date-picker v-model="value7" type="daterange" align="right" placeholder="Pick a range" :picker-options="pickerOptions2" style="width: 220px">\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 text: 'Last month',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last 3 months',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value6: '',\n value7: ''\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("div",{staticClass:"block"},[s._m(16),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value6,expression:"value6"}],attrs:{type:"daterange",placeholder:"Pick a range",style:"width: 220px"},domProps:{value:s.value6},on:{input:function(t){s.value6=t}}})]),t("div",{staticClass:"block"},[s._m(17),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value7,expression:"value7"}],attrs:{type:"daterange",align:"right",placeholder:"Pick a range","picker-options":s.pickerOptions2,style:"width: 220px"},domProps:{value:s.value7},on:{input:function(t){s.value7=t}}})])]]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(18)])]),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"datepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},["¶"])," DatePicker"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use Date Picker for date input."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"enter-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#enter-date","aria-hidden":"true"}},["¶"])," Enter Date"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Basic date picker measured by 'day'."])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Default"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Picker with quick options"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["The measurement is determined by the ",t("code",["type"])," attribute. You can enable quick options by creating a ",t("code",["picker-options"])," object with ",t("code",["shortcuts"])," property. The disabled date is set by ",t("code",["disabledDate"]),", which is a function."])},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"']),">"]),"Default",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"},['"value1"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"date"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Pick a day"']),">"]),"\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"']),">"]),"Picker with quick options",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"},['"value2"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"date"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Pick a day"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},['"pickerOptions1"']),">"]),"\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"},["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"},["pickerOptions1"]),": {\n ",t("span",{staticClass:"hljs-attr"},["shortcuts"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'Today'"]),",\n onClick(picker) {\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"());\n }\n }, {\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'Yesterday'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," date = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n date.setTime(date.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", date);\n }\n }, {\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'A week ago'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," date = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n date.setTime(date.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"])," * ",t("span",{staticClass:"hljs-number"},["7"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", date);\n }\n }]\n },\n ",t("span",{staticClass:"hljs-attr"},["value1"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["value2"]),": ",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:"other-measurements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#other-measurements","aria-hidden":"true"}},["¶"])," Other measurements"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can choose week, month or year by extending the standard date picker component."])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Week"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Month"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Year"])},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"']),">"]),"Week",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"},['"value3"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"week"']),"\n ",t("span",{staticClass:"hljs-attr"},["format"]),"=",t("span",{staticClass:"hljs-string"},['"Week WW"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Pick a week"']),">"]),"\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"']),">"]),"Month",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"},['"value4"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"month"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Pick a month"']),">"]),"\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"']),">"]),"Year",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"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"year"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Pick a year"']),">"]),"\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:"date-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-range","aria-hidden":"true"}},["¶"])," Date Range"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Picking a date range is supported."])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Default"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["With quick options"])},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"']),">"]),"Default",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"},['"Pick a range"']),"\n ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width: 220px"']),">"]),"\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"']),">"]),"With quick options",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"},['"value7"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"daterange"']),"\n ",t("span",{staticClass:"hljs-attr"},["align"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Pick a range"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},['"pickerOptions2"']),"\n ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width: 220px"']),">"]),"\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"},["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"},["pickerOptions2"]),": {\n ",t("span",{staticClass:"hljs-attr"},["shortcuts"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'Last week'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," end = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n ",t("span",{staticClass:"hljs-keyword"},["const"])," start = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n start.setTime(start.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"])," * ",t("span",{staticClass:"hljs-number"},["7"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", [start, end]);\n }\n }, {\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'Last month'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," end = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n ",t("span",{staticClass:"hljs-keyword"},["const"])," start = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n start.setTime(start.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"])," * ",t("span",{staticClass:"hljs-number"},["30"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", [start, end]);\n }\n }, {\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'Last 3 months'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," end = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n ",t("span",{staticClass:"hljs-keyword"},["const"])," start = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n start.setTime(start.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"])," * ",t("span",{staticClass:"hljs-number"},["90"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", [start, end]);\n }\n }]\n },\n ",t("span",{staticClass:"hljs-attr"},["value6"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["value7"]),": ",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",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["readonly"]),t("td",["whether DatePicker is read only"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["disabled"]),t("td",["whether DatePicker is disabled"]),t("td",["boolean"]),t("td",["-"]),t("td",["false"])]),t("tr",[t("td",["size"]),t("td",["size of Input"]),t("td",["string"]),t("td",["large/small/mini"]),t("td",["—"])]),t("tr",[t("td",["editable"]),t("td",["whether the input is editable"]),t("td",["boolean"]),t("td",["-"]),t("td",["true"])]),t("tr",[t("td",["clearable"]),t("td",["Whether to show clear button"]),t("td",["boolean"]),t("td",["-"]),t("td",["true"])]),t("tr",[t("td",["placeholder"]),t("td",["placeholder"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["type"]),t("td",["type of the picker"]),t("td",["string"]),t("td",["year/month/date/datetime/ week/datetimerange/daterange"]),t("td",["date"])]),t("tr",[t("td",["format"]),t("td",["format of the picker"]),t("td",["string"]),t("td",["year ",t("code",["yyyy"])," month ",t("code",["MM"])," day ",t("code",["dd"]),", hour ",t("code",["HH"]),", minute ",t("code",["mm"]),", second ",t("code",["ss"])]),t("td",["yyyy-MM-dd"])]),t("tr",[t("td",["align"]),t("td",["alignment"]),t("td",["left/center/right"]),t("td",["left"]),t("td")]),t("tr",[t("td",["popper-class"]),t("td",["custom class name for DatePicker's dropdown"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["picker-options"]),t("td",["additional options, check the table below"]),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",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["shortcuts"]),t("td",["a { text, onClick } object array to set shortcut options, check the table below"]),t("td",["object[]"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["disabledDate"]),t("td",["a function determining if a date is disabled with that date as its parameter. Should return a 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",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["text"]),t("td",["title of the shortcut"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["onClick"]),t("td",["callback function, triggers when the shortcut is clicked, with the ",t("code",["vm"])," as its parameter. You can change the picker value by emitting the ",t("code",["pick"])," event. Example: ",t("code",["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",[t("td",["change"]),t("td",["triggers when input value changes"]),t("td",["formatted value"])])])])}]}},function(s,t,a){s.exports=a(92)},function(s,t,a){var n,e;n=a(93);var l=a(94);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: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 text: 'Last month',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: 'Last 3 months',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value3: '',\n value4: ''\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("div",{staticClass:"block"},[s._m(8),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{type:"datetimerange",placeholder:"Select time range",style:"width:350px"},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})]),t("div",{staticClass:"block"},[s._m(9),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],attrs:{type:"datetimerange","picker-options":s.pickerOptions2,placeholder:"Select time range",align:"right",style:"width:350px"},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}})])]]),s._m(10),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(11)])]),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"datetimepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},["¶"])," DateTimePicker"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Select date and time in one picker."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"date-and-time"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time","aria-hidden":"true"}},["¶"])," Date and time"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Default"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["With shortcuts"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can select date and time in one picker at the same time by setting ",t("code",["type"])," to ",t("code",["datetime"]),". The way to use shortcuts is the same as Date Picker."])},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"']),">"]),"Default",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"},['"value1"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"datetime"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Select date and time"']),">"]),"\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"']),">"]),"With shortcuts",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"},['"value2"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"datetime"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Select date and time"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},['"pickerOptions1"']),">"]),"\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"},["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"},["pickerOptions1"]),": {\n ",t("span",{staticClass:"hljs-attr"},["shortcuts"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'Today'"]),",\n onClick(picker) {\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"());\n }\n }, {\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'Yesterday'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," date = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n date.setTime(date.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", date);\n }\n }, {\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'A week ago'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," date = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n date.setTime(date.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"])," * ",t("span",{staticClass:"hljs-number"},["7"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", date);\n }\n }]\n },\n ",t("span",{staticClass:"hljs-attr"},["value1"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["value2"]),": ",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:"date-and-time-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time-range","aria-hidden":"true"}},["¶"])," Date and time range"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Default"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["With shortcuts"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can select date and time range by setting ",t("code",["type"])," to ",t("code",["datetimerange"]),"."])},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"']),">"]),"Default",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"},['"value3"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"datetimerange"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Select time range"']),"\n ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width:350px"']),">"]),"\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"']),">"]),"With shortcuts",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"},['"value4"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"datetimerange"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},['"pickerOptions2"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Select time range"']),"\n ",t("span",{staticClass:"hljs-attr"},["align"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),"\n ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width:350px"']),">"]),"\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"},["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"},["pickerOptions2"]),": {\n ",t("span",{staticClass:"hljs-attr"},["shortcuts"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'Last week'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," end = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n ",t("span",{staticClass:"hljs-keyword"},["const"])," start = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n start.setTime(start.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"])," * ",t("span",{staticClass:"hljs-number"},["7"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", [start, end]);\n }\n }, {\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'Last month'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," end = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n ",t("span",{staticClass:"hljs-keyword"},["const"])," start = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n start.setTime(start.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"])," * ",t("span",{staticClass:"hljs-number"},["30"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", [start, end]);\n }\n }, {\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'Last 3 months'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," end = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n ",t("span",{staticClass:"hljs-keyword"},["const"])," start = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n start.setTime(start.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"])," * ",t("span",{staticClass:"hljs-number"},["90"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", [start, end]);\n }\n }]\n },\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 };\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",["readonly"]),t("td",["whether DatePicker is read only"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["disabled"]),t("td",["whether DatePicker is disabled"]),t("td",["boolean"]),t("td",["-"]),t("td",["false"])]),t("tr",[t("td",["editable"]),t("td",["whether the input is editable"]),t("td",["boolean"]),t("td",["-"]),t("td",["true"])]),t("tr",[t("td",["clearable"]),t("td",["Whether to show clear button"]),t("td",["boolean"]),t("td",["-"]),t("td",["true"])]),t("tr",[t("td",["size"]),t("td",["size of Input"]),t("td",["string"]),t("td",["large/small/mini"]),t("td",["—"])]),t("tr",[t("td",["placeholder"]),t("td",["placeholder"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["type"]),t("td",["type of the picker"]),t("td",["string"]),t("td",["year/month/date/datetime/ week/datetimerange/daterange"]),t("td",["date"])]),t("tr",[t("td",["format"]),t("td",["format of the picker"]),t("td",["string"]),t("td",["year ",t("code",["yyyy"])," month ",t("code",["MM"])," day ",t("code",["dd"]),", hour ",t("code",["HH"]),", minute ",t("code",["mm"]),", second ",t("code",["ss"])]),t("td",["yyyy-MM-dd"])]),t("tr",[t("td",["align"]),t("td",["alignment"]),t("td",["left/center/right"]),t("td",["left"]),t("td")]),t("tr",[t("td",["popper-class"]),t("td",["custom class name for DateTimePicker's dropdown"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["picker-options"]),t("td",["additional options, check the table below"]),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",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["shortcuts"]),t("td",["a { text, onClick } object array to set shortcut options, check the table below"]),t("td",["object[]"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["disabledDate"]),t("td",["a function determining if a date is disabled with that date as its parameter. Should return a 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",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["text"]),t("td",["title of the shortcut"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["onClick"]),t("td",["callback function, triggers when the shortcut is clicked, with the ",t("code",["vm"])," as its parameter. You can change the picker value by emitting the ",t("code",["pick"])," event. Example: ",t("code",["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",[t("td",["change"]),t("td",["triggers when input value changes"]),t("td",["formatted value"])])])])}]}},function(s,t,a){s.exports=a(96)},function(s,t,a){var n,e;n=a(97);var l=a(98);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{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"}],dialogVisible:!1,dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}},methods:{openDialog:function(){this.$refs.dialogBind.open()}}}},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-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>\n\n<el-dialog title="Tips" v-model="dialogVisible" size="tiny">\n <span>This is a message</span>\n <span slot="footer" class="dialog-footer">\n <el-button @click="dialogVisible = false">Cancel</el-button>\n <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>\n </span>\n</el-dialog>\n\n\n',script:"\n export default {\n data() {\n return {\n dialogVisible: false\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogVisible=!0}}},["click to open the Dialog"]),t("el-dialog",{directives:[{name:"model",rawName:"v-model",value:s.dialogVisible,expression:"dialogVisible"}],attrs:{title:"Tips",size:"tiny"},domProps:{value:s.dialogVisible},on:{input:function(t){s.dialogVisible=t}}},[s._m(4),t("span",{slot:"footer",staticClass:"dialog-footer"},[t("el-button",{on:{click:function(t){s.dialogVisible=!1}}},["Cancel"]),t("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},["Confirm"])])])]),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:'<!-- Table -->\n<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>\n\n<el-dialog title="Shipping address" v-model="dialogTableVisible">\n <el-table :data="gridData">\n <el-table-column property="date" label="Date" width="150"></el-table-column>\n <el-table-column property="name" label="Name" width="200"></el-table-column>\n <el-table-column property="address" label="Address"></el-table-column>\n </el-table>\n</el-dialog>\n\n<!-- Form -->\n<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>\n\n<el-dialog title="Shipping address" v-model="dialogFormVisible">\n <el-form :model="form">\n <el-form-item label="Promotion name" :label-width="formLabelWidth">\n <el-input v-model="form.name" auto-complete="off"></el-input>\n </el-form-item>\n <el-form-item label="Zones" :label-width="formLabelWidth">\n <el-select v-model="form.region" placeholder="Please select a zone">\n <el-option label="Zone No.1" value="shanghai"></el-option>\n <el-option label="Zone No.2" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n </el-form>\n <span slot="footer" class="dialog-footer">\n <el-button @click="dialogFormVisible = false">Cancel</el-button>\n <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>\n </span>\n</el-dialog>\n\n\n',script:"\n export default {\n data() {\n return {\n gridData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-03',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n dialogTableVisible: false,\n dialogFormVisible: false,\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n formLabelWidth: '120px'\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogTableVisible=!0}}},["open a Table nested Dialog"]),t("el-dialog",{directives:[{name:"model",rawName:"v-model",value:s.dialogTableVisible,expression:"dialogTableVisible"}],attrs:{title:"Shipping address"},domProps:{value:s.dialogTableVisible},on:{input:function(t){s.dialogTableVisible=t}}},[t("el-table",{attrs:{data:s.gridData}},[t("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),t("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),t("el-table-column",{attrs:{property:"address",label:"Address"}})])]),t("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogFormVisible=!0}}},["open a Form nested Dialog"]),t("el-dialog",{directives:[{name:"model",rawName:"v-model",value:s.dialogFormVisible,expression:"dialogFormVisible"}],attrs:{title:"Shipping address"},domProps:{value:s.dialogFormVisible},on:{input:function(t){s.dialogFormVisible=t}}},[t("el-form",{attrs:{model:s.form}},[t("el-form-item",{attrs:{label:"Promotion name","label-width":s.formLabelWidth}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.form.name,expression:"form.name"}],attrs:{"auto-complete":"off"},domProps:{value:s.form.name},on:{input:function(t){s.form.name=t}}})]),t("el-form-item",{attrs:{label:"Zones","label-width":s.formLabelWidth}},[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.form.region,expression:"form.region"}],attrs:{placeholder:"Please select a zone"},domProps:{value:s.form.region},on:{input:function(t){s.form.region=t}}},[t("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),t("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})])])]),t("span",{slot:"footer",staticClass:"dialog-footer"},[t("el-button",{on:{click:function(t){s.dialogFormVisible=!1}}},["Cancel"]),t("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogFormVisible=!1}}},["Confirm"])])])]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(9)])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},["¶"])," Dialog"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Informs users while preserving the current page state."])},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",["Dialog pops up a dialog box, and it's quite customizable."])},function(){var s=this,t=s.$createElement;s._c;return t("span",["This is a message"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set the ",t("code",["v-model"])," attribute with a ",t("code",["Boolean"]),", and Dialog shows when it is ",t("code",["true"]),". The Dialog has two parts: ",t("code",["body"])," and ",t("code",["footer"]),", and the latter requires a ",t("code",["slot"])," named ",t("code",["footer"]),". The optional ",t("code",["title"])," attribute (empty by default) is for defining a title. This example explicitly changes the value of ",t("code",["v-model"])," to toggle Dialog. In addition, we also provide ",t("code",["open"])," and ",t("code",["close"])," method, which you can call to open/close the Dialog."])},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"},['"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",{staticClass:"hljs-string"},['"Shipping address"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"dialogTableVisible"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table"])," ",t("span",{staticClass:"hljs-attr"},[":data"]),"=",t("span",{staticClass:"hljs-string"},['"gridData"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"])," ",t("span",{staticClass:"hljs-attr"},["property"]),"=",t("span",{staticClass:"hljs-string"},['"date"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Date"'])," ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"150"']),">"]),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"])," ",t("span",{staticClass:"hljs-attr"},["property"]),"=",t("span",{staticClass:"hljs-string"},['"name"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Name"'])," ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"200"']),">"]),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"])," ",t("span",{staticClass:"hljs-attr"},["property"]),"=",t("span",{staticClass:"hljs-string"},['"address"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Address"']),">"]),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"},["el-dialog"]),">"]),"\n\n",t("span",{staticClass:"hljs-comment"},["<!-- Form -->"]),"\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"},['"dialogFormVisible = true"'])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"']),">"]),"open a Form 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",{staticClass:"hljs-string"},['"Shipping address"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"dialogFormVisible"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form"])," ",t("span",{staticClass:"hljs-attr"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"form"']),">"]),"\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"},['"Promotion name"'])," ",t("span",{staticClass:"hljs-attr"},[":label-width"]),"=",t("span",{staticClass:"hljs-string"},['"formLabelWidth"']),">"]),"\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"},['"form.name"'])," ",t("span",{staticClass:"hljs-attr"},["auto-complete"]),"=",t("span",{staticClass:"hljs-string"},['"off"']),">"]),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"]),">"]),"\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"},['"Zones"'])," ",t("span",{staticClass:"hljs-attr"},[":label-width"]),"=",t("span",{staticClass:"hljs-string"},['"formLabelWidth"']),">"]),"\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"},['"form.region"'])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Please select a 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 No.1"'])," ",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("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Zone No.2"'])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"beijing"']),">"]),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"},["el-form-item"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-form"]),">"]),"\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"},['"dialogFormVisible = 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"},['"dialogFormVisible = 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"},["gridData"]),": [{\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"},["'John Smith'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No.1518, Jinshajiang Road, Putuo District'"]),"\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"},["'John Smith'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No.1518, Jinshajiang Road, Putuo District'"]),"\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"},["'John Smith'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No.1518, Jinshajiang Road, Putuo District'"]),"\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"},["'John Smith'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No.1518, Jinshajiang Road, Putuo District'"]),"\n }],\n ",t("span",{staticClass:"hljs-attr"},["dialogTableVisible"]),": ",t("span",{staticClass:"hljs-literal"},["false"]),",\n ",t("span",{staticClass:"hljs-attr"},["dialogFormVisible"]),": ",t("span",{staticClass:"hljs-literal"},["false"]),",\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 ",t("span",{staticClass:"hljs-attr"},["formLabelWidth"]),": ",t("span",{staticClass:"hljs-string"},["'120px'"]),"\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",["title"]),t("td",["title of Dialog"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["size"]),t("td",["size of Dialog"]),t("td",["string"]),t("td",["tiny/small/large/full"]),t("td",["small"])]),t("tr",[t("td",["top"]),t("td",["value for ",t("code",["top"])," of Dialog CSS, works when ",t("code",["size"])," is not ",t("code",["full"])]),t("td",["string"]),t("td",["—"]),t("td",["15%"])]),t("tr",[t("td",["modal"]),t("td",["whether a mask is displayed"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["lock-scroll"]),t("td",["whether scroll of body is disabled while Dialog is displayed"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["custom-class"]),t("td",["custom class names for Dialog"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["close-on-click-modal"]),t("td",["whether the Dialog can be closed by clicking the mask"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["close-on-press-escape"]),t("td",["whether the Dialog can be closed by pressing ESC"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["show-close"]),t("td",["whether to show a close button"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},["¶"])," Slot"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Name"]),t("th",["Description"])])]),t("tbody",[t("tr",[t("td",["—"]),t("td",["content of Dialog"])]),t("tr",[t("td",["footer"]),t("td",["content of the Dialog footer"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},["¶"])," Methods"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Each ",t("code",["el-dialog"])," instance has the following methods that can be used to open/close the instance without explicitly changing the value of ",t("code",["v-model"]),":"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Method"]),t("th",["Description"])])]),t("tbody",[t("tr",[t("td",["open"]),t("td",["open the current instance"])]),t("tr",[t("td",["close"]),t("td",["close the current instance"])])])])},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",["open"]),t("td",["triggers when the Dialog opens"]),t("td",["—"])]),t("tr",[t("td",["close"]),t("td",["triggers when the Dialog closes"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(100)},function(s,t,a){var n,e;n=a(101);var l=a(102);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={methods:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;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-dropdown>\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item disabled>Action 4</el-dropdown-item>\n <el-dropdown-item divided>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-dropdown",[s._m(4),t("el-dropdown-menu",{slot:"dropdown"},[t("el-dropdown-item",["Action 1"]),t("el-dropdown-item",["Action 2"]),t("el-dropdown-item",["Action 3"]),t("el-dropdown-item",{attrs:{disabled:""}},["Action 4"]),t("el-dropdown-item",{attrs:{divided:""}},["Action 5"])])])]),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-dropdown>\n <el-button type="primary">\n Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>\n </el-button>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n <el-dropdown-item>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n Dropdown List\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n <el-dropdown-item>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-dropdown",[t("el-button",{attrs:{type:"primary"}},["\n Dropdown List",s._m(9)]),t("el-dropdown-menu",{slot:"dropdown"},[t("el-dropdown-item",["Action 1"]),t("el-dropdown-item",["Action 2"]),t("el-dropdown-item",["Action 3"]),t("el-dropdown-item",["Action 4"]),t("el-dropdown-item",["Action 5"])])]),t("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},["\n Dropdown List\n ",t("el-dropdown-menu",{slot:"dropdown"},[t("el-dropdown-item",["Action 1"]),t("el-dropdown-item",["Action 2"]),t("el-dropdown-item",["Action 3"]),t("el-dropdown-item",["Action 4"]),t("el-dropdown-item",["Action 5"])])])]),s._m(10),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(11)])]),s._m(12),s._m(13),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="block-col-2">\n <el-col :span="12">\n <span class="demonstration">hover to trigger</span>\n <el-dropdown>\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n <el-dropdown-item>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n </el-dropdown>\n </el-col>\n <el-col :span="12">\n <span class="demonstration">click to trigger</span>\n <el-dropdown trigger="click">\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n <el-dropdown-item>Action 5</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",["Action 1"]),t("el-dropdown-item",["Action 2"]),t("el-dropdown-item",["Action 3"]),t("el-dropdown-item",["Action 4"]),t("el-dropdown-item",["Action 5"])])])]),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",["Action 1"]),t("el-dropdown-item",["Action 2"]),t("el-dropdown-item",["Action 3"]),t("el-dropdown-item",["Action 4"]),t("el-dropdown-item",["Action 5"])])])])])]),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 Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item disabled>Action 4</el-dropdown-item>\n <el-dropdown-item divided>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n',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",["Action 1"]),t("el-dropdown-item",["Action 2"]),t("el-dropdown-item",["Action 3"]),t("el-dropdown-item",{attrs:{disabled:""}},["Action 4"]),t("el-dropdown-item",{attrs:{divided:""}},["Action 5"])])])]),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 Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item command="a">Action 1</el-dropdown-item>\n <el-dropdown-item command="b">Action 2</el-dropdown-item>\n <el-dropdown-item command="c">Action 3</el-dropdown-item>\n <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>\n <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n',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),t("el-dropdown-menu",{slot:"dropdown"},[t("el-dropdown-item",{attrs:{command:"a"}},["Action 1"]),t("el-dropdown-item",{attrs:{command:"b"}},["Action 2"]),t("el-dropdown-item",{attrs:{command:"c"}},["Action 3"]),t("el-dropdown-item",{attrs:{command:"d",disabled:""}},["Action 4"]),t("el-dropdown-item",{attrs:{command:"e",divided:""}},["Action 5"])])])]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(28)])]),s._m(29),s._m(30),s._m(31),s._m(32),s._m(33),s._m(34)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},["¶"])," Dropdown"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Toggleable menu for displaying lists of links and actions."])},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",["Hover on the dropdown menu to unfold it for more actions."])},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",["The triggering element is rendered by the default ",t("code",["slot"]),", and the dropdown part is rendered by the ",t("code",["slot"])," named ",t("code",["dropdown"]),". By default, dropdown list shows when you hover on the triggering element without having to click it."])},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-dropdown"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-dropdown-link"']),">"]),"\n Dropdown List",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-caret-bottom el-icon--right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\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"])," ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),"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"])," ",t("span",{staticClass:"hljs-attr"},["divided"]),">"]),"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:"triggering-element"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#triggering-element","aria-hidden":"true"}},["¶"])," Triggering element"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use the button to trigger the dropdown list."])},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use ",t("code",["split-button"])," to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class ",t("code",["divider"])," to item four."])},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-dropdown"]),">"]),"\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"']),">"]),"\n Dropdown List",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-caret-bottom el-icon--right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\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-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",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("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-row"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"block-col-2"']),">"]),"\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"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demonstration"']),">"]),"hover to trigger",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dropdown"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-dropdown-link"']),">"]),"\n Dropdown List",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-caret-bottom el-icon--right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\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 ",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"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demonstration"']),">"]),"click to trigger",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dropdown"])," ",t("span",{staticClass:"hljs-attr"},["trigger"]),"=",t("span",{staticClass:"hljs-string"},['"click"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-dropdown-link"']),">"]),"\n Dropdown List",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-caret-bottom el-icon--right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\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 ",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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"menu-hiding-behavior"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-hiding-behavior","aria-hidden":"true"}},["¶"])," Menu hiding behavior"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use ",t("code",["hide-on-click"])," to define if menu closes on clicking."])},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",["By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false."])},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-dropdown"])," ",t("span",{staticClass:"hljs-attr"},[":hide-on-click"]),"=",t("span",{staticClass:"hljs-string"},['"false"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-dropdown-link"']),">"]),"\n Dropdown List",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-caret-bottom el-icon--right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\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"])," ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),"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"])," ",t("span",{staticClass:"hljs-attr"},["divided"]),">"]),"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:"command-event"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#command-event","aria-hidden":"true"}},["¶"])," Command event"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Clicking each dropdown item fires an event whose parameter is assigned by each item."])},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("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dropdown"])," ",t("span",{staticClass:"hljs-attr"},["@command"]),"=",t("span",{staticClass:"hljs-string"},['"handleCommand"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-dropdown-link"']),">"]),"\n Dropdown List",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-caret-bottom el-icon--right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\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"])," ",t("span",{staticClass:"hljs-attr"},["command"]),"=",t("span",{staticClass:"hljs-string"},['"a"']),">"]),"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"])," ",t("span",{staticClass:"hljs-attr"},["command"]),"=",t("span",{staticClass:"hljs-string"},['"b"']),">"]),"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"])," ",t("span",{staticClass:"hljs-attr"},["command"]),"=",t("span",{staticClass:"hljs-string"},['"c"']),">"]),"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"])," ",t("span",{staticClass:"hljs-attr"},["command"]),"=",t("span",{staticClass:"hljs-string"},['"d"'])," ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),"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"])," ",t("span",{staticClass:"hljs-attr"},["command"]),"=",t("span",{staticClass:"hljs-string"},['"e"'])," ",t("span",{staticClass:"hljs-attr"},["divided"]),">"]),"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"},["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 handleCommand(command) {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message(",t("span",{staticClass:"hljs-string"},["'click on item '"])," + command);\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:"dropdown-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},["¶"])," Dropdown 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",["menu button type, refer to ",t("code",["Button"])," Component, only works when ",t("code",["split-button"])," is true"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["size"]),t("td",["menu button size, refer to ",t("code",["Button"])," Component, only works when ",t("code",["split-button"])," is true"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["split-button"]),t("td",["whether a button group is displayed"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["size"]),t("td",["component size, refer to ",t("code",["Button"])," component"]),t("td",["string"]),t("td",["large, small, mini"]),t("td",["—"])]),t("tr",[t("td",["menu-align"]),t("td",["horizontal alignment"]),t("td",["string"]),t("td",["start/end"]),t("td",["end"])]),t("tr",[t("td",["trigger"]),t("td",["how to trigger"]),t("td",["string"]),t("td",["hover/click"]),t("td",["hover"])]),t("tr",[t("td",["hide-on-click"]),t("td",["whether to hide menu after clicking menu-item"]),t("td",["boolean"]),t("td",["-"]),t("td",["true"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"dropdown-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},["¶"])," Dropdown 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",["click"]),t("td",["if ",t("code",["split-button"])," is ",t("code",["true"]),", triggers when left button is clicked"]),t("td",["—"])]),t("tr",[t("td",["command"]),t("td",["triggers when a dropdown item is clicked"]),t("td",["the command dispatched from the dropdown item"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},["¶"])," Dropdown Menu Item 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",["command"]),t("td",["a command to be dispatched to Dropdown's ",t("code",["command"])," callback"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["disabled"]),t("td",["whether the item is disabled"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["divided"]),t("td",["whether a divider is displayed"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])}]}},function(s,t,a){s.exports=a(104)},function(s,t,a){var n,e;a(105),n=a(107);var l=a(108);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(){var s=this,t=function(s,t,a){return t?void setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("Age must be greater than 18")):a():a(new Error("Please input digits"))},1e3):a(new Error("Please input the age"))},a=function(t,a,n){""===a?n(new Error("Please input the password")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),n())},n=function(t,a,n){""===a?n(new Error("Please input the password again")):a!==s.ruleForm2.pass?n(new Error("Two inputs don't match!")):n()};return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formInline:{user:"",region:""},formStacked:{name:"",region:"",type:"",remark:""},formAlignRight:{name:"",region:"",type:""},formAlignLeft:{name:"",region:"",type:""},ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},ruleForm2:{pass:"",checkPass:"",age:""},formLabelWidth:"80px",options:[],rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]},rules2:{pass:[{validator:a,trigger:"blur"}],checkPass:[{validator:n,trigger:"blur"}],age:[{validator:t,trigger:"blur"}]},dynamicForm:{domains:[{key:Date.now(),value:""}],email:""},dynamicRule:{email:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:"blur,change"}]}}},methods:{handleSubmit:function(s){this.$refs.ruleForm.validate(function(s){return s?void alert("submit!"):(console.log("error submit!!"),!1)})},handleSubmit2:function(s){this.$refs.ruleForm2.validate(function(s){return s?void alert("Submit"):(console.log("error submit!!"),!1)})},handleSubmit3:function(s){this.$refs.dynamicForm.validate(function(s){return s?void alert("Submit"):(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({key:Date.now(),value:""})}}}},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="120px">\n <el-form-item label="Activity name">\n <el-input v-model="form.name"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone">\n <el-select v-model="form.region" placeholder="please select your zone">\n <el-option label="Zone one" value="shanghai"></el-option>\n <el-option label="Zone two" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label="Activity time">\n <el-col :span="11">\n <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>\n </el-col>\n <el-col class="line" :span="2">-</el-col>\n <el-col :span="11">\n <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>\n </el-col>\n </el-form-item>\n <el-form-item label="Instant delivery">\n <el-switch on-text="" off-text v-model="form.delivery"></el-switch>\n </el-form-item>\n <el-form-item label="Activity type">\n <el-checkbox-group v-model="form.type">\n <el-checkbox label="Online activities" name="type"></el-checkbox>\n <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n <el-checkbox label="Offline activities" name="type"></el-checkbox>\n <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label="Resources">\n <el-radio-group v-model="form.resource">\n <el-radio label="Sponsor"></el-radio>\n <el-radio label="Venue"></el-radio>\n </el-radio-group>\n </el-form-item>\n <el-form-item label="Activity form">\n <el-input type="textarea" v-model="form.desc"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="onSubmit">Create</el-button>\n <el-button>Cancel</el-button>\n </el-form-item>\n</el-form>\n\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":"120px"}},[t("el-form-item",{attrs:{label:"Activity name"}},[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:"Activity zone"}},[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.form.region,expression:"form.region"}],attrs:{placeholder:"please select your zone"},domProps:{value:s.form.region},on:{input:function(t){s.form.region=t}}},[t("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t("el-option",{attrs:{label:"Zone two",value:"beijing"}})])]),t("el-form-item",{attrs:{label:"Activity time"}},[t("el-col",{attrs:{span:11}},[t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.form.date1,expression:"form.date1"}],attrs:{type:"date",placeholder:"Pick a date",style:"width: 100%;"},domProps:{value:s.form.date1},on:{input:function(t){s.form.date1=t}}})]),t("el-col",{staticClass:"line",attrs:{span:2}},["-"]),t("el-col",{attrs:{span:11}},[t("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.form.date2,expression:"form.date2"}],attrs:{type:"fixed-time",placeholder:"Pick a time",style:"width: 100%;"},domProps:{value:s.form.date2},on:{input:function(t){s.form.date2=t}}})])]),t("el-form-item",{attrs:{label:"Instant delivery"}},[t("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.form.delivery,expression:"form.delivery"}],attrs:{"on-text":"","off-text":""},domProps:{value:s.form.delivery},on:{input:function(t){s.form.delivery=t}}})]),t("el-form-item",{attrs:{label:"Activity type"}},[t("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.form.type,expression:"form.type"}],domProps:{value:s.form.type},on:{input:function(t){s.form.type=t}}},[t("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})])]),t("el-form-item",{attrs:{label:"Resources"}},[t("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.form.resource,expression:"form.resource"}],domProps:{value:s.form.resource},on:{input:function(t){s.form.resource=t}}},[t("el-radio",{attrs:{label:"Sponsor"}}),t("el-radio",{attrs:{label:"Venue"}})])]),t("el-form-item",{attrs:{label:"Activity form"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.form.desc,expression:"form.desc"}],attrs:{type:"textarea"},domProps:{value:s.form.desc},on:{input:function(t){s.form.desc=t}}})]),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},["Create"]),t("el-button",["Cancel"])])])]),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:'<el-form :inline="true" :model="formInline" class="demo-form-inline">\n <el-form-item>\n <el-input v-model="formInline.user" placeholder="Approved by"></el-input>\n </el-form-item><el-form-item>\n <el-select v-model="formInline.region" placeholder="Activity zone">\n <el-option label="Zone one" value="shanghai"></el-option>\n <el-option label="Zone two" value="beijing"></el-option>\n </el-select>\n </el-form-item><el-form-item>\n <el-button type="primary" @click="onSubmit">Query</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n return {\n formInline: {\n user: '',\n region: ''\n }\n }\n },\n methods: {\n onSubmit() {\n console.log('submit!');\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:s.formInline}},[t("el-form-item",[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formInline.user,expression:"formInline.user"}],attrs:{placeholder:"Approved by"},domProps:{value:s.formInline.user},on:{input:function(t){s.formInline.user=t}}})]),t("el-form-item",[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.formInline.region,expression:"formInline.region"}],attrs:{placeholder:"Activity zone"},domProps:{value:s.formInline.region},on:{input:function(t){s.formInline.region=t}}},[t("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t("el-option",{attrs:{label:"Zone two",value:"beijing"}})])]),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},["Query"])])])]),s._m(8),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(9)])]),s._m(10),s._m(11),s._m(12),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form label-position="top" :model="formStacked" class="demo-form-stacked">\n <el-form-item label="Name">\n <el-input v-model="formStacked.name"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone">\n <el-input v-model="formStacked.region"></el-input>\n </el-form-item>\n <el-form-item label="Activity form">\n <el-input v-model="formStacked.type"></el-input>\n </el-form-item>\n</el-form>\n\n',
|
||
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,expression:"formAlignLeft.region"}],domProps:{value:s.formAlignLeft.region},on:{input:function(t){s.formAlignLeft.region=t}}})]),t("el-form-item",{attrs:{label:"Activity form"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formAlignLeft.type,expression:"formAlignLeft.type"}],domProps:{value:s.formAlignLeft.type},on:{input:function(t){s.formAlignLeft.type=t}}})])])]),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:'<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n <el-form-item label="Activity name" prop="name">\n <el-input v-model="ruleForm.name"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone" prop="region">\n <el-select v-model="ruleForm.region" placeholder="Activity zone">\n <el-option label="Zone one" value="shanghai"></el-option>\n <el-option label="Zone two" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label="Activity time" required>\n <el-col :span="11">\n <el-form-item prop="date1">\n <el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n </el-form-item>\n </el-col>\n <el-col class="line" :span="2">-</el-col>\n <el-col :span="11">\n <el-form-item prop="date2">\n <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n </el-form-item>\n </el-col>\n </el-form-item>\n <el-form-item label="Instant delivery" prop="delivery">\n <el-switch on-text="" off-text v-model="ruleForm.delivery"></el-switch>\n </el-form-item>\n <el-form-item label="Activity type" prop="type">\n <el-checkbox-group v-model="ruleForm.type">\n <el-checkbox label="Online activities" name="type"></el-checkbox>\n <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n <el-checkbox label="Offline activities" name="type"></el-checkbox>\n <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label="Resources" prop="resource">\n <el-radio-group v-model="ruleForm.resource">\n <el-radio label="Sponsorship"></el-radio>\n <el-radio label="Venue"></el-radio>\n </el-radio-group>\n </el-form-item>\n <el-form-item label="Activity form" prop="desc">\n <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="handleSubmit">Create</el-button>\n <el-button @click="handleReset">Reset</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n return {\n ruleForm: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n rules: {\n name: [\n { required: true, message: 'Please input Activity name', trigger: 'blur' },\n { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }\n ],\n region: [\n { required: true, message: 'Please select Activity zone', trigger: 'change' }\n ],\n date1: [\n { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }\n ],\n date2: [\n { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }\n ],\n type: [\n { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }\n ],\n resource: [\n { required: true, message: 'Please select activity resource', trigger: 'change' }\n ],\n desc: [\n { required: true, message: 'Please input activity form', trigger: 'blur' }\n ]\n }\n };\n },\n methods: {\n handleReset() {\n this.$refs.ruleForm.resetFields();\n },\n handleSubmit(ev) {\n this.$refs.ruleForm.validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm,rules:s.rules,"label-width":"120px"}},[t("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.name,expression:"ruleForm.name"}],domProps:{value:s.ruleForm.name},on:{input:function(t){s.ruleForm.name=t}}})]),t("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.region,expression:"ruleForm.region"}],attrs:{placeholder:"Activity zone"},domProps:{value:s.ruleForm.region},on:{input:function(t){s.ruleForm.region=t}}},[t("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t("el-option",{attrs:{label:"Zone two",value:"beijing"}})])]),t("el-form-item",{attrs:{label:"Activity time",required:""}},[t("el-col",{attrs:{span:11}},[t("el-form-item",{attrs:{prop:"date1"}},[t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.date1,expression:"ruleForm.date1"}],attrs:{type:"date",placeholder:"Pick a date",style:"width: 100%;"},domProps:{value:s.ruleForm.date1},on:{input:function(t){s.ruleForm.date1=t}}})])]),t("el-col",{staticClass:"line",attrs:{span:2}},["-"]),t("el-col",{attrs:{span:11}},[t("el-form-item",{attrs:{prop:"date2"}},[t("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.date2,expression:"ruleForm.date2"}],attrs:{type:"fixed-time",placeholder:"Pick a time",style:"width: 100%;"},domProps:{value:s.ruleForm.date2},on:{input:function(t){s.ruleForm.date2=t}}})])])]),t("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[t("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.delivery,expression:"ruleForm.delivery"}],attrs:{"on-text":"","off-text":""},domProps:{value:s.ruleForm.delivery},on:{input:function(t){s.ruleForm.delivery=t}}})]),t("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[t("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.type,expression:"ruleForm.type"}],domProps:{value:s.ruleForm.type},on:{input:function(t){s.ruleForm.type=t}}},[t("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})])]),t("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[t("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.resource,expression:"ruleForm.resource"}],domProps:{value:s.ruleForm.resource},on:{input:function(t){s.ruleForm.resource=t}}},[t("el-radio",{attrs:{label:"Sponsorship"}}),t("el-radio",{attrs:{label:"Venue"}})])]),t("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.desc,expression:"ruleForm.desc"}],attrs:{type:"textarea"},domProps:{value:s.ruleForm.desc},on:{input:function(t){s.ruleForm.desc=t}}})]),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:s.handleSubmit}},["Create"]),t("el-button",{on:{click:s.handleReset}},["Reset"])])])]),s._m(23),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(24)])]),s._m(25),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">\n <el-form-item label="Password" prop="pass">\n <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>\n </el-form-item>\n <el-form-item label="Confirm" prop="checkPass">\n <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>\n </el-form-item>\n <el-form-item label="Age" prop="age">\n <el-input v-model.number="ruleForm2.age"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="handleSubmit2">Submit</el-button>\n <el-button @click="handleReset2">Reset</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n var checkAge = (rule, value, callback) => {\n if (!value) {\n return callback(new Error('Please input the age'));\n }\n setTimeout(() => {\n if (!Number.isInteger(value)) {\n callback(new Error('Please input digits'));\n } else {\n if (value < 18) {\n callback(new Error('Age must be greater than 18'));\n } else {\n callback();\n }\n }\n }, 1000);\n };\n var validaePass = (rule, value, callback) => {\n if (value === '') {\n callback(new Error('Please input the password'));\n } else {\n if (this.ruleForm2.checkPass !== '') {\n this.$refs.ruleForm2.validateField('checkPass');\n }\n callback();\n }\n };\n var validaePass2 = (rule, value, callback) => {\n if (value === '') {\n callback(new Error('Please input the password again'));\n } else if (value !== this.ruleForm2.pass) {\n callback(new Error('Two inputs don\\'t match!'));\n } else {\n callback();\n }\n };\n return {\n ruleForm2: {\n pass: '',\n checkPass: '',\n age: ''\n },\n rules2: {\n pass: [\n { validator: validaePass, trigger: 'blur' }\n ],\n checkPass: [\n { validator: validaePass2, trigger: 'blur' }\n ],\n age: [\n { validator: checkAge, trigger: 'blur' }\n ]\n }\n };\n },\n methods: {\n handleReset2() {\n this.$refs.ruleForm2.resetFields();\n },\n handleSubmit2(ev) {\n this.$refs.ruleForm2.validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm2,rules:s.rules2,"label-width":"120px"}},[t("el-form-item",{attrs:{label:"Password",prop:"pass"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm2.pass,expression:"ruleForm2.pass"}],attrs:{type:"password","auto-complete":"off"},domProps:{value:s.ruleForm2.pass},on:{input:function(t){s.ruleForm2.pass=t}}})]),t("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm2.checkPass,expression:"ruleForm2.checkPass"}],attrs:{type:"password","auto-complete":"off"},domProps:{value:s.ruleForm2.checkPass},on:{input:function(t){s.ruleForm2.checkPass=t}}})]),t("el-form-item",{attrs:{label:"Age",prop:"age"}},[t("el-input",{directives:[{name:"model",rawName:"v-model.number",value:s.ruleForm2.age,expression:"ruleForm2.age",modifiers:{number:!0}}],domProps:{value:s.ruleForm2.age},on:{input:function(t){s.ruleForm2.age=s._n(t)}}})]),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:s.handleSubmit2}},["Submit"]),t("el-button",{on:{click:s.handleReset2}},["Reset"])])])]),s._m(26),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(27)])]),s._m(28),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="120px" class="demo-dynamic">\n <el-form-item prop="email" label="Email">\n <el-input v-model="dynamicForm.email"></el-input>\n </el-form-item>\n <el-form-item v-for="(domain, index) in dynamicForm.domains" :label="\'Domain\' + index" :key="domain.key" :prop="\'domains.\' + index + \'.value\'" :rules="{\n required: true, message: \'domain can not be null\', trigger: \'blur\'\n }">\n <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="handleSubmit3">Submit</el-button>\n <el-button @click="addDomain">New domain</el-button>\n <el-button @click="handleReset3">Reset</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n return {\n dynamicForm: {\n domains: [{\n key: 1,\n value: ''\n }],\n email: ''\n },\n dynamicRule: {\n email: [\n { required: true, message: 'Please input email address', trigger: 'blur' },\n { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }\n ]\n }\n };\n },\n methods: {\n handleSubmit3(ev) {\n this.$refs.dynamicForm.validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n handleReset3() {\n this.$refs.dynamicForm.resetFields();\n },\n removeDomain(item) {\n var index = this.dynamicForm.domains.indexOf(item);\n if (index !== -1) {\n this.dynamicForm.domains.splice(index, 1);\n }\n },\n addDomain() {\n this.dynamicForm.domains.push({\n key: Date.now(),\n value: ''\n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-form",{ref:"dynamicForm",staticClass:"demo-dynamic",attrs:{model:s.dynamicForm,rules:s.dynamicRule,"label-width":"120px"}},[t("el-form-item",{attrs:{prop:"email",label:"Email"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.dynamicForm.email,expression:"dynamicForm.email"}],domProps:{value:s.dynamicForm.email},on:{input:function(t){s.dynamicForm.email=t}}})]),s._l(s.dynamicForm.domains,function(a,n){return t("el-form-item",{key:a.key,attrs:{label:"Domain"+n,prop:"domains."+n+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:a.value,expression:"domain.value"}],domProps:{value:a.value},on:{input:function(s){a.value=s}}}),t("el-button",{on:{click:function(t){t.preventDefault(),s.removeDomain(a)}}},["Delete"])])}),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:s.handleSubmit3}},["Submit"]),t("el-button",{on:{click:s.addDomain}},["New domain"]),t("el-button",{on:{click:s.handleReset3}},["Reset"])])])]),s._m(29),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(30)])]),s._m(31),s._m(32),s._m(33),s._m(34),s._m(35),s._m(36)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},["¶"])," Form"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Form consists of ",t("code",["input"]),", ",t("code",["radio"]),", ",t("code",["select"]),", ",t("code",["checkbox"])," and so on. With form, you can collect, verify and submit data."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"basic-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-form","aria-hidden":"true"}},["¶"])," Basic form"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["It includes all kinds of input items, such as ",t("code",["input"]),", ",t("code",["select"]),", ",t("code",["radio"])," and ",t("code",["checkbox"]),"."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["In each ",t("code",["form"])," component, you need a ",t("code",["form-item"])," field to be the container of your input item."])},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"},["ref"]),"=",t("span",{staticClass:"hljs-string"},['"form"'])," ",t("span",{staticClass:"hljs-attr"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"form"'])," ",t("span",{staticClass:"hljs-attr"},["label-width"]),"=",t("span",{staticClass:"hljs-string"},['"120px"']),">"]),"\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"},['"Activity name"']),">"]),"\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"},['"form.name"']),">"]),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"]),">"]),"\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"},['"Activity zone"']),">"]),"\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"},['"form.region"'])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"please select your 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("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Zone two"'])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"beijing"']),">"]),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"},["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"},['"Activity time"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"11"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-date-picker"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"date"'])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Pick a date"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"form.date1"'])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width: 100%;"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-date-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-col"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"line"'])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),"-",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"},['"11"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{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"},['"Pick a time"'])," ",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"},['"Instant delivery"']),">"]),"\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"},['"Activity 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"},['"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"},['"Online activities"'])," ",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"},['"Promotion activities"'])," ",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"},['"Offline activities"'])," ",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"},['"Simple brand exposure"'])," ",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"},['"Resources"']),">"]),"\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"},['"form.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"},['"Sponsor"']),">"]),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"},['"Venue"']),">"]),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"},["</",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"},['"Activity form"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"textarea"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"form.desc"']),">"]),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"]),">"]),"\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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"onSubmit"']),">"]),"Create",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"]),">"]),"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-form-item"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["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"},["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("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Zone two"'])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"beijing"']),">"]),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"},["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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"onSubmit"']),">"]),"Query",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\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"]),">"]),"\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"},["formInline"]),": {\n ",t("span",{staticClass:"hljs-attr"},["user"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["region"]),": ",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:"alignment"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},["¶"])," Alignment"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Depending on your design, there are several different ways to align your label element."])},function(){var s=this,t=s.$createElement;s._c;return t("h4",{attrs:{id:"top"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#top","aria-hidden":"true"}},["¶"])," Top"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["The ",t("code",["label-position"])," attribute decides how labels align, it can be ",t("code",["top"])," or ",t("code",["left"]),". When set to ",t("code",["top"]),", labels will be placed at the top of the form field."])},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"},["label-position"]),"=",t("span",{staticClass:"hljs-string"},['"top"'])," ",t("span",{staticClass:"hljs-attr"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"formStacked"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demo-form-stacked"']),">"]),"\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"},['"Name"']),">"]),"\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"},['"formStacked.name"']),">"]),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"]),">"]),"\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"},['"Activity zone"']),">"]),"\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"},['"formStacked.region"']),">"]),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"]),">"]),"\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"},['"Activity form"']),">"]),"\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"},['"formStacked.type"']),">"]),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"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["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"},["formStacked"]),": {\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"},["type"]),": ",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("h4",{attrs:{id:"right"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#right","aria-hidden":"true"}},["¶"])," Right"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["When ",t("code",["label-position"])," is omitted, labels will align to 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"},["el-form"])," ",t("span",{staticClass:"hljs-attr"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"formAlignRight"'])," ",t("span",{staticClass:"hljs-attr"},["label-width"]),"=",t("span",{staticClass:"hljs-string"},['"120px"']),">"]),"\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"},['"Activity name"']),">"]),"\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"},['"formAlignRight.name"']),">"]),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"]),">"]),"\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"},['"Promote area"']),">"]),"\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"},['"formAlignRight.region"']),">"]),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"]),">"]),"\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"},['"Form of activity"']),">"]),"\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"},['"formAlignRight.type"']),">"]),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"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["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"},["formAlignRight"]),": {\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"},["type"]),": ",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("h4",{attrs:{id:"left"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#left","aria-hidden":"true"}},["¶"])," Left"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["When ",t("code",["label-position"])," is set to ",t("code",["top"]),", labels will align to the left."])},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"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"formAlignLeft"'])," ",t("span",{staticClass:"hljs-attr"},["label-position"]),"=",t("span",{staticClass:"hljs-string"},['"left"'])," ",t("span",{staticClass:"hljs-attr"},["label-width"]),"=",t("span",{staticClass:"hljs-string"},['"120px"']),">"]),"\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"},['"Activity name"']),">"]),"\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"},['"formAlignLeft.name"']),">"]),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"]),">"]),"\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"},['"Promotion area"']),">"]),"\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"},['"formAlignLeft.region"']),">"]),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"]),">"]),"\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"},['"Activity form"']),">"]),"\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"},['"formAlignLeft.type"']),">"]),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"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["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"},["formAlignLeft"]),": {\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"},["type"]),": ",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:"validation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},["¶"])," Validation"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Form component allows you to verify your data, helping you find and correct errors."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Just add the ",t("code",["rule"])," attribute for ",t("code",["Form"])," component, pass validation rules, and set ",t("code",["prop"])," attribute for ",t("code",["Form-Item"])," as a specific key that needs to be validated. See more information at ",t("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},["async-validator"]),"."])},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"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm"'])," ",t("span",{staticClass:"hljs-attr"},[":rules"]),"=",t("span",{staticClass:"hljs-string"},['"rules"'])," ",t("span",{staticClass:"hljs-attr"},["ref"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm"'])," ",t("span",{staticClass:"hljs-attr"},["label-width"]),"=",t("span",{staticClass:"hljs-string"},['"120px"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demo-ruleForm"']),">"]),"\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"},['"Activity name"'])," ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"name"']),">"]),"\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"},['"ruleForm.name"']),">"]),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"]),">"]),"\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"},['"Activity zone"'])," ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"region"']),">"]),"\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"},['"ruleForm.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("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Zone two"'])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"beijing"']),">"]),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"},["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"},['"Activity time"'])," ",t("span",{staticClass:"hljs-attr"},["required"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"11"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form-item"])," ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"date1"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-date-picker"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"date"'])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Pick a date"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm.date1"'])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width: 100%;"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-date-picker"]),">"]),"\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-col"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"line"'])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),"-",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"},['"11"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form-item"])," ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"date2"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{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"},['"Pick a time"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm.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-form-item"]),">"]),"\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"},['"Instant delivery"'])," ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"delivery"']),">"]),"\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"},['"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"},['"Activity type"'])," ",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"},['"Online activities"'])," ",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"},['"Promotion activities"'])," ",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"},['"Offline activities"'])," ",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"},['"Simple brand exposure"'])," ",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"},['"Resources"'])," ",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"},['"Sponsorship"']),">"]),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"},['"Venue"']),">"]),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"},["</",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"},['"Activity form"'])," ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"desc"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"textarea"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm.desc"']),">"]),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"]),">"]),"\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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleSubmit"']),">"]),"Create",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"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleReset"']),">"]),"Reset",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\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"]),">"]),"\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",{staticClass:"hljs-string"},["'Please select at least one activity type'"]),", ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'change'"])," }\n ],\n ",t("span",{staticClass:"hljs-attr"},["resource"]),": [\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 resource'"]),", ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'change'"])," }\n ],\n ",t("span",{staticClass:"hljs-attr"},["desc"]),": [\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 form'"]),", ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'blur'"])," }\n ]\n }\n };\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleReset() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$refs.ruleForm.resetFields();\n },\n handleSubmit(ev) {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$refs.ruleForm.validate(",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["valid"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (valid) {\n alert(",t("span",{staticClass:"hljs-string"},["'submit!'"]),");\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(",t("span",{staticClass:"hljs-string"},["'error submit!!'"]),");\n ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-literal"},["false"]),";\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:"custom-validation-rules"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-validation-rules","aria-hidden":"true"}},["¶"])," Custom validation rules"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["This example shows how to customize your own validation rules to finish a two-factor password verification."])},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"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm2"'])," ",t("span",{staticClass:"hljs-attr"},[":rules"]),"=",t("span",{staticClass:"hljs-string"},['"rules2"'])," ",t("span",{staticClass:"hljs-attr"},["ref"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm2"'])," ",t("span",{staticClass:"hljs-attr"},["label-width"]),"=",t("span",{staticClass:"hljs-string"},['"120px"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demo-ruleForm"']),">"]),"\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"},['"Password"'])," ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"pass"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"password"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm2.pass"'])," ",t("span",{staticClass:"hljs-attr"},["auto-complete"]),"=",t("span",{staticClass:"hljs-string"},['"off"']),">"]),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"]),">"]),"\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"},['"Confirm"'])," ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"checkPass"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"password"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm2.checkPass"'])," ",t("span",{staticClass:"hljs-attr"},["auto-complete"]),"=",t("span",{staticClass:"hljs-string"},['"off"']),">"]),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"]),">"]),"\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"},['"Age"'])," ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"age"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"])," ",t("span",{staticClass:"hljs-attr"},["v-model.number"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm2.age"']),">"]),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"]),">"]),"\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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleSubmit2"']),">"]),"Submit",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"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleReset2"']),">"]),"Reset",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\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"]),">"]),"\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"},["var"])," checkAge = ",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["rule, value, callback"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (!value) {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," callback(",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Error"]),"(",t("span",{staticClass:"hljs-string"},["'Please input the age'"]),"));\n }\n setTimeout(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["()"])," =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (!",t("span",{staticClass:"hljs-built_in"},["Number"]),".isInteger(value)) {\n callback(",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Error"]),"(",t("span",{staticClass:"hljs-string"},["'Please input digits'"]),"));\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (value < ",t("span",{staticClass:"hljs-number"},["18"]),") {\n callback(",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Error"]),"(",t("span",{staticClass:"hljs-string"},["'Age must be greater than 18'"]),"));\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n callback();\n }\n }\n }, ",t("span",{staticClass:"hljs-number"},["1000"]),");\n };\n ",t("span",{staticClass:"hljs-keyword"},["var"])," validaePass = ",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["rule, value, callback"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (value === ",t("span",{staticClass:"hljs-string"},["''"]),") {\n callback(",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Error"]),"(",t("span",{staticClass:"hljs-string"},["'Please input the password'"]),"));\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (",t("span",{staticClass:"hljs-keyword"},["this"]),".ruleForm2.checkPass !== ",t("span",{staticClass:"hljs-string"},["''"]),") {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$refs.ruleForm2.validateField(",t("span",{staticClass:"hljs-string"},["'checkPass'"]),");\n }\n callback();\n }\n };\n ",t("span",{staticClass:"hljs-keyword"},["var"])," validaePass2 = ",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["rule, value, callback"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (value === ",t("span",{staticClass:"hljs-string"},["''"]),") {\n callback(",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Error"]),"(",t("span",{staticClass:"hljs-string"},["'Please input the password again'"]),"));\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," ",t("span",{staticClass:"hljs-keyword"},["if"])," (value !== ",t("span",{staticClass:"hljs-keyword"},["this"]),".ruleForm2.pass) {\n callback(",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Error"]),"(",t("span",{staticClass:"hljs-string"},["'Two inputs don\\'t match!'"]),"));\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n callback();\n }\n };\n ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n ",t("span",{staticClass:"hljs-attr"},["ruleForm2"]),": {\n ",t("span",{staticClass:"hljs-attr"},["pass"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["checkPass"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["age"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n },\n ",t("span",{staticClass:"hljs-attr"},["rules2"]),": {\n ",t("span",{staticClass:"hljs-attr"},["pass"]),": [\n { ",t("span",{staticClass:"hljs-attr"},["validator"]),": validaePass, ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'blur'"])," }\n ],\n ",t("span",{staticClass:"hljs-attr"},["checkPass"]),": [\n { ",t("span",{staticClass:"hljs-attr"},["validator"]),": validaePass2, ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'blur'"])," }\n ],\n ",t("span",{staticClass:"hljs-attr"},["age"]),": [\n { ",t("span",{staticClass:"hljs-attr"},["validator"]),": checkAge, ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'blur'"])," }\n ]\n }\n };\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleReset2() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$refs.ruleForm2.resetFields();\n },\n handleSubmit2(ev) {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$refs.ruleForm2.validate(",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["valid"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (valid) {\n alert(",t("span",{staticClass:"hljs-string"},["'submit!'"]),");\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(",t("span",{staticClass:"hljs-string"},["'error submit!!'"]),");\n ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-literal"},["false"]),";\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:"delete-or-add-form-items-dynamically"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#delete-or-add-form-items-dynamically","aria-hidden":"true"}},["¶"])," Delete or add form items dynamically"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically."])},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"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"dynamicForm"'])," ",t("span",{staticClass:"hljs-attr"},[":rules"]),"=",t("span",{staticClass:"hljs-string"},['"dynamicRule"'])," ",t("span",{staticClass:"hljs-attr"},["ref"]),"=",t("span",{staticClass:"hljs-string"},['"dynamicForm"'])," ",t("span",{staticClass:"hljs-attr"},["label-width"]),"=",t("span",{staticClass:"hljs-string"},['"120px"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demo-dynamic"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form-item"])," ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"email"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Email"']),">"]),"\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"},['"dynamicForm.email"']),">"]),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"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form-item"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-for"]),"=",t("span",{staticClass:"hljs-string"},['"(domain, index) in dynamicForm.domains"']),"\n ",t("span",{staticClass:"hljs-attr"},[":label"]),"=",t("span",{staticClass:"hljs-string"},["\"'Domain' + index\""]),"\n ",t("span",{staticClass:"hljs-attr"},[":key"]),"=",t("span",{staticClass:"hljs-string"},['"domain.key"']),"\n ",t("span",{staticClass:"hljs-attr"},[":prop"]),"=",t("span",{staticClass:"hljs-string"},["\"'domains.' + index + '.value'\""]),"\n ",t("span",{staticClass:"hljs-attr"},[":rules"]),"=",t("span",{staticClass:"hljs-string"},["\"{\n required: true, message: 'domain can not be null', trigger: 'blur'\n }\""]),"\n >"]),"\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"},['"domain.value"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["@click.prevent"]),"=",t("span",{staticClass:"hljs-string"},['"removeDomain(domain)"']),">"]),"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-form-item"]),">"]),"\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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleSubmit3"']),">"]),"Submit",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"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"addDomain"']),">"]),"New domain",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"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleReset3"']),">"]),"Reset",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\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"]),">"]),"\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"},["dynamicForm"]),": {\n ",t("span",{staticClass:"hljs-attr"},["domains"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["key"]),": ",t("span",{staticClass:"hljs-number"},["1"]),",\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n }],\n ",t("span",{staticClass:"hljs-attr"},["email"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n },\n ",t("span",{staticClass:"hljs-attr"},["dynamicRule"]),": {\n ",t("span",{staticClass:"hljs-attr"},["email"]),": [\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 email address'"]),", ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'blur'"])," },\n { ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'email'"]),", ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'Please input correct email address'"]),", ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'blur,change'"])," }\n ]\n }\n };\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleSubmit3(ev) {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$refs.dynamicForm.validate(",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["valid"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (valid) {\n alert(",t("span",{staticClass:"hljs-string"},["'submit!'"]),");\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(",t("span",{staticClass:"hljs-string"},["'error submit!!'"]),");\n ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-literal"},["false"]),";\n }\n });\n },\n handleReset3() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$refs.dynamicForm.resetFields();\n },\n removeDomain(item) {\n ",t("span",{staticClass:"hljs-keyword"},["var"])," index = ",t("span",{staticClass:"hljs-keyword"},["this"]),".dynamicForm.domains.indexOf(item);\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (index !== ",t("span",{staticClass:"hljs-number"},["-1"]),") {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".dynamicForm.domains.splice(index, ",t("span",{staticClass:"hljs-number"},["1"]),");\n }\n },\n addDomain() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".dynamicForm.domains.push({\n ",t("span",{staticClass:"hljs-attr"},["key"]),": ",t("span",{staticClass:"hljs-built_in"},["Date"]),".now(),\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",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:"form-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},["¶"])," Form 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",["model"]),t("td",["data of form component"]),t("td",["object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["rules"]),t("td",["validation rules of form"]),t("td",["object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["inline"]),t("td",["whether the form is inline"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["label-position"]),t("td",["position of label"]),t("td",["string"]),t("td",["left/right/top"]),t("td",["right"])]),t("tr",[t("td",["label-width"]),t("td",["width of label, and all form items will inherit from ",t("code",["Form"])]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["label-suffix"]),t("td",["suffix of the label"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])},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",["Method"]),t("th",["Description"])])]),t("tbody",[t("tr",[t("td",["validate(cb)"]),t("td",["the method to validate the whole form"])]),t("tr",[t("td",["validateField(prop, cb)"]),t("td",["the method to validate a certain form item"])]),t("tr",[t("td",["resetFields"]),t("td",["reset all the fields to initial value and remove validation result"])])])])},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",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["prop"]),t("td",["a key of ",t("code",["model"])]),t("td",["string"]),t("td",["keys of model that passed to ",t("code",["form"])]),t("td")]),t("tr",[t("td",["label"]),t("td",["label"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["label-width"]),t("td",["width of label, e.g. '50px'"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["required"]),t("td",["whether the field is required or not, will be determined by validation rules if omitted"]),t("td",["string"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["rules"]),t("td",["validation rules of form"]),t("td",["object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["error"]),t("td",["field error message, set its value and the field will validate error and show this message immediately"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(110)},function(s,t,a){var n,e;n=a(111);var l=a(113);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){"use strict";t.__esModule=!0;var a=t.hasClass=function(s,t){return s.className.match(new RegExp("(\\s|^)"+t+"(\\s|$)"))},n=t.addClass=function(s,t){a(s,t)||(s.className+=" "+t)},e=t.removeClass=function(s,t){if(a(s,t)){var n=new RegExp("(\\s|^)"+t+"(\\s|$)");s.className=s.className.replace(n," ")}};t.toggleClass=function(s,t){a(s,t)?e(s,t):n(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("h1",["Components Document"])])}]}},function(s,t,a){s.exports=a(115)},function(s,t,a){var n,e,l=a(116);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:"internationalization"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#internationalization","aria-hidden":"true"}},["¶"])," Internationalization"]),t("p",["The default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely:"]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[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",["Or if you are importing Element on demand:"]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[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"])," { Button, Select } ",t("span",{staticClass:"hljs-keyword"},["from"])," ",t("span",{staticClass:"hljs-string"},["'element-ui'"]),"\n",t("span",{staticClass:"hljs-keyword"},["import"])," lang ",t("span",{staticClass:"hljs-keyword"
|
||
},["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:"#basic-usage","aria-hidden":"true"}},["¶"])," Basic usage"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Just assign the class name to ",t("code",["el-icon-iconName"]),"."])},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-edit"})},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-share"})},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-delete"})},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"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-edit"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\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-share"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\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-delete"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\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"},['"search"']),">"]),"Search",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"icons"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icons","aria-hidden":"true"}},["¶"])," Icons"])}]}},function(s,t,a){s.exports=a(123)},function(s,t,a){var n,e;n=a(124);var l=a(125);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{num1:1,num2:1,num3:5}},methods:{handleChange:function(s){console.log(s)}}}},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 <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n num1: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value)\n }\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num1,expression:"num1"}],attrs:{min:1,max:10},domProps:{value:s.num1},on:{change:s.handleChange,input:function(t){s.num1=t}}})]]),s._m(3),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(4)])]),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n num2: 1\n }\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num2,expression:"num2"}],attrs:{disabled:!0},domProps:{value:s.num2},on:{input:function(t){s.num2=t}}})]]),s._m(6),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(7)])]),s._m(8),s._m(9),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n num3: 5\n }\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num3,expression:"num3"}],attrs:{step:2},domProps:{value:s.num3},on:{input:function(t){s.num3=t}}})]]),s._m(10),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(11)])]),s._m(12),s._m(13),s._m(14),s._m(15)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"inputnumber"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},["¶"])," InputNumber"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Input numerical values with a customizable range."])},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",["Bind a variable to ",t("code",["v-model"])," in ",t("code",["<el-input-number>"])," element and you are set."])},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-input-number"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"num1"'])," ",t("span",{staticClass:"hljs-attr"},["@change"]),"=",t("span",{staticClass:"hljs-string"},['"handleChange"'])," ",t("span",{staticClass:"hljs-attr"},[":min"]),"=",t("span",{staticClass:"hljs-string"},['"1"'])," ",t("span",{staticClass:"hljs-attr"},[":max"]),"=",t("span",{staticClass:"hljs-string"},['"10"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input-number"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\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"},["num1"]),": ",t("span",{staticClass:"hljs-number"},["1"]),"\n };\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleChange(value) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(value)\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",["The ",t("code",["disabled"])," attribute accepts a ",t("code",["boolean"]),", and if the value is ",t("code",["true"]),", the component is disabled. If you just need to control the value within a range, you can add ",t("code",["min"])," attribute to set the minimum value and ",t("code",["max"])," to set the maximum value. By default, the minimum value is ",t("code",["0"]),"."])},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-input-number"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"num2"'])," ",t("span",{staticClass:"hljs-attr"},[":disabled"]),"=",t("span",{staticClass:"hljs-string"},['"true"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input-number"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\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"},["num2"]),": ",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:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},["¶"])," Steps"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Allows you to define incremental steps."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Add ",t("code",["step"])," attribute to set the step."])},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-input-number"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"num3"'])," ",t("span",{staticClass:"hljs-attr"},[":step"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input-number"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\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"},["num3"]),": ",t("span",{staticClass:"hljs-number"},["5"]),"\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",["value"]),t("td",["binding value"]),t("td",["number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["min"]),t("td",["the minimum allowed value"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["max"]),t("td",["the maximum allowed value"]),t("td",["number"]),t("td",["—"]),t("td",[t("code",["Infinity"])])]),t("tr",[t("td",["step"]),t("td",["incremental step"]),t("td",["number"]),t("td",["—"]),t("td",["1"])]),t("tr",[t("td",["size"]),t("td",["size of the component"]),t("td",["string"]),t("td",["large/small"]),t("td",["—"])]),t("tr",[t("td",["disabled"]),t("td",["whether the component is disabled"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["controls"]),t("td",["whether to enable the control buttons"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])])])])},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 the value changes"]),t("td",["value after change"])])])])}]}},function(s,t,a){s.exports=a(127)},function(s,t,a){var n,e;a(128),n=a(130);var l=a(131);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";t.__esModule=!0;var n=a(2);n.component("my-item-en",{functional:!0,render:function(s,t){var a=t.props.item;return s("li",t.data,[s("div",{attrs:{class:"value"}},[a.value]),s("span",{attrs:{class:"link"}},[a.link])])},props:{item:{type:Object,required:!0}}}),t.default={data:function(){return{links:[],input:"",input1:"",input2:"",input3:"",input4:"",input5:"",input6:"",input7:"",input8:"",input9:"",textarea:"",select:"",state1:"",state2:"",state3:"",state4:""}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearch:function(s,t){var a=this.links,n=s?a.filter(this.createStateFilter(s)):a;t(n)},querySearchAsync:function(s,t){var a=this.links,n=s?a.filter(this.createStateFilter(s)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(n)},3e3*Math.random())},createStateFilter:function(s){return function(t){return 0===t.value.indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.links=this.loadAll()}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("section",[s._m(0),s._m(1),s._m(2),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="Please input" v-model="input">\n</el-input>\n\n\n',script:"\nexport default {\n data() {\n return {\n input: ''\n }\n }\n}\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input,expression:"input"}],attrs:{placeholder:"Please input"},domProps:{value:s.input},on:{input:function(t){s.input=t}}})]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(3)])]),s._m(4),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="Please input" v-model="input1" :disabled="true">\n</el-input>\n\n\n',script:"\nexport default {\n data() {\n return {\n input1: ''\n }\n }\n}\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input1,expression:"input1"}],attrs:{placeholder:"Please input",disabled:!0},domProps:{value:s.input1},on:{input:function(t){s.input1=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-input placeholder="Pick a date" icon="time" v-model="input2" @click="handleIconClick">\n</el-input>\n\n\n',script:"\nexport default {\n data() {\n return {\n input2: ''\n }\n },\n methods: {\n handleIconClick(ev) {\n console.log(ev);\n }\n }\n}\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input2,expression:"input2"}],attrs:{placeholder:"Pick a date",icon:"time"},domProps:{value:s.input2},on:{click:s.handleIconClick,input:function(t){s.input2=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-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="Please input" v-model="textarea">\n</el-input>\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea: ''\n }\n }\n}\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.textarea,expression:"textarea"}],attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},domProps:{value:s.textarea},on:{input:function(t){s.textarea=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-input placeholder="Please input" v-model="input3">\n <template slot="prepend">Http://</template>\n</el-input>\n<el-input placeholder="Please input" v-model="input4">\n <template slot="append">.com</template>\n</el-input>\n<el-input placeholder="Please input" v-model="input5" style="width: 300px;">\n <el-select v-model="select" slot="prepend" placeholder="Select">\n <el-option label="Restaurant" value="1"></el-option>\n <el-option label="Order No." value="2"></el-option>\n <el-option label="Tel" value="3"></el-option>\n </el-select>\n <el-button slot="append" icon="search"></el-button>\n</el-input>\n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input3: '',\n input4: '',\n input5: '',\n select: ''\n }\n }\n}\n",style:"\n.el-select .el-input {\n width: 120px;\n}\n"}}},[t("div",{slot:"source",staticClass:"source"},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input3,expression:"input3"}],attrs:{placeholder:"Please input"},domProps:{value:s.input3},on:{input:function(t){s.input3=t}}},[t("template",{slot:"prepend"},["Http://"])]),t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input4,expression:"input4"}],attrs:{placeholder:"Please input"},domProps:{value:s.input4},on:{input:function(t){s.input4=t}}},[t("template",{slot:"append"},[".com"])]),t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input5,expression:"input5"}],attrs:{placeholder:"Please input",style:"width: 300px;"},domProps:{value:s.input5},on:{input:function(t){s.input5=t}}},[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.select,expression:"select"}],slot:"prepend",attrs:{placeholder:"Select"},domProps:{value:s.select},on:{input:function(t){s.select=t}}},[t("el-option",{attrs:{label:"Restaurant",value:"1"}}),t("el-option",{attrs:{label:"Order No.",value:"2"}}),t("el-option",{attrs:{label:"Tel",value:"3"}})]),t("el-button",{slot:"append",attrs:{icon:"search"}})])]),s._m(17),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(18)])]),s._m(19),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div>\n <el-input class="inline-input" size="large" placeholder="Please input" v-model="input6">\n </el-input>\n <el-input class="inline-input" placeholder="Please input" v-model="input7">\n </el-input>\n <el-input class="inline-input" size="small" placeholder="Please input" v-model="input8">\n </el-input>\n <el-input class="inline-input" size="mini" placeholder="Please input" v-model="input9">\n </el-input>\n</div>\n\n\n',script:"\nexport default {\n data() {\n return {\n input6: '',\n input7: '',\n input8: '',\n input9: ''\n }\n }\n}\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("div",[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input6,expression:"input6"}],staticClass:"inline-input",attrs:{size:"large",placeholder:"Please input"},domProps:{value:s.input6},on:{input:function(t){s.input6=t}}}),t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input7,expression:"input7"}],staticClass:"inline-input",attrs:{placeholder:"Please input"},domProps:{value:s.input7},on:{input:function(t){s.input7=t}}}),t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input8,expression:"input8"}],staticClass:"inline-input",attrs:{size:"small",placeholder:"Please input"},domProps:{value:s.input8},on:{input:function(t){s.input8=t}}}),t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input9,expression:"input9"}],staticClass:"inline-input",attrs:{size:"mini",placeholder:"Please input"},domProps:{value:s.input9},on:{input:function(t){s.input9=t}}})])]),s._m(20),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(21)])]),s._m(22),s._m(23),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="border-grid">\n <el-col :span="12" class="tac">\n <div class="text">list suggestions when activated</div>\n <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="Please input" @select="handleSelect"></el-autocomplete>\n </el-col>\n <el-col :span="12" class="tac">\n <div class="text">list suggestions on input</div>\n <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="Please input" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>\n </el-col>\n</el-row>\n\n',script:'\n export default {\n data() {\n return {\n links: [],\n state1: \'\',\n state2: \'\'\n };\n },\n methods: {\n querySearch(queryString, cb) {\n var links = this.links;\n var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n // call callback function to return suggestions\n cb(results);\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n }\n',style:null}}},[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:"Please input"},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:"Please input","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-en" placeholder="Please input" @select="handleSelect"></el-autocomplete>\n\n\n\n\n',script:'\n Vue.component(\'my-item-en\', {\n functional: true,\n render: function (h, ctx) {\n var item = ctx.props.item;\n return h(\'li\', ctx.data, [\n h(\'div\', { attrs: { class: \'value\' } }, [item.value]),\n h(\'span\', { attrs: { class: \'link\' } }, [item.link])\n ]);\n },\n props: {\n item: { type: Object, required: true }\n }\n });\n export default {\n data() {\n return {\n links: [],\n state3: \'\'\n };\n },\n methods: {\n querySearch(queryString, cb) {\n var links = this.links;\n var results = queryString ? link.filter(this.createFilter(queryString)) : links;\n // call callback function to return recommended data\n cb(results);\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n }\n',style:"\n .my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .value {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .link {\n font-size: 12px;\n color: #b4b4b4;\n }\n }\n }\n"}}},[t("div",{slot:"source",staticClass:"source"},[t("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state3,expression:"state3"}],staticClass:"my-autocomplete",attrs:{"fetch-suggestions":s.querySearch,"custom-item":"my-item-en",placeholder:"Please input"},domProps:{value:s.state3},on:{select:s.handleSelect,input:function(t){s.state3=t}}})]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(30)])]),s._m(31),s._m(32),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="Please input" @select="handleSelect"></el-autocomplete>\n\n',script:'\n export default {\n data() {\n return {\n links: [],\n state4: \'\',\n timeout: null\n };\n },\n methods: {\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n querySearchAsync(queryString, cb) {\n var links = this.links;\n var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => {\n cb(results);\n }, 3000 * Math.random());\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.indexOf(queryString.toLowerCase()) === 0);\n };\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n };\n',style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state4,expression:"state4"}],attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"Please input"},domProps:{value:s.state4},on:{select:s.handleSelect,
|
||
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"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"time"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"input2"']),"\n ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleIconClick"']),">"]),"\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"},["input2"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n }\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleIconClick(ev) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(ev);\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:"textarea"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},["¶"])," Textarea"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Resizable for entering multiple lines of text information."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Add attribute ",t("code",['type="textarea"'])," to change ",t("code",["input"])," into native ",t("code",["textarea"]),"."])},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"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"textarea"']),"\n ",t("span",{staticClass:"hljs-attr"},[":autosize"]),"=",t("span",{staticClass:"hljs-string"},['"{ minRows: 2, maxRows: 4}"']),"\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"},['"textarea"']),">"]),"\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"},["textarea"]),": ",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:"mixed-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mixed-input","aria-hidden":"true"}},["¶"])," Mixed input"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Prepend or append an element, generally a label or a button."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use ",t("code",["slot"])," to distribute elements that prepend or append to Input."])},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"])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Please input"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"input3"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"prepend"']),">"]),"Http://",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Please input"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"input4"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"append"']),">"]),".com",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Please input"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"input5"'])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width: 300px;"']),">"]),"\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"},['"select"'])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"prepend"'])," ",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"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Restaurant"'])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"1"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-option"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Order No."'])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-option"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Tel"'])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"3"']),">"]),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"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"append"'])," ",t("span",{staticClass:"hljs-attr"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"search"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\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"},["style"]),">"]),t("span",{staticClass:"css"},["\n",t("span",{staticClass:"hljs-selector-class"},[".el-select"])," ",t("span",{staticClass:"hljs-selector-class"},[".el-input"])," {\n ",t("span",{staticClass:"hljs-attribute"},["width"]),": ",t("span",{staticClass:"hljs-number"},["120px"]),";\n}\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["style"]),">"]),"\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"},["input3"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["input4"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["input5"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["select"]),": ",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:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},["¶"])," Sizes"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Add ",t("code",["size"])," attribute to change the size of Input. In addition to the default size, there are three other options: ",t("code",["large"]),", ",t("code",["small"])," and ",t("code",["mini"]),"."])},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"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"]),"\n ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"inline-input"']),"\n ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"large"']),"\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"},['"input6"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"]),"\n ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"inline-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"},['"input7"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"]),"\n ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"inline-input"']),"\n ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"small"']),"\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"},['"input8"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"]),"\n ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"inline-input"']),"\n ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"mini"']),"\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"},['"input9"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),"\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"},["input6"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["input7"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["input8"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["input9"]),": ",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:"auto-complete"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#auto-complete","aria-hidden":"true"}},["¶"])," Auto complete"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can get some recommended tips based on the current input."])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"text"},["list suggestions when activated"])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"text"},["list suggestions on input"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Autocomplete component provides input suggestions. The ",t("code",["fetch-suggestions"])," attribute is a method that returns suggested input. In this example, ",t("code",["querySearch(queryString, cb)"])," returns suggestions to Autocomplete via ",t("code",["cb(data)"])," when suggestions are ready."])},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"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"border-grid"']),">"]),"\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"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"tac"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"text"']),">"]),"list suggestions when activated",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-autocomplete"]),"\n ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"inline-input"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"state1"']),"\n ",t("span",{staticClass:"hljs-attr"},[":fetch-suggestions"]),"=",t("span",{staticClass:"hljs-string"},['"querySearch"']),"\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"},["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-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"tac"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"text"']),">"]),"list suggestions on input",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-autocomplete"]),"\n ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"inline-input"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"state2"']),"\n ",t("span",{staticClass:"hljs-attr"},[":fetch-suggestions"]),"=",t("span",{staticClass:"hljs-string"},['"querySearch"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Please input"']),"\n ",t("span",{staticClass:"hljs-attr"},[":trigger-on-focus"]),"=",t("span",{staticClass:"hljs-string"},['"false"']),"\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"},["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"},["links"]),": [],\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"])," links = ",t("span",{staticClass:"hljs-keyword"},["this"]),".links;\n ",t("span",{staticClass:"hljs-keyword"},["var"])," results = queryString ? links.filter(",t("span",{staticClass:"hljs-keyword"},["this"]),".createFilter(queryString)) : links;\n ",t("span",{staticClass:"hljs-comment"},["// call callback function to return suggestions"]),"\n cb(results);\n },\n createFilter(queryString) {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["link"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," (link.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"},['"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"']),", ",t("span",{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:"custom-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},["¶"])," Custom template"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Customize how suggestions are displayed."])},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"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"my-autocomplete"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"state3"']),"\n ",t("span",{staticClass:"hljs-attr"},[":fetch-suggestions"]),"=",t("span",{staticClass:"hljs-string"},['"querySearch"']),"\n ",t("span",{staticClass:"hljs-attr"},["custom-item"]),"=",t("span",{staticClass:"hljs-string"},['"my-item-en"']),"\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\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"undefined"},["\n .my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .value {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .link {\n font-size: 12px;\n color: #b4b4b4;\n }\n }\n }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["style"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n Vue.component(",t("span",{staticClass:"hljs-string"},["'my-item-en'"]),", {\n ",t("span",{staticClass:"hljs-attr"},["functional"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),",\n ",t("span",{staticClass:"hljs-attr"},["render"]),": ",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-keyword"},["function"])," (",t("span",{staticClass:"hljs-params"},["h, ctx"]),") "]),"{\n ",t("span",{staticClass:"hljs-keyword"},["var"])," item = ctx.props.item;\n ",t("span",{staticClass:"hljs-keyword"},["return"])," h(",t("span",{staticClass:"hljs-string"},["'li'"]),", ctx.data, [\n h(",t("span",{staticClass:"hljs-string"},["'div'"]),", { ",t("span",{staticClass:"hljs-attr"},["attrs"]),": { ",t("span",{staticClass:"hljs-attr"},["class"]),": ",t("span",{staticClass:"hljs-string"},["'value'"])," } }, [item.value]),\n h(",t("span",{staticClass:"hljs-string"},["'span'"]),", { ",t("span",{staticClass:"hljs-attr"},["attrs"]),": { ",t("span",{staticClass:"hljs-attr"},["class"]),": ",t("span",{staticClass:"hljs-string"},["'link'"])," } }, [item.link])\n ]);\n },\n ",t("span",{staticClass:"hljs-attr"},["props"]),": {\n ",t("span",{staticClass:"hljs-attr"},["item"]),": { ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-built_in"},["Object"]),", ",t("span",{staticClass:"hljs-attr"},["required"]),": ",t("span",{staticClass:"hljs-literal"},["true"])," }\n }\n });\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"},["state3"]),": ",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"])," links = ",t("span",{staticClass:"hljs-keyword"},["this"]),".links;\n ",t("span",{staticClass:"hljs-keyword"},["var"])," results = queryString ? link.filter(",t("span",{staticClass:"hljs-keyword"},["this"]),".createFilter(queryString)) : links;\n ",t("span",{staticClass:"hljs-comment"},["// call callback function to return recommended data"]),"\n cb(results);\n },\n createFilter(queryString) {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["link"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," (link.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"},['"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"']),", ",t("span",{
|
||
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"']),", ",t("span",{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 querySearchAsync(queryString, cb) {\n ",t("span",{staticClass:"hljs-keyword"},["var"])," links = ",t("span",{staticClass:"hljs-keyword"},["this"]),".links;\n ",t("span",{staticClass:"hljs-keyword"},["var"])," results = queryString ? links.filter(",t("span",{staticClass:"hljs-keyword"},["this"]),".createFilter(queryString)) : links;\n\n clearTimeout(",t("span",{staticClass:"hljs-keyword"},["this"]),".timeout);\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".timeout = setTimeout(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["()"])," =>"])," {\n cb(results);\n }, ",t("span",{staticClass:"hljs-number"},["3000"])," * ",t("span",{staticClass:"hljs-built_in"},["Math"]),".random());\n },\n createFilter(queryString) {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["link"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," (link.value.indexOf(queryString.toLowerCase()) === ",t("span",{staticClass:"hljs-number"},["0"]),");\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:"input-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},["¶"])," Input 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",["Same as the ",t("code",["type"])," attribute of native input, except that it can be ",t("code",["textarea"])]),t("td",["string"]),t("td",["—"]),t("td",["text"])]),t("tr",[t("td",["value"]),t("td",["binding value"]),t("td",["string/number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["maxlength"]),t("td",["maximum Input text length"]),t("td",["number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["minlength"]),t("td",["minimum Input text length"]),t("td",["number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["placeholder"]),t("td",["placeholder of Input"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["disabled"]),t("td",["whether Input is disabled"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["size"]),t("td",["size of Input, works when ",t("code",["type"])," is not 'textarea'"]),t("td",["string"]),t("td",["large/small/mini"]),t("td",["—"])]),t("tr",[t("td",["icon"]),t("td",["icon name"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["rows"]),t("td",["number of rows of textarea, only works when ",t("code",["type"])," is 'textarea'"]),t("td",["number"]),t("td",["—"]),t("td",["2"])]),t("tr",[t("td",["autosize"]),t("td",["whether textarea has an adaptive height, only works when ",t("code",["type"])," is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }"]),t("td",["boolean/object"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["auto-complete"]),t("td",["same as ",t("code",["auto-complete"])," in native input"]),t("td",["string"]),t("td",["on/off"]),t("td",["off"])]),t("tr",[t("td",["name"]),t("td",["same as ",t("code",["name"])," in native input"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["max"]),t("td",["same as ",t("code",["max"])," in native input"]),t("td",["*"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["min"]),t("td",["same as ",t("code",["min"])," in native input"]),t("td",["*"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["autofocus"]),t("td",["same as ",t("code",["autofocus"])," in native input"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["form"]),t("td",["same as ",t("code",["form"])," in native input"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"input-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},["¶"])," Input 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",["click"]),t("td",["triggers when the icon inside Input is clicked"]),t("td",["(event: Event)"])]),t("tr",[t("td",["blur"]),t("td",["triggers when the icon inside Input is blur"]),t("td",["(event: Event)"])]),t("tr",[t("td",["focus"]),t("td",["triggers when the icon inside Input is focus"]),t("td",["(event: Event)"])]),t("tr",[t("td",["change"]),t("td",["triggers when the icon inside Input value change"]),t("td",["(value: string | number)"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"autocomplete-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},["¶"])," Autocomplete 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",["Options"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["placeholder"]),t("td",["the placeholder of Autocomplete"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["disabled"]),t("td",["whether Autocomplete is disabled"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["value"]),t("td",["binding value"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["custom-item"]),t("td",["component name of your customized suggestion list item"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["fetch-suggestions"]),t("td",["a method to fetch input suggestions. When suggestions are ready, invoke ",t("code",["callback(data:[])"])," to return them to Autocomplete"]),t("td",["Function(queryString, callback)"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"autocomplete-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},["¶"])," Autocomplete 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",["select"]),t("td",["triggers when a suggestion is clicked"]),t("td",["suggestion being clicked"])])])])}]}},function(s,t,a){s.exports=a(133)},function(s,t,a){var n,e,l=a(134);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:"installation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},["¶"])," Installation"]),t("h3",{attrs:{id:"npm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},["¶"])," npm"]),t("p",["Installing with npm is recommended and it works seamlessly with ",t("a",{attrs:{href:"https://webpack.js.org/"}},["webpack"]),"."]),t("pre",[t("code",{staticClass:"hljs language-shell"},["npm i element-ui -S\n"])]),t("h3",{attrs:{id:"cdn"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},["¶"])," CDN"]),t("p",["Get the latest version from ",t("a",{attrs:{href:"https://unpkg.com/element-ui/"}},["unpkg.com/element-ui"])," , and import JavaScript and CSS file in your page."]),t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-comment"},["<!-- import CSS -->"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["link"])," ",t("span",{staticClass:"hljs-attr"},["rel"]),"=",t("span",{staticClass:"hljs-string"},['"stylesheet"'])," ",t("span",{staticClass:"hljs-attr"},["href"]),"=",t("span",{staticClass:"hljs-string"},['"https://unpkg.com/element-ui/lib/theme-default/index.css"']),">"]),"\n",t("span",{staticClass:"hljs-comment"},["<!-- import JavaScript -->"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"])," ",t("span",{staticClass:"hljs-attr"},["src"]),"=",t("span",{staticClass:"hljs-string"},['"https://unpkg.com/element-ui/lib/index.js"']),">"]),t("span",{staticClass:"undefined"}),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])]),t("h3",{attrs:{id:"hello-world"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},["¶"])," Hello world"]),t("p",["If you are using CDN, a hello-world page is easy with Element. ",t("a",{attrs:{href:"http://codepen.io/QingWei-Li/pen/vXwJrY"}},["Online Demo"])]),t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-meta"},["<!DOCTYPE html>"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["html"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["head"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["meta"])," ",t("span",{staticClass:"hljs-attr"},["charset"]),"=",t("span",{staticClass:"hljs-string"},['"UTF-8"']),">"]),"\n ",t("span",{staticClass:"hljs-comment"},["<!-- import CSS -->"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["link"])," ",t("span",{staticClass:"hljs-attr"},["rel"]),"=",t("span",{staticClass:"hljs-string"},['"stylesheet"'])," ",t("span",{staticClass:"hljs-attr"},["href"]),"=",t("span",{staticClass:"hljs-string"},['"https://unpkg.com/element-ui/lib/theme-default/index.css"']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["head"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["body"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["id"]),"=",t("span",{staticClass:"hljs-string"},['"app"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"visible = true"']),">"]),"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-dialog"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"visible"'])," ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"Hello world"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["p"]),">"]),"Try Element",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["p"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-dialog"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["body"]),">"]),"\n ",t("span",{staticClass:"hljs-comment"},["<!-- import Vue before Element -->"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"])," ",t("span",{staticClass:"hljs-attr"},["src"]),"=",t("span",{staticClass:"hljs-string"},['"https://unpkg.com/vue/dist/vue.js"']),">"]),t("span",{staticClass:"undefined"}),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n ",t("span",{staticClass:"hljs-comment"},["<!-- import JavaScript -->"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"])," ",t("span",{staticClass:"hljs-attr"},["src"]),"=",t("span",{staticClass:"hljs-string"},['"https://unpkg.com/element-ui/lib/index.js"']),">"]),t("span",{staticClass:"undefined"}),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"actionscript"},["\n ",t("span",{staticClass:"hljs-keyword"},["new"])," Vue({\n el: ",t("span",{staticClass:"hljs-string"},["'#app'"]),",\n data: ",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-keyword"},["function"]),t("span",{staticClass:"hljs-params"},["()"])]),"{\n ",t("span",{staticClass:"hljs-keyword"},["return"])," { visible: ",t("span",{staticClass:"hljs-literal"},["false"])," }\n }\n })\n "]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["html"]),">"]),"\n"])]),t("p",["If you are using npm and wish to apply webpack, please continue to the next page: Quick Start."])])}]}},function(s,t,a){s.exports=a(136)},function(s,t,a){var n,e,l=a(137);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,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-row>\n <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n\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",[t("el-col",{attrs:{span:24}},[s._m(4)])]),t("el-row",[t("el-col",{attrs:{span:12}},[s._m(5)]),t("el-col",{attrs:{span:12}},[s._m(6)])]),t("el-row",[t("el-col",{attrs:{span:8}},[s._m(7)]),t("el-col",{attrs:{span:8}},[s._m(8)]),t("el-col",{attrs:{span:8}},[s._m(9)])]),t("el-row",[t("el-col",{attrs:{span:6}},[s._m(10)]),t("el-col",{attrs:{span:6}},[s._m(11)]),t("el-col",{attrs:{span:6}},[s._m(12)]),t("el-col",{attrs:{span:6}},[s._m(13)])]),t("el-row",[t("el-col",{attrs:{span:4}},[s._m(14)]),t("el-col",{attrs:{span:4}},[s._m(15)]),t("el-col",{attrs:{span:4}},[s._m(16)]),t("el-col",{attrs:{span:4}},[s._m(17)]),t("el-col",{attrs:{span:4}},[s._m(18)]),t("el-col",{attrs:{span:4}},[s._m(19)])])]),s._m(20),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(21)])]),s._m(22),s._m(23),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"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n\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(24)]),t("el-col",{attrs:{span:6}},[s._m(25)]),t("el-col",{attrs:{span:6}},[s._m(26)]),t("el-col",{attrs:{span:6}},[s._m(27)])])]),s._m(28),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(29)])]),s._m(30),s._m(31),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="20">\n <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n\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: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"}}},[t("div",{slot:"source",staticClass:"source"},[t("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[t("el-col",{attrs:{span:6}},[s._m(53)]),t("el-col",{attrs:{span:6}},[s._m(54)]),t("el-col",{attrs:{span:6}},[s._m(55)])]),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[t("el-col",{attrs:{span:6}},[s._m(56)]),t("el-col",{attrs:{span:6}},[s._m(57)]),t("el-col",{attrs:{span:6}},[s._m(58)])]),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[t("el-col",{attrs:{span:6}},[s._m(59)]),t("el-col",{attrs:{span:6}},[s._m(60)]),t("el-col",{attrs:{span:6}},[s._m(61)])]),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[t("el-col",{attrs:{span:6}},[s._m(62)]),t("el-col",{attrs:{span:6}},[s._m(63)]),t("el-col",{attrs:{span:6}},[s._m(64)])]),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[t("el-col",{attrs:{span:6}},[s._m(65)]),t("el-col",{attrs:{span:6}},[s._m(66)]),t("el-col",{attrs:{span:6}},[s._m(67)])])]),s._m(68),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(69)])]),s._m(70),s._m(71),s._m(72),s._m(73)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},["¶"])," Layout"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Quickly and easily create layouts with the basic 24-column."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"basic-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-layout","aria-hidden":"true"}},["¶"])," Basic layout"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Create basic grid layout using columns."])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"grid-content bg-purple-dark"})},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("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple"})},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple-light"})},function(){var s=this,t=s.$createElement;s._c;return t("p",["With ",t("code",["row"])," and ",t("code",["col"]),", we can easily manipulate the layout using the ",t("code",["span"])," 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-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"},['"24"']),">"]),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-dark"']),">"]),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"},['"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-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-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-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"},['"4"']),">"]),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"},['"4"']),">"]),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"},['"4"']),">"]),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"},['"4"']),">"]),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"},['"4"']),">"]),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"},['"4"']),">"]),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\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"undefined"},["\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("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:"column-spacing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#column-spacing","aria-hidden":"true"}},["¶"])," Column spacing"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Column spacing is supported."])},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("div",{staticClass:"grid-content bg-purple"})},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("div",{staticClass:"grid-content bg-purple"})},function(){var s=this,t=s.$createElement;s._c;return t("p",["Row provides ",t("code",["gutter"])," attribute to specify spacings between columns, and its default value is 0."])},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-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"']),">"]),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\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"undefined"},["\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("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:"hybrid-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hybrid-layout","aria-hidden":"true"}},["¶"])," Hybrid layout"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Form a more complex hybrid layout by combining the basic 1/24 columns."])},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("div",{staticClass:"grid-content bg-purple"})},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("div",{staticClass:"grid-content bg-purple"})},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("div",{staticClass:"grid-content bg-purple"})},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("div",{staticClass:"grid-content bg-purple"})},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("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"},['"16"']),">"]),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"']),">"]),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"},['"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"']),">"]),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"},['"4"']),">"]),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"},['"4"']),">"]),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"},['"4"']),">"]),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"},['"16"']),">"]),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"},['"4"']),">"]),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\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"undefined"},["\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("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:"column-offset"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#column-offset","aria-hidden":"true"}},["¶"])," Column offset"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can specify column offsets."])},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("div",{staticClass:"grid-content bg-purple"})},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("div",{staticClass:"grid-content bg-purple"})},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",["You can specify the number of column offset by setting the value of ",t("code",["offset"])," attribute of Col."])},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",{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\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"undefined"},["\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("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:"alignment"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},["¶"])," Alignment"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Flexible alignment of columns."])},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("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple"})},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple"})},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple"})},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple"})},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"grid-content bg-purple-light"})},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",["You can enable flex layout by setting ",t("code",["type"])," attribute to 'flex', and define the layout of child elements by setting ",t("code",["justify"])," attribute with start, center, end, space-between or space-around."])},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"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"flex"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"row-bg"']),">"]),"\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",{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",{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"},['"end"']),">"]),"\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",{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"},['"space-between"']),">"]),"\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",{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"},['"space-around"']),">"]),"\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\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"undefined"},["\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("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:"row-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},["¶"])," Row 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",["gutter"]),t("td",["grid spacing"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["type"]),t("td",["layout mode, you can use flex, works in modern browsers"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["justify"]),t("td",["horizontal alignment of flex layout"]),t("td",["string"]),t("td",["start/end/center/space-around/space-between"]),t("td",["start"])]),t("tr",[t("td",["align"]),t("td",["vertical alignment of flex layout"]),t("td",["string"]),t("td",["top/middle/bottom"]),t("td",["top"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"col-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},["¶"])," Col 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",["span"]),t("td",["number of column the grid spans"]),t("td",["number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["offset"]),t("td",["number of spacing on the left side of the grid"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["push"]),t("td",["number of columns that grid moves to the right"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["pull"]),t("td",["number of columns that grid moves to the left"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["xs"]),t("td",[t("code",["<768px"])," Responsive columns or column props object"]),t("td",["number/object (i.e： {span: 4, offset: 4})"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["sm"]),t("td",[t("code",["≥768px"])," Responsive columns or column props object"]),t("td",["number/object (i.e： {span: 4, offset: 4})"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["md"]),t("td",[t("code",["≥992"])," Responsive columns or column props object"]),t("td",["number/object (i.e： {span: 4, offset: 4})"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["lg"]),t("td",[t("code",["≥1200"])," Responsive columns or column props object"]),t("td",["number/object (i.e： {span: 4, offset: 4})"]),t("td",["—"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(139)},function(s,t,a){var n,e;n=a(140);var l=a(141);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-02",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"}],loading:!0,loading2:!0,fullscreenLoading:!1}},methods:{openFullScreen:function(){var s=this;this.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},3e3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;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-table v-loading.body="loading" :data="tableData" style="width: 100%">\n <el-table-column prop="date" label="Date" 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">\n </el-table-column>\n </el-table>\n</template>\n\n\n\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n loading: true\n };\n }\n };\n",style:"\n body {\n margin: 0;\n }\n"}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{directives:[{name:"loading",rawName:"v-loading.body",value:s.loading,expression:"loading",modifiers:{body:!0}}],attrs:{data:s.tableData,style:"width: 100%"}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Address"}})])]]),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-table v-loading="loading2" element-loading-text="Loading..." :data="tableData" style="width: 100%">\n <el-table-column prop="date" label="Date" 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">\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-02',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-04',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }, {\n date: '2016-05-01',\n name: 'John Smith',\n address: 'No.1518, Jinshajiang Road, Putuo District'\n }],\n loading2: true\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],attrs:{"element-loading-text":"Loading...",data:s.tableData,style:"width: 100%"}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Address"}})])]]),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-button type="primary" @click="openFullScreen" v-loading.fullscreen.lock="fullscreenLoading">\n Full screen loading for 3 seconds\n </el-button>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n fullscreenLoading: false\n }\n },\n methods: {\n openFullScreen() {\n this.fullscreenLoading = true;\n setTimeout(() => {\n this.fullscreenLoading = false;\n }, 3000);\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:s.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:s.openFullScreen}},["\n Full screen loading for 3 seconds\n "])]]),s._m(12),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(13)])]),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),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:"loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},["¶"])," Loading"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Show animation while loading data."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"loading-inside-a-container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-inside-a-container","aria-hidden":"true"}},["¶"])," Loading inside a container"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Displays animation in a container (such as a table) while loading data."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Element provides two ways to invoke Loading: directive and service. For the custom directive ",t("code",["v-loading"]),", you just need to bind a ",t("code",["boolean"])," value to it. By default, the loading mask will append to the element where the directive is used. Adding the ",t("code",["body"])," modifier makes the mask append to the body element."])},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.body"]),"=",t("span",{staticClass:"hljs-string"},['"loading"']),"\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"},['"Date"']),"\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"},['"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-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"},["style"]),">"]),t("span",{staticClass:"css"},["\n ",t("span",{staticClass:"hljs-selector-tag"},["body"])," {\n ",t("span",{staticClass:"hljs-attribute"},["margin"]),": ",t("span",{staticClass:"hljs-number"},["0"]),";\n }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["style"]),">"]),"\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"},["'John Smith'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No.1518, Jinshajiang Road, Putuo District'"]),"\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"},["'John Smith'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No.1518, Jinshajiang Road, Putuo District'"]),"\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"},["'John Smith'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No.1518, Jinshajiang Road, Putuo District'"]),"\n }],\n ",t("span",{staticClass:"hljs-attr"},["loading"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),"\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:"loading-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-text","aria-hidden":"true"}},["¶"])," Loading text"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can customize a text message."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Add attribute ",t("code",["element-loading-text"])," to the element on which ",t("code",["v-loading"])," is bound, and its value will be displayed under the spinner."])},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"},['"Loading..."']),"\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"},['"Date"']),"\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"},['"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-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"},["'John Smith'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No.1518, Jinshajiang Road, Putuo District'"]),"\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"},["'John Smith'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No.1518, Jinshajiang Road, Putuo District'"]),"\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"},["'John Smith'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'No.1518, Jinshajiang Road, Putuo District'"]),"\n }],\n ",t("span",{staticClass:"hljs-attr"},["loading2"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),"\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:"full-screen-loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#full-screen-loading","aria-hidden":"true"}},["¶"])," Full screen loading"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Show a full screen animation while loading data."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Add the ",t("code",["fullscreen"])," modifier to create a full screen mask, and it will append to body. In this case, if you disable scrolling on body, you add another modifier ",t("code",["lock"]),"."])},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-button"]),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"']),"\n ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"openFullScreen"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-loading.fullscreen.lock"]),"=",t("span",{staticClass:"hljs-string"},['"fullscreenLoading"']),">"]),"\n Full screen loading for 3 seconds\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 data() {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n ",t("span",{staticClass:"hljs-attr"},["fullscreenLoading"]),": ",t("span",{staticClass:"hljs-literal"
|
||
},["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 will be passed to ",t("code",["document.querySelector"])," to get the corresponding DOM node"]),t("td",["object/string"]),t("td",["—"]),t("td",["document.body"])]),t("tr",[t("td",["body"]),t("td",["same as the ",t("code",["body"])," modifier of ",t("code",["v-loading"])]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["fullscreen"]),t("td",["same as the ",t("code",["fullscreen"])," modifier of ",t("code",["v-loading"])]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["lock"]),t("td",["same as the ",t("code",["lock"])," modifier of ",t("code",["v-loading"])]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["text"]),t("td",["loading text that displays under the spinner"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["customClass"]),t("td",["custom class name for Loading"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(143)},function(s,t,a){var n,e;n=a(144);var l=a(145);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={methods:{handleOpen:function(s,t){console.log(s,t)},handleClose:function(s,t){console.log(s,t)},handleSelect:function(s,t){console.log(s,t)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;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-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n <el-menu-item index="1">Processing Center</el-menu-item>\n <el-submenu index="2">\n <template slot="title">Workspace</template>\n <el-menu-item index="2-1">item one</el-menu-item>\n <el-menu-item index="2-2">item two</el-menu-item>\n <el-menu-item index="2-3">item three</el-menu-item>\n </el-submenu>\n <el-menu-item index="3">Orders</el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n <el-menu-item index="1">Processing Center</el-menu-item>\n <el-submenu index="2">\n <template slot="title">Workspace</template>\n <el-menu-item index="2-1">item one</el-menu-item>\n <el-menu-item index="2-2">item two</el-menu-item>\n <el-menu-item index="2-3">item three</el-menu-item>\n </el-submenu>\n <el-menu-item index="3">Orders </el-menu-item>\n</el-menu>\n\n\n',script:"\n export default {\n methods: {\n handleSelect(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-menu",{staticClass:"el-menu-demo",attrs:{theme:"dark","default-active":"1",mode:"horizontal"},on:{select:s.handleSelect}},[t("el-menu-item",{attrs:{index:"1"}},["Processing Center"]),t("el-submenu",{attrs:{index:"2"}},[t("template",{slot:"title"},["Workspace"]),t("el-menu-item",{attrs:{index:"2-1"}},["item one"]),t("el-menu-item",{attrs:{index:"2-2"}},["item two"]),t("el-menu-item",{attrs:{index:"2-3"}},["item three"])]),t("el-menu-item",{attrs:{index:"3"}},["Orders"])]),s._m(4),t("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":"1",mode:"horizontal"},on:{select:s.handleSelect}},[t("el-menu-item",{attrs:{index:"1"}},["Processing Center"]),t("el-submenu",{attrs:{index:"2"}},[t("template",{slot:"title"},["Workspace"]),t("el-menu-item",{attrs:{index:"2-1"}},["item one"]),t("el-menu-item",{attrs:{index:"2-2"}},["item two"]),t("el-menu-item",{attrs:{index:"2-3"}},["item three"])]),t("el-menu-item",{attrs:{index:"3"}},["Orders "])])]),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-row class="tac">\n <el-col :span="8">\n <h5>With icons</h5>\n <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">\n <el-submenu index="1">\n <template slot="title"><i class="el-icon-message"></i>Navigator One</template>\n <el-menu-item-group title="Group One">\n <el-menu-item index="1-1">item one</el-menu-item>\n <el-menu-item index="1-2">item one</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group Two">\n <el-menu-item index="1-3">item three</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <template slot="title">item four</template>\n <el-menu-item index="1-4-1">item one</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="2"><i class="el-icon-menu"></i>Navigator Two</el-menu-item>\n <el-menu-item index="3"><i class="el-icon-setting"></i>Navigator Three</el-menu-item>\n </el-menu>\n </el-col>\n <el-col :span="8">\n <h5>Without icons</h5>\n <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">\n <el-submenu index="1">\n <template slot="title">Navigator One</template>\n <el-menu-item-group title="Group One">\n <el-menu-item index="1-1">item one</el-menu-item>\n <el-menu-item index="1-2">item two</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group Two">\n <el-menu-item index="1-3">item three</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <template slot="title">item four</template>\n <el-menu-item index="1-4-1">item one</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="2">Navigator Two</el-menu-item>\n <el-menu-item index="3">Navigator Three</el-menu-item>\n </el-menu>\n </el-col>\n <el-col :span="8">\n <h5>Groups</h5>\n <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">\n <el-menu-item-group title="Group One">\n <el-menu-item index="1"><i class="el-icon-message"></i>Navigator One</el-menu-item>\n <el-menu-item index="2"><i class="el-icon-message"></i>Navigator Two</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group Two">\n <el-menu-item index="3"><i class="el-icon-message"></i>Navigator Three</el-menu-item>\n <el-menu-item index="4"><i class="el-icon-message"></i>Navigator Four</el-menu-item>\n </el-menu-item-group>\n </el-menu>\n </el-col>\n</el-row>\n\n\n',script:"\n export default {\n methods: {\n handleOpen(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-row",{staticClass:"tac"},[t("el-col",{attrs:{span:8}},[s._m(9),t("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[t("el-submenu",{attrs:{index:"1"}},[t("template",{slot:"title"},[s._m(10),"Navigator One"]),t("el-menu-item-group",{attrs:{title:"Group One"}},[t("el-menu-item",{attrs:{index:"1-1"}},["item one"]),t("el-menu-item",{attrs:{index:"1-2"}},["item one"])]),t("el-menu-item-group",{attrs:{title:"Group Two"}},[t("el-menu-item",{attrs:{index:"1-3"}},["item three"])]),t("el-submenu",{attrs:{index:"1-4"}},[t("template",{slot:"title"},["item four"]),t("el-menu-item",{attrs:{index:"1-4-1"}},["item one"])])]),t("el-menu-item",{attrs:{index:"2"}},[s._m(11),"Navigator Two"]),t("el-menu-item",{attrs:{index:"3"}},[s._m(12),"Navigator Three"])])]),t("el-col",{attrs:{span:8}},[s._m(13),t("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",theme:"dark"},on:{open:s.handleOpen,close:s.handleClose}},[t("el-submenu",{attrs:{index:"1"}},[t("template",{slot:"title"},["Navigator One"]),t("el-menu-item-group",{attrs:{title:"Group One"}},[t("el-menu-item",{attrs:{index:"1-1"}},["item one"]),t("el-menu-item",{attrs:{index:"1-2"}},["item two"])]),t("el-menu-item-group",{attrs:{title:"Group Two"}},[t("el-menu-item",{attrs:{index:"1-3"}},["item three"])]),t("el-submenu",{attrs:{index:"1-4"}},[t("template",{slot:"title"},["item four"]),t("el-menu-item",{attrs:{index:"1-4-1"}},["item one"])])]),t("el-menu-item",{attrs:{index:"2"}},["Navigator Two"]),t("el-menu-item",{attrs:{index:"3"}},["Navigator Three"])])]),t("el-col",{attrs:{span:8}},[s._m(14),t("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{mode:"vertical","default-active":"1"}},[t("el-menu-item-group",{attrs:{title:"Group One"}},[t("el-menu-item",{attrs:{index:"1"}},[s._m(15),"Navigator One"]),t("el-menu-item",{attrs:{index:"2"}},[s._m(16),"Navigator Two"])]),t("el-menu-item-group",{attrs:{title:"Group Two"}},[t("el-menu-item",{attrs:{index:"3"}},[s._m(17),"Navigator Three"]),t("el-menu-item",{attrs:{index:"4"}},[s._m(18),"Navigator Four"])])])])])]),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),s._m(27),s._m(28),s._m(29),s._m(30)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"navmenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},["¶"])," NavMenu"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Menu that provides navigation for your website."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"top-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},["¶"])," Top bar"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Top bar NavMenu can be used in a variety of scenarios."])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"line"})},function(){var s=this,t=s.$createElement;s._c;return t("p",["By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu."])},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-menu"])," ",t("span",{staticClass:"hljs-attr"},["theme"]),"=",t("span",{staticClass:"hljs-string"},['"dark"'])," ",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-demo"'])," ",t("span",{staticClass:"hljs-attr"},["mode"]),"=",t("span",{staticClass:"hljs-string"},['"horizontal"'])," ",t("span",{staticClass:"hljs-attr"},["@select"]),"=",t("span",{staticClass:"hljs-string"},['"handleSelect"']),">"]),"\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"']),">"]),"Processing Center",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"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"title"']),">"]),"Workspace",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"},['"2-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-menu-item"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"2-2"']),">"]),"item 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"},['"2-3"']),">"]),"item 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-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"},['"3"']),">"]),"Orders",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"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"line"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\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"},['"1"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-menu-demo"'])," ",t("span",{staticClass:"hljs-attr"},["mode"]),"=",t("span",{staticClass:"hljs-string"},['"horizontal"'])," ",t("span",{staticClass:"hljs-attr"},["@select"]),"=",t("span",{staticClass:"hljs-string"},['"handleSelect"']),">"]),"\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"']),">"]),"Processing Center",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"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"title"']),">"]),"Workspace",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"},['"2-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-menu-item"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"2-2"']),">"]),"item 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"},['"2-3"']),">"]),"item 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-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"},['"3"']),">"]),"Orders ",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\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 handleSelect(key, keyPath) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(key, keyPath);\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:"side-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},["¶"])," Side bar"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Vertical NavMenu with sub-menus."])},function(){var s=this,t=s.$createElement;s._c;return t("h5",["With icons"])},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-message"})},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-menu"})},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-setting"})},function(){var s=this,t=s.$createElement;s._c;return t("h5",["Without icons"])},function(){var s=this,t=s.$createElement;s._c;return t("h5",["Groups"])},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-message"})},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-message"})},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-message"})},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-message"})},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot."])},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"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"tac"']),">"]),"\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"]),">"]),"With icons",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"']),">"]),"\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"},["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"},["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"},['"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-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-menu-item"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"1-2"']),">"]),"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-menu-item-group"]),">"]),"\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 Two"']),">"]),"\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-3"']),">"]),"item 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-item-group"]),">"]),"\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-4"']),">"]),"\n ",t("span",{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"']),">"]),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"]),">"]),"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"']),">"]),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"]),">"]),"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"]),">"]),"Without icons",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"']),">"]),"Navigator One",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"},['"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-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-menu-item"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"1-2"']),">"]),"item 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 ",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 Two"']),">"]),"\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-3"']),">"]),"item 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-item-group"]),">"]),"\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-4"']),">"]),"\n ",t("span",{
|
||
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 ",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 Two"']),">"]),"\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-message"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"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-item"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"4"']),">"]),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 Four",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 ",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-row"]),">"]),"\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 handleOpen(key, keyPath) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(key, keyPath);\n },\n handleClose(key, keyPath) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(key, keyPath);\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:"menu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},["¶"])," Menu Attribute"])},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",["mode"]),t("td",["menu display mode"]),t("td",["string"]),t("td",["horizontal/vertical"]),t("td",["vertical"])]),t("tr",[t("td",["theme"]),t("td",["theme color"]),t("td",["string"]),t("td",["light/dark"]),t("td",["light"])]),t("tr",[t("td",["default-active"]),t("td",["index of currently active menu"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["default-openeds"]),t("td",["array that contains keys of currently active sub-menus"]),t("td",["Array"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["unique-opened"]),t("td",["whether only one sub-menu can be active"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["menu-trigger"]),t("td",["how sub-menus are triggered, only works when ",t("code",["mode"])," is 'horizontal'"]),t("td",["string"]),t("td",["—"]),t("td",["hover"])]),t("tr",[t("td",["router"]),t("td",["whether ",t("code",["vue-router"])," mode is activated. If true, index will be used as 'path' to activate the route action"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"menu-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},["¶"])," Menu 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",["select"]),t("td",["callback function when menu is activated"]),t("td",["index: index of activated menu, indexPath: index path of activated menu"])]),t("tr",[t("td",["open"]),t("td",["callback function when sub-menu expands"]),t("td",["index: index of expanded sub-menu, indexPath: index path of expanded sub-menu"])]),t("tr",[t("td",["close"]),t("td",["callback function when sub-menu collapses"]),t("td",["index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"submenu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},["¶"])," SubMenu Attribute"])},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",["index"]),t("td",["unique identification"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"menu-item-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},["¶"])," Menu-Item Attribute"])},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",["index"]),t("td",["unique identification"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["route"]),t("td",["Vue Router object"]),t("td",["object"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"menu-group-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},["¶"])," Menu-Group Attribute"])},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",["group title"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(147)},function(s,t,a){var n,e;n=a(148);var l=a(149);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={methods:{open:function(){var s=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(t){s.$message({type:"info",message:"action: "+t})}})},open2:function(){var s=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){setTimeout(function(){s.$message({message:"Delete completed",type:"success"})},200)}).catch(function(){setTimeout(function(){s.$message({message:"Delete canceled",type:"info"})},200)})},open3:function(){var s=this;this.$prompt("Please input your email","Tips",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+\/=?^_`{|}~-]+(?:\.[\w!#$%&'*+\/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(t){var a=t.value;setTimeout(function(){s.$message({type:"success",message:"Your email is:"+a})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"Input canceled"})},200)})},open4:function(){var s=this;this.$msgbox({title:"Message",message:"This is a message",showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Cancel"}).then(function(t){setTimeout(function(){s.$message({type:"info",message:"action: "+t})},200)})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;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-button type="text" @click="open">Click to open the Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$alert('This is a message', 'Title', {\n confirmButtonText: 'OK',\n callback: action => {\n this.$message({\n type: 'info',\n message: `action: ${ action }`\n });\n }\n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open}},["Click to open the Message Box"])]]),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-button type="text" @click="open2">Click to open the Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open2() {\n this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n type: 'warning'\n }).then(() => {\n this.$message({\n type: 'success',\n message: 'Delete completed'\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Delete canceled'\n }); \n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open2}},["Click to open the Message Box"])]]),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-button type="text" @click="open3">Click to open Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open3() {\n this.$prompt('Please input your e-mail', 'Tip', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n inputErrorMessage: 'Invalid Email'\n }).then(value => {\n this.$message({\n type: 'success',\n message: 'Your email is:' + value\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Input canceled'\n }); \n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open3}},["Click to open Message Box"])]]),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:'<template>\n <el-button type="text" @click="open4">Click to open Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open4() {\n this.$msgbox({\n title: 'Message',\n message: 'This is a message',\n showCancelButton: true,\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel'\n }).then(action => {\n this.$message({\n type: 'info',\n message: 'action: ' + action\n });\n });\n },\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open4}},["Click to open Message Box"])]]),s._m(16),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(17)])]),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"messagebox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},["¶"])," MessageBox"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},["¶"])," Alert"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Alert interrupts user operation until the user confirms."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Open an alert by calling the ",t("code",["$alert"])," method. It simulates the system's ",t("code",["alert"]),", and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters ",t("code",["message"])," and ",t("code",["title"])," are received. It is worth mentioning that when the box is closed, it returns a ",t("code",["Promise"])," object for further processing. If you are not sure if your target browsers support ",t("code",["Promise"]),", you should import a third party polyfill or use callbacks instead like this example."])},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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open"']),">"]),"Click to open the Message Box",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 open() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$alert(",t("span",{staticClass:"hljs-string"},["'This is a message'"]),", ",t("span",{staticClass:"hljs-string"},["'Title'"]),", {\n ",t("span",{staticClass:"hljs-attr"},["confirmButtonText"]),": ",t("span",{staticClass:"hljs-string"},["'OK'"]),",\n ",t("span",{staticClass:"hljs-attr"},["callback"]),": ",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: ",t("span",{staticClass:"hljs-subst"},["${ action }"]),"`"]),"\n });\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:"confirm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},["¶"])," Confirm"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Confirm is used to ask users' confirmation."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Call ",t("code",["$confirm"])," method to open a confirm, and it simulates the system's ",t("code",["confirm"]),". We can also highly customize Message Box by passing a third attribute ",t("code",["options"])," which is a literal object. The attribute ",t("code",["type"])," indicates the message type, and it's value can be ",t("code",["success"]),", ",t("code",["error"]),", ",t("code",["info"])," and ",t("code",["warning"]),". Note that the second attribute ",t("code",["title"])," must be a ",t("code",["string"]),", and if it is an ",t("code",["object"]),", it will be handled as the attribute ",t("code",["options"]),". Here we use ",t("code",["Promise"])," to handle further processing."])},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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open2"']),">"]),"Click to open the Message Box",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 open2() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$confirm(",t("span",{staticClass:"hljs-string"},["'This will permanently delete the file. Continue?'"]),", ",t("span",{staticClass:"hljs-string"},["'Warning'"]),", {\n ",t("span",{staticClass:"hljs-attr"},["confirmButtonText"]),": ",t("span",{staticClass:"hljs-string"},["'OK'"]),",\n ",t("span",{staticClass:"hljs-attr"},["cancelButtonText"]),": ",t("span",{staticClass:"hljs-string"},["'Cancel'"]),",\n ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'warning'"]),"\n }).then(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["()"])," =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\n ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'success'"]),",\n ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'Delete completed'"]),"\n });\n }).catch(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["()"])," =>"])," {\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"},["'Delete canceled'"]),"\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:"prompt"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},["¶"])," Prompt"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Prompt is used when user input is required."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Call ",t("code",["$prompt"])," method to open a prompt, and it simulates the system's ",t("code",["prompt"]),". You can use ",t("code",["inputPattern"])," parameter to specify your own RegExp pattern. Use ",t("code",["inputValidator"])," to specify validation method, and it should return ",t("code",["Boolean"])," or ",t("code",["String"]),". Returning ",t("code",["false"])," or ",t("code",["String"])," means the validation has failed, and the string returned will be used as the ",t("code",["inputErrorMessage"]),". In addition, you can customize the placeholder of the input box with ",t("code",["inputPlaceholder"])," parameter."])},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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open3"']),">"]),"Click to open Message Box",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"]),".$prompt(",t("span",{staticClass:"hljs-string"},["'Please input your e-mail'"]),", ",t("span",{staticClass:"hljs-string"},["'Tip'"]),", {\n ",t("span",{staticClass:"hljs-attr"},["confirmButtonText"]),": ",t("span",{staticClass:"hljs-string"},["'OK'"]),",\n ",t("span",{staticClass:"hljs-attr"},["cancelButtonText"]),": ",t("span",{staticClass:"hljs-string"},["'Cancel'"]),",\n ",t("span",{staticClass:"hljs-attr"},["inputPattern"]),": ",t("span",{staticClass:"hljs-regexp"},["/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/"]),",\n ",t("span",{staticClass:"hljs-attr"},["inputErrorMessage"]),": ",t("span",{staticClass:"hljs-string"},["'Invalid Email'"]),"\n }).then(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["value"])," =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\n ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'success'"]),",\n ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'Your email is:'"])," + value\n });\n }).catch(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["()"])," =>"])," {\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"},["'Input canceled'"]),"\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:"customization"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},["¶"])," Customization"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Can be customized to show various content."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["The three methods mentioned above are repackagings of the ",t("code",["$msgbox"])," method. This example calls ",t("code",["$msgbox"])," method directly using the ",t("code",["showCancelButton"])," attribute, which is used to indicate if a cancel button is displayed. Besides we can use ",t("code",["cancelButtonClass"])," to add a custom style and ",t("code",["cancelButtonText"])," to customize the button text. The confirm button also has these fields. A complete list of fields can be found at the end of this documentation."])},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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open4"']),">"]),"Click to open Message Box",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 open4() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$msgbox({\n ",t("span",{staticClass:"hljs-attr"},["title"]),": ",t("span",{staticClass:"hljs-string"},["'Message'"]),",\n ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'This is a message'"]),",\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"},["'OK'"]),",\n ",t("span",{staticClass:"hljs-attr"},["cancelButtonText"]),": ",t("span",{staticClass:"hljs-string"},["'Cancel'"]),"\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:"global-method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},["¶"])," Global method"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Element has added the following global methods for Vue.prototype: ",t("code",["$msgbox"]),", ",t("code",["$alert"]),", ",t("code",["$confirm"])," and ",t("code",["$prompt"]),". So in a vue instance you can call ",t("code",["MessageBox"])," like what we did in this page."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"local-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},["¶"])," Local import"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Import ",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",["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, this is a error message.")},open5:function(){this.$message({showClose:!0,message:"This is a message"})},open6:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open7:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;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-button :plain="true" @click="open">Show message</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$message('This is a message.');\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open}},["Show message"])]]),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-button :plain="true" @click="open2">success</el-button>\n <el-button :plain="true" @click="open3">warning</el-button>\n <el-button :plain="true" @click="open">message</el-button>\n <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$message('This is a message');\n },\n open2() {\n this.$message({\n message: 'Congrats, this is a success message.',\n type: 'success'\n });\n },\n\n open3() {\n this.$message({\n message: 'Warning, this is a warning message.',\n type: 'warning'\n });\n },\n\n open4() {\n this.$message.error('Oops, this is a error message.');\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open2}},["success"]),t("el-button",{attrs:{plain:!0},on:{click:s.open3}},["warning"]),t("el-button",{attrs:{plain:!0},on:{click:s.open}},["message"]),t("el-button",{attrs:{plain:!0},on:{click:s.open4}},["error"])]]),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-button :plain="true" @click="open5">message</el-button>\n <el-button :plain="true" @click="open6">success</el-button>\n <el-button :plain="true" @click="open7">warning</el-button>\n <el-button :plain="true" @click="open8">error</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open5() {\n this.$message({\n showClose: true,\n message: 'Congrats, this is a success message.'\n });\n },\n\n open6() {\n this.$message({\n showClose: true,\n message: 'Warning, this is a warning message.',\n type: 'warning'\n });\n },\n\n open7() {\n this.$message({\n showClose: true,\n message: 'Oops, this is a error message.',\n type: 'error'\n });\n },\n\n open8() {\n this.$message({\n showClose: true,\n message: 'Oops, this is a error message.',\n type: 'error'\n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open5}},["message"]),t("el-button",{attrs:{plain:!0},on:{click:s.open6}},["success"]),t("el-button",{attrs:{plain:!0},on:{click:s.open7}},["warning"]),t("el-button",{attrs:{plain:!0},on:{click:s.open8}},["error"])]]),s._m(12),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(13)])]),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"message"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},["¶"])," Message"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification."])},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",["Displays at the top, and disappears after 3 seconds."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a ",t("code",["$message"])," method for invoking. Message can take a string as parameter, and it will be shown as the main body."])},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-button"])," ",t("span",{staticClass:"hljs-attr"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open"']),">"]),"Show message",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 open() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message(",t("span",{staticClass:"hljs-string"},["'This is a message.'"]),");\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:"types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},["¶"])," Types"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Used to show the feedback of Success, Warning, Message and Error activities."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["When you need more customizations, Message component can also take an object as parameter. For example, setting value of ",t("code",["type"])," can define different types, and its default is ",t("code",["info"]),". In such cases the main body is passed in as the value of ",t("code",["message"]),". Also, we have registered methods for different types, so you can directly call it without passing a type like ",t("code",["open4"]),"."])},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-button"])," ",t("span",{staticClass:"hljs-attr"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open2"']),">"]),"success",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open3"']),">"]),"warning",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open"']),">"]),"message",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open4"']),">"]),"error",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 open() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message(",t("span",{staticClass:"hljs-string"},["'This is a message'"]),");\n },\n open2() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\n ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'Congrats, this is a success message.'"]),",\n ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'success'"]),"\n });\n },\n\n open3() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\n ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'Warning, this is a warning message.'"]),",\n ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'warning'"]),"\n });\n },\n\n open4() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message.error(",t("span",{staticClass:"hljs-string"},["'Oops, this is a error message.'"]),");\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:"closable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},["¶"])," Closable"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["A close button can be added."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["A default Message cannot be closed manually. If you need a closable message, you can set ",t("code",["showClose"])," field. Besides, same as notification, message has a controllable ",t("code",["duration"]),". Default duration is 3000 ms, and it won't disappear when set to ",t("code",["0"]),"."])},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-button"])," ",t("span",{staticClass:"hljs-attr"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open5"']),">"]),"message",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open6"']),">"]),"success",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open7"']),">"]),"warning",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open8"']),">"]),"error",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 open5() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\n ",t("span",{staticClass:"hljs-attr"},["showClose"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),",\n ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'Congrats, this is a success message.'"]),"\n });\n },\n\n open6() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\n ",t("span",{staticClass:"hljs-attr"},["showClose"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),",\n ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'Warning, this is a warning message.'"]),",\n ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'warning'"]),"\n });\n },\n\n open7() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\n ",t("span",{staticClass:"hljs-attr"},["showClose"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),",\n ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'Oops, this is a error message.'"]),",\n ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'error'"]),"\n });\n },\n\n open8() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\n ",t("span",{staticClass:"hljs-attr"},["showClose"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),",\n ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'Oops, this is a error message.'"]),",\n ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'error'"]),"\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:"global-method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},["¶"])," Global method"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Element has added a global method ",t("code",["$message"])," for Vue.prototype. So in a vue instance you can call ",t("code",["Message"])," like what we did in this page."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"local-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},["¶"])," Local import"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Import ",t("code",["Message"]),":"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},["import"])," { Message } ",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",["In this case you should call ",t("code",["Message(options)"]),". We have also registered methods for different types, e.g. ",t("code",["Message.success(options)"]),"."])},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",["message"]),t("td",["message text"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["type"]),t("td",["message type"]),t("td",["string"]),t("td",["success/warning/info/error"]),t("td",["info"])]),t("tr",[t("td",["iconClass"]),t("td",["custom icon's class, overrides ",t("code",["type"])]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["customClass"]),t("td",["custom class name for Message"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["duration"]),t("td",["display duration, millisecond. If set to 0, it will not turn off automatically"]),t("td",["number"]),t("td",["—"]),t("td",["3000"])]),t("tr",[t("td",["showClose"]),t("td",["whether to show a close button"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["onClose"]),t("td",["callback function when closed with the message instance as the parameter"]),t("td",["function"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},["¶"])," Methods"])},function(){var s=this,t=s.$createElement;s._c;return t("p",[t("code",["Message"])," and ",t("code",["this.$message"])," returns the current Message instance. To manually close the instance, you can call ",t("code",["close"])," on it."])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Method"]),t("th",["Description"])])]),t("tbody",[t("tr",[t("td",["close"]),t("td",["close the Message"])])])])}]}},function(s,t,a){s.exports=a(155)},function(s,t,a){var n,e;n=a(156);var l=a(157);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.$notify({title:"Title",message:"This is a reminder"})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})},open3:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open6:function(){this.$notify.error({title:"Error",message:"This is an error message"})},open7:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})},onClose:function(){console.log("Notification is closed")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;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 <el-button plain @click="open">\n Closes automatically\n </el-button>\n <el-button plain @click="open2">\n Won\'t close automatically\n </el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$notify({\n title: 'Title',\n message: 'This is a reminder'\n });\n },\n\n open2() {\n this.$notify({\n title: 'Prompt',\n message: 'This is a message that does not automatically close',\n duration: 0\n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open}},["\n Closes automatically\n "]),t("el-button",{attrs:{plain:""},on:{click:s.open2}},["\n Won't close automatically\n "])]]),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:'<template>\n <el-button plain @click="open3">\n Success\n </el-button>\n <el-button plain @click="open4">\n Warning\n </el-button>\n <el-button plain @click="open5">\n Info\n </el-button>\n <el-button plain @click="open6">\n Error\n </el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open3() {\n this.$notify({\n title: 'Success',\n message: 'This is a success message',\n type: 'success'\n });\n },\n\n open4() {\n this.$notify({\n title: 'Warning',\n message: 'This is a warning message',\n type: 'warning'\n });\n },\n\n open5() {\n this.$notify.info({\n title: 'Info',\n message: 'This is an info message'\n });\n },\n\n open6() {\n this.$notify.error({\n title: 'Error',\n message: 'This is an error message'\n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open3}},["\n Success\n "]),t("el-button",{attrs:{plain:""},on:{click:s.open4}},["\n Warning\n "]),t("el-button",{attrs:{plain:""},on:{click:s.open5}},["\n Info\n "]),t("el-button",{attrs:{plain:""},on:{click:s.open6}},["\n Error\n "])]]),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:'<template>\n <el-button plain @click="open7">\n Notification with offset\n </el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open7() {\n this.$notify.success({\n title: 'Success',\n message: 'This is a success message',\n offset: 100\n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open7}},["\n Notification with offset\n "])]]),s._m(11),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23)])])])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"notification"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},["¶"])," Notification"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Displays a global notification message at the upper right corner of the page."])},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",["Element has registered the ",t("code",["$notify"])," method and it receives an object as its parameter. In the simplest case, you can set the ",t("code",["title"])," field and the",t("code",["message"])," field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting ",t("code",["duration"])," you can control its duration. Specifically, if set to ",t("code",["0"]),", it will not close automatically. Note that ",t("code",["duration"])," receives a ",t("code",["Number"])," in milliseconds."])},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-button"]),"\n ",t("span",{staticClass:"hljs-attr"},["plain"]),"\n ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open"']),">"]),"\n Closes automatically\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"},['"open2"']),">"]),"\n Won't close automatically\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 open() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$notify({\n ",t("span",{staticClass:"hljs-attr"},["title"]),": ",t("span",{staticClass:"hljs-string"},["'Title'"]),",\n ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'This is a reminder'"]),"\n });\n },\n\n open2() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$notify({\n ",t("span",{staticClass:"hljs-attr"},["title"]),": ",t("span",{staticClass:"hljs-string"},["'Prompt'"]),",\n ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'This is a message that does not automatically close'"]),",\n ",t("span",{staticClass:"hljs-attr"},["duration"]),": ",t("span",{staticClass:"hljs-number"},["0"]),"\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-types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-types","aria-hidden":"true"}},["¶"])," With types"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["We provide four types: success, warning, info and error."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Element provides four notification types: ",t("code",["success"]),", ",t("code",["warning"]),", ",t("code",["info"])," and ",t("code",["error"]),". They are set by the ",t("code",["type"])," field, and other values will be ignored. We also registered methods for these types that can be invoked directly like ",t("code",["open5"])," and ",t("code",["open6"])," without passing a ",t("code",["type"])," field."])},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-button"]),"\n ",t("span",{
|
||
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 customize Notification's offset from the top edge of the screen. Note that every Notification instance of the same moment should have the same offset."])},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-button"]),"\n ",t("span",{staticClass:"hljs-attr"},["plain"]),"\n ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open7"']),">"]),"\n Notification with offset\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 open7() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$notify.success({\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"},["offset"]),": ",t("span",{staticClass:"hljs-number"},["100"]),"\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:"global-method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},["¶"])," Global method"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Element has added a global method ",t("code",["$notify"])," for Vue.prototype. So in a vue instance you can call ",t("code",["Notification"])," like what we did in this page."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"local-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},["¶"])," Local import"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Import ",t("code",["Notification"]),":"])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},["import"])," { Notification } ",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",["In this case you should call ",t("code",["Notification(options)"]),". We have also registered methods for different types, e.g. ",t("code",["Notification.success(options)"]),"."])},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"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["message"]),t("td",["description text"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["type"]),t("td",["notification type"]),t("td",["string"]),t("td",["success/warning/info/error"]),t("td",["—"])]),t("tr",[t("td",["iconClass"]),t("td",["custom icon's class. It will be overridden by ",t("code",["type"])]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["customClass"]),t("td",["custom class name for Notification"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["duration"]),t("td",["duration before close. It will not automatically close if set 0"]),t("td",["number"]),t("td",["—"]),t("td",["4500"])]),t("tr",[t("td",["onClose"]),t("td",["callback function when closed"]),t("td",["function"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["offset"]),t("td",["offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset"]),t("td",["number"]),t("td",["—"]),t("td",["0"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},["¶"])," Methods"])},function(){var s=this,t=s.$createElement;s._c;return t("p",[t("code",["Notification"])," and ",t("code",["this.$notify"])," returns the current Message instance. To manually close the instance, you can call ",t("code",["close"])," on it."])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Method"]),t("th",["Description"])])]),t("tbody",[t("tr",[t("td",["close"]),t("td",["close the Notification"])])])])}]}},function(s,t,a){s.exports=a(159)},function(s,t,a){var n,e;n=a(160);var l=a(161);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(67);t.default={data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},methods:{handleSizeChange:function(s){console.log(s+" items per page")},handleCurrentChange:function(s){this.currentPage=s,console.log("current page: "+s)}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[0],a=s[s.length-1];(0,n.addClass)(t,"first"),(0,n.addClass)(a,"last")})}}},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">When you have few pages</span>\n <el-pagination layout="prev, pager, next" :total="50">\n </el-pagination>\n</div>\n<div class="block">\n <span class="demonstration">When you have more than 7 pages</span>\n <el-pagination layout="prev, pager, next" :total="1000">\n </el-pagination>\n </div>\n\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("div",{staticClass:"block"},[s._m(3),t("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})]),t("div",{staticClass:"block"},[s._m(4),t("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})])]),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-pagination small layout="prev, pager, next" :total="50">\n</el-pagination>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})]),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:'<template>\n <div class="block">\n <span class="demonstration">Total item count</span>\n <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">Change page size</span>\n <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage2" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="sizes, prev, pager, next" :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">Jump to</span>\n <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage3" :page-size="100" layout="prev, pager, next, jumper" :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">All combined</span>\n <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">\n </el-pagination>\n </div>\n</template>\n\n',script:"\n export default {\n methods: {\n handleSizeChange(val) {\n console.log(`${val} items per page`);\n },\n handleCurrentChange(val) {\n this.currentPage = val;\n console.log(`current page: ${val}`);\n }\n },\n data() {\n return {\n currentPage1: 5,\n currentPage2: 5,\n currentPage3: 5,\n currentPage4: 4\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("div",{staticClass:"block"},[s._m(13),t("el-pagination",{attrs:{"current-page":s.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})]),t("div",{staticClass:"block"},[s._m(14),t("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})]),t("div",{staticClass:"block"},[s._m(15),t("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})]),t("div",{staticClass:"block"},[s._m(16),t("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})])]]),s._m(17),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(18)])]),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},["¶"])," Pagination"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["If you have too much data to display in one page, use pagination."])},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("span",{staticClass:"demonstration"},["When you have few pages"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["When you have more than 7 pages"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set ",t("code",["layout"])," with different pagination elements you wish to display separated with a comma. Pagination elements are: ",t("code",["prev"])," (a button navigating to the previous page), ",t("code",["next"])," (a button navigating to the next page), ",t("code",["pager"])," (page list), ",t("code",["jumper"])," (a jump-to input), ",t("code",["total"])," (total item count), ",t("code",["size"])," (a select to determine page size) and ",t("code",["->"]),"(every element after this symbol will be pulled to 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"},["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"']),">"]),"When you have few pages",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-pagination"]),"\n ",t("span",{staticClass:"hljs-attr"},["layout"]),"=",t("span",{staticClass:"hljs-string"},['"prev, pager, next"']),"\n ",t("span",{staticClass:"hljs-attr"},[":total"]),"=",t("span",{staticClass:"hljs-string"},['"50"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-pagination"]),">"]),"\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"']),">"]),"When you have more than 7 pages",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-pagination"]),"\n ",t("span",{staticClass:"hljs-attr"},["layout"]),"=",t("span",{staticClass:"hljs-string"},['"prev, pager, next"']),"\n ",t("span",{staticClass:"hljs-attr"},[":total"]),"=",t("span",{staticClass:"hljs-string"},['"1000"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-pagination"]),">"]),"\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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"small-pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#small-pagination","aria-hidden":"true"}},["¶"])," Small Pagination"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use small pagination in the case of limited space."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Just set the ",t("code",["small"])," attribute to ",t("code",["true"])," and the Pagination becomes smaller."])},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-pagination"]),"\n ",t("span",{staticClass:"hljs-attr"},["small"]),"\n ",t("span",{staticClass:"hljs-attr"},["layout"]),"=",t("span",{staticClass:"hljs-string"},['"prev, pager, next"']),"\n ",t("span",{staticClass:"hljs-attr"},[":total"]),"=",t("span",{staticClass:"hljs-string"},['"50"']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-pagination"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"more-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#more-elements","aria-hidden":"true"}},["¶"])," More elements"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Add more modules based on your scenario."])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Total item count"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Change page size"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Jump to"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["All combined"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["This example is a complete use case. It uses ",t("code",["size-change"])," and ",t("code",["current-change"])," event to handle page size changes and current page changes. ",t("code",["page-sizes"])," accepts an array of integers, each of which represents a different page size in the ",t("code",["sizes"])," select options, e.g. ",t("code",["[100, 200, 300, 400]"])," indicates that the select will have four options: 100, 200, 300 or 400 items per page."])},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"']),">"]),"Total item count",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-pagination"]),"\n ",t("span",{staticClass:"hljs-attr"},["@size-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleSizeChange"']),"\n ",t("span",{staticClass:"hljs-attr"},["@current-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleCurrentChange"']),"\n ",t("span",{staticClass:"hljs-attr"},[":current-page"]),"=",t("span",{staticClass:"hljs-string"},['"currentPage1"']),"\n ",t("span",{staticClass:"hljs-attr"},[":page-size"]),"=",t("span",{staticClass:"hljs-string"},['"100"']),"\n ",t("span",{staticClass:"hljs-attr"},["layout"]),"=",t("span",{staticClass:"hljs-string"},['"total, prev, pager, next"']),"\n ",t("span",{staticClass:"hljs-attr"},[":total"]),"=",t("span",{staticClass:"hljs-string"},['"1000"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-pagination"]),">"]),"\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"']),">"]),"Change page size",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-pagination"]),"\n ",t("span",{staticClass:"hljs-attr"},["@size-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleSizeChange"']),"\n ",t("span",{staticClass:"hljs-attr"},["@current-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleCurrentChange"']),"\n ",t("span",{staticClass:"hljs-attr"},[":current-page"]),"=",t("span",{staticClass:"hljs-string"},['"currentPage2"']),"\n ",t("span",{staticClass:"hljs-attr"},[":page-sizes"]),"=",t("span",{staticClass:"hljs-string"},['"[100, 200, 300, 400]"']),"\n ",t("span",{staticClass:"hljs-attr"},[":page-size"]),"=",t("span",{staticClass:"hljs-string"},['"100"']),"\n ",t("span",{staticClass:"hljs-attr"},["layout"]),"=",t("span",{staticClass:"hljs-string"},['"sizes, prev, pager, next"']),"\n ",t("span",{staticClass:"hljs-attr"},[":total"]),"=",t("span",{staticClass:"hljs-string"},['"1000"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-pagination"]),">"]),"\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"']),">"]),"Jump to",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-pagination"]),"\n ",t("span",{staticClass:"hljs-attr"},["@size-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleSizeChange"']),"\n ",t("span",{staticClass:"hljs-attr"},["@current-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleCurrentChange"']),"\n ",t("span",{staticClass:"hljs-attr"},[":current-page"]),"=",t("span",{staticClass:"hljs-string"},['"currentPage3"']),"\n ",t("span",{staticClass:"hljs-attr"},[":page-size"]),"=",t("span",{staticClass:"hljs-string"},['"100"']),"\n ",t("span",{staticClass:"hljs-attr"},["layout"]),"=",t("span",{staticClass:"hljs-string"},['"prev, pager, next, jumper"']),"\n ",t("span",{staticClass:"hljs-attr"},[":total"]),"=",t("span",{staticClass:"hljs-string"},['"1000"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-pagination"]),">"]),"\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"']),">"]),"All combined",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-pagination"]),"\n ",t("span",{staticClass:"hljs-attr"},["@size-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleSizeChange"']),"\n ",t("span",{staticClass:"hljs-attr"},["@current-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleCurrentChange"']),"\n ",t("span",{staticClass:"hljs-attr"},[":current-page"]),"=",t("span",{staticClass:"hljs-string"},['"currentPage4"']),"\n ",t("span",{staticClass:"hljs-attr"},[":page-sizes"]),"=",t("span",{staticClass:"hljs-string"},['"[100, 200, 300, 400]"']),"\n ",t("span",{staticClass:"hljs-attr"},[":page-size"]),"=",t("span",{staticClass:"hljs-string"},['"100"']),"\n ",t("span",{staticClass:"hljs-attr"},["layout"]),"=",t("span",{staticClass:"hljs-string"},['"total, sizes, prev, pager, next, jumper"']),"\n ",t("span",{staticClass:"hljs-attr"},[":total"]),"=",t("span",{staticClass:"hljs-string"},['"400"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-pagination"]),">"]),"\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",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 handleSizeChange(val) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(",t("span",{staticClass:"hljs-string"},["`",t("span",{staticClass:"hljs-subst"},["${val}"])," items per page`"]),");\n },\n handleCurrentChange(val) {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".currentPage = val;\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(",t("span",{staticClass:"hljs-string"},["`current page: ",t("span",{staticClass:"hljs-subst"},["${val}"]),"`"]),");\n }\n },\n data() {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n ",t("span",{staticClass:"hljs-attr"},["currentPage1"]),": ",t("span",{staticClass:"hljs-number"},["5"]),",\n ",t("span",{staticClass:"hljs-attr"},["currentPage2"]),": ",t("span",{staticClass:"hljs-number"},["5"]),",\n ",t("span",{staticClass:"hljs-attr"},["currentPage3"]),": ",t("span",{staticClass:"hljs-number"},["5"]),",\n ",t("span",{staticClass:"hljs-attr"},["currentPage4"]),": ",t("span",{staticClass:"hljs-number"},["4"]),"\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",["small"]),t("td",["whether to use small pagination"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["page-size"]),t("td",["item count of each page"]),t("td",["number"]),t("td",["—"]),t("td",["10"])]),t("tr",[t("td",["total"]),t("td",["total item count"]),t("td",["number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["page-count"]),t("td",["total page count. Set either ",t("code",["total"])," or ",t("code",["page-count"])," and pages will be displayed; if you need ",t("code",["page-sizes"]),", ",t("code",["total"])," is required"]),t("td",["number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["current-page"]),t("td",["current page number"]),t("td",["number"]),t("td",["—"]),t("td",["1"])]),t("tr",[t("td",["layout"]),t("td",["layout of Pagination, elements separated with a comma"]),t("td",["string"]),t("td",[t("code",["sizes"]),", ",t("code",["prev"]),", ",t("code",["pager"]),", ",t("code",["next"]),", ",t("code",["jumper"]),", ",t("code",["->"]),", ",t("code",["total"]),", ",t("code",["slot"])]),t("td",["'prev, pager, next, jumper, ->, total'"])]),t("tr",[t("td",["page-sizes"]),t("td",["options of item count per page"]),t("td",["number[]"]),t("td",["—"]),t("td",["[10, 20, 30, 40, 50, 100]"])])])])},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",["size-change"]),t("td",["triggers when ",t("code",["page-size"])," changes"]),t("td",["the new ",t("code",["page-size"])])]),t("tr",[t("td",["current-change"]),t("td",["triggers when ",t("code",["current-page"])," changes"]),t("td",["the new ",t("code",["current-page"])])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},["¶"])," Slot"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Name"]),t("th",["Description"])])]),t("tbody",[t("tr",[t("td",["—"]),t("td",["custom content. To use this, you need to declare ",t("code",["slot"])," in ",t("code",["layout"])])])])])}]}},function(s,t,a){s.exports=a(163)},function(s,t,a){var n,e;n=a(164);var l=a(165);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{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",trigger:"click"}},[t("el-table",{attrs:{data:s.gridData}},[t("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),t("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),t("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})])]),t("el-button",{directives:[{name:"popover",rawName:"v-popover:popover4",arg:"popover4"}]},["Click to activate"])]),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>Are you sure to delete this?</p>\n <div style="text-align: right; margin: 0">\n <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>\n <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>\n </div>\n</el-popover>\n\n<el-button v-popover:popover5>Delete</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}}},["cancel"]),t("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){s.visible2=!1}}},["confirm"])])]),t("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},["Delete"])]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(12)])]),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"popover"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},["¶"])," Popover"])},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",["Similar to Tooltip, Popover is also built with ",t("code",["Vue-popper"]),". So for some duplicated attributes, please refer to the documentation of Tooltip."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Add ",t("code",["ref"])," in your popover, then in your button, use ",t("code",["v-popover"])," directive to link the button and the popover. The attribute ",t("code",["trigger"])," is used to define how popover is triggered: ",t("code",["hover"]),", ",t("code",["click"])," or ",t("code",["focus"]),". Alternatively, you can specify reference using a named ",t("code",["slot"]),"."])},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-popover"]),"\n ",t("span",{staticClass:"hljs-attr"},["ref"]),"=",t("span",{staticClass:"hljs-string"},['"popover1"']),"\n ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"top-start"']),"\n ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"Title"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"200"']),"\n ",t("span",{staticClass:"hljs-attr"},["trigger"]),"=",t("span",{staticClass:"hljs-string"},['"hover"']),"\n ",t("span",{staticClass:"hljs-attr"},["content"]),"=",t("span",{staticClass:"hljs-string"},['"this is content, this is content, this is content"']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-popover"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-popover"]),"\n ",t("span",{staticClass:"hljs-attr"},["ref"]),"=",t("span",{staticClass:"hljs-string"},['"popover2"']),"\n ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"bottom"']),"\n ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"Title"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"200"']),"\n ",t("span",{staticClass:"hljs-attr"},["trigger"]),"=",t("span",{staticClass:"hljs-string"},['"click"']),"\n ",t("span",{staticClass:"hljs-attr"},["content"]),"=",t("span",{staticClass:"hljs-string"},['"this is content, this is content, this is content"']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-popover"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["v-popover:popover1"]),">"]),"Hover to activate",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"},["v-popover:popover2"]),">"]),"Click to activate",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-popover"]),"\n ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),"\n ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"Title"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"200"']),"\n ",t("span",{staticClass:"hljs-attr"},["trigger"]),"=",t("span",{staticClass:"hljs-string"},['"focus"']),"\n ",t("span",{staticClass:"hljs-attr"},["content"]),"=",t("span",{staticClass:"hljs-string"},['"this is content, this is content, this is content"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"reference"']),">"]),"Focus to activate",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-popover"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"nested-information"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nested-information","aria-hidden":"true"}},["¶"])," Nested information"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Other components can be nested in popover. Following is an example of nested table."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["replace the ",t("code",["content"])," attribute with a default ",t("code",["slot"]),"."])},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-popover"]),"\n ",t("span",{staticClass:"hljs-attr"},["ref"]),"=",t("span",{staticClass:"hljs-string"},['"popover4"']),"\n ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"400"']),"\n ",t("span",{staticClass:"hljs-attr"},["trigger"]),"=",t("span",{staticClass:"hljs-string"},['"click"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table"])," ",t("span",{staticClass:"hljs-attr"},[":data"]),"=",t("span",{staticClass:"hljs-string"},['"gridData"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"])," ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"150"'])," ",t("span",{staticClass:"hljs-attr"},["property"]),"=",t("span",{staticClass:"hljs-string"},['"date"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"date"']),">"]),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"])," ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"100"'])," ",t("span",{staticClass:"hljs-attr"},["property"]),"=",t("span",{staticClass:"hljs-string"},['"name"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"name"']),">"]),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"])," ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"300"'])," ",t("span",{staticClass:"hljs-attr"},["property"]),"=",t("span",{staticClass:"hljs-string"},['"address"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"address"']),">"]),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"},["el-popover"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["v-popover:popover4"]),">"]),"Click to activate",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"},["gridData"]),": [{\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"},["'Jack'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'New York City'"]),"\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"},["'Jack'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'New York City'"]),"\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"},["'Jack'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'New York City'"]),"\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"},["'Jack'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'New York City'"]),"\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:"nested-operation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nested-operation","aria-hidden":"true"}},["¶"])," Nested operation"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Of course, you can nest other operations. It's more light-weight than using a dialog."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Are you sure to delete this?"])},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-popover"]),"\n ",t("span",{staticClass:"hljs-attr"},["ref"]),"=",t("span",{staticClass:"hljs-string"},['"popover5"']),"\n ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"top"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"160"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"visible2"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["p"]),">"]),"Are you sure to delete this?",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["p"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"text-align: right; margin: 0"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"mini"'])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"visible2 = 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"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"mini"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"visible2 = 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"},["div"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-popover"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["v-popover:popover5"]),">"]),"Delete",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"},["visible2"]),": ",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:"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",["trigger"]),t("td",["how the popover is triggered"]),t("td",["string"]),t("td",["click/focus/hover/manual"]),t("td",["click"])]),t("tr",[t("td",["title"]),t("td",["popover title"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["content"]),t("td",["popover content, can be replaced with a default ",t("code",["slot"])]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["width"]),t("td",["popover width"]),t("td",["string, number"]),t("td",["—"]),t("td",["Min width 150px"])]),t("tr",[t("td",["placement"]),t("td",["popover placement"]),t("td",["string"]),t("td",["top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end"]),t("td",["bottom"])]),t("tr",[t("td",["value(v-model)"]),t("td",["whether popover is visible"]),t("td",["Boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["offset"]),t("td",["popover offset"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["transition"]),t("td",["popover transition animation"]),t("td",["string"]),t("td",["—"]),t("td",["fade-in-linear"])]),t("tr",[t("td",["visible-arrow"]),t("td",["whether a tooltip arrow is displayed or not. For more info, please refer to ",t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},["Vue-popper"])]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["options"]),t("td",["parameters for ",t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},["popper.js"])]),t("td",["object"]),t("td",["please refer to ",t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},["popper.js"])]),t("td",[t("code",["{ boundariesElement: 'body', gpuAcceleration: false }"])])]),t("tr",[t("td",["popper-class"]),t("td",["custom class name for popover"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},["¶"])," Slot"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Name"]),t("th",["Description"])])]),t("tbody",[t("tr",[t("td",["—"]),t("td",["text content of popover"])]),t("tr",[t("td",["reference"]),t("td",["HTML element that triggers popover"])])])])},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",["回调参数"])])]),t("tbody",[t("tr",[t("td",["show"]),t("td",["triggers when popover shows"]),t("td",["-"])]),t("tr",[t("td",["hide"]),t("td",["triggers when popover hides"]),t("td",["-"])])])])}]}},function(s,t,a){s.exports=a(167)},function(s,t,a){var n,e,l=a(168);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,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-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-progress",{attrs:{percentage:0}}),t("el-progress",{attrs:{percentage:70}}),t("el-progress",{attrs:{percentage:100,status:"success"}}),t("el-progress",{attrs:{percentage:50,status:"exception"}})]),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-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})]),s._m(7),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(8)])]),s._m(9),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-progress",{attrs:{type:"circle",percentage:0}}),t("el-progress",{attrs:{type:"circle",percentage:25}}),t("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),t("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})]),s._m(10),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(11)])]),s._m(12),s._m(13)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"progress"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},["¶"])," Progress"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Progress is used to show the progress of current operation, and inform the user the current status."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"linear-progress-bar-external-percentage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-external-percentage","aria-hidden":"true"}},["¶"])," Linear progress bar (external percentage)"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use ",t("code",["percentage"])," attribute to set the percentage. It's ",t("strong",["required"])," and must be between ",t("code",["0-100"]),"."])},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-progress"])," ",t("span",{staticClass:"hljs-attr"},[":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"},[":percentage"]),"=",t("span",{staticClass:"hljs-string"},['"70"']),">"]),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"},[":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"},[":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:"linear-progress-bar-internal-percentage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-internal-percentage","aria-hidden":"true"}},["¶"])," Linear progress bar (internal percentage)"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["In this case the percentage takes no additional space."])},function(){var s=this,t=s.$createElement;s._c;return t("p",[t("code",["stroke-width"])," attribute decides the ",t("code",["width"])," of progress bar, and use ",t("code",["text-inside"])," attribute to put description inside the progress bar."])},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-progress"])," ",t("span",{staticClass:"hljs-attr"},[":text-inside"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},[":stroke-width"]),"=",t("span",{staticClass:"hljs-string"},['"18"'])," ",t("span",{staticClass:"hljs-attr"},[":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"},[":text-inside"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},[":stroke-width"]),"=",t("span",{staticClass:"hljs-string"},['"18"'])," ",t("span",{staticClass:"hljs-attr"},[":percentage"]),"=",t("span",{staticClass:"hljs-string"},['"70"']),">"]),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"},[":text-inside"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},[":stroke-width"]),"=",t("span",{staticClass:"hljs-string"},['"18"'])," ",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"},[":text-inside"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},[":stroke-width"]),"=",t("span",{staticClass:"hljs-string"},['"18"'])," ",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:"circular-progress-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#circular-progress-bar","aria-hidden":"true"}},["¶"])," Circular progress bar"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can specify ",t("code",["type"])," attribute to ",t("code",["circle"])," to use circular progress bar, and use ",t("code",["width"])," attribute to change the size of circle."])},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-progress"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"circle"'])," ",t("span",{staticClass:"hljs-attr"
|
||
},[":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/element-cooking-starter"}},["cooking"])," or ",t("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},["Laravel"]),", we also provide corresponding templates, and you can download and use them as well."]),t("p",["If you prefer not to use them, please read the following."]),t("h3",{attrs:{id:"config-files"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#config-files","aria-hidden":"true"}},["¶"])," Config files"]),t("p",["Create a new project, and its structure should be"]),t("pre",[t("code",{staticClass:"hljs language-text"},["|- src/ --------------------- source code\n |- App.vue\n |- main.js -------------- entry\n|- .babelrc ----------------- babel config\n|- index.html --------------- HTML template\n|- package.json ------------- npm config\n|- README.md ---------------- readme\n|- webpack.config.js -------- webpack config\n"])]),t("p",["Typical configurations for these config files are:"]),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"']),"\n }\n}\n"])]),t("br"),t("p",[t("strong",["webpack.config.js"])]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},["var"])," path = ",t("span",{staticClass:"hljs-built_in"},["require"]),"(",t("span",{staticClass:"hljs-string"},["'path'"]),")\n",t("span",{staticClass:"hljs-keyword"},["var"])," webpack = ",t("span",{staticClass:"hljs-built_in"},["require"]),"(",t("span",{staticClass:"hljs-string"},["'webpack'"]),")\n\n",t("span",{staticClass:"hljs-built_in"},["module"]),".exports = {\n ",t("span",{staticClass:"hljs-attr"},["entry"]),": ",t("span",{staticClass:"hljs-string"},["'./src/main.js'"]),",\n ",t("span",{staticClass:"hljs-attr"},["output"]),": {\n ",t("span",{staticClass:"hljs-attr"},["path"]),": path.resolve(__dirname, ",t("span",{staticClass:"hljs-string"},["'./dist'"]),"),\n ",t("span",{staticClass:"hljs-attr"},["publicPath"]),": ",t("span",{staticClass:"hljs-string"},["'/dist/'"]),",\n ",t("span",{staticClass:"hljs-attr"},["filename"]),": ",t("span",{staticClass:"hljs-string"},["'build.js'"]),"\n },\n ",t("span",{staticClass:"hljs-attr"},["module"]),": {\n ",t("span",{staticClass:"hljs-attr"},["loaders"]),": [\n {\n ",t("span",{staticClass:"hljs-attr"},["test"]),": ",t("span",{staticClass:"hljs-regexp"},["/\\.vue$/"]),",\n ",t("span",{staticClass:"hljs-attr"},["loader"]),": ",t("span",{staticClass:"hljs-string"},["'vue-loader'"]),"\n },\n {\n ",t("span",{staticClass:"hljs-attr"},["test"]),": ",t("span",{staticClass:"hljs-regexp"},["/\\.js$/"]),",\n ",t("span",{staticClass:"hljs-attr"},["loader"]),": ",t("span",{staticClass:"hljs-string"},["'babel-loader'"]),",\n ",t("span",{staticClass:"hljs-attr"},["exclude"]),": ",t("span",{staticClass:"hljs-regexp"},["/node_modules/"]),"\n },\n {\n ",t("span",{staticClass:"hljs-attr"},["test"]),": ",t("span",{staticClass:"hljs-regexp"},["/\\.css$/"]),",\n ",t("span",{staticClass:"hljs-attr"},["loader"]),": ",t("span",{staticClass:"hljs-string"},["'style-loader!css-loader'"]),"\n },\n {\n ",t("span",{staticClass:"hljs-attr"},["test"]),": ",t("span",{staticClass:"hljs-regexp"},["/\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/"]),",\n ",t("span",{staticClass:"hljs-attr"},["loader"]),": ",t("span",{staticClass:"hljs-string"},["'file-loader'"]),"\n },\n {\n ",t("span",{staticClass:"hljs-attr"},["test"]),": ",t("span",{staticClass:"hljs-regexp"},["/\\.(png|jpe?g|gif|svg)(\\?\\S*)?$/"]),",\n ",t("span",{staticClass:"hljs-attr"},["loader"]),": ",t("span",{staticClass:"hljs-string"},["'file-loader'"]),",\n ",t("span",{staticClass:"hljs-attr"},["query"]),": {\n ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'[name].[ext]?[hash]'"]),"\n }\n }\n ]\n },\n ",t("span",{staticClass:"hljs-attr"},["devServer"]),": {\n ",t("span",{staticClass:"hljs-attr"},["historyApiFallback"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),",\n ",t("span",{staticClass:"hljs-attr"},["noInfo"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),"\n },\n ",t("span",{staticClass:"hljs-attr"},["devtool"]),": ",t("span",{staticClass:"hljs-string"},["'#eval-source-map'"]),"\n}\n\n",t("span",{staticClass:"hljs-keyword"},["if"])," (process.env.NODE_ENV === ",t("span",{staticClass:"hljs-string"},["'production'"]),") {\n ",t("span",{staticClass:"hljs-built_in"},["module"]),".exports.devtool = ",t("span",{staticClass:"hljs-string"},["'#source-map'"]),"\n ",t("span",{staticClass:"hljs-comment"},["// http://vue-loader.vuejs.org/en/workflow/production.html"]),"\n ",t("span",{staticClass:"hljs-built_in"},["module"]),".exports.plugins = (",t("span",{staticClass:"hljs-built_in"},["module"]),".exports.plugins || []).concat([\n ",t("span",{staticClass:"hljs-keyword"},["new"])," webpack.DefinePlugin({\n ",t("span",{staticClass:"hljs-string"},["'process.env'"]),": {\n ",t("span",{staticClass:"hljs-attr"},["NODE_ENV"]),": ",t("span",{staticClass:"hljs-string"},["'\"production\"'"]),"\n }\n }),\n ",t("span",{staticClass:"hljs-keyword"},["new"])," webpack.optimize.UglifyJsPlugin({\n ",t("span",{staticClass:"hljs-attr"},["compress"]),": {\n ",t("span",{staticClass:"hljs-attr"},["warnings"]),": ",t("span",{staticClass:"hljs-literal"},["false"]),"\n }\n })\n ])\n}\n"])]),t("h3",{attrs:{id:"import-element"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-element","aria-hidden":"true"}},["¶"])," Import Element"]),t("p",["You can import Element entirely, or just import what you need. Let's start with fully import."]),t("h4",{attrs:{id:"fully-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fully-import","aria-hidden":"true"}},["¶"])," Fully import"]),t("p",["In main.js:"]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[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"])," ",t("span",{staticClass:"hljs-string"},["'element-ui/lib/theme-default/index.css'"]),"\n",t("span",{staticClass:"hljs-keyword"},["import"])," App ",t("span",{staticClass:"hljs-keyword"},["from"])," ",t("span",{staticClass:"hljs-string"},["'./App.vue'"]),"\n\nVue.use(ElementUI)\n\n",t("span",{staticClass:"hljs-keyword"},["new"])," Vue({\n ",t("span",{staticClass:"hljs-attr"},["el"]),": ",t("span",{staticClass:"hljs-string"},["'#app'"]),",\n ",t("span",{staticClass:"hljs-attr"},["render"]),": ",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["h"])," =>"])," h(App)\n})\n"])]),t("p",["The above imports Element entirely. Note that CSS file needs to be imported separately."]),t("h4",{attrs:{id:"on-demand"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},["¶"])," On demand"]),t("p",["With the help of ",t("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},["babel-plugin-component"]),", we can import components we actually need, making the project smaller than otherwise."]),t("p",["First, install babel-plugin-component:"]),t("pre",[t("code",{staticClass:"hljs language-bash"},["npm install babel-plugin-component -D\n"])]),t("p",["Then edit .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 ",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-default"']),"\n }\n ]]]\n}\n"])]),t("p",["Next, if you need Button and Select, edit main.js:"]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[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"])," { Button, Select } ",t("span",{staticClass:"hljs-keyword"},["from"])," ",t("span",{staticClass:"hljs-string"},["'element-ui'"]),"\n",t("span",{staticClass:"hljs-keyword"},["import"])," App ",t("span",{staticClass:"hljs-keyword"},["from"])," ",t("span",{staticClass:"hljs-string"},["'./App.vue'"]),"\n\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n",t("span",{staticClass:"hljs-comment"},["/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */"]),"\n\n",t("span",{staticClass:"hljs-keyword"},["new"])," Vue({\n ",t("span",{staticClass:"hljs-attr"},["el"]),": ",t("span",{staticClass:"hljs-string"},["'#app'"]),",\n ",t("span",{staticClass:"hljs-attr"},["render"]),": ",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["h"])," =>"])," h(App)\n})\n"])]),t("h3",{attrs:{id:"start-coding"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#start-coding","aria-hidden":"true"}},["¶"])," Start coding"]),t("p",["Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode:"]),t("pre",[t("code",{staticClass:"hljs language-bash"},[t("span",{staticClass:"hljs-comment"},["# visit localhost:8086"]),"\nnpm run dev\n"])]),t("p",["Build:"]),t("pre",[t("code",{staticClass:"hljs language-bash"},["npm run build\n"])]),t("p",["Please refer to each component's documentation to learn how to use them."])])}]}},function(s,t,a){s.exports=a(173)},function(s,t,a){var n,e;n=a(174);var l=a(175);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{radio:"1",radio1:"selected and disabled",radio2:3,radio3:""}}}},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-radio class="radio" v-model="radio" label="1">optionA</el-radio>\n <el-radio class="radio" v-model="radio" label="2">optionB</el-radio>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n radio: '1'\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-radio",{directives:[{name:"model",rawName:"v-model",value:s.radio,expression:"radio"}],staticClass:"radio",attrs:{label:"1"},domProps:{value:s.radio},on:{input:function(t){s.radio=t}}},["optionA"]),t("el-radio",{directives:[{name:"model",rawName:"v-model",value:s.radio,expression:"radio"}],staticClass:"radio",attrs:{label:"2"},domProps:{value:s.radio},on:{input:function(t){s.radio=t}}},["optionB"])]]),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-radio disabled v-model="radio1" label="disabled">optionA</el-radio>\n <el-radio disabled v-model="radio1" label="selected and disabled">optionB</el-radio>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n radio1: 'selected and disabled'\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-radio",{directives:[{name:"model",rawName:"v-model",value:s.radio1,expression:"radio1"}],attrs:{disabled:"",label:"disabled"},domProps:{value:s.radio1},on:{input:function(t){s.radio1=t}}},["optionA"]),t("el-radio",{directives:[{name:"model",rawName:"v-model",value:s.radio1,expression:"radio1"}],attrs:{disabled:"",label:"selected and disabled"},domProps:{value:s.radio1},on:{input:function(t){s.radio1=t}}},["optionB"])]]),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:'<el-radio-group v-model="radio2">\n <el-radio :label="3">optionA</el-radio>\n <el-radio :label="6">optionB</el-radio>\n <el-radio :label="9">optionC</el-radio>\n</el-radio-group>\n\n\n',script:"\n export default {\n data () {\n return {\n radio2: 3\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.radio2,expression:"radio2"}],domProps:{value:s.radio2},on:{input:function(t){s.radio2=t}}},[t("el-radio",{attrs:{label:3}},["optionA"]),t("el-radio",{attrs:{label:6}},["optionB"]),t("el-radio",{attrs:{label:9}},["optionC"])])]),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-radio-group v-model="radio3">\n <el-radio-button label="New York"></el-radio-button>\n <el-radio-button label="Washington"></el-radio-button>\n <el-radio-button label="Los Angeles" :disabled="true"></el-radio-button>\n <el-radio-button label="Chicago"></el-radio-button>\n</el-radio-group>\n\n\n',script:"\n export default {\n data () {\n return {\n radio3: ''\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.radio3,expression:"radio3"}],domProps:{value:s.radio3},on:{input:function(t){s.radio3=t}}},[t("el-radio-button",{attrs:{label:"New York"}}),t("el-radio-button",{attrs:{label:"Washington"}}),t("el-radio-button",{attrs:{label:"Los Angeles",disabled:!0}}),t("el-radio-button",{attrs:{label:"Chicago"}})])]),s._m(16),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(17)])]),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},["¶"])," Radio"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Single selection among multiple options."])},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",["Radio should not have too many options. Otherwise, use the Select component instead."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Creating a radio component is easy, you just need to bind a variable to Radio's ",t("code",["v-model"]),". It equals to the value of ",t("code",["label"])," of the chosen radio. The type of ",t("code",["label"])," is ",t("code",["String"])," or ",t("code",["Number"]),"."])},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-radio"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"radio"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"radio"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"1"']),">"]),"optionA",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"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"radio"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"radio"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),"optionB",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-radio"]),">"]),"\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"},["radio"]),": ",t("span",{staticClass:"hljs-string"},["'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:"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",[t("code",["disabled"])," attribute is used to disable the radio."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You just need to add 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"},["template"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-radio"])," ",t("span",{staticClass:"hljs-attr"},["disabled"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"radio1"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"disabled"']),">"]),"optionA",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"},["disabled"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"radio1"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"selected and disabled"']),">"]),"optionB",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-radio"]),">"]),"\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"},["radio1"]),": ",t("span",{staticClass:"hljs-string"},["'selected and disabled'"]),"\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:"radio-button-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-group","aria-hidden":"true"}},["¶"])," Radio button group"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Suitable for choosing from some mutually exclusive options."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Combine ",t("code",["<el-radio-group>"])," with ",t("code",["<el-radio>"])," to display a radio group. Bind a variable with ",t("code",["v-model"])," of ",t("code",["<el-radio-group>"])," element and set label value in ",t("code",["<el-radio>"]),". It also provides ",t("code",["change"])," event with the current value as its parameter."])},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-radio-group"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"radio2"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-radio"])," ",t("span",{staticClass:"hljs-attr"},[":label"]),"=",t("span",{staticClass:"hljs-string"},['"3"']),">"]),"optionA",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"},['"6"']),">"]),"optionB",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"},['"9"']),">"]),"optionC",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\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"},["radio2"]),": ",t("span",{staticClass:"hljs-number"},["3"]),"\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:"button-style"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},["¶"])," Button style"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Radio with button styles."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You just need to change ",t("code",["<el-radio>"])," element into ",t("code",["<el-radio-button>"])," element. We also provide ",t("code",["size"])," attribute for these buttons: ",t("code",["large"])," and ",t("code",["small"]),"."])},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-radio-group"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"radio3"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-radio-button"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"New York"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-radio-button"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-radio-button"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Washington"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-radio-button"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-radio-button"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Los Angeles"'])," ",t("span",{staticClass:"hljs-attr"},[":disabled"]),"=",t("span",{staticClass:"hljs-string"},['"true"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-radio-button"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-radio-button"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Chicago"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-radio-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-radio-group"]),">"]),"\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"},["radio3"]),": ",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:"radio-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},["¶"])," Radio 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"])]),t("tr",[t("td",["name"]),t("td",["native 'name' attribute"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])]);
|
||
},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 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:{texts:["oops","disappointed","normal","good","great"],"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} points">\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} points"},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"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},["¶"])," Rate"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Used for rating"])},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("span",{staticClass:"demonstration"},["Default"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Color for different levels"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the ",t("code",["colors"])," attribute, and their two thresholds can be defined by ",t("code",["low-threshold"])," and ",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"']),">"]),"Default",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:"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"']),">"]),"Color for different levels",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-rate"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value2"']),"\n ",t("span",{staticClass:"hljs-attr"},[":colors"]),"=",t("span",{staticClass:"hljs-string"},["\"['#99A9BF', '#F7BA2A', '#FF9900']\""]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-rate"]),">"]),"\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"},["value1"]),": ",t("span",{staticClass:"hljs-literal"},["null"]),",\n ",t("span",{staticClass:"hljs-attr"},["value2"]),": ",t("span",{staticClass:"hljs-literal"},["null"]),"\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-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-text","aria-hidden":"true"}},["¶"])," With text"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Using text to indicate rating score"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Add attribute ",t("code",["show-text"])," to display text at the right of Rate. You can assign texts for different scores using ",t("code",["texts"]),". ",t("code",["texts"])," is an array whose length should be equal to the max score ",t("code",["max"]),"."])},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-rate"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value3"']),"\n ",t("span",{staticClass:"hljs-attr"},[":texts"]),"=",t("span",{staticClass:"hljs-string"},["\"['oops', 'disappointed', 'normal', 'good', 'great']\""]),"\n ",t("span",{staticClass:"hljs-attr"},["show-text"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-rate"]),">"]),"\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-literal"},["null"]),"\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:"more-icons"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#more-icons","aria-hidden":"true"}},["¶"])," More icons"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can use different icons to distinguish different rate components."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can customize icons for three different levels using ",t("code",["icon-classes"]),". In this example, we also use ",t("code",["void-icon-class"])," to set the icon if it is unselected."])},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-rate"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value4"']),"\n ",t("span",{staticClass:"hljs-attr"},[":icon-classes"]),"=",t("span",{staticClass:"hljs-string"},["\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\""]),"\n ",t("span",{staticClass:"hljs-attr"},["void-icon-class"]),"=",t("span",{staticClass:"hljs-string"},['"icon-rate-face-off"']),"\n ",t("span",{staticClass:"hljs-attr"},[":colors"]),"=",t("span",{staticClass:"hljs-string"},["\"['#99A9BF', '#F7BA2A', '#FF9900']\""]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-rate"]),">"]),"\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-literal"},["null"]),"\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:"read-only"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#read-only","aria-hidden":"true"}},["¶"])," Read-only"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Read-only Rate is for displaying rating score. Half star is supported."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use attribute ",t("code",["disabled"])," to make the component read-only. Add ",t("code",["show-text"])," to display the rating score at the right side. Additionally, you can use attribute ",t("code",["text-template"])," to provide a text template. It must contain ",t("code",["{value}"]),", and ",t("code",["{value}"])," will be replaced with the rating score."])},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-rate"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value5"']),"\n ",t("span",{staticClass:"hljs-attr"},["disabled"]),"\n ",t("span",{staticClass:"hljs-attr"},["show-text"]),"\n ",t("span",{staticClass:"hljs-attr"},["text-color"]),"=",t("span",{staticClass:"hljs-string"},['"#ff9900"']),"\n ",t("span",{staticClass:"hljs-attr"},["text-template"]),"=",t("span",{staticClass:"hljs-string"},['"{value} points"']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-rate"]),">"]),"\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"},["value5"]),": ",t("span",{staticClass:"hljs-number"},["3.7"]),"\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",["max"]),t("td",["max rating score"]),t("td",["number"]),t("td",["—"]),t("td",["5"])]),t("tr",[t("td",["disabled"]),t("td",["whether Rate is read-only"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["allow-half"]),t("td",["whether picking half start is allowed"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["low-threshold"]),t("td",["threshold value between low and medium level. The value itself will be included in low level"]),t("td",["number"]),t("td",["—"]),t("td",["2"])]),t("tr",[t("td",["high-threshold"]),t("td",["threshold value between medium and high level. The value itself will be included in high level"]),t("td",["number"]),t("td",["—"]),t("td",["4"])]),t("tr",[t("td",["colors"]),t("td",["color array for icons. It should have 3 elements, each of which corresponds with a score level"]),t("td",["array"]),t("td",["—"]),t("td",["['#F7BA2A', '#F7BA2A', '#F7BA2A']"])]),t("tr",[t("td",["void-color"]),t("td",["color of unselected icons"]),t("td",["string"]),t("td",["—"]),t("td",["#C6D1DE"])]),t("tr",[t("td",["disabled-void-color"]),t("td",["color of unselected read-only icons"]),t("td",["string"]),t("td",["—"]),t("td",["#EFF2F7"])]),t("tr",[t("td",["icon-classes"]),t("td",["array of class names of icons. It should have 3 elements, each of which corresponds with a score level"]),t("td",["array"]),t("td",["—"]),t("td",["['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']"])]),t("tr",[t("td",["void-icon-class"]),t("td",["class name of unselected icons"]),t("td",["string"]),t("td",["—"]),t("td",["el-icon-star-off"])]),t("tr",[t("td",["disabled-void-icon-class"]),t("td",["class name of unselected read-only icons"]),t("td",["string"]),t("td",["—"]),t("td",["el-icon-star-on"])]),t("tr",[t("td",["show-text"]),t("td",["whether to display texts"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["text-color"]),t("td",["color of texts"]),t("td",["string"]),t("td",["—"]),t("td",["1F2D3D"])]),t("tr",[t("td",["texts"]),t("td",["text array"]),t("td",["array"]),t("td",["—"]),t("td",["['极差', '失望', '一般', '满意', '惊喜']"])]),t("tr",[t("td",["text-template"]),t("td",["text template when the component is read-only"]),t("td",["string"]),t("td",["—"]),t("td",["{value}"])])])])},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 rate value is changed"]),t("td",["value after changing"])])])])}]}},function(s,t,a){s.exports=a(181)},function(s,t,a){var n,e;n=a(182);var l=a(183);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{list:null,options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],options2:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],options3:[{label:"Popular cities",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"City Name",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],options4:[],options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value:"",value2:"",value3:"",value4:"",value5:[],value6:"",value7:"",value8:"",value9:[],value10:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(s){return{value:s,label:s}})},methods:{remoteMethod:function(s){var t=this;""!==s?(this.loading=!0,setTimeout(function(){t.loading=!1,t.options4=t.list.filter(function(t){return t.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;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 <el-select v-model="value" placeholder="Select">\n <el-option v-for="item in options" :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 options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value: ''\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value,expression:"value"}],attrs:{placeholder:"Select"},domProps:{value:s.value},on:{input:function(t){s.value=t}}},[s._l(s.options,function(s){return t("el-option",{attrs:{label:s.label},domProps:{value:s.value}})})])]]),s._m(3),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(4)])]),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value2" placeholder="Select">\n <el-option v-for="item in options2" :label="item.label" :value="item.value" :disabled="item.disabled">\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n options2: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2',\n disabled: true\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value2: ''\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{placeholder:"Select"},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}},[s._l(s.options2,function(s){return t("el-option",{attrs:{label:s.label,disabled:s.disabled},domProps:{value:s.value}})})])]]),s._m(6),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(7)])]),s._m(8),s._m(9),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value3" disabled placeholder="Select">\n <el-option v-for="item in options" :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 options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value3: ''\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{disabled:"",placeholder:"Select"},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}},[s._l(s.options,function(s){return t("el-option",{attrs:{label:s.label},domProps:{value:s.value}})})])]]),s._m(10),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(11)])]),s._m(12),s._m(13),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value4" clearable placeholder="Select">\n <el-option v-for="item in options" :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 options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value4: ''\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],attrs:{clearable:"",placeholder:"Select"},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}},[s._l(s.options,function(s){return t("el-option",{attrs:{label:s.label},domProps:{value:s.value}})})])]]),s._m(14),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(15)])]),s._m(16),s._m(17),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value5" multiple placeholder="Select">\n <el-option v-for="item in options" :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 options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value5: []\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value5,expression:"value5"}],attrs:{multiple:"",placeholder:"Select"},domProps:{value:s.value5},on:{input:function(t){s.value5=t}}},[s._l(s.options,function(s){return t("el-option",{attrs:{label:s.label},domProps:{value:s.value}})})])]]),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:'<template>\n <el-select v-model="value6" placeholder="Select">\n <el-option v-for="item in cities" :label="item.label" :value="item.value">\n <span style="float: left">{{ item.label }}</span>\n <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n cities: [{\n value: 'Beijing',\n label: 'Beijing'\n }, {\n value: 'Shanghai',\n label: 'Shanghai'\n }, {\n value: 'Nanjing',\n label: 'Nanjing'\n }, {\n value: 'Chengdu',\n label: 'Chengdu'\n }, {\n value: 'Shenzhen',\n label: 'Shenzhen'\n }, {\n value: 'Guangzhou',\n label: 'Guangzhou'\n }],\n value6: ''\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value6,expression:"value6"}],attrs:{placeholder:"Select"},domProps:{value:s.value6},on:{input:function(t){s.value6=t}}},[s._l(s.cities,function(a){return t("el-option",{attrs:{label:a.label},domProps:{value:a.value}},[t("span",{attrs:{style:"float: left"}},[s._s(a.label)]),t("span",{attrs:{style:"float: right; color: #8492a6; font-size: 13px"}},[s._s(a.value)])])})])]]),s._m(22),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(23)])]),s._m(24),s._m(25),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value7" placeholder="Select">\n <el-option-group v-for="group in options3" :label="group.label">\n <el-option v-for="item in group.options" :label="item.label" :value="item.value">\n </el-option>\n </el-option-group>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n options3: [{\n label: 'Popular cities',\n options: [{\n value: 'Shanghai',\n label: 'Shanghai'\n }, {\n value: 'Beijing',\n label: 'Beijing'\n }]\n }, {\n label: 'City name',\n options: [{\n value: 'Chengdu',\n label: 'Chengdu'\n }, {\n value: 'Shenzhen',\n label: 'Shenzhen'\n }, {\n value: 'Guangzhou',\n label: 'Guangzhou'\n }, {\n value: 'Dalian',\n label: 'Dalian'\n }]\n }],\n value7: ''\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value7,expression:"value7"}],attrs:{placeholder:"Select"},domProps:{value:s.value7},on:{input:function(t){s.value7=t}}},[s._l(s.options3,function(a){return t("el-option-group",{attrs:{label:a.label}},[s._l(a.options,function(s){return t("el-option",{attrs:{label:s.label},domProps:{value:s.value}})})])})])]]),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:'<template>\n <el-select v-model="value8" filterable placeholder="Select">\n <el-option v-for="item in options" :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 options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value8: ''\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value8,expression:"value8"}],attrs:{filterable:"",placeholder:"Select"},domProps:{value:s.value8},on:{input:function(t){s.value8=t}}},[s._l(s.options,function(s){return t("el-option",{attrs:{label:s.label},domProps:{value:s.value}})})])]]),s._m(30),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(31)])]),s._m(32),s._m(33),t("demo-block",{
|
||
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:{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",[t("code",["v-model"])," is the value of ",t("code",["el-option"])," that is currently selected."])},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"},['"value"'])," ",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"},["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:"disabled-option"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},["¶"])," Disabled option"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set the value of ",t("code",["disabled"])," in ",t("code",["el-option"])," to ",t("code",["true"])," to disable this option."])},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"},['"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 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"},["'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 ",t("span",{staticClass:"hljs-attr"},["disabled"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),"\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"},["value2"]),": ",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-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-select","aria-hidden":"true"}},["¶"])," Disabled select"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Disable the whole component."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set ",t("code",["disabled"])," of ",t("code",["el-select"])," to make it disabled."])},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"},['"value3"'])," ",t("span",{staticClass:"hljs-attr"},["disabled"])," ",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"},["value3"]),": ",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:"clearable-single-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clearable-single-select","aria-hidden":"true"}},["¶"])," Clearable single select"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can clear Select using a clear icon."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set ",t("code",["clearable"])," attribute for ",t("code",["el-select"])," and a clear icon will appear. Note that ",t("code",["clearable"])," is only for single select."])},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"},['"value4"'])," ",t("span",{staticClass:"hljs-attr"},["clearable"])," ",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"},["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:"basic-multiple-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-multiple-select","aria-hidden":"true"}},["¶"])," Basic multiple select"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Multiple select uses tags to display selected options."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set ",t("code",["multiple"])," attribute for ",t("code",["el-select"])," to enable multiple mode. In this case, the value of ",t("code",["v-model"])," will be an array of selected options."])},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"},['"value5"'])," ",t("span",{staticClass:"hljs-attr"},["multiple"])," ",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"},["value5"]),": []\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:"custom-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},["¶"])," Custom template"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can customize HTML templates for options."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Insert customized HTML templates into the slot of ",t("code",["el-option"]),"."])},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"},['"value6"'])," ",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 cities"']),"\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"},["span"])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"float: left"']),">"]),t("span",["{{"])," item.label ",t("span",["}}"]),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"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"float: right; color: #8492a6; font-size: 13px"']),">"]),t("span",["{{"])," item.value ",t("span",["}}"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\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"},["cities"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Beijing'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Beijing'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Shanghai'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Shanghai'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Nanjing'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Nanjing'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Chengdu'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Chengdu'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Shenzhen'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Shenzhen'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Guangzhou'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Guangzhou'"]),"\n }],\n ",t("span",{staticClass:"hljs-attr"},["value6"]),": ",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:"grouping"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouping","aria-hidden":"true"}},["¶"])," Grouping"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Display options in groups."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use ",t("code",["el-option-group"])," to group the options, and its ",t("code",["label"])," attribute stands for the name of the group."])},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"},['"value7"'])," ",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-group"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-for"]),"=",t("span",{staticClass:"hljs-string"},['"group in options3"']),"\n ",t("span",{staticClass:"hljs-attr"},[":label"]),"=",t("span",{staticClass:"hljs-string"},['"group.label"']),">"]),"\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 group.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-option-group"]),">"]),"\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"},["options3"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Popular cities'"]),",\n ",t("span",{staticClass:"hljs-attr"},["options"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Shanghai'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Shanghai'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Beijing'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Beijing'"]),"\n }]\n }, {\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'City name'"]),",\n ",t("span",{staticClass:"hljs-attr"},["options"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Chengdu'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Chengdu'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Shenzhen'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Shenzhen'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Guangzhou'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Guangzhou'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Dalian'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Dalian'"]),"\n }]\n }],\n ",t("span",{staticClass:"hljs-attr"},["value7"]),": ",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:"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"},["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",["Enter keywords and search data from server."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set the value of ",t("code",["filterable"])," and ",t("code",["remote"])," with ",t("code",["true"])," to enable remote search, and you should pass the ",t("code",["remote-method"]),". ",t("code",["remote-method"])," is a ",t("code",["Function"])," that gets called when the input value changes, and its parameter is the current input value. Note that if ",t("code",["el-option"])," is rendered with the ",t("code",["v-for"])," directive, you should add the ",t("code",["key"])," attribute for ",t("code",["el-option"]),". Its value needs to be unique, such as ",t("code",["item.value"])," in the following example."])},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"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value9"']),"\n ",t("span",{staticClass:"hljs-attr"},["multiple"]),"\n ",t("span",{staticClass:"hljs-attr"},["filterable"]),"\n ",t("span",{staticClass:"hljs-attr"},["remote"]),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Please enter a keyword"']),"\n ",t("span",{staticClass:"hljs-attr"},[":remote-method"]),"=",t("span",{staticClass:"hljs-string"},['"remoteMethod"']),"\n ",t("span",{staticClass:"hljs-attr"},[":loading"]),"=",t("span",{staticClass:"hljs-string"},['"loading"']),">"]),"\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 options4"']),"\n ",t("span",{staticClass:"hljs-attr"},[":key"]),"=",t("span",{staticClass:"hljs-string"},['"item.value"']),"\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"},["options4"]),": [],\n ",t("span",{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"]),".loading = ",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"]),".loading = ",t("span",{staticClass:"hljs-literal"},["false"]),";\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".options4 = ",t("span",{staticClass:"hljs-keyword"},["this"]),".list.filter(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["item"])," =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > ",t("span",{staticClass:"hljs-number"},["-1"]),";\n });\n }, ",t("span",{staticClass:"hljs-number"},["200"]),");\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".options4 = [];\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:"create-new-items"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#create-new-items","aria-hidden":"true"}},["¶"])," Create new items"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Create and select new items that are not included in select options"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["By using the ",t("code",["allow-create"])," attribute, users can create new items by typing in the input box. Note that for ",t("code",["allow-create"])," to work, ",t("code",["filterable"])," must be ",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 ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-select"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value10"']),"\n ",t("span",{staticClass:"hljs-attr"},["multiple"]),"\n ",t("span",{staticClass:"hljs-attr"},["filterable"]),"\n ",t("span",{staticClass:"hljs-attr"},["allow-create"]),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Choose tags for your article"']),">"]),"\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 options5"']),"\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"},["options5"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'HTML'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'HTML'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'CSS'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'CSS'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'JavaScript'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'JavaScript'"]),"\n }],\n ",t("span",{staticClass:"hljs-attr"},["value10"]),": []\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:"select-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},["¶"])," Select 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",["multiple"]),t("td",["whether multiple-select is activated"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["disabled"]),t("td",["whether Select is disabled"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["size"]),t("td",["size of Input"]),t("td",["string"]),t("td",["large/small/mini"]),t("td",["—"])]),t("tr",[t("td",["clearable"]),t("td",["whether single select can be cleared"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["multiple-limit"]),t("td",["maximum number of options user can select when ",t("code",["multiple"])," is ",t("code",["true"]),". No limit when set to 0"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["name"]),t("td",["the name attribute of select input"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["placeholder"]),t("td",["placeholder"]),t("td",["string"]),t("td",["—"]),t("td",["Select"])]),t("tr",[t("td",["filterable"]),t("td",["whether Select is filterable"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["allow-create"]),t("td",["whether creating new items is allowed. To use this, ",t("code",["filterable"])," must be true"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["filter-method"]),t("td",["custom filter method"]),t("td",["function"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["remote"]),t("td",["whether options are loaded from server"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["remote-method"]),t("td",["custom remote search method"]),t("td",["function"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["loading"]),t("td",["whether Select is loading data from server"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["loading-text"]),t("td",["displayed text while loading data from server"]),t("td",["string"]),t("td",["—"]),t("td",["Loading"])]),t("tr",[t("td",["no-match-text"]),t("td",["displayed text when no data matches the filtering query"]),t("td",["string"]),t("td",["—"]),t("td",["No matching data"])]),t("tr",[t("td",["no-data-text"]),t("td",["displayed text when there is no options"]),t("td",["string"]),t("td",["—"]),t("td",["No data"])]),t("tr",[t("td",["popper-class"]),t("td",["custom class name for Select's dropdown"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"select-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},["¶"])," Select 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 selected value changes"]),t("td",["current selected value"])]),t("tr",[t("td",["visible-change"]),t("td",["triggers when the dropdown appears/disappears"]),t("td",["true when it appears, and false otherwise"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"option-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},["¶"])," Option 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",["label"]),t("td",["name of the group"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["disabled"]),t("td",["whether to disable all options in this group"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"option-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},["¶"])," Option 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",["value"]),t("td",["value of option"]),t("td",["string/number/object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["label"]),t("td",["label of option, same as ",t("code",["value"])," if omitted"]),t("td",["string/number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["disabled"]),t("td",["whether option is disabled"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])}]}},function(s,t,a){s.exports=a(185)},function(s,t,a){var n,e;n=a(186);var l=a(187);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:0,value2:50,value3:42,value4:0,value5:0,value6: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),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">Default value</span>\n <el-slider v-model="value1"></el-slider> \n </div>\n <div class="block">\n <span class="demonstration">Customized initial value</span>\n <el-slider v-model="value2"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">Disabled</span>\n <el-slider v-model="value3" disabled></el-slider>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value1: 0,\n value2: 50,\n value3: 42\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("div",{staticClass:"block"},[s._m(4),t("el-slider",{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(5),t("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})]),t("div",{staticClass:"block"},[s._m(6),t("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{disabled:""},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})])]]),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:'<template>\n <div class="block">\n <span class="demonstration">Breakpoints not displayed</span>\n <el-slider v-model="value4" :step="10">\n </el-slider> \n </div>\n <div class="block">\n <span class="demonstration">Breakpoints displayed</span>\n <el-slider v-model="value5" :step="10" show-stops>\n </el-slider>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value4: 0,\n value5: 0\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("div",{staticClass:"block"},[s._m(11),t("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],attrs:{step:10},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}})]),t("div",{staticClass:"block"},[s._m(12),t("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value5,expression:"value5"}],attrs:{step:10,"show-stops":""},domProps:{value:s.value5},on:{input:function(t){s.value5=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:'<template>\n <div class="block">\n <el-slider v-model="value6" show-input>\n </el-slider> \n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value6: 0\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("div",{staticClass:"block"},[t("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value6,expression:"value6"}],attrs:{"show-input":""},domProps:{value:s.value6},on:{input:function(t){s.value6=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:"slider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},["¶"])," Slider"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Drag the slider within a fixed range."])},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",["The current value is displayed when the slider is being dragged."])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Default value"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Customized initial value"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Disabled"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Customize the initial value of the slider by setting the binding 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"},["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"']),">"]),"Default value",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-slider"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value1"']),">"]),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"},["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"']),">"]),"Customized initial value",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-slider"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value2"']),">"]),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"},["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"']),">"]),"Disabled",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-slider"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value3"'])," ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),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"},["value1"]),": ",t("span",{staticClass:"hljs-number"},["0"]),",\n ",t("span",{staticClass:"hljs-attr"},["value2"]),": ",t("span",{staticClass:"hljs-number"},["50"]),",\n ",t("span",{staticClass:"hljs-attr"},["value3"]),": ",t("span",{staticClass:"hljs-number"},["42"]),"\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:"discrete-values"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#discrete-values","aria-hidden":"true"}},["¶"])," Discrete values"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["The options can be discrete."])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Breakpoints not displayed"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["Breakpoints displayed"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set step size with the ",t("code",["step"])," attribute. You can display breakpoints by setting the ",t("code",["show-stops"])," 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"},["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"']),">"]),"Breakpoints not 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"},['"value4"']),"\n ",t("span",{staticClass:"hljs-attr"},[":step"]),"=",t("span",{staticClass:"hljs-string"},['"10"']),">"]),"\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"},["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,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",["min"]),t("td",["minimum value"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["max"]),t("td",["maximum value"]),t("td",["number"]),t("td",["—"]),t("td",["100"])]),t("tr",[t("td",["disabled"]),t("td",["whether Slider is disabled"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["step"]),t("td",["step size"]),t("td",["number"]),t("td",["—"]),t("td",["1"])]),t("tr",[t("td",["show-input"]),t("td",["whether to display an input box"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["show-stops"]),t("td",["whether to display breakpoints"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h2",{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 the value changes"]),t("td",["value after changing"])])])])}]}},function(s,t,a){s.exports=a(189)},function(s,t,a){var n,e;n=a(190);var l=a(191);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{active:0}},methods:{next:function(){this.active++>2&&(this.active=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),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="active" finish-status="success">\n <el-step title="Step 1"></el-step>\n <el-step title="Step 2"></el-step>\n <el-step title="Step 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">Next step</el-button>\n\n\n',script:"\n export default {\n data() {\n return {\n active: 0\n };\n },\n\n methods: {\n next() {\n if (this.active++ > 2) this.active = 0;\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-steps",{attrs:{space:100,active:s.active,"finish-status":"success"}},[t("el-step",{attrs:{title:"Step 1"}}),t("el-step",{attrs:{title:"Step 2"}}),t("el-step",{attrs:{title:"Step 3"}})]),t("el-button",{attrs:{style:"margin-top: 12px;"},on:{click:s.next}},["Next step"])]),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:'<el-steps :space="100" :active="1" finish-status="success">\n <el-step title="Done"></el-step>\n <el-step title="Processing"></el-step>\n <el-step title="Step 3"></el-step>\n</el-steps>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-steps",{attrs:{space:100,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"Done"}}),t("el-step",{attrs:{title:"Processing"}}),t("el-step",{attrs:{title:"Step 3"}})])]),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:'<el-steps :space="200" :active="1">\n <el-step title="Step 1" description="Some description"></el-step>\n <el-step title="Step 2" description="Some description"></el-step>\n <el-step title="Step 3" description="Some description"></el-step>\n</el-steps>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-steps",{attrs:{space:200,active:1}},[t("el-step",{attrs:{title:"Step 1",description:"Some description"}}),t("el-step",{attrs:{title:"Step 2",description:"Some description"}}),t("el-step",{attrs:{title:"Step 3",description:"Some description"}})])]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(12)])]),s._m(13),s._m(14),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="1">\n <el-step title="Step 1" icon="edit"></el-step>\n <el-step title="Step 2" icon="upload"></el-step>\n <el-step title="Step 3" icon="picture"></el-step>\n</el-steps>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-steps",{attrs:{space:100,active:1}},[t("el-step",{attrs:{title:"Step 1",icon:"edit"}}),t("el-step",{attrs:{title:"Step 2",icon:"upload"}}),t("el-step",{attrs:{title:"Step 3",icon:"picture"}})])]),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:'<el-steps :space="100" direction="vertical" :active="1">\n <el-step title="Step 1"></el-step>\n <el-step title="Step 2"></el-step>\n <el-step title="Step 3"></el-step>\n</el-steps>\n',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:"Step 1"}}),t("el-step",{attrs:{title:"Step 2"}}),t("el-step",{attrs:{title:"Step 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"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},["¶"])," Steps"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2."])},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",["Simple step bar."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set ",t("code",["active"])," attribute with ",t("code",["Number"])," type, which indicates the index of steps and starts from 0. You can set ",t("code",["space"])," attribute when the width of the step needs to be fixed which accepts ",t("code",["Boolean"])," type. The unit of the ",t("code",["space"])," attribute is ",t("code",["px"]),". If not set, it is responsive. Setting the ",t("code",["finish-status"])," attribute can change the state of the steps that have been completed."])},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"},['"Step 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"},['"Step 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"},['"Step 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"']),">"]),"Next step",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-keyword"},["if"])," (",t("span",{staticClass:"hljs-keyword"},["this"]),".active++ > ",t("span",{staticClass:"hljs-number"},["2"]),") ",t("span",{staticClass:"hljs-keyword"},["this"]),".active = ",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:"step-bar-that-contains-status"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-that-contains-status","aria-hidden":"true"}},["¶"])," Step bar that contains status"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Shows the status of the step for each step."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use ",t("code",["title"])," attribute to set the name of the step, or override the attribute by using a named ",t("code",["slot"]),". We have listed all the slot names for you at the end of this page."])},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"},['"1"'])," ",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"},['"Done"']),">"]),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"},['"Processing"']),">"]),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"},['"Step 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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"step-bar-with-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-description","aria-hidden":"true"}},["¶"])," Step bar with description"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["There is description for each step."])},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"},['"200"'])," ",t("span",{staticClass:"hljs-attr"},[":active"]),"=",t("span",{staticClass:"hljs-string"},['"1"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-step"])," ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"Step 1"'])," ",t("span",{staticClass:"hljs-attr"},["description"]),"=",t("span",{staticClass:"hljs-string"},['"Some description"']),">"]),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"},['"Step 2"'])," ",t("span",{staticClass:"hljs-attr"},["description"]),"=",t("span",{staticClass:"hljs-string"},['"Some description"']),">"]),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"},['"Step 3"'])," ",t("span",{staticClass:"hljs-attr"},["description"]),"=",t("span",{staticClass:"hljs-string"},['"Some description"']),">"]),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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"step-bar-with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},["¶"])," Step bar with icon"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["A variety of custom icons can be used in the step bar."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["The icon is set by the ",t("code",["icon"])," property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named ",t("code",["slot"]),"."])},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"},['"1"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-step"])," ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"Step 1"'])," ",t("span",{staticClass:"hljs-attr"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"edit"']),">"]),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"},['"Step 2"'])," ",t("span",{staticClass:"hljs-attr"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"upload"']),">"]),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"},['"Step 3"'])," ",t("span",{staticClass:"hljs-attr"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"picture"']),">"]),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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"vertical-step-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vertical-step-bar","aria-hidden":"true"}},["¶"])," Vertical step bar"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Vertical step bars."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You only need to set the ",t("code",["direction"])," attribute to",t("code",["vertical"])," in the ",t("code",["el-steps"])," element."])},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"},["direction"]),"=",t("span",{staticClass:"hljs-string"},['"vertical"'])," ",t("span",{staticClass:"hljs-attr"},[":active"]),"=",t("span",{staticClass:"hljs-string"},['"1"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-step"])," ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"Step 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"},['"Step 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"},['"Step 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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"steps-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},["¶"])," Steps 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",["space"]),t("td",["the spacing of each step, will be responsive if omitted"]),t("td",["Number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["direction"]),t("td",["display direction"]),t("td",["string"]),t("td",["vertical/horizontal"]),t("td",["horizontal"])]),t("tr",[t("td",["active"]),t("td",["current activation step"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["process-status"]),t("td",["status of current step"]),t("td",["string"]),t("td",["wait/process/finish/error/success"]),t("td",["process"])]),t("tr",[t("td",["finish-status"]),t("td",["status of end step"]),t("td",["string"]),t("td",["wait/process/finish/error/success"]),t("td",["finish"])]),t("tr",[t("td",["align-center"]),t("td",["whether step description is centered"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"step-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},["¶"])," Step 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",["title"]),t("td",["step title"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["description"]),t("td",["step description"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["icon"]),t("td",["step icon"]),t("td",["icons provided by Element Icon. Can be overwritten by a named slot if you want to use custom icons"]),t("td",["string"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"step-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},["¶"])," Step Slot"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Name"]),t("th",["Description"])])]),t("tbody",[t("tr",[t("td",["icon"]),t("td",["custom icon"])]),t("tr",[t("td",["title"]),t("td",["step title"])]),t("tr",[t("td",["description"]),t("td",["step description"])])])])}]}},function(s,t,a){s.exports=a(193)},function(s,t,a){var n,e;n=a(194);var l=a(195);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:!0,value2:!0,value3:!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:'<el-switch v-model="value1" on-text="" off-text>\n</el-switch>\n<el-switch v-model="value2" on-color="#13ce66" off-color="#ff4949">\n</el-switch>\n\n\n',script:"\n export default {\n data() {\n return {\n value1: true,\n value2: true\n }\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],attrs:{"on-text":"","off-text":""},domProps:{value:s.value1},on:{input:function(t){s.value1=t}}}),t("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{"on-color":"#13ce66","off-color":"#ff4949"},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})]),s._m(3),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(4)])]),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-switch v-model="value3" on-text="" off-text disabled>\n</el-switch>\n<el-switch v-model="value3" disabled>\n</el-switch>\n\n\n',script:"\n export default {\n data() {\n return {\n value3: true\n }\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{"on-text":"","off-text":"",disabled:""},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}}),t("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{disabled:""},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})]),s._m(6),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(7)])]),s._m(8),s._m(9),s._m(10),s._m(11)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"switch"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},["¶"])," Switch"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Switch is used for switching between two opposing states."])},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",["Bind ",t("code",["v-model"])," to a ",t("code",["Boolean"])," typed variable. You can add ",t("code",["on-text"])," or ",t("code",["off-text"])," attribute to show texts when the component is ",t("code",["on"])," or ",t("code",["off"]),", respectively. The ",t("code",["on-color"])," and ",t("code",["off-color"])," attribute decides the background color in two states."])},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-switch"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value1"']),"\n ",t("span",{staticClass:"hljs-attr"},["on-text"]),"=",t("span",{staticClass:"hljs-string"},['""']),"\n ",t("span",{staticClass:"hljs-attr"},["off-text"]),"=",t("span",{staticClass:"hljs-string"},['""']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-switch"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-switch"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value2"']),"\n ",t("span",{staticClass:"hljs-attr"},["on-color"]),"=",t("span",{staticClass:"hljs-string"},['"#13ce66"']),"\n ",t("span",{staticClass:"hljs-attr"},["off-color"]),"=",t("span",{staticClass:"hljs-string"},['"#ff4949"']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-switch"]),">"]),"\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"},["value1"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),",\n ",t("span",{staticClass:"hljs-attr"},["value2"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),"\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",["Adding the ",t("code",["disabled"])," attribute disables Switch."])},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-switch"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value3"']),"\n ",t("span",{staticClass:"hljs-attr"},["on-text"]),"=",t("span",{staticClass:"hljs-string"},['""']),"\n ",t("span",{staticClass:"hljs-attr"},["off-text"]),"=",t("span",{staticClass:"hljs-string"},['""']),"\n ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-switch"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-switch"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value3"']),"\n ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-switch"]),">"]),"\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-literal"},["true"]),"\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",["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",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}],tableData4:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}],currentRow:null,multipleSelection:[]}},methods:{handleClick:function(){console.log("click")},handleEdit:function(s,t){console.log(s,t)},handleDelete:function(s,t){console.log(s,t)},handleSelectionChange:function(s){this.multipleSelection=s},handleCurrentChange:function(s){this.currentRow=s},formatter:function(s,t){return s.address},filterTag:function(s,t){return t.tag===s},tableRowClassName:function(s,t){return 1===t?"info-row":3===t?"positive-row":""},deleteRow:function(s,t){t.splice(s,1)}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;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-table :data="tableData" style="width: 100%">\n <el-table-column prop="date" label="Date" 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">\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 }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n ",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData,style:"width: 100%"}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Address"}})])]]),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-table :data="tableData" stripe style="width: 100%">\n <el-table-column prop="date" label="Date" 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">\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 }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData,stripe:"",style:"width: 100%"}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Address"}})])]]),s._m(8),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(9)])]),s._m(10),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" 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">\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 }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n",style:null}}},[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",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Address"}})])]]),s._m(11),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(12)])]),s._m(13),s._m(14),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName">\n <el-table-column prop="date" label="Date" 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">\n </el-table-column>\n </el-table>\n</template>\n\n\n\n\n',script:"\n export default {\n methods: {\n tableRowClassName(row, index) {\n if (index === 1) {\n return 'info-row';\n } else if (index === 3) {\n return 'positive-row';\n }\n return '';\n }\n },\n data() {\n return {\n tableData2: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n",style:"\n .el-table .info-row {\n background: #c9e5f5;\n }\n\n .el-table .positive-row {\n background: #e2f0e4;\n }\n"}}},[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:"Date",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Address"}})])]]),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="Date" 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">\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: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n }\n }\n }\n",style:null}}},[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:"Date",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"Address"}})])]]),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="Date" width="150">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="120">\n </el-table-column>\n <el-table-column prop="state" label="State" width="120">\n </el-table-column>\n <el-table-column prop="city" label="City" width="120">\n </el-table-column>\n <el-table-column prop="address" label="Address" width="300">\n </el-table-column>\n <el-table-column prop="zip" label="Zip" width="120">\n </el-table-column>\n <el-table-column inline-template :context="_self" fixed="right" label="Operations" width="120">\n <span>\n <el-button @click="handleClick" type="text" size="small">Detail</el-button>\n <el-button type="text" size="small">Edit</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('click');\n }\n },\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office'\n }]\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData,border:"",style:"width: 100%"}},[t("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),t("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),t("el-table-column",{attrs:{context:s._self,fixed:"right",label:"Operations",width:"120"},inlineTemplate:{render:function(){var s=this,t=s.$createElement;s._c;return t("span",[t("el-button",{attrs:{type:"text",size:"small"},on:{click:s.handleClick}},["Detail"]),t("el-button",{attrs:{type:"text",size:"small"}},["Edit"])])},staticRenderFns:[]}})])]]),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:'<template>\n <el-table :data="tableData3" border style="width: 100%" height="250">\n <el-table-column fixed prop="date" label="Date" width="150">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="120">\n </el-table-column>\n <el-table-column prop="state" label="State" width="120">\n </el-table-column>\n <el-table-column prop="city" label="City" width="120">\n </el-table-column>\n <el-table-column prop="address" label="Address" width="300">\n </el-table-column>\n <el-table-column prop="zip" label="Zip" width="120">\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: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData3,border:"",style:"width: 100%",height:"250"}},[t("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),t("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})])]]),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:'<template>\n <el-table :data="tableData4" border style="width: 100%" max-height="250">\n <el-table-column fixed prop="date" label="Date" width="150">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="120">\n </el-table-column>\n <el-table-column prop="state" label="State" width="120">\n </el-table-column>\n <el-table-column prop="city" label="City" width="120">\n </el-table-column>\n <el-table-column prop="address" label="Address" width="300">\n </el-table-column>\n <el-table-column prop="zip" label="Zip" width="120">\n </el-table-column>\n <el-table-column inline-template :context="_self" fixed="right" label="Operations" width="120">\n <span>\n <el-button @click.native.prevent="deleteRow($index, tableData4)" type="text" size="small">\n Remove\n </el-button>\n </span>\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n methods: {\n deleteRow(index, rows) {\n rows.splice(index, 1);\n }\n },\n data() {\n return {\n tableData4: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData4,border:"",style:"width: 100%","max-height":"250"}},[t("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),t("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),t("el-table-column",{attrs:{context:s._self,fixed:"right",label:"Operations",width:"120"},inlineTemplate:{render:function(){var s=this,t=s.$createElement;s._c;return t("span",[t("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(t){t.preventDefault(),s.deleteRow(s.$index,s.tableData4)}}},["\n Remove\n "])])},staticRenderFns:[]}})])]]),s._m(31),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(32)])]),s._m(33),s._m(34),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData3" border style="width: 100%">\n <el-table-column prop="date" label="Date" width="150">\n </el-table-column>\n <el-table-column label="Delivery Info">\n <el-table-column prop="name" label="Name" width="120">\n </el-table-column>\n <el-table-column label="Address Info">\n <el-table-column prop="state" label="State" width="120">\n </el-table-column>\n <el-table-column prop="city" label="City" width="120">\n </el-table-column>\n <el-table-column prop="address" label="Address" width="300">\n </el-table-column>\n <el-table-column prop="zip" label="Zip" width="120">\n </el-table-column>\n </el-table-column>\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: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData3,border:"",style:"width: 100%"}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),t("el-table-column",{attrs:{label:"Delivery Info"}},[t("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),t("el-table-column",{attrs:{label:"Address Info"}},[t("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})])])])]]),s._m(35),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(36)])]),s._m(37),s._m(38),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">\n <el-table-column type="index" width="50">\n </el-table-column>\n <el-table-column property="date" label="Date" width="120">\n </el-table-column>\n <el-table-column property="name" label="Name" width="120">\n </el-table-column>\n <el-table-column property="address" label="Address">\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 }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n currentRow: null\n }\n },\n\n methods: {\n handleCurrentChange(val) {\n this.currentRow = val;\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData,"highlight-current-row":"",style:"width: 100%"},on:{"current-change":s.handleCurrentChange}},[t("el-table-column",{attrs:{type:"index",width:"50"}}),t("el-table-column",{attrs:{property:"date",label:"Date",width:"120"}}),t("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),t("el-table-column",{attrs:{property:"address",label:"Address"}})])]]),s._m(39),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(40)])]),s._m(41),s._m(42),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData3" border selection-mode="multiple" style="width: 100%" @selection-change="handleSelectionChange">\n <el-table-column type="selection" width="55">\n </el-table-column>\n <el-table-column inline-template label="Date" width="120">\n <div>{{ row.date }}</div>\n </el-table-column>\n <el-table-column property="name" label="Name" width="120">\n </el-table-column>\n <el-table-column property="address" label="Address" show-overflow-tooltip>\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: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n multipleSelection: []\n }\n },\n\n methods: {\n handleSelectionChange(val) {\n this.multipleSelection = val;\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData3,border:"","selection-mode":"multiple",style:"width: 100%"},on:{"selection-change":s.handleSelectionChange}},[t("el-table-column",{attrs:{type:"selection",width:"55"}}),t("el-table-column",{attrs:{label:"Date",width:"120"},inlineTemplate:{render:function(){var s=this,t=s.$createElement;s._c;return t("div",[s._s(s.row.date)])},staticRenderFns:[]}}),t("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),t("el-table-column",{attrs:{property:"address",label:"Address","show-overflow-tooltip":""}})])]]),s._m(43),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(44)])]),s._m(45),s._m(46),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>\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 }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n },\n methods: {\n formatter(row, column) {\n return row.address;\n }\n }\n }\n",
|
||
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: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n },\n methods: {\n handleEdit(index, row) {\n console.log(index, row);\n },\n handleDelete(index, row) {\n console.log(index, row);\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData,border:"",style:"width: 100%"}},[t("el-table-column",{attrs:{label:"Date",width:"180"},inlineTemplate:{render:function(){var s=this,t=s.$createElement;s._c;return t("div",[t("el-icon",{attrs:{name:"time"}}),t("span",{attrs:{style:"margin-left: 10px"}},[s._s(s.row.date)])])},staticRenderFns:[]}}),t("el-table-column",{attrs:{label:"Name",width:"180"},inlineTemplate:{render:function(){var s=this,t=s.$createElement;s._c;return t("el-popover",{attrs:{trigger:"hover",placement:"top"}},[t("p",["Name: "+s._s(s.row.name)]),t("p",["Addr: "+s._s(s.row.address)]),t("div",{slot:"reference",staticClass:"name-wrapper"},[t("el-tag",[s._s(s.row.name)])])])},staticRenderFns:[]}}),t("el-table-column",{attrs:{context:s._self,label:"Operations"},inlineTemplate:{render:function(){var s=this,t=s.$createElement;s._c;return t("div",[t("el-button",{attrs:{size:"small"},on:{click:function(t){s.handleEdit(s.$index,s.row)}}},["\n Edit\n "]),t("el-button",{attrs:{size:"small",type:"danger"},on:{click:function(t){s.handleDelete(s.$index,s.row)}}},["\n Delete\n "])])},staticRenderFns:[]}})])]]),s._m(55),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(56)])]),s._m(57),s._m(58),s._m(59),s._m(60),s._m(61),s._m(62),s._m(63),s._m(64)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},["¶"])," Table"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Display multiple data with similar format. You can sort, filter, compare your data in a table."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"basic-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-table","aria-hidden":"true"}},["¶"])," Basic table"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Basic table is just for data display."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["After setting attribute ",t("code",["data"])," of ",t("code",["el-table"])," with an object array, you can use ",t("code",["prop"])," (corresponding to a key of the object in ",t("code",["data"])," array) in ",t("code",["el-table-column"])," to insert data to table columns, and set the attribute ",t("code",["label"])," to define the column name. You can also use the attribute ",t("code",["width"])," to define the width of columns."])},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"},["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"},['"Date"']),"\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"},['"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-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 }\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:"striped-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#striped-table","aria-hidden":"true"}},["¶"])," Striped Table"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Striped table makes it easier to distinguish different rows."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Attribute ",t("code",["stripe"])," accepts a ",t("code",["Boolean"]),". If ",t("code",["true"]),", table will be striped."])},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"},["stripe"]),"\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"},['"Date"']),"\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"},['"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-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 }\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-border"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-border","aria-hidden":"true"}},["¶"])," Table with border"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["By default, Table has no vertical border. If you need it, you can set attribute ",t("code",["border"])," to ",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 ",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"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"date"']),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Date"']),"\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"},['"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-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 }\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-status"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-status","aria-hidden":"true"}},["¶"])," Table with status"])},function(){var s=this,t=s.$createElement;s._c;return t("p",['You can highlight your table content to distinguish between "success, information, warning, danger" and other states.'])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use ",t("code",["row-class-name"])," in ",t("code",["el-table"])," to add custom classes to a certain row. Then you can style it with custom classes."])},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"},['"tableData2"']),"\n ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width: 100%"']),"\n ",t("span",{staticClass:"hljs-attr"},[":row-class-name"]),"=",t("span",{staticClass:"hljs-string"},['"tableRowClassName"']),">"]),"\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"},['"Date"']),"\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"},['"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-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"},["style"]),">"]),t("span",{staticClass:"css"},["\n ",t("span",{staticClass:"hljs-selector-class"},[".el-table"])," ",t("span",{staticClass:"hljs-selector-class"},[".info-row"])," {\n ",t("span",{staticClass:"hljs-attribute"},["background"]),": ",t("span",{staticClass:"hljs-number"},["#c9e5f5"]),";\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".el-table"])," ",t("span",{staticClass:"hljs-selector-class"},[".positive-row"])," {\n ",t("span",{staticClass:"hljs-attribute"},["background"]),": ",t("span",{staticClass:"hljs-number"},["#e2f0e4"]),";\n }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["style"]),">"]),"\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 tableRowClassName(row, index) {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (index === ",t("span",{staticClass:"hljs-number"},["1"]),") {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-string"},["'info-row'"]),";\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," ",t("span",{staticClass:"hljs-keyword"},["if"])," (index === ",t("span",{staticClass:"hljs-number"},["3"]),") {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-string"},["'positive-row'"]),";\n }\n ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-string"},["''"]),";\n }\n },\n data() {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n ",t("span",{staticClass:"hljs-attr"},["tableData2"]),": [{\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 }\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-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-header","aria-hidden":"true"}},["¶"])," Table with fixed header"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["When there are too many rows, you can use a fixed header."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["By setting the attribute ",t("code",["height"])," of ",t("code",["el-table"]),", you can fix the table header without any other codes."])},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"},['"tableData3"']),"\n ",t("span",{staticClass:"hljs-attr"},["height"]),"=",t("span",{staticClass:"hljs-string"},['"250"']),"\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"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"date"']),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Date"']),"\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"},['"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-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"},["'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 ",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-string"},['"Date"']),"\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"},['"Name"']),"\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"},['"state"']),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"State"']),"\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"},['"City"']),"\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"},['"Address"']),"\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"},['"Zip"']),"\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"},["inline-template"]),"\n ",t("span",{staticClass:"hljs-attr"},[":context"]),"=",t("span",{staticClass:"hljs-string"},['"_self"']),"\n ",t("span",{staticClass:"hljs-attr"},["fixed"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Operations"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"120"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleClick"'])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"'])," ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"small"']),">"]),"Detail",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"'])," ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"small"']),">"]),"Edit",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-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 ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleClick() {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(",t("span",{staticClass:"hljs-string"},["'click'"]),");\n }\n },\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"},["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 ",t("span",{staticClass:"hljs-attr"},["tag"]),": ",t("span",{staticClass:"hljs-string"},["'Home'"]),"\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"},["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 ",t("span",{staticClass:"hljs-attr"},["tag"]),": ",t("span",{staticClass:"hljs-string"},["'Office'"]),"\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 ",t("span",{staticClass:"hljs-attr"},["tag"]),": ",t("span",{staticClass:"hljs-string"},["'Home'"]),"\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 ",t("span",{staticClass:"hljs-attr"},["tag"]),": ",t("span",{staticClass:"hljs-string"},["'Office'"]),"\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-columns-and-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-columns-and-header","aria-hidden":"true"}},["¶"])," Table with fixed columns and header"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["When you have huge chunks of data to put in a table, you can fix the header and columns at the same time."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Fix columns and header at the same time by combining the above two examples."])},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"},['"tableData3"']),"\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-attr"},["height"]),"=",t("span",{staticClass:"hljs-string"},['"250"']),">"]),"\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-string"},['"Date"']),"\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"},['"Name"']),"\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"},['"state"']),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"State"']),"\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"},['"City"']),"\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"},['"Address"']),"\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"},['"Zip"']),"\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"},["'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-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"},["'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 }\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:"fluid-height-table-with-fixed-header-and-columns"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fluid-height-table-with-fixed-header-and-columns","aria-hidden":"true"}},["¶"])," Fluid-height Table with fixed header (and columns)"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["By setting the attribute ",t("code",["max-height"])," of ",t("code",["el-table"]),", you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height 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-table"]),"\n ",t("span",{staticClass:"hljs-attr"},[":data"]),"=",t("span",{staticClass:"hljs-string"},['"tableData4"']),"\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-attr"},["max-height"]),"=",t("span",{staticClass:"hljs-string"},['"250"']),">"]),"\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-string"},['"Date"']),"\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"},['"Name"']),"\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"},['"state"']),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"State"']),"\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"},['"City"']),"\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"},['"Address"']),"\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"},['"Zip"']),"\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"},["inline-template"]),"\n ",t("span",{staticClass:"hljs-attr"},[":context"]),"=",t("span",{staticClass:"hljs-string"},['"_self"']),"\n ",t("span",{staticClass:"hljs-attr"},["fixed"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Operations"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"120"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),"\n ",t("span",{staticClass:"hljs-attr"},["@click.native.prevent"]),"=",t("span",{staticClass:"hljs-string"},['"deleteRow($index, tableData4)"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"']),"\n ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"small"']),">"]),"\n Remove\n ",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-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 ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n deleteRow(index, rows) {\n rows.splice(index, ",t("span",{staticClass:"hljs-number"},["1"]),");\n }\n },\n data() {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n ",t("span",{staticClass:"hljs-attr"},["tableData4"]),": [{\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"},["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-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"},["'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 }\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:"grouping-table-head"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouping-table-head","aria-hidden":"true"}},["¶"])," Grouping table head"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["When the data structure is complex, you can use group header to show the data hierarchy."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Only need to place el-table-column inside a el-table-column, you can achieve group header."])},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"},['"tableData3"']),"\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"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"date"']),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Date"']),"\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"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Delivery Info"']),">"]),"\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"},['"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"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Address Info"']),">"]),"\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"},['"state"']),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"State"']),"\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"},['"City"']),"\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"},['"Address"']),"\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"},['"Zip"']),"\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-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"},["'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-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"},["'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 }\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:"single-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#single-select","aria-hidden":"true"}},["¶"])," Single select"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Single row selection is supported."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Table supports single row selection. You can activate it by adding the ",t("code",["highlight-currnet-row"])," attribute. An event called ",t("code",["current-change"])," will be triggered when row selection changes, and its parameters are the rows after and before this change: ",t("code",["currentRow"])," and ",t("code",["oldCurrentRow"]),". If you need to display row index, you can add a new ",t("code",["el-table-column"])," with its ",t("code",["type"])," attribute assigned to ",t("code",["index"]),", and you will see the index starting from 1."])},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"},['"Date"']),"\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"},['"Name"']),"\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"},['"Address"']),">"]),"\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 ",t("span",{staticClass:"hljs-attr"},["currentRow"]),": ",t("span",{staticClass:"hljs-literal"},["null"]),"\n }\n },\n\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleCurrentChange(val) {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".currentRow = val;\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:"multiple-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#multiple-select","aria-hidden":"true"}},["¶"])," Multiple select"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can also select multiple rows."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Activating multiple selection is easy: simply add an ",t("code",["el-table-column"])," with its ",t("code",["type"])," set to ",t("code",["selection"]),". Apart from multiple selection, this example also uses ",t("code",["inline-template"])," and ",t("code",["show-overflow-tooltip"]),": when the attribute ",t("code",["inline-template"])," is set, you can use custom template inside ",t("code",["el-table-column"]),", and access current row data via ",t("code",["row"]),"; by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute ",t("code",["show-overflow-tooltip"]),", which accepts a ",t("code",["Boolean"])," value. When set ",t("code",["true"]),", the extra content will show in tooltip when hover on the cell."])},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"},['"tableData3"']),"\n ",t("span",{staticClass:"hljs-attr"},["border"]),"\n ",t("span",{staticClass:"hljs-attr"},["selection-mode"]),"=",t("span",{staticClass:"hljs-string"},['"multiple"']),"\n ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width: 100%"']),"\n ",t("span",{staticClass:"hljs-attr"},["@selection-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleSelectionChange"']),">"]),"\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"},['"selection"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"55"']),">"]),"\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"},["inline-template"]),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Date"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"120"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"]),">"]),t("span",["{{"])," row.date ",t("span",["}}"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\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"},['"Name"']),"\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"},['"Address"']),"\n ",t("span",{staticClass:"hljs-attr"},["show-overflow-tooltip"]),">"]),"\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"},["'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 ",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 ",t("span",{staticClass:"hljs-attr"},["multipleSelection"]),": []\n }\n },\n\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleSelectionChange(val) {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".multipleSelection = val;\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:"sorting"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sorting","aria-hidden":"true"}},["¶"])," Sorting"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Sort the data to find or compare data quickly."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set attribute ",t("code",["sortable"])," in a certain column to sort the data based on this column. It accepts ",t("code",["Boolean"])," with a default value ",t("code",["false"]),". In this example we use another attribute named ",t("code",["formatter"])," to format the value of certain columns. It accepts a function which has two parameters: ",t("code",["row"])," and ",t("code",["column"]),". You can handle it according to your own needs."])},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"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"date"']),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Date"']),"\n ",t("span",{staticClass:"hljs-attr"},["sortable"]),"\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"},['"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("code",["el-table-column"])," makes this column filterable. ",t("code",["filters"])," is an array, and ",t("code",["filter-method"])," is a function deciding which rows are displayed. It has two parameters: ",t("code",["value"])," and ",t("code",["row"]),"."])},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"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"date"']),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Date"']),"\n ",t("span",{staticClass:"hljs-attr"},["sortable"]),"\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"},['"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-column"]),"\n ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"tag"']),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Tag"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"100"']),"\n ",t("span",{staticClass:"hljs-attr"},[":filters"]),"=",t("span",{staticClass:"hljs-string"},["\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\""]),"\n ",t("span",{staticClass:"hljs-attr"},[":filter-method"]),"=",t("span",{staticClass:"hljs-string"},['"filterTag"']),"\n ",t("span",{staticClass:"hljs-attr"},["inline-template"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tag"])," ",t("span",{staticClass:"hljs-attr"},[":type"]),"=",t("span",{staticClass:"hljs-string"},["\"row.tag === 'Home' ? 'primary' : 'success'\""])," ",t("span",{staticClass:"hljs-attr"},["close-transition"]),">"]),t("span",["{{"]),"row.tag",t("span",["}}"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\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 ",t("span",{staticClass:"hljs-attr"},["tag"]),": ",t("span",{staticClass:"hljs-string"},["'Home'"]),"\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 ",t("span",{staticClass:"hljs-attr"},["tag"]),": ",t("span",{staticClass:"hljs-string"},["'Office'"]),"\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 ",t("span",{staticClass:"hljs-attr"},["tag"]),": ",t("span",{staticClass:"hljs-string"},["'Home'"]),"\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 ",t("span",{staticClass:"hljs-attr"},["tag"]),": ",t("span",{staticClass:"hljs-string"},["'Office'"]),"\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 filterTag(value, row) {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," row.tag === value;\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:"custom-column-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-column-template","aria-hidden":"true"}},["¶"])," Custom column template"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Customize table column so it can be integrated with other components."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Activate custom column template by adding the ",t("code",["inline-template"])," attribute. By default, the context of ",t("code",["el-table-column"])," is the one where ",t("code",["el-table"])," lies, and you can customize it with the ",t("code",["context"])," attribute, e.g. ",t("code",[':context="_self"'])," refers to the current context. This is useful when sometimes Table is encapsulated into another component, and ",t("code",["table-column"])," is distributed by slots. In ",t("code",["el-column"]),", you have access to the following data: row, column, $index and store (state management of Table)."])},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"},["inline-template"]),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Date"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"180"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-icon"])," ",t("span",{staticClass:"hljs-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"time"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-icon"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"margin-left: 10px"']),">"]),t("span",["{{"])," row.date ",t("span",["}}"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\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"},["inline-template"]),"\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-popover"])," ",t("span",{staticClass:"hljs-attr"},["trigger"]),"=",t("span",{staticClass:"hljs-string"},['"hover"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"top"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["p"]),">"]),"Name: ",t("span",["{{"])," row.name ",t("span",["}}"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["p"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["p"]),">"]),"Addr: ",t("span",["{{"])," row.address ",t("span",["}}"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["p"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"reference"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"name-wrapper"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),t("span",["{{"])," row.name ",t("span",["}}"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-popover"]),">"]),"\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"},[":context"]),"=",t("span",{staticClass:"hljs-string"},['"_self"']),"\n ",t("span",{staticClass:"hljs-attr"},["inline-template"]),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"Operations"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),"\n ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"small"']),"\n ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleEdit($index, row)"']),">"]),"\n Edit\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"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"small"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"danger"']),"\n ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleDelete($index, row)"']),">"]),"\n Delete\n ",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-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 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",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["data"]),t("td",["table data"]),t("td",["array"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["height"]),t("td",["Table's height. By default it has an ",t("code",["auto"])," height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles"]),t("td",["string/number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["maxHeight"]),t("td",["Table's max-height. The height of the table starts from ",t("code",["auto"])," until it reaches the maxHeight limit. The ",t("code",["maxHeight"])," is measured in pixels, same as ",t("code",["height"])]),t("td",["string/number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["stripe"]),t("td",["whether table is striped"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["border"]),t("td",["whether table has vertical border"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["fit"]),t("td",["whether width of column automatically fits its container"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["show-header"]),t("td",["whether table header is visible"]),t("td",["boolean"]),t("td",["-"]),t("td",["true"])]),t("tr",[t("td",["highlight-current-row"]),t("td",["whether current row is highlighted"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["row-class-name"]),t("td",["function that returns custom class names for a row, or a string assigning class names for every row"]),t("td",["Function(row, index)/String"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["row-style"]),t("td",["function that returns custom style for a row, or a string assigning custom style for every row"]),t("td",["Function(row, index)/Object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["row-key"]),t("td",["key of row data, used for optimizing rendering. Required if ",t("code",["reserve-selection"])," is on"]),t("td",["Function(row)/String"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["context"]),t("td",["context of Table, e.g. ",t("code",["_self"])," refers to the current context, ",t("code",["$parent"])," parent context, ",t("code",["$root"])," root context, can be overridden by ",t("code",["context"])," in ",t("code",["el-table-column"])]),t("td",["Object"]),t("td",["-"]),t("td",["current context where Table lies"])]),t("tr",[t("td",["empty-text"]),t("td",["Displayed text when data is empty. You can customize this area with ",t("code",['slot="empty"'])]),t("td",["String"]),t("td"),t("td",["-"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"table-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},["¶"])," Table 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",["select"]),t("td",["triggers when user clicks the checkbox in a row"]),t("td",["selection, row"])]),t("tr",[t("td",["select-all"]),t("td",["triggers when user clicks the checkbox in table header"]),t("td",["selection"])]),t("tr",[t("td",["selection-change"]),t("td",["triggers when selection changes"]),t("td",["selection"])]),t("tr",[t("td",["cell-mouse-enter"]),t("td",["triggers when hovering into a cell"]),t("td",["row, column, cell, event"])]),t("tr",[t("td",["cell-mouse-leave"]),t("td",["triggers when hovering out of a cell"]),t("td",["row, column, cell, event"])]),t("tr",[t("td",["cell-click"]),t("td",["triggers when clicking a cell"]),t("td",["row, column, cell, event"])]),t("tr",[t("td",["row-click"]),t("td",["triggers when clicking a row"]),t("td",["row, event, column"])]),t("tr",[t("td",["row-contextmenu"]),t("td",["triggers when user right clicks on a row"]),t("td",["row, event"])]),t("tr",[t("td",["row-dblclick"]),t("td",["triggers when double clicking a row"]),t("td",["row, event"])]),t("tr",[t("td",["header-click"]),t("td",["triggers when clicking a column header"]),t("td",["column, event"])]),t("tr",[t("td",["sort-change"]),t("td",["triggers when Table's sorting changes"]),t("td",["{ column, prop, order }"])]),t("tr",[t("td",["filter-change"]),t("td",["column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered"]),t("td",["filters"])]),t("tr",[t("td",["current-change"]),t("td",["triggers when current row changes"]),t("td",["currentRow, oldCurrentRow"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"table-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},["¶"])," Table Methods"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Method"]),t("th",["Description"]),t("th",["Parameter"])])]),t("tbody",[t("tr",[t("td",["clearSelection"]),t("td",["clear selection, might be useful when ",t("code",["reserve-selection"])," is on"]),t("td",["selection"])]),t("tr",[t("td",["toggleRowSelection"]),t("td",["toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected"]),t("td",["row, selected"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"table-column-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},["¶"])," Table-column 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",["type of the column. If set to ",t("code",["selection"]),", the column will display checkbox. If set to ",t("code",["index"]),", the column will display index of the row (staring from 1)"]),t("td",["string"]),t("td",["selection/index"]),t("td",["—"])]),t("tr",[t("td",["label"]),t("td",["column label"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["column-key"]),t("td",["column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered"]),t("td",["string"]),t("td",["string"]),t("td",["-"])]),t("tr",[t("td",["prop"]),t("td",["field name. You can also use its alias: ",t("code",["property"])]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["width"]),t("td",["column width"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["min-width"]),t("td",["column minimum width. Columns with ",t("code",["width"])," has a fixed width, while columns with ",t("code",["min-width"])," has a width that is distributed in proportion"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["fixed"]),t("td",["whether column is fixed at left/right. Will be fixed at left if ",t("code",["true"])]),t("td",["string/boolean"]),t("td",["true/left/right"]),t("td",["—"])]),t("tr",[t("td",["render-header"]),t("td",["render function for table header of this column"]),t("td",["Function(h, { column, $index })"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["sortable"]),t("td",["whether column can be sorted"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["sort-method"]),t("td",["sorting method, works when ",t("code",["sortable"])," is ",t("code",["true"])]),t("td",["Function(a, b)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["resizable"]),t("td",["whether column width can be resized, works when ",t("code",["border"])," of ",t("code",["el-table"])," is ",t("code",["true"])]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["formatter"]),t("td",["function that formats content"]),t("td",["Function(row, column)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["show-overflow-tooltip"]),t("td",["whether to hide extra content and show them in a tooltip when hovering on the cell"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["context"]),t("td",["context of Table-column, e.g. ",t("code",["_self"])," refers to the current context, ",t("code",["$parent"])," parent context, ",t("code",["$root"])," root context"]),t("td",["Object"]),t("td",["-"]),t("td",["current context where Table lies"])]),t("tr",[t("td",["inline-template"]),t("td",["by using this attribute, you can customize column template. Row data can be accessed by ",t("code",["row"])," object. In your template, you have access to the following: ",t("code",["{ row (current row), column (current column), $index (row index), store (table store) }"])]),t("td",["—"]),t("td",["—"]),t("td")]),t("tr",[t("td",["align"]),t("td",["alignment"]),t("td",["string"]),t("td",["left/center/right"]),t("td",["left"])]),t("tr",[t("td",["header-align"]),t("td",["alignment of the table header. If omitted, the value of the above ",t("code",["align"])," attribute will be applied"]),t("td",["String"]),t("td",["left/center/right"]),t("td",["—"])]),t("tr",[t("td",["class-name"]),t("td",["class name of cells in the column"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["selectable"]),t("td",["function that determines if a certain row can be selected, works when ",t("code",["type"])," is 'selection'"]),t("td",["Function(row, index)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["reserve-selection"]),t("td",["whether to reserve selection after data refreshing, works when ",t("code",["type"])," is 'selection'"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["filters"]),t("td",["an array of data filtering options. For each element in this array, ",t("code",["text"])," and ",t("code",["value"])," are required"]),t("td",["Array[{ text, value }]"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["filter-multiple"]),t("td",["whether data filtering supports multiple options"]),t("td",["Boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["filter-method"]),t("td",["data filtering method. If ",t("code",["filter-multiple"])," is on, this method will be called multiple times for each row, and a row will display if one of the calls returns ",t("code",["true"])]),t("td",["Function(value, row)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["filtered-value"]),t("td",["filter value for selected data, might be useful when table header is rendered with ",t("code",["render-header"])]),t("td",["Array"]),t("td",["—"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(201)},function(s,t,a){var n,e;n=a(202);var l=a(203);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{activeName:"first",activeName2:"first",tabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{
|
||
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-tab-pane",{attrs:{label:"Config"}},["Config"]),t("el-tab-pane",{attrs:{label:"Role"}},["Role"]),t("el-tab-pane",{attrs:{label:"Task"}},["Task"])])]),s._m(16),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(17)])]),s._m(18),s._m(19),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs type="border-card">\n <el-tab-pane label="Route" :label-content="renderTab">Route</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\n',script:'\n export default {\n methods: {\n renderTab(h, tab) {\n return <span><i class="el-icon-date"></i> {tab.label}</span>;\n }\n }\n }\n',style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-tabs",{attrs:{type:"border-card"}},[t("el-tab-pane",{attrs:{label:"Route","label-content":s.renderTab}},["Route"]),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(20),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(21)])]),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26),s._m(27)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},["¶"])," Tabs"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Divide data collections which are related yet belong to different types."])},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",["Basic and concise tabs."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the ",t("code",["value"])," 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"},["template"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tabs"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"activeName"'])," ",t("span",{staticClass:"hljs-attr"},["@tab-click"]),"=",t("span",{staticClass:"hljs-string"},['"handleClick"']),">"]),"\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"},['"User"'])," ",t("span",{staticClass:"hljs-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"first"']),">"]),"User",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"},['"Config"'])," ",t("span",{staticClass:"hljs-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"second"']),">"]),"Config",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"},['"Role"'])," ",t("span",{staticClass:"hljs-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"third"']),">"]),"Role",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"},['"Task"'])," ",t("span",{staticClass:"hljs-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"fourth"']),">"]),"Task",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"},["template"]),">"]),"\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"},["activeName"]),": ",t("span",{staticClass:"hljs-string"},["'first'"]),"\n };\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleClick(tab, event) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(tab, event);\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:"card-style"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-style","aria-hidden":"true"}},["¶"])," Card Style"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Tabs styled as cards."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set ",t("code",["type"])," to ",t("code",["card"])," can get a card-styled tab."])},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-tabs"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"card"'])," ",t("span",{staticClass:"hljs-attr"},["@tab-click"]),"=",t("span",{staticClass:"hljs-string"},['"handleClick"']),">"]),"\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"},['"User"']),">"]),"User",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"},['"Config"']),">"]),"Config",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"},['"Role"']),">"]),"Role",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"},['"Task"']),">"]),"Task",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"},["template"]),">"]),"\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"},["activeName"]),": ",t("span",{staticClass:"hljs-string"},["'first'"]),"\n };\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleClick(tab, event) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(tab, event);\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:"closable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},["¶"])," Closable"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Closable tabs."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can set the closable attribute in el-tabs to make all tabs closable. Also, closable can be set in a tab panel to make that specific tab closable."])},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-tabs"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"card"'])," ",t("span",{staticClass:"hljs-attr"},[":closable"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@tab-click"]),"=",t("span",{staticClass:"hljs-string"},['"handleClick"'])," ",t("span",{staticClass:"hljs-attr"},["@tab-remove"]),"=",t("span",{staticClass:"hljs-string"},['"handleRemove"']),">"]),"\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"},['"User"']),">"]),"User",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"},['"Config"']),">"]),"Config",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"},['"Role"']),">"]),"Role",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"},['"Task"']),">"]),"Task",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"},["template"]),">"]),"\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 handleRemove(tab) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(tab);\n },\n handleClick(tab, event) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(tab, event);\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:"border-card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-card","aria-hidden":"true"}},["¶"])," Border card"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Border card tabs."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set ",t("code",["type"])," to ",t("code",["border-card"]),"."])},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-tabs"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"border-card"']),">"]),"\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"},['"User"']),">"]),"User",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"},['"Config"']),">"]),"Config",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"},['"Role"']),">"]),"Role",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"},['"Task"']),">"]),"Task",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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"custom-tab"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab","aria-hidden":"true"}},["¶"])," Custom Tab"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can use ",t("code",["label-content"])," property to customize the tab"])},function(){var s=this,t=s.$createElement;s._c;return t("p",[t("code",["label-content"])," is a render function,which return the vnode of the tab."])},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-tabs"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"border-card"']),">"]),"\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"},['"Route"'])," ",t("span",{staticClass:"hljs-attr"},[":label-content"]),"=",t("span",{staticClass:"hljs-string"},['"renderTab"']),">"]),"Route",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"},['"Config"']),">"]),"Config",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"},['"Role"']),">"]),"Role",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"},['"Task"']),">"]),"Task",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:"tabs-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},["¶"])," Tabs 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",["type of Tab"]),t("td",["string"]),t("td",["card/border-card"]),t("td",["—"])]),t("tr",[t("td",["closable"]),t("td",["whether Tab is closable"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["active-name(deprecated)"]),t("td",["name of the selected tab"]),t("td",["string"]),t("td",["—"]),t("td",["name of first tab"])]),t("tr",[t("td",["value"]),t("td",["name of the selected tab"]),t("td",["string"]),t("td",["—"]),t("td",["name of first tab"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"tabs-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},["¶"])," Tabs 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",["tab-click"]),t("td",["triggers when a tab is clicked"]),t("td",["clicked tab"])]),t("tr",[t("td",["tab-remove"]),t("td",["triggers when a tab is removed"]),t("td",["removed tab"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"tab-pane-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},["¶"])," Tab-pane 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",["title of the tab"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["label-content"]),t("td",["render function for tab title"]),t("td",["Function(h, tab:vueInstance)"]),t("td",["-"]),t("td",["-"])]),t("tr",[t("td",["disabled"]),t("td",["whether Tab is disabled"]),t("td",["boolean"]),t("td",["-"]),t("td",["false"])]),t("tr",[t("td",["name"]),t("td",["identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane"]),t("td",["string"]),t("td",["—"]),t("td",["ordinal number of the tab-pane in the sequence, i.e. the first tab-pane is '1'"])]),t("tr",[t("td",["closable"]),t("td",["whether Tab is closable"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])}]}},function(s,t,a){s.exports=a(205)},function(s,t,a){var n,e;a(206),n=a(208);var l=a(209);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{tags:[{key:1,name:"Tag one",type:""},{key:2,name:"Tag Two",type:"gray"},{key:5,name:"Tag Three",type:"primary"},{key:3,name:"Tag Four",type:"success"},{key:4,name:"Tag Five",type:"warning"},{key:6,name:"Tag Six",type:"danger"}]}},methods:{handleClose:function(s){this.tags.splice(this.tags.indexOf(s),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),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag>Tag One</el-tag>\n<el-tag type="gray">Tag Two</el-tag>\n<el-tag type="primary">Tag Three</el-tag>\n<el-tag type="success">Tag Four</el-tag>\n<el-tag type="warning">Tag Five</el-tag>\n<el-tag type="danger">Tag Six</el-tag>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-tag",["Tag One"]),t("el-tag",{attrs:{type:"gray"}},["Tag Two"]),t("el-tag",{attrs:{type:"primary"}},["Tag Three"]),t("el-tag",{attrs:{type:"success"}},["Tag Four"]),t("el-tag",{attrs:{type:"warning"}},["Tag Five"]),t("el-tag",{attrs:{type:"danger"}},["Tag Six"])]),s._m(3),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(4)])]),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag v-for="tag in tags" :closable="true" :type="tag.type" :key="tag" :close-transition="false" @close="handleClose(tag)">\n{{tag.name}}\n</el-tag>\n\n\n',script:"\n export default {\n data() {\n return {\n tags: [\n { key: 1, name: 'Tag One', type: '' },\n { key: 2, name: 'Tag Two', type: 'gray' },\n { key: 5, name: 'Tag Three', type: 'primary' },\n { key: 3, name: 'Tag Four', type: 'success' },\n { key: 4, name: 'Tag Five', type: 'warning' },\n { key: 6, name: 'Tag Six', type: 'danger' }\n ]\n };\n },\n methods: {\n handleClose(tag) {\n this.tags.splice(this.tags.indexOf(tag), 1);\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[s._l(s.tags,function(a){return t("el-tag",{key:a,attrs:{closable:!0,type:a.type,"close-transition":!1},on:{close:function(t){s.handleClose(a)}}},["\n"+s._s(a.name)+"\n"])})]),s._m(6),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(7)])]),s._m(8),s._m(9),s._m(10),s._m(11)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},["¶"])," Tag"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Used for marking and selection."])},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",["Use the ",t("code",["type"])," attribute to define Tag's type. In addition, the ",t("code",["color"])," attribute can be used to set the background color of the Tag."])},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-tag"]),">"]),"Tag One",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tag"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"gray"']),">"]),"Tag Two",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tag"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"']),">"]),"Tag Three",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tag"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),">"]),"Tag Four",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tag"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"warning"']),">"]),"Tag Five",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tag"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"danger"']),">"]),"Tag Six",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"removable-tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#removable-tag","aria-hidden":"true"}},["¶"])," Removable Tag"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set the ",t("code",["closable"])," attribute to define a removable tag. It accepts a ",t("code",["Boolean"]),". By default the removal of Tag has a fading animation. If you don't want to use it, you can set the ",t("code",["close-transition"])," attribute, which accepts a ",t("code",["Boolean"]),", to ",t("code",["true"]),". ",t("code",["close"])," event triggers when Tag is removed."])},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-tag"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-for"]),"=",t("span",{staticClass:"hljs-string"},['"tag in tags"']),"\n ",t("span",{staticClass:"hljs-attr"},[":closable"]),"=",t("span",{staticClass:"hljs-string"},['"true"']),"\n ",t("span",{staticClass:"hljs-attr"},[":type"]),"=",t("span",{staticClass:"hljs-string"},['"tag.type"']),"\n ",t("span",{staticClass:"hljs-attr"},[":key"]),"=",t("span",{staticClass:"hljs-string"},['"tag"']),"\n ",t("span",{staticClass:"hljs-attr"},[":close-transition"]),"=",t("span",{staticClass:"hljs-string"},['"false"']),"\n ",t("span",{staticClass:"hljs-attr"},["@close"]),"=",t("span",{staticClass:"hljs-string"},['"handleClose(tag)"']),"\n>"]),"\n",t("span",["{{"]),"tag.name",t("span",["}}"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\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"},["tags"]),": [\n { ",t("span",{staticClass:"hljs-attr"},["key"]),": ",t("span",{staticClass:"hljs-number"},["1"]),", ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tag One'"]),", ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["''"])," },\n { ",t("span",{staticClass:"hljs-attr"},["key"]),": ",t("span",{staticClass:"hljs-number"},["2"]),", ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Tag Two'"]),", ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'gray'"])," },\n { ",t("span",{staticClass:"hljs-attr"},["key"]),": ",t("span",{staticClass:"hljs-number"
|
||
},["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 {\n value1: ''\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-time-select",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})]),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-time-picker v-model="value2" :picker-options="{\n selectableRange: \'18:30:00 - 20:30:00\'\n }" placeholder="Arbitrary time">\n </el-time-picker>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value2: new Date(2016, 9, 10, 18, 40)\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})]]),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-time-select placeholder=\"Start time\" v-model=\"startTime\" :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\">\n </el-time-select>\n <el-time-select placeholder=\"End time\" v-model=\"endTime\" :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\">\n </el-time-select>\n</template>\n\n\n",script:"\n export default {\n data() {\n return {\n startTime: '',\n endTime: ''\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-time-select",{directives:[{name:"model",rawName:"v-model",value:s.startTime,expression:"startTime"}],attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},domProps:{value:s.startTime},on:{input:function(t){s.startTime=t}}}),t("el-time-select",{directives:[{name:"model",rawName:"v-model",value:s.endTime,expression:"endTime"}],attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},domProps:{value:s.endTime},on:{input:function(t){s.endTime=t}}})]]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(12)])]),s._m(13),s._m(14),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-time-picker is-range v-model="value3" placeholder="Pick a time range">\n </el-time-picker>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{"is-range":"",placeholder:"Pick a time range"},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})]]),s._m(15),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(16)])]),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"timepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},["¶"])," TimePicker"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use Time Picker for time input."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"fixed-time-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-picker","aria-hidden":"true"}},["¶"])," Fixed time picker"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Provide a list of fixed time for users to choose."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use ",t("code",["el-time-select"])," label, then assign start time, end time and time step with ",t("code",["start"]),", ",t("code",["end"])," and ",t("code",["step"]),"."])},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-time-select"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value1"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},["\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\""]),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Select time"']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-time-select"]),">"]),"\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"},["value1"]),": ",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:"arbitrary-time-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-picker","aria-hidden":"true"}},["¶"])," Arbitrary time picker"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Can pick an arbitrary time."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use ",t("code",["el-time-picker"])," label, and you can limit the time range by using ",t("code",["selectableRange"]),"."])},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-time-picker"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value2"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},["\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\""]),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Arbitrary time"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-time-picker"]),">"]),"\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"},["value2"]),": ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"(",t("span",{staticClass:"hljs-number"},["2016"]),", ",t("span",{staticClass:"hljs-number"},["9"]),", ",t("span",{staticClass:"hljs-number"},["10"]),", ",t("span",{staticClass:"hljs-number"},["18"]),", ",t("span",{staticClass:"hljs-number"},["40"]),")\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:"fixed-time-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-range","aria-hidden":"true"}},["¶"])," Fixed time range"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["If start time is picked at first, then the end time will change accordingly."])},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-time-select"]),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Start time"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"startTime"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},["\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\""]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-time-select"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-time-select"]),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"End time"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"endTime"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},["\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\""]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-time-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"},["startTime"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["endTime"]),": ",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:"arbitrary-time-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-range","aria-hidden":"true"}},["¶"])," Arbitrary time range"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Can pick an arbitrary time range."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["We can pick a time range by adding an ",t("code",["is-range"])," 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"},["template"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-time-picker"]),"\n ",t("span",{staticClass:"hljs-attr"},["is-range"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value3"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"Pick a time range"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-time-picker"]),">"]),"\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"},["value3"]),": [",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"(",t("span",{staticClass:"hljs-number"},["2016"]),", ",t("span",{staticClass:"hljs-number"},["9"]),", ",t("span",{staticClass:"hljs-number"},["10"]),", ",t("span",{staticClass:"hljs-number"},["8"]),", ",t("span",{staticClass:"hljs-number"},["40"]),"), ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"(",t("span",{staticClass:"hljs-number"},["2016"]),", ",t("span",{staticClass:"hljs-number"},["9"]),", ",t("span",{staticClass:"hljs-number"},["10"]),", ",t("span",{staticClass:"hljs-number"},["9"]),", ",t("span",{staticClass:"hljs-number"},["40"]),")]\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",["readonly"]),t("td",["whether DatePicker is read only"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["disabled"]),t("td",["whether DatePicker is disabled"]),t("td",["boolean"]),t("td",["-"]),t("td",["false"])]),t("tr",[t("td",["editable"]),t("td",["whether the input is editable"]),t("td",["boolean"]),t("td",["-"]),t("td",["true"])]),t("tr",[t("td",["clearable"]),t("td",["Whether to show clear button"]),t("td",["boolean"]),t("td",["-"]),t("td",["true"])]),t("tr",[t("td",["size"]),t("td",["size of Input"]),t("td",["string"]),t("td",["large/small/mini"]),t("td",["—"])]),t("tr",[t("td",["placeholder"]),t("td",["placeholder"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["format"]),t("td",["format of the picker"]),t("td",["string"]),t("td",["hour ",t("code",["HH"]),", minute ",t("code",["mm"]),", second ",t("code",["ss"])]),t("td",["HH:mm:ss"])]),t("tr",[t("td",["value"]),t("td",["value of the picker"]),t("td",["date for Time Picker, and string for Time Select"]),t("td",["hour ",t("code",["HH"]),", minute ",t("code",["mm"]),", second ",t("code",["ss"])]),t("td",["HH:mm:ss"])]),t("tr",[t("td",["align"]),t("td",["alignment"]),t("td",["left/center/right"]),t("td",["left"]),t("td")]),t("tr",[t("td",["popper-class"]),t("td",["custom class name for TimePicker's dropdown"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["picker-options"]),t("td",["additional options, check the table below"]),t("td",["object"]),t("td",["—"]),t("td",["{}"])])])])},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",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["start"]),t("td",["start time"]),t("td",["string"]),t("td",["—"]),t("td",["09:00"])]),t("tr",[t("td",["end"]),t("td",["end time"]),t("td",["string"]),t("td",["—"]),t("td",["18:00"])]),t("tr",[t("td",["step"]),t("td",["time step"]),t("td",["string"]),t("td",["—"]),t("td",["00:30"])]),t("tr",[t("td",["minTime"]),t("td",["minimum time, any time before this time will be disabled"]),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",["Attribute"]),t("th",["Description"]),t("th",["Type"]),t("th",["Accepted Values"]),t("th",["Default"])])]),t("tbody",[t("tr",[t("td",["selectableRange"]),t("td",["available time range, e.g.",t("code",["'18:30:00 - 20:30:00'"]),"or",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",["triggers when input value changes"]),t("td",["formatted value"])])])])}]}},function(s,t,a){s.exports=a(215)},function(s,t,a){var n,e;a(216),n=a(218);var l=a(219);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 prompts info" placement="top-start">\n <el-button>top-start</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">\n <el-button>top</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">\n <el-button>top-end</el-button>\n </el-tooltip>\n </div>\n <div class="left">\n <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">\n <el-button>left-start</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">\n <el-button>left</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">\n <el-button>left-end</el-button>\n </el-tooltip>\n </div>\n\n <div class="right">\n <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">\n <el-button>right-start</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">\n <el-button>right</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">\n <el-button>right-end</el-button>\n </el-tooltip>\n </div>\n <div class="bottom">\n <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">\n <el-button>bottom-start</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">\n <el-button>bottom</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">\n <el-button>bottom-end</el-button>\n </el-tooltip>\n </div>\n</div>\n\n\n',script:null,style:"\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 110px;\n }\n\n .right {\n float: right;\n width: 110px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n \n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n \n .el-button {\n width: 110px;\n }\n }\n"}}},[t("div",{slot:"source",staticClass:"source"},[t("div",{staticClass:"box"},[t("div",{staticClass:"top"},[t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[t("el-button",["top-start"])]),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[t("el-button",["top"])]),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[t("el-button",["top-end"])])]),t("div",{staticClass:"left"},[t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[t("el-button",["left-start"])]),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[t("el-button",["left"])]),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[t("el-button",["left-end"])])]),t("div",{staticClass:"right"},[t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[t("el-button",["right-start"])]),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[t("el-button",["right"])]),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[t("el-button",["right-end"])])]),t("div",{staticClass:"bottom"},[t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[t("el-button",["bottom-start"])]),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[t("el-button",["bottom"])]),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[t("el-button",["bottom-end"])])])])]),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:'<el-tooltip content="Top center" placement="top">\n <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n <el-button>Light</el-button>\n</el-tooltip>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[t("el-button",["Dark"])]),t("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[t("el-button",["Light"])])]),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:'<el-tooltip placement="top">\n <div slot="content">multiple lines<br>second line</div>\n <el-button>Top center</el-button>\n</el-tooltip>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-tooltip",{attrs:{placement:"top"}},[t("div",{slot:"content"},["multiple lines",s._m(12),"second line"]),t("el-button",["Top center"])])]),s._m(13),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(14)])]),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">\n <el-button @click="disabled=true">click to close tooltip function</el-button>\n </el-tooltip>\n</template>\n\n\n',script:null,style:"\n .slide-fade-enter-active {\n transition: all .3s ease;\n }\n .slide-fade-leave-active {\n transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n }\n .slide-fade-enter, .expand-fade-leave-active {\n margin-left: 20px;\n opacity: 0;\n }\n"}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-tooltip",{attrs:{disabled:s.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[t("el-button",{on:{click:function(t){s.disabled=!0}}},["click to close tooltip function"])])]]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(20)])]),s._m(21),s._m(22)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"tooltip"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},["¶"])," Tooltip"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Display prompt information for mouse hover."])},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",["Tooltip has 9 placements."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Use attribute ",t("code",["content"])," to set the display content when hover. The attribute ",t("code",["placement"])," determines the position of the tooltip. Its value is ",t("code",["[orientation]-[alignment]"])," with four orientations ",t("code",["top"]),", ",t("code",["left"]),", ",t("code",["right"]),", ",t("code",["bottom"])," and three alignments ",t("code",["start"]),", ",t("code",["end"]),", ",t("code",["null"]),", and the default alignment is null. Take ",t("code",['placement="left-end"'])," for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element."])},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"},['"box"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"top"']),">"]),"\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"},['"Top Left prompts info"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"top-start"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"top-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"},['"Top Center prompts info"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"top"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"top",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"},['"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:"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"},['"Right Top prompts info"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"right-start"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"right-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"},['"Right Center prompts info"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"right",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"},['"Right Bottom prompts info"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"right-end"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"right-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"},['"bottom"']),">"]),"\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"},['"Bottom Left prompts info"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"bottom-start"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"bottom-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"},['"Bottom Center prompts info"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"bottom"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"bottom",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"},['"Bottom Right prompts info"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"bottom-end"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"bottom-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"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"undefined"},["\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 110px;\n }\n\n .right {\n float: right;\n width: 110px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n \n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n \n .el-button {\n width: 110px;\n }\n }\n"]),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:"theme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},["¶"])," Theme"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Tooltip has two themes: ",t("code",["dark"])," and ",t("code",["light"]),"。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Set ",t("code",["effect"])," to modify theme, and the default value is ",t("code",["dark"]),"."])},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-tooltip"])," ",t("span",{staticClass:"hljs-attr"},["content"]),"=",t("span",{staticClass:"hljs-string"},['"Top center"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"top"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"Dark",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"},["content"]),"=",t("span",{staticClass:"hljs-string"},['"Bottom center"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"bottom"'])," ",t("span",{staticClass:"hljs-attr"},["effect"]),"=",t("span",{staticClass:"hljs-string"},['"light"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"Light",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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"more-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#more-content","aria-hidden":"true"}},["¶"])," More Content"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Display multiple lines of text and set their format."])},function(){var s=this,t=s.$createElement;s._c;return t("br")},function(){var s=this,t=s.$createElement;s._c;return t("p",["Override attribute ",t("code",["content"])," of ",t("code",["el-tooltip"])," by adding a slot named ",t("code",["content"]),"."])},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-tooltip"])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"top"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"content"']),">"]),"multiple lines",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["br"]),"/>"]),"second line",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"Top center",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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"advanced-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#advanced-usage","aria-hidden":"true"}},["¶"])," Advanced usage"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["In addition to basic usages, there are some attributes that allow you to customize your own:"])},function(){var s=this,t=s.$createElement;s._c;return t("p",[t("code",["transition"])," attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is ",t("code",["fade-in-linear"]),"."])},function(){var s=this,t=s.$createElement;s._c;return t("p",[t("code",["disabled"])," attribute allows you to disable ",t("code",["tooltip"]),". You just need set it to ",t("code",["true"]),"."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["In fact, Tooltip is an extension based on ",t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},["Vue-popper"]),", you can use any attribute that are allowed in Vue-popper."])},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-tooltip"])," ",t("span",{staticClass:"hljs-attr"},[":disabled"]),"=",t("span",{staticClass:"hljs-string"},['"disabled"'])," ",t("span",{staticClass:"hljs-attr"},["content"]),"=",t("span",{staticClass:"hljs-string"},['"click to close tooltip function"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"bottom"'])," ",t("span",{staticClass:"hljs-attr"},["effect"]),"=",t("span",{staticClass:"hljs-string"},['"light"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"disabled=true"']),">"]),"click to close tooltip function",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"},["template"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"css"},["\n ",t("span",{staticClass:"hljs-selector-class"},[".slide-fade-enter-active"])," {\n ",t("span",{staticClass:"hljs-attribute"},["transition"]),": all .",t("span",{staticClass:"hljs-number"},["3s"])," ease;\n }\n ",t("span",{staticClass:"hljs-selector-class"},[".slide-fade-leave-active"])," {\n ",t("span",{staticClass:"hljs-attribute"},["transition"]),": all .",t("span",{staticClass:"hljs-number"},["3s"])," ",t("span",{staticClass:"hljs-built_in"},["cubic-bezier"]),"(1.0, 0.5, 0.8, 1.0);\n }\n ",t("span",{staticClass:"hljs-selector-class"},[".slide-fade-enter"]),", ",t("span",{staticClass:"hljs-selector-class"},[".expand-fade-leave-active"])," {\n ",t("span",{staticClass:"hljs-attribute"},["margin-left"]),": ",t("span",{staticClass:"hljs-number"},["20px"]),";\n ",t("span",{staticClass:"hljs-attribute"},["opacity"]),": ",t("span",{staticClass:"hljs-number"},["0"]),";\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:"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",["effect"]),t("td",["Tooltip theme"]),t("td",["string"]),t("td",["dark/light"]),t("td",["dark"])]),t("tr",[t("td",["content"]),t("td",["display content, can be overridden by ",t("code",["slot#content"])]),t("td",["String"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["placement"]),t("td",["position of Tooltip"]),t("td",["string"]),t("td",["top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end"]),t("td",["bottom"])]),t("tr",[t("td",["value(v-model)"]),t("td",["visibility of Tooltip"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["disabled"]),t("td",["whether Tooltip is disabled"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["offset"]),t("td",["offset of the Tooltip"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["transition"]),t("td",["animation name"]),t("td",["string"]),t("td",["—"]),t("td",[t("code",["fade-in-linear"])])]),t("tr",[t("td",["visible-arrow"]),t("td",["whether an arrow is displayed. For more information, check ",t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},["Vue-popper"])," page"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["options"]),t("td",[t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},["popper.js"])," parameters"]),t("td",["Object"]),t("td",["refer to ",t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},["popper.js"])," doc"]),t("td",[t("code",["{ boundariesElement: 'body', gpuAcceleration: false }"])])]),t("tr",[t("td",["openDelay"]),t("td",["delay of appearance, in millisecond"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["manual"]),t("td",["whether to control Tooltip manually. ",t("code",["mouseenter"])," and ",t("code",["mouseleave"])," won't have effects if set to ",t("code",["true"]),"事件将不会生效"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["popper-class"]),t("td",["custom class name for Tooltip's popper"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(221)},function(s,t,a){var n,e;n=a(222);var l=a(223);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;var a=[{label:"Level one 1",children:[{label:"Level two 1-1"}]},{label:"Level one 2",children:[{label:"Level two 2-1"},{label:"Level two 2-2"}]},{label:"Level one 3",children:[{label:"Level two 3-1"},{label:"Level two 3-2"}]}],n=[{name:"region1"},{name:"region2"}],e=1,l={label:"name",children:"zones"},i={children:"children",label:"label"};t.default={methods:{handleCheckChange:function(s,t,a){console.log(s,t,a)},handleNodeClick:function(s){console.log(s)},loadNode:function(s,t){if(0===s.level)return t([{name:"Root1"},{name:"Root2"}]);if(s.level>3)return t([]);var a;a="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s=void 0;s=a?[{name:"zone"+e++},{name:"zone"+e++}]:[],t(s)},500)}},data:function(){return{data:a,regions:n,defaultProps:i,props:l}}}},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-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>\n\n\n',script:"\n export default {\n data() {\n return {\n data: [{\n label: 'Level one 1',\n children: [{\n label: 'Level two 1-1'\n }]\n }, {\n label: 'Level one 2',\n children: [{\n label: 'Level two 2-1'\n }, {\n label: 'Level two 2-2'\n }]\n }, {\n label: 'Level one 3',\n children: [{\n label: 'Level two 3-1'\n }, {\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleNodeClick(data) {\n console.log(data);\n }\n }\n };\n",style:null}}},[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: 'Root1' }, { name: 'Root2' }]);\n }\n if (node.level > 3) return resolve([]);\n\n var hasChild;\n if (node.data.name === 'region1') {\n hasChild = true;\n } else if (node.data.name === 'region2') {\n hasChild = false;\n } else {\n hasChild = Math.random() > 0.5;\n }\n\n setTimeout(() => {\n var data;\n if (hasChild) {\n data = [{\n name: 'zone' + this.count++\n }, {\n name: 'zone' + this.count++\n }];\n } else {\n data = [];\n }\n\n resolve(data);\n }, 500);\n }\n }\n };\n",style:null}}},[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"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},["¶"])," Tree"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Display a set of data with hierarchies."])},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",["Basic tree structure."])},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"},["'Level one 1'"]),",\n ",t("span",{staticClass:"hljs-attr"},["children"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Level two 1-1'"]),"\n }]\n }, {\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Level one 2'"]),",\n ",t("span",{staticClass:"hljs-attr"},["children"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Level two 2-1'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Level two 2-2'"]),"\n }]\n }, {\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Level one 3'"]),",\n ",t("span",{staticClass:"hljs-attr"},["children"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Level two 3-1'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'Level two 3-2'"]),"\n }]\n }],\n ",t("span",{staticClass:"hljs-attr"},["defaultProps"]),": {\n ",t("span",{staticClass:"hljs-attr"},["children"]),": ",t("span",{staticClass:"hljs-string"},["'children'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'label'"]),"\n }\n };\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleNodeClick(data) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(data);\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:"selectable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selectable","aria-hidden":"true"}},["¶"])," Selectable"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Used for node selection. In the following example, data for each layer is acquired after being clicked. If there is no child data, the expanding icon will disappear."])},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"]),"\n ",t("span",{staticClass:"hljs-attr"},[":data"]),"=",t("span",{staticClass:"hljs-string"},['"regions"']),"\n ",t("span",{staticClass:"hljs-attr"},[":props"]),"=",t("span",{staticClass:"hljs-string"},['"props"']),"\n ",t("span",{staticClass:"hljs-attr"},[":load"]),"=",t("span",{staticClass:"hljs-string"},['"loadNode"']),"\n ",t("span",{staticClass:"hljs-attr"},["lazy"]),"\n ",t("span",{staticClass:"hljs-attr"},["show-checkbox"]),"\n ",t("span",{staticClass:"hljs-attr"},["@check-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleCheckChange"']),">"]),"\n",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"},["regions"]),": [{\n ",t("span",{staticClass:"hljs-string"},["'name'"]),": ",t("span",{staticClass:"hljs-string"},["'region1'"]),"\n }, {\n ",t("span",{staticClass:"hljs-string"},["'name'"]),": ",t("span",{staticClass:"hljs-string"},["'region2'"]),"\n }],\n ",t("span",{staticClass:"hljs-attr"},["props"]),": {\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'name'"]),",\n ",t("span",{staticClass:"hljs-attr"},["children"]),": ",t("span",{staticClass:"hljs-string"},["'zones'"]),"\n },\n ",t("span",{staticClass:"hljs-attr"},["count"]),": ",t("span",{staticClass:"hljs-number"},["1"]),"\n };\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleCheckChange(data, checked, indeterminate) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(data);\n },\n loadNode(node, resolve) {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (node.level === ",t("span",{staticClass:"hljs-number"},["0"]),") {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," resolve([{ ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Root1'"])," }, { ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'Root2'"])," }]);\n }\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (node.level > ",t("span",{staticClass:"hljs-number"},["3"]),") ",t("span",{staticClass:"hljs-keyword"},["return"])," resolve([]);\n\n ",t("span",{staticClass:"hljs-keyword"},["var"])," hasChild;\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (node.data.name === ",t("span",{staticClass:"hljs-string"},["'region1'"]),") {\n hasChild = ",t("span",{staticClass:"hljs-literal"},["true"]),";\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," ",t("span",{staticClass:"hljs-keyword"},["if"])," (node.data.name === ",t("span",{staticClass:"hljs-string"},["'region2'"]),") {\n hasChild = ",t("span",{staticClass:"hljs-literal"},["false"]),";\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n hasChild = ",t("span",{staticClass:"hljs-built_in"},["Math"]),".random() > ",t("span",{staticClass:"hljs-number"},["0.5"]),";\n }\n\n setTimeout(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"
|
||
},["()"])," =>"])," {\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=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",["specify which key of node object is used as the node's label"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["children"]),t("td",["specify which key of node object is used as the node's subtree"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#method","aria-hidden":"true"}},["¶"])," Method"])},function(){var s=this,t=s.$createElement;s._c;return t("p",[t("code",["Tree"])," has the following method, which returns the currently selected array of nodes."])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["Method"]),t("th",["Description"]),t("th",["Parameters"])])]),t("tbody",[t("tr",[t("td",["filter"]),t("td",["filter all tree nodes, filtered nodes will be hidden"]),t("td",["Accept a parameter which will be used as first parameter for filter-node-method"])]),t("tr",[t("td",["getCheckedNodes"]),t("td",["If the node can be selected (",t("code",["show-checkbox"])," is ",t("code",["true"]),"), it returns the currently selected array of nodes"]),t("td",["Accept a boolean type parameter whose default value is ",t("code",["false"]),". If the parameter is ",t("code",["true"]),", it only returns the currently selected array of sub-nodes."])]),t("tr",[t("td",["setCheckedNodes"]),t("td",["set certain nodes to be checked, only works when ",t("code",["node-key"])," is assigned"]),t("td",["an array of nodes to be checked"])]),t("tr",[t("td",["getCheckedKeys"]),t("td",["If the node can be selected (",t("code",["show-checkbox"])," is ",t("code",["true"]),"), it returns the currently selected array of node's keys"]),t("td",["(leafOnly) Accept a boolean type parameter whose default value is ",t("code",["true"]),". If the parameter is ",t("code",["true"]),", it only returns the currently selected array of sub-nodes."])]),t("tr",[t("td",["setCheckedKeys"]),t("td",["set certain nodes to be checked, only works when ",t("code",["node-key"])," is assigned"]),t("td",["(keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is ",t("code",["true"]),". If the parameter is ",t("code",["true"]),", it only returns the currently selected array of sub-nodes."])]),t("tr",[t("td",["setChecked"]),t("td",["set node to be checked or not, only works when ",t("code",["node-key"])," is assigned"]),t("td",["(key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not."])])])])},function(){var s=this,t=s.$createElement;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",["node-click"]),t("td",["triggers when a node is clicked"]),t("td",["three parameters: node object corresponding to the node clicked, ",t("code",["node"])," property of TreeNode, TreeNode itself"])]),t("tr",[t("td",["check-change"]),t("td",["triggers when the selected state of the node changes"]),t("td",["three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes"])]),t("tr",[t("td",["current-change"]),t("td",["triggers when current node changes"]),t("td",["two parameters: node object corresponding to the current node, ",t("code",["node"])," property of TreeNode"])])])])}]}},function(s,t,a){s.exports=a(225)},function(s,t,a){var n,e,l=a(226);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:"typography"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#typography","aria-hidden":"true"}},["¶"])," Typography"]),t("p",["We create a font convention to ensure the best presentation across different platforms."]),t("h3",{attrs:{id:"chinese-font"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chinese-font","aria-hidden":"true"}},["¶"])," Chinese Font"]),t("div",{staticClass:"demo-typo-box typo-PingFang"},["\n 和畅惠风\n ",t("div",{staticClass:"name"},["PingFang SC"])]),t("div",{staticClass:"demo-typo-box typo-Hiragino"},["\n 和畅惠风\n ",t("div",{staticClass:"name"},["Hiragino Sans GB"])]),t("div",{staticClass:"demo-typo-box typo-Microsoft"},["\n 和畅惠风\n ",t("div",{staticClass:"name"},["Microsoft YaHei"])]),t("h3",{attrs:{id:"english-numberic-font"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#english-numberic-font","aria-hidden":"true"}},["¶"])," English / Numberic Font"]),t("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},["\n RGag\n ",t("div",{staticClass:"name"},["Helvetica Neue"])]),t("div",{staticClass:"demo-typo-box typo-Helvetica"},["\n RGag\n ",t("div",{staticClass:"name"},["Helvetica"])]),t("div",{staticClass:"demo-typo-box typo-Arial"},["\n RGag\n ",t("div",{staticClass:"name"},["Arial"])]),t("h3",{attrs:{id:"font-family"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},["¶"])," Font-family"]),t("pre",[t("code",{staticClass:"hljs language-css"},[t("span",{staticClass:"hljs-selector-tag"},["font-family"]),': "',t("span",{staticClass:"hljs-selector-tag"},["Helvetica"])," ",t("span",{staticClass:"hljs-selector-tag"},["Neue"]),'",',t("span",{staticClass:"hljs-selector-tag"},["Helvetica"]),',"',t("span",{staticClass:"hljs-selector-tag"},["PingFang"])," ",t("span",{staticClass:"hljs-selector-tag"},["SC"]),'","',t("span",{staticClass:"hljs-selector-tag"},["Hiragino"])," ",t("span",{staticClass:"hljs-selector-tag"},["Sans"])," ",t("span",{staticClass:"hljs-selector-tag"},["GB"]),'","',t("span",{staticClass:"hljs-selector-tag"},["Microsoft"])," ",t("span",{staticClass:"hljs-selector-tag"},["YaHei"]),'","微软雅黑",',t("span",{staticClass:"hljs-selector-tag"},["Arial"]),",",t("span",{staticClass:"hljs-selector-tag"},["sans-serif"]),";\n"])]),t("h3",{attrs:{id:"font-convention"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-convention","aria-hidden":"true"}},["¶"])," Font Convention"]),t("table",{staticClass:"demo-typo-size"},[t("tbody",[t("tr",[t("td",{staticClass:"h1"},["Main Title"]),t("td",{staticClass:"h1"},["Build with Element"]),t("td",{staticClass:"color-dark-light"},["20px Extra large"])]),t("tr",[t("td",{staticClass:"h2"},["Title"]),t("td",{staticClass:"h2"},["Build with Element"]),t("td",{staticClass:"color-dark-light"},["18px large"])]),t("tr",[t("td",{staticClass:"h3"},["Small Title"]),t("td",{staticClass:"h3"},["Build with Element"]),t("td",{staticClass:"color-dark-light"},["16px Medium"])]),t("tr",[t("td",{staticClass:"text-regular"},["Body"]),t("td",{staticClass:"text-regular"},["Build with Element"]),t("td",{staticClass:"color-dark-light"},["14px Small"])]),t("tr",[t("td",{staticClass:"text-small"},["Body (small)"]),t("td",{staticClass:"text-small"},["Build with Element"]),t("td",{staticClass:"color-dark-light"},["13px Extra Small"])]),t("tr",[t("td",{staticClass:"text-smaller"},["Supplementary text"]),t("td",{staticClass:"text-smaller"},["Build with Element"]),t("td",{staticClass:"color-dark-light"},["12px Extra Extra Small"])])])])])}]}},function(s,t,a){s.exports=a(228)},function(s,t,a){var n,e;n=a(229);var l=a(230);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{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(s,t,a){console.log(s,t,a)},handleRemove:function(s,t){console.log(s,t)},beforeUpload:function(s){return!(s.size>4e7)||(console.warn(s.name+" is too large!"),!1)},handlePreview:function(s){console.log(s)},handleSuccess:function(s,t){console.log(s,t)},handleError:function(s,t,a){console.log(s)}}}},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-upload action="//jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :default-file-list="fileList">\n <el-button size="small" type="primary">Click to upload</el-button>\n <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n\n',script:"\n export default {\n data() {\n return {\n fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-upload",{attrs:{action:"//jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"default-file-list":s.fileList}},[t("el-button",{attrs:{size:"small",type:"primary"}},["Click to upload"]),t("div",{slot:"tip",staticClass:"el-upload__tip"},["jpg/png files with a size less than 500kb"])])]),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-upload action="//jsonplaceholder.typicode.com/posts/" type="drag" :multiple="true" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :on-error="handleError" :default-file-list="fileList">\n <i class="el-icon-upload"></i>\n <div class="el-dragger__text">Drop file here or <em>click to upload</em></div>\n <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n\n',script:"\n export default {\n data() {\n return {\n fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-upload",{attrs:{action:"//jsonplaceholder.typicode.com/posts/",type:"drag",multiple:!0,"on-preview":s.handlePreview,"on-remove":s.handleRemove,"on-success":s.handleSuccess,"on-error":s.handleError,"default-file-list":s.fileList}},[s._m(7),s._m(8),t("div",{slot:"tip",staticClass:"el-upload__tip"},["jpg/png files with a size less than 500kb"])])]),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-upload action="//jsonplaceholder.typicode.com/posts/" type="drag" :thumbnail-mode="true" :on-preview="handlePreview" :on-remove="handleRemove" :default-file-list="fileList">\n <i class="el-icon-upload"></i>\n <div class="el-dragger__text">Drop file here or <em>click to upload</em></div>\n <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n\n',script:"\n export default {\n data() {\n return {\n fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-upload",{attrs:{action:"//jsonplaceholder.typicode.com/posts/",type:"drag","thumbnail-mode":!0,"on-preview":s.handlePreview,"on-remove":s.handleRemove,"default-file-list":s.fileList}},[s._m(13),s._m(14),t("div",{slot:"tip",staticClass:"el-upload__tip"},["jpg/png files with a size less than 500kb"])])]),s._m(15),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(16)])]),s._m(17),s._m(18),s._m(19),s._m(20)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},["¶"])," Upload"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Upload files by clicking or drag-and-drop"])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"click-to-upload-files"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#click-to-upload-files","aria-hidden":"true"}},["¶"])," Click to upload files"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Customize upload button type and text using ",t("code",["slot"]),"."])},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"},[":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 ",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"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"']),">"]),"Click to upload",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{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 files with a size less than 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:"drag-to-upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drag-to-upload","aria-hidden":"true"}},["¶"])," Drag to upload"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["You can drag your file to a certain area to upload it."])},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"},["Drop file here or ",t("em",["click to upload"])])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Specifying the ",t("code",["type"])," attribute as ",t("code",["drag"])," will change the upload control to a drag-and-drop style. Additionally, you can use the ",t("code",["multiple"])," attribute to control whether uploading multiple files is permitted. ",t("code",["on-preview"])," and ",t("code",["on-remove"])," are hook functions that will be called after clicking on the uploaded file link and after clicking to remove the uploaded file, respectively."])},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"},[":multiple"]),"=",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"},[":on-success"]),"=",t("span",{staticClass:"hljs-string"},['"handleSuccess"']),"\n ",t("span",{staticClass:"hljs-attr"},[":on-error"]),"=",t("span",{staticClass:"hljs-string"},['"handleError"']),"\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("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-dragger__text"']),">"]),"Drop file here or ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["em"]),">"]),"click to upload",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["em"]),">"]),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"},['"el-upload__tip"'])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"tip"']),">"]),"jpg/png files with a size less than 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:"upload-single-image"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload-single-image","aria-hidden":"true"}},["¶"])," Upload single image"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["This mode is specifically for image uploading, and the thumbnail will display in the origin place."])},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"},["Drop file here or ",t("em",["click to upload"])])},function(){var s=this,t=s.$createElement;s._c;return t("p",[t("code",["thumbnail-mode"])," attribute allows you to force the upload content to image only, and can display the thumbnail of the uploaded image."])},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("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-dragger__text"']),">"]),"Drop file here or ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["em"]),">"]),"click to upload",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["em"]),">"]),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"},['"el-upload__tip"'])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"tip"']),">"]),"jpg/png files with a size less than 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:"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",["action"]),t("td",["required, request URL"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["headers"]),t("td",["request headers"]),t("td",["object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["multiple"]),t("td",["whether uploading multiple files is permitted"]),t("td",["boolean"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["data"]),t("td",["additions options of request"]),t("td",["object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["name"]),t("td",["key name for uploaded file"]),t("td",["string"]),t("td",["—"]),t("td",["file"])]),t("tr",[t("td",["with-credentials"]),t("td",["whether cookies are sent"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["show-upload-list"]),t("td",["whether to show the uploaded file list"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["type"]),t("td",["type of Upload"]),t("td",["string"]),t("td",["select/drag"]),t("td",["select"])]),t("tr",[t("td",["accept"]),t("td",["accepted ",t("a",{
|
||
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"},[[t("el-alert",{attrs:{title:"不可关闭的 alert",type:"success",closable:!1}}),t("el-alert",{attrs:{title:"自定义 close-text",type:"info","close-text":"知道了"}}),t("el-alert",{attrs:{title:"设置了回调的 alert",type:"warning"},on:{close:s.hello}})]]),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-alert title="成功提示的文案" type="success" show-icon>\n </el-alert>\n <el-alert title="消息提示的文案" type="info" show-icon>\n </el-alert>\n <el-alert title="警告提示的文案" type="warning" show-icon>\n </el-alert>\n <el-alert title="错误提示的文案" type="error" show-icon>\n </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-alert",{attrs:{title:"成功提示的文案",type:"success","show-icon":""}}),t("el-alert",{attrs:{title:"消息提示的文案",type:"info","show-icon":""}}),t("el-alert",{attrs:{title:"警告提示的文案",type:"warning","show-icon":""}}),t("el-alert",{attrs:{title:"错误提示的文案",type:"error","show-icon":""}})]]),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:'<template>\n <el-alert title="带辅助性文字介绍" type="success" description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">\n </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-alert",{attrs:{title:"带辅助性文字介绍",type:"success",description:"这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"}})]]),s._m(16),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(17)])]),s._m(18),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n </el-alert>\n <el-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n </el-alert>\n <el-alert title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n </el-alert>\n <el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n </el-alert>\n</template>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-alert",{attrs:{title:"成功提示的文案",type:"success",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),t("el-alert",{attrs:{title:"消息提示的文案",type:"info",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),t("el-alert",{attrs:{title:"警告提示的文案",type:"warning",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),t("el-alert",{attrs:{title:"错误提示的文案",type:"error",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}})]]),s._m(19),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(20)])]),s._m(21),s._m(22),s._m(23),s._m(24)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"alert-jing-gao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert-jing-gao","aria-hidden":"true"}},["¶"])," Alert 警告"])},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-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-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",["Alert 组件提供四种主题，由",t("code",["type"]),"属性指定，默认值为",t("code",["info"]),"。"])},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-alert"]),"\n ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"成功提示的文案"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),">"]),"\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"},['"消息提示的文案"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"info"']),">"]),"\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"},['"警告提示的文案"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"warning"']),">"]),"\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"},['"错误提示的文案"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"error"']),">"]),"\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:"zi-ding-yi-guan-bi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-guan-bi-an-niu","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",["在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。",t("code",["closable"]),"属性决定是否可关闭，接受",t("code",["boolean"]),"，默认为",t("code",["true"]),"。你可以设置",t("code",["close-text"]),"属性来代替右侧的关闭图标，注意：",t("code",["close-text"]),"必须为文本。设置",t("code",["close"]),"事件来设置关闭时的回调。"])},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-alert"]),"\n ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"不可关闭的 alert"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),"\n ",t("span",{staticClass:"hljs-attr"},[":closable"]),"=",t("span",{staticClass:"hljs-string"},['"false"']),">"]),"\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"},['"自定义 close-text"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"info"']),"\n ",t("span",{staticClass:"hljs-attr"},["close-text"]),"=",t("span",{staticClass:"hljs-string"},['"知道了"']),">"]),"\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"},['"设置了回调的 alert"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"warning"']),"\n ",t("span",{staticClass:"hljs-attr"},["@close"]),"=",t("span",{staticClass:"hljs-string"},['"hello"']),">"]),"\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\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 hello() {\n alert(",t("span",{staticClass:"hljs-string"},["'Hello World!'"]),");\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-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon","aria-hidden":"true"}},["¶"])," 带有 icon"])},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",["show-icon"]),"属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。"])},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-alert"]),"\n ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"成功提示的文案"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),"\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"},['"消息提示的文案"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"info"']),"\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"},['"警告提示的文案"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"warning"']),"\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"},['"错误提示的文案"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"error"']),"\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:"dai-you-fu-zhu-xing-wen-zi-jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},["¶"])," 带有辅助性文字介绍"])},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",["title"]),"属性外，你可以设置",t("code",["description"]),"属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。"])},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-alert"]),"\n ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"带辅助性文字介绍"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),"\n ",t("span",{staticClass:"hljs-attr"},["description"]),"=",t("span",{staticClass:"hljs-string"},['"这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"']),">"]),"\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:"dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},["¶"])," 带有 icon 和辅助性文字介绍"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["最后，这是一个同时具有 icon 和辅助性文字的样例。"])},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-alert"]),"\n ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"成功提示的文案"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),"\n ",t("span",{staticClass:"hljs-attr"},["description"]),"=",t("span",{staticClass:"hljs-string"},['"文字说明文字说明文字说明文字说明文字说明文字说明"']),"\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"},['"消息提示的文案"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"info"']),"\n ",t("span",{staticClass:"hljs-attr"},["description"]),"=",t("span",{staticClass:"hljs-string"},['"文字说明文字说明文字说明文字说明文字说明文字说明"']),"\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"},['"警告提示的文案"']),"\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"},['"文字说明文字说明文字说明文字说明文字说明文字说明"']),"\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"},['"错误提示的文案"']),"\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"},['"文字说明文字说明文字说明文字说明文字说明文字说明"']),"\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",["参数"]),t("th",["说明"]),t("th",["类型"]),t("th",["可选值"]),t("th",["默认值"])])]),t("tbody",[t("tr",[t("td",[t("strong",["title"])]),t("td",["标题，",t("strong",["必选参数"])]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["type"]),t("td",["主题"]),t("td",["string"]),t("td",["success/warning/info/error"]),t("td",["info"])]),t("tr",[t("td",["description"]),t("td",["辅助性文字"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["render-content"]),t("td",["内容区域的渲染函数，会覆盖 ",t("code",["description"])]),t("td",["function(h)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["closable"]),t("td",["是否可关闭"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["close-text"]),t("td",["关闭按钮自定义文本"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["show-icon"]),t("td",["是否显示图标"]),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",["事件名称"]),t("th",["说明"]),t("th",["回调参数"])])]),t("tbody",[t("tr",[t("td",["close"]),t("td",["关闭alert时触发的事件"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(238)},function(s,t,a){var n,e;a(239),a(241);var l=a(243);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-1fb4baff",s.exports=n},function(s,t){},,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">评论</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n <el-button size="small">回复</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n <span class="el-dropdown-link">\n 点我查看<i class="el-icon-caret-bottom el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item class="clearfix">\n 评论\n <el-badge class="mark" :value="12">\n </el-badge></el-dropdown-item>\n <el-dropdown-item class="clearfix">\n 回复\n <el-badge class="mark" :value="3">\n </el-badge></el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[t("div",{slot:"source",staticClass:"source"},[t("el-badge",{staticClass:"item",domProps:{value:12}},[t("el-button",{attrs:{size:"small"}},["评论"])]),t("el-badge",{staticClass:"item",domProps:{value:3}},[t("el-button",{attrs:{size:"small"}},["回复"])]),t("el-dropdown",{attrs:{trigger:"click"}},[s._m(4),t("el-dropdown-menu",{slot:"dropdown"},[t("el-dropdown-item",{staticClass:"clearfix"},["\n 评论\n ",t("el-badge",{staticClass:"mark",domProps:{value:12}})]),t("el-dropdown-item",{staticClass:"clearfix"},["\n 回复\n ",t("el-badge",{staticClass:"mark",domProps:{value:3}})])])])]),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-badge :value="200" :max="99" class="item">\n <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n <el-button size="small">回复</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[t("div",{slot:"source",staticClass:"source"},[t("el-badge",{staticClass:"item",attrs:{max:99},domProps:{value:200}},[t("el-button",{attrs:{size:"small"}},["评论"])]),t("el-badge",{staticClass:"item",attrs:{max:10},domProps:{value:100}},[t("el-button",{attrs:{size:"small"}},["回复"])])]),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-badge value="new" class="item">\n <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n <el-button size="small">回复</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[t("div",{slot:"source",staticClass:"source"},[t("el-badge",{staticClass:"item",attrs:{value:"new"}},[t("el-button",{attrs:{size:"small"}},["评论"])]),t("el-badge",{staticClass:"item",attrs:{value:"hot"}},[t("el-button",{attrs:{size:"small"}},["回复"])])]),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-badge is-dot class="item">数据查询</el-badge>\n<el-badge is-dot class="item">\n <el-button class="share-button" icon="share" type="primary"></el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[t("div",{slot:"source",staticClass:"source"},[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},["数据查询"]),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"share",type:"primary"}})])]),s._m(17),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(18)])]),s._m(19),s._m(20)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"badge-biao-ji"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge-biao-ji","aria-hidden":"true"}},["¶"])," Badge 标记"])},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("span",{staticClass:"el-dropdown-link"},["\n 点我查看",t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})])},function(){var s=this,t=s.$createElement;s._c;return t("p",["定义",t("code",["value"]),"属性，它接受",t("code",["Number"]),"或者",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"},['"12"'])," ",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"},['"3"'])," ",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"},["el-dropdown"])," ",t("span",{staticClass:"hljs-attr"},["trigger"]),"=",t("span",{staticClass:"hljs-string"},['"click"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-dropdown-link"']),">"]),"\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-caret-bottom el-icon--right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\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"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"clearfix"']),">"]),"\n 评论\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-badge"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"mark"'])," ",t("span",{staticClass:"hljs-attr"},[":value"]),"=",t("span",{staticClass:"hljs-string"},['"12"'])," />"]),"\n ",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"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"clearfix"']),">"]),"\n 回复\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-badge"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"mark"'])," ",t("span",{staticClass:"hljs-attr"},[":value"]),"=",t("span",{staticClass:"hljs-string"},['"3"'])," />"]),"\n ",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\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:"zui-da-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zui-da-zhi","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",["max"]),"属性定义，它接受一个",t("code",["Number"]),"，需要注意的是，只有当",t("code",["value"]),"为",t("code",["Number"]),"时，它才会生效。"])},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"},['"200"'])," ",t("span",{staticClass:"hljs-attr"},[":max"]),"=",t("span",{staticClass:"hljs-string"},['"99"'])," ",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"},['"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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"xiao-hong-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-hong-dian","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",["is-dot"]),"属性，它接受一个",t("code",["Boolean"]),"。"])},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"},["is-dot"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"item"']),">"]),"数据查询",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"},["is-dot"])," ",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"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"share-button"'])," ",t("span",{staticClass:"hljs-attr"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"share"'])," ",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-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:"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",["value"]),t("td",["显示值"]),t("td",["string, number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["max"]),t("td",["最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型"]),t("td",["number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["is-dot"]),t("td",["小圆点"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])}]}},function(s,t,a){s.exports=a(245)},function(s,t,a){var n,e,l=a(246);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,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-breadcrumb separator="/">\n <el-breadcrumb-item :to="{ path: \'/\' }">首页</el-breadcrumb-item>\n <el-breadcrumb-item>活动管理</el-breadcrumb-item>\n <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n</el-breadcrumb>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},["首页"]),t("el-breadcrumb-item",["活动管理"]),t("el-breadcrumb-item",["活动列表"]),t("el-breadcrumb-item",["活动详情"])])]),s._m(4),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(5)])]),s._m(6),s._m(7),s._m(8),s._m(9)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"breadcrumb-mian-bao-xie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-mian-bao-xie","aria-hidden":"true"}},["¶"])," Breadcrumb 面包屑"])},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("p",["在",t("code",["el-breadcrumb"]),"中使用",t("code",["el-breadcrumb-item"]),"标签表示从首页开始的每一级。Element 提供了一个",t("code",["separator"]),"属性，在",t("code",["el-breadcrumb"]),"标签中设置它来决定分隔符，它只能是字符串，默认为斜杠",t("code",["/"]),"。"])},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-breadcrumb"])," ",t("span",{staticClass:"hljs-attr"},["separator"]),"=",t("span",{staticClass:"hljs-string"},['"/"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-breadcrumb-item"])," ",t("span",{staticClass:"hljs-attr"},[":to"]),"=",t("span",{staticClass:"hljs-string"},["\"{ path: '/' }\""]),">"]),"首页",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-breadcrumb-item"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-breadcrumb-item"]),">"]),"活动管理",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-breadcrumb-item"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-breadcrumb-item"]),">"]),"活动列表",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-breadcrumb-item"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-breadcrumb-item"]),">"]),"活动详情",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-breadcrumb-item"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-breadcrumb"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"breadcrumb-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},["¶"])," Breadcrumb 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",["separator"]),t("td",["分隔符"]),t("td",["string"]),t("td",["—"]),t("td",["斜杠'/'"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"breadcrumb-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},["¶"])," Breadcrumb 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",["to"]),t("td",["路由跳转对象，同 ",t("code",["vue-router"])," 的 ",t("code",["to"])]),t("td",["string/object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["replace"]),t("td",["在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])}]}},function(s,t,a){s.exports=a(248)},function(s,t,a){var n,e;a(249),n=a(251);var l=a(252);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";t.__esModule=!0;var n=a(67);t.default={data:function(){return{isLoading:!1,isLoading2:!1}},methods:{handleClick:function(s){console.log(s),alert("button clicked!")}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[2];(0,n.addClass)(t,"intro-block")})}}},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-button>默认按钮</el-button>\n<el-button type="primary">主要按钮</el-button>\n<el-button type="text">文字按钮</el-button>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-button",["默认按钮"]),t("el-button",{attrs:{type:"primary"}},["主要按钮"]),t("el-button",{attrs:{type:"text"}},["文字按钮"])]),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:'<el-button :plain="true" :disabled="true">主要按钮</el-button>\n<el-button type="primary" :disabled="true">主要按钮</el-button>\n<el-button type="text" :disabled="true">文字按钮</el-button>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-button",{attrs:{plain:!0,disabled:!0}},["主要按钮"]),t("el-button",{attrs:{type:"primary",disabled:!0}},["主要按钮"]),t("el-button",{attrs:{type:"text",disabled:!0}},["文字按钮"])]),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:'<div class="block">\n <span class="demonstration">默认显示颜色</span>\n <span class="wrapper">\n <el-button type="success">成功按钮</el-button>\n <el-button type="warning">警告按钮</el-button>\n <el-button type="danger">危险按钮</el-button>\n <el-button type="info">信息按钮</el-button>\n </span>\n</div>\n<div class="block">\n <span class="demonstration">hover 显示颜色</span>\n <span class="wrapper">\n <el-button :plain="true" type="success">成功按钮</el-button>\n <el-button :plain="true" type="warning">警告按钮</el-button>\n <el-button :plain="true" type="danger">危险按钮</el-button>\n <el-button :plain="true" type="info">信息按钮</el-button>\n </span>\n</div>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("div",{staticClass:"block"},[s._m(12),t("span",{staticClass:"wrapper"},[t("el-button",{attrs:{type:"success"}},["成功按钮"]),t("el-button",{attrs:{type:"warning"}},["警告按钮"]),t("el-button",{attrs:{type:"danger"}},["危险按钮"]),t("el-button",{attrs:{type:"info"}},["信息按钮"])])]),t("div",{staticClass:"block"},[s._m(13),t("span",{staticClass:"wrapper"},[t("el-button",{attrs:{plain:!0,type:"success"}},["成功按钮"]),t("el-button",{attrs:{plain:!0,type:"warning"}},["警告按钮"]),t("el-button",{attrs:{plain:!0,type:"danger"}},["危险按钮"]),t("el-button",{attrs:{plain:!0,type:"info"}},["信息按钮"])])])]),s._m(14),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(15)])]),s._m(16),s._m(17),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" icon="edit"></el-button>\n<el-button type="primary" icon="share"></el-button>\n<el-button type="primary" icon="delete"></el-button>\n<el-button type="primary" icon="search">搜索</el-button>\n<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-button",{attrs:{type:"primary",icon:"edit"}}),t("el-button",{attrs:{type:"primary",icon:"share"}}),t("el-button",{attrs:{type:"primary",icon:"delete"}}),t("el-button",{attrs:{type:"primary",icon:"search"}},["搜索"]),t("el-button",{attrs:{type:"primary"}},["上传",s._m(18)])]),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:'<el-button-group>\n <el-button type="primary" icon="arrow-left">上一页</el-button>\n <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>\n</el-button-group>\n<el-button-group>\n <el-button type="primary" icon="edit"></el-button>\n <el-button type="primary" icon="share"></el-button>\n <el-button type="primary" icon="delete"></el-button>\n</el-button-group>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"arrow-left"}},["上一页"]),t("el-button",{attrs:{type:"primary"}},["下一页",s._m(23)])]),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"edit"}}),t("el-button",{attrs:{type:"primary",icon:"share"}}),t("el-button",{attrs:{type:"primary",icon:"delete"}})])]),s._m(24),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(25)])]),s._m(26),s._m(27),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" :loading="true">加载中</el-button>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-button",{attrs:{type:"primary",loading:!0}},["加载中"])]),s._m(28),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(29)])]),s._m(30),s._m(31),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" size="large">大型按钮</el-button>\n<el-button type="primary">正常按钮</el-button>\n<el-button type="primary" size="small">小型按钮</el-button>\n<el-button type="primary" size="mini">超小按钮</el-button>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-button",{attrs:{type:"primary",size:"large"}},["大型按钮"]),t("el-button",{attrs:{type:"primary"}},["正常按钮"]),t("el-button",{attrs:{type:"primary",size:"small"}},["小型按钮"]),t("el-button",{attrs:{type:"primary",size:"mini"}},["超小按钮"])]),s._m(32),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(33)])]),s._m(34),s._m(35)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"button-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-an-niu","aria-hidden":"true"}},["¶"])," Button 按钮"])},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("p",["Button 组件默认提供7种主题，由",t("code",["type"]),"属性来定义，默认为",t("code",["default"]),"。"])},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-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"},['"text"']),">"]),"文字按钮",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:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","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",["disabled"]),"属性来定义按钮是否可用，它接受一个",t("code",["Boolean"]),"值。"])},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"']),">"]),"主要按钮",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"]),"=",t("span",{staticClass:"hljs-string"},['"true"']),">"]),"主要按钮",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"'])," ",t("span",{staticClass:"hljs-attr"},[":disabled"]),"=",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:"you-yan-se-qing-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#you-yan-se-qing-xiang","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"},["hover 显示颜色"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["朴素按钮同样设置了不同的",t("code",["type"]),"属性对应的样式（可选值同上），默认为",t("code",["info"]),"。设置",t("code",["plain"]),"属性，它接受一个",t("code",["Boolean"]),"。注意，在该情况下，",t("code",["type"]),"虽然可以为",t("code",["text"]),"，但是是没有意义的，会显示为",t("code",["text button"]),"的样式。"])},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"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"wrapper"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),">"]),"成功按钮",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"},['"warning"']),">"]),"警告按钮",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"},['"danger"']),">"]),"危险按钮",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"},['"info"']),">"]),"信息按钮",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"},["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"']),">"]),"hover 显示颜色",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"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"wrapper"']),">"]),"\n ",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"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),">"]),"成功按钮",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"warning"']),">"]),"警告按钮",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"danger"']),">"]),"危险按钮",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"info"']),">"]),"信息按钮",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"},["div"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"tu-biao-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-an-niu","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 el-icon--right"})},function(){var s=this,t=s.$createElement;s._c;return t("p",["设置",t("code",["icon"]),"属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用",t("code",["i"]),"标签即可，可以使用自定义图标。"])},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"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"edit"']),">"]),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"},['"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"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"search"']),">"]),"搜索",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"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-upload el-icon--right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),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:"an-niu-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-zu","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-arrow-right el-icon--right"})},function(){var s=this,t=s.$createElement;s._c;return t("p",["使用",t("code",["<el-button-group>"]),"标签来嵌套你的按钮。"])},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-group"]),">"]),"\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"},['"arrow-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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"']),">"]),"下一页",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-arrow-right el-icon--right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),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",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button-group"]),">"]),"\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"},['"edit"']),">"]),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"},['"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-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"mini"']),">"]),"超小按钮",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:"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",["size"]),t("td",["尺寸"]),t("td",["string"]),t("td",["large,small,mini"]),t("td",["—"])]),t("tr",[t("td",["type"]),t("td",["类型"]),t("td",["string"]),t("td",["primary,success,warning,danger,info,text"]),t("td",["—"])]),t("tr",[t("td",["plain"]),t("td",["是否朴素按钮"]),t("td",["Boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["loading"]),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",["icon"]),t("td",["图标，已有的图标库中的图标名"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["autofocus"]),t("td",["是否默认聚焦"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["native-type"]),t("td",["原生 type 属性"]),t("td",["string"]),t("td",["button,submit,reset"]),t("td",["button"])])])])}]}},function(s,t,a){s.exports=a(254)},function(s,t,a){var n,e;a(255),n=a(257);var l=a(258);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-4ea7e4bb",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(74),l=n(e);t.default={data:function(){return{currentDate:l.default.format(new Date,"yyyy-MM-dd HH:mm")}}}},function(s,t,a){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-card class="box-card">\n <div slot="header" class="clearfix">\n <span style="line-height: 36px;">卡片名称</span>\n <el-button style="float: right;" type="primary">操作按钮</el-button>\n </div>\n <div v-for="o in 4" class="text item">\n {{\'列表内容 \' + o }}\n </div>\n</el-card>\n\n\n',script:null,style:'\n .text {\n font-size: 14px;\n }\n\n .item {\n padding: 18px 0;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n .clearfix:after {\n clear: both\n }\n\n .box-card {\n width: 480px;\n }\n'}}},[t("div",{slot:"source",staticClass:"source"},[t("el-card",{staticClass:"box-card"},[t("div",{slot:"header",staticClass:"clearfix"},[s._m(4),t("el-button",{attrs:{style:"float: right;",type:"primary"}},["操作按钮"])]),s._l(4,function(a){return t("div",{staticClass:"text item"},["\n "+s._s("列表内容 "+a)+"\n "])})])]),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-card class="box-card">\n <div v-for="o in 4" class="text item">\n {{\'列表内容 \' + o }}\n </div>\n</el-card>\n\n\n',script:null,style:"\n .text {\n font-size: 14px;\n }\n\n .item {\n padding: 18px 0;\n }\n\n .box-card {\n width: 480px;\n }\n"}}},[t("div",{slot:"source",staticClass:"source"},[t("el-card",{staticClass:"box-card"},[s._l(4,function(a){return t("div",{staticClass:"text item"},["\n "+s._s("列表内容 "+a)+"\n "])})])]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(9)])]),s._m(10),s._m(11),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row>\n <el-col :span="8" v-for="(o, index) in 2" :offset="index > 0 ? 2 : 0">\n <el-card :body-style="{ padding: \'0px\' }">\n <img src="~examples/assets/images/hamburger.png" class="image">\n <div style="padding: 14px;">\n <span>好吃的汉堡</span>\n <div class="bottom clearfix">\n <time class="time">{{ currentDate }}</time>\n <el-button type="text" class="button">操作按钮</el-button>\n </div>\n </div>\n </el-card>\n </el-col>\n</el-row>\n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n currentDate: new Date()\n };\n }\n}\n",style:'\n .time {\n font-size: 13px;\n color: #999;\n }\n \n .bottom {\n margin-top: 13px;\n line-height: 12px;\n }\n\n .button {\n padding: 0;\n float: right;\n }\n\n .image {\n width: 100%;\n display: block;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n \n .clearfix:after {\n clear: both\n }\n'}}},[t("div",{slot:"source",staticClass:"source"},[t("el-row",[s._l(2,function(a,n){return t("el-col",{attrs:{span:8,offset:n>0?2:0}},[t("el-card",{attrs:{"body-style":{padding:"0px"}}},[s._m(12,!0),t("div",{attrs:{style:"padding: 14px;"}},[s._m(13,!0),t("div",{staticClass:"bottom clearfix"},[t("time",{staticClass:"time"},[s._s(s.currentDate)]),t("el-button",{staticClass:"button",attrs:{type:"text"}},["操作按钮"])])])])])})])]),s._m(14),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(15)])]),s._m(16),s._m(17)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"card-qia-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-qia-pian","aria-hidden":"true"}},["¶"])," Card 卡片"])},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("span",{attrs:{style:"line-height: 36px;"}},["卡片名称"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Card 组件包括",t("code",["header"]),"和",t("code",["body"]),"部分，",t("code",["header"]),"部分需要有显式具名 slot 分发，同时也是可选的。"])},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-card"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"box-card"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"header"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"clearfix"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"line-height: 36px;"']),">"]),"卡片名称",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"float: right;"'])," ",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"},["div"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["v-for"]),"=",t("span",{staticClass:"hljs-string"},['"o in 4"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"text item"']),">"]),"\n ",t("span",["{{"]),"'列表内容 ' + o ",t("span",["}}"]),"\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\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"css"},["\n ",t("span",{staticClass:"hljs-selector-class"},[".text"])," {\n ",t("span",{staticClass:"hljs-attribute"},["font-size"]),": ",t("span",{staticClass:"hljs-number"},["14px"]),";\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".item"])," {\n ",t("span",{staticClass:"hljs-attribute"},["padding"]),": ",t("span",{staticClass:"hljs-number"},["18px"])," ",t("span",{staticClass:"hljs-number"},["0"]),";\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".clearfix"]),t("span",{staticClass:"hljs-selector-pseudo"},[":before"]),",\n ",t("span",{staticClass:"hljs-selector-class"},[".clearfix"]),t("span",{staticClass:"hljs-selector-pseudo"},[":after"])," {\n ",t("span",{staticClass:"hljs-attribute"},["display"]),": table;\n ",t("span",{staticClass:"hljs-attribute"},["content"]),": ",t("span",{staticClass:"hljs-string"},['""']),";\n }\n ",t("span",{staticClass:"hljs-selector-class"},[".clearfix"]),t("span",{staticClass:"hljs-selector-pseudo"},[":after"])," {\n ",t("span",{staticClass:"hljs-attribute"},["clear"]),": both\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".box-card"])," {\n ",t("span",{staticClass:"hljs-attribute"},["width"]),": ",t("span",{staticClass:"hljs-number"},["480px"]),";\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:"jian-dan-qia-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jian-dan-qia-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("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-card"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"box-card"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["v-for"]),"=",t("span",{staticClass:"hljs-string"},['"o in 4"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"text item"']),">"]),"\n ",t("span",["{{"]),"'列表内容 ' + o ",t("span",["}}"]),"\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\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"css"},["\n ",t("span",{staticClass:"hljs-selector-class"},[".text"])," {\n ",t("span",{staticClass:"hljs-attribute"},["font-size"]),": ",t("span",{staticClass:"hljs-number"},["14px"]),";\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".item"])," {\n ",t("span",{staticClass:"hljs-attribute"},["padding"]),": ",t("span",{staticClass:"hljs-number"},["18px"])," ",t("span",{staticClass:"hljs-number"},["0"]),";\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".box-card"])," {\n ",t("span",{staticClass:"hljs-attribute"},["width"]),": ",t("span",{staticClass:"hljs-number"},["480px"]),";\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:"dai-tu-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-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("img",{staticClass:"image",attrs:{src:a(76)}})},function(){var s=this,t=s.$createElement;s._c;return t("span",["好吃的汉堡"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["配置",t("code",["body-style"]),"属性来自定义",t("code",["body"]),"部分的",t("code",["style"]),"，我们还使用了布局组件。"])},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"]),">"]),"好吃的汉堡",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"']),">"]),"操作按钮",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"]),": ",t("span",{staticClass:"hljs-number"},["13px"]),";\n ",t("span",{staticClass:"hljs-attribute"},["color"]),": ",t("span",{staticClass:"hljs-number"},["#999"]),";\n }\n \n ",t("span",{staticClass:"hljs-selector-class"},[".bottom"])," {\n ",t("span",{staticClass:"hljs-attribute"},["margin-top"]),": ",t("span",{staticClass:"hljs-number"},["13px"]),";\n ",t("span",{staticClass:"hljs-attribute"},["line-height"]),": ",t("span",{staticClass:"hljs-number"},["12px"]),";\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".button"])," {\n ",t("span",{staticClass:"hljs-attribute"},["padding"]),": ",t("span",{staticClass:"hljs-number"},["0"]),";\n ",t("span",{staticClass:"hljs-attribute"},["float"]),": right;\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".image"])," {\n ",t("span",{staticClass:"hljs-attribute"},["width"]),": ",t("span",{staticClass:"hljs-number"},["100%"]),";\n ",t("span",{staticClass:"hljs-attribute"},["display"]),": block;\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".clearfix"]),t("span",{staticClass:"hljs-selector-pseudo"},[":before"]),",\n ",t("span",{staticClass:"hljs-selector-class"},[".clearfix"]),t("span",{staticClass:"hljs-selector-pseudo"},[":after"])," {\n ",t("span",{staticClass:"hljs-attribute"},["display"]),": table;\n ",t("span",{staticClass:"hljs-attribute"},["content"]),": ",t("span",{staticClass:"hljs-string"},['""']),";\n }\n \n ",t("span",{staticClass:"hljs-selector-class"},[".clearfix"]),t("span",{staticClass:"hljs-selector-pseudo"},[":after"])," {\n ",t("span",{staticClass:"hljs-attribute"},["clear"]),": both\n }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["style"]),">"]),"\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"},["currentDate"]),": ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"()\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",["header"]),t("td",["设置 header，也可以通过 ",t("code",["slot#header"])," 传入 DOM"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["body-style"]),t("td",["设置 body 的样式"]),t("td",["object"]),t("td",["—"]),t("td",["{ padding: '20px' }"])])])])}]}},function(s,t,a){s.exports=a(260)},function(s,t,a){var n,e;a(261),n=a(263);var l=a(264);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";s.exports={data:function(){return{checkList:["选中且禁用","复选框 A"],checked:!1,checked1:!1,checked2:!0,isValid:"可用"}},methods:{handleChange:function(s){console.log(s)}}}},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 <!-- `checked` 为 true 或 false -->\n <el-checkbox v-model="checked" checked>备选项</el-checkbox>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n checked: true\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checked,expression:"checked"}],attrs:{checked:""},domProps:{value:s.checked},on:{input:function(t){s.checked=t}}},["备选项"])]]),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-checkbox v-model="checked1" disabled>备选项1</el-checkbox>\n <el-checkbox v-model="checked2" disabled>备选项</el-checkbox>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n checked1: false,\n checked2: true\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checked1,expression:"checked1"}],attrs:{disabled:""},domProps:{value:s.checked1},on:{input:function(t){s.checked1=t}}},["备选项1"]),t("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checked2,expression:"checked2"}],attrs:{disabled:""},domProps:{value:s.checked2},on:{input:function(t){s.checked2=t}}},["备选项"])]]),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-checkbox-group v-model="checkList">\n <el-checkbox label="复选框 A"></el-checkbox>\n <el-checkbox label="复选框 B"></el-checkbox>\n <el-checkbox label="复选框 C"></el-checkbox>\n <el-checkbox label="禁用" disabled></el-checkbox>\n <el-checkbox label="选中且禁用" disabled></el-checkbox>\n </el-checkbox-group>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n checkList: ['选中且禁用','复选框 A']\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.checkList,expression:"checkList"}],domProps:{value:s.checkList},on:{input:function(t){s.checkList=t}}},[t("el-checkbox",{attrs:{label:"复选框 A"}}),t("el-checkbox",{attrs:{label:"复选框 B"}}),t("el-checkbox",{attrs:{label:"复选框 C"}}),t("el-checkbox",{attrs:{label:"禁用",disabled:""}}),t("el-checkbox",{attrs:{label:"选中且禁用",disabled:""}})])]]),s._m(12),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(13)])]),s._m(14),s._m(15),s._m(16),s._m(17)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"checkbox-duo-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-duo-xuan-kuang","aria-hidden":"true"}},["¶"])," Checkbox 多选框"])},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("p",["在",t("code",["el-checkbox"]),"元素中定义",t("code",["v-model"]),"绑定变量，单一的",t("code",["checkbox"]),"中，默认绑定变量的值会是",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 ",t("span",{staticClass:"hljs-comment"},["<!-- `checked` 为 true 或 false -->"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"checked"'])," ",t("span",{staticClass:"hljs-attr"},["checked"]),">"]),"备选项",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-checkbox"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\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"},["checked"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),"\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:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","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",["disabled"]),"属性即可。"])},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-checkbox"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"checked1"'])," ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),"备选项1",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"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"checked2"'])," ",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"},["template"]),">"]),"\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"},["checked1"]),": ",t("span",{staticClass:"hljs-literal"},["false"]),",\n ",t("span",{staticClass:"hljs-attr"},["checked2"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),"\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:"duo-xuan-kuang-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan-kuang-zu","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",["checkbox-group"]),"元素能把多个 checkbox 管理为一组，只需要在 Group 中使用",t("code",["v-model"]),"绑定",t("code",["Array"]),"类型的变量即可，",t("code",["label"]),"属性除了改变 checkbox 按钮后的介绍外，同时也是该 checkbox 对应的值，",t("code",["label"]),"与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。"])},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-checkbox-group"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"checkList"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-checkbox"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"复选框 A"']),">"]),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"},['"复选框 B"']),">"]),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"},['"复选框 C"']),">"]),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"])," ",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(5)]),t("el-col",{attrs:{span:8}},[s._m(6)])]),s._m(7),s._m(8),t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:6}},[s._m(9)]),t("el-col",{attrs:{span:6}},[s._m(10)]),t("el-col",{attrs:{span:6}},[s._m(11)]),t("el-col",{attrs:{span:6}},[s._m(12)])]),s._m(13),s._m(14),t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:6}},[s._m(15)]),t("el-col",{attrs:{span:6}},[s._m(16)]),t("el-col",{attrs:{span:6}},[s._m(17)]),t("el-col",{attrs:{span:6}},[s._m(18)])])])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"color-se-cai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-se-cai","aria-hidden":"true"}},["¶"])," Color 色彩"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。"])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"zhu-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-se","aria-hidden":"true"}},["¶"])," 主色"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Element 主要品牌颜色是鲜艳、友好的蓝色。"])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box bg-blue-light"},["Light Blue",t("div",{staticClass:"value"},["#58B7FF"])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box bg-blue"},["Blue",t("div",{staticClass:"value"},["#20A0FF"])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box bg-blue-dark"},["Dark Blue",t("div",{staticClass:"value"},["#1D8CE0"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"fu-zhu-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-se","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("div",{staticClass:"demo-color-box bg-info"},["Blue",t("div",{staticClass:"value"},["#20A0FF"])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box bg-success"},["Success",t("div",{staticClass:"value"},["#13CE66"])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box bg-warning"},["Warning",t("div",{staticClass:"value"},["#F7BA2A"])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box bg-danger"},["Danger",t("div",{staticClass:"value"},["#FF4949"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"zhong-xing-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhong-xing-se","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("div",{staticClass:"demo-color-box-group"},[t("div",{staticClass:"demo-color-box bg-black"},["Black",t("div",{staticClass:"value"},["#1F2D3D"])]),t("div",{staticClass:"demo-color-box bg-black-light"},["Light Black",t("div",{staticClass:"value"},["#324057"])]),t("div",{staticClass:"demo-color-box bg-black-lighter"},["Extra Light Black",t("div",{staticClass:"value"},["#475669"])])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box-group"},[t("div",{staticClass:"demo-color-box bg-silver"},["Silver",t("div",{staticClass:"value"},["#8492A6"])]),t("div",{staticClass:"demo-color-box bg-silver-light"},["Light Silver",t("div",{staticClass:"value"},["#99A9BF"])]),t("div",{staticClass:"demo-color-box bg-silver-lighter"},["Extra Light Silver",t("div",{staticClass:"value"},["#C0CCDA"])])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box-group"},[t("div",{staticClass:"demo-color-box color-gray bg-gray"},["Gray",t("div",{staticClass:"value"},["#D3DCE6"])]),t("div",{staticClass:"demo-color-box color-gray bg-gray-light"},["Light Gray",t("div",{staticClass:"value"},["#E5E9F2"])]),t("div",{staticClass:"demo-color-box color-gray bg-gray-lighter"},["Extra Light Gray",t("div",{staticClass:"value"},["#EFF2F7"])])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-color-box-group",attrs:{style:"border: 1px solid #e0e6ed;border-radius: 4px;"}},[t("div",{staticClass:"demo-color-box color-gray bg-white-dark"},["Dark White",t("div",{staticClass:"value"},["#F9FAFC"])]),t("div",{staticClass:"demo-color-box color-gray bg-white"},["White",t("div",{staticClass:"value"},["#FFFFFF"])])])}]}},function(s,t,a){s.exports=a(271)},function(s,t,a){var n,e,l=a(272);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:"zi-ding-yi-zhu-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zhu-ti","aria-hidden":"true"}},["¶"])," 自定义主题"]),t("p",["Element 默认提供一套主题，CSS 命名采用 BEM 的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面方法。"]),t("h3",{attrs:{id:"an-zhuang-gong-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang-gong-ju","aria-hidden":"true"}},["¶"])," 安装工具"]),t("p",["首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。"]),t("pre",[t("code",{staticClass:"hljs language-shell"},["npm i element-theme -g\n"])]),t("p",["安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。"]),t("pre",[t("code",{staticClass:"hljs language-shell"},["# 从 npm\nnpm i element-theme-default -D\n\n# 从 GitHub\nnpm i https://github.com/ElementUI/theme-default -D\n"])]),t("h3",{attrs:{id:"chu-shi-hua-bian-liang-wen-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chu-shi-hua-bian-liang-wen-jian","aria-hidden":"true"}},["¶"])," 初始化变量文件"]),t("p",["主题生成工具安装成功后，如果全局安装可以在命令行里通过 ",t("code",["et"])," 调用工具，如果安装在当前目录下，需要通过 ",t("code",["node_modules/.bin/et"])," 访问到命令。执行 ",t("code",["-i"])," 初始化变量文件。默认输出到 ",t("code",["element-variables.css"]),"，当然你可以传参数指定文件输出目录。"]),t("pre",[t("code",{staticClass:"hljs language-shell"},["et -i [可以自定义变量文件]\n\n> ✔ Generator variables file\n"])]),t("p",["如果使用默认配置，执行后当前目录会有一个 ",t("code",["element-variables.css"])," 文件。内部包含了主题所用到的所有变量，它们使用 CSS4 的风格定义。大致结构如下："]),t("pre",[t("code",{staticClass:"hljs language-css"},[t("span",{staticClass:"hljs-selector-pseudo"},[":root"])," {\n\n ",t("span",{staticClass:"hljs-comment"},["/* Colors\n -------------------------- */"]),"\n ",t("span",{staticClass:"hljs-attribute"},["--color-primary"]),": ",t("span",{staticClass:"hljs-number"},["#20a0ff"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-success"]),": ",t("span",{staticClass:"hljs-number"},["#13ce66"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-warning"]),": ",t("span",{staticClass:"hljs-number"},["#f7ba2a"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-danger"]),": ",t("span",{staticClass:"hljs-number"},["#ff4949"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-info"]),": ",t("span",{staticClass:"hljs-number"},["#50BFFF"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-blue"]),": ",t("span",{staticClass:"hljs-number"},["#2e90fe"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-blue-light"]),": ",t("span",{staticClass:"hljs-number"},["#5da9ff"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-blue-lighter"]),": ",t("span",{staticClass:"hljs-built_in"},["rgba"]),"(var(--color-blue), ",t("span",{staticClass:"hljs-number"},["0.12"]),");\n ",t("span",{staticClass:"hljs-attribute"},["--color-white"]),": ",t("span",{staticClass:"hljs-number"},["#fff"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-black"]),": ",t("span",{staticClass:"hljs-number"},["#000"]),";\n ",t("span",{staticClass:"hljs-attribute"},["--color-grey"]),": ",t("span",{staticClass:"hljs-number"},["#C0CCDA"]),";\n"])]),t("h3",{attrs:{id:"xiu-gai-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-bian-liang","aria-hidden":"true"}},["¶"])," 修改变量"]),t("p",["直接编辑 ",t("code",["element-variables.css"])," 文件，例如修改主题色为红色。"]),t("pre",[t("code",{staticClass:"hljs language-CSS"},[t("span",{staticClass:"hljs-selector-tag"},["--color-primary"]),": ",t("span",{staticClass:"hljs-selector-tag"},["red"]),";\n"])]),t("h3",{attrs:{id:"bian-yi-zhu-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bian-yi-zhu-ti","aria-hidden":"true"}},["¶"])," 编译主题"]),t("p",["保存文件后，到命令行里执行 ",t("code",["et"])," 编译主题，如果你想启用 ",t("code",["watch"])," 模式，实时编译主题，增加 ",t("code",["-w"])," 参数；如果你在初始化时指定了自定义变量文件，则需要增加 ",t("code",["-c"])," 参数，并带上你的变量文件名"]),t("pre",[t("code",{staticClass:"hljs language-shell"},["et\n\n> ✔ build theme font\n> ✔ build element theme\n"])]),t("h3",{attrs:{id:"yin-ru-zi-ding-yi-zhu-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-zi-ding-yi-zhu-ti","aria-hidden":"true"}},["¶"])," 引入自定义主题"]),t("p",["默认情况下编译的主题目录是放在 ",t("code",["./theme"])," 下，你可以通过 ",t("code",["-o"])," 参数指定打包目录。像引入默认主题一样，在代码里直接引用 ",t("code",["theme/index.css"])," 文件即可。"]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},["import"])," ",t("span",{staticClass:"hljs-string"},["'../theme/index.css'"]),"\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"])," Vue ",t("span",{staticClass:"hljs-keyword"},["from"])," ",t("span",{staticClass:"hljs-string"},["'vue'"]),"\n\nVue.use(ElementUI)\n"])]),t("h3",{attrs:{id:"da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti","aria-hidden":"true"}},["¶"])," 搭配插件按需引入组件主题"]),t("p",["如果是搭配 ",t("code",["babel-plugin-component"])," 一起使用，只需要修改 ",t("code",[".babelrc"])," 的配置，指定 ",t("code",["styleLibraryName"])," 路径为自定义主题相对于 ",t("code",[".babelrc"])," 的路径，注意要加 ",t("code",["~"]),"。"]),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",["如果不清楚 ",t("code",["babel-plugin-component"])," 是什么，请阅读 ",t("a",{attrs:{href:"./#/zh-CN/component/quickstart"}},["快读上手"])," 一节。更多 ",t("code",["element-theme"])," 用法请参考",t("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},["项目仓库"]),"。"])])}]}},function(s,t,a){s.exports=a(274)},function(s,t,a){var n,e;a(275),n=a(277);var l=a(278);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";s.exports={data:function(){return{pickerOptions0:{disabledDate:function(s){return s.getTime()<Date.now()-864e5}},pickerOptions1:{disabledDate:function(s){return s.getTime()<Date.now()-864e5},shortcuts:[{text:"今天",onClick:function(s){s.$emit("pick",new Date)}},{text:"昨天",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"一周前",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"最近一周",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"最近一个月",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"最近三个月",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">默认</span>\n <el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">带快捷选项</span>\n <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1">\n </el-date-picker>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n pickerOptions0: {\n disabledDate(time) {\n return time.getTime() < Date.now() - 8.64e7;\n }\n },\n pickerOptions1: {\n shortcuts: [{\n text: '今天',\n onClick(picker) {\n picker.$emit('pick', new Date());\n }\n }, {\n text: '昨天',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit('pick', date);\n }\n }, {\n text: '一周前',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', date);\n }\n }]\n },\n value1: '',\n value2: '',\n };\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",rawName:"v-model",value:s.value1,expression:"value1"}],attrs:{type:"date",placeholder:"选择日期","picker-options":s.pickerOptions0},domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})]),t("div",{staticClass:"block"},[s._m(5),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{align:"right",type:"date",placeholder:"选择日期","picker-options":s.pickerOptions1},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})])]]),s._m(6),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(7)])]),s._m(8),s._m(9),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n <span class="demonstration">周</span>\n <el-date-picker v-model="value3" type="week" format="yyyy 第 WW 周" placeholder="选择周">\n </el-date-picker>\n</div>\n<div class="block">\n <span class="demonstration">月</span>\n <el-date-picker v-model="value4" type="month" placeholder="选择月">\n </el-date-picker>\n</div>\n<div class="block">\n <span class="demonstration">年</span>\n <el-date-picker v-model="value5" align="right" type="year" placeholder="选择年">\n </el-date-picker>\n</div>\n\n\n',script:"\n export default {\n data() {\n return {\n value3: '',\n value4: '',\n value5: ''\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("div",{staticClass:"block"},[s._m(10),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{type:"week",format:"yyyy 第 WW 周",placeholder:"选择周"},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})]),t("div",{staticClass:"block"},[s._m(11),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],attrs:{type:"month",placeholder:"选择月"},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}})]),t("div",{staticClass:"block"},[s._m(12),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value5,expression:"value5"}],attrs:{align:"right",type:"year",placeholder:"选择年"},domProps:{value:s.value5},on:{input:function(t){s.value5=t}}})])]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(13)])]),s._m(14),s._m(15),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">默认</span>\n <el-date-picker v-model="value6" type="daterange" placeholder="选择日期范围" style="width: 220px">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">带快捷选项</span>\n <el-date-picker v-model="value7" type="daterange" align="right" placeholder="选择日期范围" :picker-options="pickerOptions2" style="width: 220px">\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: '最近一周',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: '最近一个月',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: '最近三个月',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value6: '',\n value7: ''\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("div",{staticClass:"block"},[s._m(16),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value6,expression:"value6"}],attrs:{type:"daterange",placeholder:"选择日期范围",style:"width: 220px"},domProps:{value:s.value6},on:{input:function(t){s.value6=t}}})]),t("div",{staticClass:"block"},[s._m(17),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value7,expression:"value7"}],attrs:{type:"daterange",align:"right",placeholder:"选择日期范围","picker-options":s.pickerOptions2,style:"width: 220px"},domProps:{value:s.value7},on:{input:function(t){s.value7=t}}})])]]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(18)])]),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"datepicker-ri-qi-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker-ri-qi-xuan-ze-qi","aria-hidden":"true"}},["¶"])," DatePicker 日期选择器"])},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:"xuan-ze-ri"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri","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("p",["基本单位由",t("code",["type"]),"属性指定。快捷选项需配置",t("code",["picker-options"]),"对象中的",t("code",["shortcuts"]),"，禁用日期通过 ",t("code",["disabledDate"])," 设置，传入函数"])},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"},['"value1"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"date"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"选择日期"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},['"pickerOptions0"']),">"]),"\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"},['"value2"']),"\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"},['"date"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"选择日期"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},['"pickerOptions1"']),">"]),"\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"},["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"},["pickerOptions0"]),": {\n disabledDate(time) {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," time.getTime() < ",t("span",{staticClass:"hljs-built_in"},["Date"]),".now() - ",t("span",{staticClass:"hljs-number"},["8.64e7"]),";\n }\n },\n ",t("span",{staticClass:"hljs-attr"},["pickerOptions1"]),": {\n ",t("span",{staticClass:"hljs-attr"},["shortcuts"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'今天'"]),",\n onClick(picker) {\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"());\n }\n }, {\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'昨天'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," date = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n date.setTime(date.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", date);\n }\n }, {\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'一周前'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," date = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n date.setTime(date.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"])," * ",t("span",{staticClass:"hljs-number"},["7"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", date);\n }\n }]\n },\n ",t("span",{staticClass:"hljs-attr"},["value1"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["value2"]),": ",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:"qi-ta-ri-qi-dan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-ri-qi-dan-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("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"},["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"},['"value3"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"week"']),"\n ",t("span",{staticClass:"hljs-attr"},["format"]),"=",t("span",{staticClass:"hljs-string"},['"yyyy 第 WW 周"']),"\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",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"},['"value4"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"month"']),"\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",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",{staticClass:"hljs-string"},['"width: 220px"']),">"]),"\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"},['"value7"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"daterange"']),"\n ",t("span",{staticClass:"hljs-attr"},["align"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"选择日期范围"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},['"pickerOptions2"']),"\n ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width: 220px"']),">"]),"\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"},["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"},["pickerOptions2"]),": {\n ",t("span",{staticClass:"hljs-attr"},["shortcuts"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'最近一周'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," end = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n ",t("span",{staticClass:"hljs-keyword"},["const"])," start = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n start.setTime(start.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"])," * ",t("span",{staticClass:"hljs-number"},["7"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", [start, end]);\n }\n }, {\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'最近一个月'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," end = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n ",t("span",{staticClass:"hljs-keyword"},["const"])," start = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n start.setTime(start.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"])," * ",t("span",{staticClass:"hljs-number"},["30"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", [start, end]);\n }\n }, {\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'最近三个月'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," end = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n ",t("span",{staticClass:"hljs-keyword"},["const"])," start = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n start.setTime(start.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"])," * ",t("span",{staticClass:"hljs-number"},["90"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", [start, end]);\n }\n }]\n },\n ",t("span",{staticClass:"hljs-attr"},["value6"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["value7"]),": ",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",["DatePicker 下拉框的类名"]),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",[t("td",["change"]),t("td",["当 input 的值改变时触发，返回值和文本框一致"]),t("td",["formatted value"])])])])}]}},function(s,t,a){s.exports=a(280)},function(s,t,a){var n,e;a(281),n=a(283);var l=a(284);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";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"今天",onClick:function(s){s.$emit("pick",new Date)}},{text:"昨天",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"一周前",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"最近一周",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"最近一个月",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"最近三个月",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(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],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">默认</span>\n <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">带快捷选项</span>\n <el-date-picker v-model="value2" type="datetime" placeholder="选择日期时间" align="right" :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: '今天',\n onClick(picker) {\n picker.$emit('pick', new Date());\n }\n }, {\n text: '昨天',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit('pick', date);\n }\n }, {\n text: '一周前',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', date);\n }\n }]\n },\n value1: '',\n value2: ''\n };\n }\n };\n",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:"选择日期时间"},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:"选择日期时间",align:"right","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">默认</span>\n <el-date-picker v-model="value3" type="datetimerange" placeholder="选择时间范围" style="width:350px">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">带快捷选项</span>\n <el-date-picker v-model="value4" type="datetimerange" :picker-options="pickerOptions2" placeholder="选择时间范围" 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: '最近一周',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: '最近一个月',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit('pick', [start, end]);\n }\n }, {\n text: '最近三个月',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit('pick', [start, end]);\n }\n }]\n },\n value3: '',\n value4: ''\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("div",{staticClass:"block"},[s._m(8),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{type:"datetimerange",placeholder:"选择时间范围",style:"width:350px"},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})]),t("div",{staticClass:"block"},[s._m(9),t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],attrs:{type:"datetimerange","picker-options":s.pickerOptions2,placeholder:"选择时间范围",align:"right",style:"width:350px"},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}})])]]),s._m(10),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(11)])]),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"datetimepicker-ri-qi-shi-jian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker-ri-qi-shi-jian-xuan-ze-qi","aria-hidden":"true"}},["¶"])," DateTimePicker 日期时间选择器"])},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:"ri-qi-he-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-dian","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",["type"]),"属性为",t("code",["datetime"]),"，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。"])},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"},['"value1"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"datetime"']),"\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 ",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"},['"value2"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"datetime"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"选择日期时间"']),"\n ",t("span",{staticClass:"hljs-attr"},["align"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},['"pickerOptions1"']),">"]),"\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"},["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"},["pickerOptions1"]),": {\n ",t("span",{staticClass:"hljs-attr"},["shortcuts"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'今天'"]),",\n onClick(picker) {\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"());\n }\n }, {\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'昨天'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," date = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n date.setTime(date.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", date);\n }\n }, {\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'一周前'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," date = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n date.setTime(date.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"])," * ",t("span",{staticClass:"hljs-number"},["7"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", date);\n }\n }]\n },\n ",t("span",{staticClass:"hljs-attr"},["value1"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["value2"]),": ",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:"ri-qi-he-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-fan-wei","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",["type"]),"为",t("code",["datetimerange"]),"即可选择日期和时间范围"])},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"},['"value3"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"datetimerange"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"选择时间范围"']),"\n ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width:350px"']),">"]),"\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"},['"value4"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"datetimerange"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},['"pickerOptions2"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"选择时间范围"']),"\n ",t("span",{staticClass:"hljs-attr"},["align"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),"\n ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width:350px"']),">"]),"\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"},["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"},["pickerOptions2"]),": {\n ",t("span",{staticClass:"hljs-attr"},["shortcuts"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'最近一周'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," end = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n ",t("span",{staticClass:"hljs-keyword"},["const"])," start = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n start.setTime(start.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"])," * ",t("span",{staticClass:"hljs-number"},["7"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", [start, end]);\n }\n }, {\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'最近一个月'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," end = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n ",t("span",{staticClass:"hljs-keyword"},["const"])," start = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n start.setTime(start.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"])," * ",t("span",{staticClass:"hljs-number"},["30"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", [start, end]);\n }\n }, {\n ",t("span",{staticClass:"hljs-attr"},["text"]),": ",t("span",{staticClass:"hljs-string"},["'最近三个月'"]),",\n onClick(picker) {\n ",t("span",{staticClass:"hljs-keyword"},["const"])," end = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n ",t("span",{staticClass:"hljs-keyword"},["const"])," start = ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"();\n start.setTime(start.getTime() - ",t("span",{staticClass:"hljs-number"},["3600"])," * ",t("span",{staticClass:"hljs-number"},["1000"])," * ",t("span",{staticClass:"hljs-number"},["24"])," * ",t("span",{staticClass:"hljs-number"},["90"]),");\n picker.$emit(",t("span",{staticClass:"hljs-string"},["'pick'"]),", [start, end]);\n }\n }]\n },\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 };\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",[t("td",["change"]),t("td",["当 input 的值改变时触发，返回值和文本框一致"]),t("td",["formatted value"])])])])}]}},function(s,t,a){s.exports=a(286)},function(s,t,a){var n,e;a(287),n=a(289);var l=a(290);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";s.exports={data:function(){return{gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],dialogVisible:!1,dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"80px"}},methods:{openDialog:function(){this.$refs.dialogBind.open()}}}},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-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>\n\n<el-dialog title="提示" v-model="dialogVisible" size="tiny">\n <span>这是一段信息</span>\n <span slot="footer" class="dialog-footer">\n <el-button @click="dialogVisible = false">取 消</el-button>\n <el-button type="primary" @click="dialogVisible = false">确 定</el-button>\n </span>\n</el-dialog>\n\n\n',script:"\n export default {\n data() {\n return {\n dialogVisible: false\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogVisible=!0}}},["点击打开 Dialog"]),t("el-dialog",{directives:[{name:"model",rawName:"v-model",value:s.dialogVisible,expression:"dialogVisible"}],attrs:{title:"提示",size:"tiny"},domProps:{value:s.dialogVisible},on:{input:function(t){s.dialogVisible=t}}},[s._m(4),t("span",{slot:"footer",staticClass:"dialog-footer"},[t("el-button",{on:{click:function(t){s.dialogVisible=!1}}},["取 消"]),t("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},["确 定"])])])]),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:'<!-- Table -->\n<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>\n\n<el-dialog title="收货地址" v-model="dialogTableVisible">\n <el-table :data="gridData">\n <el-table-column property="date" label="日期" width="150"></el-table-column>\n <el-table-column property="name" label="姓名" width="200"></el-table-column>\n <el-table-column property="address" label="地址"></el-table-column>\n </el-table>\n</el-dialog>\n\n<!-- Form -->\n<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>\n\n<el-dialog title="收货地址" v-model="dialogFormVisible">\n <el-form :model="form">\n <el-form-item label="活动名称" :label-width="formLabelWidth">\n <el-input v-model="form.name" auto-complete="off"></el-input>\n </el-form-item>\n <el-form-item label="活动区域" :label-width="formLabelWidth">\n <el-select v-model="form.region" placeholder="请选择活动区域">\n <el-option label="区域一" value="shanghai"></el-option>\n <el-option label="区域二" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n </el-form>\n <div slot="footer" class="dialog-footer">\n <el-button @click="dialogFormVisible = false">取 消</el-button>\n <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>\n </div>\n</el-dialog>\n\n\n',script:"\n export default {\n data() {\n return {\n gridData: [{\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }],\n dialogTableVisible: false,\n dialogFormVisible: false,\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n formLabelWidth: '120px'\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogTableVisible=!0}}},["打开嵌套表格的 Dialog"]),t("el-dialog",{directives:[{name:"model",rawName:"v-model",value:s.dialogTableVisible,expression:"dialogTableVisible"}],attrs:{title:"收货地址"},domProps:{value:s.dialogTableVisible},on:{input:function(t){s.dialogTableVisible=t}}},[t("el-table",{attrs:{data:s.gridData}},[t("el-table-column",{attrs:{property:"date",label:"日期",width:"150"}}),t("el-table-column",{attrs:{property:"name",label:"姓名",width:"200"}}),t("el-table-column",{attrs:{property:"address",label:"地址"}})])]),t("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogFormVisible=!0}}},["打开嵌套表单的 Dialog"]),t("el-dialog",{directives:[{name:"model",rawName:"v-model",value:s.dialogFormVisible,expression:"dialogFormVisible"}],attrs:{title:"收货地址"},domProps:{value:s.dialogFormVisible},on:{input:function(t){s.dialogFormVisible=t}}},[t("el-form",{attrs:{model:s.form}},[t("el-form-item",{attrs:{label:"活动名称","label-width":s.formLabelWidth}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.form.name,expression:"form.name"}],attrs:{"auto-complete":"off"},domProps:{value:s.form.name},on:{input:function(t){s.form.name=t}}})]),t("el-form-item",{attrs:{label:"活动区域","label-width":s.formLabelWidth}},[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"}})])])]),t("div",{slot:"footer",staticClass:"dialog-footer"},[t("el-button",{on:{click:function(t){s.dialogFormVisible=!1}}},["取 消"]),t("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogFormVisible=!1}}},["确 定"])])])]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(9)])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"dialog-dui-hua-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog-dui-hua-kuang","aria-hidden":"true"}},["¶"])," Dialog 对话框"])},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-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},["¶"])," 基本用法"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Dialog 弹出一个对话框，适合需要定制性更大的场景。"])},function(){var s=this,t=s.$createElement;s._c;return t("span",["这是一段信息"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["需要设置",t("code",["v-model"]),"属性，它接收",t("code",["Boolean"]),"，当为",t("code",["true"]),"时显示 Dialog。Dialog 分为两个部分：",t("code",["body"]),"和",t("code",["footer"]),"，",t("code",["footer"]),"需要具名为",t("code",["footer"]),"的",t("code",["slot"]),"。",t("code",["title"]),"属性用于定义标题，它是可选的，默认值为空。本例通过显式改变",t("code",["v-model"]),"的值来打开 Dialog，此外我们还为 Dialog 实例提供了",t("code",["open"]),"和",t("code",["close"]),"方法，可以通过调用它们来打开/关闭 Dialog。"])},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"},['"text"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"dialogVisible = true"']),">"]),"点击打开 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"},['"提示"'])," ",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"]),">"]),"这是一段信息",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"']),">"]),"取 消",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"']),">"]),"确 定",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:"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",["Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。"])},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"']),">"]),"打开嵌套表格的 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"},['"收货地址"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"dialogTableVisible"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table"])," ",t("span",{staticClass:"hljs-attr"},[":data"]),"=",t("span",{staticClass:"hljs-string"},['"gridData"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"])," ",t("span",{staticClass:"hljs-attr"},["property"]),"=",t("span",{staticClass:"hljs-string"},['"date"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"日期"'])," ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"150"']),">"]),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"])," ",t("span",{staticClass:"hljs-attr"},["property"]),"=",t("span",{staticClass:"hljs-string"},['"name"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"姓名"'])," ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"200"']),">"]),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"])," ",t("span",{staticClass:"hljs-attr"},["property"]),"=",t("span",{staticClass:"hljs-string"},['"address"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"地址"']),">"]),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"},["el-dialog"]),">"]),"\n\n",t("span",{staticClass:"hljs-comment"},["<!-- Form -->"]),"\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"},['"dialogFormVisible = true"']),">"]),"打开嵌套表单的 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"},['"收货地址"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"dialogFormVisible"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form"])," ",t("span",{staticClass:"hljs-attr"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"form"']),">"]),"\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"},[":label-width"]),"=",t("span",{staticClass:"hljs-string"},['"formLabelWidth"']),">"]),"\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"},['"form.name"'])," ",t("span",{staticClass:"hljs-attr"},["auto-complete"]),"=",t("span",{staticClass:"hljs-string"},['"off"']),">"]),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"]),">"]),"\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"},[":label-width"]),"=",t("span",{staticClass:"hljs-string"},['"formLabelWidth"']),">"]),"\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"},['"form.region"'])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请选择活动区域"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"区域一"'])," ",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("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"区域二"'])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"beijing"']),">"]),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"},["el-form-item"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-form"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",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"},['"dialogFormVisible = false"']),">"]),"取 消",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"},['"dialogFormVisible = false"']),">"]),"确 定",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-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"},["gridData"]),": [{\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"},["'上海市普陀区金沙江路 1518 弄'"]),"\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"},["'上海市普陀区金沙江路 1518 弄'"]),"\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"},["'上海市普陀区金沙江路 1518 弄'"]),"\n }],\n ",t("span",{staticClass:"hljs-attr"},["dialogTableVisible"]),": ",t("span",{staticClass:"hljs-literal"},["false"]),",\n ",t("span",{staticClass:"hljs-attr"},["dialogFormVisible"]),": ",t("span",{staticClass:"hljs-literal"},["false"]),",\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 ",t("span",{staticClass:"hljs-attr"},["formLabelWidth"]),": ",t("span",{staticClass:"hljs-string"},["'120px'"]),"\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",["title"]),t("td",["Dialog 的标题"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["size"]),t("td",["Dialog 的大小"]),t("td",["string"]),t("td",["tiny/small/large/full"]),t("td",["small"])]),t("tr",[t("td",["top"]),t("td",["Dialog CSS 中的 top 值（仅在 size 不为 full 时有效）"]),t("td",["string"]),t("td",["—"]),t("td",["15%"])]),t("tr",[t("td",["modal"]),t("td",["是否需要遮罩层"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["lock-scroll"]),t("td",["是否在 Dialog 出现时将 body 滚动锁定"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["custom-class"]),t("td",["Dialog 的自定义类名"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["close-on-click-modal"]),t("td",["是否可以通过点击 modal 关闭 Dialog"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["close-on-press-escape"]),t("td",["是否可以通过按下 ESC 关闭 Dialog"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["show-close"]),t("td",["是否显示关闭按钮"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},["¶"])," Slot"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["name"]),t("th",["说明"])])]),t("tbody",[t("tr",[t("td",["—"]),t("td",["Dialog 的内容"])]),t("tr",[t("td",["footer"]),t("td",["Dialog 按钮操作区的内容"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},["¶"])," 方法"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["每个 ",t("code",["el-dialog"])," 实例都暴露了如下方法，用于在不显式改变 ",t("code",["v-model"])," 值的情况下打开 / 关闭实例："])},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",["open"]),t("td",["打开当前实例"])]),t("tr",[t("td",["close"]),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",["事件名称"]),t("th",["说明"]),t("th",["回调参数"])])]),t("tbody",[t("tr",[t("td",["close"]),t("td",["Dialog 关闭的回调"]),t("td",["—"])]),t("tr",[t("td",["open"]),t("td",["Dialog 打开的回调"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(292)},function(s,t,a){var n,e;a(293),n=a(295);var l=a(296);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:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;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-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 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",[s._m(4),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(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-dropdown>\n <el-button type="primary">\n 更多菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n </el-button>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>黄金糕</el-dropdown-item>\n <el-dropdown-item>狮子头</el-dropdown-item>\n <el-dropdown-item>螺蛳粉</el-dropdown-item>\n <el-dropdown-item>双皮奶</el-dropdown-item>\n <el-dropdown-item>蚵仔煎</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n 更多菜单\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>黄金糕</el-dropdown-item>\n <el-dropdown-item>狮子头</el-dropdown-item>\n <el-dropdown-item>螺蛳粉</el-dropdown-item>\n <el-dropdown-item>双皮奶</el-dropdown-item>\n <el-dropdown-item>蚵仔煎</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-dropdown",[t("el-button",{attrs:{type:"primary"}},["\n 更多菜单",s._m(9)]),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-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},["\n 更多菜单\n ",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(10),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(11)])]),s._m(12),s._m(13),t("demo-block",{
|
||
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),t("el-dropdown-menu",{slot:"dropdown"},[t("el-dropdown-item",{attrs:{command:"a"}},["黄金糕"]),t("el-dropdown-item",{attrs:{command:"b"}},["狮子头"]),t("el-dropdown-item",{attrs:{command:"c"}},["螺蛳粉"]),t("el-dropdown-item",{attrs:{command:"d",disabled:""}},["双皮奶"]),t("el-dropdown-item",{attrs:{command:"e",divided:""}},["蚵仔煎"])])])]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(28)])]),s._m(29),s._m(30),s._m(31),s._m(32),s._m(33),s._m(34)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"dropdown-xia-la-cai-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-xia-la-cai-dan","aria-hidden":"true"}},["¶"])," Dropdown 下拉菜单"])},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("span",{staticClass:"el-dropdown-link"},["\n 下拉菜单",t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})])},function(){var s=this,t=s.$createElement;s._c;return t("p",["通过组件",t("code",["slot"]),"来设置下拉触发的元素以及需要通过具名",t("code",["slot"]),"为",t("code",["dropdown"])," 来设置下拉菜单。默认情况下，下拉按钮只要",t("code",["hover"]),"即可，无需点击也会显示下拉菜单。"])},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-dropdown"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-dropdown-link"']),">"]),"\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-caret-bottom el-icon--right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\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"]),">"]),"黄金糕",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"]),">"]),"狮子头",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"]),">"]),"螺蛳粉",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"])," ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),"双皮奶",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"])," ",t("span",{staticClass:"hljs-attr"},["divided"]),">"]),"蚵仔煎",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:"hong-fa-dui-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-dui-xiang","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-caret-bottom el-icon--right"})},function(){var s=this,t=s.$createElement;s._c;return t("p",["设置",t("code",["split-button"]),"属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为",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-dropdown"]),">"]),"\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"']),">"]),"\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-caret-bottom el-icon--right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\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-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"]),">"]),"黄金糕",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"]),">"]),"狮子头",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"]),">"]),"螺蛳粉",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"]),">"]),"双皮奶",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"]),">"]),"蚵仔煎",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 更多菜单\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"]),">"]),"黄金糕",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"]),">"]),"狮子头",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"]),">"]),"螺蛳粉",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"]),">"]),"双皮奶",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"]),">"]),"蚵仔煎",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\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"hong-fa-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-fang-shi","aria-hidden":"true"}},["¶"])," 触发方式"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["可以配置 click 激活或者 hover 激活。"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"demonstration"},["hover 激活"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"el-dropdown-link"},["\n 下拉菜单",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 激活"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"el-dropdown-link"},["\n 下拉菜单",t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})])},function(){var s=this,t=s.$createElement;s._c;return t("p",["在",t("code",["trigger"]),"属性设置为",t("code",["click"]),"即可。"])},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"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"block-col-2"']),">"]),"\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"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demonstration"']),">"]),"hover 激活",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dropdown"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-dropdown-link"']),">"]),"\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-caret-bottom el-icon--right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\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"]),">"]),"黄金糕",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"]),">"]),"狮子头",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"]),">"]),"螺蛳粉",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"]),">"]),"双皮奶",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"]),">"]),"蚵仔煎",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-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"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demonstration"']),">"]),"click 激活",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dropdown"])," ",t("span",{staticClass:"hljs-attr"},["trigger"]),"=",t("span",{staticClass:"hljs-string"},['"click"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-dropdown-link"']),">"]),"\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-caret-bottom el-icon--right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\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"]),">"]),"黄金糕",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"]),">"]),"狮子头",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"]),">"]),"螺蛳粉",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"]),">"]),"双皮奶",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"]),">"]),"蚵仔煎",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-col"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-row"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"cai-dan-yin-cang-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cai-dan-yin-cang-fang-shi","aria-hidden":"true"}},["¶"])," 菜单隐藏方式"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["可以",t("code",["hide-on-click"]),"属性来配置。"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"el-dropdown-link"},["\n 下拉菜单",t("i",{staticClass:"el-icon-caret-bottom el-icon--right"})])},function(){var s=this,t=s.$createElement;s._c;return t("p",["下拉菜单默认在点击菜单项后会被隐藏，将",t("code",["hide-on-click"]),"属性默认为",t("code",["false"]),"可以关闭此功能。"])},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-dropdown"])," ",t("span",{staticClass:"hljs-attr"},[":hide-on-click"]),"=",t("span",{staticClass:"hljs-string"},['"false"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-dropdown-link"']),">"]),"\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-caret-bottom el-icon--right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\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"]),">"]),"黄金糕",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"]),">"]),"狮子头",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"]),">"]),"螺蛳粉",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"])," ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),"双皮奶",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"])," ",t("span",{staticClass:"hljs-attr"},["divided"]),">"]),"蚵仔煎",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:"zhi-ling-shi-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-ling-shi-jian","aria-hidden":"true"}},["¶"])," 指令事件"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作"])},function(){var s=this,t=s.$createElement;s._c;return t("span",{staticClass:"el-dropdown-link"},["\n 下拉菜单",t("i",{staticClass:"el-icon-caret-bottom el-icon--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"},["el-dropdown"])," ",t("span",{staticClass:"hljs-attr"},["@command"]),"=",t("span",{staticClass:"hljs-string"},['"handleCommand"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-dropdown-link"']),">"]),"\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-caret-bottom el-icon--right"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\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"])," ",t("span",{staticClass:"hljs-attr"},["command"]),"=",t("span",{staticClass:"hljs-string"},['"a"']),">"]),"黄金糕",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"])," ",t("span",{staticClass:"hljs-attr"},["command"]),"=",t("span",{staticClass:"hljs-string"},['"b"']),">"]),"狮子头",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"])," ",t("span",{staticClass:"hljs-attr"},["command"]),"=",t("span",{staticClass:"hljs-string"},['"c"']),">"]),"螺蛳粉",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"])," ",t("span",{staticClass:"hljs-attr"},["command"]),"=",t("span",{staticClass:"hljs-string"},['"d"'])," ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),"双皮奶",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"])," ",t("span",{staticClass:"hljs-attr"},["command"]),"=",t("span",{staticClass:"hljs-string"},['"e"'])," ",t("span",{staticClass:"hljs-attr"},["divided"]),">"]),"蚵仔煎",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"},["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 handleCommand(command) {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message(",t("span",{staticClass:"hljs-string"},["'click on item '"])," + command);\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:"dropdown-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},["¶"])," Dropdown 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",["type"]),t("td",["菜单按钮类型，同 Button 组件(只在",t("code",["split-button"]),"为 true 的情况下有效)"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["size"]),t("td",["菜单按钮尺寸，同 Button 组件(只在",t("code",["split-button"]),"为 true 的情况下有效)"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["split-button"]),t("td",["下拉触发元素呈现为按钮组"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["menu-align"]),t("td",["菜单水平对齐方向"]),t("td",["string"]),t("td",["start, end"]),t("td",["end"])]),t("tr",[t("td",["trigger"]),t("td",["触发下拉的行为"]),t("td",["string"]),t("td",["hover, click"]),t("td",["hover"])]),t("tr",[t("td",["hide-on-click"]),t("td",["是否在点击菜单项后隐藏菜单"]),t("td",["boolean"]),t("td",["-"]),t("td",["true"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"dropdown-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},["¶"])," Dropdown 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",["click"]),t("td",[t("code",["split-button"])," 为 true 时，点击左侧按钮的回调"]),t("td",["—"])]),t("tr",[t("td",["command"]),t("td",["点击菜单项触发的事件回调"]),t("td",["dropdown-item 的指令"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},["¶"])," Dropdown Menu 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",["command"]),t("td",["指令"]),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",["divided"]),t("td",["显示分割线"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])}]}},function(s,t,a){s.exports=a(298)},function(s,t,a){var n,e;a(299),n=a(301);var l=a(302);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(){var s=this,t=function(s,t,a){return t?void setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("必须年满18岁")):a():a(new Error("请输入数字值"))},1e3):a(new Error("年龄不能为空"))},a=function(t,a,n){""===a?n(new Error("请输入密码")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),n())},n=function(t,a,n){""===a?n(new Error("请再次输入密码")):a!==s.ruleForm2.pass?n(new Error("两次输入密码不一致!")):n()};return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formInline:{user:"",region:""},formStacked:{name:"",region:"",type:"",remark:""},formAlignRight:{name:"",region:"",type:""},formAlignLeft:{name:"",region:"",type:""},ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},ruleForm2:{pass:"",checkPass:"",age:""},formLabelWidth:"80px",options:[],rules:{name:[{required:!0,message:"请输入活动名称",trigger:"blur"},{min:3,max:5,message:"长度在 3 到 5 个字符",trigger:"blur"}],region:[{required:!0,message:"请选择活动区域",trigger:"change"}],date1:[{type:"date",required:!0,message:"请选择日期",trigger:"change"}],date2:[{type:"date",required:!0,message:"请选择时间",trigger:"change"}],type:[{type:"array",required:!0,message:"请至少选择一个活动性质",trigger:"change"}],resource:[{required:!0,message:"请选择活动资源",trigger:"change"}],desc:[{required:!0,message:"请填写活动形式",trigger:"blur"}]},rules2:{pass:[{validator:a,trigger:"blur"}],checkPass:[{validator:n,trigger:"blur"}],age:[{validator:t,trigger:"blur"}]},dynamicForm:{domains:[{value:"",key:Date.now()}],email:""},dynamicRule:{email:[{required:!0,message:"请输入邮箱地址",trigger:"blur"},{type:"email",message:"请输入正确的邮箱地址",trigger:"blur,change"}]}}},methods:{handleSubmit:function(s){this.$refs.ruleForm.validate(function(s){return s?void alert("submit!"):(console.log("error submit!!"),!1);
|
||
})},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"}})])]),t("el-form-item",{attrs:{label:"活动时间"}},[t("el-col",{attrs:{span:11}},[t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.form.date1,expression:"form.date1"}],attrs:{type:"date",placeholder:"选择日期",style:"width: 100%;"},domProps:{value:s.form.date1},on:{input:function(t){s.form.date1=t}}})]),t("el-col",{staticClass:"line",attrs:{span:2}},["-"]),t("el-col",{attrs:{span:11}},[t("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.form.date2,expression:"form.date2"}],attrs:{type:"fixed-time",placeholder:"选择时间",style:"width: 100%;"},domProps:{value:s.form.date2},on:{input:function(t){s.form.date2=t}}})])]),t("el-form-item",{attrs:{label:"即时配送"}},[t("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.form.delivery,expression:"form.delivery"}],attrs:{"on-text":"","off-text":""},domProps:{value:s.form.delivery},on:{input:function(t){s.form.delivery=t}}})]),t("el-form-item",{attrs:{label:"活动性质"}},[t("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.form.type,expression:"form.type"}],domProps:{value:s.form.type},on:{input:function(t){s.form.type=t}}},[t("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),t("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),t("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),t("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})])]),t("el-form-item",{attrs:{label:"特殊资源"}},[t("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.form.resource,expression:"form.resource"}],domProps:{value:s.form.resource},on:{input:function(t){s.form.resource=t}}},[t("el-radio",{attrs:{label:"线上品牌商赞助"}}),t("el-radio",{attrs:{label:"线下场地免费"}})])]),t("el-form-item",{attrs:{label:"活动形式"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.form.desc,expression:"form.desc"}],attrs:{type:"textarea"},domProps:{value:s.form.desc},on:{input:function(t){s.form.desc=t}}})]),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},["立即创建"]),t("el-button",["取消"])])])]),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:'<el-form :inline="true" :model="formInline" class="demo-form-inline">\n <el-form-item>\n <el-input v-model="formInline.user" placeholder="审批人"></el-input>\n </el-form-item><el-form-item>\n <el-select v-model="formInline.region" placeholder="活动区域">\n <el-option label="区域一" value="shanghai"></el-option>\n <el-option label="区域二" value="beijing"></el-option>\n </el-select>\n </el-form-item><el-form-item>\n <el-button type="primary" @click="onSubmit">查询</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n return {\n formInline: {\n user: '',\n region: ''\n }\n }\n },\n methods: {\n onSubmit() {\n console.log('submit!');\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:s.formInline}},[t("el-form-item",[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formInline.user,expression:"formInline.user"}],attrs:{placeholder:"审批人"},domProps:{value:s.formInline.user},on:{input:function(t){s.formInline.user=t}}})]),t("el-form-item",[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.formInline.region,expression:"formInline.region"}],attrs:{placeholder:"活动区域"},domProps:{value:s.formInline.region},on:{input:function(t){s.formInline.region=t}}},[t("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t("el-option",{attrs:{label:"区域二",value:"beijing"}})])]),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},["查询"])])])]),s._m(8),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(9)])]),s._m(10),s._m(11),s._m(12),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form label-position="top" :model="formStacked" class="demo-form-stacked">\n <el-form-item label="名称">\n <el-input v-model="formStacked.name"></el-input>\n </el-form-item>\n <el-form-item label="活动区域">\n <el-input v-model="formStacked.region"></el-input>\n </el-form-item>\n <el-form-item label="活动展开形式">\n <el-input v-model="formStacked.type"></el-input>\n </el-form-item>\n</el-form>\n\n',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:"名称"}},[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:"活动区域"}},[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:"活动展开形式"}},[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="80px">\n <el-form-item label="活动名称">\n <el-input v-model="formAlignRight.name"></el-input>\n </el-form-item>\n <el-form-item label="推广地">\n <el-input v-model="formAlignRight.region"></el-input>\n </el-form-item>\n <el-form-item label="活动形式">\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":"80px"}},[t("el-form-item",{attrs:{label:"活动名称"}},[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:"推广地"}},[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:"活动形式"}},[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="80px">\n <el-form-item label="活动名称">\n <el-input v-model="formAlignLeft.name"></el-input>\n </el-form-item>\n <el-form-item label="推广地">\n <el-input v-model="formAlignLeft.region"></el-input>\n </el-form-item>\n <el-form-item label="活动形式">\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":"80px"}},[t("el-form-item",{attrs:{label:"活动名称"}},[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:"推广地"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formAlignLeft.region,expression:"formAlignLeft.region"}],domProps:{value:s.formAlignLeft.region},on:{input:function(t){s.formAlignLeft.region=t}}})]),t("el-form-item",{attrs:{label:"活动形式"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formAlignLeft.type,expression:"formAlignLeft.type"}],domProps:{value:s.formAlignLeft.type},on:{input:function(t){s.formAlignLeft.type=t}}})])])]),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:'<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">\n <el-form-item label="活动名称" prop="name">\n <el-input v-model="ruleForm.name"></el-input>\n </el-form-item>\n <el-form-item label="活动区域" prop="region">\n <el-select v-model="ruleForm.region" placeholder="请选择活动区域">\n <el-option label="区域一" value="shanghai"></el-option>\n <el-option label="区域二" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label="活动时间" required>\n <el-col :span="11">\n <el-form-item prop="date1">\n <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n </el-form-item>\n </el-col>\n <el-col class="line" :span="2">-</el-col>\n <el-col :span="11">\n <el-form-item prop="date2">\n <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n </el-form-item>\n </el-col>\n </el-form-item>\n <el-form-item label="即时配送" prop="delivery">\n <el-switch on-text="" off-text v-model="ruleForm.delivery"></el-switch>\n </el-form-item>\n <el-form-item label="活动性质" prop="type">\n <el-checkbox-group v-model="ruleForm.type">\n <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n <el-checkbox label="地推活动" name="type"></el-checkbox>\n <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label="特殊资源" prop="resource">\n <el-radio-group v-model="ruleForm.resource">\n <el-radio label="线上品牌商赞助"></el-radio>\n <el-radio label="线下场地免费"></el-radio>\n </el-radio-group>\n </el-form-item>\n <el-form-item label="活动形式" prop="desc">\n <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="handleSubmit">立即创建</el-button>\n <el-button @click="handleReset">重置</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n return {\n ruleForm: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n rules: {\n name: [\n { required: true, message: '请输入活动名称', trigger: 'blur' },\n { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }\n ],\n region: [\n { required: true, message: '请选择活动区域', trigger: 'change' }\n ],\n date1: [\n { type: 'date', required: true, message: '请选择日期', trigger: 'change' }\n ],\n date2: [\n { type: 'date', required: true, message: '请选择时间', trigger: 'change' }\n ],\n type: [\n { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }\n ],\n resource: [\n { required: true, message: '请选择活动资源', trigger: 'change' }\n ],\n desc: [\n { required: true, message: '请填写活动形式', trigger: 'blur' }\n ]\n }\n };\n },\n methods: {\n handleReset() {\n this.$refs.ruleForm.resetFields();\n },\n handleSubmit(ev) {\n this.$refs.ruleForm.validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm,rules:s.rules,"label-width":"100px"}},[t("el-form-item",{attrs:{label:"活动名称",prop:"name"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.name,expression:"ruleForm.name"}],domProps:{value:s.ruleForm.name},on:{input:function(t){s.ruleForm.name=t}}})]),t("el-form-item",{attrs:{label:"活动区域",prop:"region"}},[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.region,expression:"ruleForm.region"}],attrs:{placeholder:"请选择活动区域"},domProps:{value:s.ruleForm.region},on:{input:function(t){s.ruleForm.region=t}}},[t("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t("el-option",{attrs:{label:"区域二",value:"beijing"}})])]),t("el-form-item",{attrs:{label:"活动时间",required:""}},[t("el-col",{attrs:{span:11}},[t("el-form-item",{attrs:{prop:"date1"}},[t("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.date1,expression:"ruleForm.date1"}],attrs:{type:"date",placeholder:"选择日期",style:"width: 100%;"},domProps:{value:s.ruleForm.date1},on:{input:function(t){s.ruleForm.date1=t}}})])]),t("el-col",{staticClass:"line",attrs:{span:2}},["-"]),t("el-col",{attrs:{span:11}},[t("el-form-item",{attrs:{prop:"date2"}},[t("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.date2,expression:"ruleForm.date2"}],attrs:{type:"fixed-time",placeholder:"选择时间",style:"width: 100%;"},domProps:{value:s.ruleForm.date2},on:{input:function(t){s.ruleForm.date2=t}}})])])]),t("el-form-item",{attrs:{label:"即时配送",prop:"delivery"}},[t("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.delivery,expression:"ruleForm.delivery"}],attrs:{"on-text":"","off-text":""},domProps:{value:s.ruleForm.delivery},on:{input:function(t){s.ruleForm.delivery=t}}})]),t("el-form-item",{attrs:{label:"活动性质",prop:"type"}},[t("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.type,expression:"ruleForm.type"}],domProps:{value:s.ruleForm.type},on:{input:function(t){s.ruleForm.type=t}}},[t("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),t("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),t("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),t("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})])]),t("el-form-item",{attrs:{label:"特殊资源",prop:"resource"}},[t("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.resource,expression:"ruleForm.resource"}],domProps:{value:s.ruleForm.resource},on:{input:function(t){s.ruleForm.resource=t}}},[t("el-radio",{attrs:{label:"线上品牌商赞助"}}),t("el-radio",{attrs:{label:"线下场地免费"}})])]),t("el-form-item",{attrs:{label:"活动形式",prop:"desc"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.desc,expression:"ruleForm.desc"}],attrs:{type:"textarea"},domProps:{value:s.ruleForm.desc},on:{input:function(t){s.ruleForm.desc=t}}})]),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:s.handleSubmit}},["立即创建"]),t("el-button",{on:{click:s.handleReset}},["重置"])])])]),s._m(23),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(24)])]),s._m(25),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">\n <el-form-item label="密码" prop="pass">\n <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>\n </el-form-item>\n <el-form-item label="确认密码" prop="checkPass">\n <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>\n </el-form-item>\n <el-form-item label="年龄" prop="age">\n <el-input v-model.number="ruleForm2.age"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="handleSubmit2">提交</el-button>\n <el-button @click="handleReset2">重置</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n var checkAge = (rule, value, callback) => {\n if (!value) {\n return callback(new Error('年龄不能为空'));\n }\n setTimeout(() => {\n if (!Number.isInteger(value)) {\n callback(new Error('请输入数字值'));\n } else {\n if (value < 18) {\n callback(new Error('必须年满18岁'));\n } else {\n callback();\n }\n }\n }, 1000);\n };\n var validatePass = (rule, value, callback) => {\n if (value === '') {\n callback(new Error('请输入密码'));\n } else {\n if (this.ruleForm2.checkPass !== '') {\n this.$refs.ruleForm2.validateField('checkPass');\n }\n callback();\n }\n };\n var validatePass2 = (rule, value, callback) => {\n if (value === '') {\n callback(new Error('请再次输入密码'));\n } else if (value !== this.ruleForm2.pass) {\n callback(new Error('两次输入密码不一致!'));\n } else {\n callback();\n }\n };\n return {\n ruleForm2: {\n pass: '',\n checkPass: '',\n age: ''\n },\n rules2: {\n pass: [\n { validator: validatePass, trigger: 'blur' }\n ],\n checkPass: [\n { validator: validatePass2, trigger: 'blur' }\n ],\n age: [\n { validator: checkAge, trigger: 'blur' }\n ]\n }\n };\n },\n methods: {\n handleReset2() {\n this.$refs.ruleForm2.resetFields();\n },\n handleSubmit2(ev) {\n this.$refs.ruleForm2.validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm2,rules:s.rules2,"label-width":"100px"}},[t("el-form-item",{attrs:{label:"密码",prop:"pass"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm2.pass,expression:"ruleForm2.pass"}],attrs:{type:"password","auto-complete":"off"},domProps:{value:s.ruleForm2.pass},on:{input:function(t){s.ruleForm2.pass=t}}})]),t("el-form-item",{attrs:{label:"确认密码",prop:"checkPass"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm2.checkPass,expression:"ruleForm2.checkPass"}],attrs:{type:"password","auto-complete":"off"},domProps:{value:s.ruleForm2.checkPass},on:{input:function(t){s.ruleForm2.checkPass=t}}})]),t("el-form-item",{attrs:{label:"年龄",prop:"age"}},[t("el-input",{directives:[{name:"model",rawName:"v-model.number",value:s.ruleForm2.age,expression:"ruleForm2.age",modifiers:{number:!0}}],domProps:{value:s.ruleForm2.age},on:{input:function(t){s.ruleForm2.age=s._n(t)}}})]),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:s.handleSubmit2}},["提交"]),t("el-button",{on:{click:s.handleReset2}},["重置"])])])]),s._m(26),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(27)])]),s._m(28),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="100px" class="demo-dynamic">\n <el-form-item prop="email" label="邮箱">\n <el-input v-model="dynamicForm.email"></el-input>\n </el-form-item>\n <el-form-item v-for="(domain, index) in dynamicForm.domains" :label="\'域名\' + index" :key="domain.key" :prop="\'domains.\' + index + \'.value\'" :rules="{\n required: true, message: \'域名不能为空\', trigger: \'blur\'\n }">\n <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="handleSubmit3">提交</el-button>\n <el-button @click="addDomain">新增域名</el-button>\n <el-button @click="handleReset3">重置</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n return {\n dynamicForm: {\n domains: [{\n value: ''\n }],\n email: ''\n },\n dynamicRule: {\n email: [\n { required: true, message: '请输入邮箱地址', trigger: 'blur' },\n { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }\n ]\n }\n };\n },\n methods: {\n handleSubmit3(ev) {\n this.$refs.dynamicForm.validate((valid) => {\n if (valid) {\n alert('submit!');\n } else {\n console.log('error submit!!');\n return false;\n }\n });\n },\n handleReset3() {\n this.$refs.dynamicForm.resetFields();\n },\n removeDomain(item) {\n var index = this.dynamicForm.domains.indexOf(item)\n if (index !== -1) {\n this.dynamicForm.domains.splice(index, 1)\n }\n },\n addDomain() {\n this.dynamicForm.domains.push({\n value: '',\n key: Date.now()\n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-form",{ref:"dynamicForm",staticClass:"demo-dynamic",attrs:{model:s.dynamicForm,rules:s.dynamicRule,"label-width":"100px"}},[t("el-form-item",{attrs:{prop:"email",label:"邮箱"}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.dynamicForm.email,expression:"dynamicForm.email"}],domProps:{value:s.dynamicForm.email},on:{input:function(t){s.dynamicForm.email=t}}})]),s._l(s.dynamicForm.domains,function(a,n){return t("el-form-item",{key:a.key,attrs:{label:"域名"+n,prop:"domains."+n+".value",rules:{required:!0,message:"域名不能为空",trigger:"blur"}}},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:a.value,expression:"domain.value"}],domProps:{value:a.value},on:{input:function(s){a.value=s}}}),t("el-button",{on:{click:function(t){t.preventDefault(),s.removeDomain(a)}}},["删除"])])}),t("el-form-item",[t("el-button",{attrs:{type:"primary"},on:{click:s.handleSubmit3}},["提交"]),t("el-button",{on:{click:s.addDomain}},["新增域名"]),t("el-button",{on:{click:s.handleReset3}},["重置"])])])]),s._m(29),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(30)])]),s._m(31),s._m(32),s._m(33),s._m(34),s._m(35),s._m(36)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"form-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-biao-dan","aria-hidden":"true"}},["¶"])," Form 表单"])},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:"dian-xing-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dian-xing-biao-dan","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",["在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker"])},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"},["ref"]),"=",t("span",{staticClass:"hljs-string"},['"form"'])," ",t("span",{staticClass:"hljs-attr"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"form"'])," ",t("span",{staticClass:"hljs-attr"},["label-width"]),"=",t("span",{staticClass:"hljs-string"},['"80px"']),">"]),"\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-input"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"form.name"']),">"]),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"]),">"]),"\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-select"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"form.region"'])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请选择活动区域"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"区域一"'])," ",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("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"区域二"'])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"beijing"']),">"]),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"},["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-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"11"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-date-picker"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"date"'])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"选择日期"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"form.date1"'])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width: 100%;"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-date-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-col"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"line"'])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),"-",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"},['"11"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{
|
||
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-item"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"特殊资源"']),">"]),"\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"},['"form.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"},["</",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-input"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"textarea"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"form.desc"']),">"]),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"]),">"]),"\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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"onSubmit"']),">"]),"立即创建",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-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\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"]),">"]),"\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"},["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:"xing-nei-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xing-nei-biao-dan","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",["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"},['"审批人"']),">"]),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"},['"活动区域"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"区域一"'])," ",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("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"区域二"'])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"beijing"']),">"]),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"},["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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"onSubmit"']),">"]),"查询",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\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"]),">"]),"\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"},["formInline"]),": {\n ",t("span",{staticClass:"hljs-attr"},["user"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["region"]),": ",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:"dui-qi-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","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",["顶部对齐"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["通过设置 ",t("code",["label-position"])," 属性可以改变表单域标签的位置，可选值为 ",t("code",["top"]),"、",t("code",["left"]),"，当设为 ",t("code",["top"])," 时标签会置于表单域的顶部"])},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"},["label-position"]),"=",t("span",{staticClass:"hljs-string"},['"top"'])," ",t("span",{staticClass:"hljs-attr"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"formStacked"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demo-form-stacked"']),">"]),"\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-input"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"formStacked.name"']),">"]),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"]),">"]),"\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-input"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"formStacked.region"']),">"]),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"]),">"]),"\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-input"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"formStacked.type"']),">"]),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"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["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"},["formStacked"]),": {\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"},["type"]),": ",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("p",["右对齐"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["通过设置 ",t("code",["label-position"])," 属性可以改变表单域标签的位置，默认不设置的情况下标签是右对齐的"])},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"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"formAlignRight"'])," ",t("span",{staticClass:"hljs-attr"},["label-width"]),"=",t("span",{staticClass:"hljs-string"},['"80px"']),">"]),"\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-input"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"formAlignRight.name"']),">"]),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"]),">"]),"\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-input"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"formAlignRight.region"']),">"]),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"]),">"]),"\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-input"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"formAlignRight.type"']),">"]),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"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["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"},["formAlignRight"]),": {\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"},["type"]),": ",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("p",["左对齐"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["通过设置 ",t("code",["label-position"])," 属性可以改变表单域标签的位置，可选值为 ",t("code",["top"]),"、",t("code",["left"]),"，当设为 ",t("code",["left"])," 时标签会变为左对齐"])},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"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"formAlignLeft"'])," ",t("span",{staticClass:"hljs-attr"},["label-position"]),"=",t("span",{staticClass:"hljs-string"},['"left"'])," ",t("span",{staticClass:"hljs-attr"},["label-width"]),"=",t("span",{staticClass:"hljs-string"},['"80px"']),">"]),"\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-input"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"formAlignLeft.name"']),">"]),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"]),">"]),"\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-input"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"formAlignLeft.region"']),">"]),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"]),">"]),"\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-input"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"formAlignLeft.type"']),">"]),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"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["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"},["formAlignLeft"]),": {\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"},["type"]),": ",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:"biao-dan-yan-zheng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-yan-zheng","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",["Form 组件提供了表单验证的功能，只需要通过 ",t("code",["rule"])," 属性传入约定的验证规则，并 Form-Item 的 ",t("code",["prop"])," 属相设置为需校验的字段名即可。校验规则参见 ",t("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},["async-validator"])])},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"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm"'])," ",t("span",{staticClass:"hljs-attr"},[":rules"]),"=",t("span",{staticClass:"hljs-string"},['"rules"'])," ",t("span",{staticClass:"hljs-attr"},["ref"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm"'])," ",t("span",{staticClass:"hljs-attr"},["label-width"]),"=",t("span",{staticClass:"hljs-string"},['"100px"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demo-ruleForm"']),">"]),"\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"},['"name"']),">"]),"\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"},['"ruleForm.name"']),">"]),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"]),">"]),"\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"},['"region"']),">"]),"\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"},['"ruleForm.region"'])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请选择活动区域"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"区域一"'])," ",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("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"区域二"'])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"beijing"']),">"]),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"},["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"},["required"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"11"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form-item"])," ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"date1"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-date-picker"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"date"'])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"选择日期"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm.date1"'])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width: 100%;"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-date-picker"]),">"]),"\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-col"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-col"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"line"'])," ",t("span",{staticClass:"hljs-attr"},[":span"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),"-",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"},['"11"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form-item"])," ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"date2"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{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"},['"ruleForm.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-form-item"]),">"]),"\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"},['"即时配送"'])," ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"delivery"']),">"]),"\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"},['"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"},["</",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"},['"desc"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"textarea"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm.desc"']),">"]),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"]),">"]),"\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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleSubmit"']),">"]),"立即创建",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"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleReset"']),">"]),"重置",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\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"]),">"]),"\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"},["'请输入活动名称'"]),", ",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"},["'长度在 3 到 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"},["'请选择活动区域'"]),", ",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"},["'请选择日期'"]),", ",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"},["'请选择时间'"]),", ",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",{staticClass:"hljs-string"},["'请至少选择一个活动性质'"]),", ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'change'"])," }\n ],\n ",t("span",{staticClass:"hljs-attr"},["resource"]),": [\n { ",t("span",{staticClass:"hljs-attr"},["required"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),", ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'请选择活动资源'"]),", ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'change'"])," }\n ],\n ",t("span",{staticClass:"hljs-attr"},["desc"]),": [\n { ",t("span",{staticClass:"hljs-attr"},["required"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),", ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'请填写活动形式'"]),", ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'blur'"])," }\n ]\n }\n };\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleReset() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$refs.ruleForm.resetFields();\n },\n handleSubmit(ev) {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$refs.ruleForm.validate(",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["valid"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (valid) {\n alert(",t("span",{staticClass:"hljs-string"},["'submit!'"]),");\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(",t("span",{staticClass:"hljs-string"},["'error submit!!'"]),");\n ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-literal"},["false"]),";\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:"zi-ding-yi-xiao-yan-gui-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-xiao-yan-gui-ze","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-form"])," ",t("span",{staticClass:"hljs-attr"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm2"'])," ",t("span",{staticClass:"hljs-attr"},[":rules"]),"=",t("span",{staticClass:"hljs-string"},['"rules2"'])," ",t("span",{staticClass:"hljs-attr"},["ref"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm2"'])," ",t("span",{staticClass:"hljs-attr"},["label-width"]),"=",t("span",{staticClass:"hljs-string"},['"100px"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demo-ruleForm"']),">"]),"\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"},['"pass"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"password"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm2.pass"'])," ",t("span",{staticClass:"hljs-attr"},["auto-complete"]),"=",t("span",{staticClass:"hljs-string"},['"off"']),">"]),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"]),">"]),"\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"},['"checkPass"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"password"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm2.checkPass"'])," ",t("span",{staticClass:"hljs-attr"},["auto-complete"]),"=",t("span",{staticClass:"hljs-string"},['"off"']),">"]),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"]),">"]),"\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"},['"age"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"])," ",t("span",{staticClass:"hljs-attr"},["v-model.number"]),"=",t("span",{staticClass:"hljs-string"},['"ruleForm2.age"']),">"]),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"]),">"]),"\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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleSubmit2"']),">"]),"提交",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"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleReset2"']),">"]),"重置",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\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"]),">"]),"\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"},["var"])," checkAge = ",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["rule, value, callback"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (!value) {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," callback(",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Error"]),"(",t("span",{staticClass:"hljs-string"},["'年龄不能为空'"]),"));\n }\n setTimeout(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["()"])," =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (!",t("span",{staticClass:"hljs-built_in"},["Number"]),".isInteger(value)) {\n callback(",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Error"]),"(",t("span",{staticClass:"hljs-string"},["'请输入数字值'"]),"));\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (value < ",t("span",{staticClass:"hljs-number"},["18"]),") {\n callback(",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Error"]),"(",t("span",{staticClass:"hljs-string"},["'必须年满18岁'"]),"));\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n callback();\n }\n }\n }, ",t("span",{staticClass:"hljs-number"},["1000"]),");\n };\n ",t("span",{staticClass:"hljs-keyword"},["var"])," validatePass = ",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["rule, value, callback"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (value === ",t("span",{staticClass:"hljs-string"},["''"]),") {\n callback(",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Error"]),"(",t("span",{staticClass:"hljs-string"},["'请输入密码'"]),"));\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (",t("span",{staticClass:"hljs-keyword"},["this"]),".ruleForm2.checkPass !== ",t("span",{staticClass:"hljs-string"},["''"]),") {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$refs.ruleForm2.validateField(",t("span",{staticClass:"hljs-string"},["'checkPass'"]),");\n }\n callback();\n }\n };\n ",t("span",{staticClass:"hljs-keyword"},["var"])," validatePass2 = ",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["rule, value, callback"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (value === ",t("span",{staticClass:"hljs-string"},["''"]),") {\n callback(",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Error"]),"(",t("span",{staticClass:"hljs-string"},["'请再次输入密码'"]),"));\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," ",t("span",{staticClass:"hljs-keyword"},["if"])," (value !== ",t("span",{staticClass:"hljs-keyword"},["this"]),".ruleForm2.pass) {\n callback(",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Error"]),"(",t("span",{staticClass:"hljs-string"},["'两次输入密码不一致!'"]),"));\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n callback();\n }\n };\n ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n ",t("span",{staticClass:"hljs-attr"},["ruleForm2"]),": {\n ",t("span",{staticClass:"hljs-attr"},["pass"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["checkPass"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["age"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n },\n ",t("span",{staticClass:"hljs-attr"},["rules2"]),": {\n ",t("span",{staticClass:"hljs-attr"},["pass"]),": [\n { ",t("span",{staticClass:"hljs-attr"},["validator"]),": validatePass, ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'blur'"])," }\n ],\n ",t("span",{staticClass:"hljs-attr"},["checkPass"]),": [\n { ",t("span",{staticClass:"hljs-attr"},["validator"]),": validatePass2, ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'blur'"])," }\n ],\n ",t("span",{staticClass:"hljs-attr"},["age"]),": [\n { ",t("span",{staticClass:"hljs-attr"},["validator"]),": checkAge, ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'blur'"])," }\n ]\n }\n };\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleReset2() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$refs.ruleForm2.resetFields();\n },\n handleSubmit2(ev) {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$refs.ruleForm2.validate(",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["valid"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (valid) {\n alert(",t("span",{staticClass:"hljs-string"},["'submit!'"]),");\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(",t("span",{staticClass:"hljs-string"},["'error submit!!'"]),");\n ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-literal"},["false"]),";\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:"dong-tai-zeng-jian-biao-dan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-dan-xiang","aria-hidden":"true"}},["¶"])," 动态增减表单项"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则"])},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"},[":model"]),"=",t("span",{staticClass:"hljs-string"},['"dynamicForm"'])," ",t("span",{staticClass:"hljs-attr"},[":rules"]),"=",t("span",{staticClass:"hljs-string"},['"dynamicRule"'])," ",t("span",{staticClass:"hljs-attr"},["ref"]),"=",t("span",{staticClass:"hljs-string"},['"dynamicForm"'])," ",t("span",{staticClass:"hljs-attr"},["label-width"]),"=",t("span",{staticClass:"hljs-string"},['"100px"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"demo-dynamic"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form-item"])," ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"email"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"邮箱"']),">"]),"\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"},['"dynamicForm.email"']),">"]),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"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-form-item"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-for"]),"=",t("span",{staticClass:"hljs-string"},['"(domain, index) in dynamicForm.domains"']),"\n ",t("span",{staticClass:"hljs-attr"},[":label"]),"=",t("span",{staticClass:"hljs-string"},["\"'域名' + index\""]),"\n ",t("span",{staticClass:"hljs-attr"},[":key"]),"=",t("span",{staticClass:"hljs-string"},['"domain.key"']),"\n ",t("span",{staticClass:"hljs-attr"},[":prop"]),"=",t("span",{staticClass:"hljs-string"},["\"'domains.' + index + '.value'\""]),"\n ",t("span",{staticClass:"hljs-attr"},[":rules"]),"=",t("span",{staticClass:"hljs-string"},["\"{\n required: true, message: '域名不能为空', trigger: 'blur'\n }\""]),"\n >"]),"\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"},['"domain.value"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["@click.prevent"]),"=",t("span",{staticClass:"hljs-string"},['"removeDomain(domain)"']),">"]),"删除",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\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"]),">"]),"\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"},['"handleSubmit3"']),">"]),"提交",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"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"addDomain"']),">"]),"新增域名",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"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleReset3"']),">"]),"重置",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\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"]),">"]),"\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"},["dynamicForm"]),": {\n ",t("span",{staticClass:"hljs-attr"},["domains"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n }],\n ",t("span",{staticClass:"hljs-attr"},["email"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n },\n ",t("span",{staticClass:"hljs-attr"},["dynamicRule"]),": {\n ",t("span",{staticClass:"hljs-attr"},["email"]),": [\n { ",t("span",{staticClass:"hljs-attr"},["required"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),", ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'请输入邮箱地址'"]),", ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'blur'"])," },\n { ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'email'"]),", ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'请输入正确的邮箱地址'"]),", ",t("span",{staticClass:"hljs-attr"},["trigger"]),": ",t("span",{staticClass:"hljs-string"},["'blur,change'"])," }\n ]\n }\n };\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleSubmit3(ev) {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$refs.dynamicForm.validate(",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["valid"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (valid) {\n alert(",t("span",{staticClass:"hljs-string"},["'submit!'"]),");\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(",t("span",{staticClass:"hljs-string"},["'error submit!!'"]),");\n ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-literal"},["false"]),";\n }\n });\n },\n handleReset3() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$refs.dynamicForm.resetFields();\n },\n removeDomain(item) {\n ",t("span",{staticClass:"hljs-keyword"},["var"])," index = ",t("span",{staticClass:"hljs-keyword"},["this"]),".dynamicForm.domains.indexOf(item)\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (index !== ",t("span",{staticClass:"hljs-number"},["-1"]),") {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".dynamicForm.domains.splice(index, ",t("span",{staticClass:"hljs-number"},["1"]),")\n }\n },\n addDomain() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".dynamicForm.domains.push({\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["key"]),": ",t("span",{staticClass:"hljs-built_in"},["Date"]),".now()\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:"form-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},["¶"])," Form 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",["model"]),t("td",["表单数据对象"]),t("td",["object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["rules"]),t("td",["表单验证规则"]),t("td",["object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["inline"]),t("td",["行内表单模式"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["label-position"]),t("td",["表单域标签的位置"]),t("td",["string"]),t("td",["right/left/top"]),t("td",["right"])]),t("tr",[t("td",["label-width"]),t("td",["表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["label-suffix"]),t("td",["表单域标签的后缀"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])]);
|
||
},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",["或"]),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"])," { Button, Select } ",t("span",{staticClass:"hljs-keyword"},["from"])," ",t("span",{staticClass:"hljs-string"},["'element-ui'"]),"\n",t("span",{staticClass:"hljs-keyword"},["import"])," lang ",t("span",{staticClass:"hljs-keyword"},["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"},["// 设置语言"]),"\nlocale.use(lang)\n\n",t("span",{staticClass:"hljs-comment"},["// 引入组件"]),"\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n"])]),t("p",["如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。"]),t("p",[t("strong",["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",["目前 Element 内置了以下语言："]),t("ul",{staticClass:"language-list"},[t("li",["简体中文（zh-CN）"]),t("li",["英语（en）"]),t("li",["德语（de）"]),t("li",["葡萄牙语（pt）"]),t("li",["西班牙语（es）"]),t("li",["丹麦语（da）"]),t("li",["法语（fr）"]),t("li",["挪威语（nb-NO）"]),t("li",["繁体中文（zh-TW）"]),t("li",["意大利语（it）"]),t("li",["韩语（ko）"]),t("li",["日语（ja）"]),t("li",["荷兰语（nl）"]),t("li",["越南语（vi）"]),t("li",["俄语（ru-RU）"]),t("li",["土耳其语（tr-TR）"]),t("li",["巴西葡萄牙语（pt-br）"]),t("li",["波斯语（fa）"]),t("li",["泰语（th）"]),t("li",["印尼语（id）"])]),t("p",["如果你需要使用其他的语言，欢迎贡献 PR：只需在 ",t("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/master/src/locale/lang"}},["这里"])," 添加一个语言配置文件即可。"])])}]}},function(s,t,a){s.exports=a(313)},function(s,t,a){var n,e;a(314),n=a(316);var l=a(317);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";t.__esModule=!0;var n=a(120);t.default={data:function(){return{icons:n}}}},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">搜索</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"}},["搜索"])]),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-tu-biao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon-tu-biao","aria-hidden":"true"}},["¶"])," Icon 图标"])},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:"shi-yong-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-fang-fa","aria-hidden":"true"}},["¶"])," 使用方法"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["直接通过设置类名为 ",t("code",["el-icon-iconName"])," 来使用即可。例如："])},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-edit"})},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-share"})},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-delete"})},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"},["i"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-icon-edit"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\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-share"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\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-delete"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["i"]),">"]),"\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"},['"search"']),">"]),"搜索",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"tu-biao-ji-he"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-ji-he","aria-hidden":"true"}},["¶"])," 图标集合"])}]}},function(s,t,a){s.exports=a(319)},function(s,t,a){var n,e;a(320),n=a(322);var l=a(323);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{num1:1,num2:1,num3:5}},methods:{handleChange:function(s){console.log(s)}}}},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 <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n num1: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num1,expression:"num1"}],attrs:{min:1,max:10},domProps:{value:s.num1},on:{change:s.handleChange,input:function(t){s.num1=t}}})]]),s._m(3),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(4)])]),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-input-number v-model="num2" :disabled="true"></el-input-number>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n num2: 1\n }\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num2,expression:"num2"}],attrs:{disabled:!0},domProps:{value:s.num2},on:{input:function(t){s.num2=t}}})]]),s._m(6),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(7)])]),s._m(8),s._m(9),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-input-number v-model="num3" :step="2"></el-input-number>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n num3: 5\n }\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num3,expression:"num3"}],attrs:{step:2},domProps:{value:s.num3},on:{input:function(t){s.num3=t}}})]]),s._m(10),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(11)])]),s._m(12),s._m(13),s._m(14),s._m(15)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"inputnumber-ji-shu-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber-ji-shu-qi","aria-hidden":"true"}},["¶"])," InputNumber 计数器"])},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",["要使用它，只需要在",t("code",["el-input-number"]),"元素中使用",t("code",["v-model"]),"绑定变量即可，变量的初始值即为默认值。"])},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-input-number"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"num1"'])," ",t("span",{staticClass:"hljs-attr"},["@change"]),"=",t("span",{staticClass:"hljs-string"},['"handleChange"'])," ",t("span",{staticClass:"hljs-attr"},[":min"]),"=",t("span",{staticClass:"hljs-string"},['"1"'])," ",t("span",{staticClass:"hljs-attr"},[":max"]),"=",t("span",{staticClass:"hljs-string"},['"10"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input-number"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\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"},["num1"]),": ",t("span",{staticClass:"hljs-number"},["1"]),"\n };\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleChange(value) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(value);\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:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},["¶"])," 禁用状态"])},function(){var s=this,t=s.$createElement;s._c;return t("p",[t("code",["disabled"]),"属性接受一个",t("code",["Boolean"]),"，设置为",t("code",["true"]),"即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置",t("code",["min"]),"属性和",t("code",["max"]),"属性，不设置",t("code",["min"]),"和",t("code",["max"]),"时，最小值为 0。"])},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-input-number"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"num2"'])," ",t("span",{staticClass:"hljs-attr"},[":disabled"]),"=",t("span",{staticClass:"hljs-string"},['"true"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input-number"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\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"},["num2"]),": ",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:"bu-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-shu","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",["step"]),"属性可以控制步长，接受一个",t("code",["Number"]),"。"])},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-input-number"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"num3"'])," ",t("span",{staticClass:"hljs-attr"},[":step"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input-number"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\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"},["num3"]),": ",t("span",{staticClass:"hljs-number"},["5"]),"\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",["value"]),t("td",["绑定值"]),t("td",["number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["min"]),t("td",["设置计数器允许的最小值"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["max"]),t("td",["设置计数器允许的最大值"]),t("td",["number"]),t("td",["—"]),t("td",["Infinity"])]),t("tr",[t("td",["step"]),t("td",["计数器步长"]),t("td",["number"]),t("td",["—"]),t("td",["1"])]),t("tr",[t("td",["size"]),t("td",["计数器尺寸"]),t("td",["string"]),t("td",["large, small"]),t("td",["—"])]),t("tr",[t("td",["disabled"]),t("td",["是否禁用计数器"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["controls"]),t("td",["是否使用控制按钮"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])])])])},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",["事件名称"]),t("th",["说明"]),t("th",["回调参数"])])]),t("tbody",[t("tr",[t("td",["change"]),t("td",["绑定值被改变时触发"]),t("td",["最后变更的值"])])])])}]}},function(s,t,a){s.exports=a(325)},function(s,t,a){var n,e;a(326),n=a(328);var l=a(329);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";t.__esModule=!0;var n=a(2);n.component("my-item-zh",{functional:!0,render:function(s,t){var a=t.props.item;return s("li",t.data,[s("div",{attrs:{class:"name"}},[a.value]),s("span",{attrs:{class:"addr"}},[a.address])])},props:{item:{type:Object,required:!0}}}),t.default={data:function(){return{restaurants:[],input:"",input1:"",input2:"",input3:"",input4:"",input5:"",input6:"",input7:"",input8:"",input9:"",textarea:"",select:"",state1:"",state2:"",state3:"",state4:""}},methods:{loadAll:function(){return[{value:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE 鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},querySearch:function(s,t){var a=this.restaurants,n=s?a.filter(this.createStateFilter(s)):a;t(n)},querySearchAsync:function(s,t){var a=this.restaurants,n=s?a.filter(this.createStateFilter(s)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(n)},3e3*Math.random())},createStateFilter:function(s){return function(t){return 0===t.value.indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.restaurants=this.loadAll()}}},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-input v-model="input" placeholder="请输入内容">\n</el-input>\n\n\n',script:"\nexport default {\n data() {\n return {\n input: ''\n }\n }\n}\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input,expression:"input"}],attrs:{placeholder:"请输入内容"},domProps:{value:s.input},on:{input:function(t){s.input=t}}})]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(3)])]),s._m(4),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="请输入内容" v-model="input1" :disabled="true">\n</el-input>\n\n\n',script:"\nexport default {\n data() {\n return {\n input1: ''\n }\n }\n}\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input1,expression:"input1"}],attrs:{placeholder:"请输入内容",disabled:!0},domProps:{value:s.input1},on:{input:function(t){s.input1=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-input placeholder="请选择日期" icon="time" v-model="input2" @click="handleIconClick">\n</el-input>\n\n\n',script:"\nexport default {\n data() {\n return {\n input2: ''\n }\n },\n methods: {\n handleIconClick(ev) {\n console.log(ev);\n }\n }\n}\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input2,expression:"input2"}],attrs:{placeholder:"请选择日期",icon:"time"},domProps:{value:s.input2},on:{click:s.handleIconClick,input:function(t){s.input2=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-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea">\n</el-input>\n\n\n',script:"\nexport default {\n data() {\n return {\n textarea: ''\n }\n }\n}\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.textarea,expression:"textarea"}],attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"请输入内容"},domProps:{value:s.textarea},on:{input:function(t){s.textarea=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:'<template>\n <el-input placeholder="请输入内容" v-model="input3">\n <template slot="prepend">Http://</template>\n </el-input>\n <el-input placeholder="请输入内容" v-model="input4">\n <template slot="append">.com</template>\n </el-input>\n <el-input placeholder="请输入内容" v-model="input5" style="width: 300px;">\n <el-select v-model="select" slot="prepend" placeholder="请选择">\n <el-option label="餐厅名" value="1"></el-option>\n <el-option label="订单号" value="2"></el-option>\n <el-option label="用户电话" value="3"></el-option>\n </el-select>\n <el-button slot="append" icon="search"></el-button>\n </el-input>\n</template>\n\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input3: '',\n input4: '',\n input5: '',\n select: ''\n }\n }\n}\n",style:"\n.el-select .el-input {\n width: 100px;\n}\n"}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input3,expression:"input3"}],attrs:{placeholder:"请输入内容"},domProps:{value:s.input3},on:{input:function(t){s.input3=t}}},[t("template",{slot:"prepend"},["Http://"])]),t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input4,expression:"input4"}],attrs:{placeholder:"请输入内容"},domProps:{value:s.input4},on:{input:function(t){s.input4=t}}},[t("template",{slot:"append"},[".com"])]),t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input5,expression:"input5"}],attrs:{placeholder:"请输入内容",style:"width: 300px;"},domProps:{value:s.input5},on:{input:function(t){s.input5=t}}},[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.select,expression:"select"}],slot:"prepend",attrs:{placeholder:"请选择"},domProps:{value:s.select},on:{input:function(t){s.select=t}}},[t("el-option",{attrs:{label:"餐厅名",value:"1"}}),t("el-option",{attrs:{label:"订单号",value:"2"}}),t("el-option",{attrs:{label:"用户电话",value:"3"}})]),t("el-button",{slot:"append",attrs:{icon:"search"}})])]]),s._m(17),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(18)])]),s._m(19),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div>\n <el-input class="inline-input" size="large" placeholder="请输入内容" v-model="input6">\n </el-input>\n <el-input class="inline-input" placeholder="请输入内容" v-model="input7">\n </el-input>\n <el-input class="inline-input" size="small" placeholder="请输入内容" v-model="input8">\n </el-input>\n <el-input class="inline-input" size="mini" placeholder="请输入内容" v-model="input9">\n </el-input>\n</div>\n\n\n',script:"\nexport default {\n data() {\n return {\n input6: '',\n input7: '',\n input8: '',\n input9: ''\n }\n }\n}\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("div",[t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input6,expression:"input6"}],staticClass:"inline-input",attrs:{size:"large",placeholder:"请输入内容"},domProps:{value:s.input6},on:{input:function(t){s.input6=t}}}),t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input7,expression:"input7"}],staticClass:"inline-input",attrs:{placeholder:"请输入内容"},domProps:{value:s.input7},on:{input:function(t){s.input7=t}}}),t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input8,expression:"input8"}],staticClass:"inline-input",attrs:{size:"small",placeholder:"请输入内容"},domProps:{value:s.input8},on:{input:function(t){s.input8=t}}}),t("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input9,expression:"input9"}],staticClass:"inline-input",attrs:{size:"mini",placeholder:"请输入内容"},domProps:{value:s.input9},on:{input:function(t){s.input9=t}}})])]),s._m(20),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(21)])]),s._m(22),s._m(23),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="border-grid">\n <el-col :span="12" class="tac">\n <div class="text">激活即列出输入建议</div>\n <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>\n </el-col>\n <el-col :span="12" class="tac">\n <div class="text">输入后匹配输入建议</div>\n <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>\n </el-col>\n</el-row>\n\n',script:'\n export default {\n data() {\n return {\n restaurants: [],\n state1: \'\',\n state2: \'\'\n };\n },\n methods: {\n querySearch(queryString, cb) {\n var restaurants = this.restaurants;\n var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n // 调用 callback 返回建议列表的数据\n cb(results);\n },\n createFilter(queryString) {\n return (restaurant) => {\n return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n { "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n { "value": "钱记", "address": "上海市长宁区天山西路" },\n { "value": "壹杯加", "address": "上海市长宁区通协路" },\n { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n { "value": "浏阳蒸菜", "address": "天山西路430号" },\n { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.restaurants = this.loadAll();\n }\n }\n',
|
||
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": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n { "value": "钱记", "address": "上海市长宁区天山西路" },\n { "value": "壹杯加", "address": "上海市长宁区通协路" },\n { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n { "value": "浏阳蒸菜", "address": "天山西路430号" },\n { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.restaurants = this.loadAll();\n }\n }\n',style:"\n.my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .name {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .addr {\n font-size: 12px;\n color: #b4b4b4;\n }\n\n .highlighted .addr {\n color: #ddd;\n }\n }\n}\n"}}},[t("div",{slot:"source",staticClass:"source"},[t("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state3,expression:"state3"}],staticClass:"my-autocomplete",attrs:{"fetch-suggestions":s.querySearch,"custom-item":"my-item-zh",placeholder:"请输入内容"},domProps:{value:s.state3},on:{select:s.handleSelect,input:function(t){s.state3=t}}})]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(30)])]),s._m(31),s._m(32),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>\n\n',script:'\n export default {\n data() {\n return {\n restaurants: [],\n state4: \'\',\n timeout: null\n };\n },\n methods: {\n loadAll() {\n return [\n { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n { "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n { "value": "钱记", "address": "上海市长宁区天山西路" },\n { "value": "壹杯加", "address": "上海市长宁区通协路" },\n { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n { "value": "浏阳蒸菜", "address": "天山西路430号" },\n { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n ];\n },\n querySearchAsync(queryString, cb) {\n var restaurants = this.restaurants;\n var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => {\n cb(results);\n }, 3000 * Math.random());\n },\n createStateFilter(queryString) {\n return (state) => {\n return (state.value.indexOf(queryString.toLowerCase()) === 0);\n };\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.restaurants = this.loadAll();\n }\n };\n',style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state4,expression:"state4"}],attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"请输入内容"},domProps:{value:s.state4},on:{select:s.handleSelect,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-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-shu-ru-kuang","aria-hidden":"true"}},["¶"])," Input 输入框"])},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("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"input"'])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请输入内容"']),">"]),"\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:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},["¶"])," 禁用状态"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["通过 ",t("code",["disabled"])," 属性指定是否禁用 input 组件"])},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"},['"请输入内容"']),"\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:"dai-icon-de-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-icon-de-shu-ru-kuang","aria-hidden":"true"}},["¶"])," 带 icon 的输入框"])},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",["icon"])," 属性在 input 组件尾部增加显示图标。"])},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"},['"请选择日期"']),"\n ",t("span",{staticClass:"hljs-attr"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"time"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"input2"']),"\n ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleIconClick"']),">"]),"\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"},["input2"]),": ",t("span",{staticClass:"hljs-string"},["''"]),"\n }\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleIconClick(ev) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(ev);\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:"wen-ben-yu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-ben-yu","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",["type"])," 属性的值指定为 textarea。"])},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"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"textarea"']),"\n ",t("span",{staticClass:"hljs-attr"},[":autosize"]),"=",t("span",{staticClass:"hljs-string"},['"{ minRows: 2, maxRows: 4}"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请输入内容"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"textarea"']),">"]),"\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"},["textarea"]),": ",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:"fu-he-xing-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-he-xing-shu-ru-kuang","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",["可通过 slot 来指定在 input 中前置或者后置内容。"])},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-input"])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请输入内容"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"input3"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"prepend"']),">"]),"Http://",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请输入内容"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"input4"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"append"']),">"]),".com",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请输入内容"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"input5"'])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width: 300px;"']),">"]),"\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"},['"select"'])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"prepend"'])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请选择"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"餐厅名"'])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"1"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-option"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"订单号"'])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-option"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"用户电话"'])," ",t("span",{staticClass:"hljs-attr"},["value"]),"=",t("span",{staticClass:"hljs-string"},['"3"']),">"]),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"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"append"'])," ",t("span",{staticClass:"hljs-attr"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"search"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["template"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"css"},["\n",t("span",{staticClass:"hljs-selector-class"},[".el-select"])," ",t("span",{staticClass:"hljs-selector-class"},[".el-input"])," {\n ",t("span",{staticClass:"hljs-attribute"},["width"]),": ",t("span",{staticClass:"hljs-number"},["100px"]),";\n}\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["style"]),">"]),"\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"},["input3"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["input4"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["input5"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["select"]),": ",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:"chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},["¶"])," 尺寸"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["可通过 ",t("code",["size"])," 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。"])},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"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"]),"\n ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"inline-input"']),"\n ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"large"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请输入内容"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"input6"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"]),"\n ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"inline-input"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请输入内容"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"input7"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"]),"\n ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"inline-input"']),"\n ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"small"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请输入内容"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"input8"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-input"]),"\n ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"inline-input"']),"\n ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"mini"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请输入内容"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"input9"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-input"]),">"]),"\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"},["input6"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["input7"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["input8"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["input9"]),": ",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:"dai-shu-ru-jian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-shu-ru-jian-yi","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("div",{staticClass:"text"},["激活即列出输入建议"])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"text"},["输入后匹配输入建议"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["autocomplete 是一个可带输入建议的输入框组件，",t("code",["fetch-suggestions"])," 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。"])},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"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"border-grid"']),">"]),"\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"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"tac"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"text"']),">"]),"激活即列出输入建议",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-autocomplete"]),"\n ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"inline-input"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"state1"']),"\n ",t("span",{staticClass:"hljs-attr"},[":fetch-suggestions"]),"=",t("span",{staticClass:"hljs-string"},['"querySearch"']),"\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"},["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-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"tac"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"text"']),">"]),"输入后匹配输入建议",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-autocomplete"]),"\n ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"inline-input"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"state2"']),"\n ",t("span",{staticClass:"hljs-attr"},[":fetch-suggestions"]),"=",t("span",{staticClass:"hljs-string"},['"querySearch"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请输入内容"']),"\n ",t("span",{staticClass:"hljs-attr"},[":trigger-on-focus"]),"=",t("span",{staticClass:"hljs-string"},['"false"']),"\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"},["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 { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"茶芝兰（奶茶，手抓饼）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市普陀区同普路1435号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"十二泷町"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市北翟路1444弄81号B幢-107"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"星移浓缩咖啡"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市嘉定区新郁路817号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"阿姨奶茶/豪大大"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"嘉定区曹安路1611号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"新麦甜四季甜品炸鸡"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"嘉定区曹安公路2383弄55号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"Monica摩托主题咖啡店"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"浮生若茶（凌空soho店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海长宁区金钟路968号9号楼地下一层"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"NONO JUICE 鲜榨果汁"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区天山西路119号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"CoCo都可(北新泾店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区仙霞西路"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"快乐柠檬（神州智慧店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区天山西路567号1层R117号店铺"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"Merci Paul cafe"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市普陀区光复西路丹巴路28弄6号楼819"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"猫山王（西郊百联店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区仙霞西路88号第一层G05-F01-1-306"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"枪会山"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市普陀区棕榈路"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"纵食"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"元丰天山花园(东门) 双流路267号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"钱记"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区天山西路"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"壹杯加"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区通协路"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"唦哇嘀咖"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"爱茜茜里(西郊百联)"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"长宁区仙霞西路88号1305室"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"爱茜茜里(近铁广场)"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"鲜果榨汁（金沙江路和美广店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"普陀区金沙江路2239号金沙和美广场B1-10-6"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"开心丽果（缤谷店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区威宁路天山路341号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"超级鸡车（丰庄路店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市嘉定区丰庄路240号"'])," },\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"},['"香宜度麻辣香锅"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"长宁区淞虹路148号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"凡仔汉堡（老真北路店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市普陀区老真北路160号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"港式小铺"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区金钟路968号15楼15-105室"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"蜀香源麻辣香锅（剑河路店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"剑河路443-1"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"北京饺子馆"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"长宁区北新泾街道天山西路490-1号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"饭典*新简餐（凌空SOHO店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区金钟路968号9号楼地下一层9-83室"'])," },\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"},['"长宁区仙霞西路299弄3号101B"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"浏阳蒸菜"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"天山西路430号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"四海游龙（天山西路店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区天山西路"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"樱花食堂（凌空店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区金钟路968号15楼15-105室"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"壹分米客家传统调制米粉(天山店)"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"天山西路428号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"福荣祥烧腊（平溪路店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区协和路福泉路255弄57-73号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"速记黄焖鸡米饭"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区北新泾街道金钟路180号1层01号摊位"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"红辣椒麻辣烫"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区天山西路492号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"(小杨生煎)西郊百联餐厅"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"长宁区仙霞西路88号百联2楼"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"阳阳麻辣烫"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"天山西路389号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"南拳妈妈龙虾盖浇饭"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"普陀区金沙江路1699号鑫乐惠美食广场A13"'])," }\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"]),".restaurants = ",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:"zi-ding-yi-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","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"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"my-autocomplete"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"state3"']),"\n ",t("span",{staticClass:"hljs-attr"},[":fetch-suggestions"]),"=",t("span",{staticClass:"hljs-string"},['"querySearch"']),"\n ",t("span",{staticClass:"hljs-attr"},["custom-item"]),"=",t("span",{staticClass:"hljs-string"},['"my-item-zh"']),"\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\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"undefined"},["\n.my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .name {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .addr {\n font-size: 12px;\n color: #b4b4b4;\n }\n\n .highlighted .addr {\n color: #ddd;\n }\n }\n}\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["style"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"javascript"},["\n Vue.component(",t("span",{staticClass:"hljs-string"},["'my-item-zh'"]),", {\n ",t("span",{staticClass:"hljs-attr"},["functional"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),",\n ",t("span",{staticClass:"hljs-attr"},["render"]),": ",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-keyword"},["function"])," (",t("span",{staticClass:"hljs-params"},["h, ctx"]),") "]),"{\n ",t("span",{staticClass:"hljs-keyword"},["var"])," item = ctx.props.item;\n ",t("span",{staticClass:"hljs-keyword"},["return"])," h(",t("span",{staticClass:"hljs-string"},["'li'"]),", ctx.data, [\n h(",t("span",{staticClass:"hljs-string"},["'div'"]),", { ",t("span",{staticClass:"hljs-attr"},["attrs"]),": { ",t("span",{staticClass:"hljs-attr"},["class"]),": ",t("span",{staticClass:"hljs-string"},["'name'"])," } }, [item.value]),\n h(",t("span",{staticClass:"hljs-string"},["'span'"]),", { ",t("span",{staticClass:"hljs-attr"},["attrs"]),": { ",t("span",{staticClass:"hljs-attr"},["class"]),": ",t("span",{staticClass:"hljs-string"},["'addr'"])," } }, [item.address])\n ]);\n },\n ",t("span",{staticClass:"hljs-attr"},["props"]),": {\n ",t("span",{staticClass:"hljs-attr"},["item"]),": { ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-built_in"},["Object"]),", ",t("span",{staticClass:"hljs-attr"},["required"]),": ",t("span",{staticClass:"hljs-literal"},["true"])," }\n }\n });\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"},["state3"]),": ",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 { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"茶芝兰（奶茶，手抓饼）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市普陀区同普路1435号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"十二泷町"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市北翟路1444弄81号B幢-107"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"星移浓缩咖啡"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市嘉定区新郁路817号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"阿姨奶茶/豪大大"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"嘉定区曹安路1611号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"新麦甜四季甜品炸鸡"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"嘉定区曹安公路2383弄55号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"Monica摩托主题咖啡店"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"浮生若茶（凌空soho店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海长宁区金钟路968号9号楼地下一层"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"NONO JUICE 鲜榨果汁"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区天山西路119号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"CoCo都可(北新泾店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区仙霞西路"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"快乐柠檬（神州智慧店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区天山西路567号1层R117号店铺"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"Merci Paul cafe"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市普陀区光复西路丹巴路28弄6号楼819"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"猫山王（西郊百联店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区仙霞西路88号第一层G05-F01-1-306"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"枪会山"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市普陀区棕榈路"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"纵食"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"元丰天山花园(东门) 双流路267号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"钱记"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区天山西路"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"壹杯加"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区通协路"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"唦哇嘀咖"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"爱茜茜里(西郊百联)"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"长宁区仙霞西路88号1305室"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"爱茜茜里(近铁广场)"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"鲜果榨汁（金沙江路和美广店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"普陀区金沙江路2239号金沙和美广场B1-10-6"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"开心丽果（缤谷店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区威宁路天山路341号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"超级鸡车（丰庄路店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市嘉定区丰庄路240号"'])," },\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"},['"香宜度麻辣香锅"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"长宁区淞虹路148号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"凡仔汉堡（老真北路店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市普陀区老真北路160号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"港式小铺"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区金钟路968号15楼15-105室"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"蜀香源麻辣香锅（剑河路店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"剑河路443-1"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"北京饺子馆"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"长宁区北新泾街道天山西路490-1号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"饭典*新简餐（凌空SOHO店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区金钟路968号9号楼地下一层9-83室"'])," },\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"},['"长宁区仙霞西路299弄3号101B"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"浏阳蒸菜"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"天山西路430号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"四海游龙（天山西路店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区天山西路"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"樱花食堂（凌空店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区金钟路968号15楼15-105室"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"壹分米客家传统调制米粉(天山店)"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"天山西路428号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"福荣祥烧腊（平溪路店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区协和路福泉路255弄57-73号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"速记黄焖鸡米饭"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区北新泾街道金钟路180号1层01号摊位"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"红辣椒麻辣烫"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区天山西路492号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"(小杨生煎)西郊百联餐厅"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"长宁区仙霞西路88号百联2楼"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"阳阳麻辣烫"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"天山西路389号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"南拳妈妈龙虾盖浇饭"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"普陀区金沙江路1699号鑫乐惠美食广场A13"'])," }\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"]),".restaurants = ",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:"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("span",{staticClass:"hljs-string"},['"上海市普陀区同普路1435号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"十二泷町"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市北翟路1444弄81号B幢-107"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"星移浓缩咖啡"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市嘉定区新郁路817号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"阿姨奶茶/豪大大"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"嘉定区曹安路1611号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"新麦甜四季甜品炸鸡"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"嘉定区曹安公路2383弄55号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"Monica摩托主题咖啡店"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"浮生若茶（凌空soho店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海长宁区金钟路968号9号楼地下一层"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"NONO JUICE 鲜榨果汁"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区天山西路119号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"CoCo都可(北新泾店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区仙霞西路"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"快乐柠檬（神州智慧店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区天山西路567号1层R117号店铺"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"Merci Paul cafe"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市普陀区光复西路丹巴路28弄6号楼819"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"猫山王（西郊百联店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区仙霞西路88号第一层G05-F01-1-306"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"枪会山"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市普陀区棕榈路"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"纵食"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"元丰天山花园(东门) 双流路267号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"钱记"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区天山西路"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"壹杯加"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区通协路"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"唦哇嘀咖"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"爱茜茜里(西郊百联)"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"长宁区仙霞西路88号1305室"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"爱茜茜里(近铁广场)"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"鲜果榨汁（金沙江路和美广店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"普陀区金沙江路2239号金沙和美广场B1-10-6"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"开心丽果（缤谷店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区威宁路天山路341号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"超级鸡车（丰庄路店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市嘉定区丰庄路240号"'])," },\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"},['"香宜度麻辣香锅"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"长宁区淞虹路148号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"凡仔汉堡（老真北路店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市普陀区老真北路160号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"港式小铺"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区金钟路968号15楼15-105室"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"蜀香源麻辣香锅（剑河路店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"剑河路443-1"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"北京饺子馆"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"长宁区北新泾街道天山西路490-1号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"饭典*新简餐（凌空SOHO店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区金钟路968号9号楼地下一层9-83室"'])," },\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"},['"长宁区仙霞西路299弄3号101B"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"浏阳蒸菜"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"天山西路430号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"四海游龙（天山西路店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区天山西路"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"樱花食堂（凌空店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区金钟路968号15楼15-105室"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"壹分米客家传统调制米粉(天山店)"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"天山西路428号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"福荣祥烧腊（平溪路店）"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区协和路福泉路255弄57-73号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"速记黄焖鸡米饭"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区北新泾街道金钟路180号1层01号摊位"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"红辣椒麻辣烫"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"上海市长宁区天山西路492号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"(小杨生煎)西郊百联餐厅"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"长宁区仙霞西路88号百联2楼"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"阳阳麻辣烫"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"天山西路389号"'])," },\n { ",t("span",{staticClass:"hljs-string"},['"value"']),": ",t("span",{staticClass:"hljs-string"},['"南拳妈妈龙虾盖浇饭"']),", ",t("span",{staticClass:"hljs-string"},['"address"']),": ",t("span",{staticClass:"hljs-string"},['"普陀区金沙江路1699号鑫乐惠美食广场A13"'])," }\n ];\n },\n querySearchAsync(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"]),".createStateFilter(queryString)) : restaurants;\n\n clearTimeout(",t("span",{staticClass:"hljs-keyword"},["this"]),".timeout);\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".timeout = setTimeout(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["()"])," =>"])," {\n cb(results);\n }, ",t("span",{staticClass:"hljs-number"},["3000"])," * ",t("span",{staticClass:"hljs-built_in"},["Math"]),".random());\n },\n createStateFilter(queryString) {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["state"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," (state.value.indexOf(queryString.toLowerCase()) === ",t("span",{staticClass:"hljs-number"},["0"]),");\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"]),".restaurants = ",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:"input-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},["¶"])," Input 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",["type"]),t("td",["类型"]),t("td",["string"]),t("td",["text/textarea"]),t("td",["text"])]),t("tr",[t("td",["value"]),t("td",["绑定值"]),t("td",["string, number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["maxlength"]),t("td",["最大输入长度"]),t("td",["number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["minlength"]),t("td",["最小输入长度"]),t("td",["number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["placeholder"]),t("td",["输入框占位文本"]),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",["size"]),t("td",["输入框尺寸，只在 ",t("code",['type!="textarea"'])," 时有效"]),t("td",["string"]),t("td",["large, small, mini"]),t("td",["—"])]),t("tr",[t("td",["icon"]),t("td",["输入框尾部图标"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["rows"]),t("td",["输入框行数，只对 ",t("code",['type="textarea"'])," 有效"]),t("td",["number"]),t("td",["—"]),t("td",["2"])]),t("tr",[t("td",["autosize"]),t("td",["自适应内容高度，只对 ",t("code",['type="textarea"'])," 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }"]),t("td",["boolean/object"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["auto-complete"]),t("td",["原生属性，自动补全"]),t("td",["string"]),t("td",["on, off"]),t("td",["off"])]),t("tr",[t("td",["name"]),t("td",["原生属性"]),t("td",["string"]),t("td",["-"]),t("td",["-"])]),t("tr",[t("td",["max"]),t("td",["原生属性，设置最大值"]),t("td",["*"]),t("td",["-"]),t("td",["-"])]),t("tr",[t("td",["min"]),t("td",["原生属性，设置最小值"]),t("td",["*"]),t("td",["-"]),t("td",["-"])]),t("tr",[t("td",["autofocus"]),t("td",["原生属性，自动获取焦点"]),t("td",["boolean"]),t("td",["true, false"]),t("td",["false"])]),t("tr",[t("td",["form"]),t("td",["原生属性"]),t("td",["string"]),t("td",["-"]),t("td",["-"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"input-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},["¶"])," Input 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",["click"]),t("td",["点击 Input 内的图标时触发"]),t("td",["(event: Event)"])]),t("tr",[t("td",["blur"]),t("td",["在 Input 失去焦点时触发"]),t("td",["(event: Event)"])]),t("tr",[t("td",["focus"]),t("td",["在 Input 或得焦点时触发"]),t("td",["(event: Event)"])]),t("tr",[t("td",["change"]),t("td",["在 Input 值改变时触发"]),t("td",["(value: string | number)"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"autocomplete-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},["¶"])," Autocomplete 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",["placeholder"]),t("td",["输入框占位文本"]),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",["value"]),t("td",["必填值输入绑定值"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["custom-item"]),t("td",["通过该参数指定自定义的输入建议列表项的组件名"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["fetch-suggestions"]),t("td",["返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它"]),t("td",["Function(queryString, callback)"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"autocomplete-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},["¶"])," Autocomplete 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",["select"]),t("td",["点击选中建议项时触发"]),t("td",["选中建议项"])])])])}]}},function(s,t,a){s.exports=a(331)},function(s,t,a){var n,e,l=a(332);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:"an-zhuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang","aria-hidden":"true"}},["¶"])," 安装"]),t("h3",{attrs:{id:"npm-an-zhuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#npm-an-zhuang","aria-hidden":"true"}},["¶"])," npm 安装"]),t("p",["推荐使用 npm 的方式安装，它能更好地和 ",t("a",{attrs:{href:"https://webpack.js.org/"}},["webpack"])," 打包工具配合使用。"]),t("pre",[t("code",{staticClass:"hljs language-shell"},["npm i element-ui -S\n"])]),t("h3",{attrs:{id:"cdn"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},["¶"])," CDN"]),t("p",["目前可以通过 ",t("a",{attrs:{href:"https://unpkg.com/element-ui/"}},["unpkg.com/element-ui"])," 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。"]),t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-comment"},["<!-- 引入样式 -->"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["link"])," ",t("span",{staticClass:"hljs-attr"},["rel"]),"=",t("span",{staticClass:"hljs-string"},['"stylesheet"'])," ",t("span",{staticClass:"hljs-attr"},["href"]),"=",t("span",{staticClass:"hljs-string"},['"https://unpkg.com/element-ui/lib/theme-default/index.css"']),">"]),"\n",t("span",{staticClass:"hljs-comment"},["<!-- 引入组件库 -->"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"])," ",t("span",{staticClass:"hljs-attr"},["src"]),"=",t("span",{staticClass:"hljs-string"},['"https://unpkg.com/element-ui/lib/index.js"']),">"]),t("span",{staticClass:"undefined"}),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n"])]),t("h3",{attrs:{id:"hello-world"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},["¶"])," Hello world"]),t("p",["通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。",t("a",{attrs:{href:"http://codepen.io/QingWei-Li/pen/vXwJrY"}},["在线演示"])]),t("pre",[t("code",{staticClass:"hljs language-html"},[t("span",{staticClass:"hljs-meta"},["<!DOCTYPE html>"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["html"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["head"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["meta"])," ",t("span",{staticClass:"hljs-attr"},["charset"]),"=",t("span",{staticClass:"hljs-string"},['"UTF-8"']),">"]),"\n ",t("span",{staticClass:"hljs-comment"},["<!-- 引入样式 -->"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["link"])," ",t("span",{staticClass:"hljs-attr"},["rel"]),"=",t("span",{staticClass:"hljs-string"},['"stylesheet"'])," ",t("span",{staticClass:"hljs-attr"},["href"]),"=",t("span",{staticClass:"hljs-string"},['"https://unpkg.com/element-ui/lib/theme-default/index.css"']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["head"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["body"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["id"]),"=",t("span",{staticClass:"hljs-string"},['"app"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"visible = true"']),">"]),"按钮",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-dialog"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"visible"'])," ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"Hello world"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["p"]),">"]),"欢迎使用 Element",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["p"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-dialog"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["body"]),">"]),"\n ",t("span",{staticClass:"hljs-comment"},["<!-- 先引入 Vue -->"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"])," ",t("span",{staticClass:"hljs-attr"},["src"]),"=",t("span",{staticClass:"hljs-string"},['"https://unpkg.com/vue/dist/vue.js"']),">"]),t("span",{staticClass:"undefined"}),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n ",t("span",{staticClass:"hljs-comment"},["<!-- 引入组件库 -->"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"])," ",t("span",{staticClass:"hljs-attr"},["src"]),"=",t("span",{staticClass:"hljs-string"},['"https://unpkg.com/element-ui/lib/index.js"']),">"]),t("span",{staticClass:"undefined"}),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["script"]),">"]),t("span",{staticClass:"actionscript"},["\n ",t("span",{staticClass:"hljs-keyword"},["new"])," Vue({\n el: ",t("span",{staticClass:"hljs-string"},["'#app'"]),",\n data: ",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-keyword"},["function"]),t("span",{staticClass:"hljs-params"},["()"])]),"{\n ",t("span",{staticClass:"hljs-keyword"},["return"])," { visible: ",t("span",{staticClass:"hljs-literal"},["false"])," }\n }\n })\n "]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["script"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["html"]),">"]),"\n"])]),t("p",["如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。"])])}]}},function(s,t,a){s.exports=a(334)},function(s,t,a){var n,e;a(335);var l=a(337);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("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row>\n <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n\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",[t("el-col",{attrs:{span:24}},[s._m(4)])]),t("el-row",[t("el-col",{attrs:{span:12}},[s._m(5)]),t("el-col",{attrs:{span:12}},[s._m(6)])]),t("el-row",[t("el-col",{attrs:{span:8}},[s._m(7)]),t("el-col",{attrs:{span:8}},[s._m(8)]),t("el-col",{attrs:{span:8}},[s._m(9)])]),t("el-row",[t("el-col",{attrs:{span:6}},[s._m(10)]),t("el-col",{attrs:{span:6}},[s._m(11)]),t("el-col",{attrs:{span:6}},[s._m(12)]),t("el-col",{attrs:{span:6}},[s._m(13)])]),t("el-row",[t("el-col",{attrs:{span:4}},[s._m(14)]),t("el-col",{attrs:{span:4}},[s._m(15)]),t("el-col",{attrs:{span:4}},[s._m(16)]),t("el-col",{attrs:{span:4}},[s._m(17)]),t("el-col",{attrs:{span:4}},[s._m(18)]),t("el-col",{attrs:{span:4}},[s._m(19)])])]),s._m(20),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(21)])]),s._m(22),s._m(23),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"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n\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(24)]),t("el-col",{attrs:{span:6}},[s._m(25)]),t("el-col",{attrs:{span:6}},[s._m(26)]),t("el-col",{attrs:{span:6}},[s._m(27)])])]),s._m(28),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(29)])]),s._m(30),s._m(31),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row :gutter="20">\n <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n\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: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"}}},[t("div",{slot:"source",staticClass:"source"},[t("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[t("el-col",{attrs:{span:6}},[s._m(53)]),t("el-col",{attrs:{span:6}},[s._m(54)]),t("el-col",{attrs:{span:6}},[s._m(55)])]),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[t("el-col",{attrs:{span:6}},[s._m(56)]),t("el-col",{attrs:{span:6}},[s._m(57)]),t("el-col",{attrs:{span:6}},[s._m(58)])]),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[t("el-col",{attrs:{span:6}},[s._m(59)]),t("el-col",{attrs:{span:6}},[s._m(60)]),t("el-col",{attrs:{span:6}},[s._m(61)])]),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[t("el-col",{attrs:{span:6}},[s._m(62)]),t("el-col",{attrs:{span:6}},[s._m(63)]),t("el-col",{attrs:{span:6}},[s._m(64)])]),t("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[t("el-col",{attrs:{span:6}},[s._m(65)]),t("el-col",{attrs:{span:6}},[s._m(66)]),t("el-col",{attrs:{span:6}},[s._m(67)])])]),s._m(68),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(69)])]),s._m(70),s._m(71),s._m(72),s._m(73)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"layout-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-bu-ju","aria-hidden":"true"}},["¶"])," Layout 布局"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["通过基础的 24 分栏，迅速简便地创建布局。"])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"ji-chu-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-bu-ju","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("div",{staticClass:"grid-content bg-purple-dark"})},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("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple"})},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple-light"})},function(){var s=this,t=s.$createElement;s._c;return t("p",["通过 row 和 col 组件，并通过 col 组件的 ",t("code",["span"])," 属性我们就可以自由地组合布局。"])},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"},['"24"']),">"]),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-dark"']),">"]),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"},['"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-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-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-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"},['"4"']),">"]),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"},['"4"']),">"]),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"},['"4"']),">"]),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"},['"4"']),">"]),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"},['"4"']),">"]),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"},['"4"']),">"]),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\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"undefined"},["\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("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:"fen-lan-jian-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-jian-ge","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("div",{staticClass:"grid-content bg-purple"})},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("div",{staticClass:"grid-content bg-purple"})},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",["Row 组件 提供 ",t("code",["gutter"])," 属性来指定每一栏之间的间隔，默认间隔为 0。"])},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-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"']),">"]),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\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"undefined"},["\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("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:"hun-he-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hun-he-bu-ju","aria-hidden":"true"}},["¶"])," 混合布局"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。"])},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("div",{staticClass:"grid-content bg-purple"})},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("div",{staticClass:"grid-content bg-purple"})},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("div",{staticClass:"grid-content bg-purple"})},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("div",{staticClass:"grid-content bg-purple"})},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("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"},['"16"']),">"]),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"']),">"]),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"},['"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"']),">"]),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"},['"4"']),">"]),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"},['"4"']),">"]),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"},['"4"']),">"]),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"},['"16"']),">"]),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"},['"4"']),">"]),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\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"undefined"},["\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("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:"fen-lan-pian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-pian-yi","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("div",{staticClass:"grid-content bg-purple"})},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("div",{staticClass:"grid-content bg-purple"})},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("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",{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\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"undefined"},["\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("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:"dui-qi-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","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("div",{staticClass:"grid-content bg-purple"})},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple"})},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple"})},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple"})},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"grid-content bg-purple-light"})},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("div",{staticClass:"grid-content bg-purple"})},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"grid-content bg-purple-light"})},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",["将 ",t("code",["type"])," 属性赋值为 'flex'，可以启用 flex 布局，并可通过 ",t("code",["justify"])," 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。"])},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"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"flex"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"row-bg"']),">"]),"\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",{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",{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"},['"end"']),">"]),"\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",{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"},['"space-between"']),">"]),"\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",{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"},['"space-around"']),">"]),"\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\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"undefined"},["\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("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:"row-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},["¶"])," Row 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",["gutter"]),t("td",["栅格间隔"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["type"]),t("td",["布局模式，可选 flex，现代浏览器下有效"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["justify"]),t("td",["flex 布局下的水平排列方式"]),t("td",["string"]),t("td",["start/end/center/space-around/space-between"]),t("td",["start"])]),t("tr",[t("td",["align"]),t("td",["flex 布局下的垂直排列方式"]),t("td",["string"]),t("td",["top/middle/bottom"]),t("td",["top"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"col-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},["¶"])," Col 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",["span"]),t("td",["栅格占据的列数"]),t("td",["number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["offset"]),t("td",["栅格左侧的间隔格数"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["push"]),t("td",["栅格向右移动格数"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["pull"]),t("td",["栅格向左移动格数"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["xs"]),t("td",[t("code",["<768px"])," 响应式栅格数或者栅格属性对象"]),t("td",["number/object (例如： {span: 4, offset: 4})"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["sm"]),t("td",[t("code",["≥768px"])," 响应式栅格数或者栅格属性对象"]),t("td",["number/object (例如： {span: 4, offset: 4})"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["md"]),t("td",[t("code",["≥992"])," 响应式栅格数或者栅格属性对象"]),t("td",["number/object (例如： {span: 4, offset: 4})"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["lg"]),t("td",[t("code",["≥1200"])," 响应式栅格数或者栅格属性对象"]),t("td",["number/object (例如： {span: 4, offset: 4})"]),t("td",["—"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(339)},function(s,t,a){var n,e;a(340),n=a(342);var l=a(343);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{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],loading:!0,loading2:!0,fullscreenLoading:!1}},methods:{openFullScreen:function(){var s=this;this.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},3e3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;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-table v-loading.body="loading" :data="tableData" 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\n\n',script:"\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }],\n loading: true\n };\n }\n };\n",style:"\n body {\n margin: 0;\n }\n"}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{directives:[{name:"loading",rawName:"v-loading.body",value:s.loading,expression:"loading",modifiers:{body:!0}}],attrs:{data:s.tableData,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(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-table v-loading="loading2" element-loading-text="拼命加载中" :data="tableData" 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 tableData: [{\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }],\n loading2: true\n };\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],attrs:{"element-loading-text":"拼命加载中",data:s.tableData,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(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-button type="primary" @click="openFullScreen" v-loading.fullscreen.lock="fullscreenLoading">\n 显示整页加载，3 秒后消失\n </el-button>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n fullscreenLoading: false\n }\n },\n methods: {\n openFullScreen() {\n this.fullscreenLoading = true;\n setTimeout(() => {\n this.fullscreenLoading = false;\n }, 3000);\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:s.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:s.openFullScreen}},["\n 显示整页加载，3 秒后消失\n "])]]),s._m(12),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(13)])]),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),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:"loading-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-jia-zai","aria-hidden":"true"}},["¶"])," Loading 加载"])},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:"qu-yu-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qu-yu-jia-zai","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",["Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令",t("code",["v-loading"]),"，只需要绑定",t("code",["Boolean"]),"即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加",t("code",["body"]),"修饰符，可以使遮罩插入至 DOM 中的 body 上。"])},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.body"]),"=",t("span",{staticClass:"hljs-string"},['"loading"']),"\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"},["style"]),">"]),t("span",{staticClass:"css"},["\n ",t("span",{staticClass:"hljs-selector-tag"},["body"])," {\n ",t("span",{staticClass:"hljs-attribute"},["margin"]),": ",t("span",{staticClass:"hljs-number"},["0"]),";\n }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["style"]),">"]),"\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"]),": ",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"},["'上海市普陀区金沙江路 1518 弄'"]),"\n }],\n ",t("span",{staticClass:"hljs-attr"},["loading"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),"\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:"jia-zai-wen-an"
|
||
}},[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"]),": ",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"},["'上海市普陀区金沙江路 1518 弄'"]),"\n }],\n ",t("span",{staticClass:"hljs-attr"},["loading2"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),"\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:"zheng-ye-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zheng-ye-jia-zai","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",["fullscreen"]),"修饰符（此时遮罩会插入至 body 上）。此时若需要锁定屏幕的滚动，可以使用",t("code",["lock"]),"修饰符。"])},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-button"]),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"']),"\n ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"openFullScreen"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-loading.fullscreen.lock"]),"=",t("span",{staticClass:"hljs-string"},['"fullscreenLoading"']),">"]),"\n 显示整页加载，3 秒后消失\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 data() {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n ",t("span",{staticClass:"hljs-attr"},["fullscreenLoading"]),": ",t("span",{staticClass:"hljs-literal"},["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:"fu-wu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-wu","aria-hidden":"true"}},["¶"])," 服务"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Loading 还可以以服务的方式调用。引入 Loading 服务："])},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",["在需要调用时："])},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",["其中 ",t("code",["options"])," 参数为 Loading 的配置项，具体见下表。",t("code",["LoadingService"])," 会返回一个 Loading 实例，可通过调用该实例的 ",t("code",["close"])," 方法来关闭它："])},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",["需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例："])},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",["此时调用它们中任意一个的 ",t("code",["close"])," 方法都能关闭这个全屏 Loading。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 ",t("code",["$loading"]),"，它的调用方式为：",t("code",["this.$loading(options)"]),"，同样会返回一个 Loading 实例。"])},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",["target"]),t("td",["Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 ",t("code",["document.querySelector"]),"以获取到对应 DOM 节点"]),t("td",["object/string"]),t("td",["—"]),t("td",["document.body"])]),t("tr",[t("td",["body"]),t("td",["同 ",t("code",["v-loading"])," 指令中的 ",t("code",["body"])," 修饰符"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["fullscreen"]),t("td",["同 ",t("code",["v-loading"])," 指令中的 ",t("code",["fullscreen"])," 修饰符"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["lock"]),t("td",["同 ",t("code",["v-loading"])," 指令中的 ",t("code",["lock"])," 修饰符"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["text"]),t("td",["显示在加载图标下方的加载文案"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["customClass"]),t("td",["Loading 的自定义类名"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(345)},function(s,t,a){var n,e;a(346),n=a(348);var l=a(349);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:{handleOpen:function(s,t){console.log(s,t)},handleClose:function(s,t){console.log(s,t)},handleSelect:function(s,t){console.log(s,t)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;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-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n <el-menu-item index="1">处理中心</el-menu-item>\n <el-submenu index="2">\n <template slot="title">我的工作台</template>\n <el-menu-item index="2-1">选项1</el-menu-item>\n <el-menu-item index="2-2">选项2</el-menu-item>\n <el-menu-item index="2-3">选项3</el-menu-item>\n </el-submenu>\n <el-menu-item index="3">订单管理</el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n <el-menu-item index="1">处理中心</el-menu-item>\n <el-submenu index="2">\n <template slot="title">我的工作台</template>\n <el-menu-item index="2-1">选项1</el-menu-item>\n <el-menu-item index="2-2">选项2</el-menu-item>\n <el-menu-item index="2-3">选项3</el-menu-item>\n </el-submenu>\n <el-menu-item index="3">订单管理</el-menu-item>\n</el-menu>\n\n\n',script:"\n export default {\n methods: {\n handleSelect(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-menu",{staticClass:"el-menu-demo",attrs:{theme:"dark","default-active":"1",mode:"horizontal"},on:{select:s.handleSelect}},[t("el-menu-item",{attrs:{index:"1"}},["处理中心"]),t("el-submenu",{attrs:{index:"2"}},[t("template",{slot:"title"},["我的工作台"]),t("el-menu-item",{attrs:{index:"2-1"}},["选项1"]),t("el-menu-item",{attrs:{index:"2-2"}},["选项2"]),t("el-menu-item",{attrs:{index:"2-3"}},["选项3"])]),t("el-menu-item",{attrs:{index:"3"}},["订单管理"])]),s._m(4),t("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":"1",mode:"horizontal"},on:{select:s.handleSelect}},[t("el-menu-item",{attrs:{index:"1"}},["处理中心"]),t("el-submenu",{attrs:{index:"2"}},[t("template",{slot:"title"},["我的工作台"]),t("el-menu-item",{attrs:{index:"2-1"}},["选项1"]),t("el-menu-item",{attrs:{index:"2-2"}},["选项2"]),t("el-menu-item",{attrs:{index:"2-3"}},["选项3"])]),t("el-menu-item",{attrs:{index:"3"}},["订单管理"])])]),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-row class="tac">\n <el-col :span="8">\n <h5>带 icon</h5>\n <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">\n <el-submenu index="1">\n <template slot="title"><i class="el-icon-message"></i>导航一</template>\n <el-menu-item-group>\n <template slot="title">分组一</template>\n <el-menu-item index="1-1">选项1</el-menu-item>\n <el-menu-item index="1-2">选项2</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="分组2">\n <el-menu-item index="1-3">选项3</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <template slot="title">选项4</template>\n <el-menu-item index="1-4-1">选项1</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>\n <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>\n </el-menu>\n </el-col>\n <el-col :span="8">\n <h5>不带 icon</h5>\n <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">\n <el-submenu index="1">\n <template slot="title">导航一</template>\n <el-menu-item-group title="分组一">\n <el-menu-item index="1-1">选项1</el-menu-item>\n <el-menu-item index="1-2">选项2</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="分组2">\n <el-menu-item index="1-3">选项3</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <template slot="title">选项4</template>\n <el-menu-item index="1-4-1">选项1</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="2">导航二</el-menu-item>\n <el-menu-item index="3">导航三</el-menu-item>\n </el-menu>\n </el-col>\n <el-col :span="8">\n <h5>分组</h5>\n <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">\n <el-menu-item-group title="分组一">\n <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>\n <el-menu-item index="2"><i class="el-icon-message"></i>导航二</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="分组二">\n <el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>\n <el-menu-item index="4"><i class="el-icon-message"></i>导航四</el-menu-item>\n </el-menu-item-group>\n </el-menu>\n </el-col>\n</el-row>\n\n\n',script:"\n export default {\n methods: {\n handleOpen(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-row",{staticClass:"tac"},[t("el-col",{attrs:{span:8}},[s._m(9),t("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[t("el-submenu",{attrs:{index:"1"}},[t("template",{slot:"title"},[s._m(10),"导航一"]),t("el-menu-item-group",[t("template",{slot:"title"},["分组一"]),t("el-menu-item",{attrs:{index:"1-1"}},["选项1"]),t("el-menu-item",{attrs:{index:"1-2"}},["选项2"])]),t("el-menu-item-group",{attrs:{title:"分组2"}},[t("el-menu-item",{attrs:{index:"1-3"}},["选项3"])]),t("el-submenu",{attrs:{index:"1-4"}},[t("template",{slot:"title"},["选项4"]),t("el-menu-item",{attrs:{index:"1-4-1"}},["选项1"])])]),t("el-menu-item",{attrs:{index:"2"}},[s._m(11),"导航二"]),t("el-menu-item",{attrs:{index:"3"}},[s._m(12),"导航三"])])]),t("el-col",{attrs:{span:8}},[s._m(13),t("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",theme:"dark"},on:{open:s.handleOpen,close:s.handleClose}},[t("el-submenu",{attrs:{index:"1"}},[t("template",{slot:"title"},["导航一"]),t("el-menu-item-group",{attrs:{title:"分组一"}},[t("el-menu-item",{attrs:{index:"1-1"}},["选项1"]),t("el-menu-item",{attrs:{index:"1-2"}},["选项2"])]),t("el-menu-item-group",{attrs:{title:"分组2"}},[t("el-menu-item",{attrs:{index:"1-3"}},["选项3"])]),t("el-submenu",{attrs:{index:"1-4"}},[t("template",{slot:"title"},["选项4"]),t("el-menu-item",{attrs:{index:"1-4-1"}},["选项1"])])]),t("el-menu-item",{attrs:{index:"2"}},["导航二"]),t("el-menu-item",{attrs:{index:"3"}},["导航三"])])]),t("el-col",{attrs:{span:8}},[s._m(14),t("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{mode:"vertical","default-active":"1"}},[t("el-menu-item-group",{attrs:{title:"分组一"}},[t("el-menu-item",{attrs:{index:"1"}},[s._m(15),"导航一"]),t("el-menu-item",{attrs:{index:"2"}},[s._m(16),"导航二"])]),t("el-menu-item-group",{attrs:{title:"分组二"}},[t("el-menu-item",{attrs:{index:"3"}},[s._m(17),"导航三"]),t("el-menu-item",{attrs:{index:"4"}},[s._m(18),"导航四"])])])])])]),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),s._m(27),s._m(28),s._m(29),s._m(30)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"navmenu-dao-hang-cai-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu-dao-hang-cai-dan","aria-hidden":"true"}},["¶"])," NavMenu 导航菜单"])},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:"ding-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-lan","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("div",{staticClass:"line"})},function(){var s=this,t=s.$createElement;s._c;return t("p",["导航菜单默认为垂直模式，通过 ",t("code",["mode"])," 属性可以使导航菜单变更为水平模式。另外，在菜单中通过 ",t("code",["submenu"])," 组件可以生成二级菜单。"])},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-menu"])," ",t("span",{staticClass:"hljs-attr"},["theme"]),"=",t("span",{staticClass:"hljs-string"},['"dark"'])," ",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-demo"'])," ",t("span",{staticClass:"hljs-attr"},["mode"]),"=",t("span",{staticClass:"hljs-string"},['"horizontal"'])," ",t("span",{staticClass:"hljs-attr"},["@select"]),"=",t("span",{staticClass:"hljs-string"},['"handleSelect"']),">"]),"\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"},["el-menu-item"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-submenu"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),"\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"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"2-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"},['"2-2"']),">"]),"选项2",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-3"']),">"]),"选项3",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-menu-item"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"3"']),">"]),"订单管理",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"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"line"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\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"},['"1"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-menu-demo"'])," ",t("span",{staticClass:"hljs-attr"},["mode"]),"=",t("span",{staticClass:"hljs-string"},['"horizontal"'])," ",t("span",{staticClass:"hljs-attr"},["@select"]),"=",t("span",{staticClass:"hljs-string"},['"handleSelect"']),">"]),"\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"},["el-menu-item"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-submenu"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),"\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"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"2-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"},['"2-2"']),">"]),"选项2",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-3"']),">"]),"选项3",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-menu-item"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"3"']),">"]),"订单管理",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\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 handleSelect(key, keyPath) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(key, keyPath);\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:"ce-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ce-lan","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("h5",["带 icon"])},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-message"})},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-menu"})},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-setting"})},function(){var s=this,t=s.$createElement;s._c;return t("h5",["不带 icon"])},function(){var s=this,t=s.$createElement;s._c;return t("h5",["分组"])},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-message"})},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-message"})},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-message"})},function(){var s=this,t=s.$createElement;s._c;return t("i",{staticClass:"el-icon-message"})},function(){var s=this,t=s.$createElement;s._c;return t("p",["通过 ",t("code",["el-menu-item-group"])," 组件可以实现菜单进行分组，分组名可以通过 ",t("code",["title"])," 属性直接设定也可以通过具名 slot 来设定。"])},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"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"tac"']),">"]),"\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"']),">"]),"\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"},["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"]),">"]),"导航一",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"]),">"]),"\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"])," ",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",{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 ",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"},['"分组2"']),">"]),"\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-3"']),">"]),"选项3",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 ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-submenu"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"1-4"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"title"']),">"]),"选项4",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"']),">"]),"选项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-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",{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 ",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"},['"分组2"']),">"]),"\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-3"']),">"]),"选项3",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 ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-submenu"])," ",t("span",{staticClass:"hljs-attr"},["index"]),"=",t("span",{staticClass:"hljs-string"},['"1-4"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["template"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"title"']),">"]),"选项4",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"']),">"]),"选项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-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"},["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"},["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"]),">"]),"分组",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"},['"分组一"']),">"]),"\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"]),">"]),"导航一",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"]),">"]),"导航二",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 ",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"},['"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-message"']),">"]),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"},['"4"']),">"]),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"]),">"]),"导航四",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 ",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-row"]),">"]),"\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 handleOpen(key, keyPath) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(key, keyPath);\n },\n handleClose(key, keyPath) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(key, keyPath);\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:"menu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},["¶"])," Menu Attribute"])},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",["mode"]),t("td",["模式"]),t("td",["string"]),t("td",["horizontal,vertical"]),t("td",["vertical"])]),t("tr",[t("td",["theme"]),t("td",["主题色"]),t("td",["string"]),t("td",["light,dark"]),t("td",["light"])]),t("tr",[t("td",["default-active"]),t("td",["当前激活菜单的 index"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["default-openeds"]),t("td",["当前打开的submenu的 key 数组"]),t("td",["Array"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["unique-opened"]),t("td",["是否只保持一个子菜单的展开"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["menu-trigger"]),t("td",["子菜单打开的触发方式(只在 mode 为 horizontal 时有效)"]),t("td",["string"]),t("td",["—"]),t("td",["hover"])]),t("tr",[t("td",["router"]),t("td",["是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"menu-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},["¶"])," Menu 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",["select"]),t("td",["菜单激活回调"]),t("td",["index: 选中菜单项的 indexPath: 选中菜单项的 index path"])]),t("tr",[t("td",["open"]),t("td",["SubMenu 展开的回调"]),t("td",["index: 打开的 subMenu 的 index， indexPath: 打开的 subMenu 的 index path"])]),t("tr",[t("td",["close"]),t("td",["SubMenu 收起的回调"]),t("td",["index: 收起的 subMenu 的 index， indexPath: 收起的 subMenu 的 index path"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"submenu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},["¶"])," SubMenu Attribute"])},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",["index"]),t("td",["唯一标志"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"menu-item-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},["¶"])," Menu-Item Attribute"])},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",["index"]),t("td",["唯一标志"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["route"]),t("td",["Vue Router 路径对象"]),t("td",["Object"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"menu-group-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},["¶"])," Menu-Group Attribute"])},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",["分组标题"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(351)},function(s,t,a){var n,e;n=a(352);var l=a(353);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={methods:{open:function(){var s=this;this.$alert("这是一段内容","标题名称",{confirmButtonText:"确定",callback:function(t){s.$message({type:"info",message:"action: "+t})}})},open2:function(){var s=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(function(){setTimeout(function(){s.$message({message:"删除成功!",type:"success"})},200)}).catch(function(){setTimeout(function(){s.$message({message:"已取消删除",type:"info"})},200)})},open3:function(){var s=this;this.$prompt("请输入邮箱","提示",{confirmButtonText:"确定",cancelButtonText:"取消",inputPattern:/[\w!#$%&'*+\/=?^_`{|}~-]+(?:\.[\w!#$%&'*+\/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"邮箱格式不正确"}).then(function(t){var a=t.value;setTimeout(function(){s.$message({type:"success",message:"你的邮箱是: "+a})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"取消输入"})},200)})},open4:function(){var s=this;this.$msgbox({title:"消息",message:"这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容",showCancelButton:!0,confirmButtonText:"确定",cancelButtonText:"取消"}).then(function(t){setTimeout(function(){s.$message({type:"info",message:"action: "+t})},200)})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;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-button type="text" @click="open">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$alert('这是一段内容', '标题名称', {\n confirmButtonText: '确定',\n callback: action => {\n this.$message({\n type: 'info',\n message: `action: ${ action }`\n });\n }\n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open}},["点击打开 Message Box"])]]),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-button type="text" @click="open2">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open2() {\n this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n type: 'warning'\n }).then(() => {\n this.$message({\n type: 'success',\n message: '删除成功!'\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: '已取消删除'\n }); \n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open2}},["点击打开 Message Box"])]]),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-button type="text" @click="open3">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open3() {\n this.$prompt('请输入邮箱', '提示', {\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n inputErrorMessage: '邮箱格式不正确'\n }).then(({ value }) => {\n this.$message({\n type: 'success',\n message: '你的邮箱是: ' + value\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: '取消输入'\n }); \n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open3}},["点击打开 Message Box"])]]),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:'<template>\n <el-button type="text" @click="open4">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open4() {\n this.$msgbox({\n title: '消息',\n message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',\n showCancelButton: true,\n confirmButtonText: '确定',\n cancelButtonText: '取消'\n }).then(action => {\n this.$message({\n type: 'info',\n message: 'action: ' + action\n });\n });\n },\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{type:"text"},on:{click:s.open4}},["点击打开 Message Box"])]]),s._m(16),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(17)])]),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"messagebox-dan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox-dan-kuang","aria-hidden":"true"}},["¶"])," MessageBox 弹框"])},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:"xiao-xi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xi-ti-shi","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",["$alert"]),"方法即可打开消息提示，它模拟了系统的 ",t("code",["alert"]),"，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，",t("code",["message"]),"和",t("code",["title"]),"。值得一提的是，窗口被关闭后，它默认会返回一个",t("code",["Promise"]),"对象便于进行后续操作的处理。若不确定浏览器是否支持",t("code",["Promise"]),"，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。"])},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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open"']),">"]),"点击打开 Message Box",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 open() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$alert(",t("span",{staticClass:"hljs-string"},["'这是一段内容'"]),", ",t("span",{staticClass:"hljs-string"},["'标题名称'"]),", {\n ",t("span",{staticClass:"hljs-attr"},["confirmButtonText"]),": ",t("span",{staticClass:"hljs-string"},["'确定'"]),",\n ",t("span",{staticClass:"hljs-attr"},["callback"]),": ",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: ",t("span",{staticClass:"hljs-subst"},["${ action }"]),"`"]),"\n });\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:"que-ren-xiao-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#que-ren-xiao-xi","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",["$confirm"]),"方法即可打开消息提示，它模拟了系统的 ",t("code",["confirm"]),"。Message Box 组件也拥有极高的定制性，我们可以传入",t("code",["options"]),"作为第三个参数，它是一个字面量对象。",t("code",["type"]),"字段表明消息类型，可以为",t("code",["success"]),"，",t("code",["error"]),"，",t("code",["info"]),"和",t("code",["warning"]),"，无效的设置将会被忽略。注意，第二个参数",t("code",["title"]),"必须定义为",t("code",["String"]),"类型，如果是",t("code",["Object"]),"，会被理解为",t("code",["options"]),"。在这里我们用了 Promise 来处理后续响应。"])},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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open2"']),">"]),"点击打开 Message Box",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 open2() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$confirm(",t("span",{staticClass:"hljs-string"},["'此操作将永久删除该文件, 是否继续?'"]),", ",t("span",{staticClass:"hljs-string"},["'提示'"]),", {\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 ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'warning'"]),"\n }).then(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["()"])," =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\n ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'success'"]),",\n ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'删除成功!'"]),"\n });\n }).catch(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["()"])," =>"])," {\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"},["'已取消删除'"]),"\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:"ti-jiao-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ti-jiao-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",["$prompt"]),"方法即可打开消息提示，它模拟了系统的 ",t("code",["prompt"]),"。可以用",t("code",["inputPattern"]),"字段自己规定匹配模式，或者用",t("code",["inputValidator"]),"规定校验函数，可以返回",t("code",["Boolean"]),"或",t("code",["String"]),"，",t("code",["Boolean"]),"为",t("code",["false"]),"或字符串时均表示校验未通过，",t("code",["String"]),"相当于定义了",t("code",["inputErrorMessage"]),"字段。此外，可以用",t("code",["inputPlaceholder"]),"字段来定义输入框的占位符。"])},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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open3"']),">"]),"点击打开 Message Box",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"]),".$prompt(",t("span",{staticClass:"hljs-string"},["'请输入邮箱'"]),", ",t("span",{staticClass:"hljs-string"},["'提示'"]),", {\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 ",t("span",{staticClass:"hljs-attr"},["inputPattern"]),": ",t("span",{staticClass:"hljs-regexp"},["/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/"]),",\n ",t("span",{staticClass:"hljs-attr"},["inputErrorMessage"]),": ",t("span",{staticClass:"hljs-string"},["'邮箱格式不正确'"]),"\n }).then(",t("span",{staticClass:"hljs-function"},["(",t("span",{staticClass:"hljs-params"},["{ value }"]),") =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\n ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'success'"]),",\n ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'你的邮箱是: '"])," + value\n });\n }).catch(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["()"])," =>"])," {\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"},["'取消输入'"]),"\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:"zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","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",["$msgbox"]),"方法的再包装。本例直接调用",t("code",["$msgbox"]),"方法，使用了",t("code",["showCancelButton"]),"字段，用于显示取消按钮。另外可使用",t("code",["cancelButtonClass"]),"为其添加自定义样式，使用",t("code",["cancelButtonText"]),"来自定义按钮文本。Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表。"])},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-button"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open4"']),">"]),"点击打开 Message Box",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 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",["callback"]),t("td",["若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调"]),t("td",["function(action)，action 的值为'confirm'或'cancel'"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["lockScroll"]),t("td",["是否在 MessageBox 出现时将 body 滚动锁定"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["showCancelButton"]),t("td",["是否显示取消按钮"]),t("td",["boolean"]),t("td",["—"]),t("td",["false（以 confirm 和 prompt 方式调用时为 true）"])]),t("tr",[t("td",["showConfirmButton"]),t("td",["是否显示确定按钮"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["cancelButtonText"]),t("td",["取消按钮的文本内容"]),t("td",["string"]),t("td",["—"]),t("td",["取消"])]),t("tr",[t("td",["confirmButtonText"]),t("td",["确定按钮的文本内容"]),t("td",["string"]),t("td",["—"]),t("td",["确定"])]),t("tr",[t("td",["cancelButtonClass"]),t("td",["取消按钮的自定义类名"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["confirmButtonClass"]),t("td",["确定按钮的自定义类名"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["closeOnClickModal"]),t("td",["是否可通过点击遮罩关闭 MessageBox"]),t("td",["boolean"]),t("td",["—"]),t("td",["true（以 alert 方式调用时为 false）"])]),t("tr",[t("td",["closeOnPressEscape"]),t("td",["是否可通过按下 ESC 键关闭 MessageBox"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["showInput"]),t("td",["是否显示输入框"]),t("td",["boolean"]),t("td",["—"]),t("td",["false（以 prompt 方式调用时为 true）"])]),t("tr",[t("td",["inputPlaceholder"]),t("td",["输入框的占位符"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["inputPattern"]),t("td",["输入框的校验表达式"]),t("td",["regexp"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["inputValidator"]),t("td",["输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage"]),t("td",["function"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["inputErrorMessage"]),t("td",["校验未通过时的提示文本"]),t("td",["string"]),t("td",["—"]),t("td",["输入的数据不合法!"])])])])}]}},function(s,t,a){s.exports=a(355)},function(s,t,a){var n,e;n=a(356);var l=a(357);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("这是一条消息提示")},open2:function(){this.$message({message:"恭喜你，这是一条成功消息",type:"success"})},open3:function(){this.$message({message:"警告哦，这是一条警告消息",type:"warning"})},open4:function(){this.$message.error("错了哦，这是一条错误消息")},open5:function(){this.$message({showClose:!0,message:"这是一条消息提示"})},open6:function(){this.$message({showClose:!0,message:"恭喜你，这是一条成功消息",type:"success"})},open7:function(){this.$message({showClose:!0,message:"警告哦，这是一条警告消息",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"错了哦，这是一条错误消息",type:"error"})}}}},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-button :plain="true" @click="open">打开消息提示</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$message('这是一条消息提示');\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open}},["打开消息提示"])]]),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-button :plain="true" @click="open2">成功</el-button>\n <el-button :plain="true" @click="open3">警告</el-button>\n <el-button :plain="true" @click="open">消息</el-button>\n <el-button :plain="true" @click="open4">错误</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$message('这是一条消息提示');\n },\n open2() {\n this.$message({\n message: '恭喜你，这是一条成功消息',\n type: 'success'\n });\n },\n\n open3() {\n this.$message({\n message: '警告哦，这是一条警告消息',\n type: 'warning'\n });\n },\n\n open4() {\n this.$message.error('错了哦，这是一条错误消息');\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open2}},["成功"]),t("el-button",{attrs:{plain:!0},on:{click:s.open3}},["警告"]),t("el-button",{attrs:{plain:!0},on:{click:s.open}},["消息"]),t("el-button",{attrs:{plain:!0},on:{click:s.open4}},["错误"])]]),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-button :plain="true" @click="open5">消息</el-button>\n <el-button :plain="true" @click="open6">成功</el-button>\n <el-button :plain="true" @click="open7">警告</el-button>\n <el-button :plain="true" @click="open8">错误</el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open5() {\n this.$message({\n showClose: true,\n message: '恭喜你，这是一条成功消息'\n });\n },\n\n open6() {\n this.$message({\n showClose: true,\n message: '警告哦，这是一条警告消息',\n type: 'warning'\n });\n },\n\n open7() {\n this.$message({\n showClose: true,\n message: '错了哦，这是一条错误消息',\n type: 'error'\n });\n },\n\n open8() {\n this.$message({\n showClose: true,\n message: '错了哦，这是一条错误消息',\n type: 'error'\n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{plain:!0},on:{click:s.open5}},["消息"]),t("el-button",{attrs:{plain:!0},on:{click:s.open6}},["成功"]),t("el-button",{attrs:{plain:!0},on:{click:s.open7}},["警告"]),t("el-button",{attrs:{plain:!0},on:{click:s.open8}},["错误"])]]),s._m(12),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(13)])]),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"message-xiao-xi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message-xiao-xi-ti-shi","aria-hidden":"true"}},["¶"])," Message 消息提示"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。"])},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",["从顶部出现，3 秒后自动消失。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个",t("code",["$message"]),"方法用于调用，Message 可以接收一个字符串作为参数，它会被显示为正文内容。"])},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-button"])," ",t("span",{staticClass:"hljs-attr"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open"']),">"]),"打开消息提示",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 open() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message(",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:"bu-tong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-zhuang-tai","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",["当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置",t("code",["type"]),"字段可以定义不同的状态，默认为",t("code",["info"]),"。此时正文内容以",t("code",["message"]),"的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入",t("code",["type"]),"字段的情况下像",t("code",["open4"]),"那样直接调用。"])},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-button"])," ",t("span",{staticClass:"hljs-attr"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open2"']),">"]),"成功",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open3"']),">"]),"警告",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open"']),">"]),"消息",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open4"']),">"]),"错误",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 open() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message(",t("span",{staticClass:"hljs-string"},["'这是一条消息提示'"]),");\n },\n open2() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\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 open3() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\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 open4() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message.error(",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:"ke-guan-bi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-guan-bi","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",["默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用",t("code",["showClose"]),"字段。此外，和 Notification 一样，Message 拥有可控的",t("code",["duration"]),"，设置",t("code",["0"]),"为不会被自动关闭，默认为 3000 毫秒。"])},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-button"])," ",t("span",{staticClass:"hljs-attr"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open5"']),">"]),"消息",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open6"']),">"]),"成功",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open7"']),">"]),"警告",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"},[":plain"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open8"']),">"]),"错误",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 open5() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\n ",t("span",{staticClass:"hljs-attr"},["showClose"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),",\n ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'恭喜你，这是一条成功消息'"]),"\n });\n },\n\n open6() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\n ",t("span",{staticClass:"hljs-attr"},["showClose"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),",\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 open7() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\n ",t("span",{staticClass:"hljs-attr"},["showClose"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),",\n ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'错了哦，这是一条错误消息'"]),",\n ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'error'"]),"\n });\n },\n\n open8() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$message({\n ",t("span",{staticClass:"hljs-attr"},["showClose"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),",\n ",t("span",{staticClass:"hljs-attr"},["message"]),": ",t("span",{staticClass:"hljs-string"},["'错了哦，这是一条错误消息'"]),",\n ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'error'"]),"\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 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 ",t("code",["Message"]),"。"])},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",["Message"]),"："])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},["import"])," { Message } ",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",["此时调用方法为 ",t("code",["Message(options)"]),"。我们也为每个 type 定义了各自的方法，如 ",t("code",["Message.success(options)"]),"。"])},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",["message"]),t("td",["消息文字"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["type"]),t("td",["主题"]),t("td",["string"]),t("td",["success/warning/info/error"]),t("td",["info"])]),t("tr",[t("td",["iconClass"]),t("td",["自定义图标的类名，会覆盖 ",t("code",["type"])]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["customClass"]),t("td",["自定义类名"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["duration"]),t("td",["显示时间, 毫秒。设为 0 则不会自动关闭"]),t("td",["number"]),t("td",["—"]),t("td",["3000"])]),t("tr",[t("td",["showClose"]),t("td",["是否显示关闭按钮"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["onClose"]),t("td",["关闭时的回调函数, 参数为被关闭的 message 实例"]),t("td",["function"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},["¶"])," 方法"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["调用 ",t("code",["Message"])," 或 ",t("code",["this.$message"])," 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 ",t("code",["close"])," 方法。"])},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",["close"]),t("td",["关闭当前的 Message"])])])])}]}},function(s,t,a){s.exports=a(359)},function(s,t,a){var n,e;n=a(360);var l=a(361);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.$notify({title:"标题名称",message:"这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案"})},open2:function(){this.$notify({title:"提示",message:"这是一条不会自动关闭的消息",duration:0})},open3:function(){this.$notify({title:"成功",message:"这是一条成功的提示消息",type:"success"})},open4:function(){this.$notify({title:"警告",message:"这是一条警告的提示消息",type:"warning"})},open5:function(){this.$notify.info({title:"消息",message:"这是一条消息的提示消息"})},open6:function(){this.$notify.error({title:"错误",message:"这是一条错误的提示消息"})},open7:function(){this.$notify.success({title:"成功",message:"这是一条成功的提示消息",offset:100})},onClose:function(){console.log("Notification 已关闭")}}}},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-button plain @click="open">\n 可自动关闭\n </el-button>\n <el-button plain @click="open2">\n 不会自动关闭\n </el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open() {\n this.$notify({\n title: '标题名称',\n message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'\n });\n },\n\n open2() {\n this.$notify({\n title: '提示',\n message: '这是一条不会自动关闭的消息',\n duration: 0\n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open}},["\n 可自动关闭\n "]),t("el-button",{attrs:{plain:""},on:{click:s.open2}},["\n 不会自动关闭\n "])]]),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-button plain @click="open3">\n 成功\n </el-button>\n <el-button plain @click="open4">\n 警告\n </el-button>\n <el-button plain @click="open5">\n 消息\n </el-button>\n <el-button plain @click="open6">\n 错误\n </el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open3() {\n this.$notify({\n title: '成功',\n message: '这是一条成功的提示消息',\n type: 'success'\n });\n },\n\n open4() {\n this.$notify({\n title: '警告',\n message: '这是一条警告的提示消息',\n type: 'warning'\n });\n },\n\n open5() {\n this.$notify.info({\n title: '消息',\n message: '这是一条消息的提示消息'\n });\n },\n\n open6() {\n this.$notify.error({\n title: '错误',\n message: '这是一条错误的提示消息'\n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open3}},["\n 成功\n "]),t("el-button",{attrs:{plain:""},on:{click:s.open4}},["\n 警告\n "]),t("el-button",{attrs:{plain:""},on:{click:s.open5}},["\n 消息\n "]),t("el-button",{attrs:{plain:""},on:{click:s.open6}},["\n 错误\n "])]]),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-button plain @click="open7">\n 偏移的消息\n </el-button>\n</template>\n\n\n',script:"\n export default {\n methods: {\n open7() {\n this.$notify.success({\n title: '成功',\n message: '这是一条成功的提示消息',\n offset: 100\n });\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-button",{attrs:{plain:""},on:{click:s.open7}},["\n 偏移的消息\n "])]]),s._m(12),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(13)])]),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"notification-tong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification-tong-zhi","aria-hidden":"true"}},["¶"])," Notification 通知"])},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-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-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",["Notification 组件提供通知功能，Element 注册了",t("code",["$notify"]),"方法，接收一个",t("code",["options"]),"字面量参数，在最简单的情况下，你可以设置",t("code",["title"]),"字段和",t("code",["message"]),"字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置",t("code",["duration"]),"，可以控制关闭的时间间隔，特别的是，如果设置为",t("code",["0"]),"，则不会自动关闭。注意：",t("code",["duration"]),"接收一个",t("code",["Number"]),"，单位为毫秒，默认为",t("code",["4500"]),"。"])},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-button"]),"\n ",t("span",{staticClass:"hljs-attr"},["plain"]),"\n ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open"']),">"]),"\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"},['"open2"']),">"]),"\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 open() {\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 });\n },\n\n open2() {\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"},["duration"]),": ",t("span",{staticClass:"hljs-number"},["0"]),"\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-qing-xiang-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-qing-xiang-xing","aria-hidden":"true"}},["¶"])," 带有倾向性"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Element 为 Notification 组件准备了四种通知类型：",t("code",["success"]),", ",t("code",["warning"]),", ",t("code",["info"]),", ",t("code",["error"]),"。通过",t("code",["type"]),"字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入",t("code",["type"]),"字段的情况下像",t("code",["open5"]),"和",t("code",["open6"]),"那样直接调用。"])},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-button"]),"\n ",t("span",{staticClass:"hljs-attr"},["plain"]),"\n ",t("span",{
|
||
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"])," 字段，可以使弹出的消息距屏幕顶部偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。"])},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-button"]),"\n ",t("span",{staticClass:"hljs-attr"},["plain"]),"\n ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"open7"']),">"]),"\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 open7() {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".$notify.success({\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"},["offset"]),": ",t("span",{staticClass:"hljs-number"},["100"]),"\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 为 ",t("code",["Vue.prototype"])," 添加了全局方法 ",t("code",["$notify"]),"。因此在 vue instance 中可以采用本页面中的方式调用 Notification。"])},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",["单独引入 Notification："])},function(){var s=this,t=s.$createElement;s._c;return t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},["import"])," { Notification } ",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",["此时调用方法为 ",t("code",["Notification(options)"]),"。我们也为每个 type 定义了各自的方法，如 ",t("code",["Notification.success(options)"]),"。"])},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",["标题"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["message"]),t("td",["说明文字"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["type"]),t("td",["主题样式，如果不在可选值内将被忽略"]),t("td",["string"]),t("td",["success/warning/info/error"]),t("td",["—"])]),t("tr",[t("td",["iconClass"]),t("td",["自定义图标的类名。若设置了 ",t("code",["type"]),"，则 ",t("code",["iconClass"])," 会被覆盖"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["customClass"]),t("td",["自定义类名"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["duration"]),t("td",["显示时间, 毫秒。设为 0 则不会自动关闭"]),t("td",["number"]),t("td",["—"]),t("td",["4500"])]),t("tr",[t("td",["onClose"]),t("td",["关闭时的回调函数"]),t("td",["function"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["offset"]),t("td",["偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量"]),t("td",["number"]),t("td",["—"]),t("td",["0"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},["¶"])," 方法"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["调用 ",t("code",["Notification"])," 或 ",t("code",["this.$notify"])," 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 ",t("code",["close"])," 方法。"])},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",["close"]),t("td",["关闭当前的 Notification"])])])])}]}},function(s,t,a){s.exports=a(363)},function(s,t,a){var n,e;a(364),n=a(366);var l=a(367);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";t.__esModule=!0;var n=a(67);t.default={methods:{handleSizeChange:function(s){this.currentPage=s,console.log("每页 "+s+" 条")},handleCurrentChange:function(s){console.log("当前页: "+s)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[0],a=s[s.length-1];(0,n.addClass)(t,"first"),(0,n.addClass)(a,"last")})}}},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">页数较少时的效果</span>\n <el-pagination layout="prev, pager, next" :total="50">\n </el-pagination>\n</div>\n<div class="block">\n <span class="demonstration">大于 7 页时的效果</span>\n <el-pagination layout="prev, pager, next" :total="1000">\n </el-pagination>\n </div>\n\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("div",{staticClass:"block"},[s._m(3),t("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})]),t("div",{staticClass:"block"},[s._m(4),t("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})])]),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-pagination small layout="prev, pager, next" :total="50">\n</el-pagination>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})]),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:'<template>\n <div class="block">\n <span class="demonstration">显示总数</span>\n <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">调整每页显示条数</span>\n <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage2" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="sizes, prev, pager, next" :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">直接前往</span>\n <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage3" :page-size="100" layout="prev, pager, next, jumper" :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">完整功能</span>\n <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">\n </el-pagination>\n </div>\n</template>\n\n',script:"\n export default {\n methods: {\n handleSizeChange(val) {\n console.log(`每页 ${val} 条`);\n },\n handleCurrentChange(val) {\n this.currentPage = val;\n console.log(`当前页: ${val}`);\n }\n },\n data() {\n return {\n currentPage1: 5,\n currentPage2: 5,\n currentPage3: 5,\n currentPage4: 4\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("div",{staticClass:"block"},[s._m(13),t("el-pagination",{attrs:{"current-page":s.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})]),t("div",{staticClass:"block"},[s._m(14),t("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})]),t("div",{staticClass:"block"},[s._m(15),t("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})]),t("div",{staticClass:"block"},[s._m(16),t("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})])]]),s._m(17),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(18)])]),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"pagination-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination-fen-ye","aria-hidden":"true"}},["¶"])," Pagination 分页"])},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"},["大于 7 页时的效果"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["设置",t("code",["layout"]),"，表示需要显示的内容，用逗号分隔，布局元素会依次显示。",t("code",["prev"]),"表示上一页，",t("code",["next"]),"为上一页，",t("code",["pager"]),"表示页码列表，除此以外还提供了",t("code",["jumper"]),"和",t("code",["total"]),"，",t("code",["size"]),"和特殊的布局符号",t("code",["->"]),"，",t("code",["->"]),"后的元素会靠右显示，",t("code",["jumper"]),"表示跳页元素，",t("code",["total"]),"表示显示页码总数，",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"},["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-pagination"]),"\n ",t("span",{staticClass:"hljs-attr"},["layout"]),"=",t("span",{staticClass:"hljs-string"},['"prev, pager, next"']),"\n ",t("span",{staticClass:"hljs-attr"},[":total"]),"=",t("span",{staticClass:"hljs-string"},['"50"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-pagination"]),">"]),"\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"']),">"]),"大于 7 页时的效果",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-pagination"]),"\n ",t("span",{staticClass:"hljs-attr"},["layout"]),"=",t("span",{staticClass:"hljs-string"},['"prev, pager, next"']),"\n ",t("span",{staticClass:"hljs-attr"},[":total"]),"=",t("span",{staticClass:"hljs-string"},['"1000"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-pagination"]),">"]),"\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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"xiao-xing-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xing-fen-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("p",["只需要一个",t("code",["small"]),"属性，它接受一个",t("code",["Boolean"]),"，默认为",t("code",["false"]),"，设为",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-pagination"]),"\n ",t("span",{staticClass:"hljs-attr"},["small"]),"\n ",t("span",{staticClass:"hljs-attr"},["layout"]),"=",t("span",{staticClass:"hljs-string"},['"prev, pager, next"']),"\n ",t("span",{staticClass:"hljs-attr"},[":total"]),"=",t("span",{staticClass:"hljs-string"},['"50"']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-pagination"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"fu-jia-gong-neng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-jia-gong-neng","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("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",["size-change"]),"和",t("code",["current-change"]),"事件来处理页码大小和当前页变动时候触发的事件。",t("code",["page-sizes"]),"接受一个整型数组，数组元素为展示的选择每页显示个数的选项，",t("code",["[100, 200, 300, 400]"]),"表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。"])},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-pagination"]),"\n ",t("span",{staticClass:"hljs-attr"},["@size-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleSizeChange"']),"\n ",t("span",{staticClass:"hljs-attr"},["@current-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleCurrentChange"']),"\n ",t("span",{staticClass:"hljs-attr"},[":current-page"]),"=",t("span",{staticClass:"hljs-string"},['"currentPage1"']),"\n ",t("span",{staticClass:"hljs-attr"},[":page-size"]),"=",t("span",{staticClass:"hljs-string"},['"100"']),"\n ",t("span",{staticClass:"hljs-attr"},["layout"]),"=",t("span",{staticClass:"hljs-string"},['"total, prev, pager, next"']),"\n ",t("span",{staticClass:"hljs-attr"},[":total"]),"=",t("span",{staticClass:"hljs-string"},['"1000"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-pagination"]),">"]),"\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-pagination"]),"\n ",t("span",{staticClass:"hljs-attr"},["@size-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleSizeChange"']),"\n ",t("span",{staticClass:"hljs-attr"},["@current-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleCurrentChange"']),"\n ",t("span",{staticClass:"hljs-attr"},[":current-page"]),"=",t("span",{staticClass:"hljs-string"},['"currentPage2"']),"\n ",t("span",{staticClass:"hljs-attr"},[":page-sizes"]),"=",t("span",{staticClass:"hljs-string"},['"[100, 200, 300, 400]"']),"\n ",t("span",{staticClass:"hljs-attr"},[":page-size"]),"=",t("span",{staticClass:"hljs-string"},['"100"']),"\n ",t("span",{staticClass:"hljs-attr"},["layout"]),"=",t("span",{staticClass:"hljs-string"},['"sizes, prev, pager, next"']),"\n ",t("span",{staticClass:"hljs-attr"},[":total"]),"=",t("span",{staticClass:"hljs-string"},['"1000"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-pagination"]),">"]),"\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-pagination"]),"\n ",t("span",{staticClass:"hljs-attr"},["@size-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleSizeChange"']),"\n ",t("span",{staticClass:"hljs-attr"},["@current-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleCurrentChange"']),"\n ",t("span",{staticClass:"hljs-attr"},[":current-page"]),"=",t("span",{staticClass:"hljs-string"},['"currentPage3"']),"\n ",t("span",{staticClass:"hljs-attr"},[":page-size"]),"=",t("span",{staticClass:"hljs-string"},['"100"']),"\n ",t("span",{staticClass:"hljs-attr"},["layout"]),"=",t("span",{staticClass:"hljs-string"},['"prev, pager, next, jumper"']),"\n ",t("span",{staticClass:"hljs-attr"},[":total"]),"=",t("span",{staticClass:"hljs-string"},['"1000"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-pagination"]),">"]),"\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-pagination"]),"\n ",t("span",{staticClass:"hljs-attr"},["@size-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleSizeChange"']),"\n ",t("span",{staticClass:"hljs-attr"},["@current-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleCurrentChange"']),"\n ",t("span",{staticClass:"hljs-attr"},[":current-page"]),"=",t("span",{staticClass:"hljs-string"},['"currentPage4"']),"\n ",t("span",{staticClass:"hljs-attr"},[":page-sizes"]),"=",t("span",{staticClass:"hljs-string"},['"[100, 200, 300, 400]"']),"\n ",t("span",{staticClass:"hljs-attr"},[":page-size"]),"=",t("span",{staticClass:"hljs-string"},['"100"']),"\n ",t("span",{staticClass:"hljs-attr"},["layout"]),"=",t("span",{staticClass:"hljs-string"},['"total, sizes, prev, pager, next, jumper"']),"\n ",t("span",{staticClass:"hljs-attr"},[":total"]),"=",t("span",{staticClass:"hljs-string"},['"400"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-pagination"]),">"]),"\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",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 handleSizeChange(val) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(",t("span",{staticClass:"hljs-string"},["`每页 ",t("span",{staticClass:"hljs-subst"},["${val}"])," 条`"]),");\n },\n handleCurrentChange(val) {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".currentPage = val;\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(",t("span",{staticClass:"hljs-string"},["`当前页: ",t("span",{staticClass:"hljs-subst"},["${val}"]),"`"]),");\n }\n },\n data() {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n ",t("span",{staticClass:"hljs-attr"},["currentPage1"]),": ",t("span",{staticClass:"hljs-number"},["5"]),",\n ",t("span",{staticClass:"hljs-attr"},["currentPage2"]),": ",t("span",{staticClass:"hljs-number"},["5"]),",\n ",t("span",{staticClass:"hljs-attr"},["currentPage3"]),": ",t("span",{staticClass:"hljs-number"},["5"]),",\n ",t("span",{staticClass:"hljs-attr"},["currentPage4"]),": ",t("span",{staticClass:"hljs-number"},["4"]),"\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",["small"]),t("td",["是否使用小型分页样式"]),t("td",["Boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["page-size"]),t("td",["每页显示条目个数"]),t("td",["Number"]),t("td",["—"]),t("td",["10"])]),t("tr",[t("td",["total"]),t("td",["总条目数"]),t("td",["Number"]),t("td",["—"]),t("td",["-"])]),t("tr",[t("td",["page-count"]),t("td",["总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性"]),t("td",["Number"]),t("td",["—"]),t("td",["-"])]),t("tr",[t("td",["current-page"]),t("td",["当前页数"]),t("td",["Number"]),t("td",["—"]),t("td",["1"])]),t("tr",[t("td",["layout"]),t("td",["组件布局，子组件名用逗号分隔"]),t("td",["String"]),t("td",[t("code",["sizes"]),", ",t("code",["prev"]),", ",t("code",["pager"]),", ",t("code",["next"]),", ",t("code",["jumper"]),", ",t("code",["->"]),", ",t("code",["total"]),", ",t("code",["slot"])]),t("td",["'prev, pager, next, jumper, ->, total'"])]),t("tr",[t("td",["page-sizes"]),t("td",["每页显示个数选择器的选项设置"]),t("td",["Number[]"]),t("td",["—"]),t("td",["[10, 20, 30, 40, 50, 100]"])])])])},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",["事件名称"]),t("th",["说明"]),t("th",["回调参数"])])]),t("tbody",[t("tr",[t("td",["size-change"]),t("td",["pageSize 改变时会触发"]),t("td",["每页条数",t("code",["size"])])]),t("tr",[t("td",["current-change"]),t("td",["currentPage 改变时会触发"]),t("td",["当前页",t("code",["currentPage"])])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},["¶"])," Slot"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["name"]),t("th",["说明"])])]),t("tbody",[t("tr",[t("td",["—"]),t("td",["自定义内容，需要在 ",t("code",["layout"])," 中列出 ",t("code",["slot"])])])])])}]}},function(s,t,a){s.exports=a(369)},function(s,t,a){var n,e;a(370),n=a(372);var l=a(373);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{visible2:!1,gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],gridData2:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$info:!0},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$positive:!0}],gridData3:[{tag:"家",date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"家",date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-08",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"家",date:"2016-05-06",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-07",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],singleSelection:{},multipleSelection:[],model:""}},watch:{singleSelection:function(s){console.log("selection: ",s)},multipleSelection:function(s){console.log("selection: ",s)}},events:{handleClick:function(s){console.log("you clicked ",s)}}}},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="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n</el-popover>\n\n<el-popover ref="popover2" placement="bottom" title="标题" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n</el-popover>\n\n<el-button v-popover:popover1>hover 激活</el-button>\n<el-button v-popover:popover2>click 激活</el-button>\n<el-popover placement="right" title="标题" width="200" trigger="focus" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n <el-button slot="reference">focus 激活</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:"标题",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:"highlight"},[s._m(12)])]),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"popover-dan-chu-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover-dan-chu-kuang","aria-hidden":"true"}},["¶"])," Popover 弹出框"])},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",["Popover 的属性与 Tooltip 很类似，它们都是基于",t("code",["Vue-popper"]),"开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["设置索引",t("code",["ref"]),"，在按钮中，我们注册了自定义指令",t("code",["v-popover"]),"，指向索引ID。",t("code",["trigger"]),"属性用于设置何时触发 Popover ，提供三种触发方式：",t("code",["hover"]),", ",t("code",["click"])," 和 ",t("code",["focus"]),"。第二种用法通过 ",t("code",["slot"])," 指定 reference。"])},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-popover"]),"\n ",t("span",{staticClass:"hljs-attr"},["ref"]),"=",t("span",{staticClass:"hljs-string"},['"popover1"']),"\n ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"top-start"']),"\n ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"标题"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"200"']),"\n ",t("span",{staticClass:"hljs-attr"},["trigger"]),"=",t("span",{staticClass:"hljs-string"},['"hover"']),"\n ",t("span",{staticClass:"hljs-attr"},["content"]),"=",t("span",{staticClass:"hljs-string"},['"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-popover"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-popover"]),"\n ",t("span",{staticClass:"hljs-attr"},["ref"]),"=",t("span",{staticClass:"hljs-string"},['"popover2"']),"\n ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"bottom"']),"\n ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"标题"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"200"']),"\n ",t("span",{staticClass:"hljs-attr"},["trigger"]),"=",t("span",{staticClass:"hljs-string"},['"click"']),"\n ",t("span",{staticClass:"hljs-attr"},["content"]),"=",t("span",{staticClass:"hljs-string"},['"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-popover"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["v-popover:popover1"]),">"]),"hover 激活",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"},["v-popover:popover2"]),">"]),"click 激活",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-popover"]),"\n ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),"\n ",t("span",{staticClass:"hljs-attr"},["title"]),"=",t("span",{staticClass:"hljs-string"},['"标题"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"200"']),"\n ",t("span",{staticClass:"hljs-attr"},["trigger"]),"=",t("span",{staticClass:"hljs-string"},['"focus"']),"\n ",t("span",{staticClass:"hljs-attr"},["content"]),"=",t("span",{staticClass:"hljs-string"},['"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"reference"']),">"]),"focus 激活",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-popover"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"qian-tao-xin-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-xin-xi","aria-hidden":"true"}},["¶"])," 嵌套信息"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["利用分发取代",t("code",["content"]),"属性"])},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-popover"]),"\n ",t("span",{staticClass:"hljs-attr"},["ref"]),"=",t("span",{staticClass:"hljs-string"},['"popover4"']),"\n ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"400"']),"\n ",t("span",{staticClass:"hljs-attr"},["trigger"]),"=",t("span",{staticClass:"hljs-string"},['"click"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table"])," ",t("span",{staticClass:"hljs-attr"},[":data"]),"=",t("span",{staticClass:"hljs-string"},['"gridData"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-table-column"])," ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"150"'])," ",t("span",{staticClass:"hljs-attr"},["property"]),"=",t("span",{staticClass:"hljs-string"},['"date"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"日期"']),">"]),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"])," ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"100"'])," ",t("span",{staticClass:"hljs-attr"},["property"]),"=",t("span",{staticClass:"hljs-string"},['"name"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"姓名"']),">"]),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"])," ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"300"'])," ",t("span",{staticClass:"hljs-attr"},["property"]),"=",t("span",{staticClass:"hljs-string"},['"address"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"地址"']),">"]),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"},["el-popover"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["v-popover:popover4"]),">"]),"click 激活",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"},["gridData"]),": [{\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"},["'上海市普陀区金沙江路 1518 弄'"]),"\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"},["'上海市普陀区金沙江路 1518 弄'"]),"\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"},["'上海市普陀区金沙江路 1518 弄'"]),"\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:"qian-tao-cao-zuo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-cao-zuo","aria-hidden":"true"}},["¶"])," 嵌套操作"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["当然，你还可以嵌套操作，这相比 Dialog 更为轻量："])},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-popover"]),"\n ",t("span",{staticClass:"hljs-attr"},["ref"]),"=",t("span",{staticClass:"hljs-string"},['"popover5"']),"\n ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"top"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"160"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"visible2"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["p"]),">"]),"这是一段内容这是一段内容确定删除吗？",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["p"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"text-align: right; margin: 0"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"mini"'])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"visible2 = false"']),">"]),"取消",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"},['"mini"'])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"visible2 = false"']),">"]),"确定",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-popover"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["v-popover:popover5"]),">"]),"删除",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"},["visible2"]),": ",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:"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",["trigger"]),t("td",["触发方式"]),t("td",["String"]),t("td",["click/focus/hover/manual"]),t("td",["click"])]),t("tr",[t("td",["title"]),t("td",["标题"]),t("td",["String"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["content"]),t("td",["显示的内容，也可以通过 ",t("code",["slot"])," 传入 DOM"]),t("td",["String"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["width"]),t("td",["宽度"]),t("td",["String, Number"]),t("td",["—"]),t("td",["最小宽度 150px"])]),t("tr",[t("td",["placement"]),t("td",["出现位置"]),t("td",["String"]),t("td",["top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end"]),t("td",["bottom"])]),t("tr",[t("td",["value(v-model)"]),t("td",["状态是否可见"]),t("td",["Boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["offset"]),t("td",["出现位置的偏移量"]),t("td",["Number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["transition"]),t("td",["定义渐变动画"]),t("td",["String"]),t("td",["—"]),t("td",["fade-in-linear"])]),t("tr",[t("td",["visible-arrow"]),t("td",["是否显示 Tooltip 箭头，更多参数可见",t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},["Vue-popper"])]),t("td",["Boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["options"]),t("td",[t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},["popper.js"])," 的参数"]),t("td",["Object"]),t("td",["参考 ",t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},["popper.js"])," 文档"]),t("td",[t("code",["{ boundariesElement: 'body', gpuAcceleration: false }"])])]),t("tr",[t("td",["popper-class"]),t("td",["为 popper 添加类名"]),t("td",["String"]),t("td",["-"]),t("td",["-"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},["¶"])," Slot"])},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",["—"]),t("td",["Popover 内嵌 HTML 文本"])]),t("tr",[t("td",["reference"]),t("td",["触发 Popover 显示的 HTML 元素"])])])])},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",["事件名称"]),t("th",["说明"]),t("th",["回调参数"])])]),t("tbody",[t("tr",[t("td",["show"]),t("td",["显示时触发"]),t("td",["—"])]),t("tr",[t("td",["hide"]),t("td",["隐藏时触发"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(375)},function(s,t,a){var n,e;a(376);var l=a(378);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),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress :percentage="0"></el-progress>\n<el-progress :percentage="70"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-progress",{attrs:{percentage:0}}),t("el-progress",{attrs:{percentage:70}}),t("el-progress",{attrs:{percentage:100,status:"success"}}),t("el-progress",{attrs:{percentage:50,status:"exception"}})]),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-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})]),s._m(7),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(8)])]),s._m(9),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-progress",{attrs:{type:"circle",percentage:0}}),t("el-progress",{attrs:{type:"circle",percentage:25}}),t("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),t("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})]),s._m(10),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(11)])]),s._m(12),s._m(13)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"progress-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress-jin-du-tiao","aria-hidden":"true"}},["¶"])," Progress 进度条"])},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:"xian-xing-jin-du-tiao-bai-fen-bi-wai-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-wai-xian","aria-hidden":"true"}},["¶"])," 线形进度条 — 百分比外显"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Progress 组件设置",t("code",["percentage"]),"属性即可，表示进度条对应的百分比，",t("strong",["必填"]),"，必须在 0-100。"])},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-progress"])," ",t("span",{staticClass:"hljs-attr"},[":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"},[":percentage"]),"=",t("span",{staticClass:"hljs-string"},['"70"']),">"]),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"},[":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"},[":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:"xian-xing-jin-du-tiao-bai-fen-bi-nei-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-nei-xian","aria-hidden":"true"}},["¶"])," 线形进度条 — 百分比内显"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["百分比不占用额外控件，适用于文件上传等场景。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Progress 组件可通过 ",t("code",["stroke-width"])," 属性更改进度条的高度，并可通过 ",t("code",["text-inside"])," 属性来将进度条描述置于进度条内部。"])},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-progress"])," ",t("span",{staticClass:"hljs-attr"},[":text-inside"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},[":stroke-width"]),"=",t("span",{staticClass:"hljs-string"},['"18"'])," ",t("span",{staticClass:"hljs-attr"},[":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"},[":text-inside"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},[":stroke-width"]),"=",t("span",{staticClass:"hljs-string"},['"18"'])," ",t("span",{staticClass:"hljs-attr"},[":percentage"]),"=",t("span",{staticClass:"hljs-string"},['"70"']),">"]),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"},[":text-inside"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},[":stroke-width"]),"=",t("span",{staticClass:"hljs-string"},['"18"'])," ",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"},[":text-inside"]),"=",t("span",{staticClass:"hljs-string"},['"true"'])," ",t("span",{staticClass:"hljs-attr"},[":stroke-width"]),"=",t("span",{staticClass:"hljs-string"},['"18"'])," ",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:"huan-xing-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#huan-xing-jin-du-tiao","aria-hidden":"true"}},["¶"])," 环形进度条"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Progress 组件可通过 ",t("code",["type"])," 属性来指定使用环形进度条，在环形进度条中，还可以通过 ",t("code",["width"])," 属性来设置其大小。"])},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-progress"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"circle"'])," ",t("span",{staticClass:"hljs-attr"},[":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",["参数"]),t("th",["说明"]),t("th",["类型"]),t("th",["可选值"]),t("th",["默认值"])])]),t("tbody",[t("tr",[t("td",[t("strong",["percentage"])]),t("td",[t("strong",["百分比（必填）"])]),t("td",["number"]),t("td",["0-100"]),t("td",["0"])]),t("tr",[t("td",["type"]),t("td",["进度条类型"]),t("td",["string"]),t("td",["line/circle"]),t("td",["line"])]),t("tr",[t("td",["stroke-width"]),t("td",["进度条的宽度，单位 px"]),t("td",["number"]),t("td",["—"]),t("td",["6"])]),t("tr",[t("td",["text-inside"]),t("td",["进度条显示文字内置在进度条内（只在 type=line 时可用）"]),t("td",["Boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["status"]),t("td",["进度条当前状态"]),t("td",["string"]),t("td",["success/exception"]),t("td",["—"])]),t("tr",[t("td",["width"]),t("td",["环形进度条画布宽度（只在 type=circle 时可用）"]),t("td",["number"]),t("td"),t("td",["126"])]),t("tr",[t("td",["show-text"]),t("td",["是否显示进度条文字内容"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])])])])}]}},function(s,t,a){s.exports=a(380)},function(s,t,a){var n,e,l=a(381);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:"kuai-su-shang-shou"
|
||
}},[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"']),"\n }\n}\n"])]),t("br"),t("p",[t("strong",["webpack.config.js"])]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[t("span",{staticClass:"hljs-keyword"},["var"])," path = ",t("span",{staticClass:"hljs-built_in"},["require"]),"(",t("span",{staticClass:"hljs-string"},["'path'"]),")\n",t("span",{staticClass:"hljs-keyword"},["var"])," webpack = ",t("span",{staticClass:"hljs-built_in"},["require"]),"(",t("span",{staticClass:"hljs-string"},["'webpack'"]),")\n\n",t("span",{staticClass:"hljs-built_in"},["module"]),".exports = {\n ",t("span",{staticClass:"hljs-attr"},["entry"]),": ",t("span",{staticClass:"hljs-string"},["'./src/main.js'"]),",\n ",t("span",{staticClass:"hljs-attr"},["output"]),": {\n ",t("span",{staticClass:"hljs-attr"},["path"]),": path.resolve(__dirname, ",t("span",{staticClass:"hljs-string"},["'./dist'"]),"),\n ",t("span",{staticClass:"hljs-attr"},["publicPath"]),": ",t("span",{staticClass:"hljs-string"},["'/dist/'"]),",\n ",t("span",{staticClass:"hljs-attr"},["filename"]),": ",t("span",{staticClass:"hljs-string"},["'build.js'"]),"\n },\n ",t("span",{staticClass:"hljs-attr"},["module"]),": {\n ",t("span",{staticClass:"hljs-attr"},["loaders"]),": [\n {\n ",t("span",{staticClass:"hljs-attr"},["test"]),": ",t("span",{staticClass:"hljs-regexp"},["/\\.vue$/"]),",\n ",t("span",{staticClass:"hljs-attr"},["loader"]),": ",t("span",{staticClass:"hljs-string"},["'vue-loader'"]),"\n },\n {\n ",t("span",{staticClass:"hljs-attr"},["test"]),": ",t("span",{staticClass:"hljs-regexp"},["/\\.js$/"]),",\n ",t("span",{staticClass:"hljs-attr"},["loader"]),": ",t("span",{staticClass:"hljs-string"},["'babel-loader'"]),",\n ",t("span",{staticClass:"hljs-attr"},["exclude"]),": ",t("span",{staticClass:"hljs-regexp"},["/node_modules/"]),"\n },\n {\n ",t("span",{staticClass:"hljs-attr"},["test"]),": ",t("span",{staticClass:"hljs-regexp"},["/\\.css$/"]),",\n ",t("span",{staticClass:"hljs-attr"},["loader"]),": ",t("span",{staticClass:"hljs-string"},["'style-loader!css-loader'"]),"\n },\n {\n ",t("span",{staticClass:"hljs-attr"},["test"]),": ",t("span",{staticClass:"hljs-regexp"},["/\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/"]),",\n ",t("span",{staticClass:"hljs-attr"},["loader"]),": ",t("span",{staticClass:"hljs-string"},["'file-loader'"]),"\n },\n {\n ",t("span",{staticClass:"hljs-attr"},["test"]),": ",t("span",{staticClass:"hljs-regexp"},["/\\.(png|jpe?g|gif|svg)(\\?\\S*)?$/"]),",\n ",t("span",{staticClass:"hljs-attr"},["loader"]),": ",t("span",{staticClass:"hljs-string"},["'file-loader'"]),",\n ",t("span",{staticClass:"hljs-attr"},["query"]),": {\n ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'[name].[ext]?[hash]'"]),"\n }\n }\n ]\n },\n ",t("span",{staticClass:"hljs-attr"},["devServer"]),": {\n ",t("span",{staticClass:"hljs-attr"},["historyApiFallback"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),",\n ",t("span",{staticClass:"hljs-attr"},["noInfo"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),"\n },\n ",t("span",{staticClass:"hljs-attr"},["devtool"]),": ",t("span",{staticClass:"hljs-string"},["'#eval-source-map'"]),"\n}\n\n",t("span",{staticClass:"hljs-keyword"},["if"])," (process.env.NODE_ENV === ",t("span",{staticClass:"hljs-string"},["'production'"]),") {\n ",t("span",{staticClass:"hljs-built_in"},["module"]),".exports.devtool = ",t("span",{staticClass:"hljs-string"},["'#source-map'"]),"\n ",t("span",{staticClass:"hljs-comment"},["// http://vue-loader.vuejs.org/en/workflow/production.html"]),"\n ",t("span",{staticClass:"hljs-built_in"},["module"]),".exports.plugins = (",t("span",{staticClass:"hljs-built_in"},["module"]),".exports.plugins || []).concat([\n ",t("span",{staticClass:"hljs-keyword"},["new"])," webpack.DefinePlugin({\n ",t("span",{staticClass:"hljs-string"},["'process.env'"]),": {\n ",t("span",{staticClass:"hljs-attr"},["NODE_ENV"]),": ",t("span",{staticClass:"hljs-string"},["'\"production\"'"]),"\n }\n }),\n ",t("span",{staticClass:"hljs-keyword"},["new"])," webpack.optimize.UglifyJsPlugin({\n ",t("span",{staticClass:"hljs-attr"},["compress"]),": {\n ",t("span",{staticClass:"hljs-attr"},["warnings"]),": ",t("span",{staticClass:"hljs-literal"},["false"]),"\n }\n })\n ])\n}\n"])]),t("h3",{attrs:{id:"yin-ru-element"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-element","aria-hidden":"true"}},["¶"])," 引入 Element"]),t("p",["你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。"]),t("h4",{attrs:{id:"wan-zheng-yin-ru"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wan-zheng-yin-ru","aria-hidden":"true"}},["¶"])," 完整引入"]),t("p",["在 main.js 中写入以下内容："]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[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"])," ",t("span",{staticClass:"hljs-string"},["'element-ui/lib/theme-default/index.css'"]),"\n",t("span",{staticClass:"hljs-keyword"},["import"])," App ",t("span",{staticClass:"hljs-keyword"},["from"])," ",t("span",{staticClass:"hljs-string"},["'./App.vue'"]),"\n\nVue.use(ElementUI)\n\n",t("span",{staticClass:"hljs-keyword"},["new"])," Vue({\n ",t("span",{staticClass:"hljs-attr"},["el"]),": ",t("span",{staticClass:"hljs-string"},["'#app'"]),",\n ",t("span",{staticClass:"hljs-attr"},["render"]),": ",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["h"])," =>"])," h(App)\n})\n"])]),t("p",["以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。"]),t("h4",{attrs:{id:"an-xu-yin-ru"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru","aria-hidden":"true"}},["¶"])," 按需引入"]),t("p",["借助 ",t("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},["babel-plugin-component"]),"，我们可以只引入需要的组件，以达到减小项目体积的目的。"]),t("p",["首先，安装 babel-plugin-component："]),t("pre",[t("code",{staticClass:"hljs language-bash"},["npm install babel-plugin-component -D\n"])]),t("p",["然后，将 .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 ",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-default"']),"\n }\n ]]]\n}\n"])]),t("p",["接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容："]),t("pre",[t("code",{staticClass:"hljs language-javascript"},[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"])," { Button, Select } ",t("span",{staticClass:"hljs-keyword"},["from"])," ",t("span",{staticClass:"hljs-string"},["'element-ui'"]),"\n",t("span",{staticClass:"hljs-keyword"},["import"])," App ",t("span",{staticClass:"hljs-keyword"},["from"])," ",t("span",{staticClass:"hljs-string"},["'./App.vue'"]),"\n\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n",t("span",{staticClass:"hljs-comment"},["/* 或写为\n * Vue.use(Button)\n * Vue.use(Select)\n */"]),"\n\n",t("span",{staticClass:"hljs-keyword"},["new"])," Vue({\n ",t("span",{staticClass:"hljs-attr"},["el"]),": ",t("span",{staticClass:"hljs-string"},["'#app'"]),",\n ",t("span",{staticClass:"hljs-attr"},["render"]),": ",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["h"])," =>"])," h(App)\n})\n"])]),t("h3",{attrs:{id:"kai-shi-shi-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#kai-shi-shi-yong","aria-hidden":"true"}},["¶"])," 开始使用"]),t("p",["至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式："]),t("pre",[t("code",{staticClass:"hljs language-bash"},[t("span",{staticClass:"hljs-comment"},["# 执行如下命令后访问 localhost:8086"]),"\nnpm run dev\n"])]),t("p",["编译："]),t("pre",[t("code",{staticClass:"hljs language-bash"},["npm run build\n"])]),t("p",["各个组件的使用方法请参阅它们各自的文档。"])])}]}},function(s,t,a){s.exports=a(383)},function(s,t,a){var n,e;n=a(384);var l=a(385);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{radio:"1",radio1:"选中且禁用",radio2:3,radio3:""}}}},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-radio class="radio" v-model="radio" label="1">备选项</el-radio>\n <el-radio class="radio" v-model="radio" label="2">备选项</el-radio>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n radio: '1'\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-radio",{directives:[{name:"model",rawName:"v-model",value:s.radio,expression:"radio"}],staticClass:"radio",attrs:{label:"1"},domProps:{value:s.radio},on:{input:function(t){s.radio=t}}},["备选项"]),t("el-radio",{directives:[{name:"model",rawName:"v-model",value:s.radio,expression:"radio"}],staticClass:"radio",attrs:{label:"2"},domProps:{value:s.radio},on:{input:function(t){s.radio=t}}},["备选项"])]]),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-radio disabled v-model="radio1" label="禁用">备选项</el-radio>\n <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n radio1: '选中且禁用'\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-radio",{directives:[{name:"model",rawName:"v-model",value:s.radio1,expression:"radio1"}],attrs:{disabled:"",label:"禁用"},domProps:{value:s.radio1},on:{input:function(t){s.radio1=t}}},["备选项"]),t("el-radio",{directives:[{name:"model",rawName:"v-model",value:s.radio1,expression:"radio1"}],attrs:{disabled:"",label:"选中且禁用"},domProps:{value:s.radio1},on:{input:function(t){s.radio1=t}}},["备选项"])]]),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-radio-group v-model="radio2">\n <el-radio :label="3">备选项</el-radio>\n <el-radio :label="6">备选项</el-radio>\n <el-radio :label="9">备选项</el-radio>\n </el-radio-group>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n radio2: 3\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.radio2,expression:"radio2"}],domProps:{value:s.radio2},on:{input:function(t){s.radio2=t}}},[t("el-radio",{attrs:{label:3}},["备选项"]),t("el-radio",{attrs:{label:6}},["备选项"]),t("el-radio",{attrs:{label:9}},["备选项"])])]]),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:'<template>\n <el-radio-group v-model="radio3">\n <el-radio-button label="上海"></el-radio-button>\n <el-radio-button label="北京"></el-radio-button>\n <el-radio-button label="广州" :disabled="true"></el-radio-button>\n <el-radio-button label="深圳"></el-radio-button>\n </el-radio-group>\n</template>\n\n\n',script:"\n export default {\n data () {\n return {\n radio3: ''\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.radio3,expression:"radio3"}],domProps:{value:s.radio3},on:{input:function(t){s.radio3=t}}},[t("el-radio-button",{attrs:{label:"上海"}}),t("el-radio-button",{attrs:{label:"北京"}}),t("el-radio-button",{attrs:{label:"广州",disabled:!0}}),t("el-radio-button",{attrs:{label:"深圳"}})])]]),s._m(16),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(17)])]),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"radio-dan-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-dan-xuan-kuang","aria-hidden":"true"}},["¶"])," Radio 单选框"])},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",["由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["要使用 Radio 组件，只需要设置",t("code",["v-model"]),"绑定变量，选中意味着变量的值为相应 Radio ",t("code",["label"]),"属性的值，",t("code",["label"]),"可以是",t("code",["String"]),"或者",t("code",["Number"]),"。"])},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-radio"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"radio"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"radio"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"1"']),">"]),"备选项",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"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"radio"'])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"radio"'])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"2"']),">"]),"备选项",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-radio"]),">"]),"\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"},["radio"]),": ",t("span",{staticClass:"hljs-string"},["'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:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","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",["label"]),"中的值。只要在",t("code",["el-radio"]),"元素中设置",t("code",["disabled"]),"属性即可，它接受一个",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 ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-radio"])," ",t("span",{staticClass:"hljs-attr"},["disabled"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"radio1"'])," ",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"},["disabled"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"radio1"'])," ",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"},["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"},["radio1"]),": ",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:"dan-xuan-kuang-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan-kuang-zu","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",["el-radio-group"]),"元素和子元素",t("code",["el-radio"]),"可以实现单选组，在",t("code",["el-radio-group"]),"中绑定",t("code",["v-model"]),"，在",t("code",["el-radio"]),"中设置好",t("code",["label"]),"即可，无需再给每一个",t("code",["el-radio"]),"绑定变量，另外，还提供了",t("code",["change"]),"事件来响应变化，它会传入一个参数",t("code",["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-radio-group"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"radio2"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-radio"])," ",t("span",{staticClass:"hljs-attr"},[":label"]),"=",t("span",{staticClass:"hljs-string"},['"3"']),">"]),"备选项",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"},['"6"']),">"]),"备选项",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"},['"9"']),">"]),"备选项",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"},["</",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"},["radio2"]),": ",t("span",{staticClass:"hljs-number"},["3"]),"\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:"an-niu-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","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",["el-radio"]),"元素换成",t("code",["el-radio-button"]),"元素即可，此外，Element 还提供了",t("code",["size"]),"属性给按钮组，支持",t("code",["large"]),"和",t("code",["small"]),"两种（如果不设定为默认）。"])},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-radio-group"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"radio3"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-radio-button"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"上海"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-radio-button"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-radio-button"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"北京"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-radio-button"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-radio-button"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"广州"'])," ",t("span",{staticClass:"hljs-attr"},[":disabled"]),"=",t("span",{staticClass:"hljs-string"},['"true"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-radio-button"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-radio-button"])," ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"深圳"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-radio-button"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-radio-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"},["radio3"]),": ",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:"radio-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},["¶"])," Radio 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",["Radio 的 value"]),t("td",["string,number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["disabled"]),t("td",["是否禁用"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["name"]),t("td",["原生 name 属性"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])},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",["参数"]),t("th",["说明"]),t("th",["类型"]),t("th",["可选值"]),t("th",["默认值"])])]),t("tbody",[t("tr",[t("td",["size"]),t("td",["Radio 按钮组尺寸"]),t("td",["string"]),t("td",["large, small"]),t("td",["—"])]),t("tr",[t("td",["fill"]),t("td",["按钮激活时的填充色和边框色"]),t("td",["string"]),t("td",["—"]),t("td",["#20a0ff"])]),t("tr",[t("td",["text-color"]),t("td",["按钮激活时的文本颜色"]),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",["事件名称"]),t("th",["说明"]),t("th",["回调参数"])])]),t("tbody",[t("tr",[t("td",["change"]),t("td",["绑定值变化时触发的事件"]),t("td",["选中的 Radio label 值"])])])])},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",["参数"]),t("th",["说明"]),t("th",["类型"]),t("th",["可选值"]),t("th",["默认值"])])]),t("tbody",[t("tr",[t("td",["label"]),t("td",["Radio 的 value"]),t("td",["string,number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["disabled"]),t("td",["是否禁用"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])}]}},function(s,t,a){s.exports=a(387)},function(s,t,a){var n,e;a(388),n=a(390);var l=a(391);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{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">默认不区分颜色</span>\n <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n <span class="demonstration">区分颜色</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" show-text>\n</el-rate>\n\n\n',
|
||
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:"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-rate"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value2"']),"\n ",t("span",{staticClass:"hljs-attr"},[":colors"]),"=",t("span",{staticClass:"hljs-string"},["\"['#99A9BF', '#F7BA2A', '#FF9900']\""]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-rate"]),">"]),"\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"},["value1"]),": ",t("span",{staticClass:"hljs-literal"},["null"]),",\n ",t("span",{staticClass:"hljs-attr"},["value2"]),": ",t("span",{staticClass:"hljs-literal"},["null"]),"\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:"fu-zhu-wen-zi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-wen-zi","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",["show-text"])," 属性会在右侧显示辅助文字。通过设置 ",t("code",["texts"])," 可以为每一个分值指定对应的辅助文字。",t("code",["texts"])," 为一个数组，长度应等于最大值 ",t("code",["max"]),"。"])},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-rate"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value3"']),"\n ",t("span",{staticClass:"hljs-attr"},["show-text"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-rate"]),">"]),"\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-literal"},["null"]),"\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:"qi-ta-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-icon","aria-hidden":"true"}},["¶"])," 其它 icon"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["当有多层评价时，可以用不同类型的 icon 区分评分层级"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["设置",t("code",["icon-classes"]),"属性可以自定义对应 3 个不同分段的图标。本例还使用",t("code",["void-icon-class"]),"指定了未选中时的图标类名。"])},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-rate"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value4"']),"\n ",t("span",{staticClass:"hljs-attr"},[":icon-classes"]),"=",t("span",{staticClass:"hljs-string"},["\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\""]),"\n ",t("span",{staticClass:"hljs-attr"},["void-icon-class"]),"=",t("span",{staticClass:"hljs-string"},['"icon-rate-face-off"']),"\n ",t("span",{staticClass:"hljs-attr"},[":colors"]),"=",t("span",{staticClass:"hljs-string"},["\"['#99A9BF', '#F7BA2A', '#FF9900']\""]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-rate"]),">"]),"\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-literal"},["null"]),"\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:"zhi-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-du","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",["disabled"])," 属性表示组件为只读，支持小数分值。此时若设置 ",t("code",["show-text"]),"，则会在右侧显示目前的分值。可以提供 ",t("code",["text-template"])," 作为显示模板，模板为一个包含了 ",t("code",["{value}"])," 的字符串，",t("code",["{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-rate"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value5"']),"\n ",t("span",{staticClass:"hljs-attr"},["disabled"]),"\n ",t("span",{staticClass:"hljs-attr"},["show-text"]),"\n ",t("span",{staticClass:"hljs-attr"},["text-color"]),"=",t("span",{staticClass:"hljs-string"},['"#ff9900"']),"\n ",t("span",{staticClass:"hljs-attr"},["text-template"]),"=",t("span",{staticClass:"hljs-string"},['"{value}"']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-rate"]),">"]),"\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"},["value5"]),": ",t("span",{staticClass:"hljs-number"},["3.7"]),"\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",["max"]),t("td",["最大分值"]),t("td",["number"]),t("td",["—"]),t("td",["5"])]),t("tr",[t("td",["disabled"]),t("td",["是否为只读"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["allow-half"]),t("td",["是否允许半选"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["low-threshold"]),t("td",["低分和中等分数的界限值，值本身被划分在低分中"]),t("td",["number"]),t("td",["—"]),t("td",["2"])]),t("tr",[t("td",["high-threshold"]),t("td",["高分和中等分数的界限值，值本身被划分在高分中"]),t("td",["number"]),t("td",["—"]),t("td",["4"])]),t("tr",[t("td",["colors"]),t("td",["icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色"]),t("td",["array"]),t("td",["—"]),t("td",["['#F7BA2A', '#F7BA2A', '#F7BA2A']"])]),t("tr",[t("td",["void-color"]),t("td",["未选中 icon 的颜色"]),t("td",["string"]),t("td",["—"]),t("td",["#C6D1DE"])]),t("tr",[t("td",["disabled-void-color"]),t("td",["只读时未选中 icon 的颜色"]),t("td",["string"]),t("td",["—"]),t("td",["#EFF2F7"])]),t("tr",[t("td",["icon-classes"]),t("td",["icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名"]),t("td",["array"]),t("td",["—"]),t("td",["['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']"])]),t("tr",[t("td",["void-icon-class"]),t("td",["未选中 icon 的类名"]),t("td",["string"]),t("td",["—"]),t("td",["el-icon-star-off"])]),t("tr",[t("td",["disabled-void-icon-class"]),t("td",["只读时未选中 icon 的类名"]),t("td",["string"]),t("td",["—"]),t("td",["el-icon-star-on"])]),t("tr",[t("td",["show-text"]),t("td",["是否显示辅助文字"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["text-color"]),t("td",["辅助文字的颜色"]),t("td",["string"]),t("td",["—"]),t("td",["1F2D3D"])]),t("tr",[t("td",["texts"]),t("td",["辅助文字数组"]),t("td",["array"]),t("td",["—"]),t("td",["['极差', '失望', '一般', '满意', '惊喜']"])]),t("tr",[t("td",["text-template"]),t("td",["只读时的辅助文字模板"]),t("td",["string"]),t("td",["—"]),t("td",["{value}"])])])])},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",["事件名称"]),t("th",["说明"]),t("th",["回调参数"])])]),t("tbody",[t("tr",[t("td",["change"]),t("td",["分值改变时触发"]),t("td",["改变后的分值"])])])])}]}},function(s,t,a){s.exports=a(393)},function(s,t,a){var n,e;a(394),n=a(396);var l=a(397);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{list:null,options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],options2:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶",disabled:!0},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],options3:[{label:"热门城市",options:[{value:"Shanghai",label:"上海"},{value:"Beijing",label:"北京"}]},{label:"城市名",options:[{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"},{value:"Dalian",label:"大连"}]}],options4:[],options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],cities:[{value:"Beijing",label:"北京"},{value:"Shanghai",label:"上海"},{value:"Nanjing",label:"南京"},{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"}],value:"",value2:"",value3:"",value4:"",value5:[],value6:"",value7:"",value8:"",value9:"",value10:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(s){return{value:s,label:s}})},methods:{remoteMethod:function(s){var t=this;""!==s?(this.loading=!0,setTimeout(function(){t.loading=!1,t.options4=t.list.filter(function(t){return t.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;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-select v-model="value" placeholder="请选择">\n <el-option v-for="item in options" :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 options: [{\n value: '选项1',\n label: '黄金糕'\n }, {\n value: '选项2',\n label: '双皮奶'\n }, {\n value: '选项3',\n label: '蚵仔煎'\n }, {\n value: '选项4',\n label: '龙须面'\n }, {\n value: '选项5',\n label: '北京烤鸭'\n }],\n value: ''\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value,expression:"value"}],attrs:{placeholder:"请选择"},domProps:{value:s.value},on:{input:function(t){s.value=t}}},[s._l(s.options,function(s){return t("el-option",{attrs:{label:s.label},domProps:{value:s.value}})})])]]),s._m(4),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(5)])]),s._m(6),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value2" placeholder="请选择">\n <el-option v-for="item in options2" :label="item.label" :value="item.value" :disabled="item.disabled">\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n options2: [{\n value: '选项1',\n label: '黄金糕'\n }, {\n value: '选项2',\n label: '双皮奶',\n disabled: true\n }, {\n value: '选项3',\n label: '蚵仔煎'\n }, {\n value: '选项4',\n label: '龙须面'\n }, {\n value: '选项5',\n label: '北京烤鸭'\n }],\n value2: ''\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{placeholder:"请选择"},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}},[s._l(s.options2,function(s){return t("el-option",{attrs:{label:s.label,disabled:s.disabled},domProps:{value:s.value}})})])]]),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:'<template>\n <el-select v-model="value3" disabled placeholder="请选择">\n <el-option v-for="item in options" :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 options: [{\n value: '选项1',\n label: '黄金糕'\n }, {\n value: '选项2',\n label: '双皮奶'\n }, {\n value: '选项3',\n label: '蚵仔煎'\n }, {\n value: '选项4',\n label: '龙须面'\n }, {\n value: '选项5',\n label: '北京烤鸭'\n }],\n value3: ''\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{disabled:"",placeholder:"请选择"},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}},[s._l(s.options,function(s){return t("el-option",{attrs:{label:s.label},domProps:{value:s.value}})})])]]),s._m(11),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(12)])]),s._m(13),s._m(14),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value4" clearable placeholder="请选择">\n <el-option v-for="item in options" :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 options: [{\n value: '选项1',\n label: '黄金糕'\n }, {\n value: '选项2',\n label: '双皮奶'\n }, {\n value: '选项3',\n label: '蚵仔煎'\n }, {\n value: '选项4',\n label: '龙须面'\n }, {\n value: '选项5',\n label: '北京烤鸭'\n }],\n value4: ''\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],attrs:{clearable:"",placeholder:"请选择"},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}},[s._l(s.options,function(s){return t("el-option",{attrs:{label:s.label},domProps:{value:s.value}})})])]]),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-select v-model="value5" multiple placeholder="请选择">\n <el-option v-for="item in options" :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 options: [{\n value: '选项1',\n label: '黄金糕'\n }, {\n value: '选项2',\n label: '双皮奶'\n }, {\n value: '选项3',\n label: '蚵仔煎'\n }, {\n value: '选项4',\n label: '龙须面'\n }, {\n value: '选项5',\n label: '北京烤鸭'\n }],\n value5: []\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value5,expression:"value5"}],attrs:{multiple:"",placeholder:"请选择"},domProps:{value:s.value5},on:{input:function(t){s.value5=t}}},[s._l(s.options,function(s){return t("el-option",{attrs:{label:s.label},domProps:{value:s.value}})})])]]),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-select v-model="value6" placeholder="请选择">\n <el-option v-for="item in cities" :label="item.label" :value="item.value">\n <span style="float: left">{{ item.label }}</span>\n <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>\n </el-option>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n cities: [{\n value: 'Beijing',\n label: '北京'\n }, {\n value: 'Shanghai',\n label: '上海'\n }, {\n value: 'Nanjing',\n label: '南京'\n }, {\n value: 'Chengdu',\n label: '成都'\n }, {\n value: 'Shenzhen',\n label: '深圳'\n }, {\n value: 'Guangzhou',\n label: '广州'\n }],\n value6: ''\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value6,expression:"value6"}],attrs:{placeholder:"请选择"},domProps:{value:s.value6},on:{input:function(t){s.value6=t}}},[s._l(s.cities,function(a){return t("el-option",{attrs:{label:a.label},domProps:{value:a.value}},[t("span",{attrs:{style:"float: left"}},[s._s(a.label)]),t("span",{attrs:{style:"float: right; color: #8492a6; font-size: 13px"}},[s._s(a.value)])])})])]]),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:'<template>\n <el-select v-model="value7" placeholder="请选择">\n <el-option-group v-for="group in options3" :label="group.label">\n <el-option v-for="item in group.options" :label="item.label" :value="item.value">\n </el-option>\n </el-option-group>\n </el-select>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n options3: [{\n label: '热门城市',\n options: [{\n value: 'Shanghai',\n label: '上海'\n }, {\n value: 'Beijing',\n label: '北京'\n }]\n }, {\n label: '城市名',\n options: [{\n value: 'Chengdu',\n label: '成都'\n }, {\n value: 'Shenzhen',\n label: '深圳'\n }, {\n value: 'Guangzhou',\n label: '广州'\n }, {\n value: 'Dalian',\n label: '大连'\n }]\n }],\n value7: ''\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value7,expression:"value7"}],attrs:{placeholder:"请选择"},domProps:{value:s.value7},on:{input:function(t){s.value7=t}}},[s._l(s.options3,function(a){return t("el-option-group",{attrs:{label:a.label}},[s._l(a.options,function(s){return t("el-option",{attrs:{label:s.label},domProps:{value:s.value}})})])})])]]),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:'<template>\n <el-select v-model="value8" filterable placeholder="请选择">\n <el-option v-for="item in options" :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 options: [{\n value: '选项1',\n label: '黄金糕'\n }, {\n value: '选项2',\n label: '双皮奶'\n }, {\n value: '选项3',\n label: '蚵仔煎'\n }, {\n value: '选项4',\n label: '龙须面'\n }, {\n value: '选项5',\n label: '北京烤鸭'\n }],\n value8: ''\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value8,expression:"value8"}],attrs:{filterable:"",placeholder:"请选择"},domProps:{value:s.value8},on:{input:function(t){s.value8=t}}},[s._l(s.options,function(s){return t("el-option",{attrs:{label:s.label},domProps:{value:s.value}})})])]]),s._m(31),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(32)])]),s._m(33),s._m(34),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value9" multiple filterable="" remote placeholder="请输入关键词" :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:"请输入关键词","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(35),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(36)])]),s._m(37),s._m(38),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-select v-model="value10" multiple filterable="" allow-create placeholder="请选择文章标签">\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:"请选择文章标签"},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(39),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(40)])]),s._m(41),s._m(42),s._m(43),s._m(44),s._m(45),s._m(46),s._m(47),s._m(48)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"select-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-xuan-ze-qi","aria-hidden":"true"}},["¶"])," Select 选择器"])},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("p",[t("code",["v-model"]),"的值为当前被选中的",t("code",["el-option"]),"的 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"},['"value"'])," ",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 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"},["'选项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:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'双皮奶'"]),",\n ",t("span",{staticClass:"hljs-attr"},["disabled"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),"\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"},["value2"]),": ",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:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","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",["el-select"]),"设置",t("code",["disabled"]),"属性，则整个选择器不可用"])},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"},['"value3"'])," ",t("span",{staticClass:"hljs-attr"},["disabled"])," ",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 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"},["'选项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"},["value3"]),": ",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:"ke-qing-kong-dan-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong-dan-xuan","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",["el-select"]),"设置",t("code",["clearable"]),"属性，则可将选择器清空。需要注意的是，",t("code",["clearable"]),"属性仅适用于单选。"])},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"},['"value4"'])," ",t("span",{staticClass:"hljs-attr"},["clearable"])," ",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 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"},["'选项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"},["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:"ji-chu-duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-duo-xuan","aria-hidden":"true"}},["¶"])," 基础多选"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["适用性较广的基础多选，用 Tag 展示已选项"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["为",t("code",["el-select"]),"设置",t("code",["multiple"]),"属性即可启用多选，此时",t("code",["v-model"]),"的值为当前选中值所组成的数组"])},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"},['"value5"'])," ",t("span",{staticClass:"hljs-attr"},["multiple"])," ",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 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"},["'选项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"},["value5"]),": []\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:"zi-ding-yi-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","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",["将自定义的 HTML 模板插入",t("code",["el-option"]),"的 slot 中即可。"])},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"},['"value6"'])," ",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 cities"']),"\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"},["span"])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"float: left"']),">"]),t("span",["{{"])," item.label ",t("span",["}}"]),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"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"float: right; color: #8492a6; font-size: 13px"']),">"]),t("span",["{{"])," item.value ",t("span",["}}"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\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"},["cities"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Beijing'"]),",\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"},["'Shanghai'"]),",\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"},["'Nanjing'"]),",\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"},["'Chengdu'"]),",\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"},["'Shenzhen'"]),",\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"},["'Guangzhou'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'广州'"]),"\n }],\n ",t("span",{staticClass:"hljs-attr"},["value6"]),": ",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:"fen-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-zu","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",["el-option-group"]),"对备选项进行分组，它的",t("code",["label"]),"属性为分组名"])},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"},['"value7"'])," ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请选择"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-option-group"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-for"]),"=",t("span",{staticClass:"hljs-string"},['"group in options3"']),"\n ",t("span",{staticClass:"hljs-attr"},[":label"]),"=",t("span",{staticClass:"hljs-string"},['"group.label"']),">"]),"\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 group.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-option-group"]),">"]),"\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"},["options3"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'热门城市'"]),",\n ",t("span",{staticClass:"hljs-attr"},["options"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Shanghai'"]),",\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"},["'Beijing'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'北京'"]),"\n }]\n }, {\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'城市名'"]),",\n ",t("span",{staticClass:"hljs-attr"},["options"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'Chengdu'"]),",\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"},["'Shenzhen'"]),",\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"},["'Guangzhou'"]),",\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"},["'Dalian'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'大连'"]),"\n }]\n }],\n ",t("span",{staticClass:"hljs-attr"},["value7"]),": ",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:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-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("p",["为",t("code",["el-select"]),"添加",t("code",["filterable"]),"属性即可启用搜索功能。默认情况下，Select 会找出所有",t("code",["label"]),"属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个",t("code",["filter-method"]),"来实现。",t("code",["filter-method"]),"为一个",t("code",["Function"]),"，它会在输入值发生变化时调用，参数为当前输入值。"])},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"},['"请选择"']),">"]),"\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"},["'选项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"},["value8"]),": ",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:"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("p",["为了启用远程搜索，需要将",t("code",["filterable"]),"和",t("code",["remote"]),"设置为",t("code",["true"]),"，同时传入一个",t("code",["remote-method"]),"。",t("code",["remote-method"]),"为一个",t("code",["Function"]),"，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果",t("code",["el-option"]),"是通过",t("code",["v-for"]),"指令渲染出来的，此时需要为",t("code",["el-option"]),"添加",t("code",["key"]),"属性，且其值需具有唯一性，比如此例中的",t("code",["item.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"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value9"']),"\n ",t("span",{staticClass:"hljs-attr"},["multiple"]),"\n ",t("span",{staticClass:"hljs-attr"},["filterable"]),"\n ",t("span",{staticClass:"hljs-attr"},["remote"]),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"请输入关键词"']),"\n ",t("span",{staticClass:"hljs-attr"},[":remote-method"]),"=",t("span",{staticClass:"hljs-string"},['"remoteMethod"']),"\n ",t("span",{staticClass:"hljs-attr"},[":loading"]),"=",t("span",{staticClass:"hljs-string"},['"loading"']),">"]),"\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 options4"']),"\n ",t("span",{staticClass:"hljs-attr"},[":key"]),"=",t("span",{staticClass:"hljs-string"},['"item.value"']),"\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"},["options4"]),": [],\n ",t("span",{
|
||
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"]),".loading = ",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"]),".loading = ",t("span",{staticClass:"hljs-literal"},["false"]),";\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".options4 = ",t("span",{staticClass:"hljs-keyword"},["this"]),".list.filter(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["item"])," =>"])," {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > ",t("span",{staticClass:"hljs-number"},["-1"]),";\n });\n }, ",t("span",{staticClass:"hljs-number"},["200"]),");\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".options4 = [];\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:"chuang-jian-tiao-mu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chuang-jian-tiao-mu","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",["allow-create"]),"属性即可通过在输入框中输入文字来创建新的条目。注意此时",t("code",["filterable"]),"必须为真。"])},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"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value10"']),"\n ",t("span",{staticClass:"hljs-attr"},["multiple"]),"\n ",t("span",{staticClass:"hljs-attr"},["filterable"]),"\n ",t("span",{staticClass:"hljs-attr"},["allow-create"]),"\n ",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 options5"']),"\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"},["options5"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'HTML'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'HTML'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'CSS'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'CSS'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["value"]),": ",t("span",{staticClass:"hljs-string"},["'JavaScript'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'JavaScript'"]),"\n }],\n ",t("span",{staticClass:"hljs-attr"},["value10"]),": []\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:"select-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},["¶"])," Select 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",["multiple"]),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",["size"]),t("td",["输入框尺寸"]),t("td",["string"]),t("td",["large/small/mini"]),t("td",["—"])]),t("tr",[t("td",["clearable"]),t("td",["单选时是否可以清空选项"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["multiple-limit"]),t("td",["多选时用户最多可以选择的项目数，为 0 则不限制"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["name"]),t("td",["select input 的 name 属性"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["placeholder"]),t("td",["占位符"]),t("td",["string"]),t("td",["—"]),t("td",["请选择"])]),t("tr",[t("td",["filterable"]),t("td",["是否可搜索"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["allow-create"]),t("td",["是否允许用户创建新条目，需配合 ",t("code",["filterable"])," 使用"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["filter-method"]),t("td",["自定义过滤方法"]),t("td",["function"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["remote"]),t("td",["是否为远程搜索"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["remote-method"]),t("td",["远程搜索方法"]),t("td",["function"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["loading"]),t("td",["是否正在从远程获取数据"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["loading-text"]),t("td",["远程加载时显示的文字"]),t("td",["string"]),t("td",["—"]),t("td",["加载中"])]),t("tr",[t("td",["no-match-text"]),t("td",["搜索条件无匹配时显示的文字"]),t("td",["string"]),t("td",["—"]),t("td",["无匹配数据"])]),t("tr",[t("td",["no-data-text"]),t("td",["选项为空时显示的文字"]),t("td",["string"]),t("td",["—"]),t("td",["无数据"])]),t("tr",[t("td",["popper-class"]),t("td",["Select 下拉框的类名"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"select-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},["¶"])," Select 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",["目前的选中值"])]),t("tr",[t("td",["visible-change"]),t("td",["下拉框出现/隐藏时触发"]),t("td",["出现则为 true，隐藏则为 false"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"option-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},["¶"])," Option Group 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("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["disabled"]),t("td",["是否将该分组下所有选项置为禁用"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"option-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},["¶"])," Option 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",["value"]),t("td",["选项的值"]),t("td",["string/number/object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["label"]),t("td",["选项的标签，若不设置则默认与 ",t("code",["value"])," 相同"]),t("td",["string/number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["disabled"]),t("td",["是否禁用该选项"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])}]}},function(s,t,a){s.exports=a(399)},function(s,t,a){var n,e;a(400),n=a(402);var l=a(403);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{value1:0,value2:50,value3:42,value4:0,value5:0,value6: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),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">默认</span>\n <el-slider v-model="value1"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">自定义初始值</span>\n <el-slider v-model="value2"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">禁用</span>\n <el-slider v-model="value3" disabled></el-slider>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value1: 0,\n value2: 50,\n value3: 42\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("div",{staticClass:"block"},[s._m(4),t("el-slider",{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(5),t("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})]),t("div",{staticClass:"block"},[s._m(6),t("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{disabled:""},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})])]]),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:'<template>\n <div class="block">\n <span class="demonstration">不显示间断点</span>\n <el-slider v-model="value4" :step="10">\n </el-slider>\n </div>\n <div class="block">\n <span class="demonstration">显示间断点</span>\n <el-slider v-model="value5" :step="10" show-stops>\n </el-slider>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value4: 0,\n value5: 0\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("div",{staticClass:"block"},[s._m(11),t("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],attrs:{step:10},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}})]),t("div",{staticClass:"block"},[s._m(12),t("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value5,expression:"value5"}],attrs:{step:10,"show-stops":""},domProps:{value:s.value5},on:{input:function(t){s.value5=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:'<template>\n <div class="block">\n <el-slider v-model="value6" show-input>\n </el-slider>\n </div>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value6: 0\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("div",{staticClass:"block"},[t("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value6,expression:"value6"}],attrs:{"show-input":""},domProps:{value:s.value6},on:{input:function(t){s.value6=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:"slider-hua-kuai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-hua-kuai","aria-hidden":"true"}},["¶"])," Slider 滑块"])},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("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("span",{staticClass:"demonstration"},["禁用"])},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"},["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-slider"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value1"']),">"]),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"},["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-slider"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value2"']),">"]),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"},["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-slider"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value3"'])," ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),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"},["value1"]),": ",t("span",{staticClass:"hljs-number"},["0"]),",\n ",t("span",{staticClass:"hljs-attr"},["value2"]),": ",t("span",{staticClass:"hljs-number"},["50"]),",\n ",t("span",{staticClass:"hljs-attr"},["value3"]),": ",t("span",{staticClass:"hljs-number"},["42"]),"\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:"chi-san-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-san-zhi","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("p",["改变",t("code",["step"]),"的值可以改变步长，通过设置",t("code",["show-step"]),"属性可以显示间断点"])},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-slider"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value4"']),"\n ",t("span",{staticClass:"hljs-attr"},[":step"]),"=",t("span",{staticClass:"hljs-string"},['"10"']),">"]),"\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"},["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-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:"dai-you-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-shu-ru-kuang","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",["show-input"]),"属性会在右侧显示一个输入框"])},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("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",["min"]),t("td",["最小值"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["max"]),t("td",["最大值"]),t("td",["number"]),t("td",["—"]),t("td",["100"])]),t("tr",[t("td",["disabled"]),t("td",["是否禁用"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["step"]),t("td",["步长"]),t("td",["number"]),t("td",["—"]),t("td",["1"])]),t("tr",[t("td",["show-input"]),t("td",["是否显示输入框"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["show-stops"]),t("td",["是否显示间断点"]),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",["事件名称"]),t("th",["说明"]),t("th",["回调参数"])])]),t("tbody",[t("tr",[t("td",["change"]),t("td",["值改变时触发"]),t("td",["改变后的值"])])])])}]}},function(s,t,a){s.exports=a(405)},function(s,t,a){var n,e;n=a(406);var l=a(407);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{active:0}},methods:{next:function(){this.active++>2&&(this.active=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),s._m(3),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="active" finish-status="success">\n <el-step title="步骤 1"></el-step>\n <el-step title="步骤 2"></el-step>\n <el-step title="步骤 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">下一步</el-button>\n\n\n',script:"\n export default {\n data() {\n return {\n active: 0\n };\n },\n\n methods: {\n next() {\n if (this.active++ > 2) this.active = 0;\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-steps",{attrs:{space:100,active:s.active,"finish-status":"success"}},[t("el-step",{attrs:{title:"步骤 1"}}),t("el-step",{attrs:{title:"步骤 2"}}),t("el-step",{attrs:{title:"步骤 3"}})]),t("el-button",{attrs:{style:"margin-top: 12px;"},on:{click:s.next}},["下一步"])]),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:'<el-steps :space="100" :active="1" finish-status="success">\n <el-step title="已完成"></el-step>\n <el-step title="进行中"></el-step>\n <el-step title="步骤 3"></el-step>\n</el-steps>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-steps",{attrs:{space:100,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"已完成"}}),t("el-step",{attrs:{title:"进行中"}}),t("el-step",{attrs:{title:"步骤 3"}})])]),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:'<el-steps :space="200" :active="1">\n <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>\n <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>\n <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>\n</el-steps>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-steps",{attrs:{space:200,active:1}},[t("el-step",{attrs:{title:"步骤 1",description:"这是一段很长很长很长的描述性文字"}}),t("el-step",{attrs:{title:"步骤 2",description:"这是一段很长很长很长的描述性文字"}}),t("el-step",{attrs:{title:"步骤 3",description:"这是一段很长很长很长的描述性文字"}})])]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(12)])]),s._m(13),s._m(14),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="1">\n <el-step title="步骤 1" icon="edit"></el-step>\n <el-step title="步骤 2" icon="upload"></el-step>\n <el-step title="步骤 3" icon="picture"></el-step>\n</el-steps>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-steps",{attrs:{space:100,active:1}},[t("el-step",{attrs:{title:"步骤 1",icon:"edit"}}),t("el-step",{attrs:{title:"步骤 2",icon:"upload"}}),t("el-step",{attrs:{title:"步骤 3",icon:"picture"}})])]),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:'<el-steps :space="100" direction="vertical" :active="1">\n <el-step title="步骤 1"></el-step>\n <el-step title="步骤 2"></el-step>\n <el-step title="步骤 3"></el-step>\n</el-steps>\n',
|
||
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-keyword"},["if"])," (",t("span",{staticClass:"hljs-keyword"},["this"]),".active++ > ",t("span",{staticClass:"hljs-number"},["2"]),") ",t("span",{staticClass:"hljs-keyword"},["this"]),".active = ",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:"han-zhuang-tai-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#han-zhuang-tai-bu-zou-tiao","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",["title"]),"具名分发，可以用",t("code",["slot"]),"的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。"])},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"},['"1"'])," ",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"},['"已完成"']),">"]),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"},['"进行中"']),">"]),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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"you-miao-shu-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#you-miao-shu-de-bu-zou-tiao","aria-hidden":"true"}},["¶"])," 有描述的步骤条"])},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-steps"])," ",t("span",{staticClass:"hljs-attr"},[":space"]),"=",t("span",{staticClass:"hljs-string"},['"200"'])," ",t("span",{staticClass:"hljs-attr"},[":active"]),"=",t("span",{staticClass:"hljs-string"},['"1"']),">"]),"\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-attr"},["description"]),"=",t("span",{staticClass:"hljs-string"},['"这是一段很长很长很长的描述性文字"']),">"]),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-attr"},["description"]),"=",t("span",{staticClass:"hljs-string"},['"这是一段很长很长很长的描述性文字"']),">"]),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-attr"},["description"]),"=",t("span",{staticClass:"hljs-string"},['"这是一段很长很长很长的描述性文字"']),">"]),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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"dai-tu-biao-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-biao-de-bu-zou-tiao","aria-hidden":"true"}},["¶"])," 带图标的步骤条"])},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",["icon"]),"属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名",t("code",["slot"]),"来使用自定义的图标。"])},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"},['"1"']),">"]),"\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-attr"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"edit"']),">"]),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-attr"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"upload"']),">"]),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-attr"},["icon"]),"=",t("span",{staticClass:"hljs-string"},['"picture"']),">"]),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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"shu-shi-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-shi-bu-zou-tiao","aria-hidden":"true"}},["¶"])," 竖式步骤条"])},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",["el-steps"]),"元素中设置",t("code",["direction"]),"属性为",t("code",["vertical"]),"即可。"])},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"},["direction"]),"=",t("span",{staticClass:"hljs-string"},['"vertical"'])," ",t("span",{staticClass:"hljs-attr"},[":active"]),"=",t("span",{staticClass:"hljs-string"},['"1"']),">"]),"\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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"steps-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},["¶"])," Steps 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",["space"]),t("td",["每个 step 的间距，不填写将自适应间距"]),t("td",["Number"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["direction"]),t("td",["显示方向"]),t("td",["string"]),t("td",["vertical/horizontal"]),t("td",["horizontal"])]),t("tr",[t("td",["active"]),t("td",["设置当前激活步骤"]),t("td",["number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["process-status"]),t("td",["设置当前步骤的状态"]),t("td",["string"]),t("td",["wait/process/finish/error/success"]),t("td",["process"])]),t("tr",[t("td",["finish-status"]),t("td",["设置结束步骤的状态"]),t("td",["string"]),t("td",["wait/process/finish/error/success"]),t("td",["finish"])]),t("tr",[t("td",["align-center"]),t("td",["标题描述居中对齐"]),t("td",["boolean"]),t("td",["false, true"]),t("td",["false"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"step-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},["¶"])," Step 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",["title"]),t("td",["标题"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["description"]),t("td",["描述性文字"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["icon"]),t("td",["图标"]),t("td",["Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入"]),t("td",["string"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"step-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},["¶"])," Step Slot"])},function(){var s=this,t=s.$createElement;s._c;return t("table",{staticClass:"table"},[t("thead",[t("tr",[t("th",["name"]),t("th",["说明"])])]),t("tbody",[t("tr",[t("td",["icon"]),t("td",["图标"])]),t("tr",[t("td",["title"]),t("td",["标题"])]),t("tr",[t("td",["description"]),t("td",["描述性文字"])])])])}]}},function(s,t,a){s.exports=a(409)},function(s,t,a){var n,e;a(410),n=a(412);var l=a(413);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{value1:!0,value2:!0,value3:!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:'<el-switch v-model="value1" on-text="" off-text>\n</el-switch>\n<el-switch v-model="value2" on-color="#13ce66" off-color="#ff4949">\n</el-switch>\n\n\n',script:"\n export default {\n data() {\n return {\n value1: true,\n value2: true\n }\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],attrs:{"on-text":"","off-text":""},domProps:{value:s.value1},on:{input:function(t){s.value1=t}}}),t("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{"on-color":"#13ce66","off-color":"#ff4949"},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})]),s._m(3),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(4)])]),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-switch v-model="value3" on-text="" off-text disabled>\n</el-switch>\n<el-switch v-model="value3" disabled>\n</el-switch>\n\n\n',script:"\n export default {\n data() {\n return {\n value3: true\n }\n }\n };\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{"on-text":"","off-text":"",disabled:""},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}}),t("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{disabled:""},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})]),s._m(6),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(7)])]),s._m(8),s._m(9),s._m(10),s._m(11)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"switch-kai-guan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch-kai-guan","aria-hidden":"true"}},["¶"])," Switch 开关"])},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-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},["¶"])," 基本用法"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["绑定",t("code",["v-model"]),"到一个",t("code",["Boolean"]),"类型的变量。可以使用",t("code",["on-text"]),"属性与",t("code",["off-text"]),"属性来设置开关的文字描述，使用",t("code",["on-color"]),"属性与",t("code",["off-color"]),"属性来设置开关的背景色。"])},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-switch"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value1"']),"\n ",t("span",{staticClass:"hljs-attr"},["on-text"]),"=",t("span",{staticClass:"hljs-string"},['""']),"\n ",t("span",{staticClass:"hljs-attr"},["off-text"]),"=",t("span",{staticClass:"hljs-string"},['""']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-switch"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-switch"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value2"']),"\n ",t("span",{staticClass:"hljs-attr"},["on-color"]),"=",t("span",{staticClass:"hljs-string"},['"#13ce66"']),"\n ",t("span",{staticClass:"hljs-attr"},["off-color"]),"=",t("span",{staticClass:"hljs-string"},['"#ff4949"']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-switch"]),">"]),"\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"},["value1"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),",\n ",t("span",{staticClass:"hljs-attr"},["value2"]),": ",t("span",{staticClass:"hljs-literal"},["true"]),"\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:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},["¶"])," 禁用状态"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["设置",t("code",["disabled"]),"属性，接受一个",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"},["el-switch"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value3"']),"\n ",t("span",{staticClass:"hljs-attr"},["on-text"]),"=",t("span",{staticClass:"hljs-string"},['""']),"\n ",t("span",{staticClass:"hljs-attr"},["off-text"]),"=",t("span",{staticClass:"hljs-string"},['""']),"\n ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-switch"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-switch"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value3"']),"\n ",t("span",{staticClass:"hljs-attr"},["disabled"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-switch"]),">"]),"\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-literal"},["true"]),"\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",["disabled"]),t("td",["是否禁用"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["width"]),t("td",["switch 的宽度（像素）"]),t("td",["number"]),t("td",["—"]),t("td",["58（有文字）/ 46（无文字）"])]),t("tr",[t("td",["on-icon-class"]),t("td",["switch 打开时所显示图标的类名，设置此项会忽略 ",t("code",["on-text"])]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["off-icon-class"]),t("td",["switch 关闭时所显示图标的类名，设置此项会忽略 ",t("code",["off-text"])]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["on-text"]),t("td",["switch 打开时的文字"]),t("td",["string"]),t("td",["—"]),t("td",["ON"])]),t("tr",[t("td",["off-text"]),t("td",["switch 关闭时的文字"]),t("td",["string"]),t("td",["—"]),t("td",["OFF"])]),t("tr",[t("td",["on-color"]),t("td",["switch 打开时的背景色"]),t("td",["string"]),t("td",["—"]),t("td",["#20A0FF"])]),t("tr",[t("td",["off-color"]),t("td",["switch 关闭时的背景色"]),t("td",["string"]),t("td",["—"]),t("td",["#C0CCDA"])]),t("tr",[t("td",["name"]),t("td",["switch 对应的 name 属性"]),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",["事件名称"]),t("th",["说明"]),t("th",["回调参数"])])]),t("tbody",[t("tr",[t("td",["change"]),t("td",["switch 状态发生变化时的回调函数"]),t("td",["新状态的布尔值"])])])])}]}},function(s,t,a){s.exports=a(415)},function(s,t,a){var n,e;a(416),n=a(418);var l=a(419);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{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"家"},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"公司"},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"家"},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"公司"}],tableData2:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$info:!0},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$positive:!0}],tableData3:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}],tableData4:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}],currentRow:null,multipleSelection:[]}},methods:{handleClick:function(){console.log("click")},handleEdit:function(s,t){console.log(s,t)},handleDelete:function(s,t){console.log(s,t)},handleSelectionChange:function(s){this.multipleSelection=s},handleCurrentChange:function(s){this.currentRow=s},formatter:function(s,t){return s.address},filterTag:function(s,t){return t.tag===s},tableRowClassName:function(s,t){return 1===t?"info-row":3===t?"positive-row":""},deleteRow:function(s,t){t.splice(s,1)}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;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-table :data="tableData" 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 tableData: [{\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1517 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1519 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1516 弄'\n }]\n }\n }\n }\n ",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData,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(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-table :data="tableData" stripe 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 tableData: [{\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1517 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1519 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1516 弄'\n }]\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData,stripe:"",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(8),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(9)])]),s._m(10),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="日期" 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 tableData: [{\n date: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1517 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1519 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1516 弄'\n }]\n }\n }\n }\n",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:"日期",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"地址"}})])]]),s._m(11),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(12)])]),s._m(13),s._m(14),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName">\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\n\n',script:"\n export default {\n methods: {\n tableRowClassName(row, index) {\n if (index === 1) {\n return 'info-row';\n } else if (index === 3) {\n return 'positive-row';\n }\n return '';\n }\n },\n data() {\n return {\n tableData2: [{\n date: '2016-05-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:"\n .el-table .info-row {\n background: #c9e5f5;\n }\n\n .el-table .positive-row {\n background: #e2f0e4;\n }\n"
|
||
}}},[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 city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-01',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }]\n }\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:{fixed:"",prop:"date",label:"日期",width:"150"}}),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),t("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),t("el-table-column",{attrs:{context:s._self,fixed:"right",label:"操作",width:"100"},inlineTemplate:{render:function(){var s=this,t=s.$createElement;s._c;return t("span",[t("el-button",{attrs:{type:"text",size:"small"},on:{click:s.handleClick}},["查看"]),t("el-button",{attrs:{type:"text",size:"small"}},["编辑"])])},staticRenderFns:[]}})])]]),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:'<template>\n <el-table :data="tableData3" border style="width: 100%" height="250">\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>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n tableData3: [{\n date: '2016-05-03',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-02',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-04',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-01',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-08',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-06',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-07',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }]\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData3,border:"",style:"width: 100%",height:"250"}},[t("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),t("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})])]]),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:'<template>\n <el-table :data="tableData4" border style="width: 100%" max-height="250">\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="120">\n <span>\n <el-button @click.native.prevent="deleteRow($index, tableData4)" type="text" size="small">\n 移除\n </el-button>\n </span>\n </el-table-column>\n </el-table>\n</template>\n\n\n',script:"\n export default {\n methods: {\n deleteRow(index, rows) {\n rows.splice(index, 1);\n }\n },\n data() {\n return {\n tableData4: [{\n date: '2016-05-03',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-02',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-04',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-01',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-08',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-06',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-07',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }]\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData4,border:"",style:"width: 100%","max-height":"250"}},[t("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),t("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),t("el-table-column",{attrs:{context:s._self,fixed:"right",label:"操作",width:"120"},inlineTemplate:{render:function(){var s=this,t=s.$createElement;s._c;return t("span",[t("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(t){t.preventDefault(),s.deleteRow(s.$index,s.tableData4)}}},["\n 移除\n "])])},staticRenderFns:[]}})])]]),s._m(31),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(32)])]),s._m(33),s._m(34),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData3" border style="width: 100%">\n <el-table-column prop="date" label="日期" width="150">\n </el-table-column>\n <el-table-column label="配送信息">\n <el-table-column prop="name" label="姓名" width="120">\n </el-table-column>\n <el-table-column label="地址">\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>\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 province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-02',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-04',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-01',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-08',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-06',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }, {\n date: '2016-05-07',\n name: '王小虎',\n province: '上海',\n city: '普陀区',\n address: '上海市普陀区金沙江路 1518 弄',\n zip: 200333\n }]\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData3,border:"",style:"width: 100%"}},[t("el-table-column",{attrs:{prop:"date",label:"日期",width:"150"}}),t("el-table-column",{attrs:{label:"配送信息"}},[t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),t("el-table-column",{attrs:{label:"地址"}},[t("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),t("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),t("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})])])])]]),s._m(35),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(36)])]),s._m(37),s._m(38),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">\n <el-table-column type="index" width="50">\n </el-table-column>\n <el-table-column property="date" label="日期" width="120">\n </el-table-column>\n <el-table-column property="name" label="姓名" width="120">\n </el-table-column>\n <el-table-column property="address" label="地址">\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-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1517 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1519 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1516 弄'\n }],\n currentRow: null\n }\n },\n\n methods: {\n handleCurrentChange(val) {\n this.currentRow = val;\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData,"highlight-current-row":"",style:"width: 100%"},on:{"current-change":s.handleCurrentChange}},[t("el-table-column",{attrs:{type:"index",width:"50"}}),t("el-table-column",{attrs:{property:"date",label:"日期",width:"120"}}),t("el-table-column",{attrs:{property:"name",label:"姓名",width:"120"}}),t("el-table-column",{attrs:{property:"address",label:"地址"}})])]]),s._m(39),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(40)])]),s._m(41),s._m(42),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData3" border style="width: 100%" @selection-change="handleSelectionChange">\n <el-table-column type="selection" width="55">\n </el-table-column>\n <el-table-column inline-template label="日期" width="120">\n <div>{{ row.date }}</div>\n </el-table-column>\n <el-table-column prop="name" label="姓名" width="120">\n </el-table-column>\n <el-table-column prop="address" label="地址" show-overflow-tooltip>\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 multipleSelection: []\n }\n },\n\n methods: {\n handleSelectionChange(val) {\n this.multipleSelection = val;\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData3,border:"",style:"width: 100%"},on:{"selection-change":s.handleSelectionChange}},[t("el-table-column",{attrs:{type:"selection",width:"55"}}),t("el-table-column",{attrs:{label:"日期",width:"120"},inlineTemplate:{render:function(){var s=this,t=s.$createElement;s._c;return t("div",[s._s(s.row.date)])},staticRenderFns:[]}}),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),t("el-table-column",{attrs:{prop:"address",label:"地址","show-overflow-tooltip":""}})])]]),s._m(43),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(44)])]),s._m(45),s._m(46),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="日期" sortable 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="地址" :formatter="formatter">\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-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1517 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1519 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1516 弄'\n }]\n }\n },\n methods: {\n formatter(row, column) {\n return row.address;\n }\n }\n }\n",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:"日期",sortable:"",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"地址",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="日期" sortable 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="地址" :formatter="formatter">\n </el-table-column>\n <el-table-column prop="tag" label="标签" width="100" :filters="[{ text: \'家\', value: \'家\' }, { text: \'公司\', value: \'公司\' }]" :filter-method="filterTag" inline-template>\n <el-tag :type="row.tag === \'家\' ? \'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-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄',\n tag: '家'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1517 弄',\n tag: '公司'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1519 弄',\n tag: '家'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1516 弄',\n tag: '公司'\n }]\n }\n },\n methods: {\n 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:"日期",sortable:"",width:"180"}}),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),t("el-table-column",{attrs:{prop:"address",label:"地址",formatter:s.formatter}}),t("el-table-column",{attrs:{prop:"tag",label:"标签",width:"100",filters:[{text:"家",value:"家"},{text:"公司",value:"公司"}],"filter-method":s.filterTag},inlineTemplate:{render:function(){var s=this,t=s.$createElement;s._c;return t("el-tag",{attrs:{type:"家"===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="日期" 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="姓名" width="180">\n <el-popover trigger="hover" placement="top">\n <p>姓名: {{ row.name }}</p>\n <p>住址: {{ 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="操作">\n <div>\n <el-button size="small" @click="handleEdit($index, row)">\n 编辑\n </el-button>\n <el-button size="small" type="danger" @click="handleDelete($index, row)">\n 删除\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: '2016-05-02',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1518 弄'\n }, {\n date: '2016-05-04',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1517 弄'\n }, {\n date: '2016-05-01',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1519 弄'\n }, {\n date: '2016-05-03',\n name: '王小虎',\n address: '上海市普陀区金沙江路 1516 弄'\n }]\n }\n },\n methods: {\n handleEdit(index, row) {\n console.log(index, row);\n },\n handleDelete(index, row) {\n console.log(index, row);\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-table",{attrs:{data:s.tableData,border:"",style:"width: 100%"}},[t("el-table-column",{attrs:{label:"日期",width:"180"},inlineTemplate:{render:function(){var s=this,t=s.$createElement;s._c;return t("div",[t("el-icon",{attrs:{name:"time"}}),t("span",{attrs:{style:"margin-left: 10px"}},[s._s(s.row.date)])])},staticRenderFns:[]}}),t("el-table-column",{attrs:{label:"姓名",width:"180"},inlineTemplate:{render:function(){var s=this,t=s.$createElement;s._c;return t("el-popover",{attrs:{trigger:"hover",placement:"top"}},[t("p",["姓名: "+s._s(s.row.name)]),t("p",["住址: "+s._s(s.row.address)]),t("div",{slot:"reference",staticClass:"name-wrapper"},[t("el-tag",[s._s(s.row.name)])])])},staticRenderFns:[]}}),t("el-table-column",{attrs:{context:s._self,label:"操作"},inlineTemplate:{render:function(){var s=this,t=s.$createElement;s._c;return t("div",[t("el-button",{attrs:{size:"small"},on:{click:function(t){s.handleEdit(s.$index,s.row)}}},["\n 编辑\n "]),t("el-button",{attrs:{size:"small",type:"danger"},on:{click:function(t){s.handleDelete(s.$index,s.row)}}},["\n 删除\n "])])},staticRenderFns:[]}})])]]),s._m(55),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(56)])]),s._m(57),s._m(58),s._m(59),s._m(60),s._m(61),s._m(62),s._m(63),s._m(64)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"table-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-biao-ge","aria-hidden":"true"}},["¶"])," Table 表格"])},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-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-biao-ge","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",["el-table"]),"元素中注入",t("code",["data"]),"对象数组后，在",t("code",["el-table-column"]),"中用",t("code",["prop"]),"属性来对应对象中的键名即可填入数据，用",t("code",["label"]),"属性来定义表格的列名。可以使用",t("code",["width"]),"属性来定义列宽。"])},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"},["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-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-ban-ma-wen-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ban-ma-wen-biao-ge","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",["stripe"]),"属性可以创建带斑马纹的表格。它接受一个",t("code",["Boolean"]),"，默认为",t("code",["false"]),"，设置为",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 ",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"},["stripe"]),"\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-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 ",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"},["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-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-zhuang-tai-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-zhuang-tai-biao-ge","aria-hidden":"true"}},["¶"])," 带状态表格"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["可以通过指定 Table 组件的 ",t("code",["row-class-name"])," 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。"])},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"},['"tableData2"']),"\n ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"width: 100%"']),"\n ",t("span",{staticClass:"hljs-attr"},[":row-class-name"]),"=",t("span",{staticClass:"hljs-string"},['"tableRowClassName"']),">"]),"\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"},["style"]),">"]),t("span",{staticClass:"css"},["\n ",t("span",{staticClass:"hljs-selector-class"},[".el-table"])," ",t("span",{staticClass:"hljs-selector-class"},[".info-row"])," {\n ",t("span",{staticClass:"hljs-attribute"},["background"]),": ",t("span",{staticClass:"hljs-number"},["#c9e5f5"]),";\n }\n\n ",t("span",{staticClass:"hljs-selector-class"},[".el-table"])," ",t("span",{staticClass:"hljs-selector-class"},[".positive-row"])," {\n ",t("span",{staticClass:"hljs-attribute"},["background"]),": ",t("span",{staticClass:"hljs-number"},["#e2f0e4"]),";\n }\n"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["style"]),">"]),"\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 tableRowClassName(row, index) {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (index === ",t("span",{staticClass:"hljs-number"},["1"]),") {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-string"},["'info-row'"]),";\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," ",t("span",{staticClass:"hljs-keyword"},["if"])," (index === ",t("span",{staticClass:"hljs-number"},["3"]),") {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-string"},["'positive-row'"]),";\n }\n ",t("span",{staticClass:"hljs-keyword"},["return"])," ",t("span",{staticClass:"hljs-string"},["''"]),";\n }\n },\n data() {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n ",t("span",{staticClass:"hljs-attr"},["tableData2"]),": [{\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"},["'上海市普陀区金沙江路 1518 弄'"]),"\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"},["'上海市普陀区金沙江路 1518 弄'"]),",\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"},["'上海市普陀区金沙江路 1518 弄'"]),"\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:"gu-ding-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-biao-tou","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",["el-table"]),"元素中定义了",t("code",["height"]),"属性，即可实现固定表头的表格，而不需要额外的代码。"])},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"},['"tableData3"']),"\n ",t("span",{staticClass:"hljs-attr"},["height"]),"=",t("span",{staticClass:"hljs-string"},['"250"']),"\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"},["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"},["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"},["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"]),": ",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"},["'上海市普陀区金沙江路 1518 弄'"]),"\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"},["'上海市普陀区金沙江路 1518 弄'"]),"\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"},["'王小虎'"]),",\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-06'"]),",\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-07'"]),",\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 }\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:"gu-ding-lie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie","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",["fixed"]),"属性，它接受 Boolean 值或者",t("code",["left"]),t("code",["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"},["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-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-column"]),"\n ",t("span",{staticClass:"hljs-attr"},["inline-template"]),"\n ",t("span",{staticClass:"hljs-attr"},[":context"]),"=",t("span",{staticClass:"hljs-string"},['"_self"']),"\n ",t("span",{staticClass:"hljs-attr"},["fixed"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"操作"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"100"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleClick"'])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"'])," ",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"},['"text"'])," ",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"},["span"]),">"]),"\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 ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleClick() {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(",t("span",{staticClass:"hljs-number"},["1"]),");\n }\n },\n\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"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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:"gu-ding-lie-he-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie-he-biao-tou","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",["固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。"])},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"},['"tableData3"']),"\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-attr"},["height"]),"=",t("span",{staticClass:"hljs-string"},['"250"']),">"]),"\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-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",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["'王小虎'"]),",\n ",t("span",{staticClass:"hljs-attr"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["'王小虎'"]),",\n ",t("span",{staticClass:"hljs-attr"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["'王小虎'"]),",\n ",t("span",{staticClass:"hljs-attr"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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:"liu-ti-gao-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#liu-ti-gao-du","aria-hidden":"true"}},["¶"])," 流体高度"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["当数据量动态变化时，可以为 Table 设置一个最大高度。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["通过设置",t("code",["max-height"]),"属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。"])},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"},['"tableData4"']),"\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-attr"},["max-height"]),"=",t("span",{staticClass:"hljs-string"},['"250"']),">"]),"\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-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-column"]),"\n ",t("span",{staticClass:"hljs-attr"},["inline-template"]),"\n ",t("span",{staticClass:"hljs-attr"},[":context"]),"=",t("span",{staticClass:"hljs-string"},['"_self"']),"\n ",t("span",{staticClass:"hljs-attr"},["fixed"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),"\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"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),"\n ",t("span",{staticClass:"hljs-attr"},["@click.native.prevent"]),"=",t("span",{staticClass:"hljs-string"},['"deleteRow($index, tableData4)"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"text"']),"\n ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"small"']),">"]),"\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"},["span"]),">"]),"\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 ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n deleteRow(index, rows) {\n rows.splice(index, ",t("span",{staticClass:"hljs-number"},["1"]),");\n }\n },\n data() {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," {\n ",t("span",{staticClass:"hljs-attr"},["tableData4"]),": [{\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",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["'王小虎'"]),",\n ",t("span",{staticClass:"hljs-attr"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["'王小虎'"]),",\n ",t("span",{staticClass:"hljs-attr"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["'王小虎'"]),",\n ",t("span",{staticClass:"hljs-attr"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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:"duo-ji-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-ji-biao-tou","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",["只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。"])},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"},['"tableData3"']),"\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"},["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"},['"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"])," ",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-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"])," ",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-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-column"]),">"]),"\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",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["'王小虎'"]),",\n ",t("span",{staticClass:"hljs-attr"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["'王小虎'"]),",\n ",t("span",{staticClass:"hljs-attr"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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"},["'王小虎'"]),",\n ",t("span",{staticClass:"hljs-attr"},["province"]),": ",t("span",{staticClass:"hljs-string"},["'上海'"]),",\n ",t("span",{staticClass:"hljs-attr"},["city"]),": ",t("span",{staticClass:"hljs-string"},["'普陀区'"]),",\n ",t("span",{staticClass:"hljs-attr"},["address"]),": ",t("span",{staticClass:"hljs-string"},["'上海市普陀区金沙江路 1518 弄'"]),",\n ",t("span",{staticClass:"hljs-attr"},["zip"]),": ",t("span",{staticClass:"hljs-number"},["200333"]),"\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:"dan-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan","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",["Table 组件提供了单选的支持，只需要配置",t("code",["highlight-current-row"]),"属性即可实现单选。之后由",t("code",["current-change"]),"事件来管理选中时触发的事件，它会传入",t("code",["currentRow"]),"，",t("code",["oldCurrentRow"]),"。如果需要显示索引，可以增加一列",t("code",["el-table-column"]),"，设置",t("code",["type"]),"属性为",t("code",["index"]),"即可显示从 1 开始的索引号。"]);
|
||
},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"},["'上海市普陀区金沙江路 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 ",t("span",{staticClass:"hljs-attr"},["currentRow"]),": ",t("span",{staticClass:"hljs-literal"},["null"]),"\n }\n },\n\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleCurrentChange(val) {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".currentRow = val;\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:"duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan","aria-hidden":"true"}},["¶"])," 多选"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["选择多行数据时使用 Checkbox。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["实现多选非常简单: 手动添加一个",t("code",["el-table-column"]),"，设",t("code",["type"]),"属性为",t("code",["selection"]),"即可。在本例中，为了方便说明其他属性，我们还使用了",t("code",["inline-template"]),"和",t("code",["show-overflow-tooltip"]),"：设置了",t("code",["inline-template"]),"属性后，可以通过调用",t("code",["row"]),"对象中的值取代",t("code",["prop"]),"属性的设置；默认情况下若内容过多会折行显示，若需要单行显示可以使用",t("code",["show-overflow-tooltip"]),"属性，它接受一个",t("code",["Boolean"]),"，为",t("code",["true"]),"时多余的内容会在 hover 时以 tooltip 的形式显示出来。"])},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"},['"tableData3"']),"\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-attr"},["@selection-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleSelectionChange"']),">"]),"\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"},['"selection"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"55"']),">"]),"\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"},["inline-template"]),"\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"},["div"]),">"]),t("span",["{{"])," row.date ",t("span",["}}"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\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"},['"address"']),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"地址"']),"\n ",t("span",{staticClass:"hljs-attr"},["show-overflow-tooltip"]),">"]),"\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"},["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"]),": ",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"},["'上海市普陀区金沙江路 1518 弄'"]),"\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"},["'上海市普陀区金沙江路 1518 弄'"]),"\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"},["'王小虎'"]),",\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-06'"]),",\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-07'"]),",\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"},["multipleSelection"]),": []\n }\n },\n\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleSelectionChange(val) {\n ",t("span",{staticClass:"hljs-keyword"},["this"]),".multipleSelection = val;\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:"pai-xu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pai-xu","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",["sortable"]),"属性即可实现以该列为基准的排序，接受一个",t("code",["Boolean"]),"，默认为",t("code",["false"]),"。在本例中，我们还使用了",t("code",["formatter"]),"属性，它用于格式化指定列的值，接受一个",t("code",["Function"]),"，会传入两个参数：",t("code",["row"]),"和",t("code",["column"]),"，可以根据自己的需求进行处理。"])},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"},["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"},["sortable"]),"\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-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-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 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:"shai-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shai-xuan","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",["filters"]),t("code",["filter-method"]),"属性即可开启该列的筛选，filters 是一个数组，",t("code",["filter-method"]),"是一个方法，它用于决定某些数据是否显示，会传入两个参数：",t("code",["value"]),"和",t("code",["row"]),"。"])},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"},["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"},["sortable"]),"\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-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-column"]),"\n ",t("span",{staticClass:"hljs-attr"},["prop"]),"=",t("span",{staticClass:"hljs-string"},['"tag"']),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"标签"']),"\n ",t("span",{staticClass:"hljs-attr"},["width"]),"=",t("span",{staticClass:"hljs-string"},['"100"']),"\n ",t("span",{staticClass:"hljs-attr"},[":filters"]),"=",t("span",{staticClass:"hljs-string"},["\"[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]\""]),"\n ",t("span",{staticClass:"hljs-attr"},[":filter-method"]),"=",t("span",{staticClass:"hljs-string"},['"filterTag"']),"\n ",t("span",{staticClass:"hljs-attr"},["inline-template"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tag"])," ",t("span",{staticClass:"hljs-attr"},[":type"]),"=",t("span",{staticClass:"hljs-string"},["\"row.tag === '家' ? 'primary' : 'success'\""])," ",t("span",{staticClass:"hljs-attr"},["close-transition"]),">"]),t("span",["{{"]),"row.tag",t("span",["}}"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\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 ",t("span",{staticClass:"hljs-attr"},["tag"]),": ",t("span",{staticClass:"hljs-string"},["'家'"]),"\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 ",t("span",{staticClass:"hljs-attr"},["tag"]),": ",t("span",{staticClass:"hljs-string"},["'公司'"]),"\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 ",t("span",{staticClass:"hljs-attr"},["tag"]),": ",t("span",{staticClass:"hljs-string"},["'家'"]),"\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 ",t("span",{staticClass:"hljs-attr"},["tag"]),": ",t("span",{staticClass:"hljs-string"},["'公司'"]),"\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 filterTag(value, row) {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," row.tag === value;\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:"zi-ding-yi-lie-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-lie-mo-ban","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",["inline-template"])," 属性可以开启自定义模板功能，此时 ",t("code",["el-table-column"])," 的上下文指的是 ",t("code",["el-table"])," 所处的上下文，当然你可以通过 ",t("code",["context"])," 属性指定上下文环境，例如设置成 ",t("code",[':context="_self"'])," 就是指的当前上下文。有些时候我们会把 table 封装在其他组件里，通过 slot 设置 ",t("code",["table-column"]),"，这样的话就要注意设置 ",t("code",["context"]),"。在 column 组件内部，可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据。"])},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"},["inline-template"]),"\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"},["div"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-icon"])," ",t("span",{staticClass:"hljs-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"time"']),">"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-icon"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["span"])," ",t("span",{staticClass:"hljs-attr"},["style"]),"=",t("span",{staticClass:"hljs-string"},['"margin-left: 10px"']),">"]),t("span",["{{"])," row.date ",t("span",["}}"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["span"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\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"},["inline-template"]),"\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-popover"])," ",t("span",{staticClass:"hljs-attr"},["trigger"]),"=",t("span",{staticClass:"hljs-string"},['"hover"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"top"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["p"]),">"]),"姓名: ",t("span",["{{"])," row.name ",t("span",["}}"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["p"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["p"]),">"]),"住址: ",t("span",["{{"])," row.address ",t("span",["}}"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["p"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"reference"'])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"name-wrapper"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),t("span",["{{"])," row.name ",t("span",["}}"]),t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-popover"]),">"]),"\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"},[":context"]),"=",t("span",{staticClass:"hljs-string"},['"_self"']),"\n ",t("span",{staticClass:"hljs-attr"},["inline-template"]),"\n ",t("span",{staticClass:"hljs-attr"},["label"]),"=",t("span",{staticClass:"hljs-string"},['"操作"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),"\n ",t("span",{staticClass:"hljs-attr"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"small"']),"\n ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleEdit($index, row)"']),">"]),"\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"},["size"]),"=",t("span",{staticClass:"hljs-string"},['"small"']),"\n ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"danger"']),"\n ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"handleDelete($index, row)"']),">"]),"\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"},["div"]),">"]),"\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 ",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-style"]),t("td",["行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。"]),t("td",["Function(row, index)/Object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["row-key"]),t("td",["行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的"]),t("td",["Function(row)/String"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["context"]),t("td",["设置上下文环境，例如设置当前上下文就是 ",t("code",["_self"]),"，父级就是 ",t("code",["$parent"]),"，根组件 ",t("code",["$root"]),"。优先读取 column 的 context 属性。"]),t("td",["Object"]),t("td",["-"]),t("td",["Table 所处上下文"])]),t("tr",[t("td",["empty-text"]),t("td",["空数据时显示的文本内容，也可以通过 ",t("code",['slot="empty"'])," 设置"]),t("td",["String"]),t("td"),t("td",["-"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"table-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},["¶"])," Table 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",["select"]),t("td",["当用户手动勾选数据行的 Checkbox 时触发的事件"]),t("td",["selection, row"])]),t("tr",[t("td",["select-all"]),t("td",["当用户手动勾选全选 Checkbox 时触发的事件"]),t("td",["selection"])]),t("tr",[t("td",["selection-change"]),t("td",["当选择项发生变化时会触发该事件"]),t("td",["selection"])]),t("tr",[t("td",["cell-mouse-enter"]),t("td",["当单元格 hover 进入时会触发该事件"]),t("td",["row, column, cell, event"])]),t("tr",[t("td",["cell-mouse-leave"]),t("td",["当单元格 hover 退出时会触发该事件"]),t("td",["row, column, cell, event"])]),t("tr",[t("td",["cell-click"]),t("td",["当某个单元格被点击时会触发该事件"]),t("td",["row, column, cell, event"])]),t("tr",[t("td",["row-click"]),t("td",["当某一行被点击时会触发该事件"]),t("td",["row, event, column"])]),t("tr",[t("td",["row-contextmenu"]),t("td",["当某一行被鼠标右键点击时会触发该事件"]),t("td",["row, event"])]),t("tr",[t("td",["row-dblclick"]),t("td",["当某一行被双击时会触发该事件"]),t("td",["row, event"])]),t("tr",[t("td",["header-click"]),t("td",["当某一列的表头被点击时会触发该事件"]),t("td",["column, event"])]),t("tr",[t("td",["sort-change"]),t("td",["当表格的排序条件发生变化的时候会触发该事件"]),t("td",["{ column, prop, order }"])]),t("tr",[t("td",["filter-change"]),t("td",["当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。"]),t("td",["filters"])]),t("tr",[t("td",["current-change"]),t("td",["当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性"]),t("td",["currentRow, oldCurrentRow"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"table-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},["¶"])," Table Methods"])},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",["clearSelection"]),t("td",["清空用户的选择，当使用 reserve-selection 功能的时候，可能会需要使用此方法"]),t("td",["selection"])]),t("tr",[t("td",["toggleRowSelection"]),t("td",["切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）"]),t("td",["row, selected"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"table-column-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},["¶"])," Table-column 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",["type"]),t("td",["对应列的类型。如果设置了 ",t("code",["selection"])," 则显示多选框，如果设置了 ",t("code",["index"])," 则显示该行的索引（从 1 开始计算）"]),t("td",["string"]),t("td",["selection/index"]),t("td",["—"])]),t("tr",[t("td",["column-key"]),t("td",["column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件"]),t("td",["string"]),t("td",["-"]),t("td",["-"])]),t("tr",[t("td",["label"]),t("td",["显示的标题"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["prop"]),t("td",["对应列内容的字段名，也可以使用 property 属性"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["width"]),t("td",["对应列的宽度"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["min-width"]),t("td",["对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["fixed"]),t("td",["列是否固定在左侧或者右侧，true 表示固定在左侧"]),t("td",["string, boolean"]),t("td",["true, left, right"]),t("td",["—"])]),t("tr",[t("td",["render-header"]),t("td",["列标题 Label 区域渲染使用的 Function"]),t("td",["Function(h, { column, $index })"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["sortable"]),t("td",["对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件"]),t("td",["boolean, string"]),t("td",["true, false, 'custom'"]),t("td",["false"])]),t("tr",[t("td",["sort-method"]),t("td",["对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效"]),t("td",["Function(a, b)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["resizable"]),t("td",["对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["formatter"]),t("td",["用来格式化内容"]),t("td",["Function(row, column)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["show-overflow-tooltip"]),t("td",["当内容过长被隐藏时显示 tooltip"]),t("td",["Boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["context"]),t("td",["设置上下文环境，例如设置当前上下文就是 ",t("code",["_self"]),"，父级就是 ",t("code",["$parent"]),"，根组件 ",t("code",["$root"])]),t("td",["Object"]),t("td",["-"]),t("td",["Table 所处上下文"])]),t("tr",[t("td",["inline-template"]),t("td",["指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息。总共可以获取到 ",t("code",["{ row(当前行), column(当前列), $index(行数), store(table store) }"])," 以及 Table 所处的上下文环境。"]),t("td",["—"]),t("td",["—"]),t("td")]),t("tr",[t("td",["align"]),t("td",["对齐方式"]),t("td",["String"]),t("td",["left/center/right"]),t("td",["left"])]),t("tr",[t("td",["header-align"]),t("td",["表头对齐方式，若不设置该项，则使用表格的对齐方式"]),t("td",["String"]),t("td",["left/center/right"]),t("td",["—"])]),t("tr",[t("td",["class-name"]),t("td",["列的 className"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["selectable"]),t("td",["仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选"]),t("td",["Function(row, index)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["reserve-selection"]),t("td",["仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。"]),t("td",["Boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["filters"]),t("td",["数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。"]),t("td",["Array[{ text, value }]"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["filter-multiple"]),t("td",["数据过滤的选项是否多选"]),t("td",["Boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["filter-method"]),t("td",["数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。"]),t("td",["Function(value, row)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["filtered-value"]),t("td",["选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。"]),t("td",["Array"]),t("td",["—"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(421)},function(s,t,a){var n,e;n=a(422);var l=a(423);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{activeName:"first",activeName2:"first",tabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{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="用户管理" name="first">用户管理</el-tab-pane>\n <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n </el-tabs>\n</template>\n\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:"用户管理",name:"first"}},["用户管理"]),t("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},["配置管理"]),t("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},["角色管理"]),t("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},["定时任务补偿"])])]]),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 v-model="activeName2" type="card" @tab-click="handleClick">\n <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n </el-tabs>\n</template>\n\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.activeName2,expression:"activeName2"}],attrs:{type:"card"},domProps:{value:s.activeName2},on:{"tab-click":s.handleClick,input:function(t){s.activeName2=t}}},[t("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},["用户管理"]),t("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},["配置管理"]),t("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},["角色管理"]),t("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},["定时任务补偿"])])]]),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 @tab-click="handleClick" @tab-remove="handleRemove">\n <el-tab-pane label="用户管理">用户管理</el-tab-pane>\n <el-tab-pane label="配置管理">配置管理</el-tab-pane>\n <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n </el-tabs>\n</template>\n\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:""},on:{"tab-click":s.handleClick,"tab-remove":s.handleRemove}},[t("el-tab-pane",{attrs:{label:"用户管理"}},["用户管理"]),t("el-tab-pane",{attrs:{label:"配置管理"}},["配置管理"]),t("el-tab-pane",{attrs:{label:"角色管理"}},["角色管理"]),t("el-tab-pane",{attrs:{label:"定时任务补偿"}},["定时任务补偿"])])]]),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="用户管理">用户管理</el-tab-pane>\n <el-tab-pane label="配置管理">配置管理</el-tab-pane>\n <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-tabs",{attrs:{type:"border-card"}},[t("el-tab-pane",{attrs:{label:"用户管理"}},["用户管理"]),t("el-tab-pane",{attrs:{label:"配置管理"}},["配置管理"]),t("el-tab-pane",{attrs:{label:"角色管理"}},["角色管理"]),t("el-tab-pane",{attrs:{label:"定时任务补偿"}},["定时任务补偿"])])]),s._m(16),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(17)])]),s._m(18),s._m(19),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs type="border-card">\n <el-tab-pane label="我的行程" :label-content="renderTab">我的行程</el-tab-pane>\n <el-tab-pane label="消息中心">消息中心</el-tab-pane>\n <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n\n',script:'\n export default {\n methods: {\n renderTab(h, tab) {\n return <span><i class="el-icon-date"></i> {tab.label}</span>;\n }\n }\n }\n',style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-tabs",{attrs:{type:"border-card"}},[t("el-tab-pane",{attrs:{label:"我的行程","label-content":s.renderTab}},["我的行程"]),t("el-tab-pane",{attrs:{label:"消息中心"}},["消息中心"]),t("el-tab-pane",{attrs:{label:"角色管理"}},["角色管理"]),t("el-tab-pane",{attrs:{label:"定时任务补偿"}},["定时任务补偿"])])]),s._m(20),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(21)])]),s._m(22),s._m(23),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div style="margin-bottom: 20px;">\n <el-button size="small" @click="tabs.push({ name: \'Tab \' + ++tabIndex, title: \'new Tab\', content: \'new Tab content\' })">add tab</el-button>\n</div>\n<el-tabs type="card" closable>\n <el-tab-pane v-for="(item, index) in tabs" :label="item.title" :name="item.name">{{item.content}}</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("div",{attrs:{style:"margin-bottom: 20px;"}},[t("el-button",{attrs:{size:"small"},on:{click:function(t){s.tabs.push({name:"Tab "+ ++s.tabIndex,title:"new Tab",content:"new Tab content"})}}},["add tab"])]),t("el-tabs",{attrs:{type:"card",closable:""}},[s._l(s.tabs,function(a,n){return t("el-tab-pane",{attrs:{label:a.title,name:a.name}},[s._s(a.content)])})])]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(24)])]),s._m(25),s._m(26),s._m(27),s._m(28),s._m(29),s._m(30)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"tabs-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-biao-qian-ye","aria-hidden":"true"}},["¶"])," Tabs 标签页"])},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("p",["Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 ",t("code",["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-tabs"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"activeName"'])," ",t("span",{staticClass:"hljs-attr"},["@tab-click"]),"=",t("span",{staticClass:"hljs-string"},['"handleClick"']),">"]),"\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-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"first"']),">"]),"用户管理",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-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"second"']),">"]),"配置管理",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-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"third"']),">"]),"角色管理",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-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"fourth"']),">"]),"定时任务补偿",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"},["template"]),">"]),"\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"},["activeName"]),": ",t("span",{staticClass:"hljs-string"},["'first'"]),"\n };\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleClick(tab, event) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(tab, event);\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-xiang-qia-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-xiang-qia-yang-shi","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",["type"])," 属性为 ",t("code",["card"])," 就可以使选项卡改变为标签风格。"])},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-tabs"])," ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"activeName2"'])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"card"'])," ",t("span",{staticClass:"hljs-attr"},["@tab-click"]),"=",t("span",{staticClass:"hljs-string"},['"handleClick"']),">"]),"\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-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"first"']),">"]),"用户管理",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-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"second"']),">"]),"配置管理",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-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"third"']),">"]),"角色管理",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-attr"},["name"]),"=",t("span",{staticClass:"hljs-string"},['"fourth"']),">"]),"定时任务补偿",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"},["template"]),">"]),"\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"},["activeName"]),": ",t("span",{staticClass:"hljs-string"},["'first'"]),"\n };\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleClick(tab, event) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(tab, event);\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:"ke-guan-bi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-guan-bi","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",["closable"])," 属性来打开 ",t("code",["Tabs"])," 的可关闭标签效果, ",t("code",["closable"])," 也可以设置在 ",t("code",["Tab Panel"])," 中实现部分标签页的可关闭效果。"])},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-tabs"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"card"'])," ",t("span",{staticClass:"hljs-attr"},["closable"])," ",t("span",{staticClass:"hljs-attr"},["@tab-click"]),"=",t("span",{staticClass:"hljs-string"},['"handleClick"'])," ",t("span",{staticClass:"hljs-attr"},["@tab-remove"]),"=",t("span",{staticClass:"hljs-string"},['"handleRemove"']),">"]),"\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-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"},["template"]),">"]),"\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 handleRemove(tab) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(tab);\n },\n handleClick(tab, event) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(tab, event);\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:"qia-pian-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","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",["type"]),"设置为",t("code",["border-card"]),"。"])},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-tabs"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"border-card"']),">"]),"\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-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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"zi-ding-yi-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-qian-ye","aria-hidden":"true"}},["¶"])," 自定义标签页"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["可以通过 ",t("code",["label-content"])," 属性来实现自定义标签页的内容"])},function(){var s=this,t=s.$createElement;s._c;return t("p",[t("code",["label-content"])," 是一个 render function，在这个方法里返回的 vnode 会被渲染到标签页中。"])},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-tabs"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"border-card"']),">"]),"\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-attr"},[":label-content"]),"=",t("span",{staticClass:"hljs-string"},['"renderTab"']),">"]),"我的行程",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-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",{staticClass:"hljs-name"},["el-tab-pane"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tabs"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"tabs-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},["¶"])," Tabs 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",["type"]),t("td",["风格类型"]),t("td",["string"]),t("td",["card/border-card"]),t("td",["—"])]),t("tr",[t("td",["closable"]),t("td",["标签是否可关闭"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["active-name(deprecated)"]),t("td",["选中选项卡的 name"]),t("td",["string"]),t("td",["—"]),t("td",["第一个选项卡的 name"])]),t("tr",[t("td",["value"]),t("td",["绑定值，选中选项卡的 name"]),t("td",["string"]),t("td",["—"]),t("td",["第一个选项卡的 name"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"tabs-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},["¶"])," Tabs 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",["tab-click"]),t("td",["tab 被选中的钩子"]),t("td",["被选中的标签 tab 实例"])]),t("tr",[t("td",["tab-remove"]),t("td",["tab 被删除的钩子"]),t("td",["被删除的标签 tab 实例"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"tab-pane-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},["¶"])," Tab-pane 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("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["label-content"]),t("td",["选项卡的标题的渲染 Function"]),t("td",["Function(h, tab:vueInstance)"]),t("td",["-"]),t("td",["-"])]),t("tr",[t("td",["disabled"]),t("td",["是否禁用"]),t("td",["boolean"]),t("td",["-"]),t("td",["false"])]),t("tr",[t("td",["name"]),t("td",["与选项卡 activeName 对应的标识符，表示选项卡别名"]),t("td",["string"]),t("td",["—"]),t("td",["该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'"])]),t("tr",[t("td",["closable"]),t("td",["标签是否可关闭"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])])])])}]}},function(s,t,a){s.exports=a(425)},function(s,t,a){var n,e;a(426),n=a(428);var l=a(429);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{tags:[{key:1,name:"标签一",type:""},{key:2,name:"标签二",type:"gray"},{key:5,name:"标签三",type:"primary"},{key:3,name:"标签四",type:"success"},{key:4,name:"标签五",type:"warning"},{key:6,name:"标签六",type:"danger"}]}},methods:{handleClose:function(s){this.tags.splice(this.tags.indexOf(s),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),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag>标签一</el-tag>\n<el-tag type="gray">标签二</el-tag>\n<el-tag type="primary">标签三</el-tag>\n<el-tag type="success">标签四</el-tag>\n<el-tag type="warning">标签五</el-tag>\n<el-tag type="danger">标签六</el-tag>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-tag",["标签一"]),t("el-tag",{attrs:{type:"gray"}},["标签二"]),t("el-tag",{attrs:{type:"primary"}},["标签三"]),t("el-tag",{attrs:{type:"success"}},["标签四"]),t("el-tag",{attrs:{type:"warning"}},["标签五"]),t("el-tag",{attrs:{type:"danger"}},["标签六"])]),s._m(3),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(4)])]),s._m(5),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag v-for="tag in tags" :closable="true" :type="tag.type" :key="tag" :close-transition="false" @close="handleClose(tag)">\n{{tag.name}}\n</el-tag>\n\n\n',script:"\n export default {\n data() {\n return {\n tags: [\n { key: 1, name: '标签一', type: '' },\n { key: 2, name: '标签二', type: 'gray' },\n { key: 5, name: '标签三', type: 'primary' },\n { key: 3, name: '标签四', type: 'success' },\n { key: 4, name: '标签五', type: 'warning' },\n { key: 6, name: '标签六', type: 'danger' }\n ]\n };\n },\n methods: {\n handleClose(tag) {\n this.tags.splice(this.tags.indexOf(tag), 1);\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[s._l(s.tags,function(a){return t("el-tag",{key:a,attrs:{closable:!0,type:a.type,"close-transition":!1},on:{close:function(t){s.handleClose(a)}}},["\n"+s._s(a.name)+"\n"])})]),s._m(6),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(7)])]),s._m(8),s._m(9),s._m(10),s._m(11)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"tag-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag-biao-qian","aria-hidden":"true"}},["¶"])," Tag 标签"])},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",["由",t("code",["type"]),"属性来选择tag的类型，也可以通过",t("code",["color"]),"属性来自定义背景色。"])},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-tag"]),">"]),"标签一",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tag"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"gray"']),">"]),"标签二",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tag"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"primary"']),">"]),"标签三",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tag"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"success"']),">"]),"标签四",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tag"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"warning"']),">"]),"标签五",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-tag"])," ",t("span",{staticClass:"hljs-attr"},["type"]),"=",t("span",{staticClass:"hljs-string"},['"danger"']),">"]),"标签六",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\n"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"ke-yi-chu-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-yi-chu-biao-qian","aria-hidden":"true"}},["¶"])," 可移除标签"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["设置",t("code",["closable"]),"属性来定义一个可移除的标签，接受一个",t("code",["Boolean"]),"，设置为",t("code",["true"]),"即可。默认的标签移除时会附带渐变动画，如果不想使用，可以设置",t("code",["close-transition"]),"属性，它接受一个",t("code",["Boolean"]),"，true 为关闭。设置",t("code",["close"]),"事件可以处理关闭后的回调函数。"])},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-tag"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-for"]),"=",t("span",{staticClass:"hljs-string"},['"tag in tags"']),"\n ",t("span",{staticClass:"hljs-attr"},[":closable"]),"=",t("span",{staticClass:"hljs-string"},['"true"']),"\n ",t("span",{staticClass:"hljs-attr"},[":type"]),"=",t("span",{staticClass:"hljs-string"},['"tag.type"']),"\n ",t("span",{staticClass:"hljs-attr"},[":key"]),"=",t("span",{staticClass:"hljs-string"},['"tag"']),"\n ",t("span",{staticClass:"hljs-attr"},[":close-transition"]),"=",t("span",{staticClass:"hljs-string"},['"false"']),"\n ",t("span",{staticClass:"hljs-attr"},["@close"]),"=",t("span",{staticClass:"hljs-string"},['"handleClose(tag)"']),"\n>"]),"\n",t("span",["{{"]),"tag.name",t("span",["}}"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-tag"]),">"]),"\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"},["tags"]),": [\n { ",t("span",{staticClass:"hljs-attr"},["key"]),": ",t("span",{staticClass:"hljs-number"},["1"]),", ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'标签一'"]),", ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["''"])," },\n { ",t("span",{staticClass:"hljs-attr"},["key"]),": ",t("span",{staticClass:"hljs-number"},["2"]),", ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'标签二'"]),", ",t("span",{staticClass:"hljs-attr"},["type"]),": ",t("span",{staticClass:"hljs-string"},["'gray'"])," },\n { ",t("span",{staticClass:"hljs-attr"},["key"]),": ",t("span",{staticClass:"hljs-number"},["5"]),", ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'标签三'"]),", ",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"},["'标签四'"]),", ",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"},["'标签五'"]),", ",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"},["'标签六'"]),", ",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",["参数"]),t("th",["说明"]),t("th",["类型"]),t("th",["可选值"]),t("th",["默认值"])])]),t("tbody",[t("tr",[t("td",["type"]),t("td",["主题"]),t("td",["string"]),t("td",["primary/gray/success/warning/danger"]),t("td",["—"])]),t("tr",[t("td",["closable"]),t("td",["是否可关闭"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["close-transition"]),t("td",["是否禁用关闭时的渐变动画"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["hit"]),t("td",["是否有边框描边"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["color"]),t("td",["背景色"]),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",["事件名称"]),t("th",["说明"]),t("th",["回调参数"])])]),t("tbody",[t("tr",[t("td",["close"]),t("td",["关闭tag时触发的事件"]),t("td",["—"])])])])}]}},function(s,t,a){s.exports=a(431)},function(s,t,a){var n,e;a(432),n=a(434);var l=a(435);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{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=\"选择时间\">\n</el-time-select>\n\n\n",script:"\n export default {\n data() {\n return {\n value1: ''\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-time-select",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"选择时间"},domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})]),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-time-picker v-model="value2" :picker-options="{\n selectableRange: \'18:30:00 - 20:30:00\'\n }" placeholder="任意时间点">\n </el-time-picker>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value2: new Date(2016, 9, 10, 18, 40)\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"任意时间点"},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})]]),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-time-select placeholder=\"起始时间\" v-model=\"startTime\" :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\">\n </el-time-select>\n <el-time-select placeholder=\"结束时间\" v-model=\"endTime\" :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\">\n </el-time-select>\n</template>\n\n\n",script:"\n export default {\n data() {\n return {\n startTime: '',\n endTime: ''\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-time-select",{directives:[{name:"model",rawName:"v-model",value:s.startTime,expression:"startTime"}],attrs:{placeholder:"起始时间","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},domProps:{value:s.startTime},on:{input:function(t){s.startTime=t}}}),t("el-time-select",{directives:[{name:"model",rawName:"v-model",value:s.endTime,expression:"endTime"}],attrs:{placeholder:"结束时间","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},domProps:{value:s.endTime},on:{input:function(t){s.endTime=t}}})]]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(12)])]),s._m(13),s._m(14),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-time-picker is-range v-model="value3" placeholder="选择时间范围">\n </el-time-picker>\n</template>\n\n\n',script:"\n export default {\n data() {\n return {\n value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n };\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{"is-range":"",placeholder:"选择时间范围"},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})]]),s._m(15),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(16)])]),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"timepicker-shi-jian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker-shi-jian-xuan-ze-qi","aria-hidden":"true"}},["¶"])," TimePicker 时间选择器"])},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:"gu-ding-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-dian","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",["使用 el-time-select 标签，分别通过",t("code",["star"]),"、",t("code",["end"]),"和",t("code",["step"]),"指定可选的起始时间、结束时间和步长"])},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-time-select"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value1"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},["\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\""]),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"选择时间"']),">"]),"\n",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-time-select"]),">"]),"\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"},["value1"]),": ",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:"ren-yi-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-dian","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",["使用 el-time-picker 标签，通过",t("code",["selectableRange"]),"限制可选时间范围"])},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-time-picker"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value2"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},["\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\""]),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"任意时间点"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-time-picker"]),">"]),"\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"},["value2"]),": ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"(",t("span",{staticClass:"hljs-number"},["2016"]),", ",t("span",{staticClass:"hljs-number"},["9"]),", ",t("span",{staticClass:"hljs-number"},["10"]),", ",t("span",{staticClass:"hljs-number"},["18"]),", ",t("span",{staticClass:"hljs-number"},["40"]),")\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:"gu-ding-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-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("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-time-select"]),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"起始时间"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"startTime"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},["\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\""]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-time-select"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-time-select"]),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"结束时间"']),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"endTime"']),"\n ",t("span",{staticClass:"hljs-attr"},[":picker-options"]),"=",t("span",{staticClass:"hljs-string"},["\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\""]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-time-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"},["startTime"]),": ",t("span",{staticClass:"hljs-string"},["''"]),",\n ",t("span",{staticClass:"hljs-attr"},["endTime"]),": ",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:"ren-yi-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-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("p",["添加",t("code",["is-range"]),"属性即可选择时间范围"])},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-time-picker"]),"\n ",t("span",{staticClass:"hljs-attr"},["is-range"]),"\n ",t("span",{staticClass:"hljs-attr"},["v-model"]),"=",t("span",{staticClass:"hljs-string"},['"value3"']),"\n ",t("span",{staticClass:"hljs-attr"},["placeholder"]),"=",t("span",{staticClass:"hljs-string"},['"选择时间范围"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["el-time-picker"]),">"]),"\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"},["value3"]),": [",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"(",t("span",{staticClass:"hljs-number"},["2016"]),", ",t("span",{staticClass:"hljs-number"},["9"]),", ",t("span",{staticClass:"hljs-number"},["10"]),", ",t("span",{staticClass:"hljs-number"},["8"]),", ",t("span",{staticClass:"hljs-number"},["40"]),"), ",t("span",{staticClass:"hljs-keyword"},["new"])," ",t("span",{staticClass:"hljs-built_in"},["Date"]),"(",t("span",{staticClass:"hljs-number"},["2016"]),", ",t("span",{staticClass:"hljs-number"},["9"]),", ",t("span",{staticClass:"hljs-number"},["10"]),", ",t("span",{staticClass:"hljs-number"},["9"]),", ",t("span",{staticClass:"hljs-number"},["40"]),")]\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",["format"]),t("td",["时间格式化(TimePicker)"]),t("td",["string"]),t("td",["小时：",t("code",["HH"]),"，分：",t("code",["mm"]),"，秒：",t("code",["ss"])]),t("td",["'HH:mm:ss'"])]),t("tr",[t("td",["value"]),t("td",["绑定值"]),t("td",["TimePicker: DateTimeSelect: String"]),t("td",["-"]),t("td",["-"])]),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",["TimePicker 下拉框的类名"]),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:"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" content="Right Bottom 提示文字" placement="right-end">\n <el-button>右下</el-button>\n </el-tooltip>\n </div>\n <div class="bottom">\n <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">\n <el-button>下左</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">\n <el-button>下边</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">\n <el-button>下右</el-button>\n </el-tooltip>\n </div>\n</div>\n\n\n',script:null,style:"\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 60px;\n }\n\n .right {\n float: right;\n width: 60px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n \n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n }\n"}}},[t("div",{slot:"source",staticClass:"source"},[t("div",{staticClass:"box"},[t("div",{staticClass:"top"},[t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left 提示文字",placement:"top-start"}},[t("el-button",["上左"])]),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center 提示文字",placement:"top"}},[t("el-button",["上边"])]),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right 提示文字",placement:"top-end"}},[t("el-button",["上右"])])]),t("div",{staticClass:"left"},[t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top 提示文字",placement:"left-start"}},[t("el-button",["左上"])]),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center 提示文字",placement:"left"}},[t("el-button",["左边"])]),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom 提示文字",placement:"left-end"}},[t("el-button",["左下"])])]),t("div",{staticClass:"right"},[t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top 提示文字",placement:"right-start"}},[t("el-button",["右上"])]),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center 提示文字",placement:"right"}},[t("el-button",["右边"])]),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom 提示文字",placement:"right-end"}},[t("el-button",["右下"])])]),t("div",{staticClass:"bottom"},[t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left 提示文字",placement:"bottom-start"}},[t("el-button",["下左"])]),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center 提示文字",placement:"bottom"}},[t("el-button",["下边"])]),t("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right 提示文字",placement:"bottom-end"}},[t("el-button",["下右"])])])])]),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:'<el-tooltip content="Top center" placement="top">\n <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n <el-button>Light</el-button>\n</el-tooltip>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[t("el-button",["Dark"])]),t("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[t("el-button",["Light"])])]),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:'<el-tooltip placement="top">\n <div slot="content">多行信息<br>第二行信息</div>\n <el-button>Top center</el-button>\n</el-tooltip>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-tooltip",{attrs:{placement:"top"}},[t("div",{slot:"content"},["多行信息",s._m(12),"第二行信息"]),t("el-button",["Top center"])])]),s._m(13),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(14)])]),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),t("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">\n <el-button @click="disabled = true">点击关闭 tooltip 功能</el-button>\n </el-tooltip>\n</template>\n',script:null,style:null}}},[t("div",{slot:"source",staticClass:"source"},[[t("el-tooltip",{attrs:{disabled:s.disabled,content:"点击关闭 tooltip 功能",placement:"bottom",effect:"light"}},[t("el-button",{on:{click:function(t){s.disabled=!0}}},["点击关闭 tooltip 功能"])])]]),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(21)])]),s._m(22),s._m(23)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"tooltip-wen-zi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-wen-zi-ti-shi","aria-hidden":"true"}},["¶"])," Tooltip 文字提示"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["常用于展示鼠标 hover 时的提示信息。"])},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",["在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["使用",t("code",["content"]),"属性来决定",t("code",["hover"]),"时的提示信息。由",t("code",["placement"]),"属性决定展示效果：",t("code",["placement"]),"属性值为：",t("code",["方向-对齐位置"]),"；四个方向：",t("code",["top"]),"、",t("code",["left"]),"、",t("code",["right"]),"、",t("code",["bottom"]),"；三种对齐位置：",t("code",["start"]),", ",t("code",["end"]),"，默认为空。如",t("code",['placement="left-end"']),"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。"])},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"},['"box"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"top"']),">"]),"\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"},['"Top Left 提示文字"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"top-start"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-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-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"},['"Top Center 提示文字"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"top"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-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-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"},['"Top Right 提示文字"'])," ",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"]),">"]),"上右",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 提示文字"'])," ",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"]),">"]),"左上",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 提示文字"'])," ",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"]),">"]),"左边",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 提示文字"'])," ",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"]),">"]),"左下",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:"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"},['"Right Top 提示文字"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"right-start"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-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-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"},['"Right Center 提示文字"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"right"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-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-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"},['"Right Bottom 提示文字"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"right-end"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-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-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"},['"bottom"']),">"]),"\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"},['"Bottom Left 提示文字"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"bottom-start"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-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-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"},['"Bottom Center 提示文字"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"bottom"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-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-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"},['"Bottom Right 提示文字"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"bottom-end"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-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-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"]),">"]),"\n\n",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["style"]),">"]),t("span",{staticClass:"undefined"},["\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 60px;\n }\n\n .right {\n float: right;\n width: 60px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n \n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n }\n"]),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:"zhu-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti","aria-hidden":"true"}},["¶"])," 主题"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Tooltip 组件提供了两个不同的主题：",t("code",["dark"]),"和",t("code",["light"]),"。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["通过设置",t("code",["effect"]),"属性来改变主题，默认为",t("code",["dark"]),"。"])},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-tooltip"])," ",t("span",{staticClass:"hljs-attr"},["content"]),"=",t("span",{staticClass:"hljs-string"},['"Top center"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"top"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"Dark",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"},["content"]),"=",t("span",{staticClass:"hljs-string"},['"Bottom center"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"bottom"'])," ",t("span",{staticClass:"hljs-attr"},["effect"]),"=",t("span",{staticClass:"hljs-string"},['"light"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"Light",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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"geng-duo-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#geng-duo-content","aria-hidden":"true"}},["¶"])," 更多 Content"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["展示多行文本或者是设置文本内容的格式"])},function(){var s=this,t=s.$createElement;s._c;return t("br")},function(){var s=this,t=s.$createElement;s._c;return t("p",["用具名 slot 分发",t("code",["content"]),"，替代",t("code",["tooltip"]),"中的",t("code",["content"]),"属性。"])},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-tooltip"])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"top"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["div"])," ",t("span",{staticClass:"hljs-attr"},["slot"]),"=",t("span",{staticClass:"hljs-string"},['"content"']),">"]),"多行信息",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["br"]),"/>"]),"第二行信息",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["div"]),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"]),">"]),"Top center",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"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"gao-ji-kuo-zhan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gao-ji-kuo-zhan","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",["transition"]),"属性可以定制显隐的动画效果，默认为",t("code",["fade-in-linear"]),"。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["如果需要关闭",t("code",["tooltip"]),"功能，",t("code",["disabled"]),"属性可以满足这个需求，它接受一个",t("code",["Boolean"]),"，设置为",t("code",["true"]),"即可。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["事实上，这是基于 ",t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},["Vue-popper"])," 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["当然，Tooltip 组件实际上十分强大，文末的API文档会做一一说明。"])},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-tooltip"])," ",t("span",{staticClass:"hljs-attr"},[":disabled"]),"=",t("span",{staticClass:"hljs-string"},['"disabled"'])," ",t("span",{staticClass:"hljs-attr"},["content"]),"=",t("span",{staticClass:"hljs-string"},['"点击关闭 tooltip 功能"'])," ",t("span",{staticClass:"hljs-attr"},["placement"]),"=",t("span",{staticClass:"hljs-string"},['"bottom"'])," ",t("span",{staticClass:"hljs-attr"},["effect"]),"=",t("span",{staticClass:"hljs-string"},['"light"']),">"]),"\n ",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["el-button"])," ",t("span",{staticClass:"hljs-attr"},["@click"]),"=",t("span",{staticClass:"hljs-string"},['"disabled = true"']),">"]),"点击关闭 tooltip 功能",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"},["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",["参数"]),t("th",["说明"]),t("th",["类型"]),t("th",["可选值"]),t("th",["默认值"])])]),t("tbody",[t("tr",[t("td",["effect"]),t("td",["默认提供的主题"]),t("td",["String"]),t("td",["dark/light"]),t("td",["dark"])]),t("tr",[t("td",["content"]),t("td",["显示的内容，也可以通过 ",t("code",["slot#content"])," 传入 DOM"]),t("td",["String"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["placement"]),t("td",["Tooltip 的出现位置"]),t("td",["String"]),t("td",["top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end"]),t("td",["bottom"])]),t("tr",[t("td",["value(v-model)"]),t("td",["状态是否可见"]),t("td",["Boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["disabled"]),t("td",["Tooltip 是否可用"]),t("td",["Boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["offset"]),t("td",["出现位置的偏移量"]),t("td",["Number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["transition"]),t("td",["定义渐变动画"]),t("td",["String"]),t("td",["—"]),t("td",[t("code",["fade-in-linear"])])]),t("tr",[t("td",["visible-arrow"]),t("td",["是否显示 Tooltip 箭头，更多参数可见",t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},["Vue-popper"])]),t("td",["Boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["options"]),t("td",[t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},["popper.js"])," 的参数"]),t("td",["Object"]),t("td",["参考 ",t("a",{attrs:{href:"https://popper.js.org/documentation.html"}},["popper.js"])," 文档"]),t("td",[t("code",["{ boundariesElement: 'body', gpuAcceleration: false }"])])]),t("tr",[t("td",["openDelay"]),t("td",["延迟出现，单位毫秒"]),t("td",["Number"]),t("td",["—"]),t("td",["0"])]),t("tr",[t("td",["manual"]),t("td",["手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效"]),t("td",["Boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["popper-class"]),t("td",["为 Tooltip 的 popper 添加类名"]),t("td",["String"]),t("td",["-"]),t("td",["-"])])])])}]}},function(s,t,a){s.exports=a(443)},function(s,t,a){var n,e;a(444),n=a(446);var l=a(447);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;var a=[{label:"一级 1",children:[{label:"二级 1-1"}]},{label:"一级 2",children:[{label:"二级 2-1"},{label:"二级 2-2"}]},{label:"一级 3",children:[{label:"二级 3-1"},{label:"二级 3-2"}]}],n=[{name:"region1"},{name:"region2"}],e=1,l={label:"name",children:"zones"},i={children:"children",label:"label"};t.default={methods:{handleCheckChange:function(s,t,a){console.log(s,t,a)},handleNodeClick:function(s){console.log(s)},loadNode:function(s,t){if(0===s.level)return t([{name:"region1"},{name:"region2"}]);if(s.level>3)return t([]);var a;a="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s;s=a?[{name:"zone"+e++},{name:"zone"+e++}]:[],t(s)},500)}},data:function(){return{data:a,regions:n,defaultProps:i,props:l}}}},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-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>\n\n\n',script:"\n export default {\n data() {\n return {\n data: [{\n label: '一级 1',\n children: [{\n label: '二级 1-1'\n }]\n }, {\n label: '一级 2',\n children: [{\n label: '二级 2-1'\n }, {\n label: '二级 2-2'\n }]\n }, {\n label: '一级 3',\n children: [{\n label: '二级 3-1'\n }, {\n label: '二级 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleNodeClick(data) {\n console.log(data);\n }\n }\n };\n",
|
||
style:null}}},[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 }, {\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'一级 2'"]),",\n ",t("span",{staticClass:"hljs-attr"},["children"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'二级 2-1'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'二级 2-2'"]),"\n }]\n }, {\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'一级 3'"]),",\n ",t("span",{staticClass:"hljs-attr"},["children"]),": [{\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'二级 3-1'"]),"\n }, {\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'二级 3-2'"]),"\n }]\n }],\n ",t("span",{staticClass:"hljs-attr"},["defaultProps"]),": {\n ",t("span",{staticClass:"hljs-attr"},["children"]),": ",t("span",{staticClass:"hljs-string"},["'children'"]),",\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'label'"]),"\n }\n };\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleNodeClick(data) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(data);\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:"ke-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-ze","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"]),"\n ",t("span",{staticClass:"hljs-attr"},[":data"]),"=",t("span",{staticClass:"hljs-string"},['"regions"']),"\n ",t("span",{staticClass:"hljs-attr"},[":props"]),"=",t("span",{staticClass:"hljs-string"},['"props"']),"\n ",t("span",{staticClass:"hljs-attr"},[":load"]),"=",t("span",{staticClass:"hljs-string"},['"loadNode"']),"\n ",t("span",{staticClass:"hljs-attr"},["lazy"]),"\n ",t("span",{staticClass:"hljs-attr"},["show-checkbox"]),"\n ",t("span",{staticClass:"hljs-attr"},["@check-change"]),"=",t("span",{staticClass:"hljs-string"},['"handleCheckChange"']),">"]),"\n",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"},["regions"]),": [{\n ",t("span",{staticClass:"hljs-string"},["'name'"]),": ",t("span",{staticClass:"hljs-string"},["'region1'"]),"\n }, {\n ",t("span",{staticClass:"hljs-string"},["'name'"]),": ",t("span",{staticClass:"hljs-string"},["'region2'"]),"\n }],\n ",t("span",{staticClass:"hljs-attr"},["props"]),": {\n ",t("span",{staticClass:"hljs-attr"},["label"]),": ",t("span",{staticClass:"hljs-string"},["'name'"]),",\n ",t("span",{staticClass:"hljs-attr"},["children"]),": ",t("span",{staticClass:"hljs-string"},["'zones'"]),"\n },\n ",t("span",{staticClass:"hljs-attr"},["count"]),": ",t("span",{staticClass:"hljs-number"},["1"]),"\n };\n },\n ",t("span",{staticClass:"hljs-attr"},["methods"]),": {\n handleCheckChange(data, checked, indeterminate) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n ",t("span",{staticClass:"hljs-built_in"},["console"]),".log(data);\n },\n loadNode(node, resolve) {\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (node.level === ",t("span",{staticClass:"hljs-number"},["0"]),") {\n ",t("span",{staticClass:"hljs-keyword"},["return"])," resolve([{ ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'region1'"])," }, { ",t("span",{staticClass:"hljs-attr"},["name"]),": ",t("span",{staticClass:"hljs-string"},["'region2'"])," }]);\n }\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (node.level > ",t("span",{staticClass:"hljs-number"},["3"]),") ",t("span",{staticClass:"hljs-keyword"},["return"])," resolve([]);\n\n ",t("span",{staticClass:"hljs-keyword"},["var"])," hasChild;\n ",t("span",{staticClass:"hljs-keyword"},["if"])," (node.data.name === ",t("span",{staticClass:"hljs-string"},["'region1'"]),") {\n hasChild = ",t("span",{staticClass:"hljs-literal"},["true"]),";\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," ",t("span",{staticClass:"hljs-keyword"},["if"])," (node.data.name === ",t("span",{staticClass:"hljs-string"},["'region2'"]),") {\n hasChild = ",t("span",{staticClass:"hljs-literal"},["false"]),";\n } ",t("span",{staticClass:"hljs-keyword"},["else"])," {\n hasChild = ",t("span",{staticClass:"hljs-built_in"},["Math"]),".random() > ",t("span",{staticClass:"hljs-number"},["0.5"]),";\n }\n\n setTimeout(",t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},["()"])," =>"])," {\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",["参数"]),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",["empty-text"]),t("td",["内容为空的时候展示的文本"]),t("td",["String"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["node-key"]),t("td",["每个树节点用来作为唯一标识的属性，整颗树应该是唯一的"]),t("td",["String"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["props"]),t("td",["配置选项，具体看下表"]),t("td",["object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["load"]),t("td",["加载子树数据的方法"]),t("td",["function(node, resolve)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["render-content"]),t("td",["树节点的内容区的渲染 Function"]),t("td",["Function(h, { node }"]),t("td",["-"]),t("td",["-"])]),t("tr",[t("td",["highlight-current"]),t("td",["是否高亮当前选中节点，默认值是 false。"]),t("td",["boolean"]),t("td",["-"]),t("td",["false"])]),t("tr",[t("td",["current-node-key"]),t("td",["当前选中节点的 key，是一个只写属性"]),t("td",["string, number"]),t("td",["-"]),t("td",["-"])]),t("tr",[t("td",["default-expand-all"]),t("td",["是否默认展开所有节点"]),t("td",["boolean"]),t("td",["-"]),t("td",["false"])]),t("tr",[t("td",["expand-on-click-node"]),t("td",["是否在点击节点的时候展开或者收缩节点，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。"]),t("td",["boolean"]),t("td",["-"]),t("td",["false"])]),t("tr",[t("td",["auto-expand-parent"]),t("td",["展开子节点的时候是否自动展开父节点"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["default-expanded-keys"]),t("td",["默认展开的节点的 key 的数组"]),t("td",["array"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["show-checkbox"]),t("td",["节点是否可被选择"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["check-strictly"]),t("td",["在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["default-checked-keys"]),t("td",["默认勾选的节点的 key 的数组"]),t("td",["array"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["filter-node-method"]),t("td",["对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏"]),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=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("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["children"]),t("td",["指定子树为节点对象的某个属性值"]),t("td",["string"]),t("td",["—"]),t("td",["—"])])])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},["¶"])," 方法"])},function(){var s=this,t=s.$createElement;s._c;return t("p",[t("code",["Tree"])," 拥有如下方法，返回目前被选中的节点数组："])},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",["filter"]),t("td",["对树节点进行筛选操作"]),t("td",["接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数"])]),t("tr",[t("td",["getCheckedNodes"]),t("td",["若节点可被选择（即 ",t("code",["show-checkbox"])," 为 ",t("code",["true"]),"），则返回目前被选中的节点所组成的数组"]),t("td",["(leafOnly) 接收一个 boolean 类型的参数，若为 ",t("code",["true"])," 则仅返回被选中的叶子节点，默认值为 ",t("code",["false"])])]),t("tr",[t("td",["setCheckedNodes"]),t("td",["设置目前勾选的节点，使用此方法必须设置 node-key 属性"]),t("td",["(nodes) 接收勾选节点数据的数组"])]),t("tr",[t("td",["getCheckedKeys"]),t("td",["若节点可被选择（即 ",t("code",["show-checkbox"])," 为 ",t("code",["true"]),"），则返回目前被选中的节点所组成的数组"]),t("td",["(leafOnly) 接收一个 boolean 类型的参数，若为 ",t("code",["true"])," 则仅返回被选中的叶子节点的 keys，默认值为 ",t("code",["true"])])]),t("tr",[t("td",["setCheckedKeys"]),t("td",["通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性"]),t("td",["(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 ",t("code",["true"])," 则仅设置叶子节点的选中状态，默认值为 ",t("code",["true"])])]),t("tr",[t("td",["setChecked"]),t("td",["通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性"]),t("td",["(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 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",["事件名称"]),t("th",["说明"]),t("th",["回调参数"])])]),t("tbody",[t("tr",[t("td",["node-click"]),t("td",["节点被点击时的回调"]),t("td",["共三个参数，依次为：传递给 ",t("code",["data"])," 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。"])]),t("tr",[t("td",["check-change"]),t("td",["节点选中状态发生变化时的回调"]),t("td",["共三个参数，依次为：传递给 ",t("code",["data"])," 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点"])]),t("tr",[t("td",["current-change"]),t("td",["当前选中节点变化时触发的事件"]),t("td",["共两个参数，依次为：当前节点的数据，当前节点的 Node 对象"])])])])}]}},function(s,t,a){s.exports=a(449)},function(s,t,a){var n,e;a(450);var l=a(452);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:"typography-zi-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#typography-zi-ti","aria-hidden":"true"}},["¶"])," Typography 字体"]),t("p",["我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。"]),t("h3",{attrs:{id:"zhong-wen-zi-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhong-wen-zi-ti","aria-hidden":"true"}},["¶"])," 中文字体"]),t("div",{staticClass:"demo-typo-box typo-PingFang"},["\n 和畅惠风\n ",t("div",{staticClass:"name"},["PingFang SC"])]),t("div",{staticClass:"demo-typo-box typo-Hiragino"},["\n 和畅惠风\n ",t("div",{staticClass:"name"},["Hiragino Sans GB"])]),t("div",{staticClass:"demo-typo-box typo-Microsoft"},["\n 和畅惠风\n ",t("div",{staticClass:"name"},["Microsoft YaHei"])]),t("h3",{attrs:{id:"ying-wen-shu-zi-zi-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ying-wen-shu-zi-zi-ti","aria-hidden":"true"}},["¶"])," 英文／数字字体"]),t("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},["\n RGag\n ",t("div",{staticClass:"name"},["Helvetica Neue"])]),t("div",{staticClass:"demo-typo-box typo-Helvetica"},["\n RGag\n ",t("div",{staticClass:"name"},["Helvetica"])]),t("div",{staticClass:"demo-typo-box typo-Arial"},["\n RGag\n ",t("div",{staticClass:"name"},["Arial"])]),t("h3",{attrs:{id:"font-family-dai-ma"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family-dai-ma","aria-hidden":"true"}},["¶"])," Font-family 代码"]),t("pre",[t("code",{staticClass:"hljs language-css"},[t("span",{staticClass:"hljs-selector-tag"},["font-family"]),': "',t("span",{staticClass:"hljs-selector-tag"},["Helvetica"])," ",t("span",{staticClass:"hljs-selector-tag"},["Neue"]),'",',t("span",{staticClass:"hljs-selector-tag"},["Helvetica"]),',"',t("span",{staticClass:"hljs-selector-tag"},["PingFang"])," ",t("span",{staticClass:"hljs-selector-tag"},["SC"]),'","',t("span",{staticClass:"hljs-selector-tag"},["Hiragino"])," ",t("span",{staticClass:"hljs-selector-tag"},["Sans"])," ",t("span",{staticClass:"hljs-selector-tag"},["GB"]),'","',t("span",{staticClass:"hljs-selector-tag"},["Microsoft"])," ",t("span",{staticClass:"hljs-selector-tag"},["YaHei"]),'","微软雅黑",',t("span",{staticClass:"hljs-selector-tag"},["Arial"]),",",t("span",{staticClass:"hljs-selector-tag"},["sans-serif"]),";\n"])]),t("h3",{attrs:{id:"zi-ti-shi-yong-gui-fan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ti-shi-yong-gui-fan","aria-hidden":"true"}},["¶"])," 字体使用规范"]),t("table",{staticClass:"demo-typo-size"},[t("tbody",[t("tr",[t("td",{staticClass:"h1"},["主标题"]),t("td",{staticClass:"h1"},["用 Element 快速搭建页面"]),t("td",{staticClass:"color-dark-light"},["20px Extra large"])]),t("tr",[t("td",{staticClass:"h2"},["标题"]),t("td",{staticClass:"h2"},["用 Element 快速搭建页面"]),t("td",{staticClass:"color-dark-light"},["18px large"])]),t("tr",[t("td",{staticClass:"h3"},["小标题"]),t("td",{staticClass:"h3"},["用 Element 快速搭建页面"]),t("td",{staticClass:"color-dark-light"},["16px Medium"])]),t("tr",[t("td",{staticClass:"text-regular"},["正文"]),t("td",{staticClass:"text-regular"},["用 Element 快速搭建页面"]),t("td",{staticClass:"color-dark-light"},["14px Small"])]),t("tr",[t("td",{staticClass:"text-small"},["正文（小）"]),t("td",{staticClass:"text-small"},["用 Element 快速搭建页面"]),t("td",{staticClass:"color-dark-light"},["13px Extra Small"])]),t("tr",[t("td",{staticClass:"text-smaller"},["辅助文字"]),t("td",{staticClass:"text-smaller"},["用 Element 快速搭建页面"]),t("td",{staticClass:"color-dark-light"},["12px Extra Extra Small"])])])])])}]}},function(s,t,a){s.exports=a(454)},function(s,t,a){var n,e;a(455),n=a(457);var l=a(458);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{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(s,t,a){console.log(s,t,a)},handleRemove:function(s,t){console.log(s,t)},beforeUpload:function(s){return!(s.size>4e7)||(console.warn(s.name+" is too large!"),!1)},handlePreview:function(s){console.log(s)},handleSuccess:function(s,t){console.log(s,t)},handleError:function(s,t,a){console.log(s)}}}},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-upload action="//jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :default-file-list="fileList">\n <el-button size="small" type="primary">点击上传</el-button>\n <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n\n',script:"\n export default {\n data() {\n return {\n fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-upload",{attrs:{action:"//jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"default-file-list":s.fileList}},[t("el-button",{attrs:{size:"small",type:"primary"}},["点击上传"]),t("div",{slot:"tip",staticClass:"el-upload__tip"},["只能上传jpg/png文件，且不超过500kb"])])]),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-upload action="//jsonplaceholder.typicode.com/posts/" type="drag" :multiple="true" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :on-error="handleError" :default-file-list="fileList">\n <i class="el-icon-upload"></i>\n <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>\n <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n\n',script:"\n export default {\n data() {\n return {\n fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-upload",{attrs:{action:"//jsonplaceholder.typicode.com/posts/",type:"drag",multiple:!0,"on-preview":s.handlePreview,"on-remove":s.handleRemove,"on-success":s.handleSuccess,"on-error":s.handleError,"default-file-list":s.fileList}},[s._m(7),s._m(8),t("div",{slot:"tip",staticClass:"el-upload__tip"},["只能上传jpg/png文件，且不超过500kb"])])]),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-upload action="//jsonplaceholder.typicode.com/posts/" type="drag" :thumbnail-mode="true" :on-preview="handlePreview" :on-remove="handleRemove" :default-file-list="fileList">\n <i class="el-icon-upload"></i>\n <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>\n <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n\n',script:"\n export default {\n data() {\n return {\n fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n }\n }\n }\n",style:null}}},[t("div",{slot:"source",staticClass:"source"},[t("el-upload",{attrs:{action:"//jsonplaceholder.typicode.com/posts/",type:"drag","thumbnail-mode":!0,"on-preview":s.handlePreview,"on-remove":s.handleRemove,"default-file-list":s.fileList}},[s._m(13),s._m(14),t("div",{slot:"tip",staticClass:"el-upload__tip"},["只能上传jpg/png文件，且不超过500kb"])])]),s._m(15),t("div",{slot:"highlight",staticClass:"highlight"},[s._m(16)])]),s._m(17),s._m(18),s._m(19),s._m(20)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",{attrs:{id:"upload-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload-shang-chuan","aria-hidden":"true"}},["¶"])," Upload 上传"])},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:"dian-ji-shang-chuan-duo-ge-wen-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dian-ji-shang-chuan-duo-ge-wen-jian","aria-hidden":"true"}},["¶"])," 点击上传多个文件"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["通过 slot 你可以传入自定义的上传按钮类型和文字提示。"])},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"},[":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 ",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"},["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"},["div"])," ",t("span",{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:"tuo-zhuai-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tuo-zhuai-shang-chuan","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",["type"])," 属性指定为 'drag' 可以将上传控件变为支持拖拽的形式，并且你可以通过 ",t("code",["multiple"])," 属性来控制是否支持多选，",t("code",["on-preview"])," 和 ",t("code",["on-remove"])," 是一个钩子函数，分别在点击上传后的文件链接和点击移除上传后的文件后被调用。"])},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"},[":multiple"]),"=",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"},[":on-success"]),"=",t("span",{staticClass:"hljs-string"},['"handleSuccess"']),"\n ",t("span",{staticClass:"hljs-attr"},[":on-error"]),"=",t("span",{staticClass:"hljs-string"},['"handleError"']),"\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("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-dragger__text"']),">"]),"将文件拖到此处，或",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["em"]),">"]),"点击上传",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["em"]),">"]),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"},['"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("span",{staticClass:"hljs-attr"},["class"]),"=",t("span",{staticClass:"hljs-string"},['"el-dragger__text"']),">"]),"将文件拖到此处，或",t("span",{staticClass:"hljs-tag"},["<",t("span",{staticClass:"hljs-name"},["em"]),">"]),"点击上传",t("span",{staticClass:"hljs-tag"},["</",t("span",{staticClass:"hljs-name"},["em"]),">"]),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"},['"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:"attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attribute","aria-hidden":"true"}},["¶"])," Attribute"])},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",["action"]),t("td",["必选参数, 上传的地址"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["headers"]),t("td",["可选参数, 设置上传的请求头部"]),t("td",["object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["multiple"]),t("td",["可选参数, 是否支持多选文件"]),t("td",["boolean"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["data"]),t("td",["可选参数, 上传时附带的额外参数"]),t("td",["object"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["name"]),t("td",["可选参数, 上传的文件字段名"]),t("td",["string"]),t("td",["—"]),t("td",["file"])]),t("tr",[t("td",["with-credentials"]),t("td",["支持发送 cookie 凭证信息"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["show-upload-list"]),t("td",["是否显示已上传文件列表"]),t("td",["boolean"]),t("td",["—"]),t("td",["true"])]),t("tr",[t("td",["type"]),t("td",["上传控件类型"]),t("td",["string"]),t("td",["select,drag"]),t("td",["select"])]),t("tr",[t("td",["accept"]),t("td",["可选参数, 接受上传的",t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},["文件类型"]),"（thumbnail-mode 模式下此参数无效）"]),t("td",["string"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["on-preview"]),t("td",["可选参数, 点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据"]),t("td",["function(file)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["on-remove"]),t("td",["可选参数, 文件列表移除文件时的钩子"]),t("td",["function(file, fileList)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["on-success"]),t("td",["可选参数, 文件上传成功时的钩子"]),t("td",["function(response, file, fileList)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["on-error"]),t("td",["可选参数, 文件上传失败时的钩子"]),t("td",["function(err, response, file)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["on-progress"]),t("td",["可选参数, 文件上传时的钩子"]),t("td",["function(event, file, fileList)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["before-upload"]),t("td",["可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。"]),t("td",["function(file)"]),t("td",["—"]),t("td",["—"])]),t("tr",[t("td",["thumbnail-mode"]),t("td",["是否设置为图片模式，该模式下会显示图片缩略图"]),t("td",["boolean"]),t("td",["—"]),t("td",["false"])]),t("tr",[t("td",["default-file-list"]),t("td",["默认已上传的文件列表, 例如: [{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:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},["¶"])," Methods"])},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",["clearFiles"]),t("td",["清空已上传的文件列表"]),t("td",["—"])])])])}]}},function(s,t,a){function n(s){return a(e(s))}function e(s){return l[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var l={"./en-US/guide.vue":460,"./zh-CN/guide.vue":465};n.keys=function(){return Object.keys(l)},n.resolve=e,s.exports=n,n.id=459},function(s,t,a){var n,e;a(461),n=a(463);var l=a(464);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{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Design Disciplines"},{path:"/nav",name:"Navigation"}]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:s.navsData,base:"/"+s.lang+"/guide"}})]),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})])])])},staticRenderFns:[]}},function(s,t,a){var n,e;a(466),n=a(468);var l=a(469);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{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"设计原则"},{path:"/nav",name:"导航"}]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:s.navsData,base:"/"+s.lang+"/guide"}})]),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})])])])},staticRenderFns:[]}},function(s,t,a){function n(s){return a(e(s))}function e(s){return l[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var l={"./en-US/design.vue":471,"./zh-CN/design.vue":479};n.keys=function(){return Object.keys(l)},n.resolve=e,s.exports=n,n.id=470},function(s,t,a){var n,e;a(472);var l=a(474);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-0368da72",s.exports=n},function(s,t){},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",[s._m(0),t("el-row",{staticClass:"cards",attrs:{gutter:14}},[t("el-col",{attrs:{xs:12,sm:6}},[s._m(1)]),t("el-col",{attrs:{xs:12,sm:6}},[s._m(2)]),t("el-col",{attrs:{xs:12,sm:6}},[s._m(3)]),t("el-col",{attrs:{xs:12,sm:6}},[s._m(4)])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",["Design Disciplines"])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"card"},[t("img",{attrs:{src:a(475),alt:"Consistency"}}),t("h4",["Consistency"]),t("span")])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"card"},[t("img",{attrs:{src:a(476),alt:"Feedback"}}),t("h4",["Feedback"]),t("span")])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"card"},[t("img",{attrs:{src:a(477),alt:"Efficiency"}}),t("h4",["Efficiency"]),t("span")])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"card"},[t("img",{attrs:{src:a(478),alt:"Controllability"}}),t("h4",["Controllability"]),t("span")])},function(){var s=this,t=s.$createElement;s._c;return t("h3",["Consistency"])},function(){var s=this,t=s.$createElement;s._c;return t("ul",[t("li",[t("strong",["Consistent with real life: "]),"in line with the process and logic of real life, and comply with languages and habits that the users are used to;"]),t("li",[t("strong",["Consistent within interface: "]),"all elements should be consistent, such as: design style, icons and texts, position of elements, etc."])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",["Feedback"])},function(){var s=this,t=s.$createElement;s._c;return t("ul",[t("li",[t("strong",["Operation feedback: "]),"enable the users to clearly perceive their operations by style updates and interactive effects;"]),t("li",[t("strong",["Visual feedback: "]),"reflect current state by updating or rearranging elements of the page."])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",["Efficiency"])},function(){var s=this,t=s.$createElement;s._c;return t("ul",[t("li",[t("strong",["Simplify the process: "]),"keep operating process simple and intuitive;"]),t("li",[t("strong",["Definite and clear: "]),"enunciate your intentions clearly so that the users can quickly understand and make decisions;"]),t("li",[t("strong",["Easy to identify: "]),"the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",["Controllability"])},function(){var s=this,t=s.$createElement;s._c;return t("ul",[t("li",[t("strong",["Decision making: "]),"giving advices about operations is acceptable, but do not make decisions for the users;"]),t("li",[t("strong",["Controlled consequences: "]),"users should be granted the freedom to operate, including canceling, aborting or terminating current operation."])])}]}},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAESRJREFUeAHtnW2IHdUZx88zu+vuvZtk12gikYoIyoJFEPvBqEVCrLTWqKWIUomCGPxoIa1WpSBS32ratM3HNlKIYjHkQ9VYC9YgoWryoSJtFZYIQQSDiYm72d177ya78/T/zL1ze/fufZm5d2bumZln4DJv5+U5/+d3z5kzc2YOGV1WKHCW+WJTNlPLZKaI3SnDZoMhWov1Wibjram2NrKWhc0ctue4tqba2jDL8VNMzvQQm2lTMNPriL5ekWHOdyiv5Wfm8dlFcxPguY5cd4qJBLYpNrw+Tk3I0BlAOU3M0+w409j+aGLUvE9EC3Hma2vauQEQwI3OV8zmJdfdihptKwp+PY6N2OAYwHeejTmKGvPQsOMcWjNmjuDYog22xW1DpgGcrfBVaBbvhmNvgYNvxLoQt6CRpE9UhmM+wB/lXTT3BybG6Fgk6VqYSOYAnGVezyVzryG+HzXcDRZqHtok1IYfGqaXqWhemyA04RlaMgGgNKUzJXM7ATr4Zhv2L8iQj+pFAYjnsHOQAeNk0bwlTXf9ZEo3Ug3gPPMlS2V3J2qHh9B5uCilPujJbHRmTqOWf2m44OxeQ/RVT4lYECmVAJZKfNmicR+DE3agthuzQMeBmYBasII/395R47xYLNIXAzOkx4xTBSA6FVfysvs4Ls4fkGa3xzJnMprXHDPvoyHnBXRaPktLIVMBoNebdd2njaF7AN5QWsQdhJ0AcRl3xveT4zyVht6z1QACtsJMyX0Soj6K7dFBODSteUKzRWi2a7LoPIftsq3lsBbAsxXe5rq8ByJeYat4abAL8B13HHpk3RgdtNFe6wAsl/nyCvMfcNP4LhsFS61NRK+PEf20UKDPbSqDY4sxqOmGZsr8OOD7VOGLwSv4Q4u2orFoHUMOPSVpRQ24wLzpfJlfhTBbeiqFRgqlAJrl90YKdN840YlQEWMIPHAAZyp8q1nmV3Ava2MM5dMk2yiAe6gnzRBtnxyjd9oESeTwwJpgr8ldWH7GuPx3hS8RX6/IxNMc2s/AB4NskgdSAy4s8KXniP+Ca72bV6iiO4NRgOjwBUw/GR+nL5M2IHEAZ0ss4/DexD9wQ9KF1fzaK4Am+RSuDe+YKNLR9qGiP5NoE4wnGre5hg8pfNE7st8UxSfiG/FRv2mFiZ8YgLNl3s4uv4FmtxjGQA2boALwjfhIfJVUrokA+E2Jd6LZ3YffcFIF03x6U0B8JL4Sn/WWQrhYsV4DoiA0W3Z/jWHxj4YzS0PboABeB9g1UXB+gWtDvNEQzxIbgB58JfdPsPyheEzXVJNQAIDsnSg6D8cFYWxNsFfzKXxJMBJrHqhAdogv48oklhrQu35g97dxGa3pDkABcn52YZF2R51z5AB6vd1qhyPytKMuvKYXXAFpgvF7YKJArwSP1T1kpJDIPSTpxktPqnvWGiJtCgDAJXLoToy0fjsq2yMDUJ5wyI1Mvc8XlWssTYeo5BjaGtUTk0gAlGe75w1/rE84LIUmYrPksd2IoWujeHbcdy8Yze2QDCxQ+CL2ssXJia89n0cwsLVvAGdLeFtNR7VYjEtMpsHnnu/7TL6vJtgbTCrj+Zj7BrnPcmj0ASiATolrHPpBP4NaewbQG0Zf8q77dCTzAJxvS5YysnqkiOvBHof391RzyXWf9w6HDqO3hYOB2YHrwY2193l6etGpJwBnK0ZeFN8ysFJrxlYpICwIE70YFboJrr23K69O6ri+XhTPahzcH8R7x1eHfe84dA2Id0v3KHxZpaiPcqFC8tgImUQoAOVzGYDvzpB5aPC8KAA2PEZClDdwE4x2voCBBp9gfUWI9DVozhTArZnjGLDwbawDfRApcA0oX6lS+HJGUw/FFUaElaBRA9WA1e/z8X+ReCa/vRxULA0XTAHUfosYNXNNkO8TBqoBGR+HVPiCiR91qMMffh51krGnB1ZGhZkgGXUFELXflfJl0iCJaZjoFRAA0wihMFNlp7MmXQGUbzKD6J7ucnfOWs8GVSCNEAoz3ve8uxSyI4DyNXr5IHiXNPR0AgqkEUJhx2Oogz4dAZSpEECyfo2+g4BJnkobhMKOMNRJo7YAyiQwGOmwo1NkPZe8AmmDUBgSltop1RZAmYEIBOd6Eph2og36eJogFIa82azaiNYSQK/ZxfRXbeLoYQsUSBOE3lRqbS7lWgIoE/9hnFeu5l6zgKnQJqQFQmFJmGpVwJYA1madbBVej1mmQFogbMfUqkdx3ny7ZT6BZtjKx26fHT9j/vbOMXN2PhcTigfG/eYbLjfys3XB47lzVKBNzfMdr6oBZbJnW+ETcRW+1ojZXhMKU95E4k3mrwIQc9DqjecmkXQ3IgWqE4qvSGwFgN6oF+bNK0JYtvPDW68y69bovIXNbrG9CRZ7UQveIIw12r7iGhDTOD2BUQzPNQbQ7cEq8Mzuw10NSAN8fiEwjeyTkwV63t9fUQMC0Vv8E7pOhwJpgs9TtImxOoCoHkfxNcwb0yG7WikKpA4+2CyMCWu+B+sAzlfMZtSABf+Eru1WII3weYqCMY+1mrx1AJdcd6vdkqt1vgKpha9WgEbW6gBi7JYC6HvY4nXa4fOkbWDNAxBt8ji6w9dbrLuaBgUyAR/KIawJc+JUD8DZRXMTDujAU1HE0iUr8Im8wpowJ9vVJpjNdbKji50KZAm+usI15jwAyXWn6id0wyoFMgkfFPaZq14DEimAVmH3f2MEwCwumHTEY85vghXALHrZ5jKx8Zijs8wXL5fcUzbbqrZlU4GhorPBMeUqidksopbKagXAnrNMCqDVTsqwccKeQ6w94Az72OqiCXsA0Og0C1a7KbvGCXsOusNrs1tELZnNCgh7DgZoKYA2eynLtoE9zLypAGbZx1aXDew5zGaN1UaqcZlVQNhzSGvAzDrY9oIJe3oNaLuXsmyfXgNm2bspKJtXA6bATjUxuwpIEzyX3eJpyaxWAOwN4zbMHCBMzbcA/3nCmGf+Rear8oqPOtR1vqTA5pffYfPdTfVDHTfyll5HMZI+CfbomwX33xilf03Sefea3/cPkjnZBj4/TYHw79vwCnSAJW/pBZAkwSD0H7kRnaomuBt8ol672rGVsnlLr5UGAzsG9mQwQqoAHJhYmnHkCgh7qasBI1dBExycAtUakOcHZ4HmnGsFmOcwHMuczLUIWvjBKUDmFAB0pgdngeacZwWEPWeIjQKYZwoGWHZhzzEFBXCAPsh31mDPWUf0NSaUO5NvJbT0SSsgzAl71S8jkNaCSTsg9/nVmKt+nIhZrwNzT0SyAlCNuerHiRztCScrv+bGNeb8JvgjlUQVSFQBMh5zHoATo+Z9TCZ3PlEDNLPcKiCsCXMiQPUakGgBg5eO5lYRLXiiCghrgHBBMq02wbLFfEhWuqgCsSvQwFodwGHHUQBjV14zEAUaWasDuGbMHMFcIWWVSBWIVQEw5rFWy6QOINrkRbxl8UGsmWviuVdAGBPWfCHqAHoHiN71T+haFYhFgSbGVgCITyUciCVTTVQVqCnQzNgKACfG6Biqxw9VLVUgDgWELWGsMe0VAHonmF5uDKDbqkBkCrRgaxWAVDSvgdRzkWWqCakCUECYEraaxVgF4AR5YwMPNgfUfVWgTwUO1thakcwqAOUst6gqV8TSHVUgpALtmGoJ4GTRvIURq6dD5qHBVYGWCghLwlSrky0BRHt93hC/1CqCHlMFQisAljymWkRsCaCEGy44uxGp0iKOHlIFAisgDAlL7SK0BXAN0VdseG+7iHpcFQiigDAkLLUL2xZAiTBqnBfbVZ3tEtTjqoCvgLAjDPn7rdYdASwW6Qt0ife1iqjHVIGuCoAdj6EOATsCKPFoyHkBJC93SCPRU8tL3e+RBwnjGx0kbJAwaUnPtzPutTAj7HTLpyuAeHb3Ge4M7u+WUFLnT5/4wnQCQs5JmKBL3tILqkv/4Xh/lZ3OKQ13Pl09S47zlHH5x8w8GiR8nGFK82dN6dgnkWWRt/QiE65DQqj9FsmhpzoEqZ/qWgNKSBnBAPh21WPphirQQQFhpXnUS7vggQCUyJNF5zmQfbxdQkkdv3TtSNesNgUI4yeSt/T8cse1FkaElaDpBwYQCZcdhx4JmnBc4X637VumEzRy7vcIE3TJW3pBdek1nDAirASN33qyjQ6xvym5f8Wtmbs6BNFTeVWA6PULi86PwhQ/NIDlMl9eYf4UEBbDZKRhM64AUWmM6OpCgT4PU9LATbCfqGSAKvZX/r6uVQFRQJgIC58Xrxf50MsZmi3zP7De0kt8jZMtBQDfexMF+h7WoR9YhG6CfekWmDedL/HHeNi80T+m6/wpgLF+J0eKdO04EWbxC7+EboL9LLwMh2g7qHf9Y7rOlwKe78FAr/CJWj0DKJEnx+gddEael21dcqgAfO8x0EfRe26C/TzlenCmjC9rMd/sH9N1DhQgOjxZoK29XPc1qtM3gJLYwgJfet5414MbGhPX7WwqgOu+UyMG133j9GW/JeyrCfYzF0PwT7gDffGSf0zXGVUAPhZfRwGfKBQJgJLQRJGO4jHM3TBuSfZ1yZ4C4lvxsfg6qtJFBqAYhBEQb8PIB/HDV1h1yZIC4lPxrfg4ynJFCqAYhhuSr7Chn0dppKY1eAXEp+LbqC2JHEAx8MIi4ZVOo+MHo/bWgNITX4pP48g+kl5wK8Nwe4ZmS+4f0RbvaHVej6VDAQCyd6LoPBzXZVUsNaBIKwZXDdeaMB2orbZSar444fM4WZ1t9Ee+KfFOMvwbqRWjT11TjFoBqTzkmi+uZrfR3sSAwOiZ7QDwz/gFehGq0UjdTk4BwLeE34NxdDhalSIxACXz2Qrf5rp8QAeztnKFBcdwk9m7zxfxrZZOJUsUQDFktsTXoxZ8E8O49LFdJ88kfE4er6HmuyPKm8xBihBbJ6Rd5lJAeY6IXsrhdmH0eMIKwBfik6Thk1ImDqBkKs8RvZEUxjyLf52OJxRRBrCI9mgCnxVfRPVsN2wxEm+Cmw2cqfCtZpnx9ERHVjdrE+e+jGQ2GEza73i+fm0cOIBSAG94f5lfxbXhln4LpPG7K4Ca772RAt3Xz0jm7rkECzGQJrjZNBHCe6nFcZ7QIV3N6kS4L0OpoLFobQN8UjIrasBGiWvvHe/BrZo7G4/rdp8KEL2B93Yf6eXVyT5z7hjdOgB9a89WeBvuGe5Bs3yFf0zX4RVAc3tcPpexboysnPvFWgBFasBXmCm5T0LEx7B9QXj58xsDmi1Cs121j0oF/lZL0opZDaAvBp6gXMWu+zSuGO6BqEP+cV2vVgDg4eVw3i/fdAz6ibTVqSR3JBUA+nIAxCt52X0cHZUHAGL377T5EXOwBnh4L4z3yWdxAR6+apuOJVUA+pKWSnzZonEfw72sHQBxzD+exzXAq8hUCPI1+m4fBLdRn1QC6As5z3zJUtndaZgeghMu8o/nYY0/32mZzUomgek0D4ftWqQaQF9caY5nSuZ2DGO7H8e2YT+THRbUdjJFwEGZ+M+bz0+a3ZQvmQCw0QezzOu5ZO5F7SDXiZsbz6V1G+AdQS2/T+bbbTXlaVrLJXZnDsBGZ3i9ZzZ34+L8FrybciPWhcbz1m7jE7dwzAfobL2LYfEH0tCb7VXLTAPYKApqw9H5itm85Lpb4ditKLiMS7SiJy09WPxBjuIPcmjYcQ6tGTNHcGyx0f6sbucGwGYHAr7x2UVzk2FzHbnuFN66nsL2FDoz65vDRrmPzsMZtDvTeOtimh1nGtsfTYya9wHcQpT5pCWt3ALYzkFnmS82ZTO1TGaK2MXPbAScawHnWsCyFm/roNOJ7dq+lw6bOZybw7k5nJvHOW8fkM3hNayTTM70EJtpUzDT64i+bpd3Ho//Dw7/YlbG4ZiJAAAAAElFTkSuQmCC"},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAE5hJREFUeAHtnXuMXFd9x3+/u7vendm113b8itsUTB5bldKmBCkmaYK7KREWdqpWAQQKQcgW/7RNWoPTJIVGiFeK20gE9Z9iVNVEVIT8g2OUFojrBiXYUklpBVVXQJ0ojeN4be+OvTsz6925p9/fnZ31zOw87ty5j3Nnflca3dd5/M73fOace+49DybdahS4ZMwmKtBEiWmCjTtBhjYT81rs1xomb8/Le5K9bIYu4/iyWd7z8p6MkevThp2pAUNTlKGpdcznayLs8xPu1/QbY0ZzC3Q74Hknu+6EYRbYJgyZjVFqwsQXAeUUGzNlHGcKxy+PD9OLzDwfZby2ht03AAK44bki7Vxy3UmUaJNI+K24NmRDxgC+RUN0CiXm8UHHOT42QidxbcEG26K2oacBzBXNjagW70XG3oUMvg37TNSChhI+cwEZ8xL+KM+jun9mfIR/Hkq4FgbScwDmjNlo8vQhYvNRlHDvtlDzjk1CafgjMvwNztK3xhlVeA9tPQGgVKWzeXo/AzrkzR6cr+mhPFpJCkC8gpNjBjCuz9J3pepeuZnSg1QDOGfM1qWCewClwz40Hq5JaR4EMhuNmQso5b8+mHGeGGN+M1AgFnhKJYD5vLlugdyHkAn7UdqNWKBjYiagFCziz3d4mJwvZ7P8WmKGBIw4VQCiUXGDKbkP4+H8fql2A6a5J7151bExR3jAeRyNll+kJZGpANBrzbruZ4n4gwBvIC3iJmEnQCzhzfjT7DiPpaH1bDWAgC0zm3cfhagHcTycRIamNU5otgDNDq3POl/EccHWdFgL4KWi2eO65kmIuMNW8dJgF+A77Tj8wLoRPmajvdYBWCiYtxSN+QpeGv+BjYKl1ibm74wwP5jJ8Ks2pcGxxRiUdAOzBfMw4PtvhS+CXMEfWrQVjUXrCGIIFKQVJeC8MdcuFsw3IcyuQKlQTx0pgGr5xFCGPzLK/EZHHiNwnDiAs0XzXiqZp/Aua0sE6dMgmyiAd6jnaIDvWz/C32/iJJbLiVXBXpU7X/o8ueafFb5Y8romEk9zaD+LPEiySk6kBJyfN9uvsPknPOvdWaOKniSjAPMLawx/eHSUz8RtQOwA5vJG+uE9i3/g5rgTq/E1VwBV8jSeDfeOZ/lUc1fh34m1CsYXjd0umeMKX/gZ2W2IkieSN5JH3YbVif/YAMwVzH3GNUdR7WY7MVDdxqgA8kbySPIqrlhjAXAmbw6g2j2C32BcCdN4gikgeSR5JXkWLITOfEX6DIiEcK7g/jW6xR/szCx1bYMCGA5waDzj/AWeDTGiIZotMgA9+PLu12D5vmhM11DjUACAHB7POp+ICsLIqmCv5FP44mAk0jhQgOyXvIwqkkhKQO/5wbh/G5XRGm4CCrDzyQ1ZfiLsmEMH0GvtlhscoYcdduI1PP8KSBWM3/3jGX7Kv6/2LkOFRN4hSTNeWlLto1YXaVMAAC6xw/egp/VzYdkeGoDyhUNeZOp7vrCyxtJwmPMO8WRYX0xCAVC+7S6S+Yl+4bAUmpDNks92Q8Q3h/HtuOtWMKrbAelYoPCFnMsWByd57eV5CB1buwYwl8doNe3VYjEuEZmGPPfyvsvgu6qCvc6k0p/PmK5B7jId6j0BBdAoccnh93XTqTUwgF43+rz33Kc9mRPIfFuilJ7VQ1k8Dwbs3h+o5JLnPm8Mh3ajt4WDxOzA8+CW5fE8gQY6BQIwVyQZKL4rsVRrxFYpICwIE0GM6rgKXh63K0MntV9fEMV71Q/eD2Lc8W90Ou644xIQY0ufVPh6laIu0oUCyWOjwyA6KgFluoxSyX22wzgic+6iq8bLmHP+xBmm/8J+GjOgnC8SLWE6+17cBtEtbxMmo9ucIfqtTUS7tmOGdewdi5I7MODs7WQaEN+mo57PoKPBz7DfYUPmfu81oq/+lOn/5nwnwQazQ7fhV8cM/elvGrr7utCDDhQgXs2cRoeFt2Pva0Ik37k3M1/6HCz6dCCrQvQ0i7njD55k+vdzvk0PMXZ7g3rXFkOHdhpab8ccYp/fMDrwGT9q+crF8vx85qco/RKde/mVy0R//EOmM/O+zPaT/p5ys33U0N/dYeit5eVzEksbSr8F9Jp5h5/5CX01Qgwmh0waPin5FL7WTMkfUzQSrZLcwMqwMOPHhrZFCUq/G9DH738QaKAXjX6M8ONm/wmmH0+3NddPUD3v5pbNhg7vimwckS/9UAqWUAr+ervpgtuWgDInc9Lw/QsaHAqfr3z3HIlWolmSmzDjzefdxoiWRYrMRn+FzC8RWGITgsurlnueY3pdn/vaZGXt7V/B8+DR3SbRVzQoBRfXEF/favb+liWgLIWQJHwi6X/g/Z7CVwuXnzPRTLRLchN2hKFWNjQFUBaBQU+H/a08x3HvX19vWUjHYUJq47BBO2FIWGomYlMAZQUiEJz4IjD/eaGZ6Xq9nQI2aCcMeatZNTG2IYBetYvlr5r4ifXyOV/v02M1KTWRWaOdLKXWpB3REEBZ+A/9vKxYe02+7eoWTAFbtBOWhKlGqWgI4PKqk43cx37N7dGOBXEIaZN2zZhaBaCstwtx9sQhkMbRVwrsWWarJtGrAJTFnlFfJ/rNt8ZCPekJBYQpbyHxutSsAhBr0N5f50ZPVYFwFCgvKF4TVg2AXq8XY3bWuNATVSAkBVAKvlsYqw6uBkDMZHpv9U09bqzANoyG+codRKc+UP7JsVzTrb0C9YzVAIixHne1D6K/XQhoz92D79NvI9qCY/nJsVxTCH2wUcfYCoAoHofx3f82H0H0tZNHbqGGvY6lJ7Lc0621AsKYsFZxtQLgXJF2ogTEcBfdWimwc1vzu63uNffVZ3fAmMfacrJXAFxy3ck+k0KTm5AC1aytAEjMCqCPDDl5trmjVvea++rDO1WseQCiTh5Fp6db+1CKjpP8pR9TwzEXMg5D7unWXgFhTZgTlx6AuQW6HRcS6/Xc3mR7XJzNE+0+SnT0f4nO4Vh+cizX5J5u7RUQ1oQ5cVmeTBwD7Nt7UxcVBQS0B39YOdN9IAXKzH3PKwHZdScCBaKeVIGAClSYKz8DMiuAAYVUb8EUwKIjHnMegGRIAQymo/oKqsAyc84lYzahx6r0AdRNFYhNAWFO2HOooKVfbKprRLUKgL3BEgPAZGdxqDXK8rPTH2tt4I5/bH1f715VQNhz2GgL+KokehSnAsIeAKQtcUaqcakCFQWEPQfN4YRnk6uYo/t+U0DYc/D8pwD2W87bkl6wh5U3FUBb8qPv7AB7Dvroj/VdwjXBVigg7DmsJaAVmdGPRgh7+gzYjzlvS5r1GdCWnOhTO7wSsE/Trsm2QwGpgrH6hm6qQAIKgD15DaMAJqC9RgkFwJ68hlEAlYZEFBD2tARMRHqN1FNASkB8ENYSUHlIRAFhT0vARKTXSD0FyiWgmVM5VIFEFDAGjRCmc4lErpGqAkzTANCZUiVUgSQUEPacAUMKYBLqa5wk7DmUUQCVhYQUAHuD65jPz867F3VssL9M0FFv/nRq5wqLGF4U9sozI7CWgu0E0/shK7DMXHlyImP0OTBkfTW41grwMnPlyYkcbQm3lkvvhq2AWWauUgW/HHYEGp4q0FIBJo85D8DxYXqRmRdbetCbqVPALS1ZabOwJsyJceVnQOZ5TA9zykpr1ajACpSW7CxThDVAOC8JK1fBcmTMcdnp1jsKLF7BzOk2blWsrQA46DgKoI2Z1YVNhblcF76j81rN2gqAYyN0EmuFFKKLVkOOVQHj0uCihR2dwJjH2rIYKwCiTl7A+g0vxSqSRhaZApdmztO20ZXsjSyeTgMWxoS1ir9aC5mfr9zQfXoVkNZv7vxZun7jsH2JqGOsBkBMlfCMfRarRR0pgJE+58+8SqVSiXbftK4jr3E4rmesBsDxEf45iscfxWGIxhGNAjPnXqf83CUaGmB6303j0UQSMFRhSxir9l4DoHfD8DeqHehxOhQwrouS7xXKXZz2DN73rk20MTtgl/EN2FoFIGfpWyD1il2WqzWtFCjOX6Y3XpmiudyM52zdyAAdvGNrKy+x3xOmhK36iMtrxVVdHWe+OJt3j+HSH1Vd1kPLFJCGRmH+Es3NXsT+6shaPGPR1/7w1+wr/YiOCVv1Mq4CUBwYr6g0qQRwDq8fFoo9umwlGhilpSVaWrpCi1eKyKf67CT6wt3b6e4b7Wt8lJlabW9DANdn6bu5PF9AL+lrVnux90ruwlmaOfeGvQZGaNnwINNX915HH3jHhghjCRY0ej9fGAdTjXyvegYUR6ivF4nN1xt5sPVaP8N3x44x+sG+m6yEz+MFLHlMNYAHTwyNtzljti4VzCtYXHiksYt4rv7Otxv+R2oi70f4pKFx9w3r6MO/vYEmr7d3oQOAVxzM8FvHmN+sybTlk4ZVsNwTDzP50mEc/smyWyt38sZ/ZvpqtfuxW66hm6/NWGlrt0YNOUxbxgbp2rVraGLzCA21/292G2XX/vEYd3iMnYbwSeBNS0C5mc+b666Q+aUssS7nSWytSsB6+P7s9q302F3bkjBT42yggFS7a4ivz2b5tQa3vUst/0OeR2OONPOc5PV6+P78dxW+JPOjYdxgpxV84qclgOKAB5zHQXJJjm3ZGsH3V5Na8tmSP2KHMCPstLOpLYD4dvcLvBl8ul1Acd3PnX+j5pnvAN74K3xxqd9JPObpMjut/bQFULyz4zwGolf6cLUOMrq7ZfjOrkTwScD3md/Tkm9FEEsOhBVhxo85vgCUHgxoiBzyE2BUbnJo6c5M18L3aYUvKrm7CldYqe/10izAlq3gak8INJMrmJ9hv6P6etTH0gquL/k+dedW+stdWvJFrX2Q8FH6nR7P8Nux9zW8w1cJKIZIgI7DDwQxqhs/Cl836sXvVxjxC59Y5xtAcbxuhI+BxO/IcVxbdbV78M5tWvLFJXyQeMCGx0gHfjsCUMIdYX4QEMbe3eSh92yjR3fZ1cetA5173ymY8NjoMKUdA5jJ8KsoYj/XYTxdORf4HnmPwteViBF7FiaEjU6j8d0IqQ4YDZEBNEh+gP2u6utRHD/+b2/SwwpfFNKGFibgO4GGx+9j3/EHi0AAiuXzxly7mDc/wcfmLaGlRANKnQLo63duKMs3jzJf7RHSQSo6roIrYXsRDvB9oN6tXNN9fyng5T0YCAqfqBUYQPG8foS/j37hX5Jj3fpQAeS9x0AXSQ9cBVfilOfB2QJm1jLmzso13feBAswvrM/wZJDnvmp1ugZQApufN9sXyXse3FwduB73pgJ47pseIjz3jfKZblPYVRVciVwMwT9hbxLvBys26D4mBfC+T/I6DPjE4lAAlIDGs3wKn2HuhXF2zgsrRurWlQKSt5LHktddBVTlOTQAJUz0gHgORn4cvwYjVqti1cPUKSB5KnkreRym8aECKIbhheRThvhTYRqpYSWvgOSp5G3YloQOoBi4IctPYIqIRPsPhi1UP4cneSl5GoUGobSCGxmG1zOcy7t/j7p4f6P7ei0dCgCQw+NZ5xNRPVZFUgKKtGJw2XAtCdOB2morpeSLEj6Pk9XRhn9lJm8OMJm/kVIx/NA1xLAVkMJDnvmiqnar7Y0NCPSeuQ8A/gN+TWdjqDZMj5NRAPAt4ffxKBocjVIUG4ASea5odruueQaf7bKNjNFrCSuAl8zee76QX7W0SlWsAIohuby5FaXgs+jGpZ/tWuVMzPfk8xpKvr1hvmT2k4TIGiHNIpcEyndEtFJeaOZGr8esAPJC8iRu+CSVsQMokcp3RK8nBSb0xL9O+xOKKAlsoj2qwC9IXoT1bbfTZMReBdcbOFs076WSwdcT7Vldr02U59KTmdCZtNv+fN3amDiAkgCve3/BfBPPhru6TZD6b68ASr4TQxn+SDc9mdvH4s9FIlVwvWkihDeoxXEe0S5d9eqEeC5dqaCxaG0DfJIyK0rAaokLBfOWojFP4lXNPdXX9bhLBZiPYtzuA0GGTnYZc0vv1gFYsfZS0ezBO8MnUS3vqFzTfecKoLo9LdNldDpjQecxBfNhLYCSHMCXwaI5j0LEh3C8JlgS+9MXNFuAZofWZ50v4tjXREFJKGU1gBVB8AXlRqyF9lk8MXwQolq2AFrFSjv2gA2Dw83TMj+f3ynSkrQ8FQBWBAKIN5iS+zAaKvcDxMQmTq/YY9Me4GFcmDki0+ICPMxqm44tVQBWJJXZ+xfIfQjvsvYDxETXManYlNQe4BVlKYRhcr7cbkLwpGxsFW8qAawkqLyYjnuADO9DJqRqWbFKGoLu8ee7IKtZDWacJ5otAhM07Dj9pRrAilBSHc/m6f3oxvZRXNuD855ssKC0k2V0j8nCf7Ken1ftVkRI6b4nAKzWPmfMRpOnD6F0kOfEndX30noM0E6ilD8i6+02WvI0rekSu3sOwOrM8FrPhu7Fw/ldGJtyG/bpWMMLr02QMS+hsfU8usU/k4bWbLXunRz3NIDVQqA0HJ4r0s4l151Exk4i4dIv0YqWtFSl+IOcwh/k+KDjHB8boZO4lviyGNX6RXXcNwDWCwj4RnMLdDsZeie77gRGXU/geAKNmY31bsM8R+PhIuqdKYy6mDKOM4Xjl8eH6UUANx9mPGkJq28BbJZBl4zZRAWaKDFNsHHxoy2Acy3gXAtY1mK0DhqdOF4+98IxdBn3LuPeZdybwz3vHJBdxjCsc4adqQFDU5ShqXXM55vF3Y/X/x+UKbnM5rRzPQAAAABJRU5ErkJggg=="},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAHapJREFUeAHtXWuMZMV1rrrdM9Pd857Zx8yyT/Yx2IBjIwdjLEVobUuxjMlDyAiEkSwQfxJhidjYcSIhKwnYJkEKfyIlWFGwZcsWedjGsiXEClmyASdCCbDALCy7yy47uzszO+/unkffyvfdmTvb09Pdc191X9s1Gt3b91adOufUd0+9TlVJ0QobNDCr1DZREiMVKUakMkeEEtuFlN24disprKtcuwpeGZSYw/2cWrvKtatQis/HlTRGM0qMirwY7ZFyYkOGV/kPebXKr5TqnFkUnwJ4bpKmOaKkJNhGlFADOnUihbwMUI5KpUaVYYzi/tXeDvEbKeWCznzjSvuqASAA1zFfFresmOZRWLSjEPwTeNYWh4IB+JaVEK/AYh7LGsaxrpx4Gc8W48Cbbh5SDcCZsjqMavFOFOynUcC34prXrdBA6EtZQsH8Fh/KC6jun+3NyXcCoRtDIqkD4IxSA6oo7hJSfQkW7pMx1LlrlmANXxJKfl8WxI97JarwFIVUAJBV6XRRfF4CdCib2/G7PUVltC4KgLiEH88pgLGvIH7Bqnv9ZUJvEg3AeaV2rpTMh2Ed7kfnYTChZeCJbXRmJmHlv5fNG092SXnRE5EYJEokAItFtWdRmI+gEB6AtcvFQI+RsQArWMbH93SHML5bKMizkTHiMeNEARCdikOqYn4DjfP7WO16lDmVyazqWKlnZMb4Njot7yZFyEQA0OrNmua3hJBfBPAySVFuFHwCiBWMjP9EGsajSeg9xxqAAFt+umh+E0r9Gu47oijQpOYJnS1CZ0/0FYzHcF+KqxyxBeBsWd1umuopKPFAXJWXBL4AvlOGIR/qycnn4shv7ABYKql9ZaX+EYPGfxRHhSWWJyl/mpPyK/m8PBMnGYy4MANLl5kuqW8AfG+2wKehVPBBU7fUMXWtIQdPJGNhAReUGl4uqR9CMbd5kqKVyJUGUC2/2JaX93RKOeYqoYbIkQNwuqw+KyrqBxjL2qFBvhbJBhrAGOolkZH39uXk8w2ihPI4sirYqnIXKn8rTPWrFvhCKesNmVg6h+6nUQZRVsmRWMCFBbVrSaofoa33Bxu00voRjQak/HW7knd3dsrzYTMQOgBniop+eD/HF7g9bGFb+TXWAKrkcbQNv9BbkK80jhX8m1CrYMxofM4U6lgLfMEXpF+KLBOWDcvILy036UMD4ExJ3atM9TNUuwU3DLbihqgBlA3LiGUVVq6hAHCqqB5GtfsM/rNhCdbKx5sGWEYsK5aZNwruUmltA0IQOVMyvwO3+K+5Y6sVOw4awHKAJ3rzxtfRNsSKBj1BGwAt8BXNfwHn9+thvUU1DA0AIE/3FowHdYFQWxVsWb4W+MLAiNY8YEAeYFnqykSLBbTaD8r8B11Mt+hGoAFp/EV/QT4ZdM6BA9Dq7a52OAKnHbTwLXrONcAqGP/39eblD5yn2jpmoCDhGBK78exJbZ11K0bSNAAArkhD3gFP618GxXtgAOQMBwcyW+N8QRVNTOlIWTSEPBrUjEkgAOTc7rJQ/9ua4YgpaAJmi9N2bUJ+NIi5Y9+9YFS3GToWtMAXcCnHmBzL2irzABxbfQNwpojVai2vlhjDRRNrKHOr7H2S91UFW86k9OdTyjeQfcqhJblSplhZLgvTRAMD0zluAhrswjDaRLYth2XMqVQP5JKmMOQf+nFq9QxAy42+aLX7UunJbFZWxNLSvBvMNYzb3t4ljEw6BwboWd1WQHvQo3u/p0+T7T5rDUda3ehh7ZaXg9sv0qLl0oI2RHPMXqA9uGNtPY+nhU6eADhTFlwoflvMdBEYOyuVJddVbrPMWX2TZloDsUBMeJHPdRW8tm6XSydT69e3tLhgtfu8KLRRGiPTJtrbOxu9Tv5zjA9i3fGH3a47dm0Bsbb0qTSDj0hQCturBByUGTzNgFn0Rw4GycKGSyquAMjtMlA6d7jMI3HR2fsNOuigGTSPvukBGxZGXBByDEDU83nu1eKCdiKjmhotlU7acVH22n4+eaf8OAYgd6kCCA84JZzUeDqqX1sXOmnbeUR9JUaIFad8OOqErO7Pp94A8VTuvVytrJWVsjX4XP0sqHsOSmez6d/QFQPUi/CaudHJ/oSOLKDC5pBXA/jQvhUVDEDrChbtlI4HVusMWOkgZqqfNbrf0gLC+h2Cj9/bIOppoLFRxnF6XsEYnbmyLCqYcgsjZDBFZ2TbRCaT3goFVrACK3jdVtsFb2kBuSdzGsEHmVDVlsRiaVosLxVDAx8BTqAzT+ZNHtLYQyZmrP28t/iim1pA7kaPOYGTIJaaDcEtB4OVRVHBf5xCJtuB9mFHqhwXYAWX24U82Gz3/qYWkEchpAV8bHqtLMHilWdjBz5+CPwgyBt5TEszkdghhpp96A0t4OohMOo0iCS+28YqbwVVHmRppovYvIPlENn2gmBbMekBspSzebm/0WE6DS0gTyCKG/gIIFftJcRfWloQy5jbTQr4CDjySp7JO344xiB1Ezc5wU/OOs2qgRR1LSAStWGR0RiKOxbHX7F6WsG/DT4ybWTbrV6kYdT3s+PcKwvQTtNA/tg/pjMrnRikUX8QwjRXMHTEXjxa62vSMA3HGzPQURwCfAYnsYhpmG3CWn7qAnBqQf2xEOZ/1kaO4vcyeonNOgxUNhXNIQ3b85gFwl5mmkIbq+S1YRt+VJSxQtA1mbdmx6atzfGsmGZ1GX/S3yn/qzaTuuaDp066sPy1NAP7vark5r1VFgDd5vlvwErQUrBg0hb4QZnZFUHL7nROmR8udWIDN0qdrJ1kugmAmyygdd5uCdVvxNNurE6WyjOxaNNkDEO0ZbMoSFRtmQwK1cBSCFQs+Gdgu8vkv4mPoVKBdTLF8gqqRvyOOpDH9lyv2FTQITMGPpZkXg7Xnne8yQLysGe0/SJvPFRg0ViwUYX2tqzItbeL9jYsLALovASCcWl5WZSXlnDVN8XXjDfqkLrkPHSUwTJoRXkXePinaj42fRjwZHgJkW+pjhT2PatVjomFHWjVCrmcyOc6MATScIDAE1u0hqXyoiiWscougg+rI9ez3kb2JEAAiWAFX8LZdbdWk9oAQHq9mBXzRHWEKO65Go2r0sIKBF5nPg/wcSZig0oCZ4EWqQggLpRKoQKRq/K4Oi/qYGSMI9VeMhs+c+jmzqgZNCvLoYKPoNvW1wsAcv2uXvBRt8yDeTFP5h1W4AdN3UYdajG2AYBodH06SgbZ4uOwSxiBVm+gp1v0dHZanYow8qzOgx0Z5k0eyEsYgbqNrlW9JmENxtYlR9XQgYPspgDCyAaOdDqDVhcwOxX93V3o1XrrXFTTCuK+gs7K1Ny81YMOgl4zGpE7xeLs4r687EdNYI2vrVvA+bK4JUrw2eN5zZQXxDv2bAd7e2IDPsrED4E8kTfdgeOlzQavdedPjFlYW8toHYArpnlUe+ZNMgij6mXbq7cL01ohVXlNxN30ijyRN/KoO4Sh62YyVGNtHYAolcgAyJF93Q1kNvi7C4VYgs8uLIKQPOrunFgdPY2r/2x5Gl6rsGYBEO2/TjQGP9EwgeYX3H1KZ+CgMgs2yPDLE7Niz+PHxd5vHxe/OjEXJGmLV/KsM+jWeTPeiTVijnEsAM4sik/hQXTOZxq7ZhxQ7uvqCtzyPfjvZ8W5mSVxdnpJPPgf7zfTt+t3tITkOejB8A2MaNT5hnzq/CDWiDm+sgCIvvlNdeKF9khq6o2yIPs5zBHwrAYVQ/DZgSAMOpBn8k4ZdARdOnfM6xrmLABK0xxxnFBDxHJpSSwuBl+IPZ0Fz/O4GsR0TZLDRZQh6EBdU+dRBhtzFgBxAESkAJycnBCjJ07C6TS4DXzovZLvCG+mQVdhUgbKElSgjqlr6jzKYGPOroIjBSDHpYqYG339+FtioRjMTIgOyxFVgQUlC3VLHVPXkY4FUpFKWJgzZpXaBvergaiUy3w7u7qt7Fk1HH9zVIxPTvpihwO6QVoNX8wEkJiy+B2kpk6pW7upY+s8APY8kSDmiD1DlFaR6IlKQIkGBwZFDm5QDHTqPHnyjDh95iy+Um9dtTAGcwMS3TEZrzJRh9QldUrdMlDX1HnkAdgzKjJ6ALKnd+MNvwenySttnQsXx8Xxt07AkdNdY7kd1iJN1s8GCWWibG4CdUcdUpd2oI6pa129azsfJ1diz5Aq2h6wzWgnPEM+ftPNogvjX3aYn18QH3xwwf7p6JpLQcejkaBuZaPuqEM7ULfUMXUdh0DsAYAiNscssGq46WMfF0M7h9f1k3c5N5rr0D+hv85cyDduZavWHXVK3dpNnZBZr5sdsWegO7zaA6gbJfyHHIC97roPicOHj1jVRAGeyk4Dp6/C8q1zylOQ8Sibmyk66o5VLXVJneoYkPcjH7GXRXc4VgC0Bbpm127Rjd6xYTh3zecCorQHyuh0gVMBg9gf++hNoqenN55qAfZw8mY8AUiNdXf3uJrJaMeee2kPbmTkTAp1GNsA7BnopV9p9ceNU5fDMNlsPDycdarRtYwudaiT91raxB6bFbGsgskslnrX8tzwt2HgcEAIk/ZAGSmr0+BGh05pBhWP2DPi2ga0hHTx9WYbbN4TlLLiRMeVrC50GLqMcW8DLmPfZqcB+xE7jZr4eG5kdaPD0BVjWcDQc3WeIfdYcRqwU4vTqImP50ZWNzqMQjGsgoP1Jw9QCje7I8RhailA0ZuSciOrGx02zVTHS2AvC8MxBxDGYGZ6s4Tc3Mdprw/eFZsJaHxSwBjl4PDe9U0gD/ybt8yGMSv22CeFuO0a5+ndyEodxjYAexyGia0FrKw4r4K9es54LZzBoSvg80qD6cYwVfvNl9xRcCOrGx2648J/bGKPA9GxBSB2PHYsJQ7TcRw3iIiZADs9bluvbmR1o8Mg9OKKBi0gJoRjC8AMhlacuuljsbMr2f1G/rMb0EMPYLMfVsGP3+qOG6eyrmCTTOowroHYs9uAseQxC/+3YnEWc5lbj5XT2ZJVk5sGuh+hv3pzQXz1Zj8UvKWljLZj6VYUinDBz+VjPRVHC6jmtxIkqvdZzO1y/YLTEOsGt1MhtojnRkbqjjqMbVAKnRApLsWVQVrAUqnsmD2nXiKOCcYwohsZqTvqMLZBinEA0BiNK4PZrCGuueaKc+pWfHI/5rQHNzJSd9RhXAOxZ2SUiCUAK5VFsbQ4b20S7lSBLBw3QxRO6cYlHmVzA0DLdxA6pC7jGIg9Q+TjB8Dl5SIOmnHe9rOVy4EY7kif1kDZvAw2UZfUaewCsGf0SDmBucXLcWCOi6UXF+d8HTRT0rDFRxx0Qx78yMbDe6jbyBekrymTmCP2VhsIMnoriCPeVxXkc986VlFueopxAddWfFAmN9VvPXo8ZckCYchjpvV4wQSI1fSzAIihmMjbgTyaAZ9nXV7dPuQRCGkLgcnEdiR1HXGwMWcBUBnR9oR5nm+QVQOrqjRZQcrip/qtxRp1TZ1HGWzM2VXwq5Eyo8FjY24hho1uj0rWIYvSoHNX4klhYc4CYG+H+A2msKL7JNzOxjuQdHHtjDYHUWMdhT1fyhJ40KBzpzwSa8Qc46+2AaVcQOvrFacEgo4npZ7R+llsSxF3j+BmuuT5IZRBR9Clcye8EmsAoSXYahXMVEodc5JYR5yp6WkxPRP84YQ8FHBqjkMPwXRudMjeiCZ55uE1Og42pK6p88hCFdbWAZg1jMgAuDA/52s7tmaKZAN+BlYkSSAkr+RZR0eKtE+fOSeo86hCNdbWAdiVEy/DlymS8QspDVHGCZJjFy5q0QnbUQsunBq0MOGCKHnVNaNDHZdxZCx1HkkAxiysrWW+zgXq5EW0S38bBVODg9usbLmd2OKShgY3qM9jbJBn9cY9kEfyqiNQt/Z2d7bOdeTTjCYxRqzZcdYBaD2Q8gX7RZhX7lc3gB07eajz+++f05b1LIZmZhfiWR2zaiRv5FFXoG6pY+o6sj0CazC2AYDYKuFZXcJvRffwodXt2CYvT4mZ2eA7JHb+PCyaHROnXsV2Op1X8kKeyJuuQJ1St7A+4vChw7qy2ZJuLcY2AJAnWYNBl2u0tszTUYQ89rLbs2efFZeNZJ2dBjp1TqInqKOR70jYqkjkgby4cTStSu7o1u54MDJ1nM8Hf/aIE0aIrerT0plmAwAtIkp+3wkxHXH27dsvuA0tPXnHLuh11GZVNDE9I+axbkIn2BvpiXkyb/JAXnQG6pI6pW6p48hCHWxtAqAsiB8DqZE41fFstIMHV6uHc+cvwCroZ4MNfoKgjPnjMIDIPJiXBX5NnY1qgFGH1CUDdav1/LnqjGvuiSliq+bxZgvYKy3fwOdqI4b1e/v2HaK/fwDHt1bEmTMfuMp2Ho14L2eM0AJNz89boGA7TMfgL2mSNoHHvLxYPcq2ABndBDZnqEvqlLqNMDy3hq0NLNSdA1OWqVR/uiFmiD/YIfnv/3nFajR3XegUw0ONFcehhUkUzPjE5fUFTNPTs+LggX2u90QmKNgTncN/BzY75+EwdGv3uu8gQUcfPms+lxbWow7ZSTl56gzknLIocPPxbdsGxLbBQdHR3taQKqvey5en1zoeRxrGC+PFKqY251R3ShrVRNtMUY1hD5LBzUnCefLeeyfF+2fPWJnt2L4Ni5OGoOzVHfA5R3oZU0nj45fF7Gz9Ef1O7I985PDBpgXkVBKe0dGG3Ve55W2G/2gqcIcqVCsWCVar/COAyRs7Fss4k20ZC8P9Bn5gJ945CctXf3iGa6a3bx8QA319Fm/Mb3W877y4ND5pZb8XHY9rrz3olxXP6aGpyd6CHIa+Ng3y1gUgc5ouVr4DvT7iOVefCVmQv/vdy1DmlaGJNlojbIlhHze1VRZt2DV///49YrC/f6uosXw/OTUlTp8+i/UczoBMq21ii5LlKu+ZjvYOcfPNt6yDMwpB8Z1+t6+Q+Xq9vBsCcF6pnSsldRpf9+oZWvVSa352afyiePPN445z6cGG3IVCJ04GGtuQpr+/TxzYvxvVaTLOEGHH4dTpc2JqaqPDAM/6KBYxWD3nfJz0+g/fEGnbD1avnM3L/V1S1p1nrdsGZOkxwVSx8jRu/3xDaYb4Y8f2nWJ296w4d+5sw1w5tLADBTO0cwjgWx3fGhgYEG+PvrU+2MyCZFW9d/cusWPHtvWqsyHRiF6wKr90aUK8f+68VZXbbFhnp4x8CLzvtB4Vi0Vx8eIF/I+hR32lhrDj29fdu/dECj7ygabJ013SqAs+vm9oAfmyWFR70HQ+yTYhf0cVxsbOo0d8GspenctlW2zbth1iaGhI9PXVr17nMbPwxvHXNhUQq6lrhodQMIOxASKBN4722gdjmAtHZ6U68AO74fqPiK7u+vvjTE9PiQsXLoiJiUvrA+ur430HxPDwrmpSod+zzdcu5MFCQTa0IE0BSI6nFypPo/d2f+jc18lwCV4t7BE6PW5q2WrA4/hXFE5tYO9x164h9CQHImsfsZ07MXlZfHD+IhYKbQQe+d2Oj+zI4RHR1qSnWy0XvVxoLdvXOmvV76K4B7i+19eZeaBZ3lsCcKasDmE/urfxlWaaEYrzu4nJcfHOiRMbOjQ2vyyw/r5eC4h9fT3arSKtHYeJCLwpjAnWm5Nmx+HwkSPgabvNZuKusH4VbKZ+Habe3m3G/JYAZGL0iH8Ivd3djFDc33GfwVOnTorzYx80nPHgdsBHDh3EdnB6zu5hO/TEu+813PMQhSZ2DV8jDhw46Hhr4rjqHaL8CD3fe7bizxEAYQUPwwq+jq+3YyuCcX/PauoMxhcvoF1Ja1Qbdu8eFrt3Ddc+DuT3ufNj6FBt7KGTMIE3hPbaPozXOW1eBMKQJiKQZxHW78Zax4N62TXsBVdHJqGphcoTePbX1c+TeM8CHkG7at/e/eLs+2esnmS1V4yb7eDcyl9Lm52pnejB7927DzMvif+219WBD/uJvpzxzvqDJjeOLCDTg2h+pqSO43qgCb3EvWIbjG3ESxcvYupvEq5KOfGRGz6kRY7XXn9LlGCBB+EQumPnTquNF7cjVP0KDut3qjcvr8fVkVu3IwtIpkhwtqweqlTUz/0yGaf0BADHG/m/ghmH42+9ro29DutA7t8XWczQpDVgpuohp+CjDja5YzVTTE9OPgck/rRZnCS/IzB6e/qsRTtBy8G2J2mnGXzEhoURF8pzBUDSzUn5FWRUf2bcRcZxjcrZlCKcN4MOpGnP1ARNOxb0gAkLGy6ZcQ3AfF6egYn9G5f5JCZ6AQukZmeD3z2KNEk7rYGYIDbcyucagMygNyeeQIYvus0sCfEL+U743V0OdEsPbg9CmqSdxkAsEBNeZPMEQGRYacvLe+DntXmOywsXMUpDd68svGZOvPOe5drklzWONZIWabo5aNpvvmGlJwYsLAATXvL0BEBm1CnlmMjIewFGvStqvEjlMw3XzHIZ42tvvGl5ZXtZm8I0XAb5f6+/adGKbB2uT100S26VPTBgYaFZxCbvfI0H9OXk83BWeBz0/6pJHol71Qfv4omJcWu7kHfePRUI/6SZuqDU4xhwft6PXJ4toJ1pb8F4FL3iX9u/03DduWMo0LlYzjGTZqoCytwqe59C+QYg24PtSt6NtsC4T15ik5yu/9d/+MZA2mzQj0WLNNMSWNZWmXts91XrwfFUXHWievdYxPQJHBd4DHN2q27J9SIl7FkJ63ZPnXpPzMxM13XlaiYOXap6e7EU4MC1mN7LN4uarHcY78OSrKNYZPRKEIwHBkAyA6+Zz8Fr5mfo+flqWwYhWItG8BqANV+Bl8sdcE75ZVDUfVfB1YyQMTD5Zfxv9nOqjti6T5wGWKYs2yDBRyUECkAShCfED3Bq71d53wrp0QDLlGUbtESBA5AM9hfkk2h7exoZD1rAFj3/GmBZskz9U9pMIdA2YDV5tAPlTNH8Z9TFD1Q/b90nSwMAyNMYbnlQV7NKiwWkisnwKuMtS5gsyF3hlpZPJ/gsnFzJTt/dVFE9LIX6e1pFfbm0KAelARoPtvl0VbvVfIYGCLjz3wsA/iv+W0M01SUQs3uAbwX/X9bR4agnamgAZOYcJ8TmOc+mabC6nlIT+4yDzIa8M+ihlmb6CBWAZIQzJrCCP8eeIclddd1Mowl9x+k1WL4vBDXD4VQN2johjRiggG1CfjRtDgyN5E3EczgWsEzCBh91EzoAmWlnpzzfl5dHYX7/Dl9d6vwJKWMSAnXPMmBZsEyi4Dn0KrhWyOmy+qyoKMyeqMb78NYmav32rQFUuZfoUEyfTt/EfBCIHIDkfUGp4eWSwv4z6jYfsrSSOtQALN+LdKP348nsMKsto0VSBddyRUWg2/8ZaRh/meYln7Vyh/4bvVzqmLqOA/gofywsYHVBlEpqX1mppzBUc0f189a9Tw1I+TOs233Iy9JJnzk3TR47ANrcYhuQ2zFm+BSq5QP2s9bVvQZQ3Z7idhludyxwn5O3FLEFIMUB+PLTRfObUOIjuE/GDuPeyiHwVNDZInT2RF/BeAz3jjYKCpwJBwRjDUCb/9X9Cc1vocXwRSg1sTu12vLovAJsWJ+rfoK23qOY0XC0RZpOfrainQgA2kIAiIdUxfwGOir3AYjpWeVjC+jjCuAto8p4RmaMbwN4TbfF9ZFN4EkTBUBbeu7ejxPdHsFY1gMAYmTnmNj8RHkF8Mo8CqFDGN9ttht9lDw2yzuRALQFWj1Mx3xYKHk/CiGyY8VsfsK84uObFFJ9L5s3nmx0CEyY/HjNK9EAtIVmdTxdFJ+HG9uX8Ox2/E5lhwXWjmc5PMeD//oK4hdWtWsrIaHXVACwWvczSg2oorgL1oHtxFuq3yX1HkB7GVb+GZ63W+/I06TKRb5TB8DqwrB6z0rcicb5p7E25VZck7FCHMMmKJjforP1Atzin01Cb7Za727uUw3AakXAGnbMl8UtK6Z5FAVLTxz6JcaiJ82qFB/IK/hAjmUN41hXTryMZ40PgasWLOH3Vw0Aa8sJ4OucWRSfwml6N0nTHMGq6xHcj6AzM1AbN8jf6DxcRr0zilUXo8owRnH/am+H+A0A5+4o9CCZipDWVQvARjqfVWqbKImRihQjUpn4FzsAzm6Asxtg6cZqHXQ6cb/226KjxBzezeHdHN7N4531GyCbwzKsS0oaoxklRkVejPZIOdEo76vx+f8DYi06xjCLKmEAAAAASUVORK5CYII=";
|
||
},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAF4VJREFUeAHtXXuMJMV9/lXP7s7O3mPvbg/IHSA46/BCsCwbyealOKfDJH4cWIkQKA4gWRArkSIskYAxsWNZtokDDlL4J0qCZQkjLBBShH0ODjanCxGYyx/4BcSrO+4hjjv29vZ25+52Zmdnpivf17MzOzM7j+6Zrp6e2Spp1N3VVV/96qtv6tXV1Uqsq2HgrNZbJSuTRSWTSruTouUCUWoDjhu0Eu+olo/CI52Wczg/p5ePavkoWtN/RitnKqFlSlIytVGp0zUJrvELtVbzr7Vel87JjRDPNcp1J7VSFNukFr3FJCdK1BmIckppPaUdZwrnb4wn5VWl1ILJdOOKvWYECMElzy/KdQXX3Y0abTcyfi38huNQMBBfXoscQI25b8hx9q0fldfhl4uDbaZtGGgBphf1FWgWb0PB3oQCvgHHlGlCQ8FXKouCeQ1/lJfR3D8/PqoOhoIbQ5CBE2Ba6y06I3eI0nehhrs+hpwHNgm14S9Eqx+oMXl2XKEJHyA3EAJkUzqfkc8qiA5lswfXIwNURpWsQIhLuNirIcZNY/ITNt2Vm3160tcCPK/1RYWsez9qh3sweJjo0zLoyGwMZmZRy39vKOU8vl6p6Y5AYhCpLwWYyehLc+I+iEK4F7XdaAx47JkJqAUX8ed7MinOo2Nj6t2eGdJhwn0lQAwqduqi+xA653ez2e0wzwMZzWuOtX5KJZzvYNByqF8y2RcC9EazrvsNEXU7hJfoF3J7YSeEWMTM+HPKcb7eD6PnWAsQYkvNZ9yHQeoDOE/2okD7NU1wlgNnj20acx7BeTau+YitAM8u6j2uq58AiTviSl4/2AXxHXEcdd/GUbU3jvbGToDZrL5sUet/xqTx5+JIWN/apNQLo0p9KZVSx+KUBycuxqCmS8xn9UMQ39tWfAZKBX9ockuOybWBFDqCjEUNuKD1tnxWPwNidnWUCxspEANolvcPp9Tn1yl1MlBEA4F7LsD5RX2zFPXTmMu60ED+LGQTBjCHekoS6s5No+pnTYJE4t2zJthrcheK3xJX/9SKL5KyrknE4xzcz6MMetkk96QGXFjQ25eU/iH6ep+oYcVe9IYBpV4Z0erP1q1TJ6I2IHIBpjOa6/B+jH/gBVFn1qbXnAE0yTPoG94yPqYONA8V/p1Im2A80fi0K3qfFV/4BdktIsuEZcMy6hYrSPzIBJjO6ju1q3+EZncsiIE2bIQMoGxYRiyrqFKNRIBzGX0/mt2n8BuKKmM2nc4YYBmxrFhmnSEEi2W0D4iMqHTW/Ucsi38gmFk2dBwYwOsAj42nnC+jb4g3Gsw4YwL0xJdx/x2W32PGdIsaBQMQyJPjY84XTYnQWBPs1XxWfFFoxGgaqEDuZVmaSsRIDej1H7T7T6aMtrg9YEA5f7N5TD0edsqhC9Ab7ZYGHKFjh515i+efATbB+N09nlJP+4/VPmSoIuEcEofxHEm1T9qG6DcGIMCCctStWGn9Yli2hyZAPuHgRKad5wuraGKKo1TGEbU7rCcmoQiQz3bzon9ln3DEVDQhm8XHdsOiPhLGs+OuR8FobhNcWGDFF3IpxxiOZe2VeQgLW7sWYDqDt9XsqpYYy8WQaShzr+y7hO+qCfYWk3I9n9ZdC7nLfNjoPWAAgxJXHPWpbha1dixAbxl9xuv32ZXMPSj8uCTJldXDY+gPdri8vyMBst+H+b6f47grKiLOnCvI1InSlnmT25OyZUNvZ3riZk9U5dAoHdSE+zE/+Ekc8VJ8MNdR05leFL4ovitYUt2FpvhyBe39ykLsDrG72HGzp7vcdBebWqAmOkEJXI0sv7f7tU4S6yYOxVd21edlv6iP1TZUn0dpBwpeiu6SuMWCaBeVj3ZLySvM1DkJcRJDknBGsJVORw1doKzAlq9BGz8M+t5x4BoQ75Y+YSebA5VN6IExDSL5fFZyi2kpLGUhQMzCQnz8i3o/nNOP9xiGYRnHqMNiVk8bARMJJEBul4Gc3howDRs8RAaKbl6WsmkpFvxvIc2wXhzENeqgDU8jARLxLUBUsSnu1RIA2wYNmYEChJTPLXRUl7H+Y1ximHTL+/mk/KbhW4DcpQoi3OEX2IYLlwHWfAU0pd06YhDLlKNGqBW/+L4EyP350JF90C+oDRcuA+y/FVB7heWIZbJPCK08QM34sdeXADU2h4SyB3Ljbz8k9TpMIb/YUbPbzG42x8Q05aCVJDXjB7+tAKHkndyZ1A+YDRM+AyjMQAMOvxZwYEJsc07dXtJO6xTaCpB7MsPQ2Gzn1To7g3eX83ymnElsasbbz7uN8S0FyN3ouSF4Gwx72yADnGQ25UxiezZDO56GWmSgpQD5KQQo2e5G34JA07e8JxyGEjGJTZOpHWqolflNBciPwGClw72tItt75hngEw5TziR22WZqiFoqX9cfmwqQXyCCgtf0R2DqyerFNcrAWLImsctGU0Pe16zKHnXHhgJEpGF+/qourL3sAQP5vLk+oEnsGqr4KbUmXbmGAuSH/zBRuaa+vVZDWIwuFnPmRsEmsasppJaoqWq/8nlDAS5/dbIcxh57yMDc/Lyx1E1i1xvdTFOrBMjv7SLynnoAe90bBubnzhpL2CR2A6P3LGur5tYqAfJjz2iv7WO3Gpp6eIHFpKdmZkM3wMOMYKFq2XBqyvuQeNlj+bhKgPgGrZ14riOpl5epVEqOv3dCisXAr1s0NZtYxCR2pK70QfGaJGsEyBUMUOp1NSHsRU8ZmJiYkKWlvBw6fDQ0O4hFTGJH6aCt6+tXydQIEFNOt0VpkE2rPQNbJ0ofE5ibS8vRY8fbR2gTghjEoitjt4kS6u16jdUIEM9Obgo1NQvWNQPJZFK2bdvu4bw/fUqmDr7TUXPMZpdxiUFHTGJH7uo0VhEgqsck5txviNwgm2BbBi6//AMylCgtSGLt9evfvh1oYMIBB+OUaz5iEbMXjhqj1sppV17LPL8o16EGjLhXWjbDHlsxkBwZkSuvulrefPM3XjD23w4fOYaBxEnZvHlcNm8al9HkiIwMl9aNLOXzwknmufm0J7qlpdrJbGIRsycOGju/qDjO+G+mXxFgwXV398Qgm6gvBrZObJWdO6+QQ4cOVsJTWNPTM96v4tnmhBjE6qVb1ponwEoTjHV/VoC9LBUfaV9y8aXyoQ99uNIc+4hSCcJml3GJ0XNXpTVPgGiT1ymRa3tumDWgLQOsvT728esrA5O2ERCAAw7G6XXNV7aVWqPmeO01wemc3AgPu/C0zFDMj+y/TX7wSrn8sh1yenZGZmdn5Uwab82VX7d0hmXL+Dpvno9TLT0Z7bbgkFpL59SNCPJSqQ+o5ZoW4e2tmDJAYV28/RLvt/+t8zVWfvjq9TXXsbsoae4lrwlWrjsZOwOtQQPNQFlzXg2ID0BMYgpmoDMcRuamsTHBfnzS+X9OKjl0Zr3M59Gbgds0rOX5OSV/sE3LLswZX2Qns9rS7WkOocpNsK0BW1A2g3e4/+UtJS8cQTdLl0SHd6UrMaZzSqZPirwKYT76Sy2f2yHyV1drucC+0FDhaNWJFk9zzlmtt2LFKtcAWteAAdZ4f/Kikv84rKrE1yDgshcFyrCMw7jWNWaAmqP2HMmWlNg42Nr2feaQyP2vKlkorNR2fhlhHMYlhnVNGID2nKKyAmxED2uv7/5SYU+W4OIr4zEuMWxNWGak9kjtOUrbEXAtLSLs8331QHfiK2NShMQipnW1DFB7EKDYzyzU8uINODppdutgKpfE4iDGuloGqD0Hw+ENtd5r+4pTLRzthu2ISWzrVhig9hx0cqwAVzjx+msrUy1VN7o8JabtC9aRCO1hP38rwGpaOMlsypnENmWzUVxoz8EDkJg/NDRKwSrw47WPVFfd78bDJHY3dvUqLrXn4NVQ2wRXlcB0puoi5FOT2CGbGgkctWf7gHVUFw0+EzeJXZeN/ri0fcDV5aRcc7tRmcRenZM+8PFqwD6wM0oT80vmPuRiEjtKjsJMi03wuTAB+x3r3NnSS9sm8mES24S9xjGhPU7DWAFWMZ1b4G5UJtZG4lOzHnZVYmv9FNrjNIwVYJUQLsRi0vPz4e9GRUxiW7fCALVna8AVPryzHZuTMj9zsvT93bp7nV5yN3piEtu6KgZYA+KBsK0Bqzj5oys24IuSBZl57yi/M1B1p8NTYBCLmMS2boUBas/WgCt8eGefuXJcHDyNy5w/K2dOvdedCCE+YhCLmMS2roqBUg2oDT58qkqsT04v3jAsf/7RCc/as2dm5NTxwx01x2x2GZcYdMQktnVVDGiNQQh2gK3ysqdg4Cu7fk/Wj3hvrHq113vvvI2ByWnc8dMkay8s47DmoyMWMa2rYwDrdIe0cqbwF6+7s7Yvt60fkn/908vkzmePeN1A9t9On3wXA4n3ZWzjuKTWb5Th4aQkhko1WrGQl3w+J1kILoN5xAKuy47bMBOLmNbVMkDtDSW0TIW3+3BtAv189ZkPbpRH/ni7PPxfJypjEQrr7JnT3s9P3ig+YhDLutUMUHuOpGRq9S3rQwb+8uMXyNN37Kg0x0FYYbPLuMSwrgkD0J6zUanT+KDcmSZB1rw3a6///eur5K5rJryRbDtCONplWMaxNV9ztqg5aq/UMVGoBbVc3zz42r7D/tsTey6RL//hRfKfv0vLSwfPydt4weNMttR52ZJKyO9jPw7O83GqxY52feiFmoPzBKi0nsL4zgqwDW8U1l98bKv3q9+Nalfcd6Nqk7eob1NzTNOba9AORsLWWQYiZKCsudJkl5I3IkzbJmUZ4N5OnuY8AY4n5VWl1MrklSXIMmCQAWqNmmMSngDhsYA+4AGDaVpoy0CFAWqNmqNHqQnmmdb7eLDOMmCcgSqtVZ4PDTnOPny/4e+NJx4gAWxmLUV3SdxiQT56aVGGMXVOl8e2SktLC+IkhiThjOALE5h8s65vGKDWysZWBLh+VF6fz6osasKer9vF5oVSyC9KsZAr2ynJqoUkSUdDlHnvV8AGh4mhpAwNj6Jfa4VYISyuJ0plqbWyeZUmGLUINpqV18o3enUs4lMDS9l0jfja2UKhenHKnyloF8He7xkD1Bi1VjagIkDPQ6mXyzd6cSxASPncgq9FT/X2sXFmXGJYF2MG6jRWI0B0pZ7vlems+Qr57vcvIwaxrIsnA/UaqxHg+Kg6iOrxF1Gb7vX5UHuF5QpeLVoasISFaXG6Z4DaosaqkWoE6N3Q6gfVAaI454AjTLkQi5jWxYyBBtpaJUA1Js9CqbUfmDWYD2+qxUC/jQMTYlsXDwaoKWqr3ppVAhxX3trAvfUBTV1zns+UM4ltyuYBxt27rK2aLK4SIO/qBlVlTawQLzjJbMqZxDZl86DiNtNUQwFuGpOfYFI3/P0pGrDL1xdNOZPYpmweRFxqiZpqlLeGAkR7nRelv9coQth+2uAbeSaxw+ZhoPGgJU9TDTLZUIAMN5RyHkck40NJkwMFk9gNuLReDRighqilBrc8r6YCXK/UNObnnmwWMSz/fN5cH9Akdlj5H3QcaohaapbPpgJkhKQ4jzarOpsBBvVfzJkbBZvEDprPtRie2qGGWuW9pQDHxtS7GBI/1Qqg23tz8/PdQjSNbxK7aaL2xgoD0I6noRWfVWctBcjQKuF8B0o2NlSdnyvtn7LKshA8TGKHYN5AQ1Az1E67TLYVIJ7dHcLM4HPtgDq+j6fTp2bCn/HxMO1C1Y6LpfuI+rmSdlojtRUgoyvH+ToUbWSdUyqVkuPvnZBiMbxKlljEJLZ10TNArVAzflL2JUCuYMCUxmN+AIOGmZiYwPL6vBw6fDRo1KbhiUVMYlsXPQPUSv2ql2ZW+BIgI28acx6Bso80A+rUf+tEafOeubm0HD12vFOYSjxiEIuujF25aU+MM0CNUCt+E/ItQABnHUfd5xfYb7hkMinbtm33gr8/fUqmDr7TUXPMZpdxiUFHTGJbFy0D1Ai14jdV3wIk4MZRtRevoL3gF9xvuMsv/4AMJRJecNZev/7t24EGJhxwME655iMWMa2LmAFow9NIgGQrb8X5jTOq1JfwfO5mzA+O+Y3TLlxyZESuvOpqefPN33hB2X87fOQYBhInZfPmcdm8aVxGkyMyMlx6NW4pnxdOMs/Npz3RLS3VTmYTi5jWRciAUhlqI2iKgQWYSqlj81n9TXQ0/yFoYq3Cb53YKjt3XiGHDq2s2KawpqdnvF+ruNX3iEEs0y45pCRXKC145XmvXa/tQbP7TWojKA8dMQfxJdJZ/XMcdwVNsF3407On5Xf/95YUAk7LsNllzReF+JiHM+cKMnWiNDM1uT0pWzYE/i+3oyLQ/V7aA/HtH0+pT+IYeC6tIwGSmQWtt+Uz+ld42HxhIKZ8BM6h5jt69LCcPHnCR+jSgIN9Ptvs+qIr1EBY63dqeEx9ZJ1SJzsB7liATGx+Ud8srv4pasJAgxm/huZyOTk9OyOzs7OSzWYxt1eqcUZGkt4kM+f5ONViR7t+GQ03HGo8F/sWf2rTqPpZp8hdCZCJzi8Uv4We0N91aoCN178MQDzf3rQu8dVuctC1ANkfxKBkH0bFn+jGEBu3zxhQ6pVNKbW7k35fdU67FiDBFhb09rx4/cHSY43qFOz5wDGAft/MsKDft07566S3YCCUvhsNwT/hFkxSZ1qkZW8NAgMoY5Z1GOIjHaEIkEDjY+oAHsPcBuPMrbFnQtb1jAGWLcuYZR2WEaEJkAZhBcSLMPIL+JVmaMOy0uL0nAGWKcuWZRymMaEKkIZhQvJpLepvwzTSYvWeAZYpyzZsS0IXIA3cPKbwSqcYWT8YNgEWrz0DLEuWafuQwUOEMgpulCymZ1Q64/4b2uJ7G923fv3BAATy5PiY80VT3SojNSCppcElw21N2B9SW20laz6T4vN0sjrZ8H3mMvp+Jfq7rBXDR7eIYTPAyoN9PlPNbrW9kQkCq2fuhAC/j19vl41U596er2IA4ivg9wUTA45VicEjMgEy8fSi/rTr6ufDXMzaKFPWr0MGMMnszfOFPNXSyppIBUhD0hl9LWrBH2MZl31s16pkIr7Hx2uo+W4Jc5LZTxaMDUKaJc4M8jkiRimvNAtj/SNmAGXBMolafMxl5AJkonyO6K2kwHIe/Otc+lkXPQPkHk3gt1kWYT3bDZqLyJvgegO9Ra1Fjacn4a+srk/LXq8wwJXMklB3drOYdAWt87OeC5Cme8v7s/oZ9A13dZ4VG9MvA6j59g+n1Oc7XUbvNx0/4XrSBNcbRiK8l1oc5yt2SVc9OyFecykVOCbXcRAfcxaLGrCa4mxWX7ao9ROYqrm12t+ed8mAUj/Ce7v3dfLqZJcpt4weOwGWrT27qPdgzvAJNMs7yn72GJwBNLdHuF1G0B0LgqfUWYzYCpDZgfhS8xn3YZD4IM7tVgcByhic5cDZY8ubSvneqyVAEqEEjbUAyznEE5QrtOt+Az2G20FqaROZ8k17rGEAwsPL4fo57s/nd4u0GoCIL/pCgGVOIMSduug+hIHK3RBi1TfUyyHW7hHCw3th+iluiwvhYVfb/nB9JcAypZmMvjQn7oOYy7oXQhwt+6/FI4S3yE8hcDf6dhuCx5GfvhRgmcjzWl9UyLr3i1b3oBDW1Hao+PPN8mtW/AhMq+9wlLmK67GvBVgmlc3xfEY+i2Vsd8FvD64HcsCC2o770O3lh/+87/mx2e1zNxACrC6DtNZbdEbuQO3AfuJ11ff69RzCex21/FP83m6jT572a75o98AJsLowvNGzltvQOb8J76bcgGN/bJuPLW5RMK9hsPUylsU/3w+j2Wreg5wPtACriUBtmDy/KNcVXHc3CnY3Ms51ibEYSXMEiz/IAfxB9g05zr71o/I6/EpbgVVnYgDP14wA68sO4luXzsmNouUa5bqTeOt6EueTGMxsqQ8b5jUGD2fQ7kzhrYsp7ThTOH9jPCmvQnALYabTL1hrVoDNCuis1lslK5NFJZNKu/jJhRDnBohzA8SyAW/rYNCJ8+VrD0fLOdw7h3vncO887nnXENk5vIZ1SitnKqFlSlIytVGp083SXov+/w8nKDA07uUpHQAAAABJRU5ErkJggg=="},function(s,t,a){var n,e;a(480);var l=a(482);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-786f989f",s.exports=n},function(s,t){},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",[s._m(0),t("el-row",{staticClass:"cards",attrs:{gutter:14}},[t("el-col",{attrs:{xs:12,sm:6}},[s._m(1)]),t("el-col",{attrs:{xs:12,sm:6}},[s._m(2)]),t("el-col",{attrs:{xs:12,sm:6}},[s._m(3)]),t("el-col",{attrs:{xs:12,sm:6}},[s._m(4)])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",["设计原则"])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"card"},[t("img",{attrs:{src:a(475),alt:"Consistency"}}),t("h4",["一致"]),t("span",["Consistency"])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"card"},[t("img",{attrs:{src:a(476),alt:"Feedback"}}),t("h4",["反馈"]),t("span",["Feedback"])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"card"},[t("img",{attrs:{src:a(477),alt:"Efficiency"}}),t("h4",["效率"]),t("span",["Efficiency"])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"card"},[t("img",{attrs:{src:a(478),alt:"Controllability"}}),t("h4",["可控"]),t("span",["Controllability"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",["一致性 Consistency"])},function(){var s=this,t=s.$createElement;s._c;return t("ul",[t("li",[t("strong",["与现实生活一致："]),"与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"]),t("li",[t("strong",["在界面中一致："]),"所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",["反馈 Feedback"])},function(){var s=this,t=s.$createElement;s._c;return t("ul",[t("li",[t("strong",["控制反馈："]),"通过界面样式和交互动效让用户可以清晰的感知自己的操作；"]),t("li",[t("strong",["页面反馈："]),"操作后，通过页面元素的变化清晰地展现当前状态。"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",["效率 Efficiency"])},function(){var s=this,t=s.$createElement;s._c;return t("ul",[t("li",[t("strong",["简化流程："]),"设计简洁直观的操作流程；"]),t("li",[t("strong",["清晰明确："]),"语言表达清晰且表意明确，让用户快速理解进而作出决策；"]),t("li",[t("strong",["帮助用户识别："]),"界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",["可控 Controllability"])},function(){var s=this,t=s.$createElement;s._c;return t("ul",[t("li",[t("strong",["用户决策："]),"根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"]),t("li",[t("strong",["结果可控："]),"用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"])])}]}},function(s,t,a){function n(s){return a(e(s))}function e(s){return l[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var l={"./en-US/nav.vue":484,"./zh-CN/nav.vue":493};n.keys=function(){return Object.keys(l)},n.resolve=e,s.exports=n,n.id=483},function(s,t,a){var n,e;a(485),n=a(487);var l=a(488);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-ff9b7b2c",s.exports=n},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(s){document.body.style.overflow=s?"hidden":""}},methods:{enlarge:function(s,t){var a=t.target,n={},e=document;n.left=(e.body.scrollWidth-s)/2,n.top=100,this.imgUrl=a.src,this.imgBound=a.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=s+"px",this.showDialog=!0}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",[s._m(0),s._m(1),s._m(2),t("div",{staticClass:"block"},[s._m(3),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:9}},[s._m(4)]),t("el-col",{staticClass:"nav-demos",attrs:{span:15}},[t("img",{attrs:{src:a(489),alt:"Level 1 categories"},on:{click:function(t){s.enlarge(846,t)}}}),s._m(5),s._m(6),t("img",{attrs:{src:a(490),alt:"Level 2 categories"},on:{click:function(t){s.enlarge(846,t)}}}),s._m(7),s._m(8),t("img",{attrs:{src:a(491),alt:"Level 3 categories"},on:{click:function(t){s.enlarge(846,t)}}}),s._m(9),s._m(10)])])]),t("div",{staticClass:"block"},[s._m(11),t("el-row",[t("el-col",{attrs:{span:10}},[s._m(12)]),t("el-col",{staticClass:"nav-demos",attrs:{span:14}},[t("img",{attrs:{src:a(492),alt:""},on:{click:function(t){s.enlarge(846,t)}}}),s._m(13)])])]),t("transition",{attrs:{name:"fade"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){s.showDialog=!1}}})]),t("transition",{attrs:{name:"zoom"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:s.imgWrapStyle,on:{click:function(t){s.showDialog=!1}}},[t("div",{staticClass:"imgWrap",style:s.imgStyle},[t("img",{attrs:{src:s.imgUrl,alt:""}})])])])])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",["Navigation"])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"block"},[t("p",["Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'."])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"block"},[t("h3",["Choose the right navigation"]),t("p",["An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation"])])},function(){var s=this,t=s.$createElement;s._c;return t("h3",["Side Navigation"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites."])},function(){var s=this,t=s.$createElement;s._c;return t("h5",["Level 1 categories"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Suitable for simply structured sites with only one level of pages. No breadcrumb is needed."])},function(){var s=this,t=s.$createElement;s._c;return t("h5",["Level 2 categories"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate."])},function(){var s=this,t=s.$createElement;s._c;return t("h5",["Level 3 categories"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options."])},function(){var s=this,t=s.$createElement;s._c;return t("h3",["Top Navigation"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top."])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Suitable for sites with few navigations and large chunks."])}]}},function(s,t,a){s.exports=a.p+"static/navbar_1.499e088.png"},function(s,t,a){s.exports=a.p+"static/navbar_2.59ecae2.png"},function(s,t,a){s.exports=a.p+"static/navbar_3.8dcec92.png"},function(s,t,a){s.exports=a.p+"static/navbar_0.b608f86.png"},function(s,t,a){var n,e;a(494),n=a(496);var l=a(497);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-5f7068dc",s.exports=n},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(s){document.body.style.overflow=s?"hidden":""}},methods:{enlarge:function(s,t){var a=t.target,n={},e=document;n.left=(e.body.scrollWidth-s)/2,n.top=100,this.imgUrl=a.src,this.imgBound=a.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=s+"px",this.showDialog=!0}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",[s._m(0),s._m(1),s._m(2),t("div",{staticClass:"block"},[s._m(3),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:9}},[s._m(4)]),t("el-col",{staticClass:"nav-demos",attrs:{span:15}},[t("img",{attrs:{src:a(489),alt:"一级类目"},on:{click:function(t){s.enlarge(846,t)}}}),s._m(5),s._m(6),t("img",{attrs:{src:a(490),alt:"二级类目"},on:{click:function(t){s.enlarge(846,t)}}}),s._m(7),s._m(8),t("img",{attrs:{src:a(491),alt:"三级类目"},on:{click:function(t){s.enlarge(846,t)}}}),s._m(9),s._m(10)])])]),t("div",{staticClass:"block"},[s._m(11),t("el-row",[t("el-col",{attrs:{span:10}},[s._m(12)]),t("el-col",{staticClass:"nav-demos",attrs:{span:14}},[t("img",{attrs:{src:a(492),alt:""},on:{click:function(t){s.enlarge(846,t)}}}),s._m(13)])])]),t("transition",{attrs:{name:"fade"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){s.showDialog=!1}}})]),t("transition",{attrs:{name:"zoom"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:s.imgWrapStyle,on:{click:function(t){s.showDialog=!1}}},[t("div",{staticClass:"imgWrap",style:s.imgStyle},[t("img",{attrs:{src:s.imgUrl,alt:""}})])])])])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("h2",["导航"])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"block"},[t("p",["导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。"])])},function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"block"},[t("h3",["选择合适的导航"]),t("p",["选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。"])])},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("h5",["一级类目"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["适用于结构简单的网站：只有一级页面时，不需要使用面包屑。"])},function(){var s=this,t=s.$createElement;s._c;return t("h5",["二级类目"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。"])},function(){var s=this,t=s.$createElement;s._c;return t("h5",["三级类目"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。"])},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("p",["适用于导航较少，页面篇幅较长的网站。"])}]}},function(s,t,a){function n(s){return a(e(s))}function e(s){return l[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var l={"./en-US/resource.vue":499,"./zh-CN/resource.vue":506};n.keys=function(){return Object.keys(l)},n.resolve=e,s.exports=n,n.id=498},function(s,t,a){var n,e;a(500);var l=a(502);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-5a4e54d7",s.exports=n},function(s,t){},,function(s,t,a){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("div",{staticClass:"page-container page-resource"},[t("h2",["Resource"]),t("p",["Here you can download design resources and tools that shaped Element UI. More design resources are being prepared."]),t("div",{staticClass:"cards"},[t("ul",{staticClass:"container"},[t("li",[t("div",{staticClass:"card"},[t("img",{attrs:{src:a(503),alt:""}}),t("h3",["Axure Components"]),t("p",["By importing Element UI in Axure, you can easily apply all the components we provide during interaction design."]),t("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"}},["Download"])])]),t("li",[t("div",{staticClass:"card"},[t("img",{attrs:{src:a(504),alt:""}}),t("h3",["Sketch Template"]),t("p",["Apply components from Element template, so you can improve design efficiency while keeping a unified visual style."]),t("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch"}},["Download"])])]),t("li",[t("div",{staticClass:"card"},[t("img",{attrs:{src:a(505),alt:""}}),t("h3",["Interaction Design Documentation"]),t("p",["Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective."]),t("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"}},["Download"])])])])])])}]}},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjExMHB4IiBoZWlnaHQ9Ijg3cHgiIHZpZXdCb3g9IjAgMCAxMTAgODciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgc3R5bGU9ImJhY2tncm91bmQ6ICNGRkZGRkY7Ij4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMzkuMSAoMzE3MjApIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPkF4dXJlIENvbXBvbmVudHNfaWNvbjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJBeHVyZS1Db21wb25lbnRzX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0ic2l0ZW1hcCI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik04Ny4yNDEzODY3LDQ5LjUxNzgzMiBMNTYuODk2NjQwNiw0OS41MTc4MzIgTDU2Ljg5NjY0MDYsNDEuOTMxNjk5MiBMNTMuMTAzNTc0Miw0MS45MzE2OTkyIEw1My4xMDM1NzQyLDQ5LjUxNzgzMiBMMjIuNzU4NjEzMyw0OS41MTc4MzIgQzIxLjcxMTI1LDQ5LjUxNzgzMiAyMC44NjE5NzI3LDUwLjM2NzEwOTQgMjAuODYxOTcyNyw1MS40MTQ0NzI3IEwyMC44NjE5NzI3LDYwLjg5NzI0NjEgTDI0LjY1NTAzOTEsNjAuODk3MjQ2MSBMMjQuNjU1MDM5MSw1My4zMTExMTMzIEw1My4xMDMzNTk0LDUzLjMxMTExMzMgTDUzLjEwMzM1OTQsNjAuODk3MjQ2MSBMNTYuODk2NDI1OCw2MC44OTcyNDYxIEw1Ni44OTY0MjU4LDUzLjMxMTExMzMgTDg1LjM0NDc0NjEsNTMuMzExMTEzMyBMODUuMzQ0NzQ2MSw2MC44OTcyNDYxIEw4OS4xMzc4MTI1LDYwLjg5NzI0NjEgTDg5LjEzNzgxMjUsNTEuNDE0MjU3OCBDODkuMTM4MDI3Myw1MC4zNjY4OTQ1IDg4LjI4ODc1LDQ5LjUxNzgzMiA4Ny4yNDEzODY3LDQ5LjUxNzgzMiBMODcuMjQxMzg2Nyw0OS41MTc4MzIgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjREVFQkZEIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEwNC4zMTAyOTMsMCBMNS42ODk3MDcwMywwIEMyLjU0NzQwMjM0LDAgMCwyLjU0MDE0NTk5IDAsNS42NzM3NjQgTDAsODEuMzI2MDIxOCBDMCw4NC40NTk2Mzk4IDIuNTQ3NDAyMzQsODcgNS42ODk3MDcwMyw4NyBMMTA0LjMxMDI5Myw4NyBDMTA3LjQ1MjU5OCw4NyAxMTAsODQuNDU5NjM5OCAxMTAsODEuMzI2MDIxOCBMMTEwLDUuNjczNzY0IEMxMTAsMi41NDAxNDU5OSAxMDcuNDUyNTk4LDAgMTA0LjMxMDI5MywwIEwxMDQuMzEwMjkzLDAgWiBNMTA2LjIwNjkzNCw4MS41NTE2Nzk3IEMxMDYuMjA2OTM0LDgyLjU5OTA0MyAxMDUuMzU3NjU2LDgzLjQ0ODMyMDMgMTA0LjMxMDI5Myw4My40NDgzMjAzIEw1LjY4OTcwNzAzLDgzLjQ0ODMyMDMgQzQuNjQyMzQzNzUsODMuNDQ4MzIwMyAzLjc5MzA2NjQxLDgyLjU5OTA0MyAzLjc5MzA2NjQxLDgxLjU1MTY3OTcgTDMuNzkzMDY2NDEsMTMuMjc1ODM5OCBDMy43OTMwNjY0MSwxMi4yMjg0NzY2IDQuNjQyMzQzNzUsMTEuMzc5MTk5MiA1LjY4OTcwNzAzLDExLjM3OTE5OTIgTDEwNC4zMTAyOTMsMTEuMzc5MTk5MiBDMTA1LjM1NzY1NiwxMS4zNzkxOTkyIDEwNi4yMDY5MzQsMTIuMjI4NDc2NiAxMDYuMjA2OTM0LDEzLjI3NTgzOTggTDEwNi4yMDY5MzQsODEuNTUxNjc5NyBMMTA2LjIwNjkzNCw4MS41NTE2Nzk3IFoiIGlkPSJTaGFwZSIgZmlsbD0iI0YyRjhGRSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0iI0RERUFGQyIgY3g9IjUuNjg5NzA3MDMiIGN5PSI1Ljg5NzAzMTI1IiByPSIxLjg5NjY0MDYyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGZpbGw9IiNEREVBRkMiIGN4PSIxMS4zNzk0MTQxIiBjeT0iNS44OTcwMzEyNSIgcj0iMS44OTY2NDA2MiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBmaWxsPSIjRERFQUZDIiBjeD0iMTcuMDY4OTA2MiIgY3k9IjUuODk3MDMxMjUiIHI9IjEuODk2NjQwNjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTM0LjI4OTkyMTksNDMuODI4MTI1IEMzMy4xNTg1NTQ3LDQzLjgyODEyNSAzMi4yNDEzODY3LDQyLjkxMDk1NyAzMi4yNDEzODY3LDQxLjc3OTU4OTggTDMyLjI0MTM4NjcsMTkuMzI0OTgwNSBDMzIuMjQxMzg2NywxOC4xOTM2MTMzIDMzLjE1ODU1NDcsMTcuMjc2NDQ1MyAzNC4yODk5MjE5LDE3LjI3NjQ0NTMgTDc1LjcxMDA3ODEsMTcuMjc2NDQ1MyBDNzYuODQxNDQ1MywxNy4yNzY0NDUzIDc3Ljc1ODYxMzMsMTguMTkzNjEzMyA3Ny43NTg2MTMzLDE5LjMyNDk4MDUgTDc3Ljc1ODYxMzMsNDEuNzc5NTg5OCBDNzcuNzU4NjEzMyw0Mi45MTA5NTcgNzYuODQxNDQ1Myw0My44MjgxMjUgNzUuNzEwMDc4MSw0My44MjgxMjUgTDM0LjI4OTkyMTksNDMuODI4MTI1IFoiIGlkPSJTaGFwZSIgZmlsbD0iIzIwQTBGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTY2Ljk1MzQ3NjYsNzcuOTY2MTUyMyBMNDMuMDQ2NTIzNCw3Ny45NjYxNTIzIEM0Mi4zMTYyNjk1LDc3Ljk2NjE1MjMgNDEuNzI0MTYwMiw3Ny4zNzQyNTc4IDQxLjcyNDE2MDIsNzYuNjQzNzg5MSBMNDEuNzI0MTYwMiw2MC4zMjI3NTM5IEM0MS43MjQxNjAyLDU5LjU5MjI4NTIgNDIuMzE2MDU0Nyw1OS4wMDAzOTA2IDQzLjA0NjUyMzQsNTkuMDAwMzkwNiBMNjYuOTUzNjkxNCw1OS4wMDAzOTA2IEM2Ny42ODQxNjAyLDU5LjAwMDM5MDYgNjguMjc2MDU0Nyw1OS41OTIyODUyIDY4LjI3NjA1NDcsNjAuMzIyNzUzOSBMNjguMjc2MDU0Nyw3Ni42NDM3ODkxIEM2OC4yNzU4Mzk4LDc3LjM3NDA0MyA2Ny42ODM5NDUzLDc3Ljk2NjE1MjMgNjYuOTUzNDc2Niw3Ny45NjYxNTIzIEw2Ni45NTM0NzY2LDc3Ljk2NjE1MjMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1Ljg3ODkwNiwgMjEuMDU0Njg4KSIgZmlsbD0iIzIxOThGMCI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTM2LjE5LDExLjM5NDAyMzQgTDIuMDUyMTg3NSwxMS4zOTQwMjM0IEMxLjAwNDgyNDIyLDExLjM5NDAyMzQgMC4xNTU1NDY4NzUsMTAuNTQ0NzQ2MSAwLjE1NTU0Njg3NSw5LjQ5NzM4MjgxIEwwLjE1NTU0Njg3NSw5LjQ5NzM4MjgxIEMwLjE1NTU0Njg3NSw4LjQ1MDAxOTUzIDEuMDA0ODI0MjIsNy42MDA3NDIxOSAyLjA1MjE4NzUsNy42MDA3NDIxOSBMMzYuMTkwMjE0OCw3LjYwMDc0MjE5IEMzNy4yMzc1NzgxLDcuNjAwNzQyMTkgMzguMDg2ODU1NSw4LjQ1MDAxOTUzIDM4LjA4Njg1NTUsOS40OTczODI4MSBMMzguMDg2ODU1NSw5LjQ5NzM4MjgxIEMzOC4wODY2NDA2LDEwLjU0NDk2MDkgMzcuMjM3MzYzMywxMS4zOTQwMjM0IDM2LjE5LDExLjM5NDAyMzQgTDM2LjE5LDExLjM5NDAyMzQgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMyLjM5NjkzMzYsMy44MDc4OTA2MyBMNS44NDUyNTM5MSwzLjgwNzg5MDYzIEM0Ljc5Nzg5MDYyLDMuODA3ODkwNjMgMy45NDg2MTMyOCwyLjk1ODYxMzI4IDMuOTQ4NjEzMjgsMS45MTEyNSBMMy45NDg2MTMyOCwxLjkxMTI1IEMzLjk0ODYxMzI4LDAuODYzODg2NzE5IDQuNzk3ODkwNjIsMC4wMTQ2MDkzNzUgNS44NDUyNTM5MSwwLjAxNDYwOTM3NSBMMzIuMzk2OTMzNiwwLjAxNDYwOTM3NSBDMzMuNDQ0Mjk2OSwwLjAxNDYwOTM3NSAzNC4yOTM1NzQyLDAuODYzODg2NzE5IDM0LjI5MzU3NDIsMS45MTEyNSBMMzQuMjkzNTc0MiwxLjkxMTI1IEMzNC4yOTM1NzQyLDIuOTU4ODI4MTMgMzMuNDQ0Mjk2OSwzLjgwNzg5MDYzIDMyLjM5NjkzMzYsMy44MDc4OTA2MyBMMzIuMzk2OTMzNiwzLjgwNzg5MDYzIFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNC44MTA4MDA4LDE4Ljk4MDM3MTEgTDEzLjQzMTM4NjcsMTguOTgwMzcxMSBDMTIuMzg0MDIzNCwxOC45ODAzNzExIDExLjUzNDc0NjEsMTguMTMxMDkzOCAxMS41MzQ3NDYxLDE3LjA4MzczMDUgTDExLjUzNDc0NjEsMTcuMDgzNzMwNSBDMTEuNTM0NzQ2MSwxNi4wMzYzNjcyIDEyLjM4NDAyMzQsMTUuMTg3MDg5OCAxMy40MzEzODY3LDE1LjE4NzA4OTggTDI0LjgxMDgwMDgsMTUuMTg3MDg5OCBDMjUuODU4MTY0MSwxNS4xODcwODk4IDI2LjcwNzQ0MTQsMTYuMDM2MzY3MiAyNi43MDc0NDE0LDE3LjA4MzczMDUgTDI2LjcwNzQ0MTQsMTcuMDgzNzMwNSBDMjYuNzA3MjI2NiwxOC4xMzEwOTM4IDI1Ljg1ODE2NDEsMTguOTgwMzcxMSAyNC44MTA4MDA4LDE4Ljk4MDM3MTEgTDI0LjgxMDgwMDgsMTguOTgwMzcxMSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDUuMzMyMDMxLCA2Mi43MzQzNzUpIiBmaWxsPSIjRkZBQ0FEIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTMuNDYxMDM1MiwxMS40Mzg0OTYxIEw1Ljg3NDkwMjM0LDExLjQzODQ5NjEgQzQuODI3NTM5MDYsMTEuNDM4NDk2MSAzLjk3ODI2MTcyLDEwLjU4OTIxODggMy45NzgyNjE3Miw5LjU0MTg1NTQ3IEwzLjk3ODI2MTcyLDkuNTQxODU1NDcgQzMuOTc4MjYxNzIsOC40OTQ0OTIxOSA0LjgyNzUzOTA2LDcuNjQ1MjE0ODQgNS44NzQ5MDIzNCw3LjY0NTIxNDg0IEwxMy40NjEwMzUyLDcuNjQ1MjE0ODQgQzE0LjUwODM5ODQsNy42NDUyMTQ4NCAxNS4zNTc2NzU4LDguNDk0NDkyMTkgMTUuMzU3Njc1OCw5LjU0MTg1NTQ3IEwxNS4zNTc2NzU4LDkuNTQxODU1NDcgQzE1LjM1NzY3NTgsMTAuNTg5NDMzNiAxNC41MDgzOTg0LDExLjQzODQ5NjEgMTMuNDYxMDM1MiwxMS40Mzg0OTYxIEwxMy40NjEwMzUyLDExLjQzODQ5NjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE3LjI1NDEwMTYsMy44NTIzNjMyOCBMMi4wODE4MzU5NCwzLjg1MjM2MzI4IEMxLjAzNDQ3MjY2LDMuODUyMzYzMjggMC4xODUxOTUzMTMsMy4wMDMwODU5NCAwLjE4NTE5NTMxMywxLjk1NTcyMjY2IEwwLjE4NTE5NTMxMywxLjk1NTcyMjY2IEMwLjE4NTE5NTMxMywwLjkwODM1OTM3NSAxLjAzNDQ3MjY2LDAuMDU5MDgyMDMxMiAyLjA4MTgzNTk0LDAuMDU5MDgyMDMxMiBMMTcuMjU0MzE2NCwwLjA1OTA4MjAzMTIgQzE4LjMwMTY3OTcsMC4wNTkwODIwMzEyIDE5LjE1MDk1NywwLjkwODM1OTM3NSAxOS4xNTA5NTcsMS45NTU3MjI2NiBMMTkuMTUwOTU3LDEuOTU1NzIyNjYgQzE5LjE1MDc0MjIsMy4wMDMwODU5NCAxOC4zMDE0NjQ4LDMuODUyMzYzMjggMTcuMjU0MTAxNiwzLjg1MjM2MzI4IEwxNy4yNTQxMDE2LDMuODUyMzYzMjggWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOTkuMTk0ODYzMyw3Ny45NjYxNTIzIEw3NS4yODc5MTAyLDc3Ljk2NjE1MjMgQzc0LjU1NzQ0MTQsNzcuOTY2MTUyMyA3My45NjU1NDY5LDc3LjM3NDI1NzggNzMuOTY1NTQ2OSw3Ni42NDM3ODkxIEw3My45NjU1NDY5LDYwLjMyMjc1MzkgQzczLjk2NTU0NjksNTkuNTkyMjg1MiA3NC41NTc0NDE0LDU5LjAwMDM5MDYgNzUuMjg3OTEwMiw1OS4wMDAzOTA2IEw5OS4xOTUwNzgxLDU5LjAwMDM5MDYgQzk5LjkyNTU0NjksNTkuMDAwMzkwNiAxMDAuNTE3NDQxLDU5LjU5MjI4NTIgMTAwLjUxNzQ0MSw2MC4zMjI3NTM5IEwxMDAuNTE3NDQxLDc2LjY0Mzc4OTEgQzEwMC41MTcyMjcsNzcuMzc0MDQzIDk5LjkyNTMzMiw3Ny45NjYxNTIzIDk5LjE5NDg2MzMsNzcuOTY2MTUyMyBMOTkuMTk0ODYzMyw3Ny45NjYxNTIzIFoiIGlkPSJTaGFwZSIgZmlsbD0iI0YyRjhGRSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3Ny41NTg1OTQsIDYyLjczNDM3NSkiIGZpbGw9IiNERUVCRjgiPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMy40NzU4NTk0LDExLjQzODQ5NjEgTDUuODg5NzI2NTYsMTEuNDM4NDk2MSBDNC44NDIzNjMyOCwxMS40Mzg0OTYxIDMuOTkzMDg1OTQsMTAuNTg5MjE4OCAzLjk5MzA4NTk0LDkuNTQxODU1NDcgTDMuOTkzMDg1OTQsOS41NDE4NTU0NyBDMy45OTMwODU5NCw4LjQ5NDQ5MjE5IDQuODQyMzYzMjgsNy42NDUyMTQ4NCA1Ljg4OTcyNjU2LDcuNjQ1MjE0ODQgTDEzLjQ3NTg1OTQsNy42NDUyMTQ4NCBDMTQuNTIzMjIyNyw3LjY0NTIxNDg0IDE1LjM3MjUsOC40OTQ0OTIxOSAxNS4zNzI1LDkuNTQxODU1NDcgTDE1LjM3MjUsOS41NDE4NTU0NyBDMTUuMzcyNSwxMC41ODk0MzM2IDE0LjUyMzIyMjcsMTEuNDM4NDk2MSAxMy40NzU4NTk0LDExLjQzODQ5NjEgTDEzLjQ3NTg1OTQsMTEuNDM4NDk2MSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuMjY4OTI1OCwzLjg1MjM2MzI4IEwyLjA5NjQ0NTMxLDMuODUyMzYzMjggQzEuMDQ5MDgyMDMsMy44NTIzNjMyOCAwLjE5OTgwNDY4OCwzLjAwMzA4NTk0IDAuMTk5ODA0Njg4LDEuOTU1NzIyNjYgTDAuMTk5ODA0Njg4LDEuOTU1NzIyNjYgQzAuMTk5ODA0Njg4LDAuOTA4MzU5Mzc1IDEuMDQ5MDgyMDMsMC4wNTkwODIwMzEyIDIuMDk2NDQ1MzEsMC4wNTkwODIwMzEyIEwxNy4yNjg5MjU4LDAuMDU5MDgyMDMxMiBDMTguMzE2Mjg5MSwwLjA1OTA4MjAzMTIgMTkuMTY1NTY2NCwwLjkwODM1OTM3NSAxOS4xNjU1NjY0LDEuOTU1NzIyNjYgTDE5LjE2NTU2NjQsMS45NTU3MjI2NiBDMTkuMTY1NTY2NCwzLjAwMzA4NTk0IDE4LjMxNjI4OTEsMy44NTIzNjMyOCAxNy4yNjg5MjU4LDMuODUyMzYzMjggTDE3LjI2ODkyNTgsMy44NTIzNjMyOCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNC43MTIwODk4LDc3Ljk2NjE1MjMgTDEwLjgwNTEzNjcsNzcuOTY2MTUyMyBDMTAuMDc0ODgyOCw3Ny45NjYxNTIzIDkuNDgyNzczNDQsNzcuMzc0MjU3OCA5LjQ4Mjc3MzQ0LDc2LjY0Mzc4OTEgTDkuNDgyNzczNDQsNjAuMzIyNzUzOSBDOS40ODI3NzM0NCw1OS41OTIyODUyIDEwLjA3NDY2OCw1OS4wMDAzOTA2IDEwLjgwNTEzNjcsNTkuMDAwMzkwNiBMMzQuNzEyMzA0Nyw1OS4wMDAzOTA2IEMzNS40NDI1NTg2LDU5LjAwMDM5MDYgMzYuMDM0NjY4LDU5LjU5MjI4NTIgMzYuMDM0NjY4LDYwLjMyMjc1MzkgTDM2LjAzNDY2OCw3Ni42NDM3ODkxIEMzNi4wMzQ0NTMxLDc3LjM3NDA0MyAzNS40NDI1NTg2LDc3Ljk2NjE1MjMgMzQuNzEyMDg5OCw3Ny45NjYxNTIzIEwzNC43MTIwODk4LDc3Ljk2NjE1MjMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjODBBOEUxIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzLjEwNTQ2OSwgNjIuNzM0Mzc1KSIgZmlsbD0iIzY0OTZEQyI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEzLjQ0NjIxMDksMTEuNDM4NDk2MSBMNS44NjAwNzgxMywxMS40Mzg0OTYxIEM0LjgxMjcxNDg0LDExLjQzODQ5NjEgMy45NjM0Mzc1LDEwLjU4OTIxODggMy45NjM0Mzc1LDkuNTQxODU1NDcgTDMuOTYzNDM3NSw5LjU0MTg1NTQ3IEMzLjk2MzQzNzUsOC40OTQ0OTIxOSA0LjgxMjcxNDg0LDcuNjQ1MjE0ODQgNS44NjAwNzgxMyw3LjY0NTIxNDg0IEwxMy40NDYyMTA5LDcuNjQ1MjE0ODQgQzE0LjQ5MzU3NDIsNy42NDUyMTQ4NCAxNS4zNDI4NTE2LDguNDk0NDkyMTkgMTUuMzQyODUxNiw5LjU0MTg1NTQ3IEwxNS4zNDI4NTE2LDkuNTQxODU1NDcgQzE1LjM0Mjg1MTYsMTAuNTg5NDMzNiAxNC40OTM1NzQyLDExLjQzODQ5NjEgMTMuNDQ2MjEwOSwxMS40Mzg0OTYxIEwxMy40NDYyMTA5LDExLjQzODQ5NjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE3LjIzOTI3NzMsMy44NTIzNjMyOCBMMi4wNjcwMTE3MiwzLjg1MjM2MzI4IEMxLjAxOTY0ODQ0LDMuODUyMzYzMjggMC4xNzAzNzEwOTQsMy4wMDMwODU5NCAwLjE3MDM3MTA5NCwxLjk1NTcyMjY2IEwwLjE3MDM3MTA5NCwxLjk1NTcyMjY2IEMwLjE3MDM3MTA5NCwwLjkwODM1OTM3NSAxLjAxOTY0ODQ0LDAuMDU5MDgyMDMxMiAyLjA2NzAxMTcyLDAuMDU5MDgyMDMxMiBMMTcuMjM5NDkyMiwwLjA1OTA4MjAzMTIgQzE4LjI4Njg1NTUsMC4wNTkwODIwMzEyIDE5LjEzNjEzMjgsMC45MDgzNTkzNzUgMTkuMTM2MTMyOCwxLjk1NTcyMjY2IEwxOS4xMzYxMzI4LDEuOTU1NzIyNjYgQzE5LjEzNTkxOCwzLjAwMzA4NTk0IDE4LjI4NjY0MDYsMy44NTIzNjMyOCAxNy4yMzkyNzczLDMuODUyMzYzMjggTDE3LjIzOTI3NzMsMy44NTIzNjMyOCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+";
|
||
},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9Ijg4cHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDg4IDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2tldGNoIFRlbXBsYXRlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iU2tldGNoLVRlbXBsYXRlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjUiPgogICAgICAgICAgICAgICAgPGcgaWQ9ImJyb3dzZXIiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wNDI3MzUsIDYuNzcyMjY5KSIgZmlsbD0iI0M5RTFGQiIgb3BhY2l0eT0iMC4yMzg4MDU5NyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjIwMDg4NDc2LDI4LjUwNTczMzcgTDQ0LjE3MDEzOTEsMjguNTA1NzMzNyBDNDUuOTEwNTI2NSwyOC41MDU3MzM3IDQ3LjMyMTc1NzUsMjcuMTAyNjMxMiA0Ny4zMjE3NTc1LDI1LjM3MjI2ODIgTDQ3LjMyMTc1NzUsMC4zMDU2MDg3MjUgQzQ3LjMyMTc1NzUsMi4wMzU5NzE3MiA0NS45MTA1MjY1LDMuNDM5MDc0MjYgNDQuMTcwMTM5MSwzLjQzOTA3NDI2IEwzLjIwMDg4NDc2LDMuNDM5MDc0MjYgQzEuNDYwNDk3MzksMy40MzkwNzQyNiAwLjA0OTI2NjM1MDMsMi4wMzU5NzE3MiAwLjA0OTI2NjM1MDMsMC4zMDU2MDg3MjUgTDAuMDQ5MjY2MzUwMywyNS4zNzIyNjgyIEMwLjA0OTI2NjM1MDMsMjcuMTAyOTg2MSAxLjQ2MDE0MDM4LDI4LjUwNTczMzcgMy4yMDA4ODQ3NiwyOC41MDU3MzM3IEwzLjIwMDg4NDc2LDI4LjUwNTczMzcgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik01OS45MjcxNjAxLDI4LjUwNTczMzcgTDc4LjgzNjE1NjYsMjguNTA1NzMzNyBDODAuNTc2NTQ0LDI4LjUwNTczMzcgODEuOTg3Nzc1LDI3LjEwMjYzMTIgODEuOTg3Nzc1LDI1LjM3MjI2ODIgTDgxLjk4Nzc3NSwwLjMwNTYwODcyNSBDODEuOTg3Nzc1LDIuMDM1OTcxNzIgODAuNTc2NTQ0LDMuNDM5MDc0MjYgNzguODM2MTU2NiwzLjQzOTA3NDI2IEw1OS45MjcxNjAxLDMuNDM5MDc0MjYgQzU4LjE4Njc3MjgsMy40MzkwNzQyNiA1Ni43NzU1NDE3LDIuMDM1OTcxNzIgNTYuNzc1NTQxNywwLjMwNTYwODcyNSBMNTYuNzc1NTQxNywyNS4zNzIyNjgyIEM1Ni43NzU1NDE3LDI3LjEwMjk4NjEgNTguMTg2NzcyOCwyOC41MDU3MzM3IDU5LjkyNzE2MDEsMjguNTA1NzMzNyBMNTkuOTI3MTYwMSwyOC41MDU3MzM3IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEw0NC4yMTI4NzM2LDEwLjIxMTY5ODYgQzQ1Ljk1MzI2MSwxMC4yMTE2OTg2IDQ3LjM2NDQ5Miw4LjgwODU5NjAzIDQ3LjM2NDQ5Miw3LjA3ODIzMzA0IEw0Ny4zNjQ0OTIsMy45NDQ3Njc1MSBDNDcuMzY0NDkyLDIuMjE0NDA0NTEgNDUuOTUzMjYxLDAuODExMzAxOTY5IDQ0LjIxMjg3MzYsMC44MTEzMDE5NjkgTDMuMjQzNjE5MjksMC44MTEzMDE5NjkgQzEuNTAzMjMxOTEsMC44MTEzMDE5NjkgMC4wOTIwMDA4NzY0LDIuMjE0NDA0NTEgMC4wOTIwMDA4NzY0LDMuOTQ0NzY3NTEgTDAuMDkyMDAwODc2NCw3LjA3ODIzMzA0IEMwLjA5MjAwMDg3NjQsOC44MDg1OTYwMyAxLjUwMjg3NDkxLDEwLjIxMTY5ODYgMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEwzLjI0MzYxOTI5LDEwLjIxMTY5ODYgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTU5Ljk2OTg5NDcsMTAuMjExNjk4NiBMNzguODc4ODkxMSwxMC4yMTE2OTg2IEM4MC42MTkyNzg1LDEwLjIxMTY5ODYgODIuMDMwNTA5Niw4LjgwODU5NjAzIDgyLjAzMDUwOTYsNy4wNzgyMzMwNCBMODIuMDMwNTA5NiwzLjk0NDc2NzUxIEM4Mi4wMzA1MDk2LDIuMjE0NDA0NTEgODAuNjE5Mjc4NSwwLjgxMTMwMTk2OSA3OC44Nzg4OTExLDAuODExMzAxOTY5IEw1OS45Njk4OTQ3LDAuODExMzAxOTY5IEM1OC4yMjk1MDczLDAuODExMzAxOTY5IDU2LjgxODI3NjMsMi4yMTQ0MDQ1MSA1Ni44MTgyNzYzLDMuOTQ0NzY3NTEgTDU2LjgxODI3NjMsNy4wNzgyMzMwNCBDNTYuODE4Mjc2Myw4LjgwODU5NjAzIDU4LjIyOTUwNzMsMTAuMjExNjk4NiA1OS45Njk4OTQ3LDEwLjIxMTY5ODYgTDU5Ljk2OTg5NDcsMTAuMjExNjk4NiBaIiBpZD0iU2hhcGUiIGZpbGw9IiMyMEEwRkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMTExNzc4LCA0NC4zOTY1NzIpIiBmaWxsPSIjQzlFMUZCIiBvcGFjaXR5PSIwLjIzODgwNTk3Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMuNjM5NDk2NTksMjguNDgxNTk3NCBDMy42Mzk0OTY1OSwzMC4yMTE5NjA0IDIuMTM2NTcxMzcsMzEuNjE1MDYyOSAwLjI4MzEwMzAxMywzMS42MTUwNjI5IEw2Mi41NjY3MDg4LDMxLjYxNTA2MjkgQzY0LjQyMDE3NzIsMzEuNjE1MDYyOSA2NS45MjMxMDI0LDMwLjIxMTk2MDQgNjUuOTIzMTAyNCwyOC40ODE1OTc0IEw2NS45MjMxMDI0LDMuNDE0OTM3OTIgQzY1LjkyMzEwMjQsMS42ODQ1NzQ5MiA2NC40MjAxNzcyLDAuMjgxNDcyMzggNjIuNTY2NzA4OCwwLjI4MTQ3MjM4IEwwLjI4MzEwMzAxMywwLjI4MTQ3MjM4IEMyLjEzNjU3MTM3LDAuMjgxNDcyMzggMy42Mzk0OTY1OSwxLjY4NDU3NDkyIDMuNjM5NDk2NTksMy40MTQ5Mzc5MiBMMy42Mzk0OTY1OSwyOC40ODE1OTc0IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSw3Ni4wMTEyODAzIEw2LjM5NTIzNzcsNzYuMDExMjgwMyBDOC4xMzU2MjUwOCw3Ni4wMTEyODAzIDkuNTQ2ODU2MTEsNzQuNjA4MTc3OCA5LjU0Njg1NjExLDcyLjg3NzgxNDggTDkuNTQ2ODU2MTEsNDcuODExMTU1MyBDOS41NDY4NTYxMSw0Ni4yNjUwMjEgOC40MjAxMzA2Niw0NC45ODAxNzEyIDYuOTM4NjI2MjgsNDQuNzI0MTA1OSBDNi43NjIwOTg1MSw0NC42OTM1OTQ2IDYuNTgwNTMzNjgsNDQuNjc3Njg5OCA2LjM5NTIzNzcsNDQuNjc3Njg5OCBMMy4yNDM2MTkyOSw0NC42Nzc2ODk4IEMxLjUwMzIzMTkxLDQ0LjY3NzY4OTggMC4wOTIwMDA4NzY0LDQ2LjA4MDc5MjMgMC4wOTIwMDA4NzY0LDQ3LjgxMTE1NTMgTDAuMDkyMDAwODc2NCw3Mi44Nzc4MTQ4IEMwLjA5MjAwMDg3NjQsNzQuNjA4MTc3OCAxLjUwMjg3NDkxLDc2LjAxMTI4MDMgMy4yNDM2MTkyOSw3Ni4wMTEyODAzIEwzLjI0MzYxOTI5LDc2LjAxMTI4MDMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjMjBBMEZGIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZGlhbW9uZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTMuMDAwMDAwLCA0NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiNBRkM4RUIiIHBvaW50cz0iMjQuMTc1MzI2NCA4Ljg2MDY5Nzk1IDE3LjE4NTE4NTIgMjguODM1NzAyNSAzNC4zNzAzNzA0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPgogICAgICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM4MEE4RTEiIHBvaW50cz0iNy4xMTExMDg4IDAuMDQ4MTg0MTc5NyAwIDguODYwNjk3OTUgMTAuMTk1MDQ0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjODBBOEUxIiBwb2ludHM9IjI0LjE3NTMyNjQgOC44NjA2OTc5NSAzNC4zNzAzNzA0IDguODYwNjk3OTUgMjcuMjU5MjYxNiAwLjA0ODE4NDE3OTciPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjQUZDOEVBIiBwb2ludHM9IjI0LjE3NTMyNjQgOC44NjA2OTc5NSAxNy4xODUxODUyIDAuMDQ4MTg0MTc5NyAxMC4xOTUwNDQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM2NDk2REMiIHBvaW50cz0iMTcuMTg1MTg1MiAwLjA0ODE4NDE3OTcgNy4xMTExMDg4IDAuMDQ4MTg0MTc5NyAxMC4xOTUwNDQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzkzQjhFRSIgcG9pbnRzPSIyNy4yNTkyNjE2IDAuMDQ4MTg0MTc5NyAxNy4xODUxODUyIDAuMDQ4MTg0MTc5NyAyNC4xNzUzMjY0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM4MEE4RTEiIHBvaW50cz0iMTAuMTk1MDQ0IDguODYwNjk3OTUgMTcuMTg1MTg1MiAyOC44MzU3MDI1IDI0LjE3NTMyNjQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzY0OTZEQyIgcG9pbnRzPSIwIDguODYwNjk3OTUgMTcuMTg1MTg1MiAyOC44MzU3MDI1IDEwLjE5NTA0NCA4Ljg2MDY5Nzk1Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjgxcHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDgxIDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+TW9kdWxlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8cmVjdCBpZD0icGF0aC0xIiB4PSI2IiB5PSI1NyIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIiByeD0iNS41Ij48L3JlY3Q+CiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjEiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwLjQ2NjY2NjY2NyAgIDAgMCAwIDAgMC44MDc4NDMxMzcgIDAgMCAwIDEgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICAgICAgPHJlY3QgaWQ9InBhdGgtMyIgeD0iNiIgeT0iNTciIHdpZHRoPSIxMSIgaGVpZ2h0PSIxMSIgcng9IjUuNSI+PC9yZWN0PgogICAgICAgIDxmaWx0ZXIgeD0iLTUwJSIgeT0iLTUwJSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iZmlsdGVyLTQiPgogICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIxIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMC4zOTIxNTY4NjMgICAwIDAgMCAwIDAuNTg4MjM1Mjk0ICAgMCAwIDAgMCAwLjg2Mjc0NTA5OCAgMCAwIDAgMSAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgICAgICA8cmVjdCBpZD0icGF0aC01IiB4PSI2IiB5PSI1NyIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIiByeD0iNS41Ij48L3JlY3Q+CiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItNiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjEiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAxICAgMCAwIDAgMCAwLjY3NDUwOTgwNCAgIDAgMCAwIDAgMC42Nzg0MzEzNzMgIDAgMCAwIDEgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTW9kdWxlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci0yKSIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiMyMEEwRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMtY29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci00KSIgeGxpbms6aHJlZj0iI3BhdGgtMyI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiM4MEE4RTEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMyI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMtY29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTguMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci02KSIgeGxpbms6aHJlZj0iI3BhdGgtNSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiNGRkQ2RDIiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtNSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="},function(s,t,a){var n,e;a(507);var l=a(509);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-48ef76a2",s.exports=n},function(s,t){},,function(s,t,a){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("div",{staticClass:"page-container page-resource"},[t("h2",["资源"]),t("p",["这里提供 Element 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。"]),t("div",{staticClass:"cards"},[t("ul",{staticClass:"container"},[t("li",[t("div",{staticClass:"card"},[t("img",{attrs:{src:a(503),alt:""}}),t("h3",["Axure Components"]),t("p",["通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件"]),t("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"}},["下载"])])]),t("li",[t("div",{staticClass:"card"},[t("img",{attrs:{src:a(504),alt:""}}),t("h3",["Sketch Template"]),t("p",["从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格"]),t("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch"}},["下载"])])]),t("li",[t("div",{staticClass:"card"},[t("img",{attrs:{src:a(505),alt:""}}),t("h3",["组件交互文档"]),t("p",["进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节"]),t("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"}},["下载"])])])])])])}]}},function(s,t,a){function n(s){return a(e(s))}function e(s){return l[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var l={"./en-US/index.vue":511,"./zh-CN/index.vue":523};n.keys=function(){return Object.keys(l)},n.resolve=e,s.exports=n,n.id=510},function(s,t,a){var n,e;a(512),n=a(514);var l=a(517);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-436b02d9",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("product designer",1800,-16,800).addScene("UI designer",1800,-11,800).addScene("UX designer",1800,-11,800).addScene("product manager",1800,-15,800).addScene("FE developer",1800,-12,800).addScene(function(a){s(t),a()})}var t=(0,l.default)({maxSpeed:100});t.on("type:start, erase:start",function(){t.getCurrentActor().$element.classList.add("typing")}).on("type:end, erase:end",function(){t.getCurrentActor().$element.classList.remove("typing")}),t.addActor("line2",{speed:1,accuracy:1}).addScene(2600).addScene("line2:Just for ",500).addScene(function(a){s(t),a()})}}},function(s,t,a){s.exports=a(516)},function(s,t,a){!function(t,a){s.exports=a()}(this,function(){return function(s){function t(n){if(a[n])return a[n].exports;var e=a[n]={exports:{},id:n,loaded:!1};return s[n].call(e.exports,e,e.exports,t),e.loaded=!0,e.exports}var a={};return t.m=s,t.c=a,t.p="",t(0)}([function(s,t,a){"use strict";function n(s){return s&&s.__esModule?s:{default:s}}function e(s){if(Array.isArray(s)){for(var t=0,a=Array(s.length);t<s.length;t++)a[t]=s[t];return a}return Array.from(s)}function l(s){return Array.isArray(s)?s:Array.from(s)}function i(){function s(s){var t=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],a=arguments.length<=2||void 0===arguments[2]?null:arguments[2],n=(0,c.default)(s,t,a);return N.casting[n.name]=n,this}function t(s){return N.onStage=s,this}function a(){return N.casting[N.onStage]||null}function n(){function s(a){if(d.default.isArray(a)&&a.forEach(function(t){s(t)}),d.default.isString(a)){var n=a.split(":"),e=void 0;n.length>1&&"\\"!==n[0].charAt(n[0].length-1)&&(e=n.shift(),s({name:"erase",actor:e}));var l=n.join(":").replace(/\\:/g,":"),i={name:"type",args:[l]};null!=e&&(i.actor=e),s(i)}d.default.isFunction(a)&&s({name:"callback",args:[a]}),d.default.isNumber(a)&&s(a>0?{name:"wait",args:[a]}:{name:"erase",args:[a]}),d.default.isObject(a)&&(d.default.isArray(a.args)||(a.args=[]),a.args.unshift(function(){w(a.name+":end",a),h()}),t.push(a))}for(var t=[],a=arguments.length,n=Array(a),e=0;e<a;e++)n[e]=arguments[e];return s([{name:"publisher",args:["sequence:start"]}].concat(n).concat({name:"publisher",args:["sequence:end"]})),Array.prototype.push.apply(N.scenario,t),N.options.autoplay&&i(),this}function i(){return"stopping"===N.status&&(N.status="playing"),"ready"===N.status&&(N.status="playing",h()),this}function r(s){return("ready"===N.status||d.default.isFunction(s))&&(N.currentScene=-1,"ready"===N.status?i():s()),this}function o(){return N.status="stopping",this}function h(){if("stopping"===N.status)return N.status="ready",this;if("playing"!==N.status)return this;if(N.currentScene+1>=N.scenario.length)return N.status="ready",w("scenario:end"),this;var s=N.scenario[++N.currentScene];if(0===N.currentScene&&w("scenario:start"),"publisher"===s.name){var a=l(s.args),n=a[0],i=a.slice(1);return w.apply(void 0,e(i)),n()}switch(s.actor&&t(s.actor),w(s.name+":start",s),s.name){case"type":C.apply(void 0,e(s.args));break;case"erase":u.apply(void 0,e(s.args));break;case"callback":f.apply(void 0,e(s.args));break;case"wait":v.apply(void 0,e(s.args));break;default:console.debug("No scene handler for "+s.name)}return this}function C(s,t){var n=a(),e=N.options.locale,l=N.options.minSpeed.type,i=N.options.maxSpeed.type,r=n.displayValue,c=-1,o=!1,p=null,h=null,d=j.default.map(t);return t=j.default.strip(t),function a(){var C=j.default.strip(n.displayValue.substr(r.length));if(C===t)return s();var u=t.substr(0,c+1),g=C!==u,b=n.shouldBeMistaken(C,t,p,h),f=o||!b;if(g&&f)o=!0,p=null,n.displayValue=r+j.default.inject(C.substr(0,C.length-1),d),c--,h=c;else{o=!1;var v=t.charAt(++c);b&&(v=m.default.randomCharNear(v,e),null==p&&(p=c)),n.displayValue=r+j.default.inject(C+v,d)}return setTimeout(a,n.getTypingSpeed(l,i))}(),this}function u(s,t){var n=a();if(null==n)return s();if(k.erase!==!0)return n.displayValue="",s();var e=N.options.minSpeed.erase,l=N.options.maxSpeed.erase,i=n.displayValue,r=j.default.map(i);i=j.default.strip(i);var c=i.length,o=void 0,p=0;return d.default.isNumber(t)&&(t>0?o=t:p=i.length+t),function t(){return c===p?s():(n.displayValue=j.default.inject(i.substr(0,--c),r),setTimeout(t,o||n.getTypingSpeed(e,l)))}(),this}function f(s,t){return t.call(this,s),this}function v(s,t){return setTimeout(s.bind(this),t),this}function y(s,t){return s.split(",").forEach(function(s){s=s.trim(),d.default.isArray(N.events[s])||(N.events[s]=[]),N.events[s].push(t)}),this}function w(){for(var s=arguments.length,t=Array(s),a=0;a<s;a++)t[a]=arguments[a];var n=t[0],e=N.events[n]||[];return e.length>0&&e.concat(N.events["*"]||[]).forEach(function(s){return s.apply(void 0,t)}),this}var k=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];if(k=p.default.merge({},b,k),d.default.isNumber(k.minSpeed)){var x=k,_=x.minSpeed;k.minSpeed={erase:_,type:_}}if(d.default.isNumber(k.maxSpeed)){var E=k,A=E.maxSpeed;k.maxSpeed={erase:A,type:A}}if("detect"===k.locale&&g){var M=g.languages;d.default.isArray(M)&&d.default.isString(M[0])&&(k.locale=M[0].substr(0,2))}m.default.supports(k.locale)||(k.locale=m.default.defaultLocale);var N={options:k,casting:{},status:"ready",onStage:null,currentScene:-1,scenario:[],events:{}};return t(null),Object.freeze(Object.defineProperties({addActor:s,getCurrentActor:a,addScene:n,play:i,replay:r,stop:o,on:y},{options:{get:function(){return N.options},configurable:!0,enumerable:!0},status:{get:function(){return N.status},configurable:!0,enumerable:!0}}))}Object.defineProperty(t,"__esModule",{value:!0});var r=a(1),c=n(r),o=a(3),p=n(o),h=a(2),d=n(h),C=a(4),m=n(C),u=a(6),j=n(u),g="undefined"!=typeof window&&window.navigator,b={autoplay:!0,erase:!0,minSpeed:{erase:80,type:80},maxSpeed:{erase:450,type:450},locale:"detect"};i.init=function(){var s=arguments.length<=0||void 0===arguments[0]?"actor":arguments[0],t=i();return t.addActor(s,{accuracy:1,speed:.8}),t},t.default=i,s.exports=t.default},function(s,t,a){"use strict";function n(s){return s&&s.__esModule?s:{default:s}}Object.defineProperty(t,"__esModule",{value:!0});var e=a(2),l=n(e),i=a(3),r=n(i),c="undefined"!=typeof window&&window.document,o={speed:.6,accuracy:.6};t.default=function(s){var t=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],a=arguments.length<=2||void 0===arguments[2]?null:arguments[2],n="",e=void 0;if(l.default.isNumber(t)&&(t={speed:t,accuracy:t}),t=r.default.merge({},o,t),c&&(null==a&&(a="#"+s),l.default.isString(a))){var i=a,p=c.querySelector(i);if(null==p)throw new Error("no matches for "+s+"'s selector: "+i);e=p,a=function(s){e.innerHTML=s}}return l.default.isFunction(a)||(a=console.log.bind(console)),Object.defineProperties({$element:e,getTypingSpeed:function(s,a){var n=r.default.randomFloat(t.speed,1);return r.default.getPercentageOf(a,s,n)},shouldBeMistaken:function(s,a){var n=arguments.length<=2||void 0===arguments[2]?null:arguments[2],e=arguments.length<=3||void 0===arguments[3]?null:arguments[3],i=10*t.accuracy;if(i>=8)return!1;if(s.length<=i)return!1;if(s.length===a.length)return!1;if(l.default.isNumber(n)){var c=s.length-n,o=i>=6?10-i:4;if(c>=o)return!1}if(l.default.isNumber(e)){var c=s.length-e,p=2*Math.max(i,2);if(c<=p)return!1}return r.default.randomFloat(0,.8)>t.accuracy}},{displayValue:{get:function(){return n},set:function(s){n=s,a(s)},configurable:!0,enumerable:!0},name:{get:function(){return s},configurable:!0,enumerable:!0}})},s.exports=t.default},function(s,t){"use strict";function a(s){return{}.toString.call(s)}Object.defineProperty(t,"__esModule",{value:!0}),t.default={isNumber:function(s){return"number"==typeof s},isString:function(s){return"[object String]"===a(s)},isObject:function(s){return"[object Object]"===a(s)},isArray:function(s){return"[object Array]"===a(s)},isFunction:function(s){return"function"==typeof s}},s.exports=t.default},function(s,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={merge:function(s){for(var t=[].slice.call(arguments,1),a=0,n=t.length;a<n;a++){var e=t[a];for(var l in e)e.hasOwnProperty(l)&&(s[l]=e[l])}return s},random:function(s,t){return Math.floor(Math.random()*(t-s+1))+s},randomFloat:function(s,t){return Math.random()*(t-s)+s},getPercentageOf:function(s,t,a){return s-s*a+t*a}},s.exports=t.default},function(s,t,a){"use strict";function n(s){return s&&s.__esModule?s:{default:s}}function e(s){for(var t={},a=0,n=s.length,e=void 0;a<n;a++){e=s[a];for(var l=0,i=e.length;l<i;l++)t[e[l]]={x:l,y:a}}return t}Object.defineProperty(t,"__esModule",{value:!0});var l=a(2),i=n(l),r=a(3),c=n(r),o=a(5),p=n(o),h="en";for(var d in p.default)if(p.default.hasOwnProperty(d)){var C=p.default[d];p.default[d]={list:C,mapped:e(C)}}t.default={defaultLocale:h,supports:function(s){return i.default.isObject(p.default[s])},randomCharNear:function(s,t){if(!this.supports(t))throw new Error('locale "'+t+'" is not supported');var a=p.default[t].mapped,n=1,e=[],l=/[A-Z]/.test(s);s=s.toLowerCase();var i=a[s]||[],r=void 0;for(var o in a)a.hasOwnProperty(o)&&o!==s&&(r=a[o],Math.abs(i.x-r.x)<=n&&Math.abs(i.y-r.y)<=n&&e.push(o));var h=e.length>0?e[c.default.random(0,e.length-1)]:this.randomChar(t);return l&&(h=h.toUpperCase()),h},randomChar:function(s){if(!this.supports(s))throw new Error('locale "'+s+'" is not supported');var t=p.default[s].list.join("");return t.charAt(c.default.random(0,t.length-1))}},s.exports=t.default},function(s,t){s.exports={en:["qwertyuiop","asdfghjkl","zxcvbnm"],fr:["azertyuiop","qsdfghjklm","wxcvbn"],da:["qwertyuiopå","asdfghjklæø","zxcvbnm"],de:["qwertzuiopü","asdfghjklöä","yxcvbnm"],pl:["qwertyuiopęó","asdfghjkląśł","zxcvbnmżźćń"],pt:["qwertyuiop","asdfghjklç","zxcvbnm"],ru:["йцукенгшщзх","фывапролджэ","ячсмитьбюъ"],es:["qwertyuiop","asdfghjklñ","zxcvbnm"]}},function(s,t,a){"use strict";function n(s){return s&&s.__esModule?s:{default:s}}function e(s){var t=s.match(/<([^\s>]+)/);return Boolean(t)&&i.default.indexOf(t[1].toLowerCase())>-1}Object.defineProperty(t,"__esModule",{value:!0});var l=a(7),i=n(l);t.default={strip:function(s){return s.replace(/(<([^>]+)>)/gi,"")},map:function(s){for(var t=/<[^>]+>/gi,a=[],n=[],l=void 0,i=void 0;l=t.exec(s);)i={tagName:l[0],position:l.index},"/"===i.tagName.charAt(1)?i.opener=n.pop():"/"===i.tagName.charAt(i.tagName.length-2)||e(i.tagName)||n.push(i),a.push(i);return a},inject:function(s,t){for(var a=0,n=void 0;a<t.length;a++)n=t[a],s.length>0&&n.position<=s.length?s=s.substr(0,n.position)+n.tagName+s.substr(n.position):n.opener&&n.opener.position<s.length&&(s+=n.tagName);return s}},s.exports=t.default},function(s,t){s.exports=["area","base","br","col","embed","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"]}])})},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:"/en-US/guide/design",exact:""}},["View Detail\n "])])]),t("li",[t("div",{staticClass:"card"},[s._m(4),s._m(5),s._m(6),t("router-link",{attrs:{"active-class":"active",to:"/en-US/component/layout",exact:""}},["View Detail\n "])])]),t("li",[t("div",{staticClass:"card"},[s._m(7),s._m(8),s._m(9),t("router-link",{attrs:{"active-class":"active",to:"/en-US/resource",exact:""}},["View Detail\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",["A Desktop UI Library"]),t("div",{staticClass:"actor",attrs:{id:"line2"}}),t("p",["Element, a Vue 2.0 based component library for developers, designers and product managers, with a set of design resources."])]),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",["Guide"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use."])},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",["Component"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency."])},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",["Resource"])},function(){var s=this,t=s.$createElement;s._c;return t("p",["Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency."])}]}},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA74AAACRCAYAAADkbGR/AAAAAXNSR0IArs4c6QAAEK9JREFUeAHt3d1vHFcZB+Cd2U3txknUFKgDSBAwaaKmNGplQPS2t9wg1FwiQRoJlX+Cf6KlUeoScYWKUG+47RVSkUrUqIhEiZsQqjYoQRCixJTY8e6wJ/RY2+3uetfej/l4LFlnPTM7532fYzn+Zca7tZoPAgQIECBAgAABAgQIECBAgAABAgQIzFLg3uu/fjp8zrIGcxMgQGCWAtnN3z8dPmdZg7kJECiuQFLc0lVOgACBagiEwJvVmt8I3Sa1+vX9L/34L9XoXJcECBD4v0AIvM3a5sOfg/Va43py6Ad+DvrmIEBgJAHBdyQuBxMgQGC6Ap2hN84s/EYJIwECVRDoDL2xX+E3ShgJEBhWQPAdVspxBAgQmLJAr9AbSxB+o4SRAIEyC/QKvbFf4TdKGAkQGEZA8B1GyTEECBCYssCg0BtLEX6jhJEAgTIKDAq9sV/hN0oYCRDYTkDw3U7IfgIECExZYJjQG0sSfqOEkQCBMgkME3pjv8JvlDASIDBIQPAdpGMfAQIEpiwwSuiNpQm/UcJIgEAZBEYJvbFf4TdKGAkQ6CeQ9tthOwECBAgQIECAAAECBAgQKIOAK75lWEU9ECBQKoFRrvq62luqpdcMAQKfCoxy1dfVXt82BAgMIyD4DqPkGAIECExZYJjwK/ROeVFMR4DAVAWGCb9C71SXxGQECi0g+BZ6+RRPgECZBQaFX6G3zCuvNwIEosCg8Cv0RiUjAQLDCAi+wyg5hgABAjMS6BV+hd4ZLYZpCRCYiUCv8Cv0zmQpTEqg0AKCb6GXT/EECFRBoDP8Cr1VWHE9EiDQLdAZfoXebh1fEyBAgAABAgRKIhDCb/gsSTvaIECAwMgCIfyGz5Gf6AkECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECFRAIMuy5P6Zc0vZ2bOLvdpNem20jQABAgQIECBAgAABAgQIFEEghN67r64sJbX0iVDv/kea15LTp2911i74dmp4TIAAAQIECBAgQIAAAQKFEegOvbHw7vAr+EYZIwECBAgQIECAAAECBAgURqBf6I0NdIZfwTeqGAkQIECAAAECBAgQIECgEALbhd7YRAy/gm8UMRIgQIAAAQIECBAgQIBAIQTCC1ltbLZ6vpBVdwNp+29+0+6NviZAgAABAgQIECBAgAABAnkWmEsfrA1TX6NRay6k6Seu+A6j5RgCBAgQIECAAAECBAgQyJVAeOuiexv1pX5FhdD7aCO7lJw6dU/w7adkOwECBAgQIECAAAECBAjkWqBf+O0MvaEBwTfXy6g4AgQIECBAgAABAgQIEBgk0B1+u0NveK7gO0jQPgIECBAgQIAAAQIECBDIvUAMv71Cb+6LVyABAgQIECBAgAABAgQIEBhGYK39N7/Zysr+YY51DAECBAgQIECAAAECBAgQIECAAIHxCLTfeDsNn+M5m7MQIECAAAECBAgQINBLoNFro20ECExeIATety/dPhZmaj++nCRJa/KzmoEAAQIECBAgQIBA9QS8uFX11lzHORCIobcddR8L5bSv+d554anHhd8crI0SCBAgQIAAAQIEyicg+JZvTXWUc4Hu0BvLFX6jhJEAAQIECBAgQIDAeAUE3/F6OhuBgQL9Qm98kvAbJYwECBAgQIAAAQIExifgRXXGZ+lMBAgQIECAAAECBAgQIJBDAVd8c7goSiq3QL+rvq72lnvddUeAAAECBAgQIDA7gZ5XfF/MsvrsSjIzgXILhFdvDi9kFYJu7FTojRJGAgQIECBAgAABAuMX+NwV38Wb7y/U9jW/30jrl2/sPfHx+Kd0RgIEgkC88hsee0XnoOCDAAECBAgQIECAwGQEPhN8Q+jN9m08nyTpfJiukTQuCL+TgXdWAkEghN8weg/foOCDAAECBAgQIECAwGQEtoJvd+iN0wm/UcJIgAABAgQIECBAgAABAkUUeBh8+4Xe2JDwGyWMBAgQIECAAAECBAgQIFA0gXS70Bsa2sw2nz289u6hojWnXgIECBAgQIAAAQIECBAgkDb23p9Pk8aeQRRJq3l3YWHh9qBj7CNAgAABAgQIECBAgAABAnkUSG8c+N6/0mbz3aSWNnsVGELvF/Yt/PFicnyj137bCBAgQIAAAQIECBCorkD7xTqT137z3onXf/fe16uroPO8C2y9uNVX7p7/Yqte/25Wa229h6/Qm/flUx8BAgQIECBAgACB2QmE0HvmrQvP1FrZ10IVjST580s/eu7D2VVkZgK9BR6+lUrY9fcDy//svPIr9PYGs5UAAQIECORJIPzSmX1wbin769nFPNWlFgIEyi/QHXpDx5tZ9owrv+Vf+yJ2uHXFNxYfrvxuNupHv/ToI39ye3NUMRIgQIAAgfwJhF861y+tLNXT9IlQXWOueS355ulb+atURQQIlFHgl29dOJw0W9/u1dtcPf3DT3747J1e+2wjMAuBzwXfWRRhTgIECBAgQGA0ge7QG58t/EYJIwECkxZo/xxKX/vt+8tJ2vzMHSetVmP15ZMnrkx6fucnMIrA1q3OozzJsQQIECBAgMCMBf52bjFe6e2sZHO9vpRdfGVf5zaPCRAgMAmBJElaP3vxxPmsVd+600TonYS0c45DQPAdh6JzECBAgACBaQsc/vAfrXrz393Ttt+g8KPk+M/Xurf7mgABApMQ6Ay/Qu8khJ1zXAJudR6XpPMQIECAAIEpC2TZL9KND756NG3WD4apH4beb/30oymXYToCBAjUwp9ftD8yFATyKiD45nVl1EWAAAECBIYQiOH3kbS+lgi9Q4g5hAABAgQIECBAgAABAgQKJxCutBSuaAUTIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIGJC2RZll67dm354sWLhyY+mQkqIZBWoktNEiBAgAABAgQIECBQCIEQeldXV5dbrdaX0zQVfguxavkvMsl/iSokQIDA7gTCP6DhDEmStHZ3Js8mQIAAAQIEJikQQ2878C7GeTY3N7N2CD5//Pjxm3GbkcCoAoLvqGKOJ0CgUALhH9C3L90+Fop+4anHLwu/hVo+xRIgQIBAhQR6hd7YvvAbJYw7FRB8dyrneQQI5F4ght72dd7HQrHt6753hN/cL5sCCRAgQKCCAoNCb+QQfqOEcScCgu9O1DyHAIHcC3SH3liw8BsljAQIECBAIB8Cw4TeWKnwGyWMowp4catRxRxPgEDuBfqF3lB4uPobbn0Ox+S+EQUSIECAAIEKCFy9enVP+9/lfcO02mg0kvn5+QPDHOsYAp0CfvHr1PCYAAECBAgQIECAAIGpChw5cmR9bm7unWaz+Z/tJm4fs7q0tLS63XH2E+gWcKtzt4ivCRAohUC/q75udS7F8mqCAAECBEoocP369fn19fXn6/X6Qq/2Qug9duzYlV77bCOwnYDgu52Q/QQIFFagO/wKvYVdSoUTIECAQEUE+oVfobci3wATbFPwnSCuUxMgMHuBGH5DJV7RefbroQICBAgQILCdQHf4FXq3E7N/GAHBdxglxxAgUGiBEH5DA97Dt9DLqHgCBAgQqJBADL/tlm+4vblCC69VAgQIECBAgAABAgQIVEmg/R/XjSr1q1cCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECuxPIsizZ3Rk8mwABAvkTSPNXkooIECBAgAABAgRmIdAOvel/V1a+c/fVlaOzmN+cBAgQmJSA/9GblKzzEiBAgAABAgQKJPBp6F3ONmuLoexmK1k98PKpKwVqQakECBDoKyD49qWxgwABAgQIECBQDYHu0Bu7Fn6jhJEAgaILuNW56CuofgIECBAgQIDALgT6hd5wynqaPXl3xW3Pu+D1VAIEciLgim9OFkIZBAgQIECAAIFpCwwKvZ21NPe0b3s+5bbnThOPCRAoloArvsVaL9USIECAAAECBMYm8MkbbzwX/6Z30EnrD7In7585tzToGPsIECCQZwHBN8+rozYCBAgQIECAwAQFsvvpx82slW03RZYk63MH997a7jj7CRAgkFcBtzrndWXURYAAAQIECBCYgsDaK7861EofLNeTtOfvhSH0Lhzc/05y8uTaFMoxBQECBCYi0PMH3ERmclICBAgQIECAAIFcCvQLv0JvLpdLUQQI7EBA8N0BmqcQIECAAAECBMom0B1+hd6yrbB+CFRbQPCt9vrrngABAgQIECCwJRDDb5rWN9zevMXiAQECBAgQIECAAAECBAiUSWDt7NnF7M0395WpJ70QIEDgf01Qh63gZYluAAAAAElFTkSuQmCC";
|
||
},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(531),n=a(533);var l=a(534);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-bf4f7ada",s.exports=n},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={methods:{},data:function(){return{}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",[t("el-button",["Test"])])},staticRenderFns:[]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",{attrs:{style:"margin: 20px;"}},[t("play-component")])},staticRenderFns:[]}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t){},,,,,,,function(s,t,a){var n,e;a(866),n=a(868);var l=a(870);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(869),l=n(e);t.default={data:function(){return{hovering:!1,isExpanded:!1}},props:{jsfiddle:Object,default:function(){return{}}},methods:{goJsfiddle:function(){var s=this.jsfiddle,t=s.script,a=s.html,n=s.style,e='<script src="//unpkg.com/vue/dist/vue.js"></script>\n<script src="//unpkg.com/element-ui/lib/index.js"></script>',l=(t||"").replace(/export default/,"var Main =").trim(),i=e+'\n<div id="app">\n'+a.trim()+"\n</div>",r='@import url("//unpkg.com/element-ui/lib/theme-default/index.css");\n'+(n||"").trim()+"\n";l=l?l+"\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount('#app')":"new Vue().$mount('#app')";var c={js:l,css:r,html:i,panel_js:3,panel_css:1},o=document.createElement("form"),p=document.createElement("textarea");o.method="post",o.action="http://jsfiddle.net/api/post/library/pure/",o.target="_blank";for(var h in c)p.name=h,p.value=c[h].toString(),o.appendChild(p.cloneNode());o.submit()}},computed:{lang:function(){return this.$route.path.split("/")[1]},langConfig:function(){var s=this;return l.default.filter(function(t){return t.lang===s.lang})[0]["demo-block"]},blockClass:function(){return"demo-"+this.lang+" demo-"+this.$router.currentRoute.path.split("/").pop()},iconClass:function(){return this.isExpanded?"el-icon-caret-top":"el-icon-caret-bottom"},controlText:function(){return this.isExpanded?this.langConfig["hide-text"]:this.langConfig["show-text"]},codeArea:function(){return this.$el.getElementsByClassName("meta")[0]},codeAreaHeight:function(){return this.$el.getElementsByClassName("description").length>0?Math.max(this.$el.getElementsByClassName("description")[0].clientHeight,this.$el.getElementsByClassName("highlight")[0].clientHeight):this.$el.getElementsByClassName("highlight")[0].clientHeight}},watch:{isExpanded:function(s){this.codeArea.style.height=s?this.codeAreaHeight+1+"px":"0"}},mounted:function(){var s=this;this.$nextTick(function(){var t=s.$el.getElementsByClassName("highlight")[0];0===s.$el.getElementsByClassName("description").length&&(t.style.width="100%",t.borderRight="none")})}}},function(s,t){s.exports=[{lang:"zh-CN","demo-block":{"hide-text":"隐藏代码","show-text":"显示代码","button-text":"在线运行","tooltip-text":"前往 jsfiddle.net 运行此示例"},footer:{feedback:"反馈建议",contribution:"贡献指南",eleme:"饿了么"},header:{guide:"指南",components:"组件",resource:"资源"},nav:{dropdown:"版本："}},{lang:"en-US","demo-block":{"hide-text":"Hide","show-text":"Expand","button-text":"Try it!","tooltip-text":"Run this demo on jsfiddle.net"},footer:{feedback:"Feedback",contribution:"Contribution",eleme:"Eleme"},header:{guide:"Guide",components:"Component",resource:"Resource"},nav:{dropdown:"Version: "}}]},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"demo-block",class:[s.blockClass,{hover:s.hovering}],on:{mouseenter:function(t){s.hovering=!0},mouseleave:function(t){s.hovering=!1}}},[s._t("source"),t("div",{staticClass:"meta"},[t("div",{staticClass:"description"},[s._t("default"),t("el-tooltip",{attrs:{effect:"dark",content:s.langConfig["tooltip-text"],placement:"right"}},[t("el-button",{attrs:{size:"small",type:"primary"},on:{click:s.goJsfiddle}},[s._s(s.langConfig["button-text"])])])]),s._t("highlight")]),t("div",{staticClass:"demo-block-control",on:{click:function(t){s.isExpanded=!s.isExpanded}}},[t("transition",{attrs:{name:"arrow-slide"}},[t("i",{class:[s.iconClass,{hovering:s.hovering}]})]),t("transition",{attrs:{name:"text-slide"}},[t("span",{directives:[{name:"show",rawName:"v-show",value:s.hovering,expression:"hovering"}]},[s._s(s.controlText)])])])])},staticRenderFns:[]}},function(s,t,a){var n,e;a(872),n=a(874);var l=a(875);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(869),l=n(e),i=a(536);t.default={data:function(){return{version:i.version}},computed:{lang:function(){return this.$route.path.split("/")[1]},langConfig:function(){var s=this;return l.default.filter(function(t){return t.lang===s.lang})[0].footer}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("footer",{staticClass:"footer"},[t("div",{staticClass:"container"},[t("div",{staticClass:"footer-main"},[t("p",{staticClass:"footer-main-title"},["Element "+s._s(s.version)+" Hydrogen"]),t("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/issues",target:"_blank"}},[s._s(s.langConfig.feedback)]),t("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md",target:"_blank"}},[s._s(s.langConfig.contribution)])]),t("div",{staticClass:"footer-social"},[t("el-popover",{ref:"weixin",attrs:{placement:"top",width:"120","popper-class":"footer-popover",trigger:"hover"}},[t("div",{staticClass:"footer-popover-title"},[s._s(s.langConfig.eleme)+" UED"]),s._m(0)]),t("i",{directives:[{name:"popover",rawName:"v-popover:weixin",arg:"weixin"}],staticClass:"doc-icon-weixin elementdoc"}),s._m(1)])])])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("img",{attrs:{src:a(876),alt:""}})},function(){var s=this,t=s.$createElement;s._c;return t("a",{attrs:{href:"//github.com/elemefe",target:"_blank"}},[t("i",{staticClass:"doc-icon-github elementdoc"})])}]}},function(s,t,a){s.exports=a.p+"static/qrcode.a88f522.png"},function(s,t,a){var n,e;a(878),n=a(880);var l=a(881);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-8ef5d8f6",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(869),l=n(e);t.default={data:function(){return{active:"",isHome:!1,headerStyle:{}}},watch:{"$route.path":{immediate:!0,handler:function(){this.isHome=/^home/.test(this.$route.name),this.headerStyle.backgroundColor="rgba(32, 160, 255, "+(this.isHome?"0":"1")+")"}}},computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},langConfig:function(){var s=this;return l.default.filter(function(t){return t.lang===s.lang})[0].header}},methods:{switchLang:function(s){this.lang!==s&&(localStorage.setItem("ELEMENT_LANGUAGE",s),this.$router.push(this.$route.path.replace(this.lang,s)))}},mounted:function(){function s(s){window.addEventListener("scroll",function(){s()},!1)}var t=this;s(function(){if(t.isHome){var s=200,a=Math.min(document.body.scrollTop,s)/s;t.$refs.header.style.backgroundColor="rgba(32, 160, 255, "+a+")"}})}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement;s._c;return t("div",{staticClass:"headerWrapper"},[t("header",{ref:"header",staticClass:"header",class:{"header-home":s.isHome},style:s.headerStyle},[t("div",{staticClass:"container"},[t("h1",[t("router-link",{attrs:{to:"/"+s.lang}},[s._m(0),s._m(1)])]),t("ul",{staticClass:"nav"},[t("li",{staticClass:"nav-item"},[t("router-link",{attrs:{"active-class":"active",to:"/"+s.lang+"/guide"}},[s._s(s.langConfig.guide)+"\n "])]),t("li",{staticClass:"nav-item"},[t("router-link",{attrs:{"active-class":"active",to:"/"+s.lang+"/component"}},[s._s(s.langConfig.components)+"\n "])]),t("li",{staticClass:"nav-item"},[t("router-link",{attrs:{"active-class":"active",to:"/"+s.lang+"/resource",exact:""}},[s._s(s.langConfig.resource)+"\n "])]),t("li",{staticClass:"nav-item"},[t("span",{staticClass:"nav-lang",class:{active:"zh-CN"===s.lang},on:{click:function(t){s.switchLang("zh-CN")}}},["\n 中文\n "]),s._m(2),t("span",{staticClass:"nav-lang",class:{active:"en-US"===s.lang},on:{click:function(t){s.switchLang("en-US")}}},["\n En\n "])])])])])])},staticRenderFns:[function(){var s=this,t=s.$createElement;s._c;return t("img",{staticClass:"nav-logo",attrs:{src:a(882),alt:"element-logo"}})},function(){var s=this,t=s.$createElement;s._c;return t("img",{staticClass:"nav-logo-small",attrs:{src:a(883),alt:"element-logo"}})},function(){var s=this,t=s.$createElement;s._c;return t("span",[" / "])}]}},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0NnB4IiBoZWlnaHQ9IjM4cHgiIHZpZXdCb3g9IjAgMCAxNDYgMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwICgzMzc2MikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGUgQ29weTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJ2Mi4yLjAiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLpppbpobUt6buY6K6k5pWI5p6cLWNvcHktMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcwLjAwMDAwMCwgLTE5LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8cGF0aCBkPSJNMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IEMyMTIuMTM1NDQxLDQ1LjE1NzgwNzcgMjEyLjQyMDIzNyw0NS4xNTA1MTA1IDIxMi45NjA5MzcsNDUuMTU3ODA3NyBDMjEzLjUwMTYzNyw0NS4xNjUxMDQ5IDIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTMuNjQ4ODUxLDQ1LjU3MDg1NTYgQzIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTQuNzMzODI4LDQ3LjU2NjU2NTcgMjE1LjAyNDY3Nyw0OC4wNDkxNDM0IEMyMTUuMjgzNjA4LDQ4LjQ3ODcxMzMgMjE0Ljk3MzIyMSw0OC40NzA4NjU0IDIxNC45MDE4MTYsNDguNDYzODQzNiBDMjE0LjkwMjUwNCw0OC40NjI4Nzk4IDIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODg3MDk1LDQ4LjQ2MjE5MTQgQzIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODkzMDExLDQ4LjQ2MzAxNzUgMjE0LjkwMTgxNiw0OC40NjM4NDM2IEMyMTQuODk4NjUyLDQ4LjQ2ODI0OTUgMjE0LjU5NDczMSw0OC40NzgzMDAzIDIxMS40NDc1MjgsNDguNDYyMTkxNCBDMjA3LjA1ODY0MSw0Ny44NjY1NzYyIDIwNi45MDczLDQzLjkxODY2MzggMjA2LjkwNzMsNDMuOTE4NjYzOCBMMjA2LjkwNzMsMzYuODk2ODQ4MyBMMjA0LjQzMDgxMiwzNi44OTY4NDgzIEwyMDQuNDMwODEyLDM0LjI4MDg3NzkgQzIwNC40MzA4MTIsMzMuOTI0Mjc5OCAyMDQuODQzNTYsMzMuODY3ODI5OSAyMDQuODQzNTYsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzEuMjUxODU5NCBDMjA2LjkwNzMsMzAuODI1MTgwOSAyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA3LjMyMDA0OCwzMC43MDExMjg4IEMyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA4Ljc3MjY0NiwzMC4yODU4Nzc5IDIwOS42MTc4MTYsMzAuMDQ0MTA3MiBDMjA5Ljk2NDY2MiwyOS45NDQ5NzU2IDIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMDcxNzAxLDMwLjE1MDM5ODIgQzIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMjA5Mjg0LDMwLjA3NzQyNjQgMjEwLjIwOTI4NCwzMC4zOTI3MTk2IEwyMTAuMjA5Mjg0LDM0LjAwNTUxMjUgTDIxMy43ODY0MzMsMzQuMDA1NTEyNSBDMjE0LjEzNDY1NSwzNC4wMDU1MTI1IDIxNC4xOTkxODEsMzQuNDE4NTYwNSAyMTQuMTk5MTgxLDM0LjQxODU2MDUgTDIxNC4xOTkxODEsMzcuMDM0NTMxIEwyMTAuMjA5Mjg0LDM3LjAzNDUzMSBMMjEwLjIwOTI4NCw0My4wOTI1Njc4IEMyMTAuMjA5Mjg0LDQ0Ljg1MzM5MTMgMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IDIxMi4xMzU0NDEsNDUuMTU3ODA3NyBMMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IFogTTIwMS41NDE1NzYsNDguMTg2ODI2MSBMMTk5LjM0MDI1Myw0OC4xODY4MjYxIEMxOTguOTA4MzgxLDQ4LjE4NjgyNjEgMTk4LjkyNzUwNSw0Ny42MzYwOTU1IDE5OC45Mjc1MDUsNDcuNjM2MDk1NSBMMTk4LjkyNzUwNSwzNy40NDc1Nzg5IEMxOTguOTI3NTA1LDM2LjgyODY5NTQgMTk4LjEwMjAwOSwzNi42MjE0ODMgMTk4LjEwMjAwOSwzNi42MjE0ODMgTDE5My41NjE3ODEsMzYuNjIxNDgzIEMxOTIuODg0NDYyLDM2LjYyMTQ4MyAxOTIuODczODY4LDM3LjQ0NzU3ODkgMTkyLjg3Mzg2OCwzNy40NDc1Nzg5IEwxOTIuODczODY4LDQ3Ljc3Mzc3ODEgQzE5Mi44NzM4NjgsNDguMTc4NzAyOCAxOTIuNDYxMTIsNDguMTg2ODI2MSAxOTIuNDYxMTIsNDguMTg2ODI2MSBMMTkwLjI1OTc5Nyw0OC4xODY4MjYxIEMxODkuNzc1NzgyLDQ4LjE4NjgyNjEgMTg5Ljg0NzA0OSw0Ny42MzYwOTU1IDE4OS44NDcwNDksNDcuNjM2MDk1NSBMMTg5Ljg0NzA0OSwzNC44MzE2MDg1IEMxODkuODQ3MDQ5LDMzLjgwMzExOSAxOTEuMDg1MjkzLDMzLjU5MjQ2NDYgMTkxLjA4NTI5MywzMy41OTI0NjQ2IEwyMDAuNzE2MDgsMzMuNTkyNDY0NiBDMjAxLjY3Nzc4MywzMy41OTI0NjQ2IDIwMS45NTQzMjQsMzQuODMxNjA4NSAyMDEuOTU0MzI0LDM0LjgzMTYwODUgTDIwMS45NTQzMjQsNDcuNDk4NDEyOCBDMjAxLjk1NDMyNCw0OC4yMTg2MzA4IDIwMS41NDE1NzYsNDguMTg2ODI2MSAyMDEuNTQxNTc2LDQ4LjE4NjgyNjEgTDIwMS41NDE1NzYsNDguMTg2ODI2MSBaIE0xODUuODU3MTUyLDQyLjQwNDE1NDYgTDE3Ny4zMjcwMjcsNDIuNDA0MTU0NiBMMTc3LjMyNzAyNyw0NC40NjkzOTQ0IEMxNzcuMzI3MDI3LDQ1LjIxMzU2OTEgMTc4LjI5MDEwNiw0NS40MzMxNzMgMTc4LjI5MDEwNiw0NS40MzMxNzMgTDE4NS4xNjkyMzksNDUuNDMzMTczIEMxODUuNjU4NzU4LDQ1LjQzMzE3MyAxODUuOTk0NzM1LDQ1Ljg0NjIyMSAxODUuOTk0NzM1LDQ1Ljg0NjIyMSBDMTg1Ljk5NDczNSw0NS44NDYyMjEgMTg2LjU5NTAwOCw0Ny4wOTUxNDAzIDE4Ni44MjAyMzEsNDcuNjM2MDk1NSBDMTg3LjA0NTQ1NCw0OC4xNzcwNTA2IDE4Ni40MDc0ODMsNDguMTg2ODI2MSAxODYuNDA3NDgzLDQ4LjE4NjgyNjEgTDE3Ni4wODg3ODMsNDguMTg2ODI2MSBDMTc0Ljg0NjEzNiw0OC4xODY4MjYxIDE3NC41NzUzNzQsNDYuNjcyMzE2OSAxNzQuNTc1Mzc0LDQ2LjY3MjMxNjkgTDE3NC41NzUzNzQsMzQuOTY5MjkxMSBDMTc0LjU3NTM3NCwzNC4yOTYyOTgzIDE3NS41Mzg0NTIsMzQuMDA1NTEyNSAxNzUuNTM4NDUyLDM0LjAwNTUxMjUgTDE4NS44NTcxNTIsMzQuMDA1NTEyNSBDMTg2Ljg5NDExMywzNC4wMDU1MTI1IDE4Ny4wOTUzOTYsMzUuMjQ0NjU2NCAxODcuMDk1Mzk2LDM1LjI0NDY1NjQgTDE4Ny4wOTUzOTYsNDEuMTY1MDEwNyBDMTg3LjA5NTM5Niw0Mi4xNjM4OTgzIDE4NS44NTcxNTIsNDIuNDA0MTU0NiAxODUuODU3MTUyLDQyLjQwNDE1NDYgTDE4NS44NTcxNTIsNDIuNDA0MTU0NiBaIE0xODQuMzQzNzQzLDM3LjQ0NzU3ODkgQzE4NC4zNDM3NDMsMzcuNDQ3NTc4OSAxODQuMjU3MDY2LDM2Ljc1OTE2NTcgMTgzLjY1NTgzLDM2Ljc1OTE2NTcgTDE3OC4wMTQ5NCwzNi43NTkxNjU3IEMxNzguMDE0OTQsMzYuNzU5MTY1NyAxNzcuMzI3MDI3LDM2Ljk0Mzc5ODEgMTc3LjMyNzAyNywzNy40NDc1Nzg5IEwxNzcuMzI3MDI3LDM4Ljk2MjA4ODIgQzE3Ny4zMjcwMjcsMzguOTYyMDg4MiAxNzcuMzQ2ODM5LDM5LjY1MDUwMTQgMTc4LjAxNDk0LDM5LjY1MDUwMTQgTDE4My42NTU4MywzOS42NTA1MDE0IEMxODMuNjU1ODMsMzkuNjUwNTAxNCAxODQuMzQzNzQzLDM5LjQ4MDQ2MzQgMTg0LjM0Mzc0MywzOC44MjQ0MDU1IEwxODQuMzQzNzQzLDM3LjQ0NzU3ODkgTDE4NC4zNDM3NDMsMzcuNDQ3NTc4OSBaIE0xNzEuNDEwOTcyLDQ4LjE4NjgyNjEgTDE2OS4yMDk2NSw0OC4xODY4MjYxIEMxNjguOTE5MjEzLDQ4LjE4NjgyNjEgMTY4Ljc5NjkwMiw0Ny43NzM3NzgxIDE2OC43OTY5MDIsNDcuNzczNzc4MSBMMTY4Ljc5NjkwMiwzNy40NDc1Nzg5IEMxNjguNzk2OTAyLDM2LjgwNzIxNjkgMTY3Ljk3MTQwNiwzNi42MjE0ODMgMTY3Ljk3MTQwNiwzNi42MjE0ODMgTDE2NS45MDc2NjYsMzYuNjIxNDgzIEMxNjUuMzMxODgyLDM2LjYyMTQ4MyAxNjUuMjE5NzUyLDM3LjQ0NzU3ODkgMTY1LjIxOTc1MiwzNy40NDc1Nzg5IEwxNjUuMjE5NzUyLDQ3Ljc3Mzc3ODEgQzE2NS4yMTk3NTIsNDguMTE2MzMyNiAxNjQuODA3MDA0LDQ4LjE4NjgyNjEgMTY0LjgwNzAwNCw0OC4xODY4MjYxIEwxNjIuNjA1NjgyLDQ4LjE4NjgyNjEgQzE2Mi4yOTk1Niw0OC4xODY4MjYxIDE2Mi4xOTI5MzQsNDcuNzczNzc4MSAxNjIuMTkyOTM0LDQ3Ljc3Mzc3ODEgTDE2Mi4xOTI5MzQsMzcuNDQ3NTc4OSBDMTYyLjE5MjkzNCwzNi43OTI4OTc5IDE2MS4zNjc0MzgsMzYuNjIxNDgzIDE2MS4zNjc0MzgsMzYuNjIxNDgzIEwxNTkuMzAzNjk4LDM2LjYyMTQ4MyBDMTU4LjY3Mzk4MiwzNi42MjE0ODMgMTU4LjYxNTc4NCwzNy40NDc1Nzg5IDE1OC42MTU3ODQsMzcuNDQ3NTc4OSBMMTU4LjYxNTc4NCw0Ny43NzM3NzgxIEMxNTguNjE1Nzg0LDQ4LjIxNTczOTUgMTU4LjIwMzAzNiw0OC4xODY4MjYxIDE1OC4yMDMwMzYsNDguMTg2ODI2MSBMMTU2LjAwMTcxNCw0OC4xODY4MjYxIEMxNTUuNTg5Mzc4LDQ4LjE4NjgyNjEgMTU1LjU4ODk2Niw0Ny43NzM3NzgxIDE1NS41ODg5NjYsNDcuNzczNzc4MSBMMTU1LjU4ODk2NiwzNC42OTM5MjU4IEMxNTUuNTg4OTY2LDMzLjkzNjI1ODIgMTU2LjY4OTYyNywzMy41OTI0NjQ2IDE1Ni42ODk2MjcsMzMuNTkyNDY0NiBMMTcwLjQ0Nzg5NCwzMy41OTI0NjQ2IEMxNzEuNTUyMjcsMzMuNTkyNDY0NiAxNzEuODIzNzIsMzQuOTY5MjkxMSAxNzEuODIzNzIsMzQuOTY5MjkxMSBMMTcxLjgyMzcyLDQ3Ljc3Mzc3ODEgQzE3MS44MjM3Miw0OC4yNDkzMzQgMTcxLjQxMDk3Miw0OC4xODY4MjYxIDE3MS40MTA5NzIsNDguMTg2ODI2MSBMMTcxLjQxMDk3Miw0OC4xODY4MjYxIFogTTE1MS40NjE0ODYsNDIuNDA0MTU0NiBMMTQyLjkzMTM2LDQyLjQwNDE1NDYgTDE0Mi45MzEzNiw0NC40NjkzOTQ0IEMxNDIuOTMxMzYsNDUuMjEzNTY5MSAxNDMuODk0NDM5LDQ1LjQzMzE3MyAxNDMuODk0NDM5LDQ1LjQzMzE3MyBMMTUwLjc3MzU3Miw0NS40MzMxNzMgQzE1MS4yNjMwOTIsNDUuNDMzMTczIDE1MS41OTkwNjgsNDUuODQ2MjIxIDE1MS41OTkwNjgsNDUuODQ2MjIxIEMxNTEuNTk5MDY4LDQ1Ljg0NjIyMSAxNTIuMTk5MjA0LDQ3LjA5NTE0MDMgMTUyLjQyNDU2NCw0Ny42MzYwOTU1IEMxNTIuNjQ5Nzg3LDQ4LjE3NzA1MDYgMTUyLjAxMTgxNiw0OC4xODY4MjYxIDE1Mi4wMTE4MTYsNDguMTg2ODI2MSBMMTQxLjY5MzExNyw0OC4xODY4MjYxIEMxNDAuNDUwNDcsNDguMTg2ODI2MSAxNDAuMTc5NzA3LDQ2LjY3MjMxNjkgMTQwLjE3OTcwNyw0Ni42NzIzMTY5IEwxNDAuMTc5NzA3LDM0Ljk2OTI5MTEgQzE0MC4xNzk3MDcsMzQuMjk2Mjk4MyAxNDEuMTQyNzg2LDM0LjAwNTUxMjUgMTQxLjE0Mjc4NiwzNC4wMDU1MTI1IEwxNTEuNDYxNDg2LDM0LjAwNTUxMjUgQzE1Mi40OTg0NDYsMzQuMDA1NTEyNSAxNTIuNjk5NzMsMzUuMjQ0NjU2NCAxNTIuNjk5NzMsMzUuMjQ0NjU2NCBMMTUyLjY5OTczLDQxLjE2NTAxMDcgQzE1Mi42OTk3Myw0Mi4xNjM4OTgzIDE1MS40NjE0ODYsNDIuNDA0MTU0NiAxNTEuNDYxNDg2LDQyLjQwNDE1NDYgTDE1MS40NjE0ODYsNDIuNDA0MTU0NiBaIE0xNDkuOTQ4MDc2LDM3LjQ0NzU3ODkgQzE0OS45NDgwNzYsMzcuNDQ3NTc4OSAxNDkuODYxMzk5LDM2Ljc1OTE2NTcgMTQ5LjI2MDE2MywzNi43NTkxNjU3IEwxNDMuNjE5Mjc0LDM2Ljc1OTE2NTcgQzE0My42MTkyNzQsMzYuNzU5MTY1NyAxNDIuOTMxMzYsMzYuOTQzNzk4MSAxNDIuOTMxMzYsMzcuNDQ3NTc4OSBMMTQyLjkzMTM2LDM4Ljk2MjA4ODIgQzE0Mi45MzEzNiwzOC45NjIwODgyIDE0Mi45NTExNzIsMzkuNjUwNTAxNCAxNDMuNjE5Mjc0LDM5LjY1MDUwMTQgTDE0OS4yNjAxNjMsMzkuNjUwNTAxNCBDMTQ5LjI2MDE2MywzOS42NTA1MDE0IDE0OS45NDgwNzYsMzkuNDgwNDYzNCAxNDkuOTQ4MDc2LDM4LjgyNDQwNTUgTDE0OS45NDgwNzYsMzcuNDQ3NTc4OSBMMTQ5Ljk0ODA3NiwzNy40NDc1Nzg5IFogTTEzOC4xMTU5NjcsNDguMTg2ODI2MSBMMTMyLjg4NzgyNiw0OC4xODY4MjYxIEMxMzIuODg3ODI2LDQ4LjE4NjgyNjEgMTI5LjA2MTkyNyw0OC4wMDYxODY1IDEyOC43NjAzNDYsNDQuMTk0MDI5MSBDMTI4Ljc0ODIzOSw0MC4yNzkwMjI4IDEyOC43NjAzNDYsMjguMDg1MTU4MyAxMjguNzYwMzQ2LDI4LjA4NTE1ODMgTDEzMS4yMzY4MzQsMjguMDg1MTU4MyBDMTMxLjIzNjgzNCwyOC4wODUxNTgzIDEzMi4wNjIzMywyOC4wNzAxNTA5IDEzMi4wNjIzMywyOC45MTEyNTQzIEwxMzIuMDYyMzMsNDMuMzY3OTMzMSBDMTMyLjA2MjMzLDQzLjM2NzkzMzEgMTMyLjM1MDAxNSw0NC41NjM4NDQ3IDEzMy45ODg0ODcsNDUuMDIwMTI1IEMxMzUuODM5OCw0NS4wMTA3NjI2IDEzNi4xODk4MSw0NS4wMjAxMjUgMTM2LjE4OTgxLDQ1LjAyMDEyNSBDMTM2LjE4OTgxLDQ1LjAyMDEyNSAxMzYuOTA3MzAzLDQ0Ljc5MDE5NSAxMzcuNDI4MDU0LDQ1LjcwODUzODMgQzEzNy45NDg4MDQsNDYuNjI2ODgxNiAxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjUyODcxNSw0Ny42MzYwOTU1IEMxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjYxMTU0LDQ4LjE4NjgyNjEgMTM4LjExNTk2Nyw0OC4xODY4MjYxIEwxMzguMTE1OTY3LDQ4LjE4NjgyNjEgWiBNMTExLjU2MjUxMyw0Ny4zNjA3MzAyIEwxMTEuNTYyNTEzLDI5LjE4NjYxOTYgQzExMS41NjI1MTMsMjguMzgwNzYzIDExMi4yNTA0MjYsMjguMjIyODQxIDExMi4yNTA0MjYsMjguMjIyODQxIEwxMjUuMTgzMTk3LDI4LjIyMjg0MSBDMTI1LjkwNjQ2OSwyOC4yMjI4NDEgMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS41OTU5NDUsMjkuMDQ4OTM2OSBDMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS4xOTI4MjcsMzAuMTY2MDk0IDEyNC45MDgwMzEsMzAuNzAxMTI4OCBDMTI0LjYyMzIzNSwzMS4yMzYxNjM2IDEyNC4wODI1MzUsMzEuMjUxODU5NCAxMjQuMDgyNTM1LDMxLjI1MTg1OTQgTDExNS42ODk5OTMsMzEuMjUxODU5NCBDMTE0LjkwODUyMywzMS4yNTE4NTk0IDExNC44NjQ0OTcsMzEuOTQwMjcyNyAxMTQuODY0NDk3LDMxLjk0MDI3MjcgTDExNC44NjQ0OTcsMzYuNDgzODAwMyBMMTI0LjM1NzcwMSwzNi40ODM4MDAzIEMxMjQuOTE0NjM1LDM2LjQ4MzgwMDMgMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyNC42MzI4NjYsMzcuMTcyMjEzNiBDMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyMy45MjE4MzksMzguNjg4OTI1OCAxMjMuNjY5Nzg3LDM5LjA5OTc3MDggQzEyMy40MTc3MzYsMzkuNTEwNjE1OSAxMjIuODQ0MjkxLDM5LjUxMjgxODggMTIyLjg0NDI5MSwzOS41MTI4MTg4IEwxMTQuODY0NDk3LDM5LjUxMjgxODggTDExNC44NjQ0OTcsNDQuMzMxNzExNyBDMTE0Ljg2NDQ5Nyw0NC45ODg0NTggMTE1LjU1MjQxLDQ1LjE1NzgwNzcgMTE1LjU1MjQxLDQ1LjE1NzgwNzcgTDEyNC4zNTc3MDEsNDUuMTU3ODA3NyBDMTI0Ljk5NjIyMiw0NS4xNTc4MDc3IDEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjUuMTgzMTk3LDQ1LjU3MDg1NTYgQzEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjYuMDU1MTk2LDQ2LjkzMjM5OTQgMTI2LjQyMTQ0MSw0Ny40OTg0MTI4IEMxMjYuNzg3ODIzLDQ4LjA2NDQyNjIgMTI2LjI4Mzg1OCw0OC4xODY4MjYxIDEyNi4yODM4NTgsNDguMTg2ODI2MSBMMTEyLjM4ODAwOSw0OC4xODY4MjYxIEMxMTEuODE0MTUxLDQ4LjE4NjgyNjEgMTExLjU2MjUxMyw0Ny4zNjA3MzAyIDExMS41NjI1MTMsNDcuMzYwNzMwMiBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMCAwIDM4IDQ4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0MCAoMzM3NjIpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPlNoYXBlIENvcHk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0idjIuMi4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6aaW6aG1Lem7mOiupOaViOaenC1jb3B5LTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MC4wMDAwMDAsIC0xOS4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPHBhdGggZD0iTTIxMi4xMzU0NDEsNDUuMTU3ODA3NyBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(s,t,a){var n,e;a(885),n=a(887);var l=a(888);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(869),l=n(e),i=a(536);t.default={props:{data:Array,base:{type:String,default:""}},data:function(){return{highlights:[],navState:[],isSmallScreen:!1,versions:[],version:i.version,dropdownVisible:!1}},watch:{"$route.path":function(){this.handlePathChange()}},computed:{navStyle:function(){return this.isSmallScreen?{"padding-bottom":"60px"}:{}},isComponentPage:function(){return/^component-/.test(this.$route.name)},langConfig:function(){var s=this;return l.default.filter(function(t){return t.lang===s.$route.meta.lang})[0].nav}},methods:{switchVersion:function(s){s!==this.version&&(location.href=location.origin+"/"+this.versions[s]+"/"+location.hash+" ")},handleResize:function(){this.isSmallScreen=document.documentElement.clientWidth<768,this.handlePathChange()},handlePathChange:function(){var s=this;return this.isSmallScreen?void this.$nextTick(function(){s.hideAllMenu();for(var t=s.$el.querySelector("a.active"),a=t.parentNode;"UL"!==a.tagName;)a=a.parentNode;a.style.height="auto"}):void this.expandAllMenu()},hideAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(s){s.style.height="0"})},expandAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(s){s.style.height="auto"})},expandMenu:function(s){if(this.isSmallScreen){var t=s.currentTarget;t.nextElementSibling&&"UL"===t.nextElementSibling.tagName&&(this.hideAllMenu(),s.currentTarget.nextElementSibling.style.height="auto")}},handleDropdownToggle:function(s){this.dropdownVisible=s}},created:function(){var s=this,t=new XMLHttpRequest;t.onreadystatechange=function(a){4===t.readyState&&200===t.status&&(s.versions=JSON.parse(t.responseText))},t.open("GET","/versions.json"),t.send()},mounted:function(){this.handleResize(),window.addEventListener("resize",this.handleResize)},beforeDestroy:function(){window.removeEventListener("resize",this.handleResize);
|
||
}}},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"}}}]); |