mirror of https://github.com/ElemeFE/element
91 lines
2.9 MiB
JavaScript
91 lines
2.9 MiB
JavaScript
|
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 l=a(2),n=t(l),e=a(3),i=t(e),v=a(19),_=t(v),r=a(20),c=t(r),o=a(556),p=t(o);a(904);var h=a(911),d=t(h),C=a(917),j=t(C),m=a(923),u=t(m),g=a(930),b=t(g),f=a(935),y=t(f),w=a(940),k=t(w);n.default.use(p.default),n.default.use(_.default),n.default.component("demo-block",d.default),n.default.component("main-footer",j.default),n.default.component("main-header",u.default),n.default.component("side-nav",b.default),n.default.component("footer-nav",y.default);var x=new _.default({mode:"hash",base:s,routes:c.default});x.afterEach(function(s){var t=k.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 n.default({render:function(s){return s(i.default)},router:x}).$mount("#app")}).call(t,"/")},,function(s,t,a){var l,n;a(4),l=a(12);var e=a(18);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){},,,,,,,,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n="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},e=a(13),i=a(14),v=l(i),_=a(17),r=l(_);(0,e.use)(location.href.indexOf("zh-CN")>-1?v.default:r.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,e.use)("zh-CN"===this.lang?v.default:r.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":n(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,a=s._self._c||t;return a("div",{attrs:{id:"app"}},["play"!==s.lang?a("main-header"):s._e(),a("div",{staticClass:"main-cnt"},[a("router-view")],1),"play"!==s.lang?a("main-footer"):s._e()
|
|||
|
|
attrs:{id:"1-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.1")]),a("p",[a("em",[s._v("2016-11-16")])]),a("ul",[a("li",[s._v("Fixed Pagination improperly triggering multiple "),a("code",[s._v("current-change")]),s._v(" events")]),a("li",[s._v("Fixed Switch style when nested in a Form, #967")]),a("li",[s._v("Fixed Loading locks scroll of "),a("code",[s._v("body")]),s._v(" in specific scenarios, #968")]),a("li",[a("code",[s._v("span")]),s._v(" of Col is no longer a required attribute, and its default value is "),a("code",[s._v("24")]),s._v(" if omitted")]),a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" and "),a("code",[s._v("editable")]),s._v(" attribute for DatePicker, #976")]),a("li",[s._v("Fixed DatePicker readonly with native behavior, #976")]),a("li",[s._v("Added "),a("code",[s._v("close")]),s._v(" method for Message and Notification to manually close an instance")]),a("li",[s._v("Added clear value feature for DatePicker, #759")]),a("li",[s._v("Fixed Form reports an error when resetting a Date typed field, #937")]),a("li",[s._v("Fixed Table render error using vue-loader 9.9.0")]),a("li",[s._v("Added "),a("code",[s._v("align-center")]),s._v(" attribute for Step, #994")]),a("li",[s._v("Fixed Upload missing Progress component, #1013")]),a("li",[s._v("Layout now supports responsive layout")]),a("li",[s._v("Added "),a("code",[s._v("show-close")]),s._v(" for Dialog")]),a("li",[s._v("Fixed an error when "),a("code",[s._v("vue-i18n")]),s._v(" is imported but not configured, #973")]),a("li",[s._v("Fixed DatePicker not refresh view with an initial value, #1050")]),a("li",[s._v("Fixed DiatePicker not refresh year when switched in month picker, #1070")]),a("li",[s._v("Added $loading service")]),a("li",[s._v("Added "),a("code",[s._v("manual")]),s._v(" trigger in Popover")]),a("li",[s._v("Added props: "),a("code",[s._v("nodeKey")]),s._v(", "),a("code",[s._v("emptyText")]),s._v(", "),a("code",[s._v("checkStrictly")]),s._v(", "),a("code",[s._v("defaultExpandAll")]),s._v(", "),a("code",[s._v("autoExpandParent")]),s._v(", "),a("code",[s._v("defaultCheckedKeys")]),s._v(", "),a("code",[s._v("defaultExpandedKeys")]),s._v(" and method: "),a("code",[s._v("setCheckedNodes")]),s._v(" for Tree")])]),a("h3",{attrs:{id:"1-0-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0")]),a("p",[a("em",[s._v("2016-11-9")])]),a("p",[s._v("Element 1.0.0 released.")])])}]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-changelog"},[a("div",{staticClass:"heading"},[a("el-button",{staticClass:"fr"},[a("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[s._v("Github Releases")])]),s._v("\n Changelog\n ")],1),a("ul",{ref:"timeline",staticClass:"timeline"}),a("change-log",{ref:"changeLog"})],1)},staticRenderFns:[]}},function(s,t,a){var l,n;a(44),l=a(46);var e=a(50);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(47),e=l(n);t.default={components:{ChangeLog:e.default},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,t=s.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var l=t[1].textContent.trim(),n='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>",e=t.length,i=2;i<e;i++){var v=t[i];a=t[i].querySelector("a"),a&&a.remove(),"H3"!==v.tagName?n+=t[i].outerHTML:(l=t[i].textContent.trim(),n+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>")}n=n.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>'),n=n.replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a
|
|||
|
|
return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./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/carousel.md":77,"./en-US/checkbox.md":81,"./en-US/collapse.md":85,"./en-US/color.md":89,"./en-US/custom-theme.md":92,"./en-US/date-picker.md":95,"./en-US/datetime-picker.md":99,"./en-US/dialog.md":103,"./en-US/dropdown.md":107,"./en-US/form.md":111,"./en-US/home.md":117,"./en-US/i18n.md":122,"./en-US/icon.md":125,"./en-US/input-number.md":130,"./en-US/input.md":134,"./en-US/installation.md":140,"./en-US/layout.md":143,"./en-US/loading.md":146,"./en-US/menu.md":150,"./en-US/message-box.md":154,"./en-US/message.md":158,"./en-US/notification.md":162,"./en-US/pagination.md":166,"./en-US/popover.md":170,"./en-US/progress.md":174,"./en-US/quickstart.md":177,"./en-US/radio.md":180,"./en-US/rate.md":184,"./en-US/select.md":188,"./en-US/slider.md":192,"./en-US/steps.md":196,"./en-US/switch.md":200,"./en-US/table.md":204,"./en-US/tabs.md":208,"./en-US/tag.md":212,"./en-US/time-picker.md":218,"./en-US/tooltip.md":222,"./en-US/tree.md":228,"./en-US/typography.md":232,"./en-US/upload.md":235,"./zh-CN/alert.md":239,"./zh-CN/badge.md":245,"./zh-CN/breadcrumb.md":252,"./zh-CN/button.md":255,"./zh-CN/card.md":261,"./zh-CN/carousel.md":267,"./zh-CN/checkbox.md":273,"./zh-CN/collapse.md":279,"./zh-CN/color.md":285,"./zh-CN/custom-theme.md":290,"./zh-CN/date-picker.md":293,"./zh-CN/datetime-picker.md":299,"./zh-CN/dialog.md":305,"./zh-CN/dropdown.md":311,"./zh-CN/form.md":317,"./zh-CN/home.md":323,"./zh-CN/i18n.md":327,"./zh-CN/icon.md":332,"./zh-CN/input-number.md":338,"./zh-CN/input.md":344,"./zh-CN/installation.md":350,"./zh-CN/layout.md":353,"./zh-CN/loading.md":358,"./zh-CN/menu.md":364,"./zh-CN/message-box.md":370,"./zh-CN/message.md":374,"./zh-CN/notification.md":378,"./zh-CN/pagination.md":382,"./zh-CN/popover.md":388,"./zh-CN/progress.md":394,"./zh-CN/quickstart.md":399,"./zh-CN/radio.md":402,"./zh-CN/rate.md":406,"./zh-CN/select.md":412,"./zh-CN/slider.md":418,"./zh-CN/steps.md":424,"./zh-CN/switch.md":428,"./zh-CN/table.md":434,"./zh-CN/tabs.md":440,"./zh-CN/tag.md":444,"./zh-CN/time-picker.md":450,"./zh-CN/tooltip.md":456,"./zh-CN/tree.md":462,"./zh-CN/typography.md":468,"./zh-CN/upload.md":473};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=51},function(s,t,a){s.exports=a(53)},function(s,t,a){var l,n;l=a(54);var e=a(55);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{hello:function(){alert("Hello World!")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays important alert messages.")]),s._m(1),a("p",[s._v("Alert components are non-overlay elements in the page that does not disappear automatically.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success"}}),a("el-alert",{attrs:{title:"info alert",type:"info"}}),a("el-alert",{attrs:{title:"warning alert",type:"warning"}}),a("el-alert",{attrs:{title:"error alert",type:"error"}})]],2),a("p",[s._v("Alert provides 4 types of themes defined by "),a("code",[s._v("type")]),s._v(", whose default value is "),a("code",[s._v("info")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v
|
|||
|
|
staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize the max value.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("The max value is defined by property "),a("code",[s._v("max")]),s._v(" which is a "),a("code",[s._v("Number")]),s._v(". Note that it only works when "),a("code",[s._v("value")]),s._v(" is also a "),a("code",[s._v("Number")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"99"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displays text content other than numbers.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge value="new" class="item">\n <el-b
|
|||
|
|
staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("Search"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Upload"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload el-icon-right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Displayed as a button group, can be used to group a series of similar operations.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"arrow-left"}},[s._v("Previous Page")]),a("el-button",{attrs:{type:"primary"}},[s._v("Next Page"),a("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}})],1)],1),a("p",[s._v("Use tag "),a("code",[s._v("<el-button-group>")]),s._v(" to group your buttons.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hl
|
|||
|
|
},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n }\n \n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),l("span",{staticClass:"javascript"},[s._v("\n"),l("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),l("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),l("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),l("span",{staticClass:"hljs-attr"},[s._v("currentDate")]),s._v(": "),l("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),l("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("()\n };\n }\n}\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"simple-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#simple-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Simple card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-images"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-images","aria-hidden":"true"}},[s._v("¶")]),s._v(" With images")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("header")]),a("td",[s._v("Title of the card. Also accepts a DOM passed by "),a("code",[s._v("slot#header")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("body-style")]),a("td",[s._v("CSS style of body")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{ padding: '20px' }")])])])])}]}},function(s,t,a){s.exports=a.p+"static/hamburger.50e4091.png"},function(s,t,a){s.exports=a(78)},function(s,t,a){var l,n;l=a(79);var e=a(80);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){"use strict";t.__esModule=!0,t.default={mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[0].className+=" small",s[3].className+=" medium"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Loop a series of images or texts in a limited space")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <div class="block">\n <span class="demonstration">Switch when indicator is hovered (default)</span>\n <el-carousel height="150px">\n <el-carousel-item v-for="item in 4">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n </div>\n <div class="block">\n <span class="demonstrati
|
|||
|
|
slot:"source"},[[a("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checked,expression:"checked"}],domProps:{value:s.checked},on:{input:function(t){s.checked=t}}},[s._v("Option")])]],2),a("p",[s._v("Define "),a("code",[s._v("v-model")]),s._v("(bind variable) in "),a("code",[s._v("el-checkbox")]),s._v(". The default value is a "),a("code",[s._v("Boolean")]),s._v(" for single "),a("code",[s._v("checkbox")]),s._v(", and it becomes "),a("code",[s._v("true")]),s._v(" when selected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- `checked` should be true or false -->")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked"')]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checked")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Disabled state for checkbox.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<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}}},[a("div",{staticClass:"source",slot:"source"},[[a("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}}},[s._v("Option")]),a("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._v("Option")])]],2),a("p",[s._v("Set the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s.
|
|||
|
|
script:"\n export default {\n data() {\n return {\n activeName: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{directives:[{name:"model",rawName:"v-model",value:s.activeName,expression:"activeName"}],attrs:{accordion:""},domProps:{value:s.activeName},on:{input:function(t){s.activeName=t}}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("p",[s._v("Activate accordion mode using the "),a("code",[s._v("accordion")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{stat
|
|||
|
|
staticClass:"hljs language-shell"},[s._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h3",{attrs:{id:"import-custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import custom theme")]),a("p",[s._v("By default the build theme file is placed inside "),a("code",[s._v("./theme")]),s._v(". You can specify its output directory with parameter "),a("code",[s._v("-o")]),s._v(". Importing your own theme is just like importing the default theme, only this time you import the file you just built:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'../theme/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n\nVue.use(ElementUI)\n")])]),a("h3",{attrs:{id:"import-component-theme-on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-component-theme-on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import component theme on demand")]),a("p",[s._v("If you are using "),a("code",[s._v("babel-plugin-component")]),s._v(" for on-demand import, just modify "),a("code",[s._v(".babelrc")]),s._v(" and specify "),a("code",[s._v("styleLibraryName")]),s._v(" to the path where your custom theme is located relative to "),a("code",[s._v(".babelrc")]),s._v(". Note that "),a("code",[s._v("~")]),s._v(" is required:")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"~theme"')]),s._v("\n }\n ]]]\n}\n")])]),a("p",[s._v("If you are unfamiliar with "),a("code",[s._v("babel-plugin-component")]),s._v(", please refer to "),a("a",{attrs:{href:"./#/en-US/component/quickstart"}},[s._v("Quick Start")]),s._v(". For more details, check out the "),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[s._v("project repository")]),s._v(" of "),a("code",[s._v("element-theme")]),s._v(".")])])}]}},function(s,t,a){s.exports=a(96)},function(s,t,a){var l,n;l=a(97);var e=a(98);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){"use strict";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"A week ago",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"Last month",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:"",value4:"",value5:"",value6:"",value7:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Date Picker for date input.")]),s._m(1),a("p",[s._v("Basic date picker measured by 'day'.")]),a("demo-block",{sta
|
|||
|
|
},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("first day of week")]),a("td",[s._v("Number")]),a("td",[s._v("1 to 7")]),a("td",[s._v("7")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",[s._v("pick")]),s._v(" event. Example: "),a("code",[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(100)},function(s,t,a){var l,n;l=a(101);var e=a(102);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){"use strict";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"A week ago",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"Last month",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:new Date,value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",value11:"",value12:"",value13:"",value14:"",value15:"",value16:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Select date and time in one picker.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{js
|
|||
|
|
slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},[s._v("Confirm")])],1)])],1),a("p",[s._v("Set the "),a("code",[s._v("v-model")]),s._v(" attribute with a "),a("code",[s._v("Boolean")]),s._v(", and Dialog shows when it is "),a("code",[s._v("true")]),s._v(". The Dialog has two parts: "),a("code",[s._v("body")]),s._v(" and "),a("code",[s._v("footer")]),s._v(", and the latter requires a "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("footer")]),s._v(". The optional "),a("code",[s._v("title")]),s._v(" attribute (empty by default) is for defining a title. This example explicitly changes the value of "),a("code",[s._v("v-model")]),s._v(" to toggle Dialog. In addition, we also provide "),a("code",[s._v("open")]),s._v(" and "),a("code",[s._v("close")]),s._v(" method, which you can call to open/close the Dialog.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("click to open the Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tips"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("This is a message"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v
|
|||
|
|
},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Use the button to trigger the dropdown list.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n Dropdown List\n "),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("p",[s._v("Use "),a("code",[s._v("split-button")]),s._v(" to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class "),a("code",[s._v("divider")]),s._v(" to item four.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-
|
|||
|
|
},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("if "),a("code",[s._v("split-button")]),s._v(" is "),a("code",[s._v("true")]),s._v(", triggers when left button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("command")]),a("td",[s._v("triggers when a dropdown item is clicked")]),a("td",[s._v("the command dispatched from the dropdown item")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Menu Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("command")]),a("td",[s._v("a command to be dispatched to Dropdown's "),a("code",[s._v("command")]),s._v(" callback")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the item is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("divided")]),a("td",[s._v("whether a divider is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(112)},function(s,t,a){var l,n;a(113),l=a(115);var e=a(116);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},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,l){""===a?l(new Error("Please input the password")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),l())},l=function(t,a,l){""===a?l(new Error("Please input the password again")):a!==s.ruleForm2.pass?l(new Error("Two inputs don't match!")):l()};return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formInline:{user:"",region:""},labelPosition:"right",formLabelAlign:{name:"",region:"",type:""},ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},ruleForm2:{pass:"",checkPass:"",age:""},formLabelWidth:"80px",options:[],rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]},rules2:{pass:[{validator:a,trigger:"blur"}],checkPass:[{validator:l,trigger:"blur"}],age:[{validator:t,trigger:"blur"}]},dynamicValidateForm:{domains:[{key:Date.now(),value:""}],email:""},numberValidateForm:{age:""}}},methods:{onSubmit:function(){console.log("submit!")},onRuleFormSubmit:function(){console.log("onRuleFormSubmit")},submitForm:funct
|
|||
|
|
staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("formInline")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("user")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Depending on your design, there are several different ways to align your label element.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-radio-group v-model="labelPosition" size="small">\n <el-radio-button label="left">Left</el-radio-button>\n <el-radio-button label="right">Right</el-radio-button>\n <el-radio-button label="top">Top</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">\n <el-form-item label="Name">\n <el-input v-model="formLabelAlign.name"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone">\n <el-input v-model="formLabelAlign.region"></el-input>\n </el-form-item>\n <el-form-item label="Activity form">\n <el-input v-model="formLabelAlign.type"></el-input>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n return {\n labelPosition: 'right',\n formLabelAlign: {\n name: '',\n region: '',\n type: ''\n }\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.labelPosition,expression:"labelPosition"}],attrs:{size:"small"},domProps:{value:s.labelPosition},on:{input:function(t){s.labelPosition=t}}},[a("el-radio-button",{attrs:{label:"left"}},[s._v("Left")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("Right")]),a("el-radio-button",{attrs:{label:"top"}},[s._v("Top")])],1),a("div",{staticStyle:{margin:"20px"}}),a("el-form",{attrs:{"label-position":s.labelPosition,"label-width":"100px",model:s.formLabelAlign}},[a("el-form-item",{attrs:{label:"Name"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formLabelAlign.name,expression:"formLabelAlign.name"}],domProps:{value:s.formLabelAlign.name},on:{input:function(t){s.formLabelAlign.name=t}}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formLabelAlign.region,expression:"formLabelAlign.region"}],domProps:{value:s.formLabelAlign.region},on:{input:function(t){s.formLabelAlign.region=t}}})],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formLabelAlign.type,expression:"formLabelAlign.type"}],domProps:{value:s.formLabelAlign.type},on:{input:function(t){s.formLabelAlign.type=t}}})],1)],1)],1),a("p",[s._v("The "),a("code",[s._v("label-position")]),s._v(" attribute decides how labels align, it can be "),a("code",[s._v("top")]),s._v(" or "),a("code",[s._v("left")]),s._v(". When set to "),a("code",[s._v("top")]),s._v(", labels will be placed at the top of the form field.")]),a("div",{staticClass:"highligh
|
|||
|
|
staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"desc"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm')\"")]),s._v(">")]),s._v("Create"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("rules")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"}
|
|||
|
|
staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm.email"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(domain, index) in dynamicValidateForm.domains"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'Domain' + index\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.key"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'domains.' + index + '.value'\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n required: true, message: 'domain can not be null', trigger: 'blur'\n }\"")]),s._v("\n >")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.value"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeDomain(domain)"')]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Submit"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addDomain"')]),s._v(">")]),s._v("New domain"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s
|
|||
|
|
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}}},[a("div",{staticClass:"source",slot:"source"},[a("i",{staticClass:"el-icon-edit"}),a("i",{staticClass:"el-icon-share"}),a("i",{staticClass:"el-icon-delete"}),a("el-button",{attrs:{type:"primary",icon:"search"}},[s._v("Search")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("Search"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n")])])])]),s._m(3),a("ul",{staticClass:"icon-list"},s._l(s.icons,function(t){return a("li",[a("span",[a("i",{class:"el-icon-"+t}),s._v("\n "+s._s("el-icon-"+t)+"\n ")])])}))],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Just assign the class name to "),a("code",[s._v("el-icon-iconName")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icons")])}]}},function(s,t,a){s.exports=a(131)},function(s,t,a){var l,n;l=a(132);var e=a(133);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{num1:1,num2:1,num3:5,num4:1,num5:1,num6:1}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input numerical values with a customizable range.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<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(
|
|||
|
|
staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("textarea2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("textarea3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Prepend or append an element, generally a label or a button.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div>\n <el-input placeholder="Please input" v-model="input3">\n <template slot="prepend">Http://</template>\n </el-input>\n</div>\n<div style="margin-top: 15px;">\n <el-input placeholder="Please input" v-model="input4">\n <template slot="append">.com</template>\n </el-input>\n</div>\n<div style="margin-top: 15px;">\n <el-input placeholder="Please input" v-model="input5">\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</div>\n\n\n\n',script:"\nexport default {\n data() {\n return {\n input3: '',\n input4: '',\n input5: '',\n select: ''\n }\n }\n}\n",style:"\n .el-select .el-input {\n width: 110px;\n }\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",[a("el-input",{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}}},[a("template",{slot:"prepend"},[s._v("Http://")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("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}}},[a("template",{slot:"append"},[s._v(".com")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input5,expression:"input5"}],attrs:{placeholder:"Please input"},domProps:{value:s.input5},on:{input:function(t){s.input5=t}}},[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.select,expression:"select"}],attrs:{placeholder:"Select"},domProps:{value:s.select},on:{input:function(t){s.select=t}},slot:"prepend"},[a("el-option",{attrs:{label:"Restaurant",value:"1"}}),a("el-option",{attrs:{label:"Order No.",value:"2"}}),a("el-option",{attrs:{label:"Tel",value:"3"}})],1),a("el-button",{attrs:{icon:"search"},slot:"append"})],1)],1)]),a("p",[s._v("Use "),a("code",[s._v("slot")]),s._v(" to distribute elements that prepend or append to Input.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pre
|
|||
|
|
staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("custom-item")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-item-en"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n .my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .value {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .link {\n font-size: 12px;\n color: #b4b4b4;\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n Vue.component("),a("span",{staticClass:"hljs-string"},[s._v("'my-item-en'")]),s._v(", {\n "),a("span",{staticClass:"hljs-attr"},[s._v("functional")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("h, ctx")]),s._v(") ")]),s._v("{\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" item = ctx.props.item;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" h("),a("span",{staticClass:"hljs-string"},[s._v("'li'")]),s._v(", ctx.data, [\n h("),a("span",{staticClass:"hljs-string"},[s._v("'div'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'value'")]),s._v(" } }, [item.value]),\n h("),a("span",{staticClass:"hljs-string"},[s._v("'span'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'link'")]),s._v(" } }, [item.link])\n ]);\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("item")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Object")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" }\n }\n });\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("links")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("state3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n querySearch(queryString, cb) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? link.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n "),a("span",{staticClas
|
|||
|
|
},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n el: "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n data: "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),a("span",{staticClass:"hljs-params"},[s._v("()")])]),s._v("{\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { visible: "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }\n }\n })\n ")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.")])])}]}},function(s,t,a){s.exports=a(144)},function(s,t,a){var l,n,e=a(145);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Quickly and easily create layouts with the basic 24-column.")]),s._m(1),a("p",[s._v("Create basic grid layout using columns.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col"
|
|||
|
|
staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can specify column offsets.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<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-con
|
|||
|
|
},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-col")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),
|
|||
|
|
},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),a("span",{staticClass:"hljs-comment"},[s._v("// true")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Calling the "),a("code",[s._v("close")]),s._v(" method on any one of them can close this full screen Loading.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If Element is imported entirely, a globally method "),a("code",[s._v("$loading")]),s._v(" will be registered to Vue.prototype. You can invoke it like this: "),a("code",[s._v("this.$loading(options)")]),s._v(", and it also returns a Loading instance.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("target")]),a("td",[s._v("the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to "),a("code",[s._v("document.querySelector")]),s._v(" to get the corresponding DOM node")]),a("td",[s._v("object/string")]),a("td",[s._v("—")]),a("td",[s._v("document.body")])]),a("tr",[a("td",[s._v("body")]),a("td",[s._v("same as the "),a("code",[s._v("body")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("same as the "),a("code",[s._v("fullscreen")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock")]),a("td",[s._v("same as the "),a("code",[s._v("lock")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text")]),a("td",[s._v("loading text that displays under the spinner")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Loading")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(151)},function(s,t,a){var l,n;l=a(152);var e=a(153);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},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,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Menu that provides navigation for your website.")]),s._m(1),a("p",[s._v("Top bar NavMenu can be used in a variety of scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-menu theme="dark" default-active="1" class="el-menu-dem
|
|||
|
|
staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("Groups"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n "),a("span",{staticClass:
|
|||
|
|
style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open4}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("The three methods mentioned above are repackagings of the "),a("code",[s._v("$msgbox")]),s._v(" method. This example calls "),a("code",[s._v("$msgbox")]),s._v(" method directly using the "),a("code",[s._v("showCancelButton")]),s._v(" attribute, which is used to indicate if a cancel button is displayed. Besides we can use "),a("code",[s._v("cancelButtonClass")]),s._v(" to add a custom style and "),a("code",[s._v("cancelButtonText")]),s._v(" to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the "),a("code",[s._v("beforeClose")]),s._v(" attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: "),a("code",[s._v("action")]),s._v(", "),a("code",[s._v("instance")]),s._v(" and "),a("code",[s._v("done")]),s._v(". Using it enables you to manipulate the instance before it closes, e.g. activating "),a("code",[s._v("loading")]),s._v(" for confirm button; you can invoke the "),a("code",[s._v("done")]),s._v(" method to close the MessageBox instance (if "),a("code",[s._v("done")]),s._v(" is not called inside "),a("code",[s._v("beforeClose")]),s._v(", the instance will not be closed).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open4() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$msgbox({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("showCancelButton")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("beforeClose")]),s._v(": "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("action, instance, done")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'confirm'")]),s._v(") {\n instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("
|
|||
|
|
},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("message")]),a("td",[s._v("message text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("message type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class, overrides "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Message")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("display duration, millisecond. If set to 0, it will not turn off automatically")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed with the message instance as the parameter")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Message")]),s._v(" and "),a("code",[s._v("this.$message")]),s._v(" returns the current Message instance. To manually close the instance, you can call "),a("code",[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Message")])])])])}]}},function(s,t,a){s.exports=a(163)},function(s,t,a){var l,n;l=a(164);var e=a(165);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){"use strict";s.exports={methods:{open:function(){var s=this.$createElement;this.$notify({title:"Title",message:s("p",{style:"color: red"},"This is a reminder")})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})},open3:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open6:function(){this.$notify.error({title:"Error",message:"This is an error message"})},open7:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})},onClose:function(){console.log("Notification is closed")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays a global notification message at the upper right corner of the page.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<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
|
|||
|
|
staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Change page size")]),a("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Jump to")]),a("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("All combined")]),a("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1)]],2),a("p",[s._v("This example is a complete use case. It uses "),a("code",[s._v("size-change")]),s._v(" and "),a("code",[s._v("current-change")]),s._v(" event to handle page size changes and current page changes. "),a("code",[s._v("page-sizes")]),s._v(" accepts an array of integers, each of which represents a different page size in the "),a("code",[s._v("sizes")]),s._v(" select options, e.g. "),a("code",[s._v("[100, 200, 300, 400]")]),s._v(" indicates that the select will have four options: 100, 200, 300 or 400 items per page.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Total item count"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._
|
|||
|
|
script:"\n export default {\n data() {\n return {\n visible2: false,\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{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}}},[a("p",[s._v("Are you sure to delete this?")]),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(t){s.visible2=!1}}},[s._v("cancel")]),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){s.visible2=!1}}},[s._v("confirm")])],1)]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},[s._v("Delete")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover5"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"160"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Are you sure to delete this?"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text-align: right; margin: 0"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("cancel"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("confirm"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover5")]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),
|
|||
|
|
},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("noInfo")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("devtool")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#eval-source-map'")]),s._v("\n}\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (process.env.NODE_ENV === "),a("span",{staticClass:"hljs-string"},[s._v("'production'")]),s._v(") {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.devtool = "),a("span",{staticClass:"hljs-string"},[s._v("'#source-map'")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("// http://vue-loader.vuejs.org/en/workflow/production.html")]),s._v("\n "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins = ("),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins || []).concat([\n "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.DefinePlugin({\n "),a("span",{staticClass:"hljs-string"},[s._v("'process.env'")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("NODE_ENV")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'\"production\"'")]),s._v("\n }\n }),\n "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.optimize.UglifyJsPlugin({\n "),a("span",{staticClass:"hljs-attr"},[s._v("compress")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("warnings")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n }\n })\n ])\n}\n")])]),a("h3",{attrs:{id:"import-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import Element")]),a("p",[s._v("You can import Element entirely, or just import what you need. Let's start with fully import.")]),a("h4",{attrs:{id:"fully-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fully-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fully import")]),a("p",[s._v("In main.js:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/theme-default/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.use(ElementUI)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("The above imports Element entirely. Note that CSS file needs to be imported separately.")]),a("h4",{attrs:{id:"on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" On demand")]),a("p",[s._v("With the help of "),a("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[s._v("babel-plugin-component")]),s._v(", we can import components we actually need, making the project smaller than otherwise.")]),a("p",[s._v("First, install babel-plugin-component:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm install babel-plugin-component -D\n")])]),a("p",[s._v("Then edit .babelrc:")]),a("pre",[a("code",{staticClass:"h
|
|||
|
|
"aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the bound value changes")]),a("td",[s._v("the label value of the chosen radio")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of radio")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(185)},function(s,t,a){var l,n;l=a(186);var e=a(187);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:null,value2:null,value3:null,value4:null,value5:3.7}},mounted:function(){this.$nextTick(function(){var s=document.querySelector(".source");s.style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for rating")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<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}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Color for different levels")]),a("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}}})],1)]),a("p",[s._v("Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the "),a("code",[s._v("colors")]),s._v(" attribute, and their two thresholds can be defined by "),a("code",[s._v("low-threshold")]),s._v(" and "),a("code",[s._v("high-threshold")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")
|
|||
|
|
},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Disable the whole component.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<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}}},[a("div",{staticClass:"source",slot:"source"},[[a("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 a("el-option",{attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("disabled")]),s._v(" of "),a("code",[s._v("el-select")]),s._v(" to make it disabled.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n \n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticCl
|
|||
|
|
staticClass:"hljs-string"},[s._v('"value8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("Enter keywords and search data from server.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<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
|
|||
|
|
staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v(" \n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Customized initial value"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Disabled"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("50")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("42")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("The options can be discrete.")]),a("demo-block",{staticClass:"demo
|
|||
|
|
return a("h2",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-that-contains-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-that-contains-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar that contains status")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"vertical-step-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-step-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Vertical step bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("space")]),a("td",[s._v("the spacing of each step, will be responsive if omitted")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("direction")]),a("td",[s._v("display direction")]),a("td",[s._v("string")]),a("td",[s._v("vertical/horizontal")]),a("td",[s._v("horizontal")])]),a("tr",[a("td",[s._v("active")]),a("td",[s._v("current activation step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("process-status")]),a("td",[s._v("status of current step")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("process")])]),a("tr",[a("td",[s._v("finish-status")]),a("td",[s._v("status of end step")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("finish")])]),a("tr",[a("td",[s._v("align-center")]),a("td",[s._v("whether step description is centered")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("center whole "),a("code",[s._v("Steps")]),s._v(" component")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("step icon")]),a("td",[s._v("icons provided by Element Icon. Can be overwritten by a named slot if you want to use custom icons")]),a("td",[s._v("string")]),
|
|||
|
|
staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("By default, Table has no vertical border. If you need it, you can set attribute "),a("code",[s._v("border")]),s._v(" to "),a("code",[s._v("true")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span"
|
|||
|
|
},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Detail"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Edit"),a("span"
|
|||
|
|
},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click.native.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"deleteRow(scope.$index, tableData4)"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n Remove\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hlj
|
|||
|
|
staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentRow")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n }\n },\n\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleCurrentChange(val) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".currentRow = val;\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("You can also select multiple rows.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template
|
|||
|
|
staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n }]\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n formatter(row, column) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n },\n filterTag(value, row) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.tag === value;\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(14),a("p",[s._v("Customize table column so it can be integrated with other components.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-table :data="tableData" border style="width: 100%">\n <el-table-column label="Date" width="180">\n <template scope="scope">\n <el-icon name="time"></el-icon>\n <span style="margin-left: 10px">{{ scope.row.date }}</span>\n </template>\n </el-table-column>\n <el-table-column label="Name" width="180">\n <template scope="scope">\n <el-popover trigger="hover" placement="top">\n <p>Name: {{ scope.row.name }}</p>\n <p>Addr: {{ scope.row.address }}</p>\n <div slot="reference" class="name-wrapper">\n <el-tag>{{ scope.row.name }}</el-tag>\n </div>\n </el-popover>\n </template>\n </el-table-column>\n <el-table-column :context="_self" label="Operations">\n <template scope="scope">\n <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n </template>\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, Lo
|
|||
|
|
}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-column"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-column","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed column")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-columns-and-header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-columns-and-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed columns and header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fluid-height-table-with-fixed-header-and-columns"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fluid-height-table-with-fixed-header-and-columns","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fluid-height Table with fixed header (and columns)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping-table-head"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping-table-head","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping table head")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sorting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sorting","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sorting")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filter"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filter","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filter")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-column-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-column-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom column template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"expandable-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#expandable-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Expandable row")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("table data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Table's height. By default it has an "),a("code",[s._v("auto")]),s._v(" height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("maxHeight")]),a("td",[s._v("Table's max-height. The height of the table starts from "),a("code",[s._v("auto")]),s._v(" until it reaches the maxHeight limit. The "),a("code",[s._v("maxHeight")]),s._v(" is measured in pixels, same as "),a("code",[s._v("height")])]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("stripe")]),a("td",[s._v("whether table is striped")]),a("td",[s._v("boolean")]),a("t
|
|||
|
|
staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("You can use named slot to customize the tab label content.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs type="border-card">\n <el-tab-pane>\n <span slot="label"><i class="el-icon-date"></i> Route</span>\n Route\n </el-tab-pane>\n <el-tab-pane label="Config">Config</el-tab-pane>\n <el-tab-pane label="Role">Role</el-tab-pane>\n <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{slot:"label"},[a("i",{staticClass:"el-icon-date"}),s._v(" Route")]),s._v("\n Route\n ")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"label"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v(" Route"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n
|
|||
|
|
}}},[a("div",{staticClass:"source",slot:"source"},[[a("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}}})]],2),a("p",[s._v("Use "),a("code",[s._v("el-time-picker")]),s._v(" label, and you can limit the time range by using "),a("code",[s._v("selectableRange")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Arbitrary time"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("If start time is picked at first, then the end time will change accordingly.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<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}}},[a("div",{staticClass:"source",slot:"source"},[[a("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}}}),a("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}}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v
|
|||
|
|
staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Bottom prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right-end"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Left prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom-start"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]
|
|||
|
|
staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([{ "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Root1'")]),s._v(" }, { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Root2'")]),s._v(" }]);\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level > "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([]);\n\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" hasChild;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v(") {\n hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v(") {\n hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n hasChild = "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random() > "),a("span",{staticClass:"hljs-number"},[s._v("0.5")]),s._v(";\n }\n\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" data;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (hasChild) {\n data = [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n }];\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n data = [];\n }\n\n resolve(data);\n }, "),a("span",{staticClass:"hljs-number"},[s._v("500")]),s._v(");\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Only one node among the same level can be expanded at one time.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tree :data="data" :props="defaultProps" accordion @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 children: [{\n label: 'Level three 1-1-1'\n }]\n }]\n }, {\n label: 'Level one 2',\n children: [{\n label: 'Level two 2-1',\n children: [{\n label: 'Level three 2-1-1'\n }]\n }, {\n label: 'Level two 2-2',\n children: [{\n label: 'Level three 2-2-1'\n }]\n }]\n }, {\n label: 'Level one 3',\n children: [{\n label: 'Level two 3-1',\n children: [{\n label: 'Level three 3-1-1'\n }]\n }, {\n label: 'Level two 3-2',\n children: [{\n label: 'Level three 3-2-1'\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleNodeClick(data) {\n console.log(data);\n }\n }\n };\n",style:null}}},[a("div",{
|
|||
|
|
},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"drag"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":multiple")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-success")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSuccess"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-error")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleError"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":default-file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v("\n>")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dragger__text"')]),s._v(">")]),s._v("Drop file here or "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),s._v("click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleRemove(file, fileList) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n },\n handlePrev
|
|||
|
|
},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"警告提示的文案"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"错误提示的文案"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"alert-jing-gao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert-jing-gao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert 警告")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-guan-bi-an-niu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-guan-bi-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义关闭按钮")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有 icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-fu-zhu-xing-wen-zi-jie-shao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有辅助性文字介绍")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有 icon 和辅助性文字介绍")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("title")])]),a("td",[s._v("标题，"),a("strong",[s._v("必选参数")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s.
|
|||
|
|
},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(">")]),s._v("文字按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("按钮不可用状态。")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{plain:!0,disabled:!0}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"primary",disabled:!0}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"text",disabled:!0}},[s._v("文字按钮")])],1),a("p",[s._v("你可以使用"),a("code",[s._v("disabled")]),s._v("属性来定义按钮是否可用，它接受一个"),a("code",[s._v("Boolean")]),s._v("值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("主要按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("主要按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("文字按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("不同的颜色倾向代表不同的提示")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认显示颜色")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{type:"success"}},[s._v("成功按钮")]),a("el-button",{attrs:{type:"warning"}},[s._v("警告按钮")]),a("el-button",{attrs:{type:"danger"}},[s._v("危险按钮")]),a("el-button",{attrs:{type:"info"}},[s._v("信息按钮")])],1)]),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"}
|
|||
|
|
},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),l("p",[s._v("卡片可以只有内容区域。")]),l("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"}}},[l("div",{staticClass:"source",slot:"source"},[l("el-card",{staticClass:"box-card"},s._l(4,function(t){return l("div",{staticClass:"text item"},[s._v("\n "+s._s("列表内容 "+t)+"\n ")])}))],1),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n "),l("span",[s._v("{{")]),s._v("'列表内容 ' + o "),l("span",[s._v("}}")]),s._v("\n "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n\n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),l("p",[s._v("可配置定义更丰富的内容展示。")]),l("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'}}},[l("div",{staticClass:"source",slot:"source"},[l("el-row",s._l(2,function(t,n){return l("el-col",{attrs:{span:8,offset:n>0?2:0}},[l("el-card",{attrs:{"body-sty
|
|||
|
|
staticClass:"hljs-string"},[s._v('"item in 6"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n \n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n }\n \n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"carousel-zou-ma-deng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-zou-ma-deng","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel 走马灯")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhi-shi-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhi-shi-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 指示器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qie-huan-jian-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qie-huan-jian-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 切换箭头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qia-pian-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 卡片化")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a(
|
|||
|
|
staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"一致性 Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"反馈 Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"效率 Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("简化流程：设计简洁直观的操作流程；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"可控 Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-a
|
|||
|
|
attrs:{id:"xiu-gai-bian-liang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-bian-liang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修改变量")]),a("p",[s._v("直接编辑 "),a("code",[s._v("element-variables.css")]),s._v(" 文件，例如修改主题色为红色。")]),a("pre",[a("code",{staticClass:"hljs language-CSS"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-selector-tag"},[s._v("red")]),s._v(";\n")])]),a("h3",{attrs:{id:"bian-yi-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bian-yi-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 编译主题")]),a("p",[s._v("保存文件后，到命令行里执行 "),a("code",[s._v("et")]),s._v(" 编译主题，如果你想启用 "),a("code",[s._v("watch")]),s._v(" 模式，实时编译主题，增加 "),a("code",[s._v("-w")]),s._v(" 参数；如果你在初始化时指定了自定义变量文件，则需要增加 "),a("code",[s._v("-c")]),s._v(" 参数，并带上你的变量文件名")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h3",{attrs:{id:"yin-ru-zi-ding-yi-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-zi-ding-yi-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 引入自定义主题")]),a("p",[s._v("默认情况下编译的主题目录是放在 "),a("code",[s._v("./theme")]),s._v(" 下，你可以通过 "),a("code",[s._v("-o")]),s._v(" 参数指定打包目录。像引入默认主题一样，在代码里直接引用 "),a("code",[s._v("theme/index.css")]),s._v(" 文件即可。")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'../theme/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n\nVue.use(ElementUI)\n")])]),a("h3",{attrs:{id:"da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 搭配插件按需引入组件主题")]),a("p",[s._v("如果是搭配 "),a("code",[s._v("babel-plugin-component")]),s._v(" 一起使用，只需要修改 "),a("code",[s._v(".babelrc")]),s._v(" 的配置，指定 "),a("code",[s._v("styleLibraryName")]),s._v(" 路径为自定义主题相对于 "),a("code",[s._v(".babelrc")]),s._v(" 的路径，注意要加 "),a("code",[s._v("~")]),s._v("。")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"~theme"')]),s._v("\n }\n ]]]\n}\n")])]),a("p",[s._v("如果不清楚 "),a("code",[s._v("babel-plugin-component")]),s._v(" 是什么，请阅读 "),a("a",{attrs:{href:"./#/zh-CN/component/quickstart"}},[s._v("快读上手")]),s._v(" 一节。更多 "),a("code",[s._v("element-theme")]),s._v(" 用法请参考"),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[s._v("项目仓库")]),s._v("。")])])}]}},function(s,t,a){s.exports=a(294)},function(s,t,a){var l,n;a(295),l=a(297);var e=a(298);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.expor
|
|||
|
|
return a("h3",{attrs:{id:"qi-ta-ri-qi-dan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-ri-qi-dan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 其他日期单位")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-ri-qi-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri-qi-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择日期范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("完全只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("文本框可输入")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否显示清除按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("显示类型")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/week/ datetime/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("时间日期格式化")]),a("td",[s._v("string")]),a("td",[s._v("年 "),a("code",[s._v("yyyy")]),s._v("，月 "),a("code",[s._v("MM")]),s._v("，日 "),a("code",[s._v("dd")]),s._v("，小时 "),a("code",[s._v("HH")]),s._v("，分 "),a("code",[s._v("mm")]),s._v("，秒 "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("string")]),a("td",[s._v("left, center, right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("DatePicker 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("当前时间日期选择器特有的选项参考下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("选择范围时的分隔符")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),a("td",[s._v("Object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),a("td",[s._v("Function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("周起始日")]),a("td",[s._v("Number")]),a("td",[s._v("1 到 7")]),a("td",[s._v("7")])])])])},function(){var s=this,t=s.$createElement,a=s._
|
|||
|
|
}},methods:{openDialog:function(){this.$refs.dialogBind.open()}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("在保留当前页面状态的情况下，告知用户并承载相关操作。")]),s._m(1),a("p",[s._v("Dialog 弹出一个对话框，适合需要定制性更大的场景。")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogVisible=!0}}},[s._v("点击打开 Dialog")]),a("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}}},[a("span",[s._v("这是一段信息")]),a("span",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogVisible=!1}}},[s._v("取 消")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},[s._v("确 定")])],1)])],1),a("p",[s._v("需要设置"),a("code",[s._v("v-model")]),s._v("属性，它接收"),a("code",[s._v("Boolean")]),s._v("，当为"),a("code",[s._v("true")]),s._v("时显示 Dialog。Dialog 分为两个部分："),a("code",[s._v("body")]),s._v("和"),a("code",[s._v("footer")]),s._v("，"),a("code",[s._v("footer")]),s._v("需要具名为"),a("code",[s._v("footer")]),s._v("的"),a("code",[s._v("slot")]),s._v("。"),a("code",[s._v("title")]),s._v("属性用于定义标题，它是可选的，默认值为空。本例通过显式改变"),a("code",[s._v("v-model")]),s._v("的值来打开 Dialog，此外我们还为 Dialog 实例提供了"),a("code",[s._v("open")]),s._v("和"),a("code",[s._v("close")]),s._v("方法，可以通过调用它们来打开/关闭 Dialog。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("点击打开 Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"提示"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("这是一段信息"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-a
|
|||
|
|
staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可使用按钮触发下拉菜单。")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[s._v("\n 更多菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n 更多菜单\n "),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1)],1),a("p",[s._v("设置"),a("code",[s._v("split-button")]),s._v("属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为"),a("code",[s._v("true")]),s._v("即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n 更多菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄
|
|||
|
|
},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("command")]),a("td",[s._v("指令")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("divided")]),a("td",[s._v("显示分割线")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(318)},function(s,t,a){var l,n;a(319),l=a(321);var e=a(322);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},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,l){""===a?l(new Error("请输入密码")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),l())},l=function(t,a,l){""===a?l(new Error("请再次输入密码")):a!==s.ruleForm2.pass?l(new Error("两次输入密码不一致!")):l()};return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formInline:{user:"",region:""},labelPosition:"right",formLabelAlign:{name:"",region:"",type:""},ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},ruleForm2:{pass:"",checkPass:"",age:""},formLabelWidth:"80px",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:l,trigger:"blur"}],age:[{validator:t,trigger:"blur"}]},dynamicValidateForm:{domains:[{value:"",key:Date.now()}],email:""},numberValidateForm:{age:""}}},methods:{onSubmit:function(){console.log("submit!")},submitForm:function(s){this.$refs[s].validate(function(s){return s?void alert("submit!"):(console.log("error submit!!"),!1)})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){var t=this.dynamicValidateForm.domains.indexOf(s);t!==-1&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({value:"",key:Date.now()})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据")]),s._m(1),a("p",[s._v("包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。")]),a("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="选
|
|||
|
|
style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.labelPosition,expression:"labelPosition"}],attrs:{size:"small"},domProps:{value:s.labelPosition},on:{input:function(t){s.labelPosition=t}}},[a("el-radio-button",{attrs:{label:"left"}},[s._v("左对齐")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("右对齐")]),a("el-radio-button",{attrs:{label:"top"}},[s._v("顶部对齐")])],1),a("div",{staticStyle:{margin:"20px"}}),a("el-form",{attrs:{"label-position":s.labelPosition,"label-width":"80px",model:s.formLabelAlign}},[a("el-form-item",{attrs:{label:"名称"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formLabelAlign.name,expression:"formLabelAlign.name"}],domProps:{value:s.formLabelAlign.name},on:{input:function(t){s.formLabelAlign.name=t}}})],1),a("el-form-item",{attrs:{label:"活动区域"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formLabelAlign.region,expression:"formLabelAlign.region"}],domProps:{value:s.formLabelAlign.region},on:{input:function(t){s.formLabelAlign.region=t}}})],1),a("el-form-item",{attrs:{label:"活动形式"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formLabelAlign.type,expression:"formLabelAlign.type"}],domProps:{value:s.formLabelAlign.type},on:{input:function(t){s.formLabelAlign.type=t}}})],1)],1)],1),a("p",[s._v("通过设置 "),a("code",[s._v("label-position")]),s._v(" 属性可以改变表单域标签的位置，可选值为 "),a("code",[s._v("top")]),s._v("、"),a("code",[s._v("left")]),s._v("，当设为 "),a("code",[s._v("top")]),s._v(" 时标签会置于表单域的顶部")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("左对齐"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("右对齐"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("顶部对齐"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-position")]),s._v("="),a("span",{staticClass:"hljs-st
|
|||
|
|
staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("rules")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请输入活动名称'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[s._v("min")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("max")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'长度在 3 到 5 个字符'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请选择活动区域'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请选择日期'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请选择时间'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n ],\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'array'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请至少选择一个活动性质'")]),s._v(", "),a("span",{staticClass:"hljs-att
|
|||
|
|
staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicValidateForm")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("domains")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("email")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n submitForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n }\n });\n },\n resetForm(formName) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n },\n removeDomain(item) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" index = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.indexOf(item)\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(")\n }\n },\n addDomain() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.push({\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v(".now()\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n <el-form-item label="年龄" prop="age" :rules="[\n { required: true, message: \'年龄不能为空\'},\n { type: \'number\', message: \'年龄必须为数字值\'}\n ]">\n <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'numberValidateForm\')">提交</el-button>\n <el-button @click="resetForm(\'numberValidateForm\')">重置</el-button>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n return {\n numberValidateForm: {\n age: ''\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (val
|
|||
|
|
script:"\n export default {\n data() {\n return {\n num2: 1\n }\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{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}}})]],2),a("p",[a("code",[s._v("disabled")]),s._v("属性接受一个"),a("code",[s._v("Boolean")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置"),a("code",[s._v("min")]),s._v("属性和"),a("code",[s._v("max")]),s._v("属性，不设置"),a("code",[s._v("min")]),s._v("和"),a("code",[s._v("max")]),s._v("时，最小值为 0。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("num2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n }\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("允许定义递增递减的步数控制")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("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}}})]],2),a("p",[s._v("设置"),a("code",[s._v("step")]),s._v("属性可以控制步长，接受一个"),a("code",[s._v("Number")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{st
|
|||
|
|
},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input5"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"select"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"餐厅名"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"订单号"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"用户电话"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-select")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-input")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._
|
|||
|
|
},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区淞虹路148号"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"凡仔汉堡（老真北路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区老真北路160号"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"港式小铺"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"蜀香源麻辣香锅（剑河路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"剑河路443-1"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"北京饺子馆"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"动力鸡车"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浏阳蒸菜"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路430号"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路428号"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{stat
|
|||
|
|
style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("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}}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearchAsync"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("restaurants")]),s._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[s._v("state4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("timeout")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n loadAll() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"三全鲜食（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新旺角茶餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"泷千家(天山西路店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路438号"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"贡茶"')]),s._v(", "),a("span",{staticClass:"hljs-string
|
|||
|
|
},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Hello world"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("欢迎使用 Element"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- 先引入 Vue -->")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/vue/dist/vue.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入组件库 -->")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n el: "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n data: "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),a("span",{staticClass:"hljs-params"},[s._v("()")])]),s._v("{\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { visible: "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }\n }\n })\n ")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。")])])}]}},function(s,t,a){s.exports=a(354)},function(s,t,a){var l,n;a(355);var e=a(357);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过基础的 24 分栏，迅速简便地创建布局。")]),s._m(1),a("p",[s._v("使用单一分栏创建基础的栅格布局。")]),a("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 cl
|
|||
|
|
},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n
|
|||
|
|
})]),a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"h
|
|||
|
|
},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),a("span",{staticClass:"hljs-comment"},[s._v("// true")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("此时调用它们中任意一个的 "),a("code",[s._v("close")]),s._v(" 方法都能关闭这个全屏 Loading。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 "),a("code",[s._v("$loading")]),s._v("，它的调用方式为："),a("code",[s._v("this.$loading(options)")]),s._v("，同样会返回一个 Loading 实例。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("target")]),a("td",[s._v("Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 "),a("code",[s._v("document.querySelector")]),s._v("以获取到对应 DOM 节点")]),a("td",[s._v("object/string")]),a("td",[s._v("—")]),a("td",[s._v("document.body")])]),a("tr",[a("td",[s._v("body")]),a("td",[s._v("同 "),a("code",[s._v("v-loading")]),s._v(" 指令中的 "),a("code",[s._v("body")]),s._v(" 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("同 "),a("code",[s._v("v-loading")]),s._v(" 指令中的 "),a("code",[s._v("fullscreen")]),s._v(" 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock")]),a("td",[s._v("同 "),a("code",[s._v("v-loading")]),s._v(" 指令中的 "),a("code",[s._v("lock")]),s._v(" 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text")]),a("td",[s._v("显示在加载图标下方的加载文案")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("Loading 的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(365)},function(s,t,a){var l,n;a(366),l=a(368);var e=a(369);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},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,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("为网站提供导航功能的菜单。")]),s._m(1),a("p",[s._v("适用广泛的基础用法。")]),a("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-
|
|||
|
|
},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("选项4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("导航二"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("导航三"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("分组"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"分组一"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class"
|
|||
|
|
staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("showCancelButton")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'确定'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'取消'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("beforeClose")]),s._v(": "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("action, instance, done")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'confirm'")]),s._v(") {\n instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n instance.confirmButtonText = "),a("span",{staticClass:"hljs-string"},[s._v("'执行中...'")]),s._v(";\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n done();\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n done();\n }\n }\n }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'action: '")]),s._v(" + action\n });\n });\n },\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),a("p",[s._v("对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt。")]),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"messagebox-dan-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#messagebox-dan-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" MessageBox 弹框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiao-xi-ti-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xi-ti-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 消息提示")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"que-ren-xiao-xi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#que-ren-xiao-xi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 确认消息")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ti-jiao-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ti-jiao-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 提交内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria
|
|||
|
|
},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("\n 不会自动关闭\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" h = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$createElement;\n\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标题名称'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": h("),a("span",{staticClass:"hljs-string"},[s._v("'p'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color: red'")]),s._v("}, "),a("span",{staticClass:"hljs-string"},[s._v("'这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'")]),s._v(")\n });\n },\n\n open2() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'提示'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条不会自动关闭的消息'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("duration")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n });\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open3}},[s._v("\n 成功\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open4}},[s._v("\n 警告\n ")]),a("el-button",{attrs:{plain:""},on:{click:s.open5}},[s._v("\n 消息\n ")]),a("el-button",{attrs:{plain:"
|
|||
|
|
staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("完整功能"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage4"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, sizes, prev, pager, next, jumper"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleSizeChange(val) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`每页 "),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v(" 条`")]),s._v(");\n },\n handleCurrentChange(val) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".currentPage = val;\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`当前页: "),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v("`")]),s._v(");\n }\n },\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"pagination-fen-ye"}},[a("a",{staticClass:"header-anchor",attrs
|
|||
|
|
},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("Popover 内嵌 HTML 文本")])]),a("tr",[a("td",[s._v("reference")]),a("td",[s._v("触发 Popover 显示的 HTML 元素")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("show")]),a("td",[s._v("显示时触发")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("hide")]),a("td",[s._v("隐藏时触发")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(395)},function(s,t,a){var l,n;a(396);var e=a(398);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于展示操作进度，告知用户当前状态和预期。")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{percentage:0}}),a("el-progress",{attrs:{percentage:70}}),a("el-progress",{attrs:{percentage:100,status:"success"}}),a("el-progress",{attrs:{percentage:50,status:"exception"}})],1),a("p",[s._v("Progress 组件设置"),a("code",[s._v("percentage")]),s._v("属性即可，表示进度条对应的百分比，"),a("strong",[s._v("必填")]),s._v("，必须在 0-100。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"h
|
|||
|
|
staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("radio")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("单选框不可用的状态。")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("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._v("备选项")]),a("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._v("备选项")])]],2),a("p",[s._v("注意：请牢记，选中的条件是绑定的变量值等于"),a("code",[s._v("label")]),s._v("中的值。只要在"),a("code",[s._v("el-radio")]),s._v("元素中设置"),a("code",[s._v("disabled")]),s._v("属性即可，它接受一个"),a("code",[s._v("Boolean")]),s._v("，"),a("code",[s._v("true")]),s._v("为禁用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"禁用"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选中且禁用"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data () {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"
|
|||
|
|
staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("只读的评分用来展示分数，允许出现半星")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("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}}})],1),a("p",[s._v("为组件设置 "),a("code",[s._v("disabled")]),s._v(" 属性表示组件为只读，支持小数分值。此时若设置 "),a("code",[s._v("show-text")]),s._v("，则会在右侧显示目前的分值。可以提供 "),a("code",[s._v("text-template")]),s._v(" 作为显示模板，模板为一个包含了 "),a("code",[s._v("{value}")]),s._v(" 的字符串，"),a("code",[s._v("{value}")]),s._v(" 会被解析为分值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff9900"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("text-template")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{value}"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3.7")]),s._v("\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"rate-ping-fen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rate-ping-fen","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rate 评分")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-zhu-wen-zi"}},[a("a",{staticClass
|
|||
|
|
staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": []\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("可以自定义备选项")]),a("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
|
|||
|
|
staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n remoteMethod(query) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (query !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n });\n }, "),a("span",{staticClass:"hljs-number"},[s._v("200")]),s._v(");\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = [];\n }\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("可以创建并选中选项中不存在的条目")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("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 a("el-option",{attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("使用"),a("code",[s._v("allow-create")]),s._v("属性即可通过在输入框中输入文字来创建新的条目。注意此时"),a("code",[s._v("filterable")]),s._v("必须为真。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value10"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("allow-create")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择文章标签"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options5"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"}
|
|||
|
|
script:"\n export default {\n data() {\n return {\n active: 0\n };\n },\n\n methods: {\n next() {\n if (this.active++ > 2) this.active = 0;\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:s.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"步骤 1"}}),a("el-step",{attrs:{title:"步骤 2"}}),a("el-step",{attrs:{title:"步骤 3"}})],1),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("下一步")])],1),a("p",[s._v("设置"),a("code",[s._v("active")]),s._v("属性，接受一个"),a("code",[s._v("Number")]),s._v("，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置"),a("code",[s._v("space")]),s._v("属性即可，它接受"),a("code",[s._v("Boolean")]),s._v("，单位为"),a("code",[s._v("px")]),s._v("，如果不设置，则为自适应。设置"),a("code",[s._v("finish-status")]),s._v("属性可以改变已经完成的步骤的状态。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"active"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 12px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"next"')]),s._v(">")]),s._v("下一步"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("active")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n };\n },\n\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n next() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),
|
|||
|
|
console.log(s,t)},handleSelectionChange:function(s){this.multipleSelection=s},handleCurrentChange:function(s){this.currentRow=s},formatter:function(s,t){return s.address},filterTag:function(s,t){return t.tag===s},tableRowClassName:function(s,t){return 1===t?"info-row":3===t?"positive-row":""},deleteRow:function(s,t){t.splice(s,1)}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。")]),s._m(1),a("p",[s._v("基础的表格展示用法。")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("当"),a("code",[s._v("el-table")]),s._v("元素中注入"),a("code",[s._v("data")]),s._v("对象数组后，在"),a("code",[s._v("el-table-column")]),s._v("中用"),a("code",[s._v("prop")]),s._v("属性来对应对象中的键名即可填入数据，用"),a("code",[s._v("label")]),s._v("属性来定义表格的列名。可以使用"),a("code",[s._v("width")]),s._v("属性来定义列宽。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[s._v(" "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")
|
|||
|
|
},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("sp
|
|||
|
|
staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n }]\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("当数据量动态变化时，可以为 Table 设置一个最大高度。")]),a("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>
|
|||
|
|
},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span"
|
|||
|
|
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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",formatter:s.formatter}}),a("el-table-column",{attrs:{prop:"tag",label:"标签",width:"100",filters:[{text:"家",value:"家"},{text:"公司",value:"公司"}],"filter-method":s.filterTag},scopedSlots:{default:function(t){return[a("el-tag",{attrs:{type:"家"===t.row.tag?"primary":"success","close-transition":""}},[s._v(s._s(t.row.tag))])]}}})],1)]],2),a("p",[s._v("在列中设置"),a("code",[s._v("filters")]),a("code",[s._v("filter-method")]),s._v("属性即可开启该列的筛选，filters 是一个数组，"),a("code",[s._v("filter-method")]),s._v("是一个方法，它用于决定某些数据是否显示，会传入两个参数："),a("code",[s._v("value")]),s._v("和"),a("code",[s._v("row")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("
|
|||
|
|
staticClass:"hljs-string"},[s._v("'金沙江路 1518 弄'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("detailAddress")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'金沙江路 1518 弄'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("detailAddress")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'金沙江路 1518 弄'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("detailAddress")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'金沙江路 1518 弄'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("s
|
|||
|
|
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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-click":s.handleClick,"tab-remove":s.handleRemove}},[a("el-tab-pane",{attrs:{label:"用户管理"}},[s._v("用户管理")]),a("el-tab-pane",{attrs:{label:"配置管理"}},[s._v("配置管理")]),a("el-tab-pane",{attrs:{label:"角色管理"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿"}},[s._v("定时任务补偿")])],1)]],2),a("p",[s._v("通过设置 "),a("code",[s._v("closable")]),s._v(" 属性来打开 "),a("code",[s._v("Tabs")]),s._v(" 的可关闭标签效果, "),a("code",[s._v("closable")]),s._v(" 也可以设置在 "),a("code",[s._v("Tab Panel")]),s._v(" 中实现部分标签页的可关闭效果。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("closable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"用户管理"')]),s._v(">")]),s._v("用户管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"配置管理"')]),s._v(">")]),s._v("配置管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"角色管理"')]),s._v(">")]),s._v("角色管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"定时任务补偿"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]
|
|||
|
|
staticClass:"hljs-attr"},[s._v("inputValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleClose(tag) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.splice("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.indexOf(tag), "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n },\n\n showInput() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n },\n\n handleInputConfirm() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" inputValue = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (inputValue) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.push(inputValue);\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue = "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tag-biao-qian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tag-biao-qian","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tag 标签")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-yi-chu-biao-qian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-yi-chu-biao-qian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可移除标签")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-bian-ji-biao-qian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-bian-ji-biao-qian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态编辑标签")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("动态编辑标签可以通过点击标签关闭按钮后触发的 "),a("code",[s._v("close")]),s._v(" 事件来实现")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题")]),a("td",[s._v("string")]),a("td",[s._v("primary/gray/success/warning/danger")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("close-transition")]),a("td",[s._v("是否禁用关闭时的渐变动画")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hit")]),a("td",[s._v("是否有边框描边")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color")]),a("td",[s._v("背景色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anc
|
|||
|
|
},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("上右"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Top 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-start"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("左上"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Center 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("左边"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Bottom 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-end"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("左下"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v
|
|||
|
|
style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.regions,props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"regions"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":load")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loadNode"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("lazy")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@check-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("regions")]),s._v(": [{\n "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v("\n }, {\n "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v("\n }],\n "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zones'")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("count")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleCheckChange(data, checked, indeterminate) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n },\n loadNode(node, resolve) {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([{ "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v(" }, { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v(" }]);\n }\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level > "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([]);\n\n "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" hasChild;\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v(") {\n hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._
|
|||
|
|
staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//jsonplaceholder.typicode.com/posts/"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"drag"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":multiple")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-success")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSuccess"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":on-error")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleError"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":default-file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v("\n>")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dragger__text"')]),s._v(">")]),s._v("将文件拖到此处，或"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),s._v("点击上传"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7
|
|||
|
|
},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+B2kpk
|
|||
|
|
},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9Ijg4cHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDg4IDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2tldGNoIFRlbXBsYXRlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iU2tldGNoLVRlbXBsYXRlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjUiPgogICAgICAgICAgICAgICAgPGcgaWQ9ImJyb3dzZXIiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wNDI3MzUsIDYuNzcyMjY5KSIgZmlsbD0iI0M5RTFGQiIgb3BhY2l0eT0iMC4yMzg4MDU5NyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjIwMDg4NDc2LDI4LjUwNTczMzcgTDQ0LjE3MDEzOTEsMjguNTA1NzMzNyBDNDUuOTEwNTI2NSwyOC41MDU3MzM3IDQ3LjMyMTc1NzUsMjcuMTAyNjMxMiA0Ny4zMjE3NTc1LDI1LjM3MjI2ODIgTDQ3LjMyMTc1NzUsMC4zMDU2MDg3MjUgQzQ3LjMyMTc1NzUsMi4wMzU5NzE3MiA0NS45MTA1MjY1LDMuNDM5MDc0MjYgNDQuMTcwMTM5MSwzLjQzOTA3NDI2IEwzLjIwMDg4NDc2LDMuNDM5MDc0MjYgQzEuNDYwNDk3MzksMy40MzkwNzQyNiAwLjA0OTI2NjM1MDMsMi4wMzU5NzE3MiAwLjA0OTI2NjM1MDMsMC4zMDU2MDg3MjUgTDAuMDQ5MjY2MzUwMywyNS4zNzIyNjgyIEMwLjA0OTI2NjM1MDMsMjcuMTAyOTg2MSAxLjQ2MDE0MDM4LDI4LjUwNTczMzcgMy4yMDA4ODQ3NiwyOC41MDU3MzM3IEwzLjIwMDg4NDc2LDI4LjUwNTczMzcgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik01OS45MjcxNjAxLDI4LjUwNTczMzcgTDc4LjgzNjE1NjYsMjguNTA1NzMzNyBDODAuNTc2NTQ0LDI4LjUwNTczMzcgODEuOTg3Nzc1LDI3LjEwMjYzMTIgODEuOTg3Nzc1LDI1LjM3MjI2ODIgTDgxLjk4Nzc3NSwwLjMwNTYwODcyNSBDODEuOTg3Nzc1LDIuMDM1OTcxNzIgODAuNTc2NTQ0LDMuNDM5MDc0MjYgNzguODM2MTU2NiwzLjQzOTA3NDI2IEw1OS45MjcxNjAxLDMuNDM5MDc0MjYgQzU4LjE4Njc3MjgsMy40MzkwNzQyNiA1Ni43NzU1NDE3LDIuMDM1OTcxNzIgNTYuNzc1NTQxNywwLjMwNTYwODcyNSBMNTYuNzc1NTQxNywyNS4zNzIyNjgyIEM1Ni43NzU1NDE3LDI3LjEwMjk4NjEgNTguMTg2NzcyOCwyOC41MDU3MzM3IDU5LjkyNzE2MDEsMjguNTA1NzMzNyBMNTkuOTI3MTYwMSwyOC41MDU3MzM3IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEw0NC4yMTI4NzM2LDEwLjIxMTY5ODYgQzQ1Ljk1MzI2MSwxMC4yMTE2OTg2IDQ3LjM2NDQ5Miw4LjgwODU5NjAzIDQ3LjM2NDQ5Miw3LjA3ODIzMzA0IEw0Ny4zNjQ0OTIsMy45NDQ3Njc1MSBDNDcuMzY0NDkyLDIuMjE0NDA0NTEgNDUuOTUzMjYxLDAuODExMzAxOTY5IDQ0LjIxMjg3MzYsMC44MTEzMDE5NjkgTDMuMjQzNjE5MjksMC44MTEzMDE5NjkgQzEuNTAzMjMxOTEsMC44MTEzMDE5NjkgMC4wOTIwMDA4NzY0LDIuMjE0NDA0NTEgMC4wOTIwMDA4NzY0LDMuOTQ0NzY3NTEgTDAuMDkyMDAwODc2NCw3LjA3ODIzMzA0IEMwLjA5MjAwMDg3NjQsOC44MDg1OTYwMyAxLjUwMjg3NDkxLDEwLjIxMTY5ODYgMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEwzLjI0MzYxOTI5LDEwLjIxMTY5ODYgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTU5Ljk2OTg5NDcsMTAuMjExNjk4NiBMNzguODc4ODkxMSwxMC4yMTE2OTg2IEM4MC42MTkyNzg1LDEwLjIxMTY5ODYgODIuMDMwNTA5Niw4LjgwODU5NjAzIDgyLjAzMDUwOTYsNy4wNzgyMzMwNCBMODIuMDMwNTA5NiwzLjk0NDc2NzUxIEM4Mi4wMzA1MDk2LDIuMjE0NDA0NTEgODAuNjE5Mjc4NSwwLjgxMTMwMTk2OSA3OC44Nzg4OTExLDAuODExMzAxOTY5IEw1OS45Njk4OTQ3LDAuODExMzAxOTY5IEM1OC4yMjk1MDczLDAuODExMzAxOTY5IDU2LjgxODI3NjMsMi4yMTQ0MDQ1MSA1Ni44MTgyNzYzLDMuOTQ0NzY3NTEgTDU2LjgxODI3NjMsNy4wNzgyMzMwNCBDNTYuODE4Mjc2Myw4LjgwODU5NjAzIDU4LjIyOTUwNzMsMTAuMjExNjk4NiA1OS45Njk4OTQ3LDEwLjIxMTY5ODYgTDU5Ljk2OTg5NDcsMTAuMjExNjk4NiBaIiBpZD0iU2hhcGUiIGZpbGw9IiMyMEEwRkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMTExNzc4LCA0NC4zOTY1NzIpIiBmaWxsPSIjQzlFMUZCIiBvcGFjaXR5PSIwLjIzODgwNTk3Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMuNjM5NDk2NTksMjguNDgxNTk3NCBDMy42Mzk0OTY1OSwzMC4yMTE5NjA0IDIuMTM2NTcxMzcsMzEuNjE1MDYyOSAwLjI4MzEwMzAxMywzMS42MTUwNjI5IEw2Mi41NjY3MDg4LDMxLjYxNTA2MjkgQzY0LjQyMDE3NzIsMzEuNjE1MDYyOSA2NS45MjMxMDI0LDMwLjIxMTk2MDQgNjUuOTIzMTAyNCwyOC40ODE1OTc0IEw2NS45MjMxMDI0LDMuNDE0OTM3OTIgQzY1LjkyMzEwMjQsMS42ODQ1NzQ5MiA2NC40MjAxNzcyLDAuMjgxNDcyMzggNjIuNTY2NzA4OCwwLjI4MTQ3MjM4IEwwLjI4MzEwMzAxMywwLjI4MTQ3MjM4IEMyLjEzNj
|
|||
|
|
},function(s,t,a){s.exports=a.p+"static/banner-bg.75437e1.svg"},function(s,t,a){var l,n;a(544),l=a(546);var e=a(547);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,n._scopeId="data-v-b5d87bc6",s.exports=l},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(535),e=l(n);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,e.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,l=s._self._c||t;return l("div",[s._m(0),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(538),alt:""}}),l("h3",[s._v("指南")]),l("p",[s._v("了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/guide/design",exact:""}},[s._v("查看详情\n ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(539),alt:""}}),l("h3",[s._v("组件")]),l("p",[s._v("使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/component/layout",exact:""}},[s._v("查看详情\n ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(540),alt:""}}),l("h3",[s._v("资源")]),l("p",[s._v("下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/resource",exact:""}},[s._v("查看详情\n ")])],1)])])])])},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"banner"},[l("div",{staticClass:"banner-sky"}),l("img",{staticClass:"banner-stars",attrs:{src:a(541),alt:"Element"}}),l("div",{staticClass:"container"},[l("div",{staticClass:"banner-desc"},[l("h2",[s._v("网站快速成型工具")]),l("div",{staticClass:"actor",attrs:{id:"line2"}}),l("p",[s._v("Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。")])]),l("img",{attrs:{src:a(542),alt:"Element"}})])])}]}},function(s,t,a){var l,n;l=a(549);var e=a(555);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(550),e=l(n);t.default={components:{PlayComponent:e.default}}},function(s,t,a){var l,n;a(551),l=a(553);var e=a(554);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,n._scopeId="data-v-2d369012",s.exports=l},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,a=s._self._c||t;return a("div",[a("el-button",[s._v("Test")])],1)},staticRenderFns:[]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticStyle:{margin:"20px
|
|||
|
|
nativeOn:{click:function(a){s.switchVersion(t)}}},[s._v("\n "+s._s(t)+"\n ")])}))],1),a("ul",s._l(s.data,function(t){return a("li",{staticClass:"nav-item"},[t.path?a("router-link",{attrs:{"active-class":"active",to:s.base+t.path,exact:""},domProps:{textContent:s._s(t.title||t.name)}}):a("a",{on:{click:s.expandMenu}},[s._v(s._s(t.name))]),t.children?a("ul",{staticClass:"pure-menu-list sub-nav"},s._l(t.children,function(t){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:s.base+t.path,exact:""},domProps:{textContent:s._s(t.title||t.name)}})],1)})):s._e(),t.groups?s._l(t.groups,function(t){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title",on:{click:s.expandMenu}},[s._v(s._s(t.groupName))]),a("ul",{staticClass:"pure-menu-list"},s._l(t.list,function(t){return t.disabled?s._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:s.base+t.path,exact:""},domProps:{textContent:s._s(t.title)}})],1)}))])}):s._e()],2)}))],1)},staticRenderFns:[]}},function(s,t,a){var l,n;a(936),l=a(938);var e=a(939);n=l=l||{},"object"!=typeof l.default&&"function"!=typeof l.default||(n=l=l.default),"function"==typeof n&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(21),e=l(n);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=e.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,a=s._self._c||t;return a("div",{staticClass:"footer-nav"},[s.leftNav?a("span",{staticClass:"footer-nav-link footer-nav-left",on:{click:function(t){s.handleNavClick("prev")}}},[a("i",{staticClass:"el-icon-arrow-left"}),s._v("\n "+s._s(s.leftNav.title||s.leftNav.name)+"\n ")]):s._e(),s.rightNav?a("span",{staticClass:"footer-nav-link footer-nav-right",on:{click:function(t){s.handleNavClick("next")}}},[s._v("\n "+s._s(s.rightNav.title||s.rightNav.name)+"\n "),a("i",{staticClass:"el-icon-arrow-right"})]):s._e()])},staticRenderFns:[]}},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"}}}]);
|