github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity
element/2.10/en-US.5e99aae.js

1 line
1.2 MiB
Raw Permalink Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{194:function(e,t,n){var a={"./changelog.vue":340,"./component.vue":586,"./design.vue":602,"./guide.vue":475,"./index.vue":477,"./nav.vue":479,"./resource.vue":614,"./theme-nav.vue":600,"./theme-preview.vue":483,"./theme.vue":485};function i(e){var t=l(e);return n(t)}function l(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}i.keys=function(){return Object.keys(a)},i.resolve=l,(e.exports=i).id=194},198:function(e,t,n){var a={"./en-US/alert.md":428,"./en-US/avatar.md":451,"./en-US/backtop.md":480,"./en-US/badge.md":496,"./en-US/border.md":503,"./en-US/breadcrumb.md":514,"./en-US/button.md":546,"./en-US/calendar.md":565,"./en-US/card.md":585,"./en-US/carousel.md":583,"./en-US/cascader.md":580,"./en-US/checkbox.md":578,"./en-US/collapse.md":575,"./en-US/color-picker.md":573,"./en-US/color.md":570,"./en-US/container.md":567,"./en-US/custom-theme.md":588,"./en-US/date-picker.md":563,"./en-US/datetime-picker.md":560,"./en-US/dialog.md":557,"./en-US/divider.md":555,"./en-US/dropdown.md":552,"./en-US/form.md":550,"./en-US/i18n.md":590,"./en-US/icon.md":545,"./en-US/image.md":542,"./en-US/infiniteScroll.md":540,"./en-US/input-number.md":537,"./en-US/input.md":535,"./en-US/installation.md":592,"./en-US/layout.md":530,"./en-US/link.md":528,"./en-US/loading.md":525,"./en-US/menu.md":523,"./en-US/message-box.md":520,"./en-US/message.md":518,"./en-US/notification.md":515,"./en-US/page-header.md":512,"./en-US/pagination.md":509,"./en-US/popover.md":506,"./en-US/progress.md":504,"./en-US/quickstart.md":596,"./en-US/radio.md":501,"./en-US/rate.md":498,"./en-US/select.md":495,"./en-US/slider.md":492,"./en-US/steps.md":489,"./en-US/switch.md":487,"./en-US/table.md":486,"./en-US/tabs.md":484,"./en-US/tag.md":481,"./en-US/time-picker.md":478,"./en-US/timeline.md":476,"./en-US/tooltip.md":343,"./en-US/transfer.md":473,"./en-US/transition.md":472,"./en-US/tree.md":471,"./en-US/typography.md":470,"./en-US/upload.md":468};function i(e){var t=l(e);return n(t)}function l(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}i.keys=function(){return Object.keys(a)},i.resolve=l,(e.exports=i).id=198},255:function(e,t,n){},256:function(e,t,n){},257:function(e,t,n){},258:function(e,t,n){},259:function(e,t,n){},260:function(e,t,n){},261:function(e,t,n){},262:function(e,t,n){},263:function(e,t,n){},312:function(e,t,n){"use strict";var a=n(255);n.n(a).a},313:function(e,t,n){"use strict";var a=n(256);n.n(a).a},314:function(e,t,n){"use strict";var a=n(257);n.n(a).a},315:function(e,t,n){"use strict";var a=n(258);n.n(a).a},316:function(e,t,n){"use strict";var a=n(259);n.n(a).a},317:function(e,t,n){"use strict";var a=n(260);n.n(a).a},318:function(e,t,n){"use strict";var a=n(261);n.n(a).a},319:function(e,t,n){"use strict";var a=n(262);n.n(a).a},320:function(e,t,n){"use strict";var a=n(263);n.n(a).a},340:function(e,t,n){"use strict";n.r(t);var a=n(0),i={components:{ChangeLog:Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"changelog"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changelog")]),n("h3",{attrs:{id:"2-10-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-10-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.10.1")]),n("h4",{attrs:{id:"bug-fixes"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fix sort icon (#15439 by @bezany)")]),n("li",[e._v("Fix layout breaks when append slot exists (#16332 by @ziyoung)")]),n("li",[e._v("Fix showOverflowTooltip not reactive (#16295 by @a631807682)")]),n("li",[e._v("Register scrollbar in filter-panel (#16246 by @ziyoung)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Fix 2.9 docs (#16233 by @ziyoung)")]),n("li",[e._v("Fix index page theme intro english css style issue (#16254 by @iamkun)")])])])]),n("h4",{attrs:{id:"optimization"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Compatible with IE (#16334 by @ziyoung)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update Dingtalk Group QR image (#16236 by @iamkun)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("Update online theme roller doc (#16244 by @iamkun)")])])])]),n("h3",{attrs:{id:"2-10-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-10-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.10.0")]),n("p",[n("em",[e._v("2019-06-25")])]),n("h4",{attrs:{id:"new-features"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Added Uzbek language (#15796 by @ogabek96)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("Add first-day-of-week attribute (#16047 by @ziyoung)")])])]),n("li",[e._v("Avatar\n"),n("ul",[n("li",[e._v("Add avatar component (#16144 by @luckyCao)")])])]),n("li",[e._v("Upload:\n"),n("ul",[n("li",[e._v("Add capability to customize thumbnail template (#13192 by @victorzhuk)")])])])]),n("h4",{attrs:{id:"bug-fixes-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Not highlight tree node when currentKey is null (#15668 by @yyjjqq94)")]),n("li",[e._v("Fix issue #15538 caused by two Tree sharing the same data (#15615 by @VanMess)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Update the parameter "),n("code",[e._v("fileList")]),e._v(" type (#15716 by @underfin)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fix loading icon not display (#15868 by @ziyoung)")]),n("li",[e._v("Fix background color of complex table when hovering (#15504 by @cnlon)")]),n("li",[e._v("Fix current-row-key and select event bug (#15983 by @ziyoung)")]),n("li",[e._v("Height accepts more units (#16013 by @ziyoung)")]),n("li",[e._v("Fix reserve-selection not work (#16135 by @ziyoung)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Fix Divider attribute type in zh-cn (#15889 by @haoranyu)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Fixed submenu hidden bug after adding popper-append-to-body (#15391 by @PanJiaChen)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Fix initialInputHeight (#15989 by @yyjjqq94)")]),n("li",[e._v("Fix default-first-option behavior when typing Chinese (#15431 by @VanMess)")]),n("li",[e._v("fix double import problem (#16215 by @lengband)")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("Add type def for offset option (#16027 by @matjaz)")])])]),n("li",[e._v("Timeline\n"),n("ul",[n("li",[e._v("Fix reverse broken (#16091 by @ziyoung)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v('Fix #15545 by adding explains about "input" event in Chinese (#15588 by @VanMess)')])])]),n("li",[e._v("InfiniteScroll\n"),n("ul",[n("li",[e._v("Update package name (#16125 by @iamkun)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Fix  distinguishCancelAndClose action not same as docs bug (#15438 by @qingdengyue)")])])]),n("li",[e._v("PopupManager\n"),n("ul",[n("li",[e._v("Fix z-index cannot be rewritten at first using (#15738 by @luckyCao)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Delete an incorrect closing html tag and empty block code (#16194 by @Alexeykhr)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update test api host (#15807 by @iamkun)")])])])]),n("h4",{attrs:{id:"optimization-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Modify loop conditions to improve performance (#15699 by @KingJeason)")])])]),n("li",[e._v("Theme\n"),n("ul",[n("li",[e._v("Refine GA track & Update footer link forward to online theme roller (#16007 by @island205)")])])]),n("li",[e._v("Badge\n"),n("ul",[n("li",[e._v("Update badge prop check (#16198 by @iamkun)")])])]),n("li",[e._v("Avatar\n"),n("ul",[n("li",[e._v("Update theme config var (#16202 by @luckyCao)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Update pt-br.js (#15776 by @gigioSouza)")]),n("li",[e._v("Update Farsi translation (#15881 by @pamenary)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Add missing components in quickstart (#16063 by @pape2016)")]),n("li",[e._v("Update french translation (#16208 by @blombard)")]),n("li",[e._v("Add description $slots.default (#15444 by @Alexeykhr)")]),n("li",[e._v("Update Spanish Doc 2.9.1 (#15840 by @Gonzalo2310)")]),n("li",[e._v("Fix spelling mistakes in fr (#15837 by @blombard)")]),n("li",[e._v("Update changelog 2.9.2 Spanish (#16185 by @Gonzalo2310)")])])])]),n("h4",{attrs:{id:"breaking-changes"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Remove success status (#16159 by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-9-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-9-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.9.2")]),n("p",[n("em",[e._v("2019-06-21")])]),n("h4",{attrs:{id:"bug-fixes-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Fix TS definitions file (#15805 by @NateScarlet)")])])])]),n("h3",{attrs:{id:"2-9-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-9-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.9.1")]),n("p",[n("em",[e._v("2019-05-30")])]),n("h4",{attrs:{id:"new-features-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("default-expand-all, expand-row-keys, toggle-row-expansion method and expand-change event are supported in Tree Table (#15709 by @ziyoung)")])])])]),n("h4",{attrs:{id:"bug-fixes-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fix some bugs (#15709 by @ziyoung)")])])]),n("li",[e._v("Theme\n"),n("ul",[n("li",[e._v("Update api host (#15784 by @iamkun)")])])])]),n("h4",{attrs:{id:"optimization-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update InfiniteScroll type (#15794 by @iamkun)")])])])]),n("h3",{attrs:{id:"2-9-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-9-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.9.0")]),n("p",[n("em",[e._v("2019-05-30")])]),n("h4",{attrs:{id:"new-features-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Backtop\n"),n("ul",[n("li",[e._v("Add Backtop component (#15541 by @iamkun)")])])]),n("li",[e._v("PageHeader\n"),n("ul",[n("li",[e._v("Add PageHeader component (#15714 by @ziyoung)")])])]),n("li",[e._v("InfiniteScroll\n"),n("ul",[n("li",[e._v("Add InfiniteScroll directive (#15567 by @iamkun)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Add multiple mode and filter-method (#15611 by @SimonaliaChen)")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("Display in stack mode (#15639 by @island205)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Add prop effect (#15725 by @SimonaliaChen)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Left align title when type is card (#15695 by @luckyCao)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Support literal strings (#15525 by island205)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("Add support for transmit attrs and listeners (#15578 by @VanMess)")])])]),n("li",[e._v("Theme\n"),n("ul",[n("li",[e._v("Add popup background (#15412 by @iamkun)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update new 2.9.0 index page (#15682 by @iamkun)")])])])]),n("h4",{attrs:{id:"bug-fixes-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fix sort-change behaviour when sort condition is null (#15012 by @joelxr)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("Fix ssr and object-fit compatibility (#15346 by @SimonaliaChen)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fix show-word-count style in el-form (#15359 by @lvjiaxuan)")]),n("li",[e._v("Fix clear icon is not centered (#15354 by @YiiGuxing)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("Fix not correct day of week when the day is Sunday (#15399 by @qingdengyue)")]),n("li",[e._v("Fix October disappear bug (#15394 by @qingdengyue)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Fix basic tab nested in card tab padding error (#15461 by @SimonaliaChen)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Fix stop propagation problem (#15150 by @infjer)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Fix input-group within form-item height error (#15457 by @SimonaliaChen)")]),n("li",[e._v("Fix resetFields issue (15181 by @luckyCao)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("Fix custom tabindex not work (#15619 by @SimonaliaChen )")])])]),n("li",[e._v("Link\n"),n("ul",[n("li",[e._v("Fix link icon style class (#15752 by @iamkun)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Revert set value to null when cleared (#15447 by @iamkun)")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Fix dom not change when loading state change quickly (#15123 by @FAKER-A)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Label with el-switch repeating event (#15178 by @FAKER-A)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("Fix style problem when clicking slider bar(#15561 by @luckyCao)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Fix issue 14808 (#14809 by @OverTree)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Fix resetFields issue (15181 by @luckyCao)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Upgrade dependencies and fix demo bug (#15324 by ziyoung)")])])]),n("li",[e._v("Type\n"),n("ul",[n("li",[e._v("Fix loading type definition (#15635 by @iamkun)")]),n("li",[e._v("Fix Icon type (#15634 by @iamkun)")]),n("li",[e._v("Fix Link type definition (#15402 by @iamkun)")])])])]),n("h4",{attrs:{id:"optimization-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Refactor (#15611 by @SimonaliaChen)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update make new component logic (by @iamkun)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Rename variable in docs (#15185 by @liupl)")]),n("li",[e._v("Fix image attribute type and default value (#15423 by @haoranyu)")]),n("li",[e._v("Fix form doc bug (#15228 by @SHERlocked93)")])])])]),n("h3",{attrs:{id:"2-8-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-8-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.8.2")]),n("p",[n("em",[e._v("2019-04-25")])]),n("h4",{attrs:{id:"bug-fixes-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Icon\n"),n("ul",[n("li",[e._v("Update icon (#15272 by @iamkun)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Fix Form and Input doc style (#15273 by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-8-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-8-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.8.1")]),n("p",[n("em",[e._v("2019-04-25")])]),n("h4",{attrs:{id:"bug-fixes-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Icon\n"),n("ul",[n("li",[e._v("Update icon of cascader and select (#15264 by @SimonaliaChen)")]),n("li",[e._v("Update icon (#15258 #15268 by @iamkun)")])])])]),n("h4",{attrs:{id:"optimization-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update build script (#15267 by @ziyoung)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Fix link underline color (#15265 by @iamkun)")])])]),n("li",[e._v("Other\n"),n("ul",[n("li",[e._v("Fix migrating config not compatible with camel case props and events (#15260 by @SimonaliaChen)")])])])]),n("h3",{attrs:{id:"2-8-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-8-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.8.0")]),n("p",[n("em",[e._v("2019-04-25")])]),n("h4",{attrs:{id:"new-features-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Divider\n"),n("ul",[n("li",[e._v("Add divider component (#15055 by @island205)")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("Add custom colors and icon-classes by passing a object (#15051 by @SimonaliaChen)")])])]),n("li",[e._v("Link\n"),n("ul",[n("li",[e._v("Add link component (#15052 by @iamkun)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("Add calendar component (#14908 by @ziyoung)")])])]),n("li",[e._v("Icon\n"),n("ul",[n("li",[e._v("Add icon (#15214 by @iamkun)")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Add dark theme (#15041 by @island205)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("Add image component (#15117 by @SimonaliaChen)")])])]),n("li",[e._v("Collapse\n"),n("ul",[n("li",[e._v("CollapseItem can be disabled (#15076 by @ziyoung)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("Add direction attribute and support vertical direction (#15122 by @ziyoung)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Add hide-on-single-page attribute (#15096 by @ziyoung)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("Add marks attribute (#15133 by @luckyCao)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Add show-word-count attribute (#15075 by @luckyCao)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Add step-strictly attribute (#15050 by @luckyCao)")])])]),n("li",[e._v("Tooltip, Dropdown, Popover\n"),n("ul",[n("li",[e._v("Support tabindex attribute (#15167 by @ziyoung)")])])])]),n("h4",{attrs:{id:"bug-fixes-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("Fix title word break (#15008 by @iamkun)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Fix switching the rules in el-form not work (#14985 by @luckyCao)")]),n("li",[e._v("Fix label style (#14969 by @ziyoung)")]),n("li",[e._v("Required FormItem displays asterisk when label is auto (#15144 by @ziyoung)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Fix slot not updated (#14711 by @lucyhao)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fix load bug in lazy mode (#15101 by @ziyoung)")]),n("li",[e._v("Fix cell width when colspan is grater than 1 (#15196 by @ziyoung)")]),n("li",[e._v("Improve performance (#14868 by @ziyoung)")]),n("li",[e._v("Don't emit triggers sort-change during initialization (#14625 by @PeanutWatson)")]),n("li",[e._v("Equal behaviour for height and max-height (#14660 by @arthurdenner)")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Fix dialog body correctly break long words (#15027 by @iamkun)")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("update type definition (#15186 by @ziyoung)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Fix issue where Promise rejection was hitting application (#14816 by @ffxsam)")]),n("li",[e._v("Rerender when slot changes (#15238 by @ziyoung)")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("Fix type definition (#14968 by @agoni1212)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Fix error when value is undefined or null (#15022 by @luckyCao)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Delete current node after it removed (#14604 by @sinchang)")]),n("li",[e._v("Improve performance (#14881 by @ChenZhuoSteve)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Fix style (#14907 by @doing123)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("Fix broken keyboard a11y bug (#14792 by @erezsob)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("ActiveIndex value shall be null if defaultIndex does not exist(#14074 by @hoythan)")])])]),n("li",[e._v("Directive\n"),n("ul",[n("li",[e._v("RepeatClick: use Date.now() instead of new Date() (#14776 by @pavelmash)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Fix Upload transparent picture display style (#15039 by @iamkun)")])])]),n("li",[e._v("Theme\n"),n("ul",[n("li",[e._v("Add zero border (#15256 by @iamkun)")])])])]),n("h4",{attrs:{id:"optimization-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update changelog zh-cn (#14965 by @iamkun)")]),n("li",[e._v("Hide demo description when it's empty (#15014 by @ziyoung)")]),n("li",[e._v("Display dev server info by default by @iamkun)")]),n("li",[e._v("Fix 2.6.0 changelog error (#15026 by @iamkun)")]),n("li",[e._v("Update build config (#14821 by @abc3660170)")]),n("li",[e._v("Add hmr (#15221 by @SimonaliaChen)")]),n("li",[e._v("Use sourcemap in dev environment (#15087 by @ibufu)\nDocs")]),n("li",[e._v("Rename variable in docs (#14602 #15003 #15094 #15105 by @liupl)")]),n("li",[e._v("Fix upload doc error (#15023 by @iamkun)")]),n("li",[e._v("Update Form custom validator doc (#15040 by @iamkun)")]),n("li",[e._v("Update Tabs docs to display vertical tabs (#15053 by @iamkun)")]),n("li",[e._v("Use eleme.cn as domain (#15139 by @ziyoung)")]),n("li",[e._v("Fix Image route name (#15194 by @iamkun)")]),n("li",[e._v("Remove duplicated fr translation (#15207 by @iamkun)")])])])]),n("h4",{attrs:{id:"breaking-changes-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("Fix decimal display support in disabled mode (#15089 by @haoranyu)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Use placeholder option label to set placeholder in filter mode (#14989 by @ibufu)")])])])]),n("h3",{attrs:{id:"2-7-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-7-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.7.2")]),n("p",[n("em",[e._v("2019-04-03")])]),n("h4",{attrs:{id:"bug-fixes-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Fix auto "),n("code",[e._v("label-width")]),e._v(" style (#14955 by @ziyoung)")])])])]),n("h4",{attrs:{id:"optimization-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Fix doc img link error (#14957 by @iamkun)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Fix deploy mkdir error (#14952 by @iamkun)")])])])]),n("h3",{attrs:{id:"2-7-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-7-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.7.1")]),n("p",[n("em",[e._v("2019-04-03")])]),n("h4",{attrs:{id:"bug-fixes-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Set value to null when cleared (#14322 by @aaronfulkerson)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Update DOM dependent values on type change (#14889 by @wacky6)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Make "),n("code",[e._v("defaultExpandAll")]),e._v(" works when expanded column exists (#14935 by @ziyoung)")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Background color can be configured (#14939 by @ziyoung)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[n("code",[e._v("label-width")]),e._v(" supports auto width (#14944 by @ziyoung)")])])])]),n("h4",{attrs:{id:"optimization-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Update Spanish docs (#14913 by @Gonzalo2310)")]),n("li",[e._v("Add French doc for new component (#14924 by @ziyoung)")]),n("li",[e._v("Optimize Tabs docs (#14938 by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-7-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-7-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.7.0")]),n("p",[n("em",[e._v("2019-03-28")])]),n("h4",{attrs:{id:"new-features-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Add support tree structure data (#14632 by @ziyoung)")])])])]),n("h4",{attrs:{id:"bug-fixes-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Use primary color as boxShadow color (#14558 by @Richard-Choooou)")]),n("li",[e._v("Rerender when label changes (#14496 by @akki-jat)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Footer follows body cell align (#14730 by @ziyoung)")])])]),n("li",[e._v("NavMenu\n"),n("ul",[n("li",[e._v("Fix click el-submenu trigger childMenu pop again bug (#14443 by @PanJiaChen)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Make compatible with 2.6 new v-slot syntax (#14832 by @ziyoung)")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Fix handle error hex color string (#14793 by @iamkun)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Revert pr #13349 (#14847 by @ziyoung)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("Display when initial value is true (#14826 by @ziyoung)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Update cascader docs (#14442 by @panhezeng)")])])]),n("li",[e._v("Style\n"),n("ul",[n("li",[e._v("Fix media query in sm-only, md-only, lg-only (#14611 by @sinchang)")])])])]),n("h4",{attrs:{id:"optimization-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Add webpage description (#14802 by @iamkun)")])])])]),n("h3",{attrs:{id:"2-6-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.3")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"bug-fixes-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Fix Cascader demo style (#14789 by @ziyoung)")]),n("li",[e._v("Remove unnecessary DOM operation (#14788 by @ziyoung)")]),n("li",[e._v("Fix DatePicker default-value DST (#14562 by @wacky6)")])]),n("h3",{attrs:{id:"2-6-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.2")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"new-features-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Add monthrange for type attribute (#14487 by @zxyRealm)")])])]),n("li",[e._v("i18n\n"),n("ul",[n("li",[e._v("Add Croatian locale (#14360 by @danijelh)")])])])]),n("h4",{attrs:{id:"bug-fixes-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fix regression (#14572 by @wacky6)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fix first-day-of-week computation (#14523 by @sinchang)")]),n("li",[e._v("Fix week picker's value-format (#13754 by @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Fix issue #14502 (#14596 by @sinchang)")]),n("li",[e._v("Fix style with simple theme (#14610 by @sinchang)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Update french doc for 2.6.1 and fix typos (#14555 by @smalesys)")]),n("li",[e._v("Rename variable in Table docs (#14587 by @likwotsing)")]),n("li",[e._v("Add french search index (#14565 by @iamkun)")]),n("li",[e._v("Fix TimePicker page style (#14579 by @ziyoung)")]),n("li",[e._v("Rename variable in Upload docs (#14593 by @liupl)")]),n("li",[e._v("French translation update (#14643 by @smalesys)")]),n("li",[e._v("Update Form async validator docs (#14694 by @iamkun)")]),n("li",[e._v("Fix tooltip doc error (#14748 by @iamkun)")]),n("li",[e._v("Fix typo (#14751 by @2bj)")]),n("li",[e._v("Fix highlighting control elements for Webkit touch (#14703 by @VladG0r)")])])])]),n("h4",{attrs:{id:"optimization-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update ci build script (#14600 by @ziyoung)")]),n("li",[e._v("Update ga tracking (#14560 by @iamkun)")]),n("li",[e._v("Add more ga event (#14633 by @iamkun)")]),n("li",[e._v("Update discusion group (#14741 by @iamkun)")]),n("li",[e._v("Update test deps and conf (#14735 by @wacky6)")]),n("li",[e._v("Upgrade gulp (#14745 by @ziyoung)")]),n("li",[e._v("Use codepen to display demo & fix doc error (#14747 by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-6-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.1")]),n("p",[n("em",[e._v("2019-03-03")])]),n("h4",{attrs:{id:"bug-fixes-14"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-14","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[n("strong",[e._v("Don't specify node version")]),e._v(" (by @iamkun in #14546)")]),n("li",[e._v("Fix doc directory in "),n("code",[e._v("deloy-faas.sh")]),e._v(" (by @ziyoung in #14553)")]),n("li",[e._v("Fix date style issue in changelog for 2.6.0 (by @island205 in #14547)")]),n("li",[e._v("Fix doc typo (by @wack6 in #14552)")])]),n("h3",{attrs:{id:"2-6-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.0")]),n("p",[n("em",[e._v("2019-03-01")])]),n("h4",{attrs:{id:"new-features-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Timeline\n"),n("ul",[n("li",[e._v("Add timeline component (by @jikkai in #14248)")])])]),n("li",[e._v("DropdownItem\n"),n("ul",[n("li",[e._v("Add icon prop to "),n("code",[e._v("el-dropdown-item")]),e._v(" (by @gabrielboliveira in #14088)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Add show-password props (by @phshy0607 in #13966)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Add slot "),n("code",[e._v("empty")]),e._v(" (by @elfman in #13785)")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Add highlight-first-item prop (by @YamenSharaf in #14269)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Created Armenian locale (by @hamletbarsamyan in #14214)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("French translation (by @smalesys in #12153, #14418, #14434)")])])])]),n("h4",{attrs:{id:"optimization-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Update alert description default slot class (by @iamkun in #14488)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Update input password (by @iamkun in #14480)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Remove unnecessary parseFloat (by @JuniorTour in #14172)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Add support for "),n("code",[e._v("el-menu-item")]),e._v(" without index (by @georgyfarniev in #13298)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Remove some html DOM operations (by @elfman in #13643)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Optimize code (by @elfman in #13973)")])])]),n("li",[e._v("Popup\n"),n("ul",[n("li",[e._v("Optimize code (by @KAionro in #14413)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Add more detail about how to run play mode for contribution (by @island205 in #14355)")]),n("li",[e._v("Warn input as a controlled component (by @wacky6 in #14463)")]),n("li",[e._v("Update Table doc (by @luguokong in #14329)")]),n("li",[e._v("Update input doc (by @iamkun in #14437)")]),n("li",[e._v("Update custom-theme docs (by @wangguohao in #14297)")]),n("li",[e._v("Make the icon style change when hover on it (by @tuxinghuan in #14295)")])])]),n("li",[e._v("Build\n"),n("ul",[n("li",[e._v("Minimizing css and js for Element doc site (by @iamkun in #14430)")]),n("li",[e._v("Speeding up webpack (by @hetech in #14484)")]),n("li",[e._v("Use cli to select release version (by @hetech in #14354)")])])]),n("li",[e._v("Install stale for issue handling (by @island205 in #14392)")])]),n("h4",{attrs:{id:"bug-fixes-15"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-15","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Fix subMenu focus bug when switch browser tab (by @liupl in #13976)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Fix type definition (by @NateScarlet in #14278)")])])]),n("li",[e._v("ScrollBar\n"),n("ul",[n("li",[e._v("Prevent right button click on thumb (by @xifeiwu in #14196)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Trigger form validation if value changes (by @hetech in #14426)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Make toggleAllSelection method an instance method (by @letanure in #14075)")])])]),n("li",[e._v("Tabs & Dropdown\n"),n("ul",[n("li",[e._v("Fix style (by @hetech in #14452)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Empty-text tips are different from tables (by @ColinCll in #14331)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Fix DatetimePicker format doc error (by @iamkun in #14290)")]),n("li",[e._v("Spelling issue in datepicker documentation (by @helmut in #14481)")]),n("li",[e._v("Fix pagination doc style (by @liuchuzhang in #14451)")])])])]),n("h4",{attrs:{id:"breaking-changes-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fix params order of row events (by @jikkai in #12086)")])])])]),n("h3",{attrs:{id:"2-5-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.4")]),n("p",[n("em",[e._v("2019-02-01")])]),n("h4",{attrs:{id:"bug-fixes-16"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-16","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Build: Fix babel config issue which lead to collapse transition broken (by @island205 in #14282)")])]),n("h3",{attrs:{id:"2-5-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.3")]),n("p",[n("em",[e._v("2019-01-31")])]),n("h4",{attrs:{id:"optimization-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Optimize code of Message (by @vok123 in #14029)")]),n("li",[e._v("Retire gh-pages (by @ziyoung in #14266)")]),n("li",[e._v("Add IssueHunt link (by @island205 in #14261)")])]),n("h4",{attrs:{id:"bug-fixes-17"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-17","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Fix UMD module error on server side (by @island205 in #14242)")]),n("li",[e._v("Fix active TabBar style (by @iamkun in #14240)")]),n("li",[e._v("Fix Table demo code error (by @xunmeng in #14253)")])]),n("h3",{attrs:{id:"2-5-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.2")]),n("p",[n("em",[e._v("2019-01-27")])]),n("h4",{attrs:{id:"optimization-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Docs:\n"),n("ul",[n("li",[e._v("Update ChangeLog ES 2.5.1 (by @Gonzalo2310 in #14231)")])])])]),n("h4",{attrs:{id:"bug-fixes-18"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-18","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Build:\n"),n("ul",[n("li",[e._v("Delete unremoved comments in umd module "),n("code",[e._v("lib/index.js")]),e._v(" (by @island205 in #14233)")]),n("li",[e._v("Fix export error fired in commonjs module used in nuxt.js (by @island205 in #14232)")]),n("li",[e._v("Fix 2.5.1 build issues (by @iamkun in #14228)")])])])]),n("h3",{attrs:{id:"2-5-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.1")]),n("p",[n("em",[e._v("2019-01-26")])]),n("h4",{attrs:{id:"optimization-14"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-14","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("DatePicker: highlight current month and year (by @Debiancc in #14211)")]),n("li",[e._v("Update 2.5.0 changelog (by @wacky6 in #14217)")])]),n("h4",{attrs:{id:"bug-fixes-19"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-19","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Fix export issue generate by webpack upgrading (by @island205 in #14220)")]),n("li",[e._v("Keep 2.4.11 docs && new sub folder for 2.5+ (by @iamkun in #14222)")])]),n("h3",{attrs:{id:"2-5-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.0")]),n("p",[n("em",[e._v("2019-01-25")])]),n("h4",{attrs:{id:"new-features-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Add "),n("code",[e._v("validate-event")]),e._v(" attribute (by @ziyoung in #13531)")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[n("code",[e._v("pickerOptions")]),e._v(" support "),n("code",[e._v("selectableRange")]),e._v(" option (by @eeeeeeeason)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Add "),n("code",[e._v("click")]),e._v(" event (by @licdream in #14106)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("support Kyrgyz language (by @zzjframework in #14174)")])])])]),n("h4",{attrs:{id:"optimization-15"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-15","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Upgrade to webpack@4 (by @jikkai in #14173)")]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Simplify implementation, follow one-way data flow. Fix several related bugs (by @wacky6 in #13471)")])])]),n("li",[e._v("Update Axure file，add new components (by @ziyoung in #13773)")])]),n("h4",{attrs:{id:"bug-fixes-20"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-20","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Fix dropdown's last line beging clipped (by @ziyoung in #13597)")]),n("li",[e._v("Fix missing popper arrow (by @liuchuzhang in #13762)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("Cleanup timer when component is destroyed (by @elfman in #13820)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Remove deprecated property of computed props (by @iamkun in #13737)")]),n("li",[e._v("Fix CascaderOption's type definition in TypeScript (by @NateScarlet in #13613)")]),n("li",[e._v("Fix icon covering the text (by @ziyoung in #13596)")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Refine style (by @PanJiaChen)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Add missing v-for "),n("code",[e._v("key")]),e._v(" in TimeSpinner (by @Ende93 in #13547)")]),n("li",[e._v("Fix week highlight on year boundary (by @suyi91 in #13883)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fix textarea DOM node reference (by @laomu1988 @island205 in #13803)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Input value won't be less than 1 (by @elfman in #13727)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Fix popover issues with hover trigger (by @goldengecko in #13104)")]),n("li",[e._v("Fix popper instance memory leak (by @qpxtWhite in #13988)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Refine style (by @ohhoney1)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Enhanced table sorting when clicking on the sorting arrow (by @ohhoney1 in #12890)")]),n("li",[e._v("Fix empty text vertical alignment issue on IE10+ (by @imzjy in #13638)")]),n("li",[e._v("Fix index type documentation (by @ilovefafa in #13628)")]),n("li",[e._v("Fix "),n("code",[e._v("show-summary")]),e._v(" display issue when multilevel header has fixed attr (by @luckyCao in #13914)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Fix auto scroll bug (by @iamkun in #13696)")]),n("li",[e._v("Get the correct tab through tab name (by @iamkun in #13705)")]),n("li",[e._v("Use paneName instead of name to determine pane style (by @iamkun in #13733)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Fix "),n("code",[e._v("showCheckbox")]),e._v(" prop on "),n("code",[e._v("Tree")]),e._v(" can not affect their children "),n("code",[e._v("tree-node")]),e._v(" (by @KidneyFlower)")]),n("li",[e._v("Update doc and definition file (by @ziyoung in #13540)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Add "),n("code",[e._v("url")]),e._v(" prop to upload file when "),n("code",[e._v("list-type")]),e._v(" changed (by @elfman in #13771)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("Fix source code indentation (by @wacky6 in #13955)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Add missing Catalan translations (by @jaumesala)")]),n("li",[e._v("Add missing ru translation (by @justlp in #13658)")]),n("li",[e._v("Fix Finnish translations (by @jenkrisu in #14137)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("Update Spanish doc 2.4.11 (by @Gonzalo2310 in #13522)")])])]),n("li",[e._v("Others\n"),n("ul",[n("li",[e._v("Remove unnecessary script (by @ziyoung)")]),n("li",[e._v("Fix error anchor link (by @iamkun in #13753)")]),n("li",[e._v("Fix inconsistent capitalization in documentation (by @wonderjar)")]),n("li",[e._v("Add DingDing chat group qr code to readme (by @iamkun in #13957)")]),n("li",[e._v("Add yarn logs to .gitignore (by @mimimi in #13922)")]),n("li",[e._v("Remove sponsor duotai (by @island205 in #14156)")]),n("li",[e._v("Update readme qr code src (by @iamkun in #13960)")]),n("li",[e._v("Update CDN link, fix typo (by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-4-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.11")]),n("p",[n("em",[e._v("2018-11-21")])]),n("ul",[n("li",[e._v("Revert pr #13296. Fixed clicking on Menu external causing Submenu collapsed, #13478")]),n("li",[e._v("Adjust small screen (xs) media query breakpoints, #13468 (by @alekoshen712)")])]),n("h3",{attrs:{id:"2-4-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.10")]),n("p",[n("em",[e._v("2018-11-16")])]),n("ul",[n("li",[e._v("Fixed multiple clicks on Select to display the drop-down list, #13268")]),n("li",[e._v("The clear icon for input is not displayed when Form is disabled, #13208")]),n("li",[e._v("Adjust the style of Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)")]),n("li",[e._v("Carousel component added "),n("code",[e._v("loop")]),e._v(" attribute, #13217")]),n("li",[e._v("When the data of Table changes, the highlighted line will remain, #13200")]),n("li",[e._v("Table header scoped slot can receive parameters, #13263")]),n("li",[e._v("Table's "),n("code",[e._v("clearFilter")]),e._v(" method supports arguments, #13176")]),n("li",[e._v("Tooltip is no longer created when there is no content in the Table cell, #13152 (by @rongxingsun)")]),n("li",[e._v("The input box contents of the ColorPicker panel can be displayed correctly, #13278")]),n("li",[e._v("ColorPicker no longer triggers form validation when dragging, #13299")]),n("li",[e._v("InputNumber added "),n("code",[e._v("select")]),e._v("method, #13286 (by @st-sloth)")]),n("li",[e._v("Autocomplete added "),n("code",[e._v("clear")]),e._v(" event, #12171(by arthurdenner) #13326")]),n("li",[e._v("You can close Menu by clicking on Menu outside, #13296")]),n("li",[e._v("Form's "),n("code",[e._v("validateField")]),e._v(" method can receive arguments, #13319")]),n("li",[e._v("Cascader added "),n("code",[e._v("visible-change")]),e._v(" event, #13415")]),n("li",[e._v("DatePicker added range-separator slot, #13272 (by @milworm)")]),n("li",[e._v("Tree adds "),n("code",[e._v("iconClass")]),e._v(" and "),n("code",[e._v("currentNodeKey")]),e._v(" properties, #13337 #13197 (by @isnifer)")]),n("li",[e._v("Progress's"),n("code",[e._v("status")]),e._v(" added text #13198 (by @ali-master)")]),n("li",[e._v("Fixing tree's "),n("code",[e._v("defaultCheckedKeys")]),e._v(" caused an error, #13349 (by @dive2Pro)")])]),n("h3",{attrs:{id:"2-4-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.9")]),n("p",[n("em",[e._v("2018-10-26")])]),n("ul",[n("li",[e._v("The parameter of Form's "),n("code",[e._v("clearValidate")]),e._v(" supports string, #12990 (by @codinglobster)")]),n("li",[e._v("Added type attribute for Badge, #12991")]),n("li",[e._v("Users can use scoped-slot to customize table column header #13012 (by @ivanseidel)")]),n("li",[e._v("Fixed the input box of Select unable to type text under IE, #13034 (by @GaliMU)")]),n("li",[e._v("Select option does not wrap when space is enough, #12329 (by @akki-jat)")]),n("li",[e._v("When dropdown list of Select is expanded, the arrow icon will also display correctly, #12353 (by @firesh)")]),n("li",[e._v("Fixed that the size attribute of Select does not work, #13070")]),n("li",[e._v("Select multiple values can be cleared, #13049 (by @ZSkycat)")]),n("li",[e._v("Fixed the last TabNav unable be deleted, #13039")]),n("li",[e._v("Fixed that TabNav label is not displayed correctly, #13178")]),n("li",[e._v("Added title slot for Alert, #13082 (by @Kingwl)")]),n("li",[e._v("Fixed an issue where the tooltip content in Table was incorrect, #13159 (by @elfman)")]),n("li",[e._v("Optimize the animation of Upload when file is deleted, #12987")]),n("li",[e._v("Adjusted style of InputNumber when control button is not displayed, #13052")])]),n("h3",{attrs:{id:"2-4-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.8")]),n("ul",[n("li",[e._v("Not displaying outline when Switch is focused, #12771")]),n("li",[e._v("Fixed Dropdown's style in ButtonGroup, #12819 (by @bluejfox)")]),n("li",[e._v("Added opened event for Dialog, #12828")]),n("li",[e._v("Fixed the incorrect display order of TabNav, #12846")]),n("li",[e._v("Fixed the problem that Tabs did not scroll to the selected tab, #12948")]),n("li",[e._v("Fixed the problem that the identifier does not display when the Tree node is dragged, #12854")]),n("li",[e._v("The validate event parameter of Form contains the validation message, #12860 (by @YamenSharaf)")]),n("li",[e._v("Fixed DatePicker not to verify the validity of user input time, #12898")]),n("li",[e._v("Fixed the problem that "),n("code",[e._v("render-header")]),e._v(" attribute of Table header doesn't work, #12914")])]),n("h3",{attrs:{id:"2-4-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.7")]),n("p",[n("em",[e._v("2018-09-14")])]),n("ul",[n("li",[e._v("Fixed DatePicker not triggering form validation, #12328 #12348")]),n("li",[e._v("Fixed DatePicker throwing errors in multiple mode, #12347")]),n("li",[e._v("Fixed incorrect position of DatePicker spinner, #12415 (by @rang-ali)")]),n("li",[e._v("Fixed automatic filling of DatePicker input box, #12521 (by @abdallanayer)")]),n("li",[e._v("Fixed Input not highlighted in Cascader, #12341")]),n("li",[e._v("Fixed wrong order of Tabpane, #12346")]),n("li",[e._v("Fixed incorrect position of ColorPicker cursor, #12376 (by @cnwhy)")]),n("li",[e._v("Fixed the style of Submenu, #2457")]),n("li",[e._v("Fixed not highlighted after Submenu is selected, #12479")]),n("li",[e._v("Fixed incorrect values selected by Cascader, #12508 (by @huangjinqiang)")]),n("li",[e._v("Fixed incorrect value of Pagination input box, #12525")]),n("li",[e._v("Fixed order that Pagination triggers events, #12530")]),n("li",[e._v("Fixed Table Filter not displayed, #12539")]),n("li",[e._v("Fixed Tree unable to delete nodes, #12684")]),n("li",[e._v("Fixed height of Select Input changing in single mode, #12719")]),n("li",[e._v("Fixed style of FormItem label in nested Form, #12748")]),n("li",[e._v("Added "),n("code",[e._v("autocomplete")]),e._v(" attribute for Input, deprecated "),n("code",[e._v("auto-complete")]),e._v(", #12514 (by @axetroy)")]),n("li",[e._v("Added slots-scope for Form to display validation information, #12715 (by @YamenSharaf)")])]),n("h3",{attrs:{id:"2-4-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.6")]),n("p",[n("em",[e._v("2018-08-09")])]),n("ul",[n("li",[e._v("Fixed Table not showing filter icon when "),n("code",[e._v("filters")]),e._v(" is assigned empty array, #12165")]),n("li",[e._v("Fixed Menu not saving active state when "),n("code",[e._v("collapse")]),e._v(" is changed, #12178 (by @elfman)")]),n("li",[e._v("Fixed Cascader not escaping special characters for Regexp, #12248")]),n("li",[e._v("Fixed disabled RadioButton showing box-shadow when clicked, #12262")]),n("li",[e._v("Fixed arrow key not effect when default value is "),n("code",[e._v("undefined")]),e._v(",#12322")]),n("li",[e._v("Fixed query function of Select not debounced in multi mode, #12181")]),n("li",[e._v("Fixed query keyword of Select disappearing in multi mode, #12304")]),n("li",[e._v("Fixed incorrect width of Dialog when it is displayed in full screen, #12203")]),n("li",[e._v("Fixed incorrect display of Main on IE, #12237")]),n("li",[e._v("Fixed Input triggering two form validations, #12260")]),n("li",[e._v("Fixed adding new Tree node causing nodes to disappear, #12256")]),n("li",[e._v("Fixed Tree node not deleted after dragging, #12279")]),n("li",[e._v("Fixed Popover not visible when InputNumber focuses, #12284")]),n("li",[e._v("Added "),n("code",[e._v("popper-append-to-body")]),e._v(" attribute for Autocomplete, #12241")]),n("li",[e._v("Added "),n("code",[e._v("sync")]),e._v(" modifier support for Pagination's "),n("code",[e._v("page-size")]),e._v(" attribute, #12281")])]),n("h3",{attrs:{id:"2-4-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.5")]),n("p",[n("em",[e._v("2018-07-26")])]),n("ul",[n("li",[e._v("Fixed Table setting "),n("code",[e._v("class-name")]),e._v(" does not work for "),n("code",[e._v("expand")]),e._v(" column, #12006")]),n("li",[e._v("Added "),n("code",[e._v("toggleAllSelection")]),e._v(" method for Table, #12047")]),n("li",[e._v("Fixed wrong position of suffix slot when Input contains Select, #12108")]),n("li",[e._v("Fixed "),n("code",[e._v("line-height")]),e._v(" of Option unable to set, #12120")]),n("li",[e._v("Fixed TimeSelect with default value of "),n("code",[e._v("null")]),e._v(" could not be assigned after executing "),n("code",[e._v("resetField")]),e._v(", #12010")]),n("li",[e._v("Fixed keydown event which is not arrow key does not work in Tree, #12008")]),n("li",[e._v("Fixed parent node checked in lazy mode, #12106")]),n("li",[e._v("Added "),n("code",[e._v("includeHalfChecked")]),e._v(" parameter for getCheckedNodes of Tree, #12014")])]),n("h3",{attrs:{id:"2-4-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.4")]),n("p",[n("em",[e._v("2018-07-13")])]),n("ul",[n("li",[e._v("Fixed triggering Select validation after Form resetting, #11837")]),n("li",[e._v("Fixed wrong position of Input "),n("code",[e._v("suffix")]),e._v(" slot when "),n("code",[e._v("suffix")]),e._v(" slot with "),n("code",[e._v("append")]),e._v(" slot, #11951")]),n("li",[e._v("Fixed clearable Input still displaying the clear icon when readonly, #11967")]),n("li",[e._v("Fixed Tree node checked when it's disabled, #11847")]),n("li",[e._v("Fixed Tree's "),n("code",[e._v("default-checked-keys")]),e._v(" not working, #11971")]),n("li",[e._v("Fixed "),n("code",[e._v("empty-text")]),e._v(" not visible when Tree node filtered, #11971")]),n("li",[e._v("Fixed the position of oversized "),n("code",[e._v("empty-text")]),e._v(" in Table, #11965")]),n("li",[e._v("Fixed Table row not be unhighlighted when "),n("code",[e._v("current-row-key")]),e._v(" is assigned to "),n("code",[e._v("null")]),e._v(", #11866")]),n("li",[e._v("Fixed showing filter dropdown when "),n("code",[e._v("filters")]),e._v(" is an empty array, #11864")]),n("li",[e._v("Fixed Radio's label does not stop event propagation, #11912")])]),n("h3",{attrs:{id:"2-4-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.3")]),n("p",[n("em",[e._v("2018-07-03")])]),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("allow-drop")]),e._v(" not working properly when Tree nodes have a custom height, #11797")]),n("li",[e._v("Now you can pass a parameter to the "),n("code",[e._v("clearValidate")]),e._v(" method of Form, specifying which FormItems' validation results need to be cleared, #11821")]),n("li",[e._v("Added "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" attribute for MessageBox, #11831")])]),n("h3",{attrs:{id:"2-4-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.2")]),n("p",[n("em",[e._v("2018-06-26")])]),n("ul",[n("li",[e._v("Now "),n("code",[e._v("class-name")]),e._v(" and "),n("code",[e._v("label-class-name")]),e._v(" of Table are reactive, #11626")]),n("li",[e._v("Fixed Table still highlighting clicked row when "),n("code",[e._v("highlight-current-row")]),e._v(" is "),n("code",[e._v("false")]),e._v(", #11646")]),n("li",[e._v("Fixed a style bug of ButtonGroup when it has only one "),n("code",[e._v("round")]),e._v(" or "),n("code",[e._v("circle")]),e._v(" Button, #11605")]),n("li",[e._v("Fixed style of page size Select of Pagination, #11622")]),n("li",[e._v("Fixed Menu's "),n("code",[e._v("open")]),e._v(" method error when "),n("code",[e._v("collapse")]),e._v(" is dynamically changed, #11646")]),n("li",[e._v("Added "),n("code",[e._v("activeName")]),e._v(" and "),n("code",[e._v("oldActiveName")]),e._v(" parameters to the before-leave hook of Tabs, #11713")]),n("li",[e._v("Fixed Cascader focused after outside clicked, #11588")]),n("li",[e._v("Fixed Cascader not closing when option is clicked when "),n("code",[e._v("change-on-select")]),e._v(" is true, #11623")]),n("li",[e._v("Now updating Select's value programmatically will trigger form validation, #11672")])]),n("h3",{attrs:{id:"2-4-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.1")]),n("p",[n("em",[e._v("2018-06-08")])]),n("ul",[n("li",[e._v("Removed Autocomplete's duplicate type declaration, #11388")]),n("li",[e._v("Fixed Select's dropdown arrow style in FireFox when nested in Form, #11427")]),n("li",[e._v("Fixed clear icon of Select still showing when the initial value is "),n("code",[e._v("null")]),e._v(", #11460")]),n("li",[e._v("Fixed disabled radio showing box-shadow when clicked, #11462")]),n("li",[e._v("Added "),n("code",[e._v("iconClass")]),e._v(" attribute for MessageBox, #11499")]),n("li",[e._v("Added "),n("code",[e._v("stretch")]),e._v(" attribute for Tabs, #11476")]),n("li",[e._v("Fixed rendering order issue of TabPane when Tabs is "),n("code",[e._v("lazy")]),e._v(", #11461")]),n("li",[e._v("Fixed Table not retaining current highlight row when expanded, #11464")]),n("li",[e._v("Fixed focusing state when "),n("code",[e._v("before-leave")]),e._v(" returns a resolved promise, #11386")]),n("li",[e._v("Fixed disabled Popover still creating poppers, #11426")]),n("li",[e._v("Fixed Tree's endless loop when a new node is added in lazy mode, #11430 (by @wangjingf)")]),n("li",[e._v("Added "),n("code",[e._v("closed")]),e._v(" event for Dialog, #11490")])]),n("h3",{attrs:{id:"2-4-0-fullerene"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.0 Fullerene")]),n("p",[n("em",[e._v("2018-05-28")])]),n("h4",{attrs:{id:"new-features-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("General\n"),n("ul",[n("li",[e._v("Dev tool and bundler is switched to native webpack, #11216")]),n("li",[e._v("Now you can globally set the initial z-index of popups, #11257")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("hide-loading")]),e._v(" attribute, #11260")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Now you can use the "),n("code",[e._v("size")]),e._v(" attribute on circle buttons to control their sizes, #11275")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("precision")]),e._v(" attribute, #11281")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("before-leave")]),e._v(" attribute, #11259")]),n("li",[e._v("Added "),n("code",[e._v("lazy")]),e._v(" attribute, #11167(by @Kingwl)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("sort")]),e._v(" method to manually sort the table, #11311")])])])]),n("h4",{attrs:{id:"bug-fixes-21"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-21","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fixed an issue that causes a re-render when using the Chinese IME to quickly input text, #11235 (by @STLighter)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Fixed the console error when the triggering element is Radio or Checkbox, #11265")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("Fixed the "),n("code",[e._v("to")]),e._v(" attribute not supporting dynamic update, #11286")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Fixed the console error when a File is resolved in the returned Promise of the "),n("code",[e._v("beforeUpload")]),e._v(" method, #11297 (by @qusiba)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("Fixed arrow not positioned correctly when content is empty, #11335")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Fixed incorrect input suggestions after deleting keyword quickly, #11323")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("active-change")]),e._v(" event incorrectly triggering when picker dropdown is closed, #11304")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fixed style error of oversized filter panel, #11314")]),n("li",[e._v("Fixed currently selected row not retained when the table is sorted, #11348")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Fixed single checkbox not supporting validation, #11271")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Fixed disabled Radio still being selected when pressing space key, #11303")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Fixed the "),n("code",[e._v("el-popup-parent--hidden")]),e._v(" class not removed when opening MessageBox in succession, #11371")])])])]),n("h3",{attrs:{id:"2-3-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.9")]),n("p",[n("em",[e._v("2018-05-18")])]),n("ul",[n("li",[e._v("Fixed when the source data does not have the field specified by a TableColumn's "),n("code",[e._v("prop")]),e._v(" attribute, an error would occur when the mouse moves into that column's cells, #11137")]),n("li",[e._v("The "),n("code",[e._v("lockScroll")]),e._v(" attribute of pop up components no longer adds an inline style to the parent element, but instead adds a class name, #11114")]),n("li",[e._v("Fixed the icon of Progress not displaying when its "),n("code",[e._v("status")]),e._v(" is exception, #11172")]),n("li",[e._v("Fixed options' "),n("code",[e._v("disabled")]),e._v(" attribute not working in filterable Cascader's filter result list, #11185")]),n("li",[e._v("Fixed an issue where Table's expanded row cannot be collapsed if the data source is updated after its expansion, #11186")]),n("li",[n("code",[e._v("setCurrentKey")]),e._v(" of Tree now accepts "),n("code",[e._v("null")]),e._v(" as its param to cancel the currently highlighted node, #11205")])]),n("h3",{attrs:{id:"2-3-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.8")]),n("p",[n("em",[e._v("2018-05-11")])]),n("ul",[n("li",[e._v("Fixed DatePicker panel jumping to the current month after picking a date in a non-current month when "),n("code",[e._v("type")]),e._v(" is dates, #10973")]),n("li",[e._v("Fixed clearable Input still displaying the clear icon when readonly, #10912")]),n("li",[e._v("Fixed closing the DatePicker panel without changing the value incorrectly triggering the "),n("code",[e._v("change")]),e._v(" event, #11017")]),n("li",[e._v("Fixed keyboard navigation not working properly when Select has grouped options, #11058")]),n("li",[e._v("Added "),n("code",[e._v("prefix")]),e._v(" named slot for Select, #11063")]),n("li",[e._v("Added "),n("code",[e._v("clearValidate")]),e._v(" method for FormItem, #11076")]),n("li",[e._v("Added "),n("code",[e._v("checkOnClickNode")]),e._v(" attribute for Tree, #11111")])]),n("h3",{attrs:{id:"2-3-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.7")]),n("p",[n("em",[e._v("2018-04-29")])]),n("ul",[n("li",[e._v("Fixed Table not updating its header widths when the scroll bar disappears due to filtering, #10834")]),n("li",[e._v("Fixed clearable Input still showing the clear icon when its initial value is "),n("code",[e._v("null")]),e._v(", #10912")]),n("li",[e._v("Fixed incorrect trigger of the "),n("code",[e._v("active-change")]),e._v(" event after changing ColorPicker's binding value programatically, #10903 (by @zhangbobell)")]),n("li",[e._v("Fixed filterable Select causing an infinite loop when navigating options using keyboard if all options are disabled, #10945")])]),n("h3",{attrs:{id:"2-3-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.6")]),n("p",[n("em",[e._v("2018-04-21")])]),n("ul",[n("li",[e._v("Fixed wrong behavior of Tree's "),n("code",[e._v("allow-drop")]),e._v(" callback when "),n("code",[e._v("type")]),e._v(" parameter is used, #10821")]),n("li",[e._v("Now you can properly enter keywords in filterable single Select in IE11, #10822")]),n("li",[e._v("Fixed single Select incorrectly triggering "),n("code",[e._v("blur")]),e._v(" event after clicking an option, #10822")])]),n("h3",{attrs:{id:"2-3-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.5")]),n("p",[n("em",[e._v("2018-04-20")])]),n("ul",[n("li",[e._v("Fixed incorrect highlights in DatePicker panel when "),n("code",[e._v("type")]),e._v(" is week, #10712")]),n("li",[e._v("Fixed InputNumber being empty when its initial value is 0, #10714")]),n("li",[e._v("Added "),n("code",[e._v("automatic-dropdown")]),e._v(" attribute for Select, #10042 (by @Seebiscuit)")]),n("li",[e._v("Fixed disabled Rate's value still being updated by navigation keys, #10726 (by @Richard-Choooou)")]),n("li",[e._v("Now DatePicker's "),n("code",[e._v("type")]),e._v(" attribute can be "),n("code",[e._v("'dates'")]),e._v(", where you can pick multiple dates in one picker, #10650 (by @Mini256)")]),n("li",[e._v("Added "),n("code",[e._v("prev-click")]),e._v(" and "),n("code",[e._v("next-click")]),e._v(" events for Pagination, #10755")]),n("li",[e._v("Added "),n("code",[e._v("pager-count")]),e._v(" attribute for Pagination, #10493 (by @chongjohn716)")]),n("li",[e._v("Added "),n("code",[e._v("type")]),e._v(" as the 3rd param of Tree's "),n("code",[e._v("allow-drop")]),e._v(" attribute callback, #10792")]),n("li",[e._v("Now we use ResizeObserver to detect DOM element resizing, #10779")])]),n("h3",{attrs:{id:"2-3-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.4")]),n("p",[n("em",[e._v("2018-04-12")])]),n("ul",[n("li",[e._v("Deleted duplicate "),n("code",[e._v("showTimeout")]),e._v(" attribute in SubMenu's TypeScript declaration, #10566 (by @kimond)")]),n("li",[e._v("Now you can customize Transfer's data item using scoped slot, #10577")]),n("li",[e._v("Fixed clicking disabled prev and next button of Pagination still triggers "),n("code",[e._v("current-change")]),e._v(" event, #10628")]),n("li",[e._v("Fixed Textarea displaying "),n("code",[e._v("undefined")]),e._v(" in SSR when its value is not set, #10630")]),n("li",[e._v("Fixed disabled TabItem style when "),n("code",[e._v("type")]),e._v(" is border-card, #10640")]),n("li",[e._v("Added "),n("code",[e._v("$index")]),e._v(" as "),n("code",[e._v("formatter")]),e._v("'s fourth param of Table, #10645")]),n("li",[e._v("Fixed CheckboxButton not exported in TypeScript declaration, #10666")])]),n("h3",{attrs:{id:"2-3-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.3")]),n("p",[n("em",[e._v("2018-04-04")])]),n("ul",[n("li",[e._v("Added "),n("code",[e._v("shadow")]),e._v(" attribute for Card, #10418 (by @YunYouJun)")]),n("li",[e._v("Fixed Badge being hidden when "),n("code",[e._v("value")]),e._v(" is "),n("code",[e._v("0")]),e._v(", #10470")]),n("li",[e._v("Fixed some bugs of draggable Tree, #10474 #10494")]),n("li",[e._v("Added "),n("code",[e._v("placement")]),e._v(" for Autocomplete, #10475")]),n("li",[e._v("Now "),n("code",[e._v("default-time")]),e._v(" attribute also works in non-range DateTimePicker, #10321 (by @RickMacTurk)")]),n("li",[e._v("Removed the blue outline of TabItem after the browser blurs or is minimized, #10503")]),n("li",[e._v("Added "),n("code",[e._v("popper-append-to-body")]),e._v(" attribute for SubMenu, #10515")]),n("li",[e._v("Removed visual feedback when hovering on non-link BreadcrumbItem, #10551")]),n("li",[e._v("Fixed InputNumber's "),n("code",[e._v("change")]),e._v(" event to ensure the component's binding value is updated in the event handler, #10553")])]),n("h3",{attrs:{id:"2-3-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.2")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("Fixed an Autocomplete regression, #10442")])]),n("h3",{attrs:{id:"2-3-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.1")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("Fixed a regression that "),n("code",[e._v("type")]),e._v(" of Input is not passed down to the native input element, #10415")]),n("li",[e._v("Added "),n("code",[e._v("blur")]),e._v(" method for Select, #10416")])]),n("h3",{attrs:{id:"2-3-0-diamond"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamond","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.0 Diamond")]),n("p",[n("em",[e._v("2018-03-28")])]),n("h4",{attrs:{id:"new-features-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Now "),n("code",[e._v("formatter")]),e._v(" of TableColumn can be dynamically updated, #10184 (by @elfman)")]),n("li",[e._v("Added "),n("code",[e._v("select-on-indeterminate")]),e._v(" attribute, #9924 (by @syn-zeta)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("collapse-transition")]),e._v(" attribute, #8809 (by @limichange)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("select")]),e._v(" method, #10229")]),n("li",[e._v("Added "),n("code",[e._v("blur")]),e._v(" method, #10356")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("predefine")]),e._v(" attribute, #10170 (by @elfman)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("draggable")]),e._v(", "),n("code",[e._v("allow-drop")]),e._v(" and "),n("code",[e._v("allow-drag")]),e._v(" attributes, and "),n("code",[e._v("node-drag-start")]),e._v(", "),n("code",[e._v("node-drag-enter")]),e._v(", "),n("code",[e._v("node-drag-leave")]),e._v(", "),n("code",[e._v("node-drag-over")]),e._v(", "),n("code",[e._v("node-drag-end")]),e._v(" and "),n("code",[e._v("node-drop")]),e._v(" events, #9251 #10372 (by @elfman)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[n("code",[e._v("validate")]),e._v(" method now has a second parameter, containing information of form items that failed the validation, #10279")]),n("li",[e._v("Added "),n("code",[e._v("validate")]),e._v(" event, #10351")])])]),n("li",[e._v("Progress\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("color")]),e._v(" attribute, #10352 (by @YunYouJun)")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("circle")]),e._v(" attribute, #10359 (by @YunYouJun)")])])])]),n("h4",{attrs:{id:"bug-fixes-22"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-22","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Fixed label of FormItem not align with mixed Input, #10189")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Now collapsed Menu will only show the Tooltip when the "),n("code",[e._v("title")]),e._v(" slot of MenuItem is set, #10193 (by @PanJiaChen)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("current-change")]),e._v(" event wrongly triggering without user interaction, #10247")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Now the date and time value in the dropdown panel are correctly formatted based on the "),n("code",[e._v("format")]),e._v(" attribute, #10174(by @remizovvv)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("accept")]),e._v(" attribute not working when "),n("code",[e._v("drag")]),e._v(" is true, #10278")])])])]),n("h3",{attrs:{id:"2-2-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.2")]),n("p",[n("em",[e._v("2018-03-14")])]),n("ul",[n("li",[e._v("Added "),n("code",[e._v("clear")]),e._v(" event for Input, #9988 (by @blackmiaool)")]),n("li",[e._v("Now manual input of ColorPicker supports "),n("code",[e._v("hsl")]),e._v(", "),n("code",[e._v("hsv")]),e._v(" and "),n("code",[e._v("rgb")]),e._v(" modes, #9991")]),n("li",[e._v("Fixed DatePicker not triggering "),n("code",[e._v("change")]),e._v(" event when its initial value is cleared, #9986")]),n("li",[e._v("Now icon class related attributes of Rate support dynamic updates, #10003")]),n("li",[e._v("Fixed Table with fixed columns not updating its height correctly if "),n("code",[e._v("max-height")]),e._v(" is set, #10034")]),n("li",[e._v("Now DatePicker's range mode supports reverse selection (clicking the end date, then clicking the start date), #8156 (by @earlymeme)")]),n("li",[e._v("Added "),n("code",[e._v("disabled")]),e._v(" attribute for Pagination, #10006")]),n("li",[e._v("Added "),n("code",[e._v("after-enter")]),e._v(" and "),n("code",[e._v("after-leave")]),e._v(" events for Popover, #10047")]),n("li",[e._v("Fixed Select not triggering validation when user selects an option after executing "),n("code",[e._v("resetFields")]),e._v(" of Form, #10105")]),n("li",[e._v("Fixed incorrect widths of fixed columns of Table in some cases, #10130")]),n("li",[e._v("Fixed MessageBox inheriting the "),n("code",[e._v("title")]),e._v(" attribute of its previous instance when called without "),n("code",[e._v("title")]),e._v(", #10126 (by @Pochodaydayup)")]),n("li",[e._v("Added "),n("code",[e._v("input-size")]),e._v(" attribute for Slider, #10154")]),n("li",[e._v("Added "),n("code",[e._v("left-check-change")]),e._v(" and "),n("code",[e._v("right-check-change")]),e._v(" events for Transfer, #10156")])]),n("h3",{attrs:{id:"2-2-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.1")]),n("p",[n("em",[e._v("2018-03-02")])]),n("ul",[n("li",[e._v("Fixed Aside, Header and Footer shrinking in some layout, #9812")]),n("li",[e._v("Fixed Table with a "),n("code",[e._v("height")]),e._v(" attribute not rendering in SSR, #9876")]),n("li",[e._v("Fixed expandable Table not calculating its height when a row is expanded, #9848")]),n("li",[e._v("Fixed "),n("code",[e._v("change")]),e._v(" event not trigger when manually typing date in DateTimePicker, #9913")]),n("li",[e._v("Fixed Select showing its options when the input box is right-clicked, #9894 (by @openks)")]),n("li",[e._v("Added "),n("code",[e._v("tooltip-class")]),e._v(" attribute for Slider, #9957")]),n("li",[e._v("Now Select will stay focused after selection, #9857 (by @Seebiscuit)")]),n("li",[e._v("Added "),n("code",[e._v("target-order")]),e._v(" attribute for Transfer, #9960")])]),n("h3",{attrs:{id:"2-2-0-graphite"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.0 Graphite")]),n("p",[n("em",[e._v("2018-02-12")])]),n("h4",{attrs:{id:"new-features-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("popper-class")]),e._v(" and "),n("code",[e._v("disabled")]),e._v(" attributes for SubMenu, #9604 #9771")]),n("li",[e._v("Horizontal Menu now supports multi-layered SubMenu, #9741")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("node-contextmenu")]),e._v(" event, #9678")]),n("li",[e._v("Now you can customize node template using scoped slot, #9686")]),n("li",[e._v("Added "),n("code",[e._v("getNode")]),e._v(", "),n("code",[e._v("remove")]),e._v(", "),n("code",[e._v("append")]),e._v(", "),n("code",[e._v("insertBefore")]),e._v(", "),n("code",[e._v("insertAfter")]),e._v(", "),n("code",[e._v("getCheckedKeys")]),e._v(", "),n("code",[e._v("getHalfCheckedNodes")]),e._v(", "),n("code",[e._v("getHalfCheckedKeys")]),e._v(" methods and "),n("code",[e._v("check")]),e._v(" event, #9718 #9730")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("clearQuery")]),e._v(" method, #9753")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("popper-append-to-body")]),e._v(" attribute, #9782")])])])]),n("h4",{attrs:{id:"bug-fixes-23"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-23","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fixed clicking expanding icon of an expandable row triggers "),n("code",[e._v("row-click")]),e._v(" event, #9654")]),n("li",[e._v("Fixed layout not update when column width is changed by user dragging, #9668")]),n("li",[e._v("Fixed style issue when summary row co-exists with fixed columns, #9667")])])]),n("li",[e._v("Container\n"),n("ul",[n("li",[e._v("Fixed container components not stretching in IE11, #9655")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Fixed Loading not showing when the value of "),n("code",[e._v("v-loading")]),e._v(" is changed to true in the "),n("code",[e._v("mounted")]),e._v(" hook, #9722")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Fixed two native click events are triggered when Switch is clicked, #9760")])])])]),n("h3",{attrs:{id:"2-1-0-charcoal"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.1.0 Charcoal")]),n("p",[n("em",[e._v("2018-01-31")])]),n("h4",{attrs:{id:"new-features-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("focus")]),e._v(" and "),n("code",[e._v("blur")]),e._v(" events, #9184 (by @viewweiwu)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("The "),n("code",[e._v("filter-method")]),e._v(" now has a third param "),n("code",[e._v("column")]),e._v(", #9196 (by @liyanlong)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("prefix-icon")]),e._v(" and "),n("code",[e._v("clear-icon")]),e._v(" attributes, #9237 (by @AdamSGit)")]),n("li",[e._v("Added "),n("code",[e._v("default-time")]),e._v(" attribute, #9094 (by @nighca)")]),n("li",[n("code",[e._v("value-format")]),e._v(" now supports "),n("code",[e._v("timestamp")]),e._v(", #9319 (by @wacky6)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Now the binding value can be "),n("code",[e._v("undefined")]),e._v(", #9361")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("auto-complete")]),e._v(" attribute, #9388")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("disabled")]),e._v(" attribute, #9529")]),n("li",[e._v("Added "),n("code",[e._v("validateOnRuleChange")]),e._v(" attribute, #8141")])])]),n("li",[e._v("Notificaition\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("closeAll")]),e._v(" method, #9514")])])])]),n("h4",{attrs:{id:"bug-fixes-24"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-24","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Fixed value resetting when typing decimal point, #9116")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Fixed dropdown menu incorrect positioning when the page only has a horizontal scrollbar in some browsers, #9138 (by @banzhuanmei)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fixed an error in calculating number of fixed columns after the column data changes, #9188(by @kolesoffac)")]),n("li",[e._v("Fixed the border of the last column of the grouped header not properly displayed, #9326")]),n("li",[e._v("Fixed incorrect positioning of table header in Safari, #9327")]),n("li",[e._v("Fixed expanded row collapsing when the table data changes, #9462")]),n("li",[e._v("Fixed unnecessary multiple renders in some conditions, #9426")]),n("li",[e._v("Fixed column width calculation error when "),n("code",[e._v("width")]),e._v(" of TableColumn changes, #9426")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Fixed Loading not hiding correctly in some conditions, #9313")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("focus")]),e._v(" method not working in range mode, #9437")]),n("li",[e._v('Fixed clicking the "now" button still selecting the current date even if it is disabled, #9470 (by @wacky6)')]),n("li",[e._v("Fixed date clamping when navigating, #9577 (by @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Fixed style error in IE 11, #9454")])])])]),n("h4",{attrs:{id:"breaking-changes-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("The popup menu in "),n("code",[e._v("collapse")]),e._v(" mode now appends directly to "),n("code",[e._v("body")]),e._v(", so that it is visible when nested in Aside, #9263")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Now checking the checkboxes in multi-selection Table doesn't trigger "),n("code",[e._v("row-click")]),e._v(" event, #9467")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("The "),n("code",[e._v("z-index")]),e._v(" of non-fullscreen loading mask is changed to 2000. The "),n("code",[e._v("z-index")]),e._v(" of fullscreen loading mask will update dynamically with the popup components, #9522")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("show-timeout")]),e._v(" and "),n("code",[e._v("hide-timeout")]),e._v(" attributes now only works when trigger is "),n("code",[e._v("hover")]),e._v(", #9573")])])])]),n("h3",{attrs:{id:"2-0-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.11")]),n("p",[n("em",[e._v("2018-01-08")])]),n("ul",[n("li",[e._v("Fixed border color issue of Select when in "),n("code",[e._v("prepend")]),e._v(" or "),n("code",[e._v("append")]),e._v(" slot of Input, #9089")]),n("li",[e._v("Fixed "),n("code",[e._v("remove-tag")]),e._v(" event's parameter of Select, #9090")]),n("li",[e._v("Added "),n("code",[e._v("show-timeout")]),e._v(" and "),n("code",[e._v("hide-timeout")]),e._v(" attributes for SubMenu, #8934 (by @HugoLew)")]),n("li",[e._v("Fixed missing Tooltip style of "),n("code",[e._v("show-overflow-tooltip")]),e._v(" when Table is imported on demand, #9130")]),n("li",[e._v("Fixed Table column's sorting malfunctioning after "),n("code",[e._v("clearSort")]),e._v(" is executed on that column, #9100 (by @zEmily)")]),n("li",[e._v("i18n config file for Czech is renamed from "),n("code",[e._v("cz")]),e._v(" to "),n("code",[e._v("cs-CZ")]),e._v(", #9164")])]),n("h3",{attrs:{id:"2-0-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.10")]),n("p",[n("em",[e._v("2017-12-29")])]),n("ul",[n("li",[e._v("Fixed wrong max height calculation of Table when fixed column and summary row co-exist, #9026")]),n("li",[e._v("Fixed uncompiled color style of empty text in Table, #9028")]),n("li",[e._v("Now DatePicker only emits "),n("code",[e._v("change")]),e._v(" event when value is truly changed, #9029 (by @remizovvv)")]),n("li",[e._v("Added "),n("code",[e._v("tabindex")]),e._v(" attribute for Input, #9041 (by @dicklwm)")])]),n("h3",{attrs:{id:"2-0-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.9🎄")]),n("p",[n("em",[e._v("2017-12-24")])]),n("ul",[n("li",[e._v("Added "),n("code",[e._v("before-remove")]),e._v(" hook function for Upload, #8788 (by @firesh)")]),n("li",[e._v("Fixed initial value of "),n("code",[e._v("error")]),e._v(" not working for FormItem, #8840")]),n("li",[e._v("Now Loading directive supports custom class name by assigning "),n("code",[e._v("element-loading-custom-class")]),e._v(" attribute, #8826 (by @earlymeme)")]),n("li",[e._v("Fixed CarouselItem becoming invisible when data is asynchronously updated, #8921")]),n("li",[e._v("Added "),n("code",[e._v("renderAfterExpand")]),e._v(" attribute for Tree, #8972")])]),n("h3",{attrs:{id:"2-0-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.8")]),n("p",[n("em",[e._v("2017-12-12")])]),n("ul",[n("li",[e._v("Added Spanish documentation")]),n("li",[e._v("Fixed "),n("code",[e._v("show-timeout")]),e._v(" of Dropdown not working when trigger is click, #8734 (by @presidenten)")]),n("li",[e._v("Fixed Form validation timing for rules whose trigger is blur, #8776")]),n("li",[e._v("Fixed blur event of ranged DatePicker, #8784")]),n("li",[n("code",[e._v("format")]),e._v(" of TimePicker now supports AM/PM, #8620 (by @firesh)")])]),n("h3",{attrs:{id:"2-0-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.7")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("Fixed disabled text button style, #8570")])]),n("h3",{attrs:{id:"2-0-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.6")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("Fixed style bug of Table's sorting icons, #8405")]),n("li",[e._v("Fixed trigger mechanism for Popover when its "),n("code",[e._v("trigger")]),e._v(" is manual, #8467")]),n("li",[e._v("Added "),n("code",[e._v("prefix-icon")]),e._v(" and "),n("code",[e._v("suffix-icon")]),e._v(" attributes for Autocomplete, #8446 (by @liyanlong)")]),n("li",[e._v("Added "),n("code",[e._v("separator")]),e._v(" attribute for Cascader, #8501")]),n("li",[e._v("Added "),n("code",[e._v("clearable")]),e._v(" attribute for Input, #8509 (by @lbogdan)")]),n("li",[e._v("Added "),n("code",[e._v("background")]),e._v(" attribute for Pagination, #8553")])]),n("h3",{attrs:{id:"2-0-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.5")]),n("p",[n("em",[e._v("2017-11-17")])]),n("ul",[n("li",[e._v("Fixed Popover, Tree, Breadcrumb and Cascader regression in 2.0.4, #8188 #8217 #8283")]),n("li",[e._v("Fixed memory leak of clickoutside directive, #8168 #8225 (by @badpunman @STLighter)")]),n("li",[e._v("Fixed multiple Select height when its value is cleared, #8317 (by @luciy)")]),n("li",[e._v("Added "),n("code",[e._v("collapse-tags")]),e._v(" attribute for multiple Select to replace tags with one line of text, #8190")]),n("li",[e._v("Fixed high CPU consumption caused by hidden Table, #8351")]),n("li",[e._v("Now you can use "),n("code",[e._v("doLayout")]),e._v(" method of Table to update its layout, #8351")])]),n("h3",{attrs:{id:"2-0-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.4")]),n("p",[n("em",[e._v("2017-11-10")])]),n("ul",[n("li",[e._v("Improved accessibility for Cascader, Dropdown, Message, Notification, Popover, Tooltip and Tree")]),n("li",[e._v("Fixed Container resize when the width of viewport decreases, #8042")]),n("li",[e._v("Fixed Tree's "),n("code",[e._v("updateKeyChildren")]),e._v(" incorrectly deleting child nodes, #8100")]),n("li",[e._v("Fixed bordered CheckboxButton's height when nested in a Form, #8100")]),n("li",[e._v("Fixed Menu's parsing error for custom colors, #8153 (by @zhouyixiang)")])]),n("h3",{attrs:{id:"2-0-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.3")]),n("p",[n("em",[e._v("2017-11-03")])]),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("editable")]),e._v(" and "),n("code",[e._v("readonly")]),e._v(" attributes for ranged DatePicker, #7922")]),n("li",[e._v("Fixed style error of nested Tabs, #7941")]),n("li",[e._v("Fixed style error of the last Step of vertical Steps, #7980")]),n("li",[e._v("Fixed trigger timing of "),n("code",[e._v("current-change")]),e._v(" event for Pagination, #7995")]),n("li",[e._v("Fixed unregistered Tooltip in Menu, #7995")])]),n("h3",{attrs:{id:"2-0-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.2")]),n("p",[n("em",[e._v("2017-10-31")])]),n("ul",[n("li",[e._v("Now right-clicking the buttons of InputNumber won't change its value, #7817")]),n("li",[n("code",[e._v("validate")]),e._v(" method of Form can now wait for asynchronous validations before executing its callback, #7774 (by @Allenice)")]),n("li",[e._v("Fixed range selection of DatePicker not working in Chromium 53-57 browsers, #7838")]),n("li",[e._v("Fixed missing preview and delete icons of Upload when its "),n("code",[e._v("list-type")]),e._v(" is picture-card, #7857")]),n("li",[e._v("Added "),n("code",[e._v("sort-by")]),e._v(" attribute for TableColumn, #7828 (by @wangfengming)")]),n("li",[e._v("Fixed DatePicker sometimes displaying wrong year number when selecting the first week in week mode, #7860 (by @hh23485)")]),n("li",[e._v("Fixed icon style error of vertical Steps, #7891")]),n("li",[e._v("The hot area for node arrows in Tree is expanded, #7891")])]),n("h3",{attrs:{id:"2-0-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.1")]),n("p",[n("em",[e._v("2017-10-28")])]),n("ul",[n("li",[e._v("Fixed style error of RadioButton and CheckboxButton, #7793")]),n("li",[e._v("Fixed TimePicker not respond to mouse scroll in some conditions, #7811")]),n("li",[e._v("Fixed incomplete styles of some components when imported on demand, #7811")])]),n("h3",{attrs:{id:"2-0-0-carbon"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.0 Carbon")]),n("p",[n("em",[e._v("2017-10-27")])]),n("h4",{attrs:{id:"new-features-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("General\n"),n("ul",[n("li",[e._v("A new theme: "),n("code",[e._v("theme-chalk")])]),n("li",[e._v("Accessibility of the following components are improved: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),n("li",[e._v("Added TypeScript typings")]),n("li",[e._v("All existing icons are redesigned. Some new icons are added")]),n("li",[e._v("Added a series of breakpoint-based utility classes that hide elements when the viewport size meets certain conditions")]),n("li",[e._v("Added layout components: Container, Header, Aside, Main, Footer")]),n("li",[e._v("Now you can configure component sizes globally. When importing Element, you can add a global config object with a "),n("code",[e._v("size")]),e._v(" prop to configure default sizes for all components.")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("round")]),e._v(" attribute. It's used for round-cornered Buttons #6643")])])]),n("li",[e._v("TimeSelect\n"),n("ul",[n("li",[e._v("Now can be navigated by "),n("code",[e._v("Up")]),e._v(" and "),n("code",[e._v("Down")]),e._v(", and hitting "),n("code",[e._v("Enter")]),e._v(" selects the time #6023")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Now can be navigated by arrow keys, and hitting "),n("code",[e._v("Enter")]),e._v(" selects the time #6050")]),n("li",[e._v("Added "),n("code",[e._v("start-placeholder")]),e._v(" and "),n("code",[e._v("end-placeholder")]),e._v(". They're placeholders for the two input boxes in range mode #7169")]),n("li",[e._v("Added "),n("code",[e._v("arrow-control")]),e._v(" attribute to spin the time with arrows #7438")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Now child nodes don't render before the first expand #6257")]),n("li",[e._v("Added "),n("code",[e._v("check-descendants")]),e._v(" attribute. It determines if child nodes are checked when checking their parent node in "),n("code",[e._v("lazy")]),e._v(" mode #6235")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("size")]),e._v(" attribute #7203")])])]),n("li",[e._v("Datepicker\n"),n("ul",[n("li",[e._v("Now "),n("code",[e._v("timeFormat")]),e._v(" can format the TimePicker when type is set to "),n("code",[e._v("datetimerange")]),e._v(" #6052")]),n("li",[e._v("Added "),n("code",[e._v("start-placeholder")]),e._v(" and "),n("code",[e._v("end-placeholder")]),e._v(". They're placeholders for the two input boxes in range mode #7169")]),n("li",[e._v("Added "),n("code",[e._v("value-format")]),e._v(" attribute to customize the format of the binding value, #7367")]),n("li",[e._v("Added "),n("code",[e._v("unlink-panels")]),e._v(" attribute to unlink the two date panels when selecting a date range")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("closeOnHashChange")]),e._v(" attribute #6043")]),n("li",[e._v("Added "),n("code",[e._v("center")]),e._v(" attribute so that the content can be centered #7029")]),n("li",[e._v("Added "),n("code",[e._v("roundButton")]),e._v(" attribute to display round Buttons #7029")]),n("li",[e._v("Added "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" attribute. When set to "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" will be parsed as HTML string"),n("sup",[e._v("*")]),e._v(" #6043")]),n("li",[e._v("Added "),n("code",[e._v("inputType")]),e._v(" attribute to assign type for the inner input box, #7651")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("width")]),e._v("、"),n("code",[e._v("fullscreen")]),e._v("、"),n("code",[e._v("append-to-body")]),e._v(" attributes. Now Dialog can be nested")]),n("li",[e._v("Added "),n("code",[e._v("center")]),e._v(" attribute so that the content can be centered #7042")]),n("li",[e._v("Added "),n("code",[e._v("focus-after-closed")]),e._v("、"),n("code",[e._v("focus-after-open")]),e._v(" to improve accessibility #6511")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Now you can type colors in the input box #6167")]),n("li",[e._v("Added "),n("code",[e._v("size")]),e._v(" and "),n("code",[e._v("disabled")]),e._v(" attributes #7026")]),n("li",[e._v("Added "),n("code",[e._v("popper-class")]),e._v(" attribute #7351")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("Now color of the icons can be overridden by CSS #6207")]),n("li",[e._v("Added "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" attribute. When set to "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" will be parsed as HTML string"),n("sup",[e._v("*")]),e._v(" #6207")]),n("li",[e._v("Added "),n("code",[e._v("center")]),e._v(" attribute so that the content can be centered #6875")])])]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("position")]),e._v(" attribute to configure where Notification pops up #6231")]),n("li",[e._v("Added "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" attribute. When set to "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" will be parsed as HTML string"),n("sup",[e._v("*")]),e._v(" #6231")]),n("li",[e._v("Added "),n("code",[e._v("showClose")]),e._v(" attribute to hide the close button #6402")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("show-score")]),e._v(" attribute to determine if current score is displayed #6295")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("tab-position")]),e._v(" attribute #6096")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("border")]),e._v(" and "),n("code",[e._v("size")]),e._v(" attributes #6690")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("border")]),e._v(" and "),n("code",[e._v("size")]),e._v(" attributes #6690")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("center")]),e._v(" attribute so that the content can be centered #6876")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" and "),n("code",[e._v("active-text-color")]),e._v(" attributes #7064")]),n("li",[e._v("Added "),n("code",[e._v("open")]),e._v(" and "),n("code",[e._v("close")]),e._v(" methods to open and close SubMenu programmatically, #7412")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("inline-message")]),e._v(" attribute to determine if the validation message is displayed in inline style #7032")]),n("li",[e._v("Added "),n("code",[e._v("status-icon")]),e._v(" attribute to display a feedback icon when validated #7032")]),n("li",[e._v("Form and FormItem now have a "),n("code",[e._v("size")]),e._v(" attribute. Inner components will inherit this size if not specified on themselves, #7428")]),n("li",[n("code",[e._v("validate")]),e._v(" method will now return a promise if the callback is omitted, #7405")]),n("li",[e._v("Added "),n("code",[e._v("clearValidate")]),e._v(" method for clearing validating results for all form items, #7623")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("suffix")]),e._v(" and "),n("code",[e._v("prefix")]),e._v(" named slots, "),n("code",[e._v("suffixIcon")]),e._v(" and "),n("code",[e._v("prefixIcon")]),e._v(" attributes to add contents inside the input box #7032")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("separator-class")]),e._v(" attribute to support icons as item separators #7203")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("simple")]),e._v(" attribute to activate simple-styled Steps #7274")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("prev-text")]),e._v(" and "),n("code",[e._v("next-text")]),e._v(" attributes to customize texts of previous page and next page #7005")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Now you can customize spinner icon and background color with "),n("code",[e._v("spinner")]),e._v(" and "),n("code",[e._v("background")]),e._v(" prop, #7390")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("debounce")]),e._v(" attribute, #7413")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("limit")]),e._v(" and "),n("code",[e._v("on-exceed")]),e._v(" attributes to limit the amount of files, #7405")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("time-arrow-control")]),e._v(" attribute to activate "),n("code",[e._v("arrow-control")]),e._v(" of the nesting TimePicker, #7438")])])]),n("li",[e._v("Layout\n"),n("ul",[n("li",[e._v("Added a new breakpoint "),n("code",[e._v("xl")]),e._v(" for viewport wider than 1920px")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("span-method")]),e._v(" attribute for merging cells")]),n("li",[e._v("Added "),n("code",[e._v("clearSort")]),e._v(" method to clear sorting programmatically")]),n("li",[e._v("Added "),n("code",[e._v("clearFilter")]),e._v(" method to clear filter programmatically")]),n("li",[e._v("For expandable rows, when a row is expanded, a "),n("code",[e._v(".expanded")]),e._v(" class will be added to its class list, so that you can customize its style")]),n("li",[e._v("Added "),n("code",[e._v("size")]),e._v(" attribute")]),n("li",[e._v("Added "),n("code",[e._v("toggleRowExpansion")]),e._v(" method to expand or collapse expandable rows programmatically")]),n("li",[e._v("Added "),n("code",[e._v("cell-class-name")]),e._v(" attribute to assign class name for cells")]),n("li",[e._v("Added "),n("code",[e._v("cell-style")]),e._v(" attribute to style cells")]),n("li",[e._v("Added "),n("code",[e._v("header-row-class-name")]),e._v(" attribute to assign class name for header rows")]),n("li",[e._v("Added "),n("code",[e._v("header-row-style")]),e._v(" attribute to style header rows")]),n("li",[e._v("Added "),n("code",[e._v("header-cell-class-name")]),e._v(" attribute to assign class name for header cells")]),n("li",[e._v("Added "),n("code",[e._v("header-cell-style")]),e._v(" attribute to style header cells")]),n("li",[e._v("TableColumn's "),n("code",[e._v("prop")]),e._v(" attribute now accepts "),n("code",[e._v("object[key]")]),e._v(" notations")]),n("li",[e._v("Added "),n("code",[e._v("index")]),e._v(" attribute for TableColumn to customize row indices")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Added "),n("code",[e._v("reserve-keyword")]),e._v(" attribute for reserving current search keyword after selecting an option")])])])]),n("h4",{attrs:{id:"bug-fixes-25"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-25","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("v-model")]),e._v(" returning the second day of the selected week in week mode #6038")]),n("li",[e._v("Fixed the first input being cleared in "),n("code",[e._v("daterange")]),e._v(" type #6021")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Fixed DateTimePicker and TimePicker affecting each other when picked #6090")]),n("li",[e._v("Fixed hour and second can be beyond limit when selecting time #6076")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Fixed "),n("code",[e._v("v-model")]),e._v(" not update correctly when blurred #6023")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Fixed texts having blurry edges when opening and closing nesting dropdowns #6088")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Improved performance. Now Vue dev-tool won't crash when a large number of Selects are destroyed #6151")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fixed a bug that Table remains hiding when its parent element appears from "),n("code",[e._v("display: none")])]),n("li",[e._v("Fixed Table expanding its width when its parent element has "),n("code",[e._v("display: flex")])]),n("li",[e._v("Fixed a bug that fixed columns of a Table with "),n("code",[e._v("append")]),e._v(" slot would disappear when data is dynamically fetched")]),n("li",[e._v("Fixed "),n("code",[e._v("expand-row-keys")]),e._v(" attribute not working with initial value")]),n("li",[e._v("Fixed filter failing when "),n("code",[e._v("data")]),e._v(" updates")]),n("li",[e._v("Fixed a calculation error of fixed columns layout with grouped headers")]),n("li",[e._v("Fixed a dynamic "),n("code",[e._v("max-height")]),e._v(" bug")]),n("li",[e._v("Fixed some style calculation errors")])])])]),n("h4",{attrs:{id:"breaking-changes-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("General\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("theme-default")])]),n("li",[e._v("Compatible with Vue 2.5.2+ and IE 10+")]),n("li",[n("code",[e._v("change")]),e._v(" event of form components and "),n("code",[e._v("current-change")]),e._v(" event of Pagination now only trigger on user interaction")]),n("li",[n("code",[e._v("size")]),e._v(" attribute of Button and form components now accept "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" and "),n("code",[e._v("mini")])]),n("li",[e._v("To facilitate the use of third-party icons, "),n("code",[e._v("icon")]),e._v(" attribute of Button and Steps, "),n("code",[e._v("prefix-icon")]),e._v(" and "),n("code",[e._v("suffix-icon")]),e._v(" attributes of Input now require a full class name")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("size")]),e._v(" attribute. Now the size of Dialog can be configured by "),n("code",[e._v("width")]),e._v(" and "),n("code",[e._v("fullscreen")])]),n("li",[e._v("Now the visibility of Dialog cannot be controlled by "),n("code",[e._v("v-model")])])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[n("code",[e._v("text-template")]),e._v(" is renamed to "),n("code",[e._v("score-template")])])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("menu-align")]),e._v(" is renamed to "),n("code",[e._v("placement")]),e._v(". Now it supports more positions")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[n("code",[e._v("footer-format")]),e._v(" is renamed to "),n("code",[e._v("format")])])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Attributes starting with "),n("code",[e._v("on-*")]),e._v(" will be parsed to events in JSX, making all "),n("code",[e._v("on-*")]),e._v(" attributes of Switch not\nable to work in JSX. So "),n("code",[e._v("on-*")]),e._v(" attributes are renamed to "),n("code",[e._v("active-*")]),e._v(", and accordingly "),n("code",[e._v("off-*")]),e._v(" attributes are renamed to "),n("code",[e._v("inactive-*")]),e._v(". This change affects the following attributes: "),n("code",[e._v("on-icon-class")]),e._v(", "),n("code",[e._v("off-icon-class")]),e._v(", "),n("code",[e._v("on-text")]),e._v(", "),n("code",[e._v("off-text")]),e._v(", "),n("code",[e._v("on-color")]),e._v(", "),n("code",[e._v("off-color")]),e._v(", "),n("code",[e._v("on-value")]),e._v(", "),n("code",[e._v("off-value")])]),n("li",[n("code",[e._v("active-text")]),e._v(" and "),n("code",[e._v("inactive-text")]),e._v(" attributes now don't have default values")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[n("code",[e._v("type")]),e._v(" attribute now accepts "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("info")]),e._v(", "),n("code",[e._v("warning")]),e._v(" and "),n("code",[e._v("danger")])])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("theme")]),e._v(" attribute. The color of Menu can be configured using "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" and "),n("code",[e._v("active-text-color")])])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("icon")]),e._v(" attribute. Now the suffix icon can be configured using "),n("code",[e._v("suffix-icon")]),e._v(" attribute or "),n("code",[e._v("suffix")]),e._v(" named slot")]),n("li",[e._v("Removed "),n("code",[e._v("on-icon-click")]),e._v(" attribute and "),n("code",[e._v("click")]),e._v(" event. Now to add click handler on icons, please use named slots")]),n("li",[n("code",[e._v("change")]),e._v(" event now behaves like the native input element, which triggers only on blur or pressing enter. If you need to respond to user input in real time, you can use "),n("code",[e._v("input")]),e._v(" event.")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("custom-item")]),e._v(" attribute. Now the template of input suggestions can be customized using "),n("code",[e._v("scoped slot")])]),n("li",[e._v("Removed "),n("code",[e._v("props")]),e._v(" attribute. Now you can use "),n("code",[e._v("value-key")]),e._v(" attribute to designate key name of the input suggestion object for display")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Removed "),n("code",[e._v("center")]),e._v(" attribute")]),n("li",[e._v("Now the Steps will fill its parent container by default")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("The params of DatePicker's "),n("code",[e._v("change")]),e._v(" event is now the binding value itself. Its format is controlled by "),n("code",[e._v("value-format")])])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Removed support for customizing column template using "),n("code",[e._v("inline-template")])]),n("li",[n("code",[e._v("sort-method")]),e._v(" now aligns with "),n("code",[e._v("Array.sort")]),e._v(". It should return a number instead of a boolean")]),n("li",[n("code",[e._v("append")]),e._v(" slot is moved outside the "),n("code",[e._v("tbody")]),e._v(" element to avoid multiple rendering")]),n("li",[n("code",[e._v("expand")]),e._v(" event is renamed to "),n("code",[e._v("expand-change")])]),n("li",[e._v("The params of "),n("code",[e._v("row-class-name")]),e._v(" and "),n("code",[e._v("row-style")]),e._v(" method is now an object")])])])]),n("h2",{attrs:{id:""}},[n("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[e._v("¶")])]),n("p",[n("i",[n("sup",[e._v("*")]),e._v(" Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". So when "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" is on, please make sure the content of "),n("code",[e._v("message")]),e._v(" is trusted, and "),n("strong",[e._v("never")]),e._v(" assign "),n("code",[e._v("message")]),e._v(" to user-provided content.")])])])}],!1,null,null,null).exports},data:function(){return{count:3}},mounted:function(){var e=this.$refs.changeLog,t=e.$el.children,n=t[1].querySelector("a");n&&n.remove();for(var a=t[1].textContent.trim(),i='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+a+'" target="_blank">'+a+"</a></h3>",l=t.length,r=2;r<l;r++){var o=t[r];(n=t[r].querySelector("a"))&&"header-anchor"===n.getAttribute("class")&&n.remove(),"H3"!==o.tagName?i+=t[r].outerHTML:i+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(a=t[r].textContent.trim())+'" target="_blank">'+a+"</a></h3>"}i=(i=i.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>')).replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=i+"</li>",e.$el.remove()}},l=(n(312),Object(a.a)(i,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n Changelog\n ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));t.default=l.exports},343:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"box"},[n("div",{staticClass:"top"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[n("el-button",[e._v("top-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[n("el-button",[e._v("top")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[n("el-button",[e._v("top-end")])],1)],1),e._v(" "),n("div",{staticClass:"left"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[n("el-button",[e._v("left-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[n("el-button",[e._v("left")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[n("el-button",[e._v("left-end")])],1)],1),e._v(" "),n("div",{staticClass:"right"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[n("el-button",[e._v("right-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[n("el-button",[e._v("right")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[n("el-button",[e._v("right-end")])],1)],1),e._v(" "),n("div",{staticClass:"bottom"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[n("el-button",[e._v("bottom-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[n("el-button",[e._v("bottom")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[n("el-button",[e._v("bottom-end")])],1)],1)])])},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[n("el-button",[e._v("Dark")])],1),e._v(" "),n("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[n("el-button",[e._v("Light")])],1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tooltip",{attrs:{placement:"top"}},[n("div",{attrs:{slot:"content"},slot:"content"},[e._v("multiple lines"),n("br"),e._v("second line")]),e._v(" "),n("el-button",[e._v("Top center")])],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tooltip",{attrs:{disabled:t.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[n("el-button",{on:{click:function(e){t.disabled=!t.disabled}}},[t._v("click to "+t._s(t.disabled?"active":"close")+" tooltip function")])],1)]],2)},staticRenderFns:[]},{data:function(){return{disabled:!1}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Display prompt information for mouse hover.")]),e._m(1),n("p",[e._v("Tooltip has 9 placements.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("content")]),e._v(" to set the display content when hover. The attribute "),n("code",[e._v("placement")]),e._v(" determines the position of the tooltip. Its value is "),n("code",[e._v("[orientation]-[alignment]")]),e._v(" with four orientations "),n("code",[e._v("top")]),e._v(", "),n("code",[e._v("left")]),e._v(", "),n("code",[e._v("right")]),e._v(", "),n("code",[e._v("bottom")]),e._v(" and three alignments "),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v(", "),n("code",[e._v("null")]),e._v(", and the default alignment is null. Take "),n("code",[e._v('placement="left-end"')]),e._v(" for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="box">\n <div class="top">\n <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">\n <el-button>top-start</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">\n <el-button>top</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">\n <el-button>top-end</el-button>\n </el-tooltip>\n </div>\n <div class="left">\n <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">\n <el-button>left-start</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">\n <el-button>left</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">\n <el-button>left-end</el-button>\n </el-tooltip>\n </div>\n\n <div class="right">\n <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">\n <el-button>right-start</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">\n <el-button>right</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">\n <el-button>right-end</el-button>\n </el-tooltip>\n </div>\n <div class="bottom">\n <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">\n <el-button>bottom-start</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">\n <el-button>bottom</el-button>\n </el-tooltip>\n <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">\n <el-button>bottom-end</el-button>\n </el-tooltip>\n </div>\n</div>\n\n<style>\n .box {\n width: 400px;\n\n .top {\n text-align: center;\n }\n\n .left {\n float: left;\n width: 110px;\n }\n\n .right {\n float: right;\n width: 110px;\n }\n\n .bottom {\n clear: both;\n text-align: center;\n }\n\n .item {\n margin: 4px;\n }\n\n .left .el-tooltip__popper,\n .right .el-tooltip__popper {\n padding: 8px 10px;\n }\n\n .el-button {\n width: 110px;\n }\n }\n</style>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("effect")]),e._v(" to modify theme, and the default value is "),n("code",[e._v("dark")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip content="Top center" placement="top">\n <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n <el-button>Light</el-button>\n</el-tooltip>\n')])])])],2),e._m(4),n("p",[e._v("Display multiple lines of text and set their format.")]),n("demo-block",[n("div",[n("p",[e._v("Override attribute "),n("code",[e._v("content")]),e._v(" of "),n("code",[e._v("el-tooltip")]),e._v(" by adding a slot named "),n("code",[e._v("content")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip placement="top">\n <div slot="content">multiple lines<br/>second line</div>\n <el-button>Top center</el-button>\n</el-tooltip>\n')])])])],2),e._m(5),n("p",[e._v("In addition to basic usages, there are some attributes that allow you to customize your own:")]),e._m(6),e._m(7),e._m(8),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">\n <el-button @click="disabled = !disabled">click to {{disabled ? \'active\' : \'close\'}} tooltip function</el-button>\n </el-tooltip>\n</template>\n\n<script>\n export default {\n data() {\n return {\n disabled: false\n };\n }\n };\n<\/script>\n\n<style>\n .slide-fade-enter-active {\n transition: all .3s ease;\n }\n .slide-fade-leave-active {\n transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n }\n .slide-fade-enter, .expand-fade-leave-active {\n margin-left: 20px;\n opacity: 0;\n }\n</style>\n')])])])],2),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tooltip"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"theme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[this._v("¶")]),this._v(" Theme")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Tooltip has two themes: "),n("code",[e._v("dark")]),e._v(" and "),n("code",[e._v("light")]),e._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"more-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#more-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" More Content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"advanced-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#advanced-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Advanced usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("transition")]),this._v(" attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("disabled")]),e._v(" attribute allows you to disable "),n("code",[e._v("tooltip")]),e._v(". You just need set it to "),n("code",[e._v("true")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("In fact, Tooltip is an extension based on "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(", you can use any attribute that are allowed in Vue-popper.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("The "),n("code",[e._v("router-link")]),e._v(" component is not supported in tooltip, please use "),n("code",[e._v("vm.$router.push")]),e._v(".")]),n("p",[e._v("Disabled form elements are not supported for Tooltip, more information can be found at "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[e._v("MDN")]),e._v(". You need to wrap the disabled form element with a container element for Tooltip to work.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("effect")]),n("td",[e._v("Tooltip theme")]),n("td",[e._v("string")]),n("td",[e._v("dark/light")]),n("td",[e._v("dark")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("display content, can be overridden by "),n("code",[e._v("slot#content")])]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("position of Tooltip")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("visibility of Tooltip")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Tooltip is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("offset of the Tooltip")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("animation name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("whether an arrow is displayed. For more information, check "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(" page")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" parameters")]),n("td",[e._v("Object")]),n("td",[e._v("refer to "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" doc")]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("delay of appearance, in millisecond")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("manual")]),n("td",[e._v("whether to control Tooltip manually. "),n("code",[e._v("mouseenter")]),e._v(" and "),n("code",[e._v("mouseleave")]),e._v(" won't have effects if set to "),n("code",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for Tooltip's popper")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("enterable")]),n("td",[e._v("whether the mouse can enter the tooltip")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("hide-after")]),n("td",[e._v("timeout in milliseconds to hide tooltip")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"}},[e._v("tabindex")]),e._v(" of Tooltip")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])}],!1,null,null,null);t.default=r.exports},428:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"success alert",type:"success"}}),e._v(" "),n("el-alert",{attrs:{title:"info alert",type:"info"}}),e._v(" "),n("el-alert",{attrs:{title:"warning alert",type:"warning"}}),e._v(" "),n("el-alert",{attrs:{title:"error alert",type:"error"}})]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"success alert",type:"success",effect:"dark"}}),e._v(" "),n("el-alert",{attrs:{title:"info alert",type:"info",effect:"dark"}}),e._v(" "),n("el-alert",{attrs:{title:"warning alert",type:"warning",effect:"dark"}}),e._v(" "),n("el-alert",{attrs:{title:"error alert",type:"error",effect:"dark"}})]],2)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),e._v(" "),n("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),e._v(" "),n("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:e.hello}})]],2)},staticRenderFns:[]},{methods:{hello:function(){alert("Hello World!")}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"success alert",type:"success",center:"","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"info alert",type:"info",center:"","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"warning alert",type:"warning",center:"","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"error alert",type:"error",center:"","show-icon":""}})]],2)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2)},staticRenderFns:[]},{}),"element-demo6":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2)},staticRenderFns:[]},{})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Displays important alert messages.")]),e._m(1),n("p",[e._v("Alert components are non-overlay elements in the page that does not disappear automatically.")]),n("demo-block",[n("div",[n("p",[e._v("Alert provides 4 types of themes defined by "),n("code",[e._v("type")]),e._v(", whose default value is "),n("code",[e._v("info")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-alert\n title="success alert"\n type="success">\n </el-alert>\n <el-alert\n title="info alert"\n type="info">\n </el-alert>\n <el-alert\n title="warning alert"\n type="warning">\n </el-alert>\n <el-alert\n title="error alert"\n type="error">\n </el-alert>\n</template>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("effect")]),e._v(" to change theme, default is "),n("code",[e._v("light")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-alert\n title="success alert"\n type="success"\n effect="dark">\n </el-alert>\n <el-alert\n title="info alert"\n type="info"\n effect="dark">\n </el-alert>\n <el-alert\n title="warning alert"\n type="warning"\n effect="dark">\n </el-alert>\n <el-alert\n title="error alert"\n type="error"\n effect="dark">\n </el-alert>\n</template>\n')])])])],2),e._m(4),n("p",[e._v("Customize the close button as texts or other symbols.")]),n("demo-block",[n("div",[n("p",[e._v("Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. "),n("code",[e._v("closable")]),e._v(" attribute decides if the component can be closed or not. It accepts "),n("code",[e._v("boolean")]),e._v(", and the default is "),n("code",[e._v("true")]),e._v(". You can set "),n("code",[e._v("close-text")]),e._v(" attribute to replace the default cross symbol as the close button. Be careful that "),n("code",[e._v("close-text")]),e._v(" must be a string. "),n("code",[e._v("close")]),e._v(" event fires when the component is closed.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-alert\n title="unclosable alert"\n type="success"\n :closable="false">\n </el-alert>\n <el-alert\n title="customized close-text"\n type="info"\n close-text="Gotcha">\n </el-alert>\n <el-alert\n title="alert with callback"\n type="warning"\n @close="hello">\n </el-alert>\n</template>\n\n<script>\n export default {\n methods: {\n hello() {\n alert(\'Hello World!\');\n }\n }\n }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Displaying an icon improves readability.")]),n("demo-block",[n("div",[n("p",[e._v("Setting the "),n("code",[e._v("show-icon")]),e._v(" attribute displays an icon that corresponds with the current Alert type.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-alert\n title="success alert"\n type="success"\n show-icon>\n </el-alert>\n <el-alert\n title="info alert"\n type="info"\n show-icon>\n </el-alert>\n <el-alert\n title="warning alert"\n type="warning"\n show-icon>\n </el-alert>\n <el-alert\n title="error alert"\n type="error"\n show-icon>\n </el-alert>\n</template>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-alert\n title="success alert"\n type="success"\n center\n show-icon>\n </el-alert>\n <el-alert\n title="info alert"\n type="info"\n center\n show-icon>\n </el-alert>\n <el-alert\n title="warning alert"\n type="warning"\n center\n show-icon>\n </el-alert>\n <el-alert\n title="error alert"\n type="error"\n center\n show-icon>\n </el-alert>\n</template>\n')])])])],2),e._m(8),n("p",[e._v("Description includes a message with more detailed information.")]),n("demo-block",[n("div",[n("p",[e._v("Besides the required "),n("code",[e._v("title")]),e._v(" attribute, you can add a "),n("code",[e._v("description")]),e._v(" attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-alert\n title="with description"\n type="success"\n description="This is a description.">\n </el-alert>\n</template>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("At last, this is an example with both icon and description.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-alert\n title="success alert"\n type="success"\n description="more text description"\n show-icon>\n </el-alert>\n <el-alert\n title="info alert"\n type="info"\n description="more text description"\n show-icon>\n </el-alert>\n <el-alert\n title="warning alert"\n type="warning"\n description="more text description"\n show-icon>\n </el-alert>\n <el-alert\n title="error alert"\n type="error"\n description="more text description"\n show-icon>\n </el-alert>\n</template>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"theme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[this._v("¶")]),this._v(" Theme")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Alert provide two different themes, "),n("code",[e._v("light")]),e._v(" and "),n("code",[e._v("dark")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizable-close-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizable-close-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizable close button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" With icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"centered-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered text")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use the "),n("code",[e._v("center")]),e._v(" attribute to center the text.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" With description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-icon-and-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-icon-and-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" With icon and description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Component type")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("Descriptive text. Can also be passed with the default slot")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("If closable or not")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Whether to center the text")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("close-text")]),n("td",[e._v("Customized close button text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-icon")]),n("td",[e._v("If a type icon is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("effect")]),n("td",[e._v("Choose theme")]),n("td",[e._v("string")]),n("td",[e._v("light/dark")]),n("td",[e._v("light")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("description")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("content of the Alert title")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("close")]),n("td",[e._v("fires when alert is closed")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=r.exports},451:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-row",{staticClass:"demo-avatar demo-basic"},[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("circle")]),t._v(" "),n("div",{staticClass:"demo-basic--circle"},[n("div",{staticClass:"block"},[n("el-avatar",{attrs:{size:50,src:t.circleUrl}})],1),t._v(" "),t._l(t.sizeList,function(e){return n("div",{key:e,staticClass:"block"},[n("el-avatar",{attrs:{size:e,src:t.circleUrl}})],1)})],2)]),t._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("square")]),t._v(" "),n("div",{staticClass:"demo-basic--circle"},[n("div",{staticClass:"block"},[n("el-avatar",{attrs:{shape:"square",size:50,src:t.squareUrl}})],1),t._v(" "),t._l(t.sizeList,function(e){return n("div",{key:e,staticClass:"block"},[n("el-avatar",{attrs:{shape:"square",size:e,src:t.squareUrl}})],1)})],2)])],1)]],2)},staticRenderFns:[]},{data:function(){return{circleUrl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",squareUrl:"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",sizeList:["large","medium","small"]}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",{staticClass:"demo-type"},[n("div",[n("el-avatar",{attrs:{icon:"el-icon-user-solid"}})],1),e._v(" "),n("div",[n("el-avatar",{attrs:{src:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"}})],1),e._v(" "),n("div",[n("el-avatar",[e._v(" user ")])],1)])]],2)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("div",{staticClass:"demo-type"},[t("el-avatar",{attrs:{size:60,src:"https://empty"},on:{error:this.errorHandler}},[t("img",{attrs:{src:"https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"}})])],1)]],2)},staticRenderFns:[]},{methods:{errorHandler:function(){return!0}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"demo-fit"},t._l(t.fits,function(e){return n("div",{key:e,staticClass:"block"},[n("span",{staticClass:"title"},[t._v(t._s(e))]),t._v(" "),n("el-avatar",{attrs:{shape:"square",size:100,fit:e,src:t.url}})],1)}),0)]],2)},staticRenderFns:[]},{data:function(){return{fits:["fill","contain","cover","none","scale-down"],url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Avatars can be used to represent people or objects. It supports images, Icons, or characters.")]),e._m(1),e._m(2),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-row class="demo-avatar demo-basic">\n <el-col :span="12">\n <div class="sub-title">circle</div>\n <div class="demo-basic--circle">\n <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>\n <div class="block" v-for="size in sizeList" :key="size">\n <el-avatar :size="size" :src="circleUrl"></el-avatar>\n </div>\n </div>\n </el-col> \n <el-col :span="12">\n <div class="sub-title">square</div>\n <div class="demo-basic--circle">\n <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>\n <div class="block" v-for="size in sizeList" :key="size">\n <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>\n </div>\n </div>\n </el-col> \n </el-row>\n</template>\n<script>\n export default {\n data () {\n return {\n circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",\n squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",\n sizeList: ["large", "medium", "small"]\n }\n }\n }\n<\/script>\n\n')])])])],2),e._m(3),n("p",[e._v("It supports images, Icons, or characters")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="demo-type">\n <div>\n <el-avatar icon="el-icon-user-solid"></el-avatar>\n </div>\n <div>\n <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>\n </div>\n <div>\n <el-avatar> user </el-avatar>\n </div>\n </div>\n</template>\n')])])])],2),e._m(4),n("p",[e._v("fallback when image load error")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="demo-type">\n <el-avatar :size="60" src="https://empty" @error="errorHandler">\n <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>\n </el-avatar>\n </div>\n</template>\n<script>\n export default {\n methods: {\n errorHandler() {\n return true\n }\n }\n }\n<\/script>\n\n')])])])],2),e._m(5),e._m(6),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="demo-fit">\n <div class="block" v-for="fit in fits" :key="fit">\n <span class="title">{{ fit }}</span>\n <el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>\n </div>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n fits: [\'fill\', \'contain\', \'cover\', \'none\', \'scale-down\'],\n url: \'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\'\n }\n }\n }\n<\/script>\n\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),n("p",[e._v("| Slot Name | Description |\n| default | customize avatar content |")])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"avatar-avatar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avatar-avatar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avatar avatar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("use "),n("code",[e._v("shape")]),e._v(" and "),n("code",[e._v("size")]),e._v(" prop to set avatar's shape and size")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fallback-when-image-load-error"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fallback-when-image-load-error","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fallback when image load error")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"how-the-image-fit-its-container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-the-image-fit-its-container","aria-hidden":"true"}},[this._v("¶")]),this._v(" How the image fit its container")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Set how the image fit its container for an image avatar, same as "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"}},[e._v("object-fit")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("set representation type to Icon, more info on Icon Component")]),n("td",[e._v("string")]),n("td"),n("td")]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("set avatar size")]),n("td",[e._v("number/string")]),n("td",[e._v("number / large / medium / small")]),n("td",[e._v("large")])]),n("tr",[n("td",[e._v("shape")]),n("td",[e._v("set avatar shape")]),n("td",[e._v("string")]),n("td",[e._v("circle / square")]),n("td",[e._v("circle")])]),n("tr",[n("td",[e._v("src")]),n("td",[e._v("the address of the image for an image avatar")]),n("td",[e._v("string")]),n("td"),n("td")]),n("tr",[n("td",[e._v("srcSet")]),n("td",[e._v("A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use")]),n("td",[e._v("string")]),n("td"),n("td")]),n("tr",[n("td",[e._v("alt")]),n("td",[e._v("This attribute defines an alternative text description of the image")]),n("td",[e._v("string")]),n("td"),n("td")]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("set how the image fit its container for an image avatar")]),n("td",[e._v("string")]),n("td",[e._v("fill / contain / cover / none / scale-down")]),n("td",[e._v("cover")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("error")]),n("td",[e._v("handler when img load error, return false to prevent default fallback behavior")]),n("td",[e._v("(e: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])}],!1,null,null,null);t.default=r.exports},468:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"before-remove":e.beforeRemove,multiple:"",limit:3,"on-exceed":e.handleExceed,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Click to upload")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("jpg/png files with a size less than 500kb")])],1)],1)},staticRenderFns:[]},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)},handleExceed:function(e,t){this.$message.warning("The limit is 3, you selected "+e.length+" files this time, add up to "+(e.length+t.length)+" totally")},beforeRemove:function(e,t){return this.$confirm("Cancel the transfert of "+e.name+" ?")}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":e.handleAvatarSuccess,"before-upload":e.beforeAvatarUpload}},[e.imageUrl?n("img",{staticClass:"avatar",attrs:{src:e.imageUrl}}):n("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1)},staticRenderFns:[]},{data:function(){return{imageUrl:""}},methods:{handleAvatarSuccess:function(e,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(e){var t="image/jpeg"===e.type,n=e.size/1024/1024<2;return t||this.$message.error("Avatar picture must be JPG format!"),n||this.$message.error("Avatar picture size can not exceed 2MB!"),t&&n}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":t.handlePictureCardPreview,"on-remove":t.handleRemove}},[n("i",{staticClass:"el-icon-plus"})]),t._v(" "),n("el-dialog",{attrs:{visible:t.dialogVisible},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("img",{attrs:{width:"100%",src:t.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]},{data:function(){return{dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0}}}),"element-demo3":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-upload",{attrs:{action:"#","list-type":"picture-card","auto-upload":!1},scopedSlots:n._u([{key:"file",fn:function(e){var t=e.file;return a("div",{},[a("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:t.url,alt:""}}),n._v(" "),a("span",{staticClass:"el-upload-list__item-actions"},[a("span",{staticClass:"el-upload-list__item-preview",on:{click:function(e){n.handlePictureCardPreview(t)}}},[a("i",{staticClass:"el-icon-zoom-in"})]),n._v(" "),n.disabled?n._e():a("span",{staticClass:"el-upload-list__item-delete",on:{click:function(e){n.handleDownload(t)}}},[a("i",{staticClass:"el-icon-download"})]),n._v(" "),n.disabled?n._e():a("span",{staticClass:"el-upload-list__item-delete",on:{click:function(e){n.handleRemove(t)}}},[a("i",{staticClass:"el-icon-delete"})])])])}}])},[a("i",{staticClass:"el-icon-plus",attrs:{slot:"default"},slot:"default"})]),n._v(" "),a("el-dialog",{attrs:{visible:n.dialogVisible},on:{"update:visible":function(e){n.dialogVisible=e}}},[a("img",{attrs:{width:"100%",src:n.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]},{data:function(){return{dialogImageUrl:"",dialogVisible:!1,disabled:!1}},methods:{handleRemove:function(e){console.log(e)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0},handleDownload:function(e){console.log(e)}}}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,"list-type":"picture"}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Click to upload")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("jpg/png files with a size less than 500kb")])],1)],1)},staticRenderFns:[]},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}}),"element-demo5":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":e.handleChange,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Click to upload")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("jpg/png files with a size less than 500kb")])],1)],1)},staticRenderFns:[]},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(e,t){this.fileList=t.slice(-3)}}}),"element-demo6":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,multiple:""}},[n("i",{staticClass:"el-icon-upload"}),e._v(" "),n("div",{staticClass:"el-upload__text"},[e._v("Drop file here or "),n("em",[e._v("click to upload")])]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("jpg/png files with a size less than 500kb")])])],1)},staticRenderFns:[]},{}),"element-demo7":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[n("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[e._v("select file")]),e._v(" "),n("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:e.submitUpload}},[e._v("upload to server")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("jpg/png files with a size less than 500kb")])],1)],1)},staticRenderFns:[]},{methods:{submitUpload:function(){this.$refs.upload.submit()}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Upload files by clicking or drag-and-drop")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Customize upload button type and text using "),n("code",[e._v("slot")]),e._v(". Set "),n("code",[e._v("limit")]),e._v(" and "),n("code",[e._v("on-exceed")]),e._v(" to limit the maximum number of uploads allowed and specify method when the limit is exceeded. Plus, you can abort removing a file in the "),n("code",[e._v("before-remove")]),e._v(" hook.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n class="upload-demo"\n action="https://jsonplaceholder.typicode.com/posts/"\n :on-preview="handlePreview"\n :on-remove="handleRemove"\n :before-remove="beforeRemove"\n multiple\n :limit="3"\n :on-exceed="handleExceed"\n :file-list="fileList">\n <el-button size="small" type="primary">Click to upload</el-button>\n <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n export default {\n data() {\n return {\n fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n },\n handleExceed(files, fileList) {\n this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);\n },\n beforeRemove(file, fileList) {\n return this.$confirm(`Cancel the transfert of ${ file.name } ?`);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n class="avatar-uploader"\n action="https://jsonplaceholder.typicode.com/posts/"\n :show-file-list="false"\n :on-success="handleAvatarSuccess"\n :before-upload="beforeAvatarUpload">\n <img v-if="imageUrl" :src="imageUrl" class="avatar">\n <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n<style>\n .avatar-uploader .el-upload {\n border: 1px dashed #d9d9d9;\n border-radius: 6px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n }\n .avatar-uploader .el-upload:hover {\n border-color: #409EFF;\n }\n .avatar-uploader-icon {\n font-size: 28px;\n color: #8c939d;\n width: 178px;\n height: 178px;\n line-height: 178px;\n text-align: center;\n }\n .avatar {\n width: 178px;\n height: 178px;\n display: block;\n }\n</style>\n\n<script>\n export default {\n data() {\n return {\n imageUrl: \'\'\n };\n },\n methods: {\n handleAvatarSuccess(res, file) {\n this.imageUrl = URL.createObjectURL(file.raw);\n },\n beforeAvatarUpload(file) {\n const isJPG = file.type === \'image/jpeg\';\n const isLt2M = file.size / 1024 / 1024 < 2;\n\n if (!isJPG) {\n this.$message.error(\'Avatar picture must be JPG format!\');\n }\n if (!isLt2M) {\n this.$message.error(\'Avatar picture size can not exceed 2MB!\');\n }\n return isJPG && isLt2M;\n }\n }\n }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n action="https://jsonplaceholder.typicode.com/posts/"\n list-type="picture-card"\n :on-preview="handlePictureCardPreview"\n :on-remove="handleRemove">\n <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n export default {\n data() {\n return {\n dialogImageUrl: \'\',\n dialogVisible: false\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePictureCardPreview(file) {\n this.dialogImageUrl = file.url;\n this.dialogVisible = true;\n }\n }\n }\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n action="#"\n list-type="picture-card"\n :auto-upload="false">\n <i slot="default" class="el-icon-plus"></i>\n <div slot="file" slot-scope="{file}">\n <img\n class="el-upload-list__item-thumbnail"\n :src="file.url" alt=""\n >\n <span class="el-upload-list__item-actions">\n <span\n class="el-upload-list__item-preview"\n @click="handlePictureCardPreview(file)"\n >\n <i class="el-icon-zoom-in"></i>\n </span>\n <span\n v-if="!disabled"\n class="el-upload-list__item-delete"\n @click="handleDownload(file)"\n >\n <i class="el-icon-download"></i>\n </span>\n <span\n v-if="!disabled"\n class="el-upload-list__item-delete"\n @click="handleRemove(file)"\n >\n <i class="el-icon-delete"></i>\n </span>\n </span>\n </div>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n export default {\n data() {\n return {\n dialogImageUrl: \'\',\n dialogVisible: false,\n disabled: false\n };\n },\n methods: {\n handleRemove(file) {\n console.log(file);\n },\n handlePictureCardPreview(file) {\n this.dialogImageUrl = file.url;\n this.dialogVisible = true;\n },\n handleDownload(file) {\n console.log(file);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(8),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n class="upload-demo"\n action="https://jsonplaceholder.typicode.com/posts/"\n :on-preview="handlePreview"\n :on-remove="handleRemove"\n :file-list="fileList"\n list-type="picture">\n <el-button size="small" type="primary">Click to upload</el-button>\n <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n export default {\n data() {\n return {\n fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n };\n },\n methods: {\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n class="upload-demo"\n action="https://jsonplaceholder.typicode.com/posts/"\n :on-change="handleChange"\n :file-list="fileList">\n <el-button size="small" type="primary">Click to upload</el-button>\n <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n export default {\n data() {\n return {\n fileList: [{\n name: \'food.jpeg\',\n url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n }, {\n name: \'food2.jpeg\',\n url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n }]\n };\n },\n methods: {\n handleChange(file, fileList) {\n this.fileList = fileList.slice(-3);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("You can drag your file to a certain area to upload it.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n class="upload-demo"\n drag\n action="https://jsonplaceholder.typicode.com/posts/"\n :on-preview="handlePreview"\n :on-remove="handleRemove"\n :file-list="fileList"\n multiple>\n <i class="el-icon-upload"></i>\n <div class="el-upload__text">Drop file here or <em>click to upload</em></div>\n <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n')])])])],2),e._m(12),n("demo-block",[n("template",{slot:"source"},[n("element-demo7")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n class="upload-demo"\n ref="upload"\n action="https://jsonplaceholder.typicode.com/posts/"\n :auto-upload="false">\n <el-button slot="trigger" size="small" type="primary">select file</el-button>\n <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">upload to server</el-button>\n <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n export default {\n methods: {\n submitUpload() {\n this.$refs.upload.submit();\n }\n }\n }\n<\/script>\n')])])])],2),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"click-to-upload-files"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#click-to-upload-files","aria-hidden":"true"}},[this._v("¶")]),this._v(" Click to upload files")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"user-avatar-upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#user-avatar-upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" User avatar upload")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use "),n("code",[e._v("before-upload")]),e._v(" hook to limit the upload file format and size.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"photo-wall"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#photo-wall","aria-hidden":"true"}},[this._v("¶")]),this._v(" Photo Wall")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use "),n("code",[e._v("list-type")]),e._v(" to change the fileList style.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-file-thumbnail"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-file-thumbnail","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom file thumbnail")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use "),n("code",[e._v("scoped-slot")]),e._v(" to change default thumbnail template.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filelist-with-thumbnail"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filelist-with-thumbnail","aria-hidden":"true"}},[this._v("¶")]),this._v(" FileList with thumbnail")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"file-list-control"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#file-list-control","aria-hidden":"true"}},[this._v("¶")]),this._v(" File list control")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use "),n("code",[e._v("on-change")]),e._v(" hook function to control upload file list")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"drag-to-upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drag-to-upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Drag to upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"manual-upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#manual-upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Manual upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("action")]),n("td",[e._v("required, request URL")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("headers")]),n("td",[e._v("request headers")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("whether uploading multiple files is permitted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("additions options of request")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("key name for uploaded file")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("file")])]),n("tr",[n("td",[e._v("with-credentials")]),n("td",[e._v("whether cookies are sent")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-file-list")]),n("td",[e._v("whether to show the uploaded file list")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("drag")]),n("td",[e._v("whether to activate drag and drop mode")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("accept")]),n("td",[e._v("accepted "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[e._v("file types")]),e._v(", will not work when "),n("code",[e._v("thumbnail-mode")]),e._v(" is "),n("code",[e._v("true")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-preview")]),n("td",[e._v("hook function when clicking the uploaded files")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-remove")]),n("td",[e._v("hook function when files are removed")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-success")]),n("td",[e._v("hook function when uploaded successfully")]),n("td",[e._v("function(response, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-error")]),n("td",[e._v("hook function when some errors occurs")]),n("td",[e._v("function(err, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-progress")]),n("td",[e._v("hook function when some progress occurs")]),n("td",[e._v("function(event, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-change")]),n("td",[e._v("hook function when select file or upload file success or upload file fail")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-upload")]),n("td",[e._v("hook function before uploading with the file to be uploaded as its parameter. If "),n("code",[e._v("false")]),e._v(" is returned or a "),n("code",[e._v("Promise")]),e._v(" is returned and then is rejected, uploading will be aborted")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-remove")]),n("td",[e._v("hook function before removing a file with the file and file list as its parameters. If "),n("code",[e._v("false")]),e._v(" is returned or a "),n("code",[e._v("Promise")]),e._v(" is returned and then is rejected, removing will be aborted.")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("thumbnail-mode")]),n("td",[e._v("whether thumbnail is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("file-list")]),n("td",[e._v("default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[]")])]),n("tr",[n("td",[e._v("list-type")]),n("td",[e._v("type of fileList")]),n("td",[e._v("string")]),n("td",[e._v("text/picture/picture-card")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("auto-upload")]),n("td",[e._v("whether to auto upload file")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("http-request")]),n("td",[e._v("override default xhr behavior, allowing you to implement your own upload-file's request")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether to disable upload")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("limit")]),n("td",[e._v("maximum number of uploads allowed")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-exceed")]),n("td",[e._v("hook function when limit is exceeded")]),n("td",[e._v("function(files, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("content which triggers file dialog")])]),n("tr",[n("td",[e._v("tip")]),n("td",[e._v("content of tips")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Methods Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("clearFiles")]),n("td",[e._v("clear the uploaded file list (this method is not supported in the "),n("code",[e._v("before-upload")]),e._v(" hook)")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("abort")]),n("td",[e._v("cancel upload request")]),n("td",[e._v("（ file: fileList's item ）")])]),n("tr",[n("td",[e._v("submit")]),n("td",[e._v("upload the file list manually")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=r.exports},470:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"typography"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#typography","aria-hidden":"true"}},[this._v("¶")]),this._v(" Typography")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:a(221),alt:""}}),t("img",{attrs:{src:a(222),alt:""}}),t("img",{attrs:{src:a(223),alt:""}}),t("img",{attrs:{src:a(224),alt:""}}),t("img",{attrs:{src:a(225),alt:""}}),t("img",{attrs:{src:a(226),alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-convention"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-convention","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font Convention")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("tr",[n("td",[e._v("Level")]),n("td",[e._v("Font Size")]),n("td",{staticClass:"color-dark-light"},[e._v("Demo")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-line-height"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-line-height","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font Line Height")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("img",{staticClass:"lineH-left",attrs:{src:a(227)}}),n("ul",{staticClass:"lineH-right"},[n("li",[e._v("line-height:1 "),n("span",[e._v("No line height")])]),n("li",[e._v("line-height:1.3 "),n("span",[e._v("Compact")])]),n("li",[e._v("line-height:1.5 "),n("span",[e._v("Regular")])]),n("li",[e._v("line-height:1.7 "),n("span",[e._v("Loose")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-family"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font-family")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-css"},[this._v('font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;\n')])])}],i=a(31),l=a(32),r=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],o={font_size_extra_large:"20px",font_size_large:"18px",font_size_medium:"16px",font_size_base:"14px",font_size_small:"13px",font_size_extra_small:"12px"},s={created:function(){i.a.$on(l.d,this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(n){function e(e,t){return n.apply(this,arguments)}return e.toString=function(){return n.toString()},e}(function(e,t){return tintColor(e,t)}),setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},font_size_extra_large:"",font_size_large:"",font_size_medium:"",font_size_base:"",font_size_small:"",font_size_extra_small:""}},watch:{global:{immediate:!0,handler:function(n){var a=this;r.forEach(function(e){var t=e.replace("$--","").replace(/-/g,"_");n[e]?a[t]=n[e]:a[t]=o[t]})}}}},d=a(0),c=Object(d.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("We create a font convention to ensure the best presentation across different platforms.")]),e._m(1),e._m(2),e._m(3),n("table",{staticClass:"demo-typo-size"},[n("tbody",[e._m(4),n("tr",{style:{fontSize:e.font_size_extra_small}},[n("td",[e._v("Supplementary text")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_small)+" Extra Small")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_small}},[n("td",[e._v("Body (small)")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_small)+" Small")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_base}},[n("td",[e._v("Body")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_base)+" Base")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_medium}},[n("td",[e._v("Small Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_medium)+" Medium")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_large}},[n("td",[e._v("Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_large)+" large")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_extra_large}},[n("td",[e._v("Main Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_large)+" Extra large")]),n("td",[e._v("Build with Element")])])])]),e._m(5),e._m(6),e._m(7),e._m(8)])},n,!1,null,null,null);t.default=c.exports},471:function(e,t,n){"use strict";n.r(t);var a,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":i({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,props:e.defaultProps},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}}),"element-demo1":i({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{props:e.props,load:e.loadNode,lazy:"","show-checkbox":""},on:{"check-change":e.handleCheckChange}})],1)},staticRenderFns:[]},{data:function(){return{props:{label:"name",children:"zones"},count:1}},methods:{handleCheckChange:function(e,t,n){console.log(e,t,n)},handleNodeClick:function(e){console.log(e)},loadNode:function(e,t){var n,a=this;return 0===e.level?t([{name:"Root1"},{name:"Root2"}]):3<e.level?t([]):(n="region1"===e.data.name||"region2"!==e.data.name&&.5<Math.random(),void setTimeout(function(){var e;e=n?[{name:"zone"+a.count++},{name:"zone"+a.count++}]:[],t(e)},500))}}}),"element-demo2":i({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props,load:this.loadNode,lazy:"","show-checkbox":""}})],1)},staticRenderFns:[]},{data:function(){return{props:{label:"name",children:"zones",isLeaf:"leaf"}}},methods:{loadNode:function(e,t){return 0===e.level?t([{name:"region"}]):1<e.level?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)}}}),"element-demo3":i({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,props:e.defaultProps,"show-checkbox":""},on:{"check-change":e.handleCheckChange}})],1)},staticRenderFns:[]},{data:function(){return{data:[{id:1,label:"Level one 1",children:[{id:3,label:"Level two 2-1",children:[{id:4,label:"Level three 3-1-1"},{id:5,label:"Level three 3-1-2",disabled:!0}]},{id:2,label:"Level two 2-2",disabled:!0,children:[{id:6,label:"Level three 3-2-1"},{id:7,label:"Level three 3-2-2",disabled:!0}]}]}],defaultProps:{children:"children",label:"label",disabled:"disabled"}}}}),"element-demo4":i({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:this.defaultProps}})],1)},staticRenderFns:[]},{data:function(){return{data:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}}),"element-demo5":i({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{ref:"tree",attrs:{data:e.data,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:e.defaultProps}}),e._v(" "),n("div",{staticClass:"buttons"},[n("el-button",{on:{click:e.getCheckedNodes}},[e._v("get by node")]),e._v(" "),n("el-button",{on:{click:e.getCheckedKeys}},[e._v("get by key")]),e._v(" "),n("el-button",{on:{click:e.setCheckedNodes}},[e._v("set by node")]),e._v(" "),n("el-button",{on:{click:e.setCheckedKeys}},[e._v("set by key")]),e._v(" "),n("el-button",{on:{click:e.resetChecked}},[e._v("reset")])],1)],1)},staticRenderFns:[]},{methods:{getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"Level two 2-1"},{id:9,label:"Level three 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])}},data:function(){return{data:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}}),"element-demo6":(a=1e3,i({render:function(){var a=this,e=a.$createElement,i=a._self._c||e;return i("div",[i("div",{staticClass:"custom-tree-container"},[i("div",{staticClass:"block"},[i("p",[a._v("Using render-content")]),a._v(" "),i("el-tree",{attrs:{data:a.data,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":a.renderContent}})],1),a._v(" "),i("div",{staticClass:"block"},[i("p",[a._v("Using scoped slot")]),a._v(" "),i("el-tree",{attrs:{data:a.data,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.node,n=e.data;return i("span",{staticClass:"custom-tree-node"},[i("span",[a._v(a._s(t.label))]),a._v(" "),i("span",[i("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.append(n)}}},[a._v("\n Append\n ")]),a._v(" "),i("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.remove(t,n)}}},[a._v("\n Delete\n ")])],1)])}}])})],1)])])},staticRenderFns:[]},{data:function(){var e,t=[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}];return(e={data:JSON.parse(JSON.stringify(t))}).data=JSON.parse(JSON.stringify(t)),e},methods:{append:function(e){var t={id:a++,label:"testtest",children:[]};e.children||this.$set(e,"children",[]),e.children.push(t)},remove:function(e,t){var n=e.parent,a=n.data.children||n.data,i=a.findIndex(function(e){return e.id===t.id});a.splice(i,1)},renderContent:function(e,t){var n=this,a=t.node,i=t.data;return t.store,e("span",{class:"custom-tree-node"},[e("span",[a.label]),e("span",[e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.append(i)}}},["Append"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.remove(a,i)}}},["Delete"])])])}}})),"element-demo7":i({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:t.filterText,callback:function(e){t.filterText=e},expression:"filterText"}}),t._v(" "),n("el-tree",{ref:"tree",staticClass:"filter-tree",attrs:{data:t.data,props:t.defaultProps,"default-expand-all":"","filter-node-method":t.filterNode}})],1)},staticRenderFns:[]},{watch:{filterText:function(e){this.$refs.tree.filter(e)}},methods:{filterNode:function(e,t){return!e||-1!==t.label.indexOf(e)}},data:function(){return{filterText:"",data:[{id:1,label:"Level one 1",children:[{id:4,label:"Level two 1-1",children:[{id:9,label:"Level three 1-1-1"},{id:10,label:"Level three 1-1-2"}]}]},{id:2,label:"Level one 2",children:[{id:5,label:"Level two 2-1"},{id:6,label:"Level two 2-2"}]},{id:3,label:"Level one 3",children:[{id:7,label:"Level two 3-1"},{id:8,label:"Level two 3-2"}]}],defaultProps:{children:"children",label:"label"}}}}),"element-demo8":i({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,props:e.defaultProps,accordion:""},on:{"node-click":e.handleNodeClick}})],1)},staticRenderFns:[]},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}}),"element-demo9":i({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":e.allowDrop,"allow-drag":e.allowDrag},on:{"node-drag-start":e.handleDragStart,"node-drag-enter":e.handleDragEnter,"node-drag-leave":e.handleDragLeave,"node-drag-over":e.handleDragOver,"node-drag-end":e.handleDragEnd,"node-drop":e.handleDrop}})],1)},staticRenderFns:[]},{data:function(){return{data:[{label:"Level one 1",children:[{label:"Level two 1-1",children:[{label:"Level three 1-1-1"}]}]},{label:"Level one 2",children:[{label:"Level two 2-1",children:[{label:"Level three 2-1-1"}]},{label:"Level two 2-2",children:[{label:"Level three 2-2-1"}]}]},{label:"Level one 3",children:[{label:"Level two 3-1",children:[{label:"Level three 3-1-1"}]},{label:"Level two 3-2",children:[{label:"Level three 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleDragStart:function(e,t){console.log("drag start",e)},handleDragEnter:function(e,t,n){console.log("tree drag enter: ",t.label)},handleDragLeave:function(e,t,n){console.log("tree drag leave: ",t.label)},handleDragOver:function(e,t,n){console.log("tree drag over: ",t.label)},handleDragEnd:function(e,t,n,a){console.log("tree drag end: ",t&&t.label,n)},handleDrop:function(e,t,n,a){console.log("tree drop: ",t.label,n)},allowDrop:function(e,t,n){return"Level two 3-1"!==t.data.label||"inner"!==n},allowDrag:function(e){return-1===e.data.label.indexOf("Level three 3-1-1")}}})}},r=n(0),o=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Display a set of data with hierarchies.")]),e._m(1),n("p",[e._v("Basic tree structure.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n export default {\n data() {\n return {\n data: [{\n label: 'Level one 1',\n children: [{\n label: 'Level two 1-1',\n children: [{\n label: 'Level three 1-1-1'\n }]\n }]\n }, {\n label: 'Level one 2',\n children: [{\n label: 'Level two 2-1',\n children: [{\n label: 'Level three 2-1-1'\n }]\n }, {\n label: 'Level two 2-2',\n children: [{\n label: 'Level three 2-2-1'\n }]\n }]\n }, {\n label: 'Level one 3',\n children: [{\n label: 'Level two 3-1',\n children: [{\n label: 'Level three 3-1-1'\n }]\n }, {\n label: 'Level two 3-2',\n children: [{\n label: 'Level three 3-2-1'\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleNodeClick(data) {\n console.log(data);\n }\n }\n };\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Used for node selection.")]),n("demo-block",[n("div",[n("p",[e._v("This example also shows how to load node data asynchronously.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n :props=\"props\"\n :load=\"loadNode\"\n lazy\n show-checkbox\n @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n export default {\n data() {\n return {\n props: {\n label: 'name',\n children: 'zones'\n },\n count: 1\n };\n },\n methods: {\n handleCheckChange(data, checked, indeterminate) {\n console.log(data, checked, indeterminate);\n },\n handleNodeClick(data) {\n console.log(data);\n },\n loadNode(node, resolve) {\n if (node.level === 0) {\n return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n }\n if (node.level > 3) return resolve([]);\n\n var hasChild;\n if (node.data.name === 'region1') {\n hasChild = true;\n } else if (node.data.name === 'region2') {\n hasChild = false;\n } else {\n hasChild = Math.random() > 0.5;\n }\n\n setTimeout(() => {\n var data;\n if (hasChild) {\n data = [{\n name: 'zone' + this.count++\n }, {\n name: 'zone' + this.count++\n }];\n } else {\n data = [];\n }\n\n resolve(data);\n }, 500);\n }\n }\n };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n :props=\"props\"\n :load=\"loadNode\"\n lazy\n show-checkbox>\n</el-tree>\n\n<script>\n export default {\n data() {\n return {\n props: {\n label: 'name',\n children: 'zones',\n isLeaf: 'leaf'\n },\n };\n },\n methods: {\n loadNode(node, resolve) {\n if (node.level === 0) {\n return resolve([{ name: 'region' }]);\n }\n if (node.level > 1) return resolve([]);\n\n setTimeout(() => {\n const data = [{\n name: 'leaf',\n leaf: true\n }, {\n name: 'zone'\n }];\n\n resolve(data);\n }, 500);\n }\n }\n };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("The checkbox of a node can be set as disabled.")]),n("demo-block",[n("div",[n("p",[e._v("In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n :data=\"data\"\n :props=\"defaultProps\"\n show-checkbox\n @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n export default {\n data() {\n return {\n data: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 3,\n label: 'Level two 2-1',\n children: [{\n id: 4,\n label: 'Level three 3-1-1'\n }, {\n id: 5,\n label: 'Level three 3-1-2',\n disabled: true\n }]\n }, {\n id: 2,\n label: 'Level two 2-2',\n disabled: true,\n children: [{\n id: 6,\n label: 'Level three 3-2-1'\n }, {\n id: 7,\n label: 'Level three 3-2-2',\n disabled: true\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label',\n disabled: 'disabled',\n },\n };\n }\n };\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Tree nodes can be initially expanded or checked")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("default-expanded-keys")]),e._v(" and "),n("code",[e._v("default-checked-keys")]),e._v(" to set initially expanded and initially checked nodes respectively. Note that for them to work, "),n("code",[e._v("node-key")]),e._v(" is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n :data=\"data\"\n show-checkbox\n node-key=\"id\"\n :default-expanded-keys=\"[2, 3]\"\n :default-checked-keys=\"[5]\"\n :props=\"defaultProps\">\n</el-tree>\n\n<script>\n export default {\n data() {\n return {\n data: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n<\/script>\n")])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, "),n("code",[e._v("node-key")]),e._v(" is required.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n :data=\"data\"\n show-checkbox\n default-expand-all\n node-key=\"id\"\n ref=\"tree\"\n highlight-current\n :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n <el-button @click=\"getCheckedNodes\">get by node</el-button>\n <el-button @click=\"getCheckedKeys\">get by key</el-button>\n <el-button @click=\"setCheckedNodes\">set by node</el-button>\n <el-button @click=\"setCheckedKeys\">set by key</el-button>\n <el-button @click=\"resetChecked\">reset</el-button>\n</div>\n\n<script>\n export default {\n methods: {\n getCheckedNodes() {\n console.log(this.$refs.tree.getCheckedNodes());\n },\n getCheckedKeys() {\n console.log(this.$refs.tree.getCheckedKeys());\n },\n setCheckedNodes() {\n this.$refs.tree.setCheckedNodes([{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 9,\n label: 'Level three 1-1-1'\n }]);\n },\n setCheckedKeys() {\n this.$refs.tree.setCheckedKeys([3]);\n },\n resetChecked() {\n this.$refs.tree.setCheckedKeys([]);\n }\n },\n\n data() {\n return {\n data: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("The content of tree nodes can be customized, so you can add icons or buttons as you will")]),n("demo-block",[n("div",[n("p",[e._v("There are two ways to customize template for tree nodes: "),n("code",[e._v("render-content")]),e._v(" and scoped slot. Use "),n("code",[e._v("render-content")]),e._v(" to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. If you prefer scoped slot, you'll have access to "),n("code",[e._v("node")]),e._v(" and "),n("code",[e._v("data")]),e._v(" in the scope, standing for the TreeNode object and node data of the current node respectively. Note that the "),n("code",[e._v("render-content")]),e._v(" demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),n("code",[e._v("render-content")]),e._v(" will work if relevant dependencies are correctly configured.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="custom-tree-container">\n <div class="block">\n <p>Using render-content</p>\n <el-tree\n :data="data"\n show-checkbox\n node-key="id"\n default-expand-all\n :expand-on-click-node="false"\n :render-content="renderContent">\n </el-tree>\n </div>\n <div class="block">\n <p>Using scoped slot</p>\n <el-tree\n :data="data"\n show-checkbox\n node-key="id"\n default-expand-all\n :expand-on-click-node="false">\n <span class="custom-tree-node" slot-scope="{ node, data }">\n <span>{{ node.label }}</span>\n <span>\n <el-button\n type="text"\n size="mini"\n @click="() => append(data)">\n Append\n </el-button>\n <el-button\n type="text"\n size="mini"\n @click="() => remove(node, data)">\n Delete\n </el-button>\n </span>\n </span>\n </el-tree>\n </div>\n</div>\n\n<script>\n let id = 1000;\n\n export default {\n data() {\n const data = [{\n id: 1,\n label: \'Level one 1\',\n children: [{\n id: 4,\n label: \'Level two 1-1\',\n children: [{\n id: 9,\n label: \'Level three 1-1-1\'\n }, {\n id: 10,\n label: \'Level three 1-1-2\'\n }]\n }]\n }, {\n id: 2,\n label: \'Level one 2\',\n children: [{\n id: 5,\n label: \'Level two 2-1\'\n }, {\n id: 6,\n label: \'Level two 2-2\'\n }]\n }, {\n id: 3,\n label: \'Level one 3\',\n children: [{\n id: 7,\n label: \'Level two 3-1\'\n }, {\n id: 8,\n label: \'Level two 3-2\'\n }]\n }];\n return {\n data: JSON.parse(JSON.stringify(data)),\n data: JSON.parse(JSON.stringify(data))\n }\n },\n\n methods: {\n append(data) {\n const newChild = { id: id++, label: \'testtest\', children: [] };\n if (!data.children) {\n this.$set(data, \'children\', []);\n }\n data.children.push(newChild);\n },\n\n remove(node, data) {\n const parent = node.parent;\n const children = parent.data.children || parent.data;\n const index = children.findIndex(d => d.id === data.id);\n children.splice(index, 1);\n },\n\n renderContent(h, { node, data, store }) {\n return (\n <span class="custom-tree-node">\n <span>{node.label}</span>\n <span>\n <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>\n <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>\n </span>\n </span>);\n }\n }\n };\n<\/script>\n\n<style>\n .custom-tree-node {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n padding-right: 8px;\n }\n</style>\n')])])])],2),e._m(8),n("p",[e._v("Tree nodes can be filtered")]),n("demo-block",[n("div",[n("p",[e._v("Invoke the "),n("code",[e._v("filter")]),e._v(" method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, "),n("code",[e._v("filter-node-method")]),e._v(" is required, and its value is the filtering method.")])]),n("template",{slot:"source"},[n("element-demo7")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-input\n placeholder=\"Filter keyword\"\n v-model=\"filterText\">\n</el-input>\n\n<el-tree\n class=\"filter-tree\"\n :data=\"data\"\n :props=\"defaultProps\"\n default-expand-all\n :filter-node-method=\"filterNode\"\n ref=\"tree\">\n</el-tree>\n\n<script>\n export default {\n watch: {\n filterText(val) {\n this.$refs.tree.filter(val);\n }\n },\n\n methods: {\n filterNode(value, data) {\n if (!value) return true;\n return data.label.indexOf(value) !== -1;\n }\n },\n\n data() {\n return {\n filterText: '',\n data: [{\n id: 1,\n label: 'Level one 1',\n children: [{\n id: 4,\n label: 'Level two 1-1',\n children: [{\n id: 9,\n label: 'Level three 1-1-1'\n }, {\n id: 10,\n label: 'Level three 1-1-2'\n }]\n }]\n }, {\n id: 2,\n label: 'Level one 2',\n children: [{\n id: 5,\n label: 'Level two 2-1'\n }, {\n id: 6,\n label: 'Level two 2-2'\n }]\n }, {\n id: 3,\n label: 'Level one 3',\n children: [{\n id: 7,\n label: 'Level two 3-1'\n }, {\n id: 8,\n label: 'Level two 3-2'\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n }\n };\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Only one node among the same level can be expanded at one time.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo8")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n :data=\"data\"\n :props=\"defaultProps\"\n accordion\n @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n export default {\n data() {\n return {\n data: [{\n label: 'Level one 1',\n children: [{\n label: 'Level two 1-1',\n children: [{\n label: 'Level three 1-1-1'\n }]\n }]\n }, {\n label: 'Level one 2',\n children: [{\n label: 'Level two 2-1',\n children: [{\n label: 'Level three 2-1-1'\n }]\n }, {\n label: 'Level two 2-2',\n children: [{\n label: 'Level three 2-2-1'\n }]\n }]\n }, {\n label: 'Level one 3',\n children: [{\n label: 'Level two 3-1',\n children: [{\n label: 'Level three 3-1-1'\n }]\n }, {\n label: 'Level two 3-2',\n children: [{\n label: 'Level three 3-2-1'\n }]\n }]\n }],\n defaultProps: {\n children: 'children',\n label: 'label'\n }\n };\n },\n methods: {\n handleNodeClick(data) {\n console.log(data);\n }\n }\n };\n<\/script>\n")])])])],2),e._m(10),e._m(11),n("demo-block",[n("template",{slot:"source"},[n("element-demo9")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n :data=\"data\"\n node-key=\"id\"\n default-expand-all\n @node-drag-start=\"handleDragStart\"\n @node-drag-enter=\"handleDragEnter\"\n @node-drag-leave=\"handleDragLeave\"\n @node-drag-over=\"handleDragOver\"\n @node-drag-end=\"handleDragEnd\"\n @node-drop=\"handleDrop\"\n draggable\n :allow-drop=\"allowDrop\"\n :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n export default {\n data() {\n return {\n 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 handleDragStart(node, ev) {\n console.log('drag start', node);\n },\n handleDragEnter(draggingNode, dropNode, ev) {\n console.log('tree drag enter: ', dropNode.label);\n },\n handleDragLeave(draggingNode, dropNode, ev) {\n console.log('tree drag leave: ', dropNode.label);\n },\n handleDragOver(draggingNode, dropNode, ev) {\n console.log('tree drag over: ', dropNode.label);\n },\n handleDragEnd(draggingNode, dropNode, dropType, ev) {\n console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n },\n handleDrop(draggingNode, dropNode, dropType, ev) {\n console.log('tree drop: ', dropNode.label, dropType);\n },\n allowDrop(draggingNode, dropNode, type) {\n if (dropNode.data.label === 'Level two 3-1') {\n return type !== 'inner';\n } else {\n return true;\n }\n },\n allowDrag(draggingNode) {\n return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;\n }\n }\n };\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tree"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selectable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selectable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Selectable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-leaf-node-in-lazy-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-leaf-node-in-lazy-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom leaf node in lazy mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-expanded-and-default-checked"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-expanded-and-default-checked","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default expanded and default checked")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checking-tree-nodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checking-tree-nodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checking tree nodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-node-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-node-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom node content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tree-node-filtering"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-node-filtering","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree node filtering")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accordion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"draggable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#draggable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Draggable")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can drag and drop Tree nodes by adding a "),n("code",[e._v("draggable")]),e._v(" attribute.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("tree data")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("text displayed when data is void")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("node-key")]),n("td",[e._v("unique identity key name for nodes, its value should be unique across the whole tree")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("configuration options, see the following table")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-after-expand")]),n("td",[e._v("whether to render child nodes only after a parent node is expanded for the first time")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("method for loading subtree data, only works when "),n("code",[e._v("lazy")]),e._v(" is true")]),n("td",[e._v("function(node, resolve)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("render function for tree node")]),n("td",[e._v("Function(h, { node, data, store }")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("highlight-current")]),n("td",[e._v("whether current node is highlighted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v("whether to expand all nodes by default")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-on-click-node")]),n("td",[e._v("whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("check-on-click-node")]),n("td",[e._v("whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("auto-expand-parent")]),n("td",[e._v("whether to expand father node when a child node is expanded")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("default-expanded-keys")]),n("td",[e._v("array of keys of initially expanded nodes")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-checkbox")]),n("td",[e._v("whether node is selectable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("check-strictly")]),n("td",[e._v("whether checked state of a node not affects its father and child nodes when "),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-checked-keys")]),n("td",[e._v("array of keys of initially checked nodes")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("current-node-key")]),n("td",[e._v("key of initially selected node")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-node-method")]),n("td",[e._v("this function will be executed on each node when use filter method. if return "),n("code",[e._v("false")]),e._v(", tree node will be hidden.")]),n("td",[e._v("Function(value, data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("whether only one node among the same level can be expanded at one time")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("horizontal indentation of nodes in adjacent levels in pixels")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("icon-class")]),n("td",[e._v("custome tree node icon")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("whether to lazy load leaf node, used with "),n("code",[e._v("load")]),e._v(" attribute")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("draggable")]),n("td",[e._v("whether enable tree nodes drag and drop")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-drag")]),n("td",[e._v("this function will be executed before dragging a node. If "),n("code",[e._v("false")]),e._v(" is returned, the node can not be dragged")]),n("td",[e._v("Function(node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("allow-drop")]),n("td",[e._v("this function will be executed before the dragging node is dropped. If "),n("code",[e._v("false")]),e._v(" is returned, the dragging node can not be dropped at the target node. "),n("code",[e._v("type")]),e._v(" has three possible values: 'prev' (inserting the dragging node before the target node), 'inner' (inserting the dragging node to the target node) and 'next' (inserting the dragging node after the target node)")]),n("td",[e._v("Function(draggingNode, dropNode, type)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("specify which key of node object is used as the node's label")]),n("td",[e._v("string, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("specify which node object is used as the node's subtree")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("specify which key of node object represents if node's checkbox is disabled")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("isLeaf")]),n("td",[e._v("specify whether the node is a leaf node, only works when lazy load is enabled")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Method")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Tree")]),this._v(" has the following method, which returns the currently selected array of nodes.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("filter")]),n("td",[e._v("filter all tree nodes, filtered nodes will be hidden")]),n("td",[e._v("Accept a parameter which will be used as first parameter for filter-node-method")])]),n("tr",[n("td",[e._v("updateKeyChildren")]),n("td",[e._v("set new data to node, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(key, data) Accept two parameters: 1. key of node 2. new data")])]),n("tr",[n("td",[e._v("getCheckedNodes")]),n("td",[e._v("If the node can be selected ("),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")]),e._v("), it returns the currently selected array of nodes")]),n("td",[e._v("(leafOnly, includeHalfChecked) Accept two boolean type parameters: 1. default value is "),n("code",[e._v("false")]),e._v(". If the parameter is "),n("code",[e._v("true")]),e._v(", it only returns the currently selected array of sub-nodes. 2. default value is "),n("code",[e._v("false")]),e._v(". If the parameter is "),n("code",[e._v("true")]),e._v(", the return value contains halfchecked nodes")])]),n("tr",[n("td",[e._v("setCheckedNodes")]),n("td",[e._v("set certain nodes to be checked, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("an array of nodes to be checked")])]),n("tr",[n("td",[e._v("getCheckedKeys")]),n("td",[e._v("If the node can be selected ("),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")]),e._v("), it returns the currently selected array of node's keys")]),n("td",[e._v("(leafOnly) Accept a boolean type parameter whose default value is "),n("code",[e._v("false")]),e._v(". If the parameter is "),n("code",[e._v("true")]),e._v(", it only returns the currently selected array of sub-nodes.")])]),n("tr",[n("td",[e._v("setCheckedKeys")]),n("td",[e._v("set certain nodes to be checked, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is "),n("code",[e._v("false")]),e._v(". If the parameter is "),n("code",[e._v("true")]),e._v(", it only returns the currently selected array of sub-nodes.")])]),n("tr",[n("td",[e._v("setChecked")]),n("td",[e._v("set node to be checked or not, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not.")])]),n("tr",[n("td",[e._v("getHalfCheckedNodes")]),n("td",[e._v("If the node can be selected ("),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")]),e._v("), it returns the currently half selected array of nodes")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getHalfCheckedKeys")]),n("td",[e._v("If the node can be selected ("),n("code",[e._v("show-checkbox")]),e._v(" is "),n("code",[e._v("true")]),e._v("), it returns the currently half selected array of node's keys")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getCurrentKey")]),n("td",[e._v("return the highlight node's key (null if no node is highlighted)")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("getCurrentNode")]),n("td",[e._v("return the highlight node's data (null if no node is highlighted)")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("setCurrentKey")]),n("td",[e._v("set highlighted node by key, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(key) the node's key to be highlighted. If "),n("code",[e._v("null")]),e._v(", cancel the currently highlighted node")])]),n("tr",[n("td",[e._v("setCurrentNode")]),n("td",[e._v("set highlighted node, only works when "),n("code",[e._v("node-key")]),e._v(" is assigned")]),n("td",[e._v("(node) the node to be highlighted")])]),n("tr",[n("td",[e._v("getNode")]),n("td",[e._v("get node by data or key")]),n("td",[e._v("(data) the node's data or key")])]),n("tr",[n("td",[e._v("remove")]),n("td",[e._v("remove a node, only works when node-key is assigned")]),n("td",[e._v("(data) the node's data or node to be deleted")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("append a child node to a given node in the tree")]),n("td",[e._v("(data, parentNode) 1. child node's data to be appended 2. parent node's data, key or node")])]),n("tr",[n("td",[e._v("insertBefore")]),n("td",[e._v("insert a node before a given node in the tree")]),n("td",[e._v("(data, refNode) 1. node's data to be inserted 2. reference node's data, key or node")])]),n("tr",[n("td",[e._v("insertAfter")]),n("td",[e._v("insert a node after a given node in the tree")]),n("td",[e._v("(data, refNode) 1. node's data to be inserted 2. reference node's data, key or node")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("node-click")]),n("td",[e._v("triggers when a node is clicked")]),n("td",[e._v("three parameters: node object corresponding to the node clicked, "),n("code",[e._v("node")]),e._v(" property of TreeNode, TreeNode itself")])]),n("tr",[n("td",[e._v("node-contextmenu")]),n("td",[e._v("triggers when a node is clicked by right button")]),n("td",[e._v("four parameters: event, node object corresponding to the node clicked, "),n("code",[e._v("node")]),e._v(" property of TreeNode, TreeNode itself")])]),n("tr",[n("td",[e._v("check-change")]),n("td",[e._v("triggers when the selected state of the node changes")]),n("td",[e._v("three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes")])]),n("tr",[n("td",[e._v("check")]),n("td",[e._v("triggers after clicking the checkbox of a node")]),n("td",[e._v("two parameters: node object corresponding to the node that is checked / unchecked, tree checked status object which has four props: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("triggers when current node changes")]),n("td",[e._v("two parameters: node object corresponding to the current node, "),n("code",[e._v("node")]),e._v(" property of TreeNode")])]),n("tr",[n("td",[e._v("node-expand")]),n("td",[e._v("triggers when current node open")]),n("td",[e._v("three parameters: node object corresponding to the node opened, "),n("code",[e._v("node")]),e._v(" property of TreeNode, TreeNode itself")])]),n("tr",[n("td",[e._v("node-collapse")]),n("td",[e._v("triggers when current node close")]),n("td",[e._v("three parameters: node object corresponding to the node closed, "),n("code",[e._v("node")]),e._v(" property of TreeNode, TreeNode itself")])]),n("tr",[n("td",[e._v("node-drag-start")]),n("td",[e._v("triggers when dragging starts")]),n("td",[e._v("two parameters: node object corresponding to the dragging node, event.")])]),n("tr",[n("td",[e._v("node-drag-enter")]),n("td",[e._v("triggers when the dragging node enters another node")]),n("td",[e._v("three parameters: node object corresponding to the dragging node, node object corresponding to the entering node, event.")])]),n("tr",[n("td",[e._v("node-drag-leave")]),n("td",[e._v("triggers when the dragging node leaves a node")]),n("td",[e._v("three parameters: node object corresponding to the dragging node, node object corresponding to the leaving node, event.")])]),n("tr",[n("td",[e._v("node-drag-over")]),n("td",[e._v("triggers when dragging over a node (like mouseover event)")]),n("td",[e._v("three parameters: node object corresponding to the dragging node, node object corresponding to the dragging over node, event.")])]),n("tr",[n("td",[e._v("node-drag-end")]),n("td",[e._v("triggers when dragging ends")]),n("td",[e._v("four parameters: node object corresponding to the dragging node, node object corresponding to the dragging end node (may be "),n("code",[e._v("undefined")]),e._v("), node drop type (before / after / inner), event.")])]),n("tr",[n("td",[e._v("node-drop")]),n("td",[e._v("triggers after the dragging node is dropped")]),n("td",[e._v("four parameters: node object corresponding to the dragging node, node object corresponding to the dropped node, node drop type (before / after / inner), event.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Custom content for tree nodes. The scope parameter is { node, data }")])])])])}],!1,null,null,null);t.default=o.exports},472:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show=!t.show}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-fade-in-linear"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in-linear")])]),t._v(" "),n("transition",{attrs:{name:"el-fade-in"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{show:!0}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show2=!t.show2}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-zoom-in-center"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-center")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-top"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-top")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-bottom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{show2:!0}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show3=!t.show3}}},[t._v("Click Me")]),t._v(" "),n("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[n("el-collapse-transition",[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show3,expression:"show3"}]},[n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")]),t._v(" "),n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{show3:!0}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("We have two fading effects: "),n("code",[e._v("el-fade-in-linear")]),e._v(" and "),n("code",[e._v("el-fade-in")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <el-button @click="show = !show">Click Me</el-button>\n\n <div style="display: flex; margin-top: 20px; height: 100px;">\n <transition name="el-fade-in-linear">\n <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n </transition>\n <transition name="el-fade-in">\n <div v-show="show" class="transition-box">.el-fade-in</div>\n </transition>\n </div>\n </div>\n</template>\n\n<script>\n export default {\n data: () => ({\n show: true\n })\n }\n<\/script>\n\n<style>\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n</style>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[n("code",[e._v("el-zoom-in-center")]),e._v(", "),n("code",[e._v("el-zoom-in-top")]),e._v(" and "),n("code",[e._v("el-zoom-in-bottom")]),e._v(" are provided.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <el-button @click="show2 = !show2">Click Me</el-button>\n\n <div style="display: flex; margin-top: 20px; height: 100px;">\n <transition name="el-zoom-in-center">\n <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n </transition>\n\n <transition name="el-zoom-in-top">\n <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n </transition>\n\n <transition name="el-zoom-in-bottom">\n <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n </transition>\n </div>\n </div>\n</template>\n\n<script>\n export default {\n data: () => ({\n show2: true\n })\n }\n<\/script>\n\n<style>\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <el-button @click="show3 = !show3">Click Me</el-button>\n\n <div style="margin-top: 20px; height: 200px;">\n <el-collapse-transition>\n <div v-show="show3">\n <div class="transition-box">el-collapse-transition</div>\n <div class="transition-box">el-collapse-transition</div>\n </div>\n </el-collapse-transition>\n </div>\n </div>\n</template>\n\n<script>\n export default {\n data: () => ({\n show3: true\n })\n }\n<\/script>\n\n<style>\n .transition-box {\n margin-bottom: 10px;\n width: 200px;\n height: 100px;\n border-radius: 4px;\n background-color: #409EFF;\n text-align: center;\n color: #fff;\n padding: 40px 20px;\n box-sizing: border-box;\n margin-right: 20px;\n }\n</style>\n')])])])],2),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"built-in-transition"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#built-in-transition","aria-hidden":"true"}},[this._v("¶")]),this._v(" Built-in transition")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can use Element's built-in transitions directly. Before that, please read the "),n("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[e._v("transition docs")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fade"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[this._v("¶")]),this._v(" fade")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zoom"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[this._v("¶")]),this._v(" zoom")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" collapse")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("For collapse effect, use the "),n("code",[e._v("el-collapse-transition")]),e._v(" component.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"on-demand"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[this._v("¶")]),this._v(" On demand")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("// fade/zoom\nimport 'element-ui/lib/theme-chalk/base.css';\n// collapse\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],!1,null,null,null);t.default=r.exports},473:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{data:t.data},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})]],2)},staticRenderFns:[]},{data:function(){return{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"Option "+n,disabled:n%4==0});return t}(),value:[1,4]}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{filterable:"","filter-method":t.filterMethod,"filter-placeholder":"State Abbreviations",data:t.data},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})]],2)},staticRenderFns:[]},{data:function(){var n,a;return{data:(n=[],a=["CA","IL","MD","TX","FL","CO","CT"],["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(e,t){n.push({label:e,key:t,initial:a[t]})}),n),value:[],filterMethod:function(e,t){return-1<t.initial.toLowerCase().indexOf(e.toLowerCase())}}}}),"element-demo2":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[n._v("Customize data items using render-content")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":n.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},model:{value:n.value,callback:function(e){n.value=e},expression:"value"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("Operation")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("Operation")])],1),n._v(" "),a("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[n._v("Customize data items using scoped slot")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.option;return a("span",{},[n._v(n._s(t.key)+" - "+n._s(t.label))])}}]),model:{value:n.value4,callback:function(e){n.value4=e},expression:"value4"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("Operation")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("Operation")])],1)],1)],1)]],2)},staticRenderFns:[]},{data:function(){return this.$createElement,{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"Option "+n,disabled:n%4==0});return t}(),value:[1],value4:[1],renderFunc:function(e,t){return e("span",[t.key," - ",t.label])}}},methods:{handleChange:function(e,t,n){console.log(e,t,n)}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:t.data},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})]],2)},staticRenderFns:[]},{data:function(){return{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({value:n,desc:"Option "+n,disabled:n%4==0});return t}(),value:[]}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Data is passed to Transfer via the "),n("code",[e._v("data")]),e._v(" attribute. The data needs to be an object array, and each object should have these attributes: "),n("code",[e._v("key")]),e._v(" being the identification of the data item, "),n("code",[e._v("label")]),e._v(" being the displayed text, and "),n("code",[e._v("disabled")]),e._v(" indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to "),n("code",[e._v("v-model")]),e._v(", and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the "),n("code",[e._v("v-model")]),e._v(" with an array.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-transfer\n v-model="value"\n :data="data">\n </el-transfer>\n</template>\n\n<script>\n export default {\n data() {\n const generateData = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n key: i,\n label: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value: [1, 4]\n };\n }\n };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("You can search and filter data items.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("filterable")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" to enable filter mode. By default, if the data item "),n("code",[e._v("label")]),e._v(" contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the "),n("code",[e._v("filter-method")]),e._v(" attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-transfer\n filterable\n :filter-method=\"filterMethod\"\n filter-placeholder=\"State Abbreviations\"\n v-model=\"value\"\n :data=\"data\">\n </el-transfer>\n</template>\n\n<script>\n export default {\n data() {\n const generateData = _ => {\n const data = [];\n const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n states.forEach((city, index) => {\n data.push({\n label: city,\n key: index,\n initial: initials[index]\n });\n });\n return data;\n };\n return {\n data: generateData(),\n value: [],\n filterMethod(query, item) {\n return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n }\n };\n }\n };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("titles")]),e._v(", "),n("code",[e._v("button-texts")]),e._v(", "),n("code",[e._v("render-content")]),e._v(" and "),n("code",[e._v("format")]),e._v(" to respectively customize list titles, button texts, render function for data items, checking status texts in list header. Plus, you can also use scoped slot to customize data items. For list footer contents, two named slots are provided: "),n("code",[e._v("left-footer")]),e._v(" and "),n("code",[e._v("right-footer")]),e._v(". Plus, if you want some items initially checked, you can use "),n("code",[e._v("left-default-checked")]),e._v(" and "),n("code",[e._v("right-default-checked")]),e._v(". Finally, this example demonstrate the "),n("code",[e._v("change")]),e._v(" event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),n("code",[e._v("render-content")]),e._v(" will work if relevant dependencies are correctly configured.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>\n <div style="text-align: center">\n <el-transfer\n style="text-align: left; display: inline-block"\n v-model="value"\n filterable\n :left-default-checked="[2, 3]"\n :right-default-checked="[1]"\n :render-content="renderFunc"\n :titles="[\'Source\', \'Target\']"\n :button-texts="[\'To left\', \'To right\']"\n :format="{\n noChecked: \'${total}\',\n hasChecked: \'${checked}/${total}\'\n }"\n @change="handleChange"\n :data="data">\n <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n </el-transfer>\n <p style="text-align: center; margin: 50px 0 20px">Customize data items using scoped slot</p>\n <div style="text-align: center">\n <el-transfer\n style="text-align: left; display: inline-block"\n v-model="value4"\n filterable\n :left-default-checked="[2, 3]"\n :right-default-checked="[1]"\n :titles="[\'Source\', \'Target\']"\n :button-texts="[\'To left\', \'To right\']"\n :format="{\n noChecked: \'${total}\',\n hasChecked: \'${checked}/${total}\'\n }"\n @change="handleChange"\n :data="data">\n <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>\n <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>\n <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>\n </el-transfer>\n </div>\n </div>\n</template>\n\n<style>\n .transfer-footer {\n margin-left: 20px;\n padding: 6px 5px;\n }\n</style>\n\n<script>\n export default {\n data() {\n const generateData = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n key: i,\n label: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value: [1],\n value4: [1],\n renderFunc(h, option) {\n return <span>{ option.key } - { option.label }</span>;\n }\n };\n },\n\n methods: {\n handleChange(value, direction, movedKeys) {\n console.log(value, direction, movedKeys);\n }\n }\n };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("The data items in this example do not have "),n("code",[e._v("key")]),e._v("s or "),n("code",[e._v("label")]),e._v("s, instead they have "),n("code",[e._v("value")]),e._v("s and "),n("code",[e._v("desc")]),e._v("s. So you need to set aliases for "),n("code",[e._v("key")]),e._v(" and "),n("code",[e._v("label")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-transfer\n v-model="value"\n :props="{\n key: \'value\',\n label: \'desc\'\n }"\n :data="data">\n </el-transfer>\n</template>\n\n<script>\n export default {\n data() {\n const generateData = _ => {\n const data = [];\n for (let i = 1; i <= 15; i++) {\n data.push({\n value: i,\n desc: `Option ${ i }`,\n disabled: i % 4 === 0\n });\n }\n return data;\n };\n return {\n data: generateData(),\n value: []\n };\n }\n };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transfer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filterable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filterable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prop-aliases"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prop-aliases","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prop aliases")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("By default, Transfer looks for "),n("code",[e._v("key")]),e._v(", "),n("code",[e._v("label")]),e._v(" and "),n("code",[e._v("disabled")]),e._v(" in a data item. If your data items have different key names, you can use the "),n("code",[e._v("props")]),e._v(" attribute to define aliases.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("data source")]),n("td",[e._v("array[{ key, label, disabled }]")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("whether Transfer is filterable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-placeholder")]),n("td",[e._v("placeholder for the filter input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Enter keyword")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("custom filter method")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("target-order")]),n("td",[e._v("order strategy for elements in the target list. If set to "),n("code",[e._v("original")]),e._v(", the elements will keep the same order as the data source. If set to "),n("code",[e._v("push")]),e._v(", the newly added elements will be pushed to the bottom. If set to "),n("code",[e._v("unshift")]),e._v(", the newly added elements will be inserted on the top")]),n("td",[e._v("string")]),n("td",[e._v("original / push / unshift")]),n("td",[e._v("original")])]),n("tr",[n("td",[e._v("titles")]),n("td",[e._v("custom list titles")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['List 1', 'List 2']")])]),n("tr",[n("td",[e._v("button-texts")]),n("td",[e._v("custom button texts")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("custom render function for data items")]),n("td",[e._v("function(h, option)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("texts for checking status in list header")]),n("td",[e._v("object{noChecked, hasChecked}")]),n("td",[e._v("—")]),n("td",[e._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("prop aliases for data source")]),n("td",[e._v("object{key, label, disabled}")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("left-default-checked")]),n("td",[e._v("key array of initially checked data items of the left list")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("right-default-checked")]),n("td",[e._v("key array of initially checked data items of the right list")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("left-footer")]),n("td",[e._v("content of left list footer")])]),n("tr",[n("td",[e._v("right-footer")]),n("td",[e._v("content of right list footer")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Custom content for data items. The scope parameter is { option }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("clearQuery")]),n("td",[e._v("clear the filter keyword of a certain panel")]),n("td",[e._v("'left' / 'right'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when data items change in the right list")]),n("td",[e._v("key array of current data items in the right list, transfer direction (left or right), moved item keys")])]),n("tr",[n("td",[e._v("left-check-change")]),n("td",[e._v("triggers when end user changes the checked state of any data item in the left list")]),n("td",[e._v("key array of currently checked items, key array of items whose checked state have changed")])]),n("tr",[n("td",[e._v("right-check-change")]),n("td",[e._v("triggers when end user changes the checked state of any data item in the right list")]),n("td",[e._v("key array of currently checked items, key array of items whose checked state have changed")])])])])}],!1,null,null,null);t.default=r.exports},475:function(e,t,n){"use strict";n.r(t);var a={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Design Disciplines"},{path:"/nav",name:"Navigation"}]}}},i=(n(315),n(0)),l=Object(i.a)(a,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);t.default=l.exports},476:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("div",{staticClass:"radio"},[n._v("\n Order: \n "),a("el-radio-group",{model:{value:n.reverse,callback:function(e){n.reverse=e},expression:"reverse"}},[a("el-radio",{attrs:{label:!0}},[n._v("descending")]),n._v(" "),a("el-radio",{attrs:{label:!1}},[n._v("ascending")])],1)],1),n._v(" "),a("el-timeline",{attrs:{reverse:n.reverse}},n._l(n.activities,function(e,t){return a("el-timeline-item",{key:t,attrs:{timestamp:e.timestamp}},[n._v("\n "+n._s(e.content)+"\n ")])}),1)],1)])},staticRenderFns:[]},{data:function(){return{reverse:!0,activities:[{content:"Event start",timestamp:"2018-04-15"},{content:"Approved",timestamp:"2018-04-13"},{content:"Success",timestamp:"2018-04-11"}]}}}),"element-demo1":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("el-timeline",n._l(n.activities,function(e,t){return a("el-timeline-item",{key:t,attrs:{icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp}},[n._v("\n "+n._s(e.content)+"\n ")])}),1)],1)])},staticRenderFns:[]},{data:function(){return{activities:[{content:"Custom icon",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"Custom color",timestamp:"2018-04-03 20:46",color:"#0bbd87"},{content:"Custom size",timestamp:"2018-04-03 20:46",size:"large"},{content:"Default node",timestamp:"2018-04-03 20:46"}]}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("el-timeline",[n("el-timeline-item",{attrs:{timestamp:"2018/4/12",placement:"top"}},[n("el-card",[n("h4",[e._v("Update Github template")]),e._v(" "),n("p",[e._v("Tom committed 2018/4/12 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/3",placement:"top"}},[n("el-card",[n("h4",[e._v("Update Github template")]),e._v(" "),n("p",[e._v("Tom committed 2018/4/3 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/2",placement:"top"}},[n("el-card",[n("h4",[e._v("Update Github template")]),e._v(" "),n("p",[e._v("Tom committed 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]},{})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Visually display timeline.")]),e._m(1),n("p",[e._v("Timeline can be split into multiple activities in ascending or descending. Timestamps are important features that distinguish them from other components. Note the difference with Steps.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n <div class="radio">\n Order: \n <el-radio-group v-model="reverse">\n <el-radio :label="true">descending</el-radio>\n <el-radio :label="false">ascending</el-radio>\n </el-radio-group>\n </div>\n\n <el-timeline :reverse="reverse">\n <el-timeline-item\n v-for="(activity, index) in activities"\n :key="index"\n :timestamp="activity.timestamp">\n {{activity.content}}\n </el-timeline-item>\n </el-timeline>\n</div>\n\n<script>\n export default {\n data() {\n return {\n reverse: true,\n activities: [{\n content: \'Event start\',\n timestamp: \'2018-04-15\'\n }, {\n content: \'Approved\',\n timestamp: \'2018-04-13\'\n }, {\n content: \'Success\',\n timestamp: \'2018-04-11\'\n }]\n };\n }\n };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Size, color, and icons can be customized in node.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n <el-timeline>\n <el-timeline-item\n v-for=\"(activity, index) in activities\"\n :key=\"index\"\n :icon=\"activity.icon\"\n :type=\"activity.type\"\n :color=\"activity.color\"\n :size=\"activity.size\"\n :timestamp=\"activity.timestamp\">\n {{activity.content}}\n </el-timeline-item>\n </el-timeline>\n</div>\n\n<script>\n export default {\n data() {\n return {\n activities: [{\n content: 'Custom icon',\n timestamp: '2018-04-12 20:46',\n size: 'large',\n type: 'primary',\n icon: 'el-icon-more'\n }, {\n content: 'Custom color',\n timestamp: '2018-04-03 20:46',\n color: '#0bbd87'\n }, {\n content: 'Custom size',\n timestamp: '2018-04-03 20:46',\n size: 'large'\n }, {\n content: 'Default node',\n timestamp: '2018-04-03 20:46'\n }]\n };\n }\n };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Timestamp can be placed on top of content when content is too high.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n <el-timeline>\n <el-timeline-item timestamp="2018/4/12" placement="top">\n <el-card>\n <h4>Update Github template</h4>\n <p>Tom committed 2018/4/12 20:46</p>\n </el-card>\n </el-timeline-item>\n <el-timeline-item timestamp="2018/4/3" placement="top">\n <el-card>\n <h4>Update Github template</h4>\n <p>Tom committed 2018/4/3 20:46</p>\n </el-card>\n </el-timeline-item>\n <el-timeline-item timestamp="2018/4/2" placement="top">\n <el-card>\n <h4>Update Github template</h4>\n <p>Tom committed 2018/4/2 20:46</p>\n </el-card>\n </el-timeline-item>\n </el-timeline>\n</div>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timeline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-node"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-node","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom node")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-timestamp"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-timestamp","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom timestamp")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("reverse")]),n("td",[e._v("whether the node is ascending or descending, default is ascending")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("timestamp")]),n("td",[e._v("timestamp content")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-timestamp")]),n("td",[e._v("whether to show timestamp")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("position of timestamp")]),n("td",[e._v("string")]),n("td",[e._v("top / bottom")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("node type")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("background color of node")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("node size")]),n("td",[e._v("string")]),n("td",[e._v("normal / large")]),n("td",[e._v("normal")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon class name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timeline-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline-Item Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Custom content for timeline item")])]),n("tr",[n("td",[e._v("dot")]),n("td",[e._v("Custom defined node")])])])])}],!1,null,null,null);t.default=r.exports},477:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("A Desktop UI Library")]),t("p",[this._v("Element, a Vue 2.0 based component library for developers, designers and product managers")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("p",[this._v("Sponsored by Tipe.io")]),t("p",[this._v("Next Generation API-first CMS")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("a",{staticClass:"sponsor",attrs:{href:"https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index",target:"_blank"}},[t("img",{attrs:{width:"45px",src:a(153),alt:"duohui"}}),t("div",[t("p",[this._v("Sponsored by 多会")]),t("p",[this._v("炫酷的新一代活动票务系统")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"intro-banner"},[t("img",{attrs:{src:a(213),alt:""}}),t("div",{staticClass:"intro-text"},[t("p",[this._v("Theme customization is available!")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"title"},[t("div",[t("p",[this._v("Click here")]),t("p",[this._v("Make your own theme")])])])}],i=a(18),l=a.n(i),r=a(1),o={created:function(){var t=this;this.throttledHandleScroll=l()(10,!0,function(e){t.handleScroll(e)})},methods:{handleScroll:function(e){var t=this.$refs.indexMainImg,n=t.getBoundingClientRect(),a=t.clientHeight+55,i=2*(180-n.top);i<0&&(i=0),a<i&&(i=a),this.mainImgOffset=i},hideIntroB:function(){Object(r.i)(document.body,"el-loading-parent--hidden"),localStorage.setItem("KNOW_THEME","true"),this.showIntroB=!1},hideIntroA:function(){var e=document.querySelector(".nav-item-theme");this.introBX=e.offsetLeft+.5*e.clientWidth-150,this.introBY=e.offsetTop+40,this.showIntroA=!1,this.showIntroB=!0}},data:function(){return{lang:this.$route.meta.lang,mainImgOffset:0,showIntroA:!1,showIntroB:!1,introBY:0,introBX:0}},beforeDestroy:function(){window.removeEventListener("scroll",this.throttledHandleScroll)},mounted:function(){window.addEventListener("scroll",this.throttledHandleScroll),localStorage.getItem("KNOW_THEME")||(this.showIntroA=!0,Object(r.a)(document.body,"el-loading-parent--hidden"))}},s=(a(316),a(0)),d=Object(s.a)(o,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("div",{ref:"indexMainImg",staticClass:"jumbotron"},[n("img",{attrs:{src:a(206),alt:""}}),n("div",{staticClass:"jumbotron-red",style:{height:e.mainImgOffset+"px"}},[n("img",{attrs:{src:a(207),alt:""}})])]),n("div",{staticClass:"sponsors"},[n("a",{directives:[{name:"show",rawName:"v-show",value:"zh-CN"!==e.lang,expression:"lang !== 'zh-CN'"}],staticClass:"sponsor",attrs:{href:"https://tipe.io/?ref=element",target:"_blank"}},[n("img",{attrs:{width:"35px",src:a(152),alt:"tipe.io"}}),e._m(1)]),e._m(2)]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(208),alt:""}}),n("h3",[e._v("Guide")]),n("p",[e._v("Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.")]),n("router-link",{attrs:{"active-class":"active",to:"/en-US/guide/design",exact:""}},[e._v("View Detail\n ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(209),alt:""}}),n("h3",[e._v("Component")]),n("p",[e._v("Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.")]),n("router-link",{attrs:{"active-class":"active",to:"/en-US/component/layout",exact:""}},[e._v("View Detail\n ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(210),alt:""}}),n("h3",[e._v("Theme")]),n("p",[e._v("Online theme roller, visualize custom and manage site themes and component styles")]),n("router-link",{attrs:{"active-class":"active",to:"/en-US/theme",exact:""}},[e._v("View Detail\n ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(211),alt:""}}),n("h3",[e._v("Resource")]),n("p",[e._v("Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.")]),n("router-link",{attrs:{"active-class":"active",to:"/en-US/resource",exact:""}},[e._v("View Detail\n ")])],1)])])]),e.showIntroA?n("div",{staticClass:"theme-intro-a",on:{click:e.hideIntroA}},[e._m(3),n("div",{staticClass:"mask"})]):e._e(),e.showIntroB?n("div",{staticClass:"theme-intro-b",on:{click:e.hideIntroB}},[n("div",{staticClass:"intro-banner",style:{left:e.introBX+"px",top:e.introBY+"px"}},[n("img",{attrs:{src:a(212),alt:""}}),e._m(4)])]):e._e()])},n,!1,null,"7ded5054",null);t.default=d.exports},478:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:""}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),n("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]},{data:function(){return{value1:new Date(2016,9,10,18,40),value2:new Date(2016,9,10,18,40)}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:t.startTime,callback:function(e){t.startTime=e},expression:"startTime"}}),t._v(" "),n("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:t.startTime}},model:{value:t.endTime,callback:function(e){t.endTime=e},expression:"endTime"}})]],2)},staticRenderFns:[]},{data:function(){return{startTime:"",endTime:""}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),n("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Start time","end-placeholder":"End time"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]},{data:function(){return{value1:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value2:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)]}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Use Time Picker for time input.")]),e._m(1),n("p",[e._v("Provide a list of fixed time for users to choose.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("el-time-select")]),e._v(" label, then assign start time, end time and time step with "),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v(" and "),n("code",[e._v("step")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-time-select\n v-model=\"value\"\n :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\"\n placeholder=\"Select time\">\n</el-time-select>\n\n<script>\n export default {\n data() {\n return {\n value: ''\n };\n }\n }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Can pick an arbitrary time.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("el-time-picker")]),e._v(" label, and you can limit the time range by specifying "),n("code",[e._v("selectableRange")]),e._v(". By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the "),n("code",[e._v("arrow-control")]),e._v(" attribute is set.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-time-picker\n v-model="value1"\n :picker-options="{\n selectableRange: \'18:30:00 - 20:30:00\'\n }"\n placeholder="Arbitrary time">\n </el-time-picker>\n <el-time-picker\n arrow-control\n v-model="value2"\n :picker-options="{\n selectableRange: \'18:30:00 - 20:30:00\'\n }"\n placeholder="Arbitrary time">\n </el-time-picker>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value1: new Date(2016, 9, 10, 18, 40),\n value2: new Date(2016, 9, 10, 18, 40)\n };\n }\n }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("If start time is picked at first, then the end time will change accordingly.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-time-select\n placeholder=\"Start time\"\n v-model=\"startTime\"\n :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\">\n </el-time-select>\n <el-time-select\n placeholder=\"End time\"\n v-model=\"endTime\"\n :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\">\n </el-time-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n startTime: '',\n endTime: ''\n };\n }\n }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Can pick an arbitrary time range.")]),n("demo-block",[n("div",[n("p",[e._v("We can pick a time range by adding an "),n("code",[e._v("is-range")]),e._v(" attribute. Also, "),n("code",[e._v("arrow-control")]),e._v(" is supported in range mode.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-time-picker\n is-range\n v-model="value1"\n range-separator="To"\n start-placeholder="Start time"\n end-placeholder="End time">\n </el-time-picker>\n <el-time-picker\n is-range\n arrow-control\n v-model="value2"\n range-separator="To"\n start-placeholder="Start time"\n end-placeholder="End time">\n </el-time-picker>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n };\n }\n }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" TimePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fixed-time-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fixed time picker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arbitrary-time-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arbitrary time picker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fixed-time-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fixed time range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arbitrary-time-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arbitrary time range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("date(TimePicker) / string(TimeSelect)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("whether TimePicker is read only")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether TimePicker is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("whether the input is editable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder in non-range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("placeholder for the start time in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("placeholder for the end time in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-range")]),n("td",[e._v("whether to pick a time range, only works with "),n("code",[e._v("<el-time-picker>")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("arrow-control")]),n("td",[e._v("whether to pick time using arrow buttons, only works with "),n("code",[e._v("<el-time-picker>")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("alignment")]),n("td",[e._v("left / center / right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for TimePicker's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("additional options, check the table below")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("range separator")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("optional, default date of the calendar")]),n("td",[e._v("Date for TimePicker, string for TimeSelect")]),n("td",[e._v("anything accepted by "),n("code",[e._v("new Date()")]),e._v(" for TimePicker, selectable value for TimeSelect")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("optional, only for TimePicker, format of binding value. If not specified, the binding value will be a Date object")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Custom prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-time")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Custom clear icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"time-select-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Select Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("start")]),n("td",[e._v("start time")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("09:00")])]),n("tr",[n("td",[e._v("end")]),n("td",[e._v("end time")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("18:00")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("time step")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:30")])]),n("tr",[n("td",[e._v("minTime")]),n("td",[e._v("minimum time, any time before this time will be disabled")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:00")])]),n("tr",[n("td",[e._v("maxTime")]),n("td",[e._v("maximum time, any time after this time will be disabled")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"time-picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Time Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("selectableRange")]),n("td",[e._v("available time range, e.g."),n("code",[e._v("'18:30:00 - 20:30:00'")]),e._v("or"),n("code",[e._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),n("td",[e._v("string / array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("format of the picker")]),n("td",[e._v("string")]),n("td",[e._v("hour "),n("code",[e._v("HH")]),e._v(", minute "),n("code",[e._v("mm")]),e._v(", second "),n("code",[e._v("ss")]),e._v(", AM/PM "),n("code",[e._v("A")])]),n("td",[e._v("HH:mm:ss")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when user confirms the value")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the Input component")]),n("td",[e._v("-")])])])])}],!1,null,null,null);t.default=r.exports},479:function(e,t,a){"use strict";a.r(t);var n={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(e){document.body.style.overflow=e?"hidden":""}},methods:{enlarge:function(e,t){var n=t.target,a={},i=document;a.left=(i.body.scrollWidth-e)/2,a.top=100,this.imgUrl=n.src,this.imgBound=n.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=e+"px",this.showDialog=!0}}},i=(a(317),a(0)),l=Object(i.a)(n,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("h2",[t._v("Navigation")]),t._m(0),t._m(1),n("div",{staticClass:"block"},[n("h3",[t._v("Side Navigation")]),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:9}},[n("p",[t._v("Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:15}},[n("img",{attrs:{src:a(214),alt:"Level 1 categories"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Level 1 categories")]),n("p",[t._v("Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.")]),n("img",{attrs:{src:a(215),alt:"Level 2 categories"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Level 2 categories")]),n("p",[t._v("Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.")]),n("img",{attrs:{src:a(216),alt:"Level 3 categories"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Level 3 categories")]),n("p",[t._v("Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.")])])],1)],1),n("div",{staticClass:"block"},[n("h3",[t._v("Top Navigation")]),n("el-row",[n("el-col",{attrs:{span:10}},[n("p",[t._v("Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:14}},[n("img",{attrs:{src:a(217),alt:""},on:{click:function(e){t.enlarge(846,e)}}}),n("p",[t._v("Suitable for sites with few navigations and large chunks.")])])],1)],1),n("transition",{attrs:{name:"fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(e){t.showDialog=!1}}})]),n("transition",{attrs:{name:"zoom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:t.imgWrapStyle,on:{click:function(e){t.showDialog=!1}}},[n("div",{staticClass:"imgWrap",style:t.imgStyle},[n("img",{attrs:{src:t.imgUrl,alt:""}})])])])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("p",[this._v("Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("h3",[this._v("Choose the right navigation")]),t("p",[this._v("An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation")])])}],!1,null,"921214ac",null);t.default=l.exports},480:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[this._v("\n Scroll down to see the bottom-right button.\n "),t("el-backtop",{attrs:{target:".page-component__scroll .el-scrollbar__wrap"}})]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[this._v("\n Scroll down to see the bottom-right button.\n "),t("el-backtop",{attrs:{target:".page-component__scroll .el-scrollbar__wrap",bottom:100}},[t("div",{staticStyle:{"{\n height":"100%",width:"100%","background-color":"#f2f5f6","box-shadow":"0 0 6px rgba(0,0,0, .12)","text-align":"center","line-height":"40px",color:"#1989fa"}},[this._v("\n UP\n ")])])]],2)},staticRenderFns:[]},{})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("A button to back to top")]),e._m(1),n("p",[e._v("Scroll down to see the bottom-right button.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n Scroll down to see the bottom-right button.\n <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>\n</template>\n')])])])],2),e._m(2),n("p",[e._v("Display area is 40px * 40px.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n Scroll down to see the bottom-right button.\n <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">\n <div\n style="{\n height: 100%;\n width: 100%;\n background-color: #f2f5f6;\n box-shadow: 0 0 6px rgba(0,0,0, .12);\n text-align: center;\n line-height: 40px;\n color: #1989fa;\n }"\n >\n UP\n </div>\n </el-backtop>\n</template>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"backtop"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#backtop","aria-hidden":"true"}},[this._v("¶")]),this._v(" Backtop")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizations"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizations")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("target")]),n("td",[e._v("the target to trigger scroll")]),n("td",[e._v("string")]),n("td"),n("td")]),n("tr",[n("td",[e._v("visibility-height")]),n("td",[e._v("the button will not show until the scroll height reaches this value")]),n("td",[e._v("number")]),n("td"),n("td",[e._v("200")])]),n("tr",[n("td",[e._v("right")]),n("td",[e._v("right distance")]),n("td",[e._v("number")]),n("td"),n("td",[e._v("40")])]),n("tr",[n("td",[e._v("bottom")]),n("td",[e._v("bottom distance")]),n("td",[e._v("number")]),n("td"),n("td",[e._v("40")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("triggers when click")]),n("td",[e._v("click event")])])])])}],!1,null,null,null);t.default=r.exports},481:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("Tag 1")]),e._v(" "),n("el-tag",{attrs:{type:"success"}},[e._v("Tag 2")]),e._v(" "),n("el-tag",{attrs:{type:"info"}},[e._v("Tag 3")]),e._v(" "),n("el-tag",{attrs:{type:"warning"}},[e._v("Tag 4")]),e._v(" "),n("el-tag",{attrs:{type:"danger"}},[e._v("Tag 5")])],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",t._l(t.tags,function(e){return n("el-tag",{key:e.name,attrs:{closable:"",type:e.type}},[t._v("\n "+t._s(e.name)+"\n")])}),1)},staticRenderFns:[]},{data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}]}}}),"element-demo2":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[n._l(n.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(e){n.handleClose(t)}}},[n._v("\n "+n._s(t)+"\n")])}),n._v(" "),n.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:n.handleInputConfirm},nativeOn:{keyup:function(e){return"button"in e||!n._k(e.keyCode,"enter",13,e.key,"Enter")?n.handleInputConfirm(e):null}},model:{value:n.inputValue,callback:function(e){n.inputValue=e},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:n.showInput}},[n._v("+ New Tag")])],2)},staticRenderFns:[]},{data:function(){return{dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(e){this.dynamicTags.splice(this.dynamicTags.indexOf(e),1)},showInput:function(){var t=this;this.inputVisible=!0,this.$nextTick(function(e){t.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("Default")]),e._v(" "),n("el-tag",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),n("el-tag",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),n("el-tag",{attrs:{size:"mini"}},[e._v("Mini")])],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"tag-group"},[n("span",{staticClass:"tag-group__title"},[t._v("Dark")]),t._v(" "),t._l(t.items,function(e){return n("el-tag",{key:e.label,attrs:{type:e.type,effect:"dark"}},[t._v("\n "+t._s(e.label)+"\n ")])})],2),t._v(" "),n("div",{staticClass:"tag-group"},[n("span",{staticClass:"tag-group__title"},[t._v("Plain")]),t._v(" "),t._l(t.items,function(e){return n("el-tag",{key:e.label,attrs:{type:e.type,effect:"plain"}},[t._v("\n "+t._s(e.label)+"\n ")])})],2)])},staticRenderFns:[]},{data:function(){return{items:[{type:"",label:"Tag 1"},{type:"success",label:"Tag 2"},{type:"info",label:"Tag 3"},{type:"danger",label:"Tag 4"},{type:"warning",label:"Tag 5"}]}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Used for marking and selection.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Use the "),n("code",[e._v("type")]),e._v(" attribute to define Tag's type. In addition, the "),n("code",[e._v("color")]),e._v(" attribute can be used to set the background color of the Tag.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Tag 1</el-tag>\n<el-tag type="success">Tag 2</el-tag>\n<el-tag type="info">Tag 3</el-tag>\n<el-tag type="warning">Tag 4</el-tag>\n<el-tag type="danger">Tag 5</el-tag>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[n("code",[e._v("closable")]),e._v(" attribute can be used to define a removable tag. It accepts a "),n("code",[e._v("Boolean")]),e._v(". By default the removal of Tag has a fading animation. If you don't want to use it, you can set the "),n("code",[e._v("disable-transitions")]),e._v(" attribute, which accepts a "),n("code",[e._v("Boolean")]),e._v(", to "),n("code",[e._v("true")]),e._v(". "),n("code",[e._v("close")]),e._v(" event triggers when Tag is removed.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tag\n v-for=\"tag in tags\"\n :key=\"tag.name\"\n closable\n :type=\"tag.type\">\n {{tag.name}}\n</el-tag>\n\n<script>\n export default {\n data() {\n return {\n tags: [\n { name: 'Tag 1', type: '' },\n { name: 'Tag 2', type: 'success' },\n { name: 'Tag 3', type: 'info' },\n { name: 'Tag 4', type: 'warning' },\n { name: 'Tag 5', type: 'danger' }\n ]\n };\n }\n }\n<\/script>\n")])])])],2),e._m(3),e._m(4),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag\n :key="tag"\n v-for="tag in dynamicTags"\n closable\n :disable-transitions="false"\n @close="handleClose(tag)">\n {{tag}}\n</el-tag>\n<el-input\n class="input-new-tag"\n v-if="inputVisible"\n v-model="inputValue"\n ref="saveTagInput"\n size="mini"\n @keyup.enter.native="handleInputConfirm"\n @blur="handleInputConfirm"\n>\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>\n\n<style>\n .el-tag + .el-tag {\n margin-left: 10px;\n }\n .button-new-tag {\n margin-left: 10px;\n height: 32px;\n line-height: 30px;\n padding-top: 0;\n padding-bottom: 0;\n }\n .input-new-tag {\n width: 90px;\n margin-left: 10px;\n vertical-align: bottom;\n }\n</style>\n\n<script>\n export default {\n data() {\n return {\n dynamicTags: [\'Tag 1\', \'Tag 2\', \'Tag 3\'],\n inputVisible: false,\n inputValue: \'\'\n };\n },\n methods: {\n handleClose(tag) {\n this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n },\n\n showInput() {\n this.inputVisible = true;\n this.$nextTick(_ => {\n this.$refs.saveTagInput.$refs.input.focus();\n });\n },\n\n handleInputConfirm() {\n let inputValue = this.inputValue;\n if (inputValue) {\n this.dynamicTags.push(inputValue);\n }\n this.inputVisible = false;\n this.inputValue = \'\';\n }\n }\n }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("size")]),e._v(" to set additional sizes with "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" or "),n("code",[e._v("mini")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Default</el-tag>\n<el-tag size="medium">Medium</el-tag>\n<el-tag size="small">Small</el-tag>\n<el-tag size="mini">Mini</el-tag>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div",[n("p",[e._v("Using "),n("code",[e._v("effect")]),e._v(" to change, default is "),n("code",[e._v("light")])])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="tag-group">\n <span class="tag-group__title">Dark</span>\n <el-tag\n v-for="item in items"\n :key="item.label"\n :type="item.type"\n effect="dark">\n {{ item.label }}\n </el-tag>\n</div>\n<div class="tag-group">\n <span class="tag-group__title">Plain</span>\n <el-tag\n v-for="item in items"\n :key="item.label"\n :type="item.type"\n effect="plain">\n {{ item.label }}\n </el-tag>\n</div>\n\n<script>\n export default {\n data() {\n return {\n items: [\n { type: \'\', label: \'Tag 1\' },\n { type: \'success\', label: \'Tag 2\' },\n { type: \'info\', label: \'Tag 3\' },\n { type: \'danger\', label: \'Tag 4\' },\n { type: \'warning\', label: \'Tag 5\' }\n ]\n }\n }\n }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"removable-tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#removable-tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Removable Tag")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"edit-dynamically"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#edit-dynamically","aria-hidden":"true"}},[this._v("¶")]),this._v(" Edit Dynamically")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can use the "),n("code",[e._v("close")]),e._v(" event to add and remove tag dynamically.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"theme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[this._v("¶")]),this._v(" Theme")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Tag provide three different themes: "),n("code",[e._v("dark")]),e._v("、"),n("code",[e._v("light")]),e._v(" and "),n("code",[e._v("plain")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("component type")]),n("td",[e._v("string")]),n("td",[e._v("success/info/warning/danger")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("whether Tag can be removed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disable-transitions")]),n("td",[e._v("whether to disable animations")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hit")]),n("td",[e._v("whether Tag has a highlighted border")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("background color of the Tag")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("tag size")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("effect")]),n("td",[e._v("component theme")]),n("td",[e._v("string")]),n("td",[e._v("dark / light / plain")]),n("td",[e._v("light")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("triggers when Tag is clicked")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("triggers when Tag is removed")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=r.exports},483:function(e,t,n){"use strict";n.r(t);var i=n(31),a=n(228),l=n(230),r=n(229),o=n(90),s=n(79),d=n(32),c=n(18),v=n.n(c),u=n(133),h={components:{ThemeConfigurator:a.a,BasicTokensPreview:r.a,ComponentsPreview:l.a},data:function(){return{previewConfig:{},themeConfig:{},userTheme:[],editorTop:0,editorHeight:1e3,isFixed:!1}},computed:{isOfficial:function(){return"official"===this.previewConfig.type}},created:function(){var t=this;this.throttledHandleScroll=v()(10,!0,function(e){t.handleScroll(e)})},methods:{navBack:function(){this.$router.go(-1),this.$nextTick(function(){window.scrollTo(0,0)})},getNewUserThemeName:function(e){for(var t=1,n=void 0;n=e+"-"+t,0!==this.userTheme.filter(function(e){return e.name===n}).length;)t+=1;return n},onUserConfigUpdate:function(e){var t=JSON.stringify(e),n=this.previewConfig,a=n.type,i=n.name;if(this.isOfficial){if(8<=this.userTheme.length)return void this.$message.error(Object(u.c)("max-user-theme"));var l=this.getNewUserThemeName(i);return this.previewConfig.name=l,this.previewConfig.type="user",this.userTheme.push({update:Date.now(),name:l,theme:t}),void Object(o.d)(this.userTheme)}"user"===a&&(this.userTheme.forEach(function(e){e.name===i&&(e.update=Date.now(),e.theme=t)}),Object(o.d)(this.userTheme))},handleScroll:function(){var e=this.$refs.themePreview.getBoundingClientRect(),t=e.top,n=e.bottom,a=this.editorHeight+30+20;this.editorTop=t<0?(this.isFixed=!0,n<a?30-a+n:30):(this.isFixed=!1,0)}},beforeDestroy:function(){window.removeEventListener("scroll",this.throttledHandleScroll)},mounted:function(){var n=this;this.editorHeight=window.innerHeight-40-5,window.addEventListener("scroll",this.throttledHandleScroll),this.userTheme=Object(o.b)();var e=Object(o.a)(),t=this.$route.params.refer;if(e&&t){this.previewConfig=e;var a=Object(s.a)(e.theme);a&&(this.themeConfig=a,i.a.$emit(d.a,a))}else this.$alert(Object(u.c)("no-preview-config"),Object(u.c)("notice"),{confirmButtonText:Object(u.c)("confirm"),callback:function(e){var t=n.$route.path.replace("/preview","");n.$router.replace(t)}})}},m=(n(319),n(0)),_=Object(m.a)(h,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"themePreview",staticClass:"page-container page-theme-preview"},[n("section",{staticClass:"display"},[n("el-button",{attrs:{type:"text",icon:"el-icon-back"},on:{click:e.navBack}},[e._v("\n Back\n ")]),n("h3",[e._v(e._s(e.previewConfig.name))]),n("basic-tokens-preview"),n("components-preview")],1),n("aside",{staticClass:"side"},[n("section",{staticClass:"editor",class:{fixed:e.isFixed},style:{top:e.editorTop+"px",height:e.editorHeight+"px"}},[n("theme-configurator",{attrs:{isOfficial:e.isOfficial,themeConfig:e.themeConfig,previewConfig:e.previewConfig,onUserConfigUpdate:e.onUserConfigUpdate}})],1)])])},[],!1,null,null,null);t.default=_.exports},484:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tabs",{on:{"tab-click":t.handleClick},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-tab-pane",{attrs:{label:"User",name:"first"}},[t._v("User")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Config",name:"second"}},[t._v("Config")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Role",name:"third"}},[t._v("Role")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[t._v("Task")])],1)]],2)},staticRenderFns:[]},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-tabs",{attrs:{type:"card"},on:{"tab-click":e.handleClick}},[n("el-tab-pane",{attrs:{label:"User"}},[e._v("User")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)]],2)},staticRenderFns:[]},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",{attrs:{label:"User"}},[e._v("User")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:t.tabPosition,callback:function(e){t.tabPosition=e},expression:"tabPosition"}},[n("el-radio-button",{attrs:{label:"top"}},[t._v("top")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("right")]),t._v(" "),n("el-radio-button",{attrs:{label:"bottom"}},[t._v("bottom")]),t._v(" "),n("el-radio-button",{attrs:{label:"left"}},[t._v("left")])],1),t._v(" "),n("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":t.tabPosition}},[n("el-tab-pane",{attrs:{label:"User"}},[t._v("User")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[t._v("Config")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[t._v("Role")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[t._v("Task")])],1)]],2)},staticRenderFns:[]},{data:function(){return{tabPosition:"left"}}}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",[n("span",{attrs:{slot:"label"},slot:"label"},[n("i",{staticClass:"el-icon-date"}),e._v(" Route")]),e._v("\n Route\n ")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Role")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Task")])],1)],1)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:n.handleTabsEdit},model:{value:n.editableTabsValue,callback:function(e){n.editableTabsValue=e},expression:"editableTabsValue"}},n._l(n.editableTabs,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n "+n._s(e.content)+"\n ")])}),1)],1)},staticRenderFns:[]},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{handleTabsEdit:function(a,e){if("add"===e){var t=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue=t}if("remove"===e){var i=this.editableTabs,l=this.editableTabsValue;l===a&&i.forEach(function(e,t){if(e.name===a){var n=i[t+1]||i[t-1];n&&(l=n.name)}}),this.editableTabsValue=l,this.editableTabs=i.filter(function(e){return e.name!==a})}}}}),"element-demo6":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(e){n.addTab(n.editableTabsValue)}}},[n._v("\n add tab\n ")])],1),n._v(" "),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":n.removeTab},model:{value:n.editableTabsValue,callback:function(e){n.editableTabsValue=e},expression:"editableTabsValue"}},n._l(n.editableTabs,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n "+n._s(e.content)+"\n ")])}),1)],1)},staticRenderFns:[]},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Tab 1",name:"1",content:"Tab 1 content"},{title:"Tab 2",name:"2",content:"Tab 2 content"}],tabIndex:2}},methods:{addTab:function(e){var t=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue=t},removeTab:function(a){var i=this.editableTabs,l=this.editableTabsValue;l===a&&i.forEach(function(e,t){if(e.name===a){var n=i[t+1]||i[t-1];n&&(l=n.name)}}),this.editableTabsValue=l,this.editableTabs=i.filter(function(e){return e.name!==a})}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Divide data collections which are related yet belong to different types.")]),e._m(1),n("p",[e._v("Basic and concise tabs.")]),n("demo-block",[n("div",[n("p",[e._v("Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the "),n("code",[e._v("value")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-tabs v-model="activeName" @tab-click="handleClick">\n <el-tab-pane label="User" name="first">User</el-tab-pane>\n <el-tab-pane label="Config" name="second">Config</el-tab-pane>\n <el-tab-pane label="Role" name="third">Role</el-tab-pane>\n <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>\n </el-tabs>\n</template>\n<script>\n export default {\n data() {\n return {\n activeName: \'first\'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Tabs styled as cards.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("card")]),e._v(" can get a card-styled tab.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-tabs type="card" @tab-click="handleClick">\n <el-tab-pane label="User">User</el-tab-pane>\n <el-tab-pane label="Config">Config</el-tab-pane>\n <el-tab-pane label="Role">Role</el-tab-pane>\n <el-tab-pane label="Task">Task</el-tab-pane>\n </el-tabs>\n</template>\n<script>\n export default {\n data() {\n return {\n activeName: \'first\'\n };\n },\n methods: {\n handleClick(tab, event) {\n console.log(tab, event);\n }\n }\n };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Border card tabs.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("border-card")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n <el-tab-pane label="User">User</el-tab-pane>\n <el-tab-pane label="Config">Config</el-tab-pane>\n <el-tab-pane label="Role">Role</el-tab-pane>\n <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("You can choose from four directions: "),n("code",[e._v('tabPosition="left|right|top|bottom"')])])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n <el-radio-button label="top">top</el-radio-button>\n <el-radio-button label="right">right</el-radio-button>\n <el-radio-button label="bottom">bottom</el-radio-button>\n <el-radio-button label="left">left</el-radio-button>\n </el-radio-group>\n\n <el-tabs :tab-position="tabPosition" style="height: 200px;">\n <el-tab-pane label="User">User</el-tab-pane>\n <el-tab-pane label="Config">Config</el-tab-pane>\n <el-tab-pane label="Role">Role</el-tab-pane>\n <el-tab-pane label="Task">Task</el-tab-pane>\n </el-tabs>\n</template>\n<script>\n export default {\n data() {\n return {\n tabPosition: \'left\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("You can use named slot to customize the tab label content.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n <el-tab-pane>\n <span slot="label"><i class="el-icon-date"></i> Route</span>\n Route\n </el-tab-pane>\n <el-tab-pane label="Config">Config</el-tab-pane>\n <el-tab-pane label="Role">Role</el-tab-pane>\n <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(7),n("p",[e._v("Only card type Tabs support addable & closeable.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n <el-tab-pane\n v-for=\"(item, index) in editableTabs\"\n :key=\"item.name\"\n :label=\"item.title\"\n :name=\"item.name\"\n >\n {{item.content}}\n </el-tab-pane>\n</el-tabs>\n<script>\n export default {\n data() {\n return {\n editableTabsValue: '2',\n editableTabs: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n handleTabsEdit(targetName, action) {\n if (action === 'add') {\n let newTabName = ++this.tabIndex + '';\n this.editableTabs.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue = newTabName;\n }\n if (action === 'remove') {\n let tabs = this.editableTabs;\n let activeName = this.editableTabsValue;\n if (activeName === targetName) {\n tabs.forEach((tab, index) => {\n if (tab.name === targetName) {\n let nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue = activeName;\n this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n }\n }\n }\n }\n<\/script>\n")])])])],2),e._m(8),n("demo-block",[n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div style=\"margin-bottom: 20px;\">\n <el-button\n size=\"small\"\n @click=\"addTab(editableTabsValue)\"\n >\n add tab\n </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue\" type=\"card\" closable @tab-remove=\"removeTab\">\n <el-tab-pane\n v-for=\"(item, index) in editableTabs\"\n :key=\"item.name\"\n :label=\"item.title\"\n :name=\"item.name\"\n >\n {{item.content}}\n </el-tab-pane>\n</el-tabs>\n<script>\n export default {\n data() {\n return {\n editableTabsValue: '2',\n editableTabs: [{\n title: 'Tab 1',\n name: '1',\n content: 'Tab 1 content'\n }, {\n title: 'Tab 2',\n name: '2',\n content: 'Tab 2 content'\n }],\n tabIndex: 2\n }\n },\n methods: {\n addTab(targetName) {\n let newTabName = ++this.tabIndex + '';\n this.editableTabs.push({\n title: 'New Tab',\n name: newTabName,\n content: 'New Tab content'\n });\n this.editableTabsValue = newTabName;\n },\n removeTab(targetName) {\n let tabs = this.editableTabs;\n let activeName = this.editableTabsValue;\n if (activeName === targetName) {\n tabs.forEach((tab, index) => {\n if (tab.name === targetName) {\n let nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n activeName = nextTab.name;\n }\n }\n });\n }\n \n this.editableTabsValue = activeName;\n this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n }\n }\n }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"card-style"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-style","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card Style")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"border-card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tab-position"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tab-position","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tab position")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can use "),n("code",[e._v("tab-position")]),e._v(" attribute to set the tab's position.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-tab"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom Tab")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"add-close-tab"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#add-close-tab","aria-hidden":"true"}},[this._v("¶")]),this._v(" Add & close tab")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customized-trigger-button-of-new-tab"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customized-trigger-button-of-new-tab","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customized trigger button of new tab")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabs-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value, name of the selected tab")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("name of first tab")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of Tab")]),n("td",[e._v("string")]),n("td",[e._v("card/border-card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("whether Tab is closable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("addable")]),n("td",[e._v("whether Tab is addable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("whether Tab is addable and closable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("tab-position")]),n("td",[e._v("position of tabs")]),n("td",[e._v("string")]),n("td",[e._v("top/right/bottom/left")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("stretch")]),n("td",[e._v("whether width of tab automatically fits its container")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("before-leave")]),n("td",[e._v("hook function before switching tab. If "),n("code",[e._v("false")]),e._v(" is returned or a "),n("code",[e._v("Promise")]),e._v(" is returned and then is rejected, switching will be prevented")]),n("td",[e._v("Function(activeName, oldActiveName)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tabs-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("tab-click")]),n("td",[e._v("triggers when a tab is clicked")]),n("td",[e._v("clicked tab")])]),n("tr",[n("td",[e._v("tab-remove")]),n("td",[e._v("triggers when tab-remove button is clicked")]),n("td",[e._v("name of the removed tab")])]),n("tr",[n("td",[e._v("tab-add")]),n("td",[e._v("triggers when tab-add button is clicked")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("edit")]),n("td",[e._v("triggers when tab-add button or tab-remove is clicked")]),n("td",[e._v("(targetName, action)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tab-pane-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tab-pane Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("title of the tab")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Tab is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("identifier corresponding to the name of Tabs, representing the alias of the tab-pane")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1'")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("whether Tab is closable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("whether Tab is lazily rendered")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);t.default=r.exports},485:function(e,t,n){"use strict";n.r(t);var a=n(231),i=n(220),l=n(90),r=n(133),o={components:{ThemeCard:a.a},mounted:function(){this.userTheme=Object(l.b)(),Array.isArray(this.userTheme)||(this.userTheme=[],Object(l.d)(this.userTheme)),this.$nextTick(function(){window.scrollTo(0,0)})},data:function(){return{userTheme:[],maxUserTheme:8,copyDialogVisible:!1,copyForm:{},copyFormRule:{name:[{validator:this.validateCopyName,trigger:"blur"}]}}},computed:{officialTheme:function(){return this.padEmpeyTheme(i.b.concat(this.$isEle?i.a:[]))},userThemeCount:function(){return this.userTheme.length},showUserUpload:function(){return this.userThemeCount<8},displayUserTheme:function(){return this.padEmpeyTheme(this.userTheme,this.showUserUpload?1:0)}},methods:{getActionDisplayName:function(e){return Object(r.c)(e)},validateCopyName:function(e,t,n){t?0<this.filterUserThemeByName(t).length?n(new Error(this.getActionDisplayName("duplicate-them-name"))):n():n(new Error(this.getActionDisplayName("require-them-name")))},filterUserThemeByName:function(t){var n=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];return this.userTheme.filter(function(e){return n?e.name===t:e.name!==t})},padEmpeyTheme:function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0;if(!e.length)return[];var n=4-(e.length+t)%4;return n<4?e.concat(Array(n).fill({})):e},onAction:function(e,t){var n=this;switch(e){case"copy":this.openCopyForm(t.theme);break;case"upload":this.openCopyForm(t);break;case"rename":this.openRenameForm(t.name);break;case"delete":this.$confirm(this.getActionDisplayName("confirm-delete-theme"),this.getActionDisplayName("notice"),{confirmButtonText:this.getActionDisplayName("confirm"),cancelButtonText:this.getActionDisplayName("cancel"),type:"warning"}).then(function(){n.deleteUserThemeByName(t.name)}).catch(function(){});break;default:return}},deleteUserThemeByName:function(e){this.userTheme=this.filterUserThemeByName(e,!1),this.saveToLocal()},openRenameForm:function(e){this.copyForm.oldname=e,this.copyDialogVisible=!0},openCopyForm:function(e){8<=this.userTheme.length?this.$message.error(this.getActionDisplayName("max-user-theme")):(this.copyForm.theme=e,this.copyDialogVisible=!0)},closeCopyForm:function(){var e=this;this.copyDialogVisible=!1,this.$nextTick(function(){e.copyForm={}})},copyToUser:function(){var l=this;this.$refs.copyForm.validate(function(e){if(e){var t=l.copyForm,n=t.theme,a=t.name,i=t.oldname;n?l.userTheme.push({update:Date.now(),name:a,theme:n}):l.userTheme.forEach(function(e){e.name===i&&(e.update=Date.now(),e.name=a)}),l.saveToLocal(),l.closeCopyForm()}})},saveToLocal:function(){Object(l.d)(this.userTheme)}}},s=(n(320),n(0)),d=Object(s.a)(o,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"page-container page-theme"},[n("section",{staticClass:"theme-section"},[n("h2",[t._v("Official Theme")]),n("ul",t._l(t.officialTheme,function(e){return n("li",{key:e.name,staticClass:"theme-card"},[n("theme-card",{attrs:{type:"official",config:e},on:{action:t.onAction}})],1)}),0)]),n("section",{staticClass:"theme-section second-section"},[n("h2",[t._v("My Theme ("+t._s(t.userThemeCount)+"/"+t._s(t.maxUserTheme)+")")]),n("ul",[t.showUserUpload?n("li",{staticClass:"theme-card"},[n("theme-card",{attrs:{type:"upload",config:{name:"upload"}},on:{action:t.onAction}})],1):t._e(),t._l(t.displayUserTheme,function(e){return n("li",{key:e.name,staticClass:"theme-card"},[n("theme-card",{attrs:{type:"user",config:e},on:{action:t.onAction}})],1)})],2)]),n("el-dialog",{attrs:{visible:t.copyDialogVisible},on:{"update:visible":function(e){t.copyDialogVisible=e}}},[n("el-form",{ref:"copyForm",attrs:{model:t.copyForm,rules:t.copyFormRule}},[n("el-form-item",{attrs:{label:"Theme name",prop:"name"}},[n("el-input",{model:{value:t.copyForm.name,callback:function(e){t.$set(t.copyForm,"name",e)},expression:"copyForm.name"}})],1)],1),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:t.closeCopyForm}},[t._v(t._s(t.getActionDisplayName("cancel")))]),n("el-button",{attrs:{type:"primary"},on:{click:t.copyToUser}},[t._v(t._s(t.getActionDisplayName("confirm")))])],1)],1)],1)},[],!1,null,null,null);t.default=d.exports},486:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,stripe:""}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:""}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"row-class-name":e.tableRowClassName}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]},{methods:{tableRowClassName:function(e){e.row;var t=e.rowIndex;return 1===t?"warning-row":3===t?"success-row":""}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),t._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-button",{attrs:{type:"text",size:"small"},on:{click:t.handleClick}},[t._v("Detail")]),t._v(" "),n("el-button",{attrs:{type:"text",size:"small"}},[t._v("Edit")])]}}])})],1)]],2)},staticRenderFns:[]},{methods:{handleClick:function(){console.log("click")}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}}}),"element-demo6":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,height:"250"}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}}),"element-demo7":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData,"max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),n._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),n._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(e){e.preventDefault(),n.deleteRow(t.$index,n.tableData)}}},[n._v("\n Remove\n ")])]}}])})],1)]],2)},staticRenderFns:[]},{methods:{deleteRow:function(e,t){t.splice(e,1)}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}}),"element-demo8":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),e._v(" "),n("el-table-column",{attrs:{label:"Delivery Info"}},[n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{label:"Address Info"}},[n("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),e._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}}),"element-demo9":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"highlight-current-row":""},on:{"current-change":t.handleCurrentChange}},[n("el-table-column",{attrs:{type:"index",width:"50"}}),t._v(" "),n("el-table-column",{attrs:{property:"date",label:"Date",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Address"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.setCurrent(t.tableData[1])}}},[t._v("Select second row")]),t._v(" "),n("el-button",{on:{click:function(e){t.setCurrent()}}},[t._v("Clear selection")])],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],currentRow:null}},methods:{setCurrent:function(e){this.$refs.singleTable.setCurrentRow(e)},handleCurrentChange:function(e){this.currentRow=e}}}),"element-demo10":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData},on:{"selection-change":t.handleSelectionChange}},[n("el-table-column",{attrs:{type:"selection",width:"55"}}),t._v(" "),n("el-table-column",{attrs:{label:"Date",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v(t._s(e.row.date))]}}])}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Address","show-overflow-tooltip":""}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.toggleSelection([t.tableData[1],t.tableData[2]])}}},[t._v("Toggle selection status of second and third rows")]),t._v(" "),n("el-button",{on:{click:function(e){t.toggleSelection()}}},[t._v("Clear selection")])],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],multipleSelection:[]}},methods:{toggleSelection:function(e){var t=this;e?e.forEach(function(e){t.$refs.multipleTable.toggleRowSelection(e)}):this.$refs.multipleTable.clearSelection()},handleSelectionChange:function(e){this.multipleSelection=e}}}),"element-demo11":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"default-sort":{prop:"date",order:"descending"}}},[n("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",formatter:e.formatter}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{formatter:function(e,t){return e.address}}}),"element-demo12":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{on:{click:t.resetDateFilter}},[t._v("reset date filter")]),t._v(" "),n("el-button",{on:{click:t.clearFilter}},[t._v("reset all filters")]),t._v(" "),n("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":t.filterHandler}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address",formatter:t.formatter}}),t._v(" "),n("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":t.filterTag,"filter-placement":"bottom-end"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-tag",{attrs:{type:"Home"===e.row.tag?"primary":"success","disable-transitions":""}},[t._v(t._s(e.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"}]}},methods:{resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},formatter:function(e,t){return e.address},filterTag:function(e,t){return t.tag===e},filterHandler:function(e,t,n){return t[n.property]===e}}}),"element-demo13":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData}},[a("el-table-column",{attrs:{label:"Date",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("i",{staticClass:"el-icon-time"}),n._v(" "),a("span",{staticStyle:{"margin-left":"10px"}},[n._v(n._s(e.row.date))])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"Name",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[n._v("Name: "+n._s(e.row.name))]),n._v(" "),a("p",[n._v("Addr: "+n._s(e.row.address))]),n._v(" "),a("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[a("el-tag",{attrs:{size:"medium"}},[n._v(n._s(e.row.name))])],1)])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"Operations"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Edit")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Delete")])]}}])})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}}),"element-demo14":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData.filter(function(e){return!n.search||e.name.toLowerCase().includes(n.search.toLowerCase())})}},[a("el-table-column",{attrs:{label:"Date",prop:"date"}}),n._v(" "),a("el-table-column",{attrs:{label:"Name",prop:"name"}}),n._v(" "),a("el-table-column",{attrs:{align:"right"},scopedSlots:n._u([{key:"header",fn:function(e){return[a("el-input",{attrs:{size:"mini",placeholder:"Type to search"},model:{value:n.search,callback:function(e){n.search=e},expression:"search"}})]}},{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Edit")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Delete")])]}}])})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"John",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Morgan",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Jessy",address:"No. 189, Grove St, Los Angeles"}],search:""}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}}),"element-demo15":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{type:"expand"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("p",[t._v("State: "+t._s(e.row.state))]),t._v(" "),n("p",[t._v("City: "+t._s(e.row.city))]),t._v(" "),n("p",[t._v("Address: "+t._s(e.row.address))]),t._v(" "),n("p",[t._v("Zip: "+t._s(e.row.zip))])]}}])}),t._v(" "),n("el-table-column",{attrs:{label:"Date",prop:"date"}}),t._v(" "),n("el-table-column",{attrs:{label:"Name",prop:"name"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}}),"element-demo16":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%","margin-bottom":"20px"},attrs:{data:e.tableData,"row-key":"id",border:"","default-expand-all":""}},[n("el-table-column",{attrs:{prop:"date",label:"date",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",sortable:"",width:"180"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData1,"row-key":"id",border:"",lazy:"",load:e.load,"tree-props":{children:"children",hasChildren:"hasChildren"}}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}})],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",children:[{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}]},{id:4,date:"2016-05-03",name:"wangxiaohu"}],tableData1:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",hasChildren:!0},{id:4,date:"2016-05-03",name:"wangxiaohu"}]}},methods:{load:function(e,t,n){setTimeout(function(){n([{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}])},1e3)}}}),"element-demo17":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:"","show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,border:"",height:"200","summary-method":e.getSummaries,"show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"Cost 1 ($)"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"Cost 2 ($)"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"Cost 3 ($)"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{getSummaries:function(e){var t=e.columns,a=e.data,i=[];return t.forEach(function(t,e){if(0!==e){var n=a.map(function(e){return Number(e[t.property])});n.every(function(e){return isNaN(e)})?i[e]="N/A":i[e]="$ "+n.reduce(function(e,t){var n=Number(t);return isNaN(n)?e:e+t},0)}else i[e]="Total Cost"}),i}}}),"element-demo18":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"span-method":e.arraySpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,"span-method":e.objectSpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"Amount 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"Amount 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"Amount 3"}})],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{arraySpanMethod:function(e){e.row,e.column;var t=e.rowIndex,n=e.columnIndex;if(t%2==0){if(0===n)return[1,2];if(1===n)return[0,0]}},objectSpanMethod:function(e){e.row,e.column;var t=e.rowIndex;if(0===e.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}}}}),"element-demo19":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("el-table-column",{attrs:{type:"index",index:e.indexMethod}}),e._v(" "),n("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}},methods:{indexMethod:function(e){return 2*e}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Display multiple data with similar format. You can sort, filter, compare your data in a table.")]),e._m(1),n("p",[e._v("Basic table is just for data display.")]),n("demo-block",[n("div",[n("p",[e._v("After setting attribute "),n("code",[e._v("data")]),e._v(" of "),n("code",[e._v("el-table")]),e._v(" with an object array, you can use "),n("code",[e._v("prop")]),e._v(" (corresponding to a key of the object in "),n("code",[e._v("data")]),e._v(" array) in "),n("code",[e._v("el-table-column")]),e._v(" to insert data to table columns, and set the attribute "),n("code",[e._v("label")]),e._v(" to define the column name. You can also use the attribute "),n("code",[e._v("width")]),e._v(" to define the width of columns.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v(" <template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\">\n <el-table-column\n prop=\"date\"\n label=\"Date\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Name\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Address\">\n </el-table-column>\n </el-table>\n </template>\n\n <script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n <\/script>\n")])])])],2),e._m(2),n("p",[e._v("Striped table makes it easier to distinguish different rows.")]),n("demo-block",[n("div",[n("p",[e._v("Attribute "),n("code",[e._v("stripe")]),e._v(" accepts a "),n("code",[e._v("Boolean")]),e._v(". If "),n("code",[e._v("true")]),e._v(", table will be striped.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n stripe\n style=\"width: 100%\">\n <el-table-column\n prop=\"date\"\n label=\"Date\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Name\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Address\">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("By default, Table has no vertical border. If you need it, you can set attribute "),n("code",[e._v("border")]),e._v(" to "),n("code",[e._v("true")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n border\n style=\"width: 100%\">\n <el-table-column\n prop=\"date\"\n label=\"Date\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Name\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Address\">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v('You can highlight your table content to distinguish between "success, information, warning, danger" and other states.')]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("row-class-name")]),e._v(" in "),n("code",[e._v("el-table")]),e._v(" to add custom classes to a certain row. Then you can style it with custom classes.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\"\n :row-class-name=\"tableRowClassName\">\n <el-table-column\n prop=\"date\"\n label=\"Date\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Name\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Address\">\n </el-table-column>\n </el-table>\n</template>\n\n<style>\n .el-table .warning-row {\n background: oldlace;\n }\n\n .el-table .success-row {\n background: #f0f9eb;\n }\n</style>\n\n<script>\n export default {\n methods: {\n tableRowClassName({row, rowIndex}) {\n if (rowIndex === 1) {\n return 'warning-row';\n } else if (rowIndex === 3) {\n return 'success-row';\n }\n return '';\n }\n },\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("When there are too many rows, you can use a fixed header.")]),n("demo-block",[n("div",[n("p",[e._v("By setting the attribute "),n("code",[e._v("height")]),e._v(" of "),n("code",[e._v("el-table")]),e._v(", you can fix the table header without any other codes.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n height=\"250\"\n style=\"width: 100%\">\n <el-table-column\n prop=\"date\"\n label=\"Date\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Name\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Address\">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n }\n }\n }\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("When there are too many columns, you can fix some of them.")]),n("demo-block",[n("div",[n("p",[e._v("Attribute "),n("code",[e._v("fixed")]),e._v(" is used in "),n("code",[e._v("el-table-column")]),e._v(", it accepts a "),n("code",[e._v("Boolean")]),e._v(". If "),n("code",[e._v("true")]),e._v(", the column will be fixed at left. It also accepts two string literals: 'left' and 'right', both indicating that the column will be fixed at corresponding direction.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\">\n <el-table-column\n fixed\n prop=\"date\"\n label=\"Date\"\n width=\"150\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Name\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"state\"\n label=\"State\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"city\"\n label=\"City\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Address\"\n width=\"300\">\n </el-table-column>\n <el-table-column\n prop=\"zip\"\n label=\"Zip\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n fixed=\"right\"\n label=\"Operations\"\n width=\"120\">\n <template slot-scope=\"scope\">\n <el-button @click=\"handleClick\" type=\"text\" size=\"small\">Detail</el-button>\n <el-button type=\"text\" size=\"small\">Edit</el-button>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n methods: {\n handleClick() {\n console.log('click');\n }\n },\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office'\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.")]),n("demo-block",[n("div",[n("p",[e._v("Fix columns and header at the same time by combining the above two examples.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\"\n height=\"250\">\n <el-table-column\n fixed\n prop=\"date\"\n label=\"Date\"\n width=\"150\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Name\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"state\"\n label=\"State\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"city\"\n label=\"City\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Address\"\n width=\"300\">\n </el-table-column>\n <el-table-column\n prop=\"zip\"\n label=\"Zip\"\n width=\"120\">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed.")]),n("demo-block",[n("div",[n("p",[e._v("By setting the attribute "),n("code",[e._v("max-height")]),e._v(" of "),n("code",[e._v("el-table")]),e._v(", you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.")])]),n("template",{slot:"source"},[n("element-demo7")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\"\n max-height=\"250\">\n <el-table-column\n fixed\n prop=\"date\"\n label=\"Date\"\n width=\"150\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Name\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"state\"\n label=\"State\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"city\"\n label=\"City\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Address\"\n width=\"300\">\n </el-table-column>\n <el-table-column\n prop=\"zip\"\n label=\"Zip\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n fixed=\"right\"\n label=\"Operations\"\n width=\"120\">\n <template slot-scope=\"scope\">\n <el-button\n @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n type=\"text\"\n size=\"small\">\n Remove\n </el-button>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n methods: {\n deleteRow(index, rows) {\n rows.splice(index, 1);\n }\n },\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("When the data structure is complex, you can use group header to show the data hierarchy.")]),n("demo-block",[n("div",[n("p",[e._v("Only need to place el-table-column inside a el-table-column, you can achieve group header.")])]),n("template",{slot:"source"},[n("element-demo8")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\">\n <el-table-column\n prop=\"date\"\n label=\"Date\"\n width=\"150\">\n </el-table-column>\n <el-table-column label=\"Delivery Info\">\n <el-table-column\n prop=\"name\"\n label=\"Name\"\n width=\"120\">\n </el-table-column>\n <el-table-column label=\"Address Info\">\n <el-table-column\n prop=\"state\"\n label=\"State\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"city\"\n label=\"City\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Address\"\n width=\"300\">\n </el-table-column>\n <el-table-column\n prop=\"zip\"\n label=\"Zip\"\n width=\"120\">\n </el-table-column>\n </el-table-column>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("Single row selection is supported.")]),n("demo-block",[n("div",[n("p",[e._v("Table supports single row selection. You can activate it by adding the "),n("code",[e._v("highlight-current-row")]),e._v(" attribute. An event called "),n("code",[e._v("current-change")]),e._v(" will be triggered when row selection changes, and its parameters are the rows after and before this change: "),n("code",[e._v("currentRow")]),e._v(" and "),n("code",[e._v("oldCurrentRow")]),e._v(". If you need to display row index, you can add a new "),n("code",[e._v("el-table-column")]),e._v(" with its "),n("code",[e._v("type")]),e._v(" attribute assigned to "),n("code",[e._v("index")]),e._v(", and you will see the index starting from 1.")])]),n("template",{slot:"source"},[n("element-demo9")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-table\n ref="singleTable"\n :data="tableData"\n highlight-current-row\n @current-change="handleCurrentChange"\n style="width: 100%">\n <el-table-column\n type="index"\n width="50">\n </el-table-column>\n <el-table-column\n property="date"\n label="Date"\n width="120">\n </el-table-column>\n <el-table-column\n property="name"\n label="Name"\n width="120">\n </el-table-column>\n <el-table-column\n property="address"\n label="Address">\n </el-table-column>\n </el-table>\n <div style="margin-top: 20px">\n <el-button @click="setCurrent(tableData[1])">Select second row</el-button>\n <el-button @click="setCurrent()">Clear selection</el-button>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: \'2016-05-03\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }, {\n date: \'2016-05-02\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }, {\n date: \'2016-05-04\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }, {\n date: \'2016-05-01\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }],\n currentRow: null\n }\n },\n\n methods: {\n setCurrent(row) {\n this.$refs.singleTable.setCurrentRow(row);\n },\n handleCurrentChange(val) {\n this.currentRow = val;\n }\n }\n }\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("You can also select multiple rows.")]),n("demo-block",[n("div",[n("p",[e._v("Activating multiple selection is easy: simply add an "),n("code",[e._v("el-table-column")]),e._v(" with its "),n("code",[e._v("type")]),e._v(" set to "),n("code",[e._v("selection")]),e._v(". Apart from multiple selection, this example also uses "),n("code",[e._v("show-overflow-tooltip")]),e._v(": by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute "),n("code",[e._v("show-overflow-tooltip")]),e._v(", which accepts a "),n("code",[e._v("Boolean")]),e._v(" value. When set "),n("code",[e._v("true")]),e._v(", the extra content will show in tooltip when hover on the cell.")])]),n("template",{slot:"source"},[n("element-demo10")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n ref=\"multipleTable\"\n :data=\"tableData\"\n style=\"width: 100%\"\n @selection-change=\"handleSelectionChange\">\n <el-table-column\n type=\"selection\"\n width=\"55\">\n </el-table-column>\n <el-table-column\n label=\"Date\"\n width=\"120\">\n <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n </el-table-column>\n <el-table-column\n property=\"name\"\n label=\"Name\"\n width=\"120\">\n </el-table-column>\n <el-table-column\n property=\"address\"\n label=\"Address\"\n show-overflow-tooltip>\n </el-table-column>\n </el-table>\n <div style=\"margin-top: 20px\">\n <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">Toggle selection status of second and third rows</el-button>\n <el-button @click=\"toggleSelection()\">Clear selection</el-button>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }],\n multipleSelection: []\n }\n },\n\n methods: {\n toggleSelection(rows) {\n if (rows) {\n rows.forEach(row => {\n this.$refs.multipleTable.toggleRowSelection(row);\n });\n } else {\n this.$refs.multipleTable.clearSelection();\n }\n },\n handleSelectionChange(val) {\n this.multipleSelection = val;\n }\n }\n }\n<\/script>\n")])])])],2),e._m(12),n("p",[e._v("Sort the data to find or compare data quickly.")]),n("demo-block",[n("div",[n("p",[e._v("Set attribute "),n("code",[e._v("sortable")]),e._v(" in a certain column to sort the data based on this column. It accepts "),n("code",[e._v("Boolean")]),e._v(" with a default value "),n("code",[e._v("false")]),e._v(". Set table attribute "),n("code",[e._v("default-sort")]),e._v(" to determine default sort column and order. To apply your own sorting rules, use "),n("code",[e._v("sort-method")]),e._v(" or "),n("code",[e._v("sort-by")]),e._v(". If you need remote sorting from backend, set "),n("code",[e._v("sortable")]),e._v(" to "),n("code",[e._v("custom")]),e._v(", and listen to the "),n("code",[e._v("sort-change")]),e._v(" event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named "),n("code",[e._v("formatter")]),e._v(" to format the value of certain columns. It accepts a function which has two parameters: "),n("code",[e._v("row")]),e._v(" and "),n("code",[e._v("column")]),e._v(". You can handle it according to your own needs.")])]),n("template",{slot:"source"},[n("element-demo11")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n :default-sort = \"{prop: 'date', order: 'descending'}\"\n style=\"width: 100%\">\n <el-table-column\n prop=\"date\"\n label=\"Date\"\n sortable\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Name\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Address\"\n :formatter=\"formatter\">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles'\n }]\n }\n },\n methods: {\n formatter(row, column) {\n return row.address;\n }\n }\n }\n<\/script>\n")])])])],2),e._m(13),n("p",[e._v("Filter the table to find desired data.")]),n("demo-block",[n("div",[n("p",[e._v("Set attribute "),n("code",[e._v("filters")]),e._v(" and "),n("code",[e._v("filter-method")]),e._v(" in "),n("code",[e._v("el-table-column")]),e._v(" makes this column filterable. "),n("code",[e._v("filters")]),e._v(" is an array, and "),n("code",[e._v("filter-method")]),e._v(" is a function deciding which rows are displayed. It has three parameters: "),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("row")]),e._v(" and "),n("code",[e._v("column")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo12")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button @click=\"resetDateFilter\">reset date filter</el-button>\n <el-button @click=\"clearFilter\">reset all filters</el-button>\n <el-table\n ref=\"filterTable\"\n :data=\"tableData\"\n style=\"width: 100%\">\n <el-table-column\n prop=\"date\"\n label=\"Date\"\n sortable\n width=\"180\"\n column-key=\"date\"\n :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n :filter-method=\"filterHandler\"\n >\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Name\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Address\"\n :formatter=\"formatter\">\n </el-table-column>\n <el-table-column\n prop=\"tag\"\n label=\"Tag\"\n width=\"100\"\n :filters=\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"\n :filter-method=\"filterTag\"\n filter-placement=\"bottom-end\">\n <template slot-scope=\"scope\">\n <el-tag\n :type=\"scope.row.tag === 'Home' ? 'primary' : 'success'\"\n disable-transitions>{{scope.row.tag}}</el-tag>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Home'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Office'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Home'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n address: 'No. 189, Grove St, Los Angeles',\n tag: 'Office'\n }]\n }\n },\n methods: {\n resetDateFilter() {\n this.$refs.filterTable.clearFilter('date');\n },\n clearFilter() {\n this.$refs.filterTable.clearFilter();\n },\n formatter(row, column) {\n return row.address;\n },\n filterTag(value, row) {\n return row.tag === value;\n },\n filterHandler(value, row, column) {\n const property = column['property'];\n return row[property] === value;\n }\n }\n }\n<\/script>\n")])])])],2),e._m(14),n("p",[e._v("Customize table column so it can be integrated with other components.")]),n("demo-block",[n("div",[n("p",[e._v("You have access to the following data: row, column, $index and store (state management of Table) by "),n("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[e._v("Scoped slot")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo13")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-table\n :data="tableData"\n style="width: 100%">\n <el-table-column\n label="Date"\n width="180">\n <template slot-scope="scope">\n <i class="el-icon-time"></i>\n <span style="margin-left: 10px">{{ scope.row.date }}</span>\n </template>\n </el-table-column>\n <el-table-column\n label="Name"\n width="180">\n <template slot-scope="scope">\n <el-popover trigger="hover" placement="top">\n <p>Name: {{ scope.row.name }}</p>\n <p>Addr: {{ scope.row.address }}</p>\n <div slot="reference" class="name-wrapper">\n <el-tag size="medium">{{ scope.row.name }}</el-tag>\n </div>\n </el-popover>\n </template>\n </el-table-column>\n <el-table-column\n label="Operations">\n <template slot-scope="scope">\n <el-button\n size="mini"\n @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n <el-button\n size="mini"\n type="danger"\n @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: \'2016-05-03\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }, {\n date: \'2016-05-02\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }, {\n date: \'2016-05-04\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }, {\n date: \'2016-05-01\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }]\n }\n },\n methods: {\n handleEdit(index, row) {\n console.log(index, row);\n },\n handleDelete(index, row) {\n console.log(index, row);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("Customize table header so it can be even more customized.")]),n("demo-block",[n("div",[n("p",[e._v("You can customize how the header looks by header "),n("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots"}},[e._v("scoped slots")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo14")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-table\n :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"\n style="width: 100%">\n <el-table-column\n label="Date"\n prop="date">\n </el-table-column>\n <el-table-column\n label="Name"\n prop="name">\n </el-table-column>\n <el-table-column\n align="right">\n <template slot="header" slot-scope="scope">\n <el-input\n v-model="search"\n size="mini"\n placeholder="Type to search"/>\n </template>\n <template slot-scope="scope">\n <el-button\n size="mini"\n @click="handleEdit(scope.$index, scope.row)">Edit</el-button>\n <el-button\n size="mini"\n type="danger"\n @click="handleDelete(scope.$index, scope.row)">Delete</el-button>\n </template>\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: \'2016-05-03\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n }, {\n date: \'2016-05-02\',\n name: \'John\',\n address: \'No. 189, Grove St, Los Angeles\'\n }, {\n date: \'2016-05-04\',\n name: \'Morgan\',\n address: \'No. 189, Grove St, Los Angeles\'\n }, {\n date: \'2016-05-01\',\n name: \'Jessy\',\n address: \'No. 189, Grove St, Los Angeles\'\n }],\n search: \'\',\n }\n },\n methods: {\n handleEdit(index, row) {\n console.log(index, row);\n },\n handleDelete(index, row) {\n console.log(index, row);\n }\n },\n }\n<\/script>\n')])])])],2),e._m(16),n("p",[e._v("When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.")]),n("demo-block",[n("div",[n("p",[e._v('Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using '),n("code",[e._v("Scoped slot")]),e._v(" in custom column templates.")])]),n("template",{slot:"source"},[n("element-demo15")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\">\n <el-table-column type=\"expand\">\n <template slot-scope=\"props\">\n <p>State: {{ props.row.state }}</p>\n <p>City: {{ props.row.city }}</p>\n <p>Address: {{ props.row.address }}</p>\n <p>Zip: {{ props.row.zip }}</p>\n </template>\n </el-table-column>\n <el-table-column\n label=\"Date\"\n prop=\"date\">\n </el-table-column>\n <el-table-column\n label=\"Name\"\n prop=\"name\">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-08',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-06',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }, {\n date: '2016-05-07',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036'\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(17),n("demo-block",[n("div",[n("p",[e._v("You can display tree structure data. When row contains the "),n("code",[e._v("children")]),e._v(" field, it is treated as nested data. For rendering nested data, the prop "),n("code",[e._v("row-key")]),e._v(" is required。Also, child row data can be loaded asynchronously. Set "),n("code",[e._v("lazy")]),e._v(" property of Table to true and the function "),n("code",[e._v("load")]),e._v(". Specify "),n("code",[e._v("hasChildren")]),e._v(" attribute in row to determine which row contains children. Both "),n("code",[e._v("children")]),e._v(" and "),n("code",[e._v("hasChildren")]),e._v(" can be configured via "),n("code",[e._v("tree-props")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo16")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n<div>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%;margin-bottom: 20px;\"\n row-key=\"id\"\n border\n default-expand-all>\n <el-table-column\n prop=\"date\"\n label=\"date\"\n sortable\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Name\"\n sortable\n width=\"180\">\n </el-table-column>\n </el-table>\n\n <el-table\n :data=\"tableData1\"\n style=\"width: 100%\"\n row-key=\"id\"\n border\n lazy\n :load=\"load\"\n :tree-props=\"{children: 'children', hasChildren: 'hasChildren'}\">\n <el-table-column\n prop=\"date\"\n label=\"Date\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Name\"\n width=\"180\">\n </el-table-column>\n </el-table>\n</div>\n</template>\n<script>\n export default {\n data() {\n return {\n tableData: [{\n id: 1,\n date: '2016-05-02',\n name: 'wangxiaohu'\n }, {\n id: 2,\n date: '2016-05-04',\n name: 'wangxiaohu'\n }, {\n id: 3,\n date: '2016-05-01',\n name: 'wangxiaohu',\n children: [{\n id: 31,\n date: '2016-05-01',\n name: 'wangxiaohu'\n }, {\n id: 32,\n date: '2016-05-01',\n name: 'wangxiaohu'\n }]\n }, {\n id: 4,\n date: '2016-05-03',\n name: 'wangxiaohu'\n }],\n tableData1: [{\n id: 1,\n date: '2016-05-02',\n name: 'wangxiaohu'\n }, {\n id: 2,\n date: '2016-05-04',\n name: 'wangxiaohu'\n }, {\n id: 3,\n date: '2016-05-01',\n name: 'wangxiaohu',\n hasChildren: true\n }, {\n id: 4,\n date: '2016-05-03',\n name: 'wangxiaohu'\n }]\n }\n },\n methods: {\n load(tree, treeNode, resolve) {\n setTimeout(() => {\n resolve([\n {\n id: 31,\n date: '2016-05-01',\n name: 'wangxiaohu'\n }, {\n id: 32,\n date: '2016-05-01',\n name: 'wangxiaohu'\n }\n ])\n }, 1000)\n }\n },\n }\n<\/script>\n")])])])],2),e._m(18),n("p",[e._v("For table of numbers, you can add an extra row at the table footer displaying each column's sum.")]),n("demo-block",[n("div",[n("p",[e._v("You can add the summary row by setting "),n("code",[e._v("show-summary")]),e._v(" to "),n("code",[e._v("true")]),e._v(". By default, for the summary row, the first column does not sum anything up but always displays 'Sum' (you can configure the displayed text using "),n("code",[e._v("sum-text")]),e._v("), while other columns sum every number in that column up and display them. You can of course define your own sum behaviour. To do so, pass a method to "),n("code",[e._v("summary-method")]),e._v(", which returns an array, and each element of the returned array will be displayed in the columns of the summary row. The second table of this example is a detailed demo.")])]),n("template",{slot:"source"},[n("element-demo17")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-table\n :data="tableData"\n border\n show-summary\n style="width: 100%">\n <el-table-column\n prop="id"\n label="ID"\n width="180">\n </el-table-column>\n <el-table-column\n prop="name"\n label="Name">\n </el-table-column>\n <el-table-column\n prop="amount1"\n sortable\n label="Amount 1">\n </el-table-column>\n <el-table-column\n prop="amount2"\n sortable\n label="Amount 2">\n </el-table-column>\n <el-table-column\n prop="amount3"\n sortable\n label="Amount 3">\n </el-table-column>\n </el-table>\n\n <el-table\n :data="tableData"\n border\n height="200"\n :summary-method="getSummaries"\n show-summary\n style="width: 100%; margin-top: 20px">\n <el-table-column\n prop="id"\n label="ID"\n width="180">\n </el-table-column>\n <el-table-column\n prop="name"\n label="Name">\n </el-table-column>\n <el-table-column\n prop="amount1"\n label="Cost 1 ($)">\n </el-table-column>\n <el-table-column\n prop="amount2"\n label="Cost 2 ($)">\n </el-table-column>\n <el-table-column\n prop="amount3"\n label="Cost 3 ($)">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n id: \'12987122\',\n name: \'Tom\',\n amount1: \'234\',\n amount2: \'3.2\',\n amount3: 10\n }, {\n id: \'12987123\',\n name: \'Tom\',\n amount1: \'165\',\n amount2: \'4.43\',\n amount3: 12\n }, {\n id: \'12987124\',\n name: \'Tom\',\n amount1: \'324\',\n amount2: \'1.9\',\n amount3: 9\n }, {\n id: \'12987125\',\n name: \'Tom\',\n amount1: \'621\',\n amount2: \'2.2\',\n amount3: 17\n }, {\n id: \'12987126\',\n name: \'Tom\',\n amount1: \'539\',\n amount2: \'4.1\',\n amount3: 15\n }]\n };\n },\n methods: {\n getSummaries(param) {\n const { columns, data } = param;\n const sums = [];\n columns.forEach((column, index) => {\n if (index === 0) {\n sums[index] = \'Total Cost\';\n return;\n }\n const values = data.map(item => Number(item[column.property]));\n if (!values.every(value => isNaN(value))) {\n sums[index] = \'$ \' + values.reduce((prev, curr) => {\n const value = Number(curr);\n if (!isNaN(value)) {\n return prev + curr;\n } else {\n return prev;\n }\n }, 0);\n } else {\n sums[index] = \'N/A\';\n }\n });\n\n return sums;\n }\n }\n };\n<\/script>\n')])])])],2),e._m(19),n("p",[e._v("Configuring rowspan and colspan allows you to merge cells")]),n("demo-block",[n("div",[n("p",[e._v("Use the "),n("code",[e._v("span-method")]),e._v(" attribute to configure rowspan and colspan. It accepts a method, and passes an object to that method including current row "),n("code",[e._v("row")]),e._v(", current column "),n("code",[e._v("column")]),e._v(", current row index "),n("code",[e._v("rowIndex")]),e._v(" and current column index "),n("code",[e._v("columnIndex")]),e._v(". The method should return an array of two numbers, the first number being "),n("code",[e._v("rowspan")]),e._v(" and second "),n("code",[e._v("colspan")]),e._v(". It can also return an object with "),n("code",[e._v("rowspan")]),e._v(" and "),n("code",[e._v("colspan")]),e._v(" props.")])]),n("template",{slot:"source"},[n("element-demo18")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <el-table\n :data="tableData"\n :span-method="arraySpanMethod"\n border\n style="width: 100%">\n <el-table-column\n prop="id"\n label="ID"\n width="180">\n </el-table-column>\n <el-table-column\n prop="name"\n label="Name">\n </el-table-column>\n <el-table-column\n prop="amount1"\n sortable\n label="Amount 1">\n </el-table-column>\n <el-table-column\n prop="amount2"\n sortable\n label="Amount 2">\n </el-table-column>\n <el-table-column\n prop="amount3"\n sortable\n label="Amount 3">\n </el-table-column>\n </el-table>\n\n <el-table\n :data="tableData"\n :span-method="objectSpanMethod"\n border\n style="width: 100%; margin-top: 20px">\n <el-table-column\n prop="id"\n label="ID"\n width="180">\n </el-table-column>\n <el-table-column\n prop="name"\n label="Name">\n </el-table-column>\n <el-table-column\n prop="amount1"\n label="Amount 1">\n </el-table-column>\n <el-table-column\n prop="amount2"\n label="Amount 2">\n </el-table-column>\n <el-table-column\n prop="amount3"\n label="Amount 3">\n </el-table-column>\n </el-table>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n id: \'12987122\',\n name: \'Tom\',\n amount1: \'234\',\n amount2: \'3.2\',\n amount3: 10\n }, {\n id: \'12987123\',\n name: \'Tom\',\n amount1: \'165\',\n amount2: \'4.43\',\n amount3: 12\n }, {\n id: \'12987124\',\n name: \'Tom\',\n amount1: \'324\',\n amount2: \'1.9\',\n amount3: 9\n }, {\n id: \'12987125\',\n name: \'Tom\',\n amount1: \'621\',\n amount2: \'2.2\',\n amount3: 17\n }, {\n id: \'12987126\',\n name: \'Tom\',\n amount1: \'539\',\n amount2: \'4.1\',\n amount3: 15\n }]\n };\n },\n methods: {\n arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n if (rowIndex % 2 === 0) {\n if (columnIndex === 0) {\n return [1, 2];\n } else if (columnIndex === 1) {\n return [0, 0];\n }\n }\n },\n\n objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n if (columnIndex === 0) {\n if (rowIndex % 2 === 0) {\n return {\n rowspan: 2,\n colspan: 1\n };\n } else {\n return {\n rowspan: 0,\n colspan: 0\n };\n }\n }\n }\n }\n };\n<\/script>\n')])])])],2),e._m(20),e._m(21),n("demo-block",[n("div",[n("p",[e._v("To customize row indices, use "),n("code",[e._v("index")]),e._v(" attribute on "),n("code",[e._v("el-table-column")]),e._v(" with "),n("code",[e._v("type=index")]),e._v(". If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from "),n("code",[e._v("0")]),e._v(") as parameter, and the returned value will be displayed as index.")])]),n("template",{slot:"source"},[n("element-demo19")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-table\n :data=\"tableData\"\n style=\"width: 100%\">\n <el-table-column\n type=\"index\"\n :index=\"indexMethod\">\n </el-table-column>\n <el-table-column\n prop=\"date\"\n label=\"Date\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"name\"\n label=\"Name\"\n width=\"180\">\n </el-table-column>\n <el-table-column\n prop=\"address\"\n label=\"Address\">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: '2016-05-03',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home'\n }, {\n date: '2016-05-02',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office'\n }, {\n date: '2016-05-04',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Home'\n }, {\n date: '2016-05-01',\n name: 'Tom',\n state: 'California',\n city: 'Los Angeles',\n address: 'No. 189, Grove St, Los Angeles',\n zip: 'CA 90036',\n tag: 'Office'\n }],\n }\n },\n methods: {\n indexMethod(index) {\n return index * 2;\n }\n }\n };\n<\/script>\n")])])])],2),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"striped-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#striped-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Striped Table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-border"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-border","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-status"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-status","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with status")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-fixed-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with fixed header")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-fixed-column"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-column","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with fixed column")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-fixed-columns-and-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-columns-and-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with fixed columns and header")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fluid-height-table-with-fixed-header-and-columns"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fluid-height-table-with-fixed-header-and-columns","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fluid-height Table with fixed header (and columns)")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grouping-table-head"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouping-table-head","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouping table head")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"single-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#single-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Single select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"multiple-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#multiple-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Multiple select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sorting"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sorting","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sorting")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filter"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filter","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filter")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-column-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-column-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom column template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-with-custom-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-with-custom-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table with custom header")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"expandable-row"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#expandable-row","aria-hidden":"true"}},[this._v("¶")]),this._v(" Expandable row")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tree-data-and-lazy-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-data-and-lazy-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree data and lazy mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"summary-row"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#summary-row","aria-hidden":"true"}},[this._v("¶")]),this._v(" Summary row")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rowspan-and-colspan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rowspan-and-colspan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rowspan and colspan")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-index"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-index","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom index")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can customize row index in "),n("code",[e._v("type=index")]),e._v(" columns.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("Table data")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Table's height. By default it has an "),n("code",[e._v("auto")]),e._v(" height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max-height")]),n("td",[e._v("Table's max-height. The legal value is a number or the height in px.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("stripe")]),n("td",[e._v("whether Table is striped")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("whether Table has vertical border")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Table")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("whether width of column automatically fits its container")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-header")]),n("td",[e._v("whether Table header is visible")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-current-row")]),n("td",[e._v("whether current row is highlighted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("current-row-key")]),n("td",[e._v("key of current row, a set only prop")]),n("td",[e._v("string,number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-class-name")]),n("td",[e._v("function that returns custom class names for a row, or a string assigning class names for every row")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-style")]),n("td",[e._v("function that returns custom style for a row, or an object assigning custom style for every row")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-class-name")]),n("td",[e._v("function that returns custom class names for a cell, or a string assigning class names for every cell")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-style")]),n("td",[e._v("function that returns custom style for a cell, or an object assigning custom style for every cell")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-class-name")]),n("td",[e._v("function that returns custom class names for a row in table header, or a string assigning class names for every row in table header")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-style")]),n("td",[e._v("function that returns custom style for a row in table header, or an object assigning custom style for every row in table header")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-class-name")]),n("td",[e._v("function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-style")]),n("td",[e._v("function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-key")]),n("td",[e._v("key of row data, used for optimizing rendering. Required if "),n("code",[e._v("reserve-selection")]),e._v(" is on or display tree data. When its type is String, multi-level access is supported, e.g. "),n("code",[e._v("user.info.id")]),e._v(", but "),n("code",[e._v("user.info[0].id")]),e._v(" is not supported, in which case "),n("code",[e._v("Function")]),e._v(" should be used.")]),n("td",[e._v("Function(row)/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("Displayed text when data is empty. You can customize this area with "),n("code",[e._v('slot="empty"')])]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("No Data")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v('whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data')]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-row-keys")]),n("td",[e._v("set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td")]),n("tr",[n("td",[e._v("default-sort")]),n("td",[e._v("set the default sort column and order. property "),n("code",[e._v("prop")]),e._v(" is used to set default sort column, property "),n("code",[e._v("order")]),e._v(" is used to set default sort order")]),n("td",[e._v("Object")]),n("td",[n("code",[e._v("order")]),e._v(": ascending, descending")]),n("td",[e._v("if "),n("code",[e._v("prop")]),e._v(" is set, and "),n("code",[e._v("order")]),e._v(" is not set, then "),n("code",[e._v("order")]),e._v(" is default to ascending")])]),n("tr",[n("td",[e._v("tooltip-effect")]),n("td",[e._v("tooltip "),n("code",[e._v("effect")]),e._v(" property")]),n("td",[e._v("String")]),n("td",[e._v("dark/light")]),n("td")]),n("tr",[n("td",[e._v("show-summary")]),n("td",[e._v("whether to display a summary row")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sum-text")]),n("td",[e._v("displayed text for the first column of summary row")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("Sum")])]),n("tr",[n("td",[e._v("summary-method")]),n("td",[e._v("custom summary method")]),n("td",[e._v("Function({ columns, data })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("span-method")]),n("td",[e._v("method that returns rowspan and colspan")]),n("td",[e._v("Function({ row, column, rowIndex, columnIndex })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-on-indeterminate")]),n("td",[e._v("controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("horizontal indentation of tree data")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("whether to lazy loading data")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("method for loading child row data, only works when "),n("code",[e._v("lazy")]),e._v(" is true")]),n("td",[e._v("Function(row, treeNode, resolve)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tree-props")]),n("td",[e._v("configuration for rendering nested data")]),n("td",[e._v("Object")]),n("td",[e._v("—")]),n("td",[e._v("{ hasChildren: 'hasChildren', children: 'children' }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("triggers when user clicks the checkbox in a row")]),n("td",[e._v("selection, row")])]),n("tr",[n("td",[e._v("select-all")]),n("td",[e._v("triggers when user clicks the checkbox in table header")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("selection-change")]),n("td",[e._v("triggers when selection changes")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("cell-mouse-enter")]),n("td",[e._v("triggers when hovering into a cell")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-mouse-leave")]),n("td",[e._v("triggers when hovering out of a cell")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-click")]),n("td",[e._v("triggers when clicking a cell")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-dblclick")]),n("td",[e._v("triggers when double clicking a cell")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("row-click")]),n("td",[e._v("triggers when clicking a row")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-contextmenu")]),n("td",[e._v("triggers when user right clicks on a row")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-dblclick")]),n("td",[e._v("triggers when double clicking a row")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("header-click")]),n("td",[e._v("triggers when clicking a column header")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("header-contextmenu")]),n("td",[e._v("triggers when user right clicks on a column header")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("sort-change")]),n("td",[e._v("triggers when Table's sorting changes")]),n("td",[e._v("{ column, prop, order }")])]),n("tr",[n("td",[e._v("filter-change")]),n("td",[e._v("column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered")]),n("td",[e._v("filters")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("triggers when current row changes")]),n("td",[e._v("currentRow, oldCurrentRow")])]),n("tr",[n("td",[e._v("header-dragend")]),n("td",[e._v("triggers after changing a column's width by dragging the column header's border")]),n("td",[e._v("newWidth, oldWidth, column, event")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded)")]),n("td",[e._v("row, (expandedRows | expanded)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("clearSelection")]),n("td",[e._v("used in multiple selection Table, clear user selection")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("toggleRowSelection")]),n("td",[e._v("used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected")]),n("td",[e._v("row, selected")])]),n("tr",[n("td",[e._v("toggleAllSelection")]),n("td",[e._v("used in multiple selection Table, toggle the selected state of all rows")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("toggleRowExpansion")]),n("td",[e._v("used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed")]),n("td",[e._v("row, expanded")])]),n("tr",[n("td",[e._v("setCurrentRow")]),n("td",[e._v("used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection.")]),n("td",[e._v("row")])]),n("tr",[n("td",[e._v("clearSort")]),n("td",[e._v("clear sorting, restore data to the original order")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearFilter")]),n("td",[e._v("clear filters of the columns whose "),n("code",[e._v("columnKey")]),e._v(" are passed in. If no params, clear all filters")]),n("td",[e._v("columnKeys")])]),n("tr",[n("td",[e._v("doLayout")]),n("td",[e._v("refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort")]),n("td",[e._v("sort Table manually. Property "),n("code",[e._v("prop")]),e._v(" is used to set sort column, property "),n("code",[e._v("order")]),e._v(" is used to set sort order")]),n("td",[e._v("prop: string, order: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("append")]),n("td",[e._v("Contents to be inserted after the last row. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of the column. If set to "),n("code",[e._v("selection")]),e._v(", the column will display checkbox. If set to "),n("code",[e._v("index")]),e._v(", the column will display index of the row (staring from 1). If set to "),n("code",[e._v("expand")]),e._v(", the column will display expand icon.")]),n("td",[e._v("string")]),n("td",[e._v("selection/index/expand")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("index")]),n("td",[e._v("customize indices for each row, works on columns with "),n("code",[e._v("type=index")])]),n("td",[e._v("number, Function(index)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("column label")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("column-key")]),n("td",[e._v("column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered")]),n("td",[e._v("string")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prop")]),n("td",[e._v("field name. You can also use its alias: "),n("code",[e._v("property")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("column width")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min-width")]),n("td",[e._v("column minimum width. Columns with "),n("code",[e._v("width")]),e._v(" has a fixed width, while columns with "),n("code",[e._v("min-width")]),e._v(" has a width that is distributed in proportion")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fixed")]),n("td",[e._v("whether column is fixed at left/right. Will be fixed at left if "),n("code",[e._v("true")])]),n("td",[e._v("string/boolean")]),n("td",[e._v("true/left/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-header")]),n("td",[e._v("render function for table header of this column")]),n("td",[e._v("Function(h, { column, $index })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sortable")]),n("td",[e._v("whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the "),n("code",[e._v("sort-change")]),e._v(" event of Table")]),n("td",[e._v("boolean, string")]),n("td",[e._v("true, false, custom")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sort-method")]),n("td",[e._v("sorting method, works when "),n("code",[e._v("sortable")]),e._v(" is "),n("code",[e._v("true")]),e._v(". Should return a number, just like Array.sort")]),n("td",[e._v("Function(a, b)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-by")]),n("td",[e._v("specify which property to sort by, works when "),n("code",[e._v("sortable")]),e._v(" is "),n("code",[e._v("true")]),e._v(" and "),n("code",[e._v("sort-method")]),e._v(" is "),n("code",[e._v("undefined")]),e._v(". If set to an Array, the column will sequentially sort by the next property if the previous one is equal")]),n("td",[e._v("Function(row, index)/String/Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-orders")]),n("td",[e._v("the order of the sorting strategies used when sorting the data, works when "),n("code",[e._v("sortable")]),e._v(" is "),n("code",[e._v("true")]),e._v(". Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array")]),n("td",[e._v("array")]),n("td",[e._v("the elements in the array need to be one of the following: "),n("code",[e._v("ascending")]),e._v(", "),n("code",[e._v("descending")]),e._v(" and "),n("code",[e._v("null")]),e._v(" (restores to the original order)")]),n("td",[e._v("['ascending', 'descending', null]")])]),n("tr",[n("td",[e._v("resizable")]),n("td",[e._v("whether column width can be resized, works when "),n("code",[e._v("border")]),e._v(" of "),n("code",[e._v("el-table")]),e._v(" is "),n("code",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("formatter")]),n("td",[e._v("function that formats cell content")]),n("td",[e._v("Function(row, column, cellValue, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-overflow-tooltip")]),n("td",[e._v("whether to hide extra content and show them in a tooltip when hovering on the cell")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("alignment")]),n("td",[e._v("string")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("header-align")]),n("td",[e._v("alignment of the table header. If omitted, the value of the above "),n("code",[e._v("align")]),e._v(" attribute will be applied")]),n("td",[e._v("String")]),n("td",[e._v("left/center/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("class-name")]),n("td",[e._v("class name of cells in the column")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-class-name")]),n("td",[e._v("class name of the label of this column")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("selectable")]),n("td",[e._v("function that determines if a certain row can be selected, works when "),n("code",[e._v("type")]),e._v(" is 'selection'")]),n("td",[e._v("Function(row, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-selection")]),n("td",[e._v("whether to reserve selection after data refreshing, works when "),n("code",[e._v("type")]),e._v(" is 'selection'. Note that "),n("code",[e._v("row-key")]),e._v(" is required for this to work")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filters")]),n("td",[e._v("an array of data filtering options. For each element in this array, "),n("code",[e._v("text")]),e._v(" and "),n("code",[e._v("value")]),e._v(" are required")]),n("td",[e._v("Array[{ text, value }]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-placement")]),n("td",[e._v("placement for the filter dropdown")]),n("td",[e._v("String")]),n("td",[e._v("same as Tooltip's "),n("code",[e._v("placement")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-multiple")]),n("td",[e._v("whether data filtering supports multiple options")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("data filtering method. If "),n("code",[e._v("filter-multiple")]),e._v(" is on, this method will be called multiple times for each row, and a row will display if one of the calls returns "),n("code",[e._v("true")])]),n("td",[e._v("Function(value, row, column)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filtered-value")]),n("td",[e._v("filter value for selected data, might be useful when table header is rendered with "),n("code",[e._v("render-header")])]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-column-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table-column Scoped Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Custom content for table columns. The scope parameter is { row, column, $index }")])]),n("tr",[n("td",[e._v("header")]),n("td",[e._v("Custom content for table header. The scope parameter is { column, $index }")])])])])}],!1,null,null,null);t.default=r.exports},487:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]},{data:function(){return{value1:!0,value2:!0}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{"active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),n("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"Pay by month","inactive-text":"Pay by year"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]},{data:function(){return{value1:!0,value2:!0}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-tooltip",{attrs:{content:"Switch value: "+t.value,placement:"top"}},[n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)],1)},staticRenderFns:[]},{data:function(){return{value:"100"}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{disabled:""},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),n("el-switch",{attrs:{disabled:""},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]},{data:function(){return{value1:!0,value2:!1}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Switch is used for switching between two opposing states.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Bind "),n("code",[e._v("v-model")]),e._v(" to a "),n("code",[e._v("Boolean")]),e._v(" typed variable. The "),n("code",[e._v("active-color")]),e._v(" and "),n("code",[e._v("inactive-color")]),e._v(" attribute decides the background color in two states.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch v-model="value1">\n</el-switch>\n<el-switch\n v-model="value2"\n active-color="#13ce66"\n inactive-color="#ff4949">\n</el-switch>\n\n<script>\n export default {\n data() {\n return {\n value1: true,\n value2: true\n }\n }\n };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("You can add "),n("code",[e._v("active-text")]),e._v(" and "),n("code",[e._v("inactive-text")]),e._v(" attribute to show texts.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n v-model="value1"\n active-text="Pay by month"\n inactive-text="Pay by year">\n</el-switch>\n<el-switch\n style="display: block"\n v-model="value2"\n active-color="#13ce66"\n inactive-color="#ff4949"\n active-text="Pay by month"\n inactive-text="Pay by year">\n</el-switch>\n\n<script>\n export default {\n data() {\n return {\n value1: true,\n value2: true\n }\n }\n };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("You can set "),n("code",[e._v("active-value")]),e._v(" and "),n("code",[e._v("inactive-value")]),e._v(" attributes. They both receive a "),n("code",[e._v("Boolean")]),e._v(", "),n("code",[e._v("String")]),e._v(" or "),n("code",[e._v("Number")]),e._v(" typed value.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip :content="\'Switch value: \' + value" placement="top">\n <el-switch\n v-model="value"\n active-color="#13ce66"\n inactive-color="#ff4949"\n active-value="100"\n inactive-value="0">\n </el-switch>\n</el-tooltip>\n\n<script>\n export default {\n data() {\n return {\n value: \'100\'\n }\n }\n };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Adding the "),n("code",[e._v("disabled")]),e._v(" attribute disables Switch.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n v-model="value1"\n disabled>\n</el-switch>\n<el-switch\n v-model="value2"\n disabled>\n</el-switch>\n\n<script>\n export default {\n data() {\n return {\n value1: true,\n value2: false\n }\n }\n };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"switch"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"text-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#text-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Text description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"extended-value-types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#extended-value-types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Extended value types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Switch is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("width of Switch")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("40")])]),n("tr",[n("td",[e._v("active-icon-class")]),n("td",[e._v("class name of the icon displayed when in "),n("code",[e._v("on")]),e._v(" state, overrides "),n("code",[e._v("active-text")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-icon-class")]),n("td",[e._v("class name of the icon displayed when in "),n("code",[e._v("off")]),e._v(" state, overrides "),n("code",[e._v("inactive-text")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-text")]),n("td",[e._v("text displayed when in "),n("code",[e._v("on")]),e._v(" state")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-text")]),n("td",[e._v("text displayed when in "),n("code",[e._v("off")]),e._v(" state")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-value")]),n("td",[e._v("switch value when in "),n("code",[e._v("on")]),e._v(" state")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inactive-value")]),n("td",[e._v("switch value when in "),n("code",[e._v("off")]),e._v(" state")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("active-color")]),n("td",[e._v("background color when in "),n("code",[e._v("on")]),e._v(" state")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("inactive-color")]),n("td",[e._v("background color when in "),n("code",[e._v("off")]),e._v(" state")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C0CCDA")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("input name of Switch")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("whether to trigger form validation")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when value changes")]),n("td",[e._v("value after changing")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the Switch component")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=r.exports},489:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{active:e.active,"finish-status":"success"}},[n("el-step",{attrs:{title:"Step 1"}}),e._v(" "),n("el-step",{attrs:{title:"Step 2"}}),e._v(" "),n("el-step",{attrs:{title:"Step 3"}})],1),e._v(" "),n("el-button",{staticStyle:{"margin-top":"12px"},on:{click:e.next}},[e._v("Next step")])],1)},staticRenderFns:[]},{data:function(){return{active:0}},methods:{next:function(){2<this.active++&&(this.active=0)}}}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"Done"}}),this._v(" "),t("el-step",{attrs:{title:"Processing"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3"}})],1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{active:2,"align-center":""}},[n("el-step",{attrs:{title:"Step 1",description:"Some description"}}),e._v(" "),n("el-step",{attrs:{title:"Step 2",description:"Some description"}}),e._v(" "),n("el-step",{attrs:{title:"Step 3",description:"Some description"}}),e._v(" "),n("el-step",{attrs:{title:"Step 4",description:"Some description"}})],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",description:"Some description"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2",description:"Some description"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1)],1)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"Step 1"}}),this._v(" "),t("el-step",{attrs:{title:"Step 2"}}),this._v(" "),t("el-step",{attrs:{title:"Step 3"}})],1)],1)])},staticRenderFns:[]},{}),"element-demo6":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-steps",{attrs:{space:200,active:1,simple:""}},[n("el-step",{attrs:{title:"Step 1",icon:"el-icon-edit"}}),e._v(" "),n("el-step",{attrs:{title:"Step 2",icon:"el-icon-upload"}}),e._v(" "),n("el-step",{attrs:{title:"Step 3",icon:"el-icon-picture"}})],1),e._v(" "),n("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[n("el-step",{attrs:{title:"Step 1"}}),e._v(" "),n("el-step",{attrs:{title:"Step 2"}}),e._v(" "),n("el-step",{attrs:{title:"Step 3"}})],1)],1)},staticRenderFns:[]},{})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.")]),e._m(1),n("p",[e._v("Simple step bar.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("active")]),e._v(" attribute with "),n("code",[e._v("Number")]),e._v(" type, which indicates the index of steps and starts from 0. You can set "),n("code",[e._v("space")]),e._v(" attribute when the width of the step needs to be fixed which accepts "),n("code",[e._v("Boolean")]),e._v(" type. The unit of the "),n("code",[e._v("space")]),e._v(" attribute is "),n("code",[e._v("px")]),e._v(". If not set, it is responsive. Setting the "),n("code",[e._v("finish-status")]),e._v(" attribute can change the state of the steps that have been completed.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="active" finish-status="success">\n <el-step title="Step 1"></el-step>\n <el-step title="Step 2"></el-step>\n <el-step title="Step 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">Next step</el-button>\n\n<script>\n export default {\n data() {\n return {\n active: 0\n };\n },\n\n methods: {\n next() {\n if (this.active++ > 2) this.active = 0;\n }\n }\n }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Shows the status of the step for each step.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("title")]),e._v(" attribute to set the name of the step, or override the attribute by using a named "),n("code",[e._v("slot")]),e._v(". We have listed all the slot names for you at the end of this page.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :space="200" :active="1" finish-status="success">\n <el-step title="Done"></el-step>\n <el-step title="Processing"></el-step>\n <el-step title="Step 3"></el-step>\n</el-steps>\n')])])])],2),e._m(3),n("p",[e._v("Title and desription can be centered.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="2" align-center>\n <el-step title="Step 1" description="Some description"></el-step>\n <el-step title="Step 2" description="Some description"></el-step>\n <el-step title="Step 3" description="Some description"></el-step>\n <el-step title="Step 4" description="Some description"></el-step>\n</el-steps>\n')])])])],2),e._m(4),n("p",[e._v("There is description for each step.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n <el-step title="Step 1" description="Some description"></el-step>\n <el-step title="Step 2" description="Some description"></el-step>\n <el-step title="Step 3" description="Some description"></el-step>\n</el-steps>\n')])])])],2),e._m(5),n("p",[e._v("A variety of custom icons can be used in the step bar.")]),n("demo-block",[n("div",[n("p",[e._v("The icon is set by the "),n("code",[e._v("icon")]),e._v(" property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named "),n("code",[e._v("slot")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n <el-step title="Step 1" icon="el-icon-edit"></el-step>\n <el-step title="Step 2" icon="el-icon-upload"></el-step>\n <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n')])])])],2),e._m(6),n("p",[e._v("Vertical step bars.")]),n("demo-block",[n("div",[n("p",[e._v("You only need to set the "),n("code",[e._v("direction")]),e._v(" attribute to"),n("code",[e._v("vertical")]),e._v(" in the "),n("code",[e._v("el-steps")]),e._v(" element.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div style="height: 300px;">\n <el-steps direction="vertical" :active="1">\n <el-step title="Step 1"></el-step>\n <el-step title="Step 2"></el-step>\n <el-step title="Step 3"></el-step>\n </el-steps>\n</div>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :space="200" :active="1" simple>\n <el-step title="Step 1" icon="el-icon-edit"></el-step>\n <el-step title="Step 2" icon="el-icon-upload"></el-step>\n <el-step title="Step 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n <el-step title="Step 1" ></el-step>\n <el-step title="Step 2" ></el-step>\n <el-step title="Step 3" ></el-step>\n</el-steps>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-that-contains-status"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-that-contains-status","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar that contains status")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"center"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#center","aria-hidden":"true"}},[this._v("¶")]),this._v(" Center")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-with-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar with description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-bar-with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step bar with icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"vertical-step-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vertical-step-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Vertical step bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"simple-step-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#simple-step-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Simple step bar")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Simple step bars, where "),n("code",[e._v("align-center")]),e._v(", "),n("code",[e._v("description")]),e._v(", "),n("code",[e._v("direction")]),e._v(" and "),n("code",[e._v("space")]),e._v(" will be ignored.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("space")]),n("td",[e._v("the spacing of each step, will be responsive if omitted. Supports percentage.")]),n("td",[e._v("number / string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("direction")]),n("td",[e._v("display direction")]),n("td",[e._v("string")]),n("td",[e._v("vertical/horizontal")]),n("td",[e._v("horizontal")])]),n("tr",[n("td",[e._v("active")]),n("td",[e._v("current activation step")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("process-status")]),n("td",[e._v("status of current step")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("process")])]),n("tr",[n("td",[e._v("finish-status")]),n("td",[e._v("status of end step")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("finish")])]),n("tr",[n("td",[e._v("align-center")]),n("td",[e._v("center title and description")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("simple")]),n("td",[e._v("whether to apply simple theme")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("step title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("step description")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("step icon")]),n("td",[e._v("step icon's class name. Icons can be passed via named slot as well")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("current status. It will be automatically set by Steps if not configured.")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("-")]),n("td")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("custom icon")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("step title")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("step description")])])])])}],!1,null,null,null);t.default=r.exports},492:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default value")]),t._v(" "),n("el-slider",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Customized initial value")]),t._v(" "),n("el-slider",{model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Hide Tooltip")]),t._v(" "),n("el-slider",{attrs:{"show-tooltip":!1},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Format Tooltip")]),t._v(" "),n("el-slider",{attrs:{"format-tooltip":t.formatTooltip},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Disabled")]),t._v(" "),n("el-slider",{attrs:{disabled:""},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(e){return e/100}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Breakpoints not displayed")]),t._v(" "),n("el-slider",{attrs:{step:10},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Breakpoints displayed")]),t._v(" "),n("el-slider",{attrs:{step:10,"show-stops":""},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:0,value2:0}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{"show-input":""},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:0}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:[4,8]}}}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:0}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{range:"",marks:t.marks},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:[30,60],marks:{0:"0°C",8:"8°C",37:"37°C",50:{style:{color:"#1989FA"},label:this.$createElement("strong","50%")}}}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Drag the slider within a fixed range.")]),e._m(1),n("p",[e._v("The current value is displayed when the slider is being dragged.")]),n("demo-block",[n("div",[n("p",[e._v("Customize the initial value of the slider by setting the binding value.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Default value</span>\n <el-slider v-model="value1"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">Customized initial value</span>\n <el-slider v-model="value2"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">Hide Tooltip</span>\n <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">Format Tooltip</span>\n <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">Disabled</span>\n <el-slider v-model="value5" disabled></el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value1: 0,\n value2: 50,\n value3: 36,\n value4: 48,\n value5: 42\n }\n },\n methods: {\n formatTooltip(val) {\n return val / 100;\n }\n }\n }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("The options can be discrete.")]),n("demo-block",[n("div",[n("p",[e._v("Set step size with the "),n("code",[e._v("step")]),e._v(" attribute. You can display breakpoints by setting the "),n("code",[e._v("show-stops")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Breakpoints not displayed</span>\n <el-slider\n v-model="value1"\n :step="10">\n </el-slider>\n </div>\n <div class="block">\n <span class="demonstration">Breakpoints displayed</span>\n <el-slider\n v-model="value2"\n :step="10"\n show-stops>\n </el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value1: 0,\n value2: 0\n }\n }\n }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Set value via a input box.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("show-input")]),e._v(" attribute to display an input box on the right.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <el-slider\n v-model="value"\n show-input>\n </el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value: 0\n }\n }\n }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Selecting a range of values is supported.")]),n("demo-block",[n("div",[n("p",[e._v("Setting the "),n("code",[e._v("range")]),e._v(" attribute activates range mode, where the binding value is an array made up of two boundary values.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <el-slider\n v-model="value"\n range\n show-stops\n :max="10">\n </el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value: [4, 8]\n }\n }\n }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Setting the "),n("code",[e._v("vertical")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" enables vertical mode. In vertical mode, the "),n("code",[e._v("height")]),e._v(" attribute is required.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <el-slider\n v-model="value"\n vertical\n height="200px">\n </el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value: 0\n }\n }\n }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("Setting this "),n("code",[e._v("marks")]),e._v(" attribute can show mark on slider.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <div class=\"block\">\n <el-slider\n v-model=\"value\"\n range\n :marks=\"marks\">\n </el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value: [30, 60],\n marks: {\n 0: '0°C',\n 8: '8°C',\n 37: '37°C',\n 50: {\n style: {\n color: '#1989FA'\n },\n label: this.$createElement('strong', '50%')\n }\n }\n }\n }\n }\n<\/script>\n")])])])],2),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"slider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"discrete-values"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#discrete-values","aria-hidden":"true"}},[this._v("¶")]),this._v(" Discrete values")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slider-with-input-box"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-with-input-box","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider with input box")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"range-selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#range-selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Range selection")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"vertical-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vertical-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Vertical mode")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"show-marks"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#show-marks","aria-hidden":"true"}},[this._v("¶")]),this._v(" Show marks")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("minimum value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("maximum value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("100")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Slider is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("step size")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("show-input")]),n("td",[e._v("whether to display an input box, works when "),n("code",[e._v("range")]),e._v(" is false")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-input-controls")]),n("td",[e._v("whether to display control buttons when "),n("code",[e._v("show-input")]),e._v(" is true")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("input-size")]),n("td",[e._v("size of the input box")]),n("td",[e._v("string")]),n("td",[e._v("large / medium / small / mini")]),n("td",[e._v("small")])]),n("tr",[n("td",[e._v("show-stops")]),n("td",[e._v("whether to display breakpoints")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-tooltip")]),n("td",[e._v("whether to display tooltip value")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("format-tooltip")]),n("td",[e._v("format to display tooltip value")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("range")]),n("td",[e._v("whether to select a range")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("vertical")]),n("td",[e._v("vertical mode")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Slider height, required in vertical mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label for screen reader")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("debounce delay when typing, in milliseconds, works when "),n("code",[e._v("show-input")]),e._v(" is true")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("tooltip-class")]),n("td",[e._v("custom class name for the tooltip")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("marks")]),n("td",[e._v("marks， type of key must be "),n("code",[e._v("number")]),e._v(" and must in closed interval "),n("code",[e._v("[min, max]")]),e._v(", each mark can custom style")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released)")]),n("td",[e._v("value after changing")])]),n("tr",[n("td",[e._v("input")]),n("td",[e._v("triggers when the data changes (It'll be emitted in real time during sliding)")]),n("td",[e._v("value after changing")])])])])}],!1,null,null,null);t.default=r.exports},495:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value,disabled:e.disabled}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),t._v(" "),n("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"Select"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value1:[],value2:[]}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.cities,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}},[n("span",{staticStyle:{float:"left"}},[t._v(t._s(e.label))]),t._v(" "),n("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[t._v(t._s(e.value))])])}),1)]],2)},staticRenderFns:[]},{data:function(){return{cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value:""}}}),"element-demo6":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option-group",{key:e.label,attrs:{label:e.label}},t._l(e.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{label:"Popular cities",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"City name",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],value:""}}}),"element-demo7":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}}),"element-demo8":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"Please enter a keyword","remote-method":t.remoteMethod,loading:t.loading},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[],value:[],list:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(e){return{value:e,label:e}})},methods:{remoteMethod:function(t){var e=this;""!==t?(this.loading=!0,setTimeout(function(){e.loading=!1,e.options=e.list.filter(function(e){return-1<e.label.toLowerCase().indexOf(t.toLowerCase())})},200)):this.options=[]}}}),"element-demo9":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"","allow-create":"","default-first-option":"",placeholder:"Choose tags for your article"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],value:[]}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("When there are plenty of options, use a drop-down menu to display and select desired ones.")]),e._m(1),n("demo-block",[n("div",[n("p",[n("code",[e._v("v-model")]),e._v(" is the value of "),n("code",[e._v("el-option")]),e._v(" that is currently selected.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-select v-model=\"value\" placeholder=\"Select\">\n <el-option\n v-for=\"item in options\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\">\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value: ''\n }\n }\n }\n<\/script>\n")])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Set the value of "),n("code",[e._v("disabled")]),e._v(" in "),n("code",[e._v("el-option")]),e._v(" to "),n("code",[e._v("true")]),e._v(" to disable this option.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-select v-model=\"value\" placeholder=\"Select\">\n <el-option\n v-for=\"item in options\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\"\n :disabled=\"item.disabled\">\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2',\n disabled: true\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value: ''\n }\n }\n }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Disable the whole component.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("disabled")]),e._v(" of "),n("code",[e._v("el-select")]),e._v(" to make it disabled.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-select v-model=\"value\" disabled placeholder=\"Select\">\n <el-option\n v-for=\"item in options\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\">\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value: ''\n }\n }\n }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("You can clear Select using a clear icon.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("clearable")]),e._v(" attribute for "),n("code",[e._v("el-select")]),e._v(" and a clear icon will appear. Note that "),n("code",[e._v("clearable")]),e._v(" is only for single select.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-select v-model=\"value\" clearable placeholder=\"Select\">\n <el-option\n v-for=\"item in options\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\">\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value: ''\n }\n }\n }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Multiple select uses tags to display selected options.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("multiple")]),e._v(" attribute for "),n("code",[e._v("el-select")]),e._v(" to enable multiple mode. In this case, the value of "),n("code",[e._v("v-model")]),e._v(" will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using "),n("code",[e._v("collapse-tags")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-select v-model="value1" multiple placeholder="Select">\n <el-option\n v-for="item in options"\n :key="item.value"\n :label="item.label"\n :value="item.value">\n </el-option>\n </el-select>\n \n <el-select\n v-model="value2"\n multiple\n collapse-tags\n style="margin-left: 20px;"\n placeholder="Select">\n <el-option\n v-for="item in options"\n :key="item.value"\n :label="item.label"\n :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: \'Option1\',\n label: \'Option1\'\n }, {\n value: \'Option2\',\n label: \'Option2\'\n }, {\n value: \'Option3\',\n label: \'Option3\'\n }, {\n value: \'Option4\',\n label: \'Option4\'\n }, {\n value: \'Option5\',\n label: \'Option5\'\n }],\n value1: [],\n value2: []\n }\n }\n }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("You can customize HTML templates for options.")]),n("demo-block",[n("div",[n("p",[e._v("Insert customized HTML templates into the slot of "),n("code",[e._v("el-option")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-select v-model=\"value\" placeholder=\"Select\">\n <el-option\n v-for=\"item in cities\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\">\n <span style=\"float: left\">{{ item.label }}</span>\n <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n cities: [{\n value: 'Beijing',\n label: 'Beijing'\n }, {\n value: 'Shanghai',\n label: 'Shanghai'\n }, {\n value: 'Nanjing',\n label: 'Nanjing'\n }, {\n value: 'Chengdu',\n label: 'Chengdu'\n }, {\n value: 'Shenzhen',\n label: 'Shenzhen'\n }, {\n value: 'Guangzhou',\n label: 'Guangzhou'\n }],\n value: ''\n }\n }\n }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Display options in groups.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("el-option-group")]),e._v(" to group the options, and its "),n("code",[e._v("label")]),e._v(" attribute stands for the name of the group.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-select v-model=\"value\" placeholder=\"Select\">\n <el-option-group\n v-for=\"group in options\"\n :key=\"group.label\"\n :label=\"group.label\">\n <el-option\n v-for=\"item in group.options\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\">\n </el-option>\n </el-option-group>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n label: 'Popular cities',\n options: [{\n value: 'Shanghai',\n label: 'Shanghai'\n }, {\n value: 'Beijing',\n label: 'Beijing'\n }]\n }, {\n label: 'City name',\n options: [{\n value: 'Chengdu',\n label: 'Chengdu'\n }, {\n value: 'Shenzhen',\n label: 'Shenzhen'\n }, {\n value: 'Guangzhou',\n label: 'Guangzhou'\n }, {\n value: 'Dalian',\n label: 'Dalian'\n }]\n }],\n value: ''\n }\n }\n }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("You can filter options for your desired ones.")]),n("demo-block",[n("div",[n("p",[e._v("Adding "),n("code",[e._v("filterable")]),e._v(" to "),n("code",[e._v("el-select")]),e._v(" enables filtering. By default, Select will find all the options whose "),n("code",[e._v("label")]),e._v(" attribute contains the input value. If you prefer other filtering strategies, you can pass the "),n("code",[e._v("filter-method")]),e._v(". "),n("code",[e._v("filter-method")]),e._v(" is a "),n("code",[e._v("Function")]),e._v(" that gets called when the input value changes, and its parameter is the current input value.")])]),n("template",{slot:"source"},[n("element-demo7")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-select v-model=\"value\" filterable placeholder=\"Select\">\n <el-option\n v-for=\"item in options\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\">\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'Option1',\n label: 'Option1'\n }, {\n value: 'Option2',\n label: 'Option2'\n }, {\n value: 'Option3',\n label: 'Option3'\n }, {\n value: 'Option4',\n label: 'Option4'\n }, {\n value: 'Option5',\n label: 'Option5'\n }],\n value: ''\n }\n }\n }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Enter keywords and search data from server.")]),n("demo-block",[n("div",[n("p",[e._v("Set the value of "),n("code",[e._v("filterable")]),e._v(" and "),n("code",[e._v("remote")]),e._v(" with "),n("code",[e._v("true")]),e._v(" to enable remote search, and you should pass the "),n("code",[e._v("remote-method")]),e._v(". "),n("code",[e._v("remote-method")]),e._v(" is a "),n("code",[e._v("Function")]),e._v(" that gets called when the input value changes, and its parameter is the current input value. Note that if "),n("code",[e._v("el-option")]),e._v(" is rendered with the "),n("code",[e._v("v-for")]),e._v(" directive, you should add the "),n("code",[e._v("key")]),e._v(" attribute for "),n("code",[e._v("el-option")]),e._v(". Its value needs to be unique, such as "),n("code",[e._v("item.value")]),e._v(" in the following example.")])]),n("template",{slot:"source"},[n("element-demo8")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-select\n v-model="value"\n multiple\n filterable\n remote\n reserve-keyword\n placeholder="Please enter a keyword"\n :remote-method="remoteMethod"\n :loading="loading">\n <el-option\n v-for="item in options"\n :key="item.value"\n :label="item.label"\n :value="item.value">\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options: [],\n value: [],\n list: [],\n loading: false,\n states: ["Alabama", "Alaska", "Arizona",\n "Arkansas", "California", "Colorado",\n "Connecticut", "Delaware", "Florida",\n "Georgia", "Hawaii", "Idaho", "Illinois",\n "Indiana", "Iowa", "Kansas", "Kentucky",\n "Louisiana", "Maine", "Maryland",\n "Massachusetts", "Michigan", "Minnesota",\n "Mississippi", "Missouri", "Montana",\n "Nebraska", "Nevada", "New Hampshire",\n "New Jersey", "New Mexico", "New York",\n "North Carolina", "North Dakota", "Ohio",\n "Oklahoma", "Oregon", "Pennsylvania",\n "Rhode Island", "South Carolina",\n "South Dakota", "Tennessee", "Texas",\n "Utah", "Vermont", "Virginia",\n "Washington", "West Virginia", "Wisconsin",\n "Wyoming"]\n }\n },\n mounted() {\n this.list = this.states.map(item => {\n return { value: item, label: item };\n });\n },\n methods: {\n remoteMethod(query) {\n if (query !== \'\') {\n this.loading = true;\n setTimeout(() => {\n this.loading = false;\n this.options = this.list.filter(item => {\n return item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > -1;\n });\n }, 200);\n } else {\n this.options = [];\n }\n }\n }\n }\n<\/script>\n')])])])],2),e._m(10),n("p",[e._v("Create and select new items that are not included in select options")]),n("demo-block",[n("div",[n("p",[e._v("By using the "),n("code",[e._v("allow-create")]),e._v(" attribute, users can create new items by typing in the input box. Note that for "),n("code",[e._v("allow-create")]),e._v(" to work, "),n("code",[e._v("filterable")]),e._v(" must be "),n("code",[e._v("true")]),e._v(". This example also demonstrates "),n("code",[e._v("default-first-option")]),e._v(". When this attribute is set to "),n("code",[e._v("true")]),e._v(", you can select the first option in the current option list by hitting enter without having to navigate with mouse or arrow keys.")])]),n("template",{slot:"source"},[n("element-demo9")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-select\n v-model=\"value\"\n multiple\n filterable\n allow-create\n default-first-option\n placeholder=\"Choose tags for your article\">\n <el-option\n v-for=\"item in options\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\">\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'HTML',\n label: 'HTML'\n }, {\n value: 'CSS',\n label: 'CSS'\n }, {\n value: 'JavaScript',\n label: 'JavaScript'\n }],\n value: []\n }\n }\n }\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-option"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled option")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clearable-single-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clearable-single-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clearable single select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-multiple-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-multiple-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic multiple select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grouping"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouping","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouping")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-filtering"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-filtering","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option filtering")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"remote-search"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[this._v("¶")]),this._v(" Remote Search")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"create-new-items"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#create-new-items","aria-hidden":"true"}},[this._v("¶")]),this._v(" Create new items")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("If the binding value of Select is an object, make sure to assign "),n("code",[e._v("value-key")]),e._v(" as its unique identity key name.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("whether multiple-select is activated")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Select is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("unique identity key name for value, required when value is an object")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether select can be cleared")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-tags")]),n("td",[e._v("whether to collapse tags to a text when multiple selecting")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("multiple-limit")]),n("td",[e._v("maximum number of options user can select when "),n("code",[e._v("multiple")]),e._v(" is "),n("code",[e._v("true")]),e._v(". No limit when set to 0")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("the name attribute of select input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("the autocomplete attribute of select input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("@DEPRECATED in next major version")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Select")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("whether Select is filterable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-create")]),n("td",[e._v("whether creating new items is allowed. To use this, "),n("code",[e._v("filterable")]),e._v(" must be true")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("custom filter method")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("remote")]),n("td",[e._v("whether options are loaded from server")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("remote-method")]),n("td",[e._v("custom remote search method")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("whether Select is loading data from server")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading-text")]),n("td",[e._v("displayed text while loading data from server")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Loading")])]),n("tr",[n("td",[e._v("no-match-text")]),n("td",[e._v("displayed text when no data matches the filtering query, you can also use slot "),n("code",[e._v("empty")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("No matching data")])]),n("tr",[n("td",[e._v("no-data-text")]),n("td",[e._v("displayed text when there is no options, you can also use slot "),n("code",[e._v("empty")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("No data")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for Select's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-keyword")]),n("td",[e._v("when "),n("code",[e._v("multiple")]),e._v(" and "),n("code",[e._v("filter")]),e._v(" is true, whether to reserve current keyword after selecting an option")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-first-option")]),n("td",[e._v("select first matching option on enter key. Use with "),n("code",[e._v("filterable")]),e._v(" or "),n("code",[e._v("remote")])]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("automatic-dropdown")]),n("td",[e._v("for non-filterable Select, this prop decides if the option menu pops up when the input is focused")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the selected value changes")]),n("td",[e._v("current selected value")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("triggers when the dropdown appears/disappears")]),n("td",[e._v("true when it appears, and false otherwise")])]),n("tr",[n("td",[e._v("remove-tag")]),n("td",[e._v("triggers when a tag is removed in multiple mode")]),n("td",[e._v("removed tag value")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("triggers when the clear icon is clicked in a clearable Select")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Option component list")])]),n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("content as Select prefix")])]),n("tr",[n("td",[e._v("empty")]),n("td",[e._v("content when there is no options")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("name of the group")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether to disable all options in this group")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("value of option")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label of option, same as "),n("code",[e._v("value")]),e._v(" if omitted")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether option is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the Input component")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("blur the Input component, and hide the dropdown")]),n("td",[e._v("-")])])])])}],!1,null,null,null);t.default=r.exports},496:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:12}},[n("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:3}},[n("el-button",{attrs:{size:"small"}},[e._v("replies")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[n("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[n("el-button",{attrs:{size:"small"}},[e._v("replies")])],1),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n Click Me"),n("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n comments\n "),n("el-badge",{staticClass:"mark",attrs:{value:12}})],1),e._v(" "),n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n replies\n "),n("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[n("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[n("el-button",{attrs:{size:"small"}},[e._v("replies")])],1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:"new"}},[n("el-button",{attrs:{size:"small"}},[e._v("comments")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:"hot"}},[n("el-button",{attrs:{size:"small"}},[e._v("replies")])],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[this._v("query")]),this._v(" "),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1)},staticRenderFns:[]},{})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("A number or status mark on buttons and icons.")]),e._m(1),n("p",[e._v("Displays the amount of new messages.")]),n("demo-block",[n("div",[n("p",[e._v("The amount is defined with "),n("code",[e._v("value")]),e._v(" which accepts "),n("code",[e._v("Number")]),e._v(" or "),n("code",[e._v("String")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="12" class="item">\n <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n <el-button size="small">replies</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n <el-button size="small">replies</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n <span class="el-dropdown-link">\n Click Me<i class="el-icon-caret-bottom el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item class="clearfix">\n comments\n <el-badge class="mark" :value="12" />\n </el-dropdown-item>\n <el-dropdown-item class="clearfix">\n replies\n <el-badge class="mark" :value="3" />\n </el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(2),n("p",[e._v("You can customize the max value.")]),n("demo-block",[n("div",[n("p",[e._v("The max value is defined by property "),n("code",[e._v("max")]),e._v(" which is a "),n("code",[e._v("Number")]),e._v(". Note that it only works when "),n("code",[e._v("value")]),e._v(" is also a "),n("code",[e._v("Number")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="200" :max="99" class="item">\n <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n <el-button size="small">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Displays text content other than numbers.")]),n("demo-block",[n("div",[n("p",[e._v("When "),n("code",[e._v("value")]),e._v(" is a "),n("code",[e._v("String")]),e._v(", it can display customized text.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge value="new" class="item">\n <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n <el-button size="small">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(4),n("p",[e._v("Use a red dot to mark content that needs to be noticed.")]),n("demo-block",[n("div",[n("p",[e._v("Use the attribute "),n("code",[e._v("is-dot")]),e._v(". It is a "),n("code",[e._v("Boolean")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge is-dot class="item">query</el-badge>\n<el-badge is-dot class="item">\n <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n<style>\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"badge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"max-value"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#max-value","aria-hidden":"true"}},[this._v("¶")]),this._v(" Max value")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizations"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizations")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"little-red-dot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#little-red-dot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Little red dot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("display value")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("maximum value, shows '{max}+' when exceeded. Only works if "),n("code",[e._v("value")]),e._v(" is a "),n("code",[e._v("Number")])]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-dot")]),n("td",[e._v("if a little dot is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hidden")]),n("td",[e._v("hidden badge")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("button type")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=r.exports},498:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-rate",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Color for different levels")]),t._v(" "),n("el-rate",{attrs:{colors:t.colors},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)])},staticRenderFns:[]},{data:function(){return{value1:null,value2:null,colors:["#99A9BF","#F7BA2A","#FF9900"]}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:null}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{"icon-classes":t.iconClasses,"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:null,iconClasses:["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"]}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:3.7}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Used for rating")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Rate divides rating scores into several levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them an array with three element to reflect three levels using the "),n("code",[e._v("colors")]),e._v(" attribute, and their two thresholds can be defined by "),n("code",[e._v("low-threshold")]),e._v(" and "),n("code",[e._v("high-threshold")]),e._v(", or you can assign them with a object which key is the threshold between two levels and value is the corresponding color.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n <span class="demonstration">Default</span>\n <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n <span class="demonstration">Color for different levels</span>\n <el-rate\n v-model="value2"\n :colors="colors">\n </el-rate>\n</div>\n\n<script>\n export default {\n data() {\n return {\n value1: null,\n value2: null,\n colors: [\'#99A9BF\', \'#F7BA2A\', \'#FF9900\'] // same as { 2: \'#99A9BF\', 4: { value: \'#F7BA2A\', excluded: true }, 5: \'#FF9900\' }\n }\n }\n }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Using text to indicate rating score")]),n("demo-block",[n("div",[n("p",[e._v("Add attribute "),n("code",[e._v("show-text")]),e._v(" to display text at the right of Rate. You can assign texts for different scores using "),n("code",[e._v("texts")]),e._v(". "),n("code",[e._v("texts")]),e._v(" is an array whose length should be equal to the max score "),n("code",[e._v("max")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n v-model=\"value\"\n :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\"\n show-text>\n</el-rate>\n\n<script>\n export default {\n data() {\n return {\n value: null\n }\n }\n }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("You can use different icons to distinguish different rate components.")]),n("demo-block",[n("div",[n("p",[e._v("You can customize icons by passing "),n("code",[e._v("icon-classes")]),e._v(" an array with three elements or a object which key is the threshold between two levels and value is the corresponding icon class. In this example, we also use "),n("code",[e._v("void-icon-class")]),e._v(" to set the icon if it is unselected.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n v-model=\"value\"\n :icon-classes=\"iconClasses\"\n void-icon-class=\"icon-rate-face-off\"\n :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n export default {\n data() {\n return {\n value: null,\n iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }\n }\n }\n }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Read-only Rate is for displaying rating score. Half star is supported.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("disabled")]),e._v(" to make the component read-only. Add "),n("code",[e._v("show-score")]),e._v(" to display the rating score at the right side. Additionally, you can use attribute "),n("code",[e._v("score-template")]),e._v(" to provide a score template. It must contain "),n("code",[e._v("{value}")]),e._v(", and "),n("code",[e._v("{value}")]),e._v(" will be replaced with the rating score.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n v-model="value"\n disabled\n show-score\n text-color="#ff9900"\n score-template="{value} points">\n</el-rate>\n\n<script>\n export default {\n data() {\n return {\n value: 3.7\n }\n }\n }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"rate"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rate")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" With text")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"more-icons"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#more-icons","aria-hidden":"true"}},[this._v("¶")]),this._v(" More icons")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"read-only"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#read-only","aria-hidden":"true"}},[this._v("¶")]),this._v(" Read-only")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("max rating score")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("5")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Rate is read-only")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-half")]),n("td",[e._v("whether picking half start is allowed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("low-threshold")]),n("td",[e._v("threshold value between low and medium level. The value itself will be included in low level")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("high-threshold")]),n("td",[e._v("threshold value between medium and high level. The value itself will be included in high level")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4")])]),n("tr",[n("td",[e._v("colors")]),n("td",[e._v("colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color")]),n("td",[e._v("array/object")]),n("td",[e._v("—")]),n("td",[e._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),n("tr",[n("td",[e._v("void-color")]),n("td",[e._v("color of unselected icons")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C6D1DE")])]),n("tr",[n("td",[e._v("disabled-void-color")]),n("td",[e._v("color of unselected read-only icons")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#EFF2F7")])]),n("tr",[n("td",[e._v("icon-classes")]),n("td",[e._v("class names of icons. If array, ot should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding icon class")]),n("td",[e._v("array/object")]),n("td",[e._v("—")]),n("td",[e._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),n("tr",[n("td",[e._v("void-icon-class")]),n("td",[e._v("class name of unselected icons")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-off")])]),n("tr",[n("td",[e._v("disabled-void-icon-class")]),n("td",[e._v("class name of unselected read-only icons")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-on")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("whether to display texts")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-score")]),n("td",[e._v("whether to display current score. show-score and show-text cannot be true at the same time")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("color of texts")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#1F2D3D")])]),n("tr",[n("td",[e._v("texts")]),n("td",[e._v("text array")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['极差', '失望', '一般', '满意', '惊喜']")])]),n("tr",[n("td",[e._v("score-template")]),n("td",[e._v("score template")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("{value}")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Triggers when rate value is changed")]),n("td",[e._v("value after changing")])])])])}],!1,null,null,null);t.default=r.exports},501:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{label:"1"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option B")])]],2)},staticRenderFns:[]},{data:function(){return{radio:"1"}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option B")])]],2)},staticRenderFns:[]},{data:function(){return{radio:"selected and disabled"}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[n("el-radio",{attrs:{label:3}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:6}},[t._v("Option B")]),t._v(" "),n("el-radio",{attrs:{label:9}},[t._v("Option C")])],1)],1)},staticRenderFns:[]},{data:function(){return{radio:3}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio-group",{model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington",disabled:""}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{radio1:"New York",radio2:"New York",radio3:"New York",radio4:"New York"}}}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio",{attrs:{label:"1",border:""},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option B")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[t._v("Option B")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",disabled:""}},[t._v("Option B")])],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""}},[t._v("Option B")])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{radio1:"1",radio2:"1",radio3:"1",radio4:"1"}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Single selection among multiple options.")]),e._m(1),n("p",[e._v("Radio should not have too many options. Otherwise, use the Select component instead.")]),n("demo-block",[n("div",[n("p",[e._v("Creating a radio component is easy, you just need to bind a variable to Radio's "),n("code",[e._v("v-model")]),e._v(". It equals to the value of "),n("code",[e._v("label")]),e._v(" of the chosen radio. The type of "),n("code",[e._v("label")]),e._v(" is "),n("code",[e._v("String")]),e._v(", "),n("code",[e._v("Number")]),e._v(" or "),n("code",[e._v("Boolean")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-radio v-model="radio" label="1">Option A</el-radio>\n <el-radio v-model="radio" label="2">Option B</el-radio>\n</template>\n\n<script>\n export default {\n data () {\n return {\n radio: \'1\'\n };\n }\n }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("You just need to add the "),n("code",[e._v("disabled")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-radio disabled v-model="radio" label="disabled">Option A</el-radio>\n <el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>\n</template>\n\n<script>\n export default {\n data () {\n return {\n radio: \'selected and disabled\'\n };\n }\n }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Suitable for choosing from some mutually exclusive options.")]),n("demo-block",[n("div",[n("p",[e._v("Combine "),n("code",[e._v("el-radio-group")]),e._v(" with "),n("code",[e._v("el-radio")]),e._v(" to display a radio group. Bind a variable with "),n("code",[e._v("v-model")]),e._v(" of "),n("code",[e._v("el-radio-group")]),e._v(" element and set label value in "),n("code",[e._v("el-radio")]),e._v(". It also provides "),n("code",[e._v("change")]),e._v(" event with the current value as its parameter.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="radio">\n <el-radio :label="3">Option A</el-radio>\n <el-radio :label="6">Option B</el-radio>\n <el-radio :label="9">Option C</el-radio>\n</el-radio-group>\n\n<script>\n export default {\n data () {\n return {\n radio: 3\n };\n }\n }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Radio with button styles.")]),n("demo-block",[n("div",[n("p",[e._v("You just need to change "),n("code",[e._v("el-radio")]),e._v(" element into "),n("code",[e._v("el-radio-button")]),e._v(" element. We also provide "),n("code",[e._v("size")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <el-radio-group v-model="radio1">\n <el-radio-button label="New York"></el-radio-button>\n <el-radio-button label="Washington"></el-radio-button>\n <el-radio-button label="Los Angeles"></el-radio-button>\n <el-radio-button label="Chicago"></el-radio-button>\n </el-radio-group>\n </div>\n <div style="margin-top: 20px">\n <el-radio-group v-model="radio2" size="medium">\n <el-radio-button label="New York" ></el-radio-button>\n <el-radio-button label="Washington"></el-radio-button>\n <el-radio-button label="Los Angeles"></el-radio-button>\n <el-radio-button label="Chicago"></el-radio-button>\n </el-radio-group>\n </div>\n <div style="margin-top: 20px">\n <el-radio-group v-model="radio3" size="small">\n <el-radio-button label="New York"></el-radio-button>\n <el-radio-button label="Washington" disabled ></el-radio-button>\n <el-radio-button label="Los Angeles"></el-radio-button>\n <el-radio-button label="Chicago"></el-radio-button>\n </el-radio-group>\n </div>\n <div style="margin-top: 20px">\n <el-radio-group v-model="radio4" disabled size="mini">\n <el-radio-button label="New York"></el-radio-button>\n <el-radio-button label="Washington"></el-radio-button>\n <el-radio-button label="Los Angeles"></el-radio-button>\n <el-radio-button label="Chicago"></el-radio-button>\n </el-radio-group>\n </div>\n</template>\n\n<script>\n export default {\n data () {\n return {\n radio1: \'New York\',\n radio2: \'New York\',\n radio3: \'New York\',\n radio4: \'New York\'\n };\n }\n }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("border")]),e._v(" attribute adds a border to Radios.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <el-radio v-model="radio1" label="1" border>Option A</el-radio>\n <el-radio v-model="radio1" label="2" border>Option B</el-radio>\n </div>\n <div style="margin-top: 20px">\n <el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>\n <el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>\n </div>\n <div style="margin-top: 20px">\n <el-radio-group v-model="radio3" size="small">\n <el-radio label="1" border>Option A</el-radio>\n <el-radio label="2" border disabled>Option B</el-radio>\n </el-radio-group>\n </div>\n <div style="margin-top: 20px">\n <el-radio-group v-model="radio4" size="mini" disabled>\n <el-radio label="1" border>Option A</el-radio>\n <el-radio label="2" border>Option B</el-radio>\n </el-radio-group>\n </div>\n</template>\n\n<script>\n export default {\n data () {\n return {\n radio1: \'1\',\n radio2: \'1\',\n radio3: \'1\',\n radio4: \'1\'\n };\n }\n }\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("disabled")]),this._v(" attribute is used to disable the radio.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-button-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio button group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"button-style"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button style")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-borders"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-borders","aria-hidden":"true"}},[this._v("¶")]),this._v(" With borders")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("the value of Radio")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Radio is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("whether to add a border around Radio")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of the Radio, only works when "),n("code",[e._v("border")]),e._v(" is true")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("native 'name' attribute")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the bound value changes")]),n("td",[e._v("the label value of the chosen radio")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("the size of radio buttons or bordered radios")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the nesting radios are disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("font color when button is active")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("border and background color when button is active")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-group Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the bound value changes")]),n("td",[e._v("the label value of the chosen radio")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radio-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio-button Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("the value of radio")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether radio is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("native 'name' attribute")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=r.exports},503:function(e,t,n){"use strict";n.r(t);var a=n(31),i=n(32),l={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},r={boxShadowLight:"0 2px 12px 0 rgba(0, 0, 0, 0.1)",boxShadowBase:"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)",borderRadiusBase:"4px",borderRadiusSmall:"2px"},o={created:function(){a.a.$on(i.d,this.setGlobal)},mounted:function(){this.setGlobal()},methods:{setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},boxShadowLight:"",boxShadowBase:"",borderRadiusBase:"",borderRadiusSmall:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(l).forEach(function(e){t[e]?n[l[e]]=t[e]:n[l[e]]=r[l[e]]})}}}},s=n(0),d=Object(s.a)(o,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("We standardize the borders that can be used in buttons, cards, pop-ups and other components.")]),e._m(1),n("p",[e._v("There are few border styles to choose.")]),e._m(2),e._m(3),n("p",[e._v("There are few radius styles to choose.")]),n("el-row",{staticClass:"demo-radius",attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("No Radius")]),n("div",{staticClass:"value"},[e._v("border-radius: 0px")]),n("div",{staticClass:"radius"})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Small Radius")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusSmall))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusSmall}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Large Radius")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusBase))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusBase}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Round Radius")]),n("div",{staticClass:"value"},[e._v("border-radius: 30px")]),n("div",{staticClass:"radius radius-30"})])],1),e._m(4),n("p",[e._v("There are few shadow styles to choose.")]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),n("span",{staticClass:"demo-shadow-text"},[e._v("Basic Shadow box-shadow: "+e._s(e.boxShadowBase))]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowLight}}),n("span",{staticClass:"demo-shadow-text"},[e._v("Light Shadow box-shadow: "+e._s(e.boxShadowLight))])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"border"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"border-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",{staticClass:"demo-border"},[n("tbody",[n("tr",[n("td",{staticClass:"text"},[e._v("Name")]),n("td",{staticClass:"text"},[e._v("Thickness")]),n("td",{staticClass:"line"},[e._v("Demo")])]),n("tr",[n("td",{staticClass:"text"},[e._v("Solid")]),n("td",{staticClass:"text"},[e._v("1px")]),n("td",{staticClass:"line"},[n("div")])]),n("tr",[n("td",{staticClass:"text"},[e._v("Dashed")]),n("td",{staticClass:"text"},[e._v("2px")]),n("td",{staticClass:"line"},[n("div",{staticClass:"dashed"})])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radius"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radius","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radius")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shadow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])}],!1,null,null,null);t.default=d.exports},504:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{percentage:50}}),e._v(" "),n("el-progress",{attrs:{percentage:100,format:e.format}}),e._v(" "),n("el-progress",{attrs:{percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{percentage:100,status:"warning"}}),e._v(" "),n("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]},{methods:{format:function(e){return 100===e?"Full":e+"%"}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{"text-inside":!0,"stroke-width":26,percentage:70}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":24,percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":22,percentage:80,status:"warning"}}),e._v(" "),n("el-progress",{attrs:{"text-inside":!0,"stroke-width":20,percentage:50,status:"exception"}})],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{percentage:e.percentage,color:e.customColor}}),e._v(" "),n("el-progress",{attrs:{percentage:e.percentage,color:e.customColorMethod}}),e._v(" "),n("el-progress",{attrs:{percentage:e.percentage,color:e.customColors}}),e._v(" "),n("div",[n("el-button-group",[n("el-button",{attrs:{icon:"el-icon-minus"},on:{click:e.decrease}}),e._v(" "),n("el-button",{attrs:{icon:"el-icon-plus"},on:{click:e.increase}})],1)],1)],1)},staticRenderFns:[]},{data:function(){return{percentage:20,customColor:"#409eff",customColors:[{color:"#f56c6c",percentage:20},{color:"#e6a23c",percentage:40},{color:"#5cb87a",percentage:60},{color:"#1989fa",percentage:80},{color:"#6f7ad3",percentage:100}]}},methods:{customColorMethod:function(e){return e<30?"#909399":e<70?"#e6a23c":"#67c23a"},increase:function(){this.percentage+=10,100<this.percentage&&(this.percentage=100)},decrease:function(){this.percentage-=10,this.percentage<0&&(this.percentage=0)}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{type:"circle",percentage:0}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:25}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:70,status:"warning"}}),e._v(" "),n("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{type:"dashboard",percentage:e.percentage,color:e.colors}}),e._v(" "),n("div",[n("el-button-group",[n("el-button",{attrs:{icon:"el-icon-minus"},on:{click:e.decrease}}),e._v(" "),n("el-button",{attrs:{icon:"el-icon-plus"},on:{click:e.increase}})],1)],1)],1)},staticRenderFns:[]},{data:function(){return{percentage:10,colors:[{color:"#f56c6c",percentage:20},{color:"#e6a23c",percentage:40},{color:"#5cb87a",percentage:60},{color:"#1989fa",percentage:80},{color:"#6f7ad3",percentage:100}]}},methods:{increase:function(){this.percentage+=10,100<this.percentage&&(this.percentage=100)},decrease:function(){this.percentage-=10,this.percentage<0&&(this.percentage=0)}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Progress is used to show the progress of current operation, and inform the user the current status.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("percentage")]),e._v(" attribute to set the percentage. It's "),n("strong",[e._v("required")]),e._v(" and must be between "),n("code",[e._v("0-100")]),e._v(". You can custom text format by setting "),n("code",[e._v("format")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="50"></el-progress>\n<el-progress :percentage="100" :format="format"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="100" status="warning"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n\n<script>\n export default {\n methods: {\n format(percentage) {\n return percentage === 100 ? \'Full\' : `${percentage}%`;\n }\n }\n };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("In this case the percentage takes no additional space.")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("stroke-width")]),e._v(" attribute decides the "),n("code",[e._v("width")]),e._v(" of progress bar, and use "),n("code",[e._v("text-inside")]),e._v(" attribute to put description inside the progress bar.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>\n<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(3),e._m(4),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="percentage" :color="customColor"></el-progress>\n\n<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>\n\n<el-progress :percentage="percentage" :color="customColors"></el-progress>\n<div>\n <el-button-group>\n <el-button icon="el-icon-minus" @click="decrease"></el-button>\n <el-button icon="el-icon-plus" @click="increase"></el-button>\n </el-button-group>\n</div>\n\n<script>\n export default {\n data() {\n return {\n percentage: 20,\n customColor: \'#409eff\',\n customColors: [\n {color: \'#f56c6c\', percentage: 20},\n {color: \'#e6a23c\', percentage: 40},\n {color: \'#5cb87a\', percentage: 60},\n {color: \'#1989fa\', percentage: 80},\n {color: \'#6f7ad3\', percentage: 100}\n ]\n };\n },\n methods: {\n customColorMethod(percentage) {\n if (percentage < 30) {\n return \'#909399\';\n } else if (percentage < 70) {\n return \'#e6a23c\';\n } else {\n return \'#67c23a\';\n }\n },\n increase() {\n this.percentage += 10;\n if (this.percentage > 100) {\n this.percentage = 100;\n }\n },\n decrease() {\n this.percentage -= 10;\n if (this.percentage < 0) {\n this.percentage = 0;\n }\n }\n }\n }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("You can specify "),n("code",[e._v("type")]),e._v(" attribute to "),n("code",[e._v("circle")]),e._v(" to use circular progress bar, and use "),n("code",[e._v("width")]),e._v(" attribute to change the size of circle.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="70" status="warning"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>\n<div>\n <el-button-group>\n <el-button icon="el-icon-minus" @click="decrease"></el-button>\n <el-button icon="el-icon-plus" @click="increase"></el-button>\n </el-button-group>\n</div>\n\n<script>\n export default {\n data() {\n return {\n percentage: 10,\n colors: [\n {color: \'#f56c6c\', percentage: 20},\n {color: \'#e6a23c\', percentage: 40},\n {color: \'#5cb87a\', percentage: 60},\n {color: \'#1989fa\', percentage: 80},\n {color: \'#6f7ad3\', percentage: 100}\n ]\n };\n },\n methods: {\n increase() {\n this.percentage += 10;\n if (this.percentage > 100) {\n this.percentage = 100;\n }\n },\n decrease() {\n this.percentage -= 10;\n if (this.percentage < 0) {\n this.percentage = 0;\n }\n }\n }\n }\n<\/script>\n')])])])],2),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"progress"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progress")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"linear-progress-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Linear progress bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"internal-percentage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#internal-percentage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Internal percentage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom color")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can use "),n("code",[e._v("color")]),e._v(" attr to set the progress bar color. it accepts color string, function, or array.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"circular-progress-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#circular-progress-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Circular progress bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dashboard-progress-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dashboard-progress-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dashboard progress bar")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You also can specify "),n("code",[e._v("type")]),e._v(" attribute to "),n("code",[e._v("dashboard")]),e._v(" to use dashboard progress bar.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[n("strong",[e._v("percentage")])]),n("td",[e._v("percentage, "),n("strong",[e._v("required")])]),n("td",[e._v("number")]),n("td",[e._v("0-100")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("the type of progress bar")]),n("td",[e._v("string")]),n("td",[e._v("line/circle/dashboard")]),n("td",[e._v("line")])]),n("tr",[n("td",[e._v("stroke-width")]),n("td",[e._v("the width of progress bar")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("6")])]),n("tr",[n("td",[e._v("text-inside")]),n("td",[e._v("whether to place the percentage inside progress bar, only works when "),n("code",[e._v("type")]),e._v(" is 'line'")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("the current status of progress bar")]),n("td",[e._v("string")]),n("td",[e._v("success/exception/warning")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("background color of progress bar. Overrides "),n("code",[e._v("status")]),e._v(" prop")]),n("td",[e._v("string/function/array")]),n("td",[e._v("—")]),n("td",[e._v("''")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("the canvas width of circle progress bar")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("126")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("whether to show percentage")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])}],!1,null,null,null);t.default=r.exports},506:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-popover",{attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Hover to activate")])],1),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Click to activate")])],1),t._v(" "),n("el-popover",{ref:"popover",attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}}),t._v(" "),n("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[t._v("Focus to activate")]),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"manual",content:"this is content, this is content, this is content"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[n("el-button",{attrs:{slot:"reference"},on:{click:function(e){t.visible=!t.visible}},slot:"reference"},[t._v("Manual to activate")])],1)]],2)},staticRenderFns:[]},{data:function(){return{visible:!1}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[n("el-table",{attrs:{data:e.gridData}},[n("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),e._v(" "),n("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),e._v(" "),n("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1),e._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("Click to activate")])],1)],1)},staticRenderFns:[]},{data:function(){return{gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}]}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-popover",{attrs:{placement:"top",width:"160"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[n("p",[t._v("Are you sure to delete this?")]),t._v(" "),n("div",{staticStyle:{"text-align":"right",margin:"0"}},[n("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(e){t.visible=!1}}},[t._v("cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(e){t.visible=!1}}},[t._v("confirm")])],1),t._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Delete")])],1)],1)},staticRenderFns:[]},{data:function(){return{visible:!1}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("trigger")]),e._v(" attribute is used to define how popover is triggered: "),n("code",[e._v("hover")]),e._v(", "),n("code",[e._v("click")]),e._v(", "),n("code",[e._v("focus")]),e._v(" or "),n("code",[e._v("manual")]),e._v(". As for the triggering element, you can write it in two different ways: use the "),n("code",[e._v('slot="reference"')]),e._v(" named slot, or use the "),n("code",[e._v("v-popover")]),e._v(" directive and set it to Popover's "),n("code",[e._v("ref")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-popover\n placement="top-start"\n title="Title"\n width="200"\n trigger="hover"\n content="this is content, this is content, this is content">\n <el-button slot="reference">Hover to activate</el-button>\n </el-popover>\n\n <el-popover\n placement="bottom"\n title="Title"\n width="200"\n trigger="click"\n content="this is content, this is content, this is content">\n <el-button slot="reference">Click to activate</el-button>\n </el-popover>\n\n <el-popover\n ref="popover"\n placement="right"\n title="Title"\n width="200"\n trigger="focus"\n content="this is content, this is content, this is content">\n </el-popover>\n <el-button v-popover:popover>Focus to activate</el-button>\n\n <el-popover\n placement="bottom"\n title="Title"\n width="200"\n trigger="manual"\n content="this is content, this is content, this is content"\n v-model="visible">\n <el-button slot="reference" @click="visible = !visible">Manual to activate</el-button>\n </el-popover>\n</template>\n\n<script>\n export default {\n data() {\n return {\n visible: false\n };\n }\n };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Other components can be nested in popover. Following is an example of nested table.")]),n("demo-block",[n("div",[n("p",[e._v("replace the "),n("code",[e._v("content")]),e._v(" attribute with a default "),n("code",[e._v("slot")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n placement="right"\n width="400"\n trigger="click">\n <el-table :data="gridData">\n <el-table-column width="150" property="date" label="date"></el-table-column>\n <el-table-column width="100" property="name" label="name"></el-table-column>\n <el-table-column width="300" property="address" label="address"></el-table-column>\n </el-table>\n <el-button slot="reference">Click to activate</el-button>\n</el-popover>\n\n<script>\n export default {\n data() {\n return {\n gridData: [{\n date: \'2016-05-02\',\n name: \'Jack\',\n address: \'New York City\'\n }, {\n date: \'2016-05-04\',\n name: \'Jack\',\n address: \'New York City\'\n }, {\n date: \'2016-05-01\',\n name: \'Jack\',\n address: \'New York City\'\n }, {\n date: \'2016-05-03\',\n name: \'Jack\',\n address: \'New York City\'\n }]\n };\n }\n };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Of course, you can nest other operations. It's more light-weight than using a dialog.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n placement="top"\n width="160"\n v-model="visible">\n <p>Are you sure to delete this?</p>\n <div style="text-align: right; margin: 0">\n <el-button size="mini" type="text" @click="visible = false">cancel</el-button>\n <el-button type="primary" size="mini" @click="visible = false">confirm</el-button>\n </div>\n <el-button slot="reference">Delete</el-button>\n</el-popover>\n\n<script>\n export default {\n data() {\n return {\n visible: false,\n };\n }\n }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"popover"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Similar to Tooltip, Popover is also built with "),n("code",[e._v("Vue-popper")]),e._v(". So for some duplicated attributes, please refer to the documentation of Tooltip.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nested-information"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nested-information","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nested information")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nested-operation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nested-operation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nested operation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("how the popover is triggered")]),n("td",[e._v("string")]),n("td",[e._v("click/focus/hover/manual")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("popover title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("popover content, can be replaced with a default "),n("code",[e._v("slot")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("popover width")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("Min width 150px")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("popover placement")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Popover is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("whether popover is visible")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("popover offset")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("popover transition animation")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("whether a tooltip arrow is displayed or not. For more info, please refer to "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[e._v("parameters for "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),n("td",[e._v("object")]),n("td",[e._v("please refer to "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")])]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for popover")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("delay of appearance when "),n("code",[e._v("trigger")]),e._v(" is hover, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"}},[e._v("tabindex")]),e._v(" of Popover")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("text content of popover")])]),n("tr",[n("td",[e._v("reference")]),n("td",[e._v("HTML element that triggers popover")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("show")]),n("td",[e._v("triggers when popover shows")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-enter")]),n("td",[e._v("triggers when the entering transition ends")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide")]),n("td",[e._v("triggers when popover hides")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-leave")]),n("td",[e._v("triggers when the leaving transition ends")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=r.exports},509:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("When you have few pages")]),e._v(" "),n("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("When you have more than 7 pages")]),e._v(" "),n("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Total item count")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage1=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Change page size")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage2=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Jump to")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage3=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("All combined")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage4=e}}})],1)]],2)},staticRenderFns:[]},{methods:{handleSizeChange:function(e){console.log(e+" items per page")},handleCurrentChange:function(e){console.log("current page: "+e)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",[n("el-switch",{model:{value:t.value,callback:function(e){t.value=e},expression:"value"}}),t._v(" "),n("el-pagination",{attrs:{"hide-on-single-page":t.value,total:5,layout:"prev, pager, next"}})],1)])},staticRenderFns:[]},{data:function(){return{value:!1}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("If you have too much data to display in one page, use pagination.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("layout")]),e._v(" with different pagination elements you wish to display separated with a comma. Pagination elements are: "),n("code",[e._v("prev")]),e._v(" (a button navigating to the previous page), "),n("code",[e._v("next")]),e._v(" (a button navigating to the next page), "),n("code",[e._v("pager")]),e._v(" (page list), "),n("code",[e._v("jumper")]),e._v(" (a jump-to input), "),n("code",[e._v("total")]),e._v(" (total item count), "),n("code",[e._v("size")]),e._v(" (a select to determine page size) and "),n("code",[e._v("->")]),e._v("(every element after this symbol will be pulled to the right).")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n <span class="demonstration">When you have few pages</span>\n <el-pagination\n layout="prev, pager, next"\n :total="50">\n </el-pagination>\n</div>\n<div class="block">\n <span class="demonstration">When you have more than 7 pages</span>\n <el-pagination\n layout="prev, pager, next"\n :total="1000">\n </el-pagination>\n</div>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the "),n("code",[e._v("pager-count")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n :page-size="20"\n :pager-count="11"\n layout="prev, pager, next"\n :total="1000">\n</el-pagination>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("background")]),e._v(" attribute and the buttons will have a background color.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n background\n layout="prev, pager, next"\n :total="1000">\n</el-pagination>\n')])])])],2),e._m(4),n("p",[e._v("Use small pagination in the case of limited space.")]),n("demo-block",[n("div",[n("p",[e._v("Just set the "),n("code",[e._v("small")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" and the Pagination becomes smaller.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n small\n layout="prev, pager, next"\n :total="50">\n</el-pagination>\n')])])])],2),e._m(5),n("p",[e._v("Add more modules based on your scenario.")]),n("demo-block",[n("div",[n("p",[e._v("This example is a complete use case. It uses "),n("code",[e._v("size-change")]),e._v(" and "),n("code",[e._v("current-change")]),e._v(" event to handle page size changes and current page changes. "),n("code",[e._v("page-sizes")]),e._v(" accepts an array of integers, each of which represents a different page size in the "),n("code",[e._v("sizes")]),e._v(" select options, e.g. "),n("code",[e._v("[100, 200, 300, 400]")]),e._v(" indicates that the select will have four options: 100, 200, 300 or 400 items per page.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Total item count</span>\n <el-pagination\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n :current-page.sync="currentPage1"\n :page-size="100"\n layout="total, prev, pager, next"\n :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">Change page size</span>\n <el-pagination\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n :current-page.sync="currentPage2"\n :page-sizes="[100, 200, 300, 400]"\n :page-size="100"\n layout="sizes, prev, pager, next"\n :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">Jump to</span>\n <el-pagination\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n :current-page.sync="currentPage3"\n :page-size="100"\n layout="prev, pager, next, jumper"\n :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">All combined</span>\n <el-pagination\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n :current-page.sync="currentPage4"\n :page-sizes="[100, 200, 300, 400]"\n :page-size="100"\n layout="total, sizes, prev, pager, next, jumper"\n :total="400">\n </el-pagination>\n </div>\n</template>\n<script>\n export default {\n methods: {\n handleSizeChange(val) {\n console.log(`${val} items per page`);\n },\n handleCurrentChange(val) {\n console.log(`current page: ${val}`);\n }\n },\n data() {\n return {\n currentPage1: 5,\n currentPage2: 5,\n currentPage3: 5,\n currentPage4: 4\n };\n }\n }\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n <el-switch v-model="value">\n </el-switch>\n <el-pagination\n :hide-on-single-page="value"\n :total="5"\n layout="prev, pager, next">\n</el-pagination>\n</div>\n\n<script>\n export default {\n data() {\n return {\n value: false\n }\n }\n }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pagination")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"number-of-pagers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#number-of-pagers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Number of pagers")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"buttons-with-background-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#buttons-with-background-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Buttons with background color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"small-pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#small-pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Small Pagination")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"more-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#more-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" More elements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hide-pagination-when-there-is-only-one-page"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hide-pagination-when-there-is-only-one-page","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hide pagination when there is only one page")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("When there is only one page, hide the pagination by setting the "),n("code",[e._v("hide-on-single-page")]),e._v(" attribute.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("small")]),n("td",[e._v("whether to use small pagination")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("whether the buttons have a background color")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("page-size")]),n("td",[e._v("item count of each page, supports the .sync modifier")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("10")])]),n("tr",[n("td",[e._v("total")]),n("td",[e._v("total item count")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("page-count")]),n("td",[e._v("total page count. Set either "),n("code",[e._v("total")]),e._v(" or "),n("code",[e._v("page-count")]),e._v(" and pages will be displayed; if you need "),n("code",[e._v("page-sizes")]),e._v(", "),n("code",[e._v("total")]),e._v(" is required")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("pager-count")]),n("td",[e._v("number of pagers. Pagination collapses when the total page count exceeds this value")]),n("td",[e._v("number")]),n("td",[e._v("odd number between 5 and 21")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("current-page")]),n("td",[e._v("current page number, supports the .sync modifier")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("layout")]),n("td",[e._v("layout of Pagination, elements separated with a comma")]),n("td",[e._v("string")]),n("td",[n("code",[e._v("sizes")]),e._v(", "),n("code",[e._v("prev")]),e._v(", "),n("code",[e._v("pager")]),e._v(", "),n("code",[e._v("next")]),e._v(", "),n("code",[e._v("jumper")]),e._v(", "),n("code",[e._v("->")]),e._v(", "),n("code",[e._v("total")]),e._v(", "),n("code",[e._v("slot")])]),n("td",[e._v("'prev, pager, next, jumper, ->, total'")])]),n("tr",[n("td",[e._v("page-sizes")]),n("td",[e._v("options of item count per page")]),n("td",[e._v("number[]")]),n("td",[e._v("—")]),n("td",[e._v("[10, 20, 30, 40, 50, 100]")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for the page size Select's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prev-text")]),n("td",[e._v("text for the prev button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next-text")]),n("td",[e._v("text for the next button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Pagination is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hide-on-single-page")]),n("td",[e._v("whether to hide when there's only one page")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("size-change")]),n("td",[e._v("triggers when "),n("code",[e._v("page-size")]),e._v(" changes")]),n("td",[e._v("the new page size")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("triggers when "),n("code",[e._v("current-page")]),e._v(" changes")]),n("td",[e._v("the new current page")])]),n("tr",[n("td",[e._v("prev-click")]),n("td",[e._v("triggers when the prev button is clicked and current page changes")]),n("td",[e._v("the new current page")])]),n("tr",[n("td",[e._v("next-click")]),n("td",[e._v("triggers when the next button is clicked and current page changes")]),n("td",[e._v("the new current page")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("custom content. To use this, you need to declare "),n("code",[e._v("slot")]),e._v(" in "),n("code",[e._v("layout")])])])])])}],!1,null,null,null);t.default=r.exports},512:function(e,t,n){"use strict";n.r(t);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e})({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-page-header",{attrs:{content:"detail"},on:{back:this.goBack}})],1)},staticRenderFns:[]},{methods:{goBack:function(){console.log("go back")}}})}},i=n(0),l=Object(i.a)(a,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.")]),e._m(1),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-page-header @back="goBack" content="detail">\n</el-page-header>\n\n<script>\n export default {\n methods: {\n goBack() {\n console.log(\'go back\');\n }\n }\n }\n<\/script>\n')])])])],2),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"pageheader"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pageheader","aria-hidden":"true"}},[this._v("¶")]),this._v(" PageHeader")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("main title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Back")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("content")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("back")]),n("td",[e._v("triggers when right side is clicked")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("slot")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("title content")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("content")])])])])}],!1,null,null,null);t.default=l.exports},514:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{separator:"/"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("homepage")]),this._v(" "),t("el-breadcrumb-item",[t("a",{attrs:{href:"/"}},[this._v("promotion management")])]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion list")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion detail")])],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[t("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("homepage")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion management")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion list")]),this._v(" "),t("el-breadcrumb-item",[this._v("promotion detail")])],1)],1)},staticRenderFns:[]},{})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Displays the location of the current page, making it easier to browser back.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("In "),n("code",[e._v("el-breadcrumb")]),e._v(", each "),n("code",[e._v("el-breadcrumb-item")]),e._v(" is a tag that stands for every level starting from homepage. This component has a "),n("code",[e._v("String")]),e._v(" attribute "),n("code",[e._v("separator")]),e._v(", and it determines the separator. Its default value is '/'.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator="/">\n <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>\n <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("separator-class")]),e._v(" to use "),n("code",[e._v("iconfont")]),e._v(" as the separator，it will cover "),n("code",[e._v("separator")])])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator-class="el-icon-arrow-right">\n <el-breadcrumb-item :to="{ path: \'/\' }">homepage</el-breadcrumb-item>\n <el-breadcrumb-item>promotion management</el-breadcrumb-item>\n <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icon-separator"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon-separator","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon separator")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("separator")]),n("td",[e._v("separator character")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("/")])]),n("tr",[n("td",[e._v("separator-class")]),n("td",[e._v("class name of icon separator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"breadcrumb-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("to")]),n("td",[e._v("target route of the link, same as "),n("code",[e._v("to")]),e._v(" of "),n("code",[e._v("vue-router")])]),n("td",[e._v("string/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("replace")]),n("td",[e._v("if "),n("code",[e._v("true")]),e._v(", the navigation will not leave a history record")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);t.default=r.exports},515:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open1}},[this._v("\n Closes automatically\n ")]),this._v(" "),t("el-button",{attrs:{plain:""},on:{click:this.open2}},[this._v("\n Won't close automatically\n ")])]],2)},staticRenderFns:[]},{methods:{open1:function(){var e=this.$createElement;this.$notify({title:"Title",message:e("i",{style:"color: teal"},"This is a reminder")})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open1}},[e._v("\n Success\n ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n Warning\n ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n Info\n ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n Error\n ")])]],2)},staticRenderFns:[]},{methods:{open1:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open2:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open3:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open4:function(){this.$notify.error({title:"Error",message:"This is an error message"})}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open1}},[e._v("\n Top Right\n ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n Bottom Right\n ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n Bottom Left\n ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n Top Left\n ")])]],2)},staticRenderFns:[]},{methods:{open1:function(){this.$notify({title:"Custom Position",message:"I'm at the top right corner"})},open2:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom right corner",position:"bottom-right"})},open3:function(){this.$notify({title:"Custom Position",message:"I'm at the bottom left corner",position:"bottom-left"})},open4:function(){this.$notify({title:"Custom Position",message:"I'm at the top left corner",position:"top-left"})}}}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open}},[this._v("\n Notification with offset\n ")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})}}}),"element-demo4":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open}},[this._v("\n Use HTML String\n ")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}}),"element-demo5":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open}},[this._v("\n Hide close button\n ")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$notify.success({title:"Info",message:"This is a message without close button",showClose:!1})}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Displays a global notification message at a corner of the page.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Element has registered the "),n("code",[e._v("$notify")]),e._v(" method and it receives an object as its parameter. In the simplest case, you can set the "),n("code",[e._v("title")]),e._v(" field and the"),n("code",[e._v("message")]),e._v(" field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting "),n("code",[e._v("duration")]),e._v(" you can control its duration. Specifically, if set to "),n("code",[e._v("0")]),e._v(", it will not close automatically. Note that "),n("code",[e._v("duration")]),e._v(" receives a "),n("code",[e._v("Number")]),e._v(" in milliseconds.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button\n plain\n @click=\"open1\">\n Closes automatically\n </el-button>\n <el-button\n plain\n @click=\"open2\">\n Won't close automatically\n </el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open1() {\n const h = this.$createElement;\n\n this.$notify({\n title: 'Title',\n message: h('i', { style: 'color: teal' }, 'This is a reminder')\n });\n },\n\n open2() {\n this.$notify({\n title: 'Prompt',\n message: 'This is a message that does not automatically close',\n duration: 0\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("We provide four types: success, warning, info and error.")]),n("demo-block",[n("div",[n("p",[e._v("Element provides four notification types: "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("warning")]),e._v(", "),n("code",[e._v("info")]),e._v(" and "),n("code",[e._v("error")]),e._v(". They are set by the "),n("code",[e._v("type")]),e._v(" field, and other values will be ignored. We also registered methods for these types that can be invoked directly like "),n("code",[e._v("open3")]),e._v(" and "),n("code",[e._v("open4")]),e._v(" without passing a "),n("code",[e._v("type")]),e._v(" field.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button\n plain\n @click=\"open1\">\n Success\n </el-button>\n <el-button\n plain\n @click=\"open2\">\n Warning\n </el-button>\n <el-button\n plain\n @click=\"open3\">\n Info\n </el-button>\n <el-button\n plain\n @click=\"open4\">\n Error\n </el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open1() {\n this.$notify({\n title: 'Success',\n message: 'This is a success message',\n type: 'success'\n });\n },\n\n open2() {\n this.$notify({\n title: 'Warning',\n message: 'This is a warning message',\n type: 'warning'\n });\n },\n\n open3() {\n this.$notify.info({\n title: 'Info',\n message: 'This is an info message'\n });\n },\n\n open4() {\n this.$notify.error({\n title: 'Error',\n message: 'This is an error message'\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Notification can emerge from any corner you like.")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("position")]),e._v(" attribute defines which corner Notification slides in. It can be "),n("code",[e._v("top-right")]),e._v(", "),n("code",[e._v("top-left")]),e._v(", "),n("code",[e._v("bottom-right")]),e._v(" or "),n("code",[e._v("bottom-left")]),e._v(". Defaults to "),n("code",[e._v("top-right")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button\n plain\n @click=\"open1\">\n Top Right\n </el-button>\n <el-button\n plain\n @click=\"open2\">\n Bottom Right\n </el-button>\n <el-button\n plain\n @click=\"open3\">\n Bottom Left\n </el-button>\n <el-button\n plain\n @click=\"open4\">\n Top Left\n </el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open1() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the top right corner'\n });\n },\n\n open2() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the bottom right corner',\n position: 'bottom-right'\n });\n },\n\n open3() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the bottom left corner',\n position: 'bottom-left'\n });\n },\n\n open4() {\n this.$notify({\n title: 'Custom Position',\n message: 'I\\'m at the top left corner',\n position: 'top-left'\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Customize Notification's offset from the edge of the screen.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("offset")]),e._v(" attribute to customize Notification's offset from the edge of the screen. Note that every Notification instance of the same moment should have the same offset.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button\n plain\n @click=\"open\">\n Notification with offset\n </el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open() {\n this.$notify.success({\n title: 'Success',\n message: 'This is a success message',\n offset: 100\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(5),e._m(6),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" to true and "),n("code",[e._v("message")]),e._v(" will be treated as an HTML string.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button\n plain\n @click=\"open\">\n Use HTML String\n </el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open() {\n this.$notify({\n title: 'HTML String',\n dangerouslyUseHTMLString: true,\n message: '<strong>This is <i>HTML</i> string</strong>'\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(7),e._m(8),n("p",[e._v("It is possible to hide the close button")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("showClose")]),e._v(" attribute to "),n("code",[e._v("false")]),e._v(" so the notification cannot be closed by the user.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button\n plain\n @click=\"open\">\n Hide close button\n </el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open() {\n this.$notify.success({\n title: 'Info',\n message: 'This is a message without close button',\n showClose: false\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"notification"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-types","aria-hidden":"true"}},[this._v("¶")]),this._v(" With types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-position"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-position","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom position")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-offset"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-offset","aria-hidden":"true"}},[this._v("¶")]),this._v(" With offset")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"use-html-string"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[this._v("¶")]),this._v(" Use HTML string")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supports HTML string.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Although "),n("code",[e._v("message")]),e._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". So when "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" is on, please make sure the content of "),n("code",[e._v("message")]),e._v(" is trusted, and "),n("strong",[e._v("never")]),e._v(" assign "),n("code",[e._v("message")]),e._v(" to user-provided content.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hide-close-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hide-close-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hide close button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"global-method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Global method")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Element has added a global method "),t("code",[this._v("$notify")]),this._v(" for Vue.prototype. So in a vue instance you can call "),t("code",[this._v("Notification")]),this._v(" like what we did in this page.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"local-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[this._v("¶")]),this._v(" Local import")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Import "),t("code",[this._v("Notification")]),this._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Notification } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("In this case you should call "),t("code",[this._v("Notification(options)")]),this._v(". We have also registered methods for different types, e.g. "),t("code",[this._v("Notification.success(options)")]),this._v(". You can call "),t("code",[this._v("Notification.closeAll()")]),this._v(" to manually close all the instances.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("description text")]),n("td",[e._v("string/Vue.VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("whether "),n("code",[e._v("message")]),e._v(" is treated as HTML string")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("notification type")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("custom icon's class. It will be overridden by "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("custom class name for Notification")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("duration before close. It will not automatically close if set 0")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4500")])]),n("tr",[n("td",[e._v("position")]),n("td",[e._v("custom position")]),n("td",[e._v("string")]),n("td",[e._v("top-right/top-left/bottom-right/bottom-left")]),n("td",[e._v("top-right")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("whether to show a close button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("callback function when closed")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("callback function when notification clicked")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Notification")]),this._v(" and "),t("code",[this._v("this.$notify")]),this._v(" returns the current Notification instance. To manually close the instance, you can call "),t("code",[this._v("close")]),this._v(" on it.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Method")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("close the Notification")])])])])}],!1,null,null,null);t.default=r.exports},518:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.open}},[this._v("Show message")]),this._v(" "),t("el-button",{attrs:{plain:!0},on:{click:this.openVn}},[this._v("VNode")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$message("This is a message.")},openVn:function(){var e=this.$createElement;this.$message({message:e("p",null,[e("span",null,"Message can be "),e("i",{style:"color: teal"},"VNode")])})}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("success")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("warning")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open1}},[e._v("message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("error")])]],2)},staticRenderFns:[]},{methods:{open1:function(){this.$message("This is a message.")},open2:function(){this.$message({message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message.error("Oops, this is a error message.")}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open1}},[e._v("message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("success")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("warning")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("error")])]],2)},staticRenderFns:[]},{methods:{open1:function(){this.$message({showClose:!0,message:"This is a message."})},open2:function(){this.$message({showClose:!0,message:"Congrats, this is a success message.",type:"success"})},open3:function(){this.$message({showClose:!0,message:"Warning, this is a warning message.",type:"warning"})},open4:function(){this.$message({showClose:!0,message:"Oops, this is a error message.",type:"error"})}}}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openCenter}},[this._v("Centered text")])]],2)},staticRenderFns:[]},{methods:{openCenter:function(){this.$message({message:"Centered text",center:!0})}}}),"element-demo4":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openHTML}},[this._v("Use HTML String")])]],2)},staticRenderFns:[]},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>This is <i>HTML</i> string</strong>"})}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.")]),e._m(1),n("p",[e._v("Displays at the top, and disappears after 3 seconds.")]),n("demo-block",[n("div",[n("p",[e._v("The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a "),n("code",[e._v("$message")]),e._v(" method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button :plain=\"true\" @click=\"open\">Show message</el-button>\n <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open() {\n this.$message('This is a message.');\n },\n\n openVn() {\n const h = this.$createElement;\n this.$message({\n message: h('p', null, [\n h('span', null, 'Message can be '),\n h('i', { style: 'color: teal' }, 'VNode')\n ])\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Used to show the feedback of Success, Warning, Message and Error activities.")]),n("demo-block",[n("div",[n("p",[e._v("When you need more customizations, Message component can also take an object as parameter. For example, setting value of "),n("code",[e._v("type")]),e._v(" can define different types, and its default is "),n("code",[e._v("info")]),e._v(". In such cases the main body is passed in as the value of "),n("code",[e._v("message")]),e._v(". Also, we have registered methods for different types, so you can directly call it without passing a type like "),n("code",[e._v("open4")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-button :plain="true" @click="open2">success</el-button>\n <el-button :plain="true" @click="open3">warning</el-button>\n <el-button :plain="true" @click="open1">message</el-button>\n <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open1() {\n this.$message(\'This is a message.\');\n },\n open2() {\n this.$message({\n message: \'Congrats, this is a success message.\',\n type: \'success\'\n });\n },\n\n open3() {\n this.$message({\n message: \'Warning, this is a warning message.\',\n type: \'warning\'\n });\n },\n\n open4() {\n this.$message.error(\'Oops, this is a error message.\');\n }\n }\n }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("A close button can be added.")]),n("demo-block",[n("div",[n("p",[e._v("A default Message cannot be closed manually. If you need a closable message, you can set "),n("code",[e._v("showClose")]),e._v(" field. Besides, same as notification, message has a controllable "),n("code",[e._v("duration")]),e._v(". Default duration is 3000 ms, and it won't disappear when set to "),n("code",[e._v("0")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-button :plain="true" @click="open1">message</el-button>\n <el-button :plain="true" @click="open2">success</el-button>\n <el-button :plain="true" @click="open3">warning</el-button>\n <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open1() {\n this.$message({\n showClose: true,\n message: \'This is a message.\'\n });\n },\n\n open2() {\n this.$message({\n showClose: true,\n message: \'Congrats, this is a success message.\',\n type: \'success\'\n });\n },\n\n open3() {\n this.$message({\n showClose: true,\n message: \'Warning, this is a warning message.\',\n type: \'warning\'\n });\n },\n\n open4() {\n this.$message({\n showClose: true,\n message: \'Oops, this is a error message.\',\n type: \'error\'\n });\n }\n }\n }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-button :plain="true" @click="openCenter">Centered text</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n openCenter() {\n this.$message({\n message: \'Centered text\',\n center: true\n });\n }\n }\n }\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" to true and "),n("code",[e._v("message")]),e._v(" will be treated as an HTML string.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-button :plain="true" @click="openHTML">Use HTML String</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n openHTML() {\n this.$message({\n dangerouslyUseHTMLString: true,\n message: \'<strong>This is <i>HTML</i> string</strong>\'\n });\n }\n }\n }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"message"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"closable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Closable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-text","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered text")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use the "),t("code",[this._v("center")]),this._v(" attribute to center the text.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"use-html-string"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[this._v("¶")]),this._v(" Use HTML string")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supports HTML string.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Although "),n("code",[e._v("message")]),e._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". So when "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" is on, please make sure the content of "),n("code",[e._v("message")]),e._v(" is trusted, and "),n("strong",[e._v("never")]),e._v(" assign "),n("code",[e._v("message")]),e._v(" to user-provided content.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"global-method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Global method")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Element has added a global method "),t("code",[this._v("$message")]),this._v(" for Vue.prototype. So in a vue instance you can call "),t("code",[this._v("Message")]),this._v(" like what we did in this page.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"local-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[this._v("¶")]),this._v(" Local import")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Import "),t("code",[this._v("Message")]),this._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Message } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("In this case you should call "),t("code",[this._v("Message(options)")]),this._v(". We have also registered methods for different types, e.g. "),t("code",[this._v("Message.success(options)")]),this._v(". You can call "),t("code",[this._v("Message.closeAll()")]),this._v(" to manually close all the instances.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("message")]),n("td",[e._v("message text")]),n("td",[e._v("string / VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("message type")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("custom icon's class, overrides "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("whether "),n("code",[e._v("message")]),e._v(" is treated as HTML string")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("custom class name for Message")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("display duration, millisecond. If set to 0, it will not turn off automatically")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("whether to show a close button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("whether to center the text")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("callback function when closed with the message instance as the parameter")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("set the distance to the top of viewport")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("20")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Message")]),this._v(" and "),t("code",[this._v("this.$message")]),this._v(" returns the current Message instance. To manually close the instance, you can call "),t("code",[this._v("close")]),this._v(" on it.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Method")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("close the Message")])])])])}],!1,null,null,null);t.default=r.exports},520:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Click to open the Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var t=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(e){t.$message({type:"info",message:"action: "+e})}})}}}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Click to open the Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var e=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){e.$message({type:"success",message:"Delete completed"})}).catch(function(){e.$message({type:"info",message:"Delete canceled"})})}}}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var n=this;this.$prompt("Please input your e-mail","Tip",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(e){var t=e.value;n.$message({type:"success",message:"Your email is:"+t})}).catch(function(){n.$message({type:"info",message:"Input canceled"})})}}}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var t=this,e=this.$createElement;this.$msgbox({title:"Message",message:e("p",null,[e("span",null,"Message can be "),e("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Cancel",beforeClose:function(e,t,n){"confirm"===e?(t.confirmButtonLoading=!0,t.confirmButtonText="Loading...",setTimeout(function(){n(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):n()}}).then(function(e){t.$message({type:"info",message:"action: "+e})})}}}),"element-demo4":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$alert("<strong>This is <i>HTML</i> string</strong>","HTML String",{dangerouslyUseHTMLString:!0})}}}),"element-demo5":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var t=this;this.$confirm("You have unsaved changes, save and proceed?","Confirm",{distinguishCancelAndClose:!0,confirmButtonText:"Save",cancelButtonText:"Discard Changes"}).then(function(){t.$message({type:"info",message:"Changes saved. Proceeding to a new route."})}).catch(function(e){t.$message({type:"info",message:"cancel"===e?"Changes discarded. Proceeding to a new route.":"Stay in the current route"})})}}}),"element-demo6":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Click to open Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var e=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning",center:!0}).then(function(){e.$message({type:"success",message:"Delete completed"})}).catch(function(){e.$message({type:"info",message:"Delete canceled"})})}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.")]),e._m(1),e._m(2),n("p",[e._v("Alert interrupts user operation until the user confirms.")]),n("demo-block",[n("div",[n("p",[e._v("Open an alert by calling the "),n("code",[e._v("$alert")]),e._v(" method. It simulates the system's "),n("code",[e._v("alert")]),e._v(", and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters "),n("code",[e._v("message")]),e._v(" and "),n("code",[e._v("title")]),e._v(" are received. It is worth mentioning that when the box is closed, it returns a "),n("code",[e._v("Promise")]),e._v(" object for further processing. If you are not sure if your target browsers support "),n("code",[e._v("Promise")]),e._v(", you should import a third party polyfill or use callbacks instead like this example.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button type=\"text\" @click=\"open\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open() {\n this.$alert('This is a message', 'Title', {\n confirmButtonText: 'OK',\n callback: action => {\n this.$message({\n type: 'info',\n message: `action: ${ action }`\n });\n }\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Confirm is used to ask users' confirmation.")]),n("demo-block",[n("div",[n("p",[e._v("Call "),n("code",[e._v("$confirm")]),e._v(" method to open a confirm, and it simulates the system's "),n("code",[e._v("confirm")]),e._v(". We can also highly customize Message Box by passing a third attribute "),n("code",[e._v("options")]),e._v(" which is a literal object. The attribute "),n("code",[e._v("type")]),e._v(" indicates the message type, and it's value can be "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("error")]),e._v(", "),n("code",[e._v("info")]),e._v(" and "),n("code",[e._v("warning")]),e._v(". Note that the second attribute "),n("code",[e._v("title")]),e._v(" must be a "),n("code",[e._v("string")]),e._v(", and if it is an "),n("code",[e._v("object")]),e._v(", it will be handled as the attribute "),n("code",[e._v("options")]),e._v(". Here we use "),n("code",[e._v("Promise")]),e._v(" to handle further processing.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button type=\"text\" @click=\"open\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open() {\n this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n type: 'warning'\n }).then(() => {\n this.$message({\n type: 'success',\n message: 'Delete completed'\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Delete canceled'\n }); \n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Prompt is used when user input is required.")]),n("demo-block",[n("div",[n("p",[e._v("Call "),n("code",[e._v("$prompt")]),e._v(" method to open a prompt, and it simulates the system's "),n("code",[e._v("prompt")]),e._v(". You can use "),n("code",[e._v("inputPattern")]),e._v(" parameter to specify your own RegExp pattern. Use "),n("code",[e._v("inputValidator")]),e._v(" to specify validation method, and it should return "),n("code",[e._v("Boolean")]),e._v(" or "),n("code",[e._v("String")]),e._v(". Returning "),n("code",[e._v("false")]),e._v(" or "),n("code",[e._v("String")]),e._v(" means the validation has failed, and the string returned will be used as the "),n("code",[e._v("inputErrorMessage")]),e._v(". In addition, you can customize the placeholder of the input box with "),n("code",[e._v("inputPlaceholder")]),e._v(" parameter.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button type=\"text\" @click=\"open\">Click to open Message Box</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open() {\n this.$prompt('Please input your e-mail', 'Tip', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n inputErrorMessage: 'Invalid Email'\n }).then(({ value }) => {\n this.$message({\n type: 'success',\n message: 'Your email is:' + value\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Input canceled'\n }); \n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Can be customized to show various content.")]),n("demo-block",[n("div",[n("p",[e._v("The three methods mentioned above are repackagings of the "),n("code",[e._v("$msgbox")]),e._v(" method. This example calls "),n("code",[e._v("$msgbox")]),e._v(" method directly using the "),n("code",[e._v("showCancelButton")]),e._v(" attribute, which is used to indicate if a cancel button is displayed. Besides we can use "),n("code",[e._v("cancelButtonClass")]),e._v(" to add a custom style and "),n("code",[e._v("cancelButtonText")]),e._v(" to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the "),n("code",[e._v("beforeClose")]),e._v(" attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: "),n("code",[e._v("action")]),e._v(", "),n("code",[e._v("instance")]),e._v(" and "),n("code",[e._v("done")]),e._v(". Using it enables you to manipulate the instance before it closes, e.g. activating "),n("code",[e._v("loading")]),e._v(" for confirm button; you can invoke the "),n("code",[e._v("done")]),e._v(" method to close the MessageBox instance (if "),n("code",[e._v("done")]),e._v(" is not called inside "),n("code",[e._v("beforeClose")]),e._v(", the instance will not be closed).")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button type=\"text\" @click=\"open\">Click to open Message Box</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open() {\n const h = this.$createElement;\n this.$msgbox({\n title: 'Message',\n message: h('p', null, [\n h('span', null, 'Message can be '),\n h('i', { style: 'color: teal' }, 'VNode')\n ]),\n showCancelButton: true,\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n beforeClose: (action, instance, done) => {\n if (action === 'confirm') {\n instance.confirmButtonLoading = true;\n instance.confirmButtonText = 'Loading...';\n setTimeout(() => {\n done();\n setTimeout(() => {\n instance.confirmButtonLoading = false;\n }, 300);\n }, 3000);\n } else {\n done();\n }\n }\n }).then(action => {\n this.$message({\n type: 'info',\n message: 'action: ' + action\n });\n });\n },\n }\n }\n<\/script>\n")])])])],2),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" to true and "),n("code",[e._v("message")]),e._v(" will be treated as an HTML string.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button type=\"text\" @click=\"open\">Click to open Message Box</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open() {\n this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {\n dangerouslyUseHTMLString: true\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(9),e._m(10),n("p",[e._v("In some cases, clicking the cancel button and close button may have different meanings.")]),n("demo-block",[n("div",[n("p",[e._v("By default, the parameters of Promise's reject callback and "),n("code",[e._v("callback")]),e._v(" are 'cancel' when the user cancels (clicking the cancel button) and closes (clicking the close button or mask layer, pressing the ESC key) the MessageBox. If "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" is set to true, the parameters of the above two operations are 'cancel' and 'close' respectively.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button type=\"text\" @click=\"open\">Click to open Message Box</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open() {\n this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {\n distinguishCancelAndClose: true,\n confirmButtonText: 'Save',\n cancelButtonText: 'Discard Changes'\n })\n .then(() => {\n this.$message({\n type: 'info',\n message: 'Changes saved. Proceeding to a new route.'\n });\n })\n .catch(action => {\n this.$message({\n type: 'info',\n message: action === 'cancel'\n ? 'Changes discarded. Proceeding to a new route.'\n : 'Stay in the current route'\n })\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(11),n("p",[e._v("Content of MessageBox can be centered.")]),n("demo-block",[n("div",[n("p",[e._v("Setting "),n("code",[e._v("center")]),e._v(" to "),n("code",[e._v("true")]),e._v(" will center the content")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-button type=\"text\" @click=\"open\">Click to open Message Box</el-button>\n</template>\n\n<script>\n export default {\n methods: {\n open() {\n this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n confirmButtonText: 'OK',\n cancelButtonText: 'Cancel',\n type: 'warning',\n center: true\n }).then(() => {\n this.$message({\n type: 'success',\n message: 'Delete completed'\n });\n }).catch(() => {\n this.$message({\n type: 'info',\n message: 'Delete canceled'\n });\n });\n }\n }\n }\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"messagebox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("By design MessageBox provides simulations of system's "),t("code",[this._v("alert")]),this._v(", "),t("code",[this._v("confirm")]),this._v(" and "),t("code",[this._v("prompt")]),this._v("，so it's content should be simple. For more complicated contents, please use Dialog.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"confirm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[this._v("¶")]),this._v(" Confirm")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prompt"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prompt")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customization"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customization")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("The content of MessageBox can be "),n("code",[e._v("VNode")]),e._v(", allowing us to pass custom components. When opening the MessageBox, Vue compares new "),n("code",[e._v("VNode")]),e._v(" with old "),n("code",[e._v("VNode")]),e._v(", then figures out how to efficiently update the UI, so the components may not be completely re-rendered ("),n("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[e._v("#8931")]),e._v("). In this case, you can add a unique key to "),n("code",[e._v("VNode")]),e._v(" each time MessageBox opens: "),n("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef"}},[e._v("example")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"use-html-string"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#use-html-string","aria-hidden":"true"}},[this._v("¶")]),this._v(" Use HTML String")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supports HTML string.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Although "),n("code",[e._v("message")]),e._v(" property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS attacks")]),e._v(". So when "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" is on, please make sure the content of "),n("code",[e._v("message")]),e._v(" is trusted, and "),n("strong",[e._v("never")]),e._v(" assign "),n("code",[e._v("message")]),e._v(" to user-provided content.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"distinguishing-cancel-and-close"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#distinguishing-cancel-and-close","aria-hidden":"true"}},[this._v("¶")]),this._v(" Distinguishing cancel and close")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"global-method"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[this._v("¶")]),this._v(" Global method")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("If Element is fully imported, it will add the following global methods for Vue.prototype: "),n("code",[e._v("$msgbox")]),e._v(", "),n("code",[e._v("$alert")]),e._v(", "),n("code",[e._v("$confirm")]),e._v(" and "),n("code",[e._v("$prompt")]),e._v(". So in a Vue instance you can call "),n("code",[e._v("MessageBox")]),e._v(" like what we did in this page. The parameters are:")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("$msgbox(options)")])]),n("li",[n("code",[e._v("$alert(message, title, options)")]),e._v(" or "),n("code",[e._v("$alert(message, options)")])]),n("li",[n("code",[e._v("$confirm(message, title, options)")]),e._v(" or "),n("code",[e._v("$confirm(message, options)")])]),n("li",[n("code",[e._v("$prompt(message, title, options)")]),e._v(" or "),n("code",[e._v("$prompt(message, options)")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"local-import"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[this._v("¶")]),this._v(" Local import")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("If you prefer importing "),t("code",[this._v("MessageBox")]),this._v(" on demand:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { MessageBox } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("The corresponding methods are: "),n("code",[e._v("MessageBox")]),e._v(", "),n("code",[e._v("MessageBox.alert")]),e._v(", "),n("code",[e._v("MessageBox.confirm")]),e._v(" and "),n("code",[e._v("MessageBox.prompt")]),e._v(". The parameters are the same as above.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("title of the MessageBox")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("content of the MessageBox")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("whether "),n("code",[e._v("message")]),e._v(" is treated as HTML string")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("message type, used for icon display")]),n("td",[e._v("string")]),n("td",[e._v("success / info / warning / error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("custom icon's class, overrides "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("custom class name for MessageBox")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("callback")]),n("td",[e._v("MessageBox closing callback if you don't prefer Promise")]),n("td",[e._v("function(action), where action can be 'confirm', 'cancel' or 'close', and "),n("code",[e._v("instance")]),e._v(" is the MessageBox instance. You can access to that instance's attributes and methods")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("whether to show close icon of MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("beforeClose")]),n("td",[e._v("callback before MessageBox closes, and it will prevent MessageBox from closing")]),n("td",[e._v("function(action, instance, done), where "),n("code",[e._v("action")]),e._v(" can be 'confirm', 'cancel' or 'close'; "),n("code",[e._v("instance")]),e._v(" is the MessageBox instance, and you can access to that instance's attributes and methods; "),n("code",[e._v("done")]),e._v(" is for closing the instance")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("distinguishCancelAndClose")]),n("td",[e._v("whether to distinguish canceling and closing the MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lockScroll")]),n("td",[e._v("whether to lock body scroll when MessageBox prompts")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showCancelButton")]),n("td",[e._v("whether to show a cancel button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false (true when called with confirm and prompt)")])]),n("tr",[n("td",[e._v("showConfirmButton")]),n("td",[e._v("whether to show a confirm button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("cancelButtonText")]),n("td",[e._v("text content of cancel button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Cancel")])]),n("tr",[n("td",[e._v("confirmButtonText")]),n("td",[e._v("text content of confirm button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("OK")])]),n("tr",[n("td",[e._v("cancelButtonClass")]),n("td",[e._v("custom class name of cancel button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("confirmButtonClass")]),n("td",[e._v("custom class name of confirm button")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closeOnClickModal")]),n("td",[e._v("whether MessageBox can be closed by clicking the mask")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true (false when called with alert)")])]),n("tr",[n("td",[e._v("closeOnPressEscape")]),n("td",[e._v("whether MessageBox can be closed by pressing the ESC")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true (false when called with alert)")])]),n("tr",[n("td",[e._v("closeOnHashChange")]),n("td",[e._v("whether to close MessageBox when hash changes")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showInput")]),n("td",[e._v("whether to show an input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false (true when called with prompt)")])]),n("tr",[n("td",[e._v("inputPlaceholder")]),n("td",[e._v("placeholder of input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputType")]),n("td",[e._v("type of input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("inputValue")]),n("td",[e._v("initial value of input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputPattern")]),n("td",[e._v("regexp for the input")]),n("td",[e._v("regexp")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputValidator")]),n("td",[e._v("validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputErrorMessage")]),n("td",[e._v("error message when validation fails")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Illegal input")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("whether to align the content in center")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("roundButton")]),n("td",[e._v("whether to use round button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);t.default=r.exports},523:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex,mode:"horizontal"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("Processing Center")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("Workspace")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("item two")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("item three")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("item four")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item two")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item three")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Orders")])])],1),e._v(" "),n("div",{staticClass:"line"}),e._v(" "),n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("Processing Center")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("Workspace")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("item two")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("item three")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("item four")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item two")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item three")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Orders")])])],1)],1)},staticRenderFns:[]},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(e,t){console.log(e,t)}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"tac"},[n("el-col",{attrs:{span:12}},[n("h5",[e._v("Default colors")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("Navigator One")])]),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group One"}},[n("el-menu-item",{attrs:{index:"1-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("item one")])],1),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Two"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("item three")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("item four")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",[e._v("Navigator Two")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",[e._v("Navigator Three")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",[e._v("Navigator Four")])])],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("h5",[e._v("Custom colors")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("Navigator One")])]),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group One"}},[n("el-menu-item",{attrs:{index:"1-1"}},[e._v("item one")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("item one")])],1),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Two"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("item three")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("item four")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item one")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",[e._v("Navigator Two")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",[e._v("Navigator Three")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",[e._v("Navigator Four")])])],1)],1)],1)],1)},staticRenderFns:[]},{methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:t.isCollapse,callback:function(e){t.isCollapse=e},expression:"isCollapse"}},[n("el-radio-button",{attrs:{label:!1}},[t._v("expand")]),t._v(" "),n("el-radio-button",{attrs:{label:!0}},[t._v("collapse")])],1),t._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:t.isCollapse},on:{open:t.handleOpen,close:t.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator One")])]),t._v(" "),n("el-menu-item-group",[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Group One")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[t._v("item one")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[t._v("item two")])],1),t._v(" "),n("el-menu-item-group",{attrs:{title:"Group Two"}},[n("el-menu-item",{attrs:{index:"1-3"}},[t._v("item three")])],1),t._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("item four")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("item one")])],1)],2),t._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Two")])]),t._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Three")])]),t._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigator Four")])])],1)],1)},staticRenderFns:[]},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Menu that provides navigation for your website.")]),e._m(1),n("p",[e._v("Top bar NavMenu can be used in a variety of scenarios.")]),n("demo-block",[n("div",[n("p",[e._v("By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" and "),n("code",[e._v("active-text-color")]),e._v(" to customize the colors.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n <el-menu-item index="1">Processing Center</el-menu-item>\n <el-submenu index="2">\n <template slot="title">Workspace</template>\n <el-menu-item index="2-1">item one</el-menu-item>\n <el-menu-item index="2-2">item two</el-menu-item>\n <el-menu-item index="2-3">item three</el-menu-item>\n <el-submenu index="2-4">\n <template slot="title">item four</template>\n <el-menu-item index="2-4-1">item one</el-menu-item>\n <el-menu-item index="2-4-2">item two</el-menu-item>\n <el-menu-item index="2-4-3">item three</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="3" disabled>Info</el-menu-item>\n <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu\n :default-active="activeIndex2"\n class="el-menu-demo"\n mode="horizontal"\n @select="handleSelect"\n background-color="#545c64"\n text-color="#fff"\n active-text-color="#ffd04b">\n <el-menu-item index="1">Processing Center</el-menu-item>\n <el-submenu index="2">\n <template slot="title">Workspace</template>\n <el-menu-item index="2-1">item one</el-menu-item>\n <el-menu-item index="2-2">item two</el-menu-item>\n <el-menu-item index="2-3">item three</el-menu-item>\n <el-submenu index="2-4">\n <template slot="title">item four</template>\n <el-menu-item index="2-4-1">item one</el-menu-item>\n <el-menu-item index="2-4-2">item two</el-menu-item>\n <el-menu-item index="2-4-3">item three</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="3" disabled>Info</el-menu-item>\n <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>\n</el-menu>\n\n<script>\n export default {\n data() {\n return {\n activeIndex: \'1\',\n activeIndex2: \'1\'\n };\n },\n methods: {\n handleSelect(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vertical NavMenu with sub-menus.")]),n("demo-block",[n("div",[n("p",[e._v("You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="tac">\n <el-col :span="12">\n <h5>Default colors</h5>\n <el-menu\n default-active="2"\n class="el-menu-vertical-demo"\n @open="handleOpen"\n @close="handleClose">\n <el-submenu index="1">\n <template slot="title">\n <i class="el-icon-location"></i>\n <span>Navigator One</span>\n </template>\n <el-menu-item-group title="Group One">\n <el-menu-item index="1-1">item one</el-menu-item>\n <el-menu-item index="1-2">item one</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group Two">\n <el-menu-item index="1-3">item three</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <template slot="title">item four</template>\n <el-menu-item index="1-4-1">item one</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="2">\n <i class="el-icon-menu"></i>\n <span>Navigator Two</span>\n </el-menu-item>\n <el-menu-item index="3" disabled>\n <i class="el-icon-document"></i>\n <span>Navigator Three</span>\n </el-menu-item>\n <el-menu-item index="4">\n <i class="el-icon-setting"></i>\n <span>Navigator Four</span>\n </el-menu-item>\n </el-menu>\n </el-col>\n <el-col :span="12">\n <h5>Custom colors</h5>\n <el-menu\n default-active="2"\n class="el-menu-vertical-demo"\n @open="handleOpen"\n @close="handleClose"\n background-color="#545c64"\n text-color="#fff"\n active-text-color="#ffd04b">\n <el-submenu index="1">\n <template slot="title">\n <i class="el-icon-location"></i>\n <span>Navigator One</span>\n </template>\n <el-menu-item-group title="Group One">\n <el-menu-item index="1-1">item one</el-menu-item>\n <el-menu-item index="1-2">item one</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group Two">\n <el-menu-item index="1-3">item three</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <template slot="title">item four</template>\n <el-menu-item index="1-4-1">item one</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="2">\n <i class="el-icon-menu"></i>\n <span>Navigator Two</span>\n </el-menu-item>\n <el-menu-item index="3" disabled>\n <i class="el-icon-document"></i>\n <span>Navigator Three</span>\n </el-menu-item>\n <el-menu-item index="4">\n <i class="el-icon-setting"></i>\n <span>Navigator Four</span>\n </el-menu-item>\n </el-menu>\n </el-col>\n</el-row>\n\n<script>\n export default {\n methods: {\n handleOpen(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vertical NavMenu could be collapsed.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n <el-radio-button :label="false">expand</el-radio-button>\n <el-radio-button :label="true">collapse</el-radio-button>\n</el-radio-group>\n<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n <el-submenu index="1">\n <template slot="title">\n <i class="el-icon-location"></i>\n <span slot="title">Navigator One</span>\n </template>\n <el-menu-item-group>\n <span slot="title">Group One</span>\n <el-menu-item index="1-1">item one</el-menu-item>\n <el-menu-item index="1-2">item two</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group Two">\n <el-menu-item index="1-3">item three</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <span slot="title">item four</span>\n <el-menu-item index="1-4-1">item one</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-menu-item index="2">\n <i class="el-icon-menu"></i>\n <span slot="title">Navigator Two</span>\n </el-menu-item>\n <el-menu-item index="3" disabled>\n <i class="el-icon-document"></i>\n <span slot="title">Navigator Three</span>\n </el-menu-item>\n <el-menu-item index="4">\n <i class="el-icon-setting"></i>\n <span slot="title">Navigator Four</span>\n </el-menu-item>\n</el-menu>\n\n<style>\n .el-menu-vertical-demo:not(.el-menu--collapse) {\n width: 200px;\n min-height: 400px;\n }\n</style>\n\n<script>\n export default {\n data() {\n return {\n isCollapse: true\n };\n },\n methods: {\n handleOpen(key, keyPath) {\n console.log(key, keyPath);\n },\n handleClose(key, keyPath) {\n console.log(key, keyPath);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"navmenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"top-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Top bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"side-bar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Side bar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("mode")]),n("td",[e._v("menu display mode")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical")])]),n("tr",[n("td",[e._v("collapse")]),n("td",[e._v("whether the menu is collapsed (available only in vertical mode)")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background-color")]),n("td",[e._v("background color of Menu (hex format)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("text color of Menu (hex format)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#303133")])]),n("tr",[n("td",[e._v("active-text-color")]),n("td",[e._v("text color of currently active menu item (hex format)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("default-active")]),n("td",[e._v("index of currently active menu")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-openeds")]),n("td",[e._v("array that contains indexes of currently active sub-menus")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unique-opened")]),n("td",[e._v("whether only one sub-menu can be active")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("menu-trigger")]),n("td",[e._v("how sub-menus are triggered, only works when "),n("code",[e._v("mode")]),e._v(" is 'horizontal'")]),n("td",[e._v("string")]),n("td",[e._v("hover / click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("router")]),n("td",[e._v("whether "),n("code",[e._v("vue-router")]),e._v(" mode is activated. If true, index will be used as 'path' to activate the route action")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-transition")]),n("td",[e._v("whether to enable the collapse transition")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Methods Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("open a specific sub-menu")]),n("td",[e._v("index: index of the sub-menu to open")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("close a specific sub-menu")]),n("td",[e._v("index: index of the sub-menu to close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("callback function when menu is activated")]),n("td",[e._v("index: index of activated menu, indexPath: index path of activated menu")])]),n("tr",[n("td",[e._v("open")]),n("td",[e._v("callback function when sub-menu expands")]),n("td",[e._v("index: index of expanded sub-menu, indexPath: index path of expanded sub-menu")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("callback function when sub-menu collapses")]),n("td",[e._v("index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-item-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Item Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("click")]),t("td",[this._v("callback function when menu-item is clicked")]),t("td",[this._v("el: menu-item instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"submenu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" SubMenu Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("unique identification")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for the popup menu")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("timeout before showing a sub-menu")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("timeout before hiding a sub-menu")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the sub-menu is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("level one Submenu: true / other Submenus: false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-item-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Item Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("unique identification")]),n("td",[e._v("string/null")]),n("td",[e._v("—")]),n("td",[e._v("null")])]),n("tr",[n("td",[e._v("route")]),n("td",[e._v("Vue Router object")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-group-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu-Group Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("group title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=r.exports},525:function(e,t,n){"use strict";n.r(t);var a,i,l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r={name:"component-doc",components:{"element-demo0":l({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:this.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"}],loading:!0}}}),"element-demo1":l({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:this.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"}],loading:!0}}}),"element-demo2":(i={data:function(){return{fullscreenLoading:!1}},methods:(a={openFullScreen:function(){var e=this;this.fullscreenLoading=!0,setTimeout(function(){e.fullscreenLoading=!1},2e3)}},a.openFullScreen=function(){var e=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){e.close()},2e3)},a)},l({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:this.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:this.openFullScreen}},[this._v("\n As a directive\n ")]),this._v(" "),t("el-button",{attrs:{type:"primary"},on:{click:this.openFullScreen}},[this._v("\n As a service\n ")])]],2)},staticRenderFns:[]},i))}},o=n(0),s=Object(o.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Show animation while loading data.")]),e._m(1),n("p",[e._v("Displays animation in a container (such as a table) while loading data.")]),n("demo-block",[n("div",[n("p",[e._v("Element provides two ways to invoke Loading: directive and service. For the custom directive "),n("code",[e._v("v-loading")]),e._v(", you just need to bind a "),n("code",[e._v("boolean")]),e._v(" value to it. By default, the loading mask will append to the element where the directive is used. Adding the "),n("code",[e._v("body")]),e._v(" modifier makes the mask append to the body element.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-table\n v-loading="loading"\n :data="tableData"\n style="width: 100%">\n <el-table-column\n prop="date"\n label="Date"\n width="180">\n </el-table-column>\n <el-table-column\n prop="name"\n label="Name"\n width="180">\n </el-table-column>\n <el-table-column\n prop="address"\n label="Address">\n </el-table-column>\n </el-table>\n</template>\n\n<style>\n body {\n margin: 0;\n }\n</style>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: \'2016-05-02\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }, {\n date: \'2016-05-04\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }, {\n date: \'2016-05-01\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }],\n loading: true\n };\n }\n };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("You can customize loading text, loading spinner and background color.")]),n("demo-block",[n("div",[n("p",[e._v("Add attribute "),n("code",[e._v("element-loading-text")]),e._v(" to the element on which "),n("code",[e._v("v-loading")]),e._v(" is bound, and its value will be displayed under the spinner. Similarly, "),n("code",[e._v("element-loading-spinner")]),e._v(" and "),n("code",[e._v("element-loading-background")]),e._v(" are for customizing loading spinner class name and background color.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-table\n v-loading="loading"\n element-loading-text="Loading..."\n element-loading-spinner="el-icon-loading"\n element-loading-background="rgba(0, 0, 0, 0.8)"\n :data="tableData"\n style="width: 100%">\n <el-table-column\n prop="date"\n label="Date"\n width="180">\n </el-table-column>\n <el-table-column\n prop="name"\n label="Name"\n width="180">\n </el-table-column>\n <el-table-column\n prop="address"\n label="Address">\n </el-table-column>\n </el-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [{\n date: \'2016-05-02\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }, {\n date: \'2016-05-04\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }, {\n date: \'2016-05-01\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }],\n loading: true\n };\n }\n };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Show a full screen animation while loading data.")]),n("demo-block",[n("div",[n("p",[e._v("When used as a directive, a full screen Loading requires the "),n("code",[e._v("fullscreen")]),e._v(" modifier, and it will be appended to body. In this case, if you wish to disable scrolling on body, you can add another modifier "),n("code",[e._v("lock")]),e._v(". When used as a service, Loading will be full screen by default.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-button\n type="primary"\n @click="openFullScreen"\n v-loading.fullscreen.lock="fullscreenLoading">\n As a directive\n </el-button>\n <el-button\n type="primary"\n @click="openFullScreen">\n As a service\n </el-button>\n</template>\n\n<script>\n export default {\n data() {\n return {\n fullscreenLoading: false\n }\n },\n methods: {\n openFullScreen() {\n this.fullscreenLoading = true;\n setTimeout(() => {\n this.fullscreenLoading = false;\n }, 2000);\n },\n openFullScreen() {\n const loading = this.$loading({\n lock: true,\n text: \'Loading\',\n spinner: \'el-icon-loading\',\n background: \'rgba(0, 0, 0, 0.7)\'\n });\n setTimeout(() => {\n loading.close();\n }, 2000);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("You can also invoke Loading with a service. Import Loading service:")]),e._m(5),n("p",[e._v("Invoke it:")]),e._m(6),e._m(7),e._m(8),n("p",[e._v("Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"loading-inside-a-container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-inside-a-container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading inside a container")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customization"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customization")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"full-screen-loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#full-screen-loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Full screen loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"service"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[this._v("¶")]),this._v(" Service")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Loading } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("Loading.service(options);\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("The parameter "),t("code",[this._v("options")]),this._v(" is the configuration of Loading, and its details can be found in the following table. "),t("code",[this._v("LoadingService")]),this._v(" returns a Loading instance, and you can close it by invoking its "),t("code",[this._v("close")]),this._v(" method:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance = Loading.service(options);\nthis.$nextTick(() => { // Loading should be closed asynchronously\n loadingInstance.close();\n});\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Calling the "),t("code",[this._v("close")]),this._v(" method on any one of them can close this full screen Loading.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("If Element is imported entirely, a globally method "),t("code",[this._v("$loading")]),this._v(" will be registered to Vue.prototype. You can invoke it like this: "),t("code",[this._v("this.$loading(options)")]),this._v(", and it also returns a Loading instance.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("target")]),n("td",[e._v("the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to "),n("code",[e._v("document.querySelector")]),e._v(" to get the corresponding DOM node")]),n("td",[e._v("object/string")]),n("td",[e._v("—")]),n("td",[e._v("document.body")])]),n("tr",[n("td",[e._v("body")]),n("td",[e._v("same as the "),n("code",[e._v("body")]),e._v(" modifier of "),n("code",[e._v("v-loading")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("same as the "),n("code",[e._v("fullscreen")]),e._v(" modifier of "),n("code",[e._v("v-loading")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("lock")]),n("td",[e._v("same as the "),n("code",[e._v("lock")]),e._v(" modifier of "),n("code",[e._v("v-loading")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text")]),n("td",[e._v("loading text that displays under the spinner")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("spinner")]),n("td",[e._v("class name of the custom spinner")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("background color of the mask")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("custom class name for Loading")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=s.exports},528:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",[n("el-link",{attrs:{href:"https://element.eleme.io",target:"_blank"}},[e._v("default")]),e._v(" "),n("el-link",{attrs:{type:"primary"}},[e._v("primary")]),e._v(" "),n("el-link",{attrs:{type:"success"}},[e._v("success")]),e._v(" "),n("el-link",{attrs:{type:"warning"}},[e._v("warning")]),e._v(" "),n("el-link",{attrs:{type:"danger"}},[e._v("danger")]),e._v(" "),n("el-link",{attrs:{type:"info"}},[e._v("info")])],1)])},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",[n("el-link",{attrs:{disabled:""}},[e._v("default")]),e._v(" "),n("el-link",{attrs:{type:"primary",disabled:""}},[e._v("primary")]),e._v(" "),n("el-link",{attrs:{type:"success",disabled:""}},[e._v("success")]),e._v(" "),n("el-link",{attrs:{type:"warning",disabled:""}},[e._v("warning")]),e._v(" "),n("el-link",{attrs:{type:"danger",disabled:""}},[e._v("danger")]),e._v(" "),n("el-link",{attrs:{type:"info",disabled:""}},[e._v("info")])],1)])},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",[t("el-link",{attrs:{underline:!1}},[this._v("Without Underline")]),this._v(" "),t("el-link",[this._v("With Underline")])],1)])},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",[t("el-link",{attrs:{icon:"el-icon-edit"}},[this._v("Edit")]),this._v(" "),t("el-link",[this._v("Check"),t("i",{staticClass:"el-icon-view el-icon--right"})])],1)])},staticRenderFns:[]},{})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Text hyperlink")]),e._m(1),n("p",[e._v("Basic text link")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n <el-link href="https://element.eleme.io" target="_blank">default</el-link>\n <el-link type="primary">primary</el-link>\n <el-link type="success">success</el-link>\n <el-link type="warning">warning</el-link>\n <el-link type="danger">danger</el-link>\n <el-link type="info">info</el-link>\n</div>\n')])])])],2),e._m(2),n("p",[e._v("Disabled state of link")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n <el-link disabled>default</el-link>\n <el-link type="primary" disabled>primary</el-link>\n <el-link type="success" disabled>success</el-link>\n <el-link type="warning" disabled>warning</el-link>\n <el-link type="danger" disabled>danger</el-link>\n <el-link type="info" disabled>info</el-link>\n</div>\n')])])])],2),e._m(3),n("p",[e._v("Underline of link")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n <el-link :underline="false">Without Underline</el-link>\n <el-link>With Underline</el-link>\n</div>\n')])])])],2),e._m(4),n("p",[e._v("Link with icon")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n <el-link icon="el-icon-edit">Edit</el-link>\n <el-link>Check<i class="el-icon-view el-icon--right"></i> </el-link>\n</div>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"link"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#link","aria-hidden":"true"}},[this._v("¶")]),this._v(" Link")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"underline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#underline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Underline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("type")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("default")])]),n("tr",[n("td",[e._v("underline")]),n("td",[e._v("whether the component has underline")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the component is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("href")]),n("td",[e._v("same as native hyperlink's "),n("code",[e._v("href")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("class name of icon")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])}],!1,null,null,null);t.default=r.exports},530:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-col",{attrs:{span:24}},[n("div",{staticClass:"grid-content bg-purple-dark"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),this._v(" "),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),this._v(" "),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:12,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:10}},[t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple-light"})]),this._v(" "),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]},{})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Quickly and easily create layouts with the basic 24-column.")]),e._m(1),n("p",[e._v("Create basic grid layout using columns.")]),n("demo-block",[n("div",[n("p",[e._v("With "),n("code",[e._v("row")]),e._v(" and "),n("code",[e._v("col")]),e._v(", we can easily manipulate the layout using the "),n("code",[e._v("span")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Column spacing is supported.")]),n("demo-block",[n("div",[n("p",[e._v("Row provides "),n("code",[e._v("gutter")]),e._v(" attribute to specify spacings between columns, and its default value is 0.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Form a more complex hybrid layout by combining the basic 1/24 columns.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("You can specify column offsets.")]),n("demo-block",[n("div",[n("p",[e._v("You can specify the number of column offset by setting the value of "),n("code",[e._v("offset")]),e._v(" attribute of Col.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n')])])])],2),e._m(5),n("p",[e._v("Use the flex layout to make flexible alignment of columns.")]),n("demo-block",[n("div",[n("p",[e._v("You can enable flex layout by setting "),n("code",[e._v("type")]),e._v(" attribute to 'flex', and define the layout of child elements by setting "),n("code",[e._v("justify")]),e._v(" attribute with start, center, end, space-between or space-around.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row type="flex" class="row-bg">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n .el-row {\n margin-bottom: 20px;\n &:last-child {\n margin-bottom: 0;\n }\n }\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n .row-bg {\n padding: 10px 0;\n background-color: #f9fafc;\n }\n</style>\n')])])])],2),e._m(6),n("p",[e._v("Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="10">\n <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n .el-col {\n border-radius: 4px;\n }\n .bg-purple-dark {\n background: #99a9bf;\n }\n .bg-purple {\n background: #d3dce6;\n }\n .bg-purple-light {\n background: #e5e9f2;\n }\n .grid-content {\n border-radius: 4px;\n min-height: 36px;\n }\n</style>\n')])])])],2),e._m(7),n("p",[e._v("Additionally, Element provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:")]),e._m(8),n("p",[e._v("The classes are:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"column-spacing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#column-spacing","aria-hidden":"true"}},[this._v("¶")]),this._v(" Column spacing")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hybrid-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hybrid-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hybrid layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"column-offset"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#column-offset","aria-hidden":"true"}},[this._v("¶")]),this._v(" Column offset")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alignment"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignment")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"responsive-layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Responsive Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utility-classes-for-hiding-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utility-classes-for-hiding-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utility classes for hiding elements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import 'element-ui/lib/theme-chalk/display.css';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("hidden-xs-only")]),e._v(" - hide when on extra small viewports only")]),n("li",[n("code",[e._v("hidden-sm-only")]),e._v(" - hide when on small viewports and down")]),n("li",[n("code",[e._v("hidden-sm-and-down")]),e._v(" - hide when on small viewports and down")]),n("li",[n("code",[e._v("hidden-sm-and-up")]),e._v(" - hide when on small viewports and up")]),n("li",[n("code",[e._v("hidden-md-only")]),e._v(" - hide when on medium viewports only")]),n("li",[n("code",[e._v("hidden-md-and-down")]),e._v(" - hide when on medium viewports and down")]),n("li",[n("code",[e._v("hidden-md-and-up")]),e._v(" - hide when on medium viewports and up")]),n("li",[n("code",[e._v("hidden-lg-only")]),e._v(" - hide when on large viewports only")]),n("li",[n("code",[e._v("hidden-lg-and-down")]),e._v(" - hide when on large viewports and down")]),n("li",[n("code",[e._v("hidden-lg-and-up")]),e._v(" - hide when on large viewports and up")]),n("li",[n("code",[e._v("hidden-xl-only")]),e._v(" - hide when on extra large viewports only")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"row-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Row Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("gutter")]),n("td",[e._v("grid spacing")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("layout mode, you can use flex, works in modern browsers")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("justify")]),n("td",[e._v("horizontal alignment of flex layout")]),n("td",[e._v("string")]),n("td",[e._v("start/end/center/space-around/space-between")]),n("td",[e._v("start")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("vertical alignment of flex layout")]),n("td",[e._v("string")]),n("td",[e._v("top/middle/bottom")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("custom element tag")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"col-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Col Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("span")]),n("td",[e._v("number of column the grid spans")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("24")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("number of spacing on the left side of the grid")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("push")]),n("td",[e._v("number of columns that grid moves to the right")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("pull")]),n("td",[e._v("number of columns that grid moves to the left")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("xs")]),n("td",[n("code",[e._v("<768px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sm")]),n("td",[n("code",[e._v("≥768px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("md")]),n("td",[n("code",[e._v("≥992px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("lg")]),n("td",[n("code",[e._v("≥1200px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("xl")]),n("td",[n("code",[e._v("≥1920px")]),e._v(" Responsive columns or column props object")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("custom element tag")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])}],!1,null,null,null);t.default=r.exports},535:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]},{data:function(){return{input:""}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]},{data:function(){return{input:""}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Please input",clearable:""},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]},{data:function(){return{input:""}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Please input password","show-password":""},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]},{data:function(){return{input:""}}}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-suffix"},[n("span",{staticClass:"demo-input-label"},[t._v("Using attributes")]),t._v(" "),n("el-input",{attrs:{placeholder:"Pick a date","suffix-icon":"el-icon-date"},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}}),t._v(" "),n("el-input",{attrs:{placeholder:"Type something","prefix-icon":"el-icon-search"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}})],1),t._v(" "),n("div",{staticClass:"demo-input-suffix"},[n("span",{staticClass:"demo-input-label"},[t._v("Using slots")]),t._v(" "),n("el-input",{attrs:{placeholder:"Pick a date"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[n("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t._v(" "),n("el-input",{attrs:{placeholder:"Type something"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}},[n("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)])},staticRenderFns:[]},{data:function(){return{input1:"",input2:"",input3:"",input4:""}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]},{data:function(){return{textarea:""}}}),"element-demo6":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:t.textarea1,callback:function(e){t.textarea1=e},expression:"textarea1"}}),t._v(" "),n("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),n("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:t.textarea2,callback:function(e){t.textarea2=e},expression:"textarea2"}})],1)},staticRenderFns:[]},{data:function(){return{textarea1:"",textarea2:""}}}),"element-demo7":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",[n("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}},[n("template",{slot:"prepend"},[t._v("Http://")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{attrs:{placeholder:"Please input"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}},[n("template",{slot:"append"},[t._v(".com")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{staticClass:"input-with-select",attrs:{placeholder:"Please input"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[n("el-select",{attrs:{slot:"prepend",placeholder:"Select"},slot:"prepend",model:{value:t.select,callback:function(e){t.select=e},expression:"select"}},[n("el-option",{attrs:{label:"Restaurant",value:"1"}}),t._v(" "),n("el-option",{attrs:{label:"Order No.",value:"2"}}),t._v(" "),n("el-option",{attrs:{label:"Tel",value:"3"}})],1),t._v(" "),n("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]},{data:function(){return{input1:"",input2:"",input3:"",select:""}}}),"element-demo8":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-size"},[n("el-input",{attrs:{placeholder:"Please Input"},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}}),t._v(" "),n("el-input",{attrs:{size:"medium",placeholder:"Please Input"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}}),t._v(" "),n("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}}),t._v(" "),n("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}})],1)])},staticRenderFns:[]},{data:function(){return{input1:"",input2:"",input3:"",input4:""}}}),"element-demo9":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-row",{staticClass:"demo-autocomplete"},[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("list suggestions when activated")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input"},on:{select:t.handleSelect},model:{value:t.state1,callback:function(e){t.state1=e},expression:"state1"}})],1),t._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("list suggestions on input")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:t.handleSelect},model:{value:t.state2,callback:function(e){t.state2=e},expression:"state2"}})],1)],1)],1)},staticRenderFns:[]},{data:function(){return{links:[],state1:"",state2:""}},methods:{querySearch:function(e,t){var n=this.links;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}}),"element-demo10":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":n.querySearch,placeholder:"Please input"},on:{select:n.handleSelect},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.item;return[a("div",{staticClass:"value"},[n._v(n._s(t.value))]),n._v(" "),a("span",{staticClass:"link"},[n._v(n._s(t.link))])]}}]),model:{value:n.state,callback:function(e){n.state=e},expression:"state"}},[a("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:n.handleIconClick},slot:"suffix"})])],1)},staticRenderFns:[]},{data:function(){return{links:[],state:""}},methods:{querySearch:function(e,t){var n=this.links;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)},handleIconClick:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}}),"element-demo11":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-autocomplete",{attrs:{"fetch-suggestions":t.querySearchAsync,placeholder:"Please input"},on:{select:t.handleSelect},model:{value:t.state,callback:function(e){t.state=e},expression:"state"}})],1)},staticRenderFns:[]},{data:function(){return{links:[],state:"",timeout:null}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearchAsync:function(e,t){var n=this.links,a=e?n.filter(this.createFilter(e)):n;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(a)},3e3*Math.random())},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}}),"element-demo12":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"text",placeholder:"Please input",maxlength:"10","show-word-limit":""},model:{value:t.text,callback:function(e){t.text=e},expression:"text"}}),t._v(" "),n("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),n("el-input",{attrs:{type:"textarea",placeholder:"Please input",maxlength:"30","show-word-limit":""},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]},{data:function(){return{text:"",textarea:""}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Input data using mouse or keyboard.")]),e._m(1),e._m(2),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Please input" v-model="input"></el-input>\n\n<script>\nexport default {\n data() {\n return {\n input: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Disable the Input with the "),n("code",[e._v("disabled")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n placeholder="Please input"\n v-model="input"\n :disabled="true">\n</el-input>\n\n<script>\nexport default {\n data() {\n return {\n input: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Make the Input clearable with the "),n("code",[e._v("clearable")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n placeholder="Please input"\n v-model="input"\n clearable>\n</el-input>\n\n<script>\nexport default {\n data() {\n return {\n input: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Make a toggleable password Input with the "),n("code",[e._v("show-password")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Please input password" v-model="input" show-password></el-input>\n\n<script>\n export default {\n data() {\n return {\n input: \'\'\n }\n }\n }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Add an icon to indicate input type.")]),n("demo-block",[n("div",[n("p",[e._v("To add icons in Input, you can simply use "),n("code",[e._v("prefix-icon")]),e._v(" and "),n("code",[e._v("suffix-icon")]),e._v(" attributes. Also, the "),n("code",[e._v("prefix")]),e._v(" and "),n("code",[e._v("suffix")]),e._v(" named slots works as well.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-suffix">\n <span class="demo-input-label">Using attributes</span>\n <el-input\n placeholder="Pick a date"\n suffix-icon="el-icon-date"\n v-model="input1">\n </el-input>\n <el-input\n placeholder="Type something"\n prefix-icon="el-icon-search"\n v-model="input2">\n </el-input>\n</div>\n<div class="demo-input-suffix">\n <span class="demo-input-label">Using slots</span>\n <el-input\n placeholder="Pick a date"\n v-model="input3">\n <i slot="suffix" class="el-input__icon el-icon-date"></i>\n </el-input>\n <el-input\n placeholder="Type something"\n v-model="input4">\n <i slot="prefix" class="el-input__icon el-icon-search"></i>\n </el-input>\n</div>\n\n<style>\n .demo-input-label {\n display: inline-block;\n width: 130px;\n }\n</style>\n\n<script>\nexport default {\n data() {\n return {\n input1: \'\',\n input2: \'\',\n input3: \'\',\n input4: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Control the height by setting the "),n("code",[e._v("rows")]),e._v(" prop.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n type="textarea"\n :rows="2"\n placeholder="Please input"\n v-model="textarea">\n</el-input>\n\n<script>\nexport default {\n data() {\n return {\n textarea: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n type="textarea"\n autosize\n placeholder="Please input"\n v-model="textarea1">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n type="textarea"\n :autosize="{ minRows: 2, maxRows: 4}"\n placeholder="Please input"\n v-model="textarea2">\n</el-input>\n\n<script>\nexport default {\n data() {\n return {\n textarea1: \'\',\n textarea2: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("Prepend or append an element, generally a label or a button.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("slot")]),e._v(" to distribute elements that prepend or append to Input.")])]),n("template",{slot:"source"},[n("element-demo7")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n <el-input placeholder="Please input" v-model="input1">\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="input2">\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="input3" class="input-with-select">\n <el-select v-model="select" slot="prepend" placeholder="Select">\n <el-option label="Restaurant" value="1"></el-option>\n <el-option label="Order No." value="2"></el-option>\n <el-option label="Tel" value="3"></el-option>\n </el-select>\n <el-button slot="append" icon="el-icon-search"></el-button>\n </el-input>\n</div>\n\n<style>\n .el-select .el-input {\n width: 110px;\n }\n .input-with-select .el-input-group__prepend {\n background-color: #fff;\n }\n</style>\n<script>\nexport default {\n data() {\n return {\n input1: \'\',\n input2: \'\',\n input3: \'\',\n select: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(12),n("demo-block",[n("div",[n("p",[e._v("Add "),n("code",[e._v("size")]),e._v(" attribute to change the size of Input. In addition to the default size, there are three other options: "),n("code",[e._v("large")]),e._v(", "),n("code",[e._v("small")]),e._v(" and "),n("code",[e._v("mini")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo8")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-size">\n <el-input\n placeholder="Please Input"\n v-model="input1">\n </el-input>\n <el-input\n size="medium"\n placeholder="Please Input"\n v-model="input2">\n </el-input>\n <el-input\n size="small"\n placeholder="Please Input"\n v-model="input3">\n </el-input>\n <el-input\n size="mini"\n placeholder="Please Input"\n v-model="input4">\n </el-input>\n</div>\n\n<script>\nexport default {\n data() {\n return {\n input1: \'\',\n input2: \'\',\n input3: \'\',\n input4: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("You can get some recommended tips based on the current input.")]),n("demo-block",[n("div",[n("p",[e._v("Autocomplete component provides input suggestions. The "),n("code",[e._v("fetch-suggestions")]),e._v(" attribute is a method that returns suggested input. In this example, "),n("code",[e._v("querySearch(queryString, cb)")]),e._v(" returns suggestions to Autocomplete via "),n("code",[e._v("cb(data)")]),e._v(" when suggestions are ready.")])]),n("template",{slot:"source"},[n("element-demo9")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="demo-autocomplete">\n <el-col :span="12">\n <div class="sub-title">list suggestions when activated</div>\n <el-autocomplete\n class="inline-input"\n v-model="state1"\n :fetch-suggestions="querySearch"\n placeholder="Please Input"\n @select="handleSelect"\n ></el-autocomplete>\n </el-col>\n <el-col :span="12">\n <div class="sub-title">list suggestions on input</div>\n <el-autocomplete\n class="inline-input"\n v-model="state2"\n :fetch-suggestions="querySearch"\n placeholder="Please Input"\n :trigger-on-focus="false"\n @select="handleSelect"\n ></el-autocomplete>\n </el-col>\n</el-row>\n<script>\n export default {\n data() {\n return {\n links: [],\n state1: \'\',\n state2: \'\'\n };\n },\n methods: {\n querySearch(queryString, cb) {\n var links = this.links;\n var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n // call callback function to return suggestions\n cb(results);\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n }\n<\/script>\n')])])])],2),e._m(14),n("p",[e._v("Customize how suggestions are displayed.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("scoped slot")]),e._v(" to customize suggestion items. In the scope, you can access the suggestion object via the "),n("code",[e._v("item")]),e._v(" key.")])]),n("template",{slot:"source"},[n("element-demo10")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n popper-class="my-autocomplete"\n v-model="state"\n :fetch-suggestions="querySearch"\n placeholder="Please input"\n @select="handleSelect">\n <i\n class="el-icon-edit el-input__icon"\n slot="suffix"\n @click="handleIconClick">\n </i>\n <template slot-scope="{ item }">\n <div class="value">{{ item.value }}</div>\n <span class="link">{{ item.link }}</span>\n </template>\n</el-autocomplete>\n\n<style>\n .my-autocomplete {\n li {\n line-height: normal;\n padding: 7px;\n\n .value {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .link {\n font-size: 12px;\n color: #b4b4b4;\n }\n }\n }\n</style>\n\n<script>\n export default {\n data() {\n return {\n links: [],\n state: \'\'\n };\n },\n methods: {\n querySearch(queryString, cb) {\n var links = this.links;\n var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n // call callback function to return suggestion objects\n cb(results);\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n };\n },\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n handleSelect(item) {\n console.log(item);\n },\n handleIconClick(ev) {\n console.log(ev);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("Search data from server-side.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo11")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n v-model="state"\n :fetch-suggestions="querySearchAsync"\n placeholder="Please input"\n @select="handleSelect"\n></el-autocomplete>\n<script>\n export default {\n data() {\n return {\n links: [],\n state: \'\',\n timeout: null\n };\n },\n methods: {\n loadAll() {\n return [\n { "value": "vue", "link": "https://github.com/vuejs/vue" },\n { "value": "element", "link": "https://github.com/ElemeFE/element" },\n { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n { "value": "babel", "link": "https://github.com/babel/babel" }\n ];\n },\n querySearchAsync(queryString, cb) {\n var links = this.links;\n var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => {\n cb(results);\n }, 3000 * Math.random());\n },\n createFilter(queryString) {\n return (link) => {\n return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n };\n },\n handleSelect(item) {\n console.log(item);\n }\n },\n mounted() {\n this.links = this.loadAll();\n }\n };\n<\/script>\n')])])])],2),e._m(16),n("demo-block",[n("div",[n("p",[n("code",[e._v("maxlength")]),e._v(" and "),n("code",[e._v("minlength")]),e._v(' are attributes of native input, they declare a limit on the number of characters a user can input. The "number of characters" is measured using JavaScript string length.Setting the '),n("code",[e._v("maxlength")]),e._v(" prop for a text or textarea type of Input can limit the length of input value, allows you to show word count by setting "),n("code",[e._v("show-word-limit")]),e._v(" to "),n("code",[e._v("true")]),e._v(" at the same time.")])]),n("template",{slot:"source"},[n("element-demo12")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n type="text"\n placeholder="Please input"\n v-model="text"\n maxlength="10"\n show-word-limit\n>\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n type="textarea"\n placeholder="Please input"\n v-model="textarea"\n maxlength="30"\n show-word-limit\n>\n</el-input>\n\n<script>\nexport default {\n data() {\n return {\n text: \'\',\n textarea: \'\'\n }\n }\n}\n<\/script>\n')])])])],2),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33),e._m(34)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Input is a controlled component, it "),n("strong",[e._v("always shows Vue binding value")]),e._v(".")]),n("p",[e._v("Under normal circumstances, "),n("code",[e._v("input")]),e._v(" event should be handled. Its handler should update component's binding value (or use "),n("code",[e._v("v-model")]),e._v("). Otherwise, input box's value will not change.")]),n("p",[e._v("Do not support "),n("code",[e._v("v-model")]),e._v(" modifiers.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clearable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clearable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clearable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"password-box"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#password-box","aria-hidden":"true"}},[this._v("¶")]),this._v(" Password box")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-with-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-with-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input with icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"textarea"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[this._v("¶")]),this._v(" Textarea")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Resizable for entering multiple lines of text information. Add attribute "),t("code",[this._v('type="textarea"')]),this._v(" to change "),t("code",[this._v("input")]),this._v(" into native "),t("code",[this._v("textarea")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autosize-textarea"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autosize-textarea","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autosize Textarea")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Setting the "),t("code",[this._v("autosize")]),this._v(" prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to "),t("code",[this._v("autosize")]),this._v(" to specify the minimum and maximum number of lines the textarea can automatically adjust.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mixed-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mixed-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mixed input")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"remote-search"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[this._v("¶")]),this._v(" Remote search")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"limit-length"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#limit-length","aria-hidden":"true"}},[this._v("¶")]),this._v(" Limit length")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of input")]),n("td",[e._v("string")]),n("td",[e._v("text, textarea and other "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types"}},[e._v("native input types")])]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("maxlength")]),n("td",[e._v("same as "),n("code",[e._v("maxlength")]),e._v(" in native input")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("minlength")]),n("td",[e._v("same as "),n("code",[e._v("minlength")]),e._v(" in native input")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-word-limit")]),n("td",[e._v("whether show word count，only works when "),n("code",[e._v("type")]),e._v(" is 'text' or 'textarea'")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder of Input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-password")]),n("td",[e._v("whether to show toggleable password input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Input is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input, works when "),n("code",[e._v("type")]),e._v(" is not 'textarea'")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("suffix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rows")]),n("td",[e._v("number of rows of textarea, only works when "),n("code",[e._v("type")]),e._v(" is 'textarea'")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("autosize")]),n("td",[e._v("whether textarea has an adaptive height, only works when "),n("code",[e._v("type")]),e._v(" is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }")]),n("td",[e._v("boolean / object")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("same as "),n("code",[e._v("autocomplete")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("on/off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("@DEPRECATED in next major version")]),n("td",[e._v("string")]),n("td",[e._v("on/off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("same as "),n("code",[e._v("readonly")]),e._v(" in native input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("same as "),n("code",[e._v("max")]),e._v(" in native input")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("same as "),n("code",[e._v("min")]),e._v(" in native input")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("same as "),n("code",[e._v("step")]),e._v(" in native input")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("resize")]),n("td",[e._v("control the resizability")]),n("td",[e._v("string")]),n("td",[e._v("none, both, horizontal, vertical")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("same as "),n("code",[e._v("autofocus")]),e._v(" in native input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("form")]),n("td",[e._v("same as "),n("code",[e._v("form")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[e._v("input tabindex")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("whether to trigger form validation")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("content as Input prefix, only works when "),n("code",[e._v("type")]),e._v(" is 'text'")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("content as Input suffix, only works when "),n("code",[e._v("type")]),e._v(" is 'text'")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("content to prepend before Input, only works when "),n("code",[e._v("type")]),e._v(" is 'text'")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("content to append after Input, only works when "),n("code",[e._v("type")]),e._v(" is 'text'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the icon inside Input value change")]),n("td",[e._v("(value: string | number)")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("triggers when the Input is cleared by clicking the clear button")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the input element")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("blur the input element")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("select the text in input element")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("the placeholder of Autocomplete")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Autocomplete is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("key name of the input suggestion object for display")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("binding value")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("debounce delay when typing, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("placement of the popup menu")]),n("td",[e._v("string")]),n("td",[e._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),n("td",[e._v("bottom-start")])]),n("tr",[n("td",[e._v("fetch-suggestions")]),n("td",[e._v("a method to fetch input suggestions. When suggestions are ready, invoke "),n("code",[e._v("callback(data:[])")]),e._v(" to return them to Autocomplete")]),n("td",[e._v("Function(queryString, callback)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for autocomplete's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("trigger-on-focus")]),n("td",[e._v("whether show suggestions when input focus")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-when-unmatched")]),n("td",[e._v("whether to emit a "),n("code",[e._v("select")]),e._v(" event on enter when there is no autocomplete match")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("suffix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-loading")]),n("td",[e._v("whether to hide the loading icon in remote search")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-first-item")]),n("td",[e._v("whether to highlight first item in remote search suggestions by default")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("content as Input prefix")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("content as Input suffix")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("content to prepend before Input")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("content to append after Input")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Custom content for input suggestions. The scope parameter is { item }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("select")]),t("td",[this._v("triggers when a suggestion is clicked")]),t("td",[this._v("suggestion being clicked")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocomplete-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplete Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Method")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("focus the input element")]),t("td",[this._v("—")])])])])}],!1,null,null,null);t.default=r.exports},537:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{min:1,max:10},on:{change:t.handleChange},model:{value:t.num,callback:function(e){t.num=e},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:1}},methods:{handleChange:function(e){console.log(e)}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{disabled:!0},model:{value:t.num,callback:function(e){t.num=e},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:1}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{step:2},model:{value:t.num,callback:function(e){t.num=e},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:5}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{step:2,"step-strictly":""},model:{value:t.num,callback:function(e){t.num=e},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:2}}}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:t.num,callback:function(e){t.num=e},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:1}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{model:{value:t.num1,callback:function(e){t.num1=e},expression:"num1"}}),t._v(" "),n("el-input-number",{attrs:{size:"medium"},model:{value:t.num2,callback:function(e){t.num2=e},expression:"num2"}}),t._v(" "),n("el-input-number",{attrs:{size:"small"},model:{value:t.num3,callback:function(e){t.num3=e},expression:"num3"}}),t._v(" "),n("el-input-number",{attrs:{size:"mini"},model:{value:t.num4,callback:function(e){t.num4=e},expression:"num4"}})]],2)},staticRenderFns:[]},{data:function(){return{num1:1,num2:1,num3:1,num4:1}}}),"element-demo6":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:t.handleChange},model:{value:t.num,callback:function(e){t.num=e},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:1}},methods:{handleChange:function(e){console.log(e)}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Input numerical values with a customizable range.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Bind a variable to "),n("code",[e._v("v-model")]),e._v(" in "),n("code",[e._v("<el-input-number>")]),e._v(" element and you are set.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n export default {\n data() {\n return {\n num: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value)\n }\n }\n };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("disabled")]),e._v(" attribute accepts a "),n("code",[e._v("boolean")]),e._v(", and if the value is "),n("code",[e._v("true")]),e._v(", the component is disabled. If you just need to control the value within a range, you can add "),n("code",[e._v("min")]),e._v(" attribute to set the minimum value and "),n("code",[e._v("max")]),e._v(" to set the maximum value. By default, the minimum value is "),n("code",[e._v("0")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-input-number v-model="num" :disabled="true"></el-input-number>\n</template>\n<script>\n export default {\n data() {\n return {\n num: 1\n }\n }\n };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Allows you to define incremental steps.")]),n("demo-block",[n("div",[n("p",[e._v("Add "),n("code",[e._v("step")]),e._v(" attribute to set the step.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-input-number v-model="num" :step="2"></el-input-number>\n</template>\n<script>\n export default {\n data() {\n return {\n num: 5\n }\n }\n };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("step-strictly")]),e._v(" attribute accepts a "),n("code",[e._v("boolean")]),e._v(". if this attribute is "),n("code",[e._v("true")]),e._v(", input value can only be multiple of step.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-input-number v-model="num" :step="2" step-strictly></el-input-number>\n</template>\n<script>\n export default {\n data() {\n return {\n num: 2\n }\n }\n };\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Add "),n("code",[e._v("precision")]),e._v(" attribute to set the precision of input value.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n<script>\n export default {\n data() {\n return {\n num: 1\n }\n }\n };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),n("demo-block",[n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-input-number v-model="num1"></el-input-number>\n <el-input-number size="medium" v-model="num2"></el-input-number>\n <el-input-number size="small" v-model="num3"></el-input-number>\n <el-input-number size="mini" v-model="num4"></el-input-number>\n</template>\n<script>\n export default {\n data() {\n return {\n num1: 1,\n num2: 1,\n num3: 1,\n num4: 1\n }\n }\n };\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("controls-position")]),e._v(" to decide the position of control buttons.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n export default {\n data() {\n return {\n num: 1\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"inputnumber"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"step-strictly"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-strictly","aria-hidden":"true"}},[this._v("¶")]),this._v(" Step strictly")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"precision"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#precision","aria-hidden":"true"}},[this._v("¶")]),this._v(" Precision")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("The value of "),t("code",[this._v("precision")]),this._v(" must be a non negative integer and should not be less than the decimal places of "),t("code",[this._v("step")]),this._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"size"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#size","aria-hidden":"true"}},[this._v("¶")]),this._v(" Size")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use attribute "),n("code",[e._v("size")]),e._v(" to set additional sizes with "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" or "),n("code",[e._v("mini")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"controls-position"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#controls-position","aria-hidden":"true"}},[this._v("¶")]),this._v(" Controls Position")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("the minimum allowed value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[n("code",[e._v("-Infinity")])])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("the maximum allowed value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[n("code",[e._v("Infinity")])])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("incremental step")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("step-strictly")]),n("td",[e._v("whether input value can only be multiple of step")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("precision")]),n("td",[e._v("precision of input value")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of the component")]),n("td",[e._v("string")]),n("td",[e._v("large/small")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the component is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("controls")]),n("td",[e._v("whether to enable the control buttons")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("controls-position")]),n("td",[e._v("position of the control buttons")]),n("td",[e._v("string")]),n("td",[e._v("right")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder in input")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the value changes")]),n("td",[e._v("value after change")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("focus the Input component")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("select the text in input element")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=r.exports},540:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("ul",{directives:[{name:"infinite-scroll",rawName:"v-infinite-scroll",value:t.load,expression:"load"}],staticClass:"infinite-list"},t._l(t.count,function(e){return n("li",{staticClass:"infinite-list-item"},[t._v(t._s(e))])}),0)]],2)},staticRenderFns:[]},{data:function(){return{count:0}},methods:{load:function(){this.count+=2}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"infinite-list-wrapper"},[n("ul",{directives:[{name:"infinite-scroll",rawName:"v-infinite-scroll",value:t.load,expression:"load"}],staticClass:"list",attrs:{"infinite-scroll-disabled":"disabled"}},t._l(t.count,function(e){return n("li",{staticClass:"list-item"},[t._v(t._s(e))])}),0),t._v(" "),t.loading?n("p",[t._v("Loading...")]):t._e(),t._v(" "),t.noMore?n("p",[t._v("No more")]):t._e()])]],2)},staticRenderFns:[]},{data:function(){return{count:10,loading:!1}},computed:{noMore:function(){return 20<=this.count},disabled:function(){return this.loading||this.noMore}},methods:{load:function(){var e=this;this.loading=!0,setTimeout(function(){e.count+=2,e.loading=!1},2e3)}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Load more data while reach bottom of the page")]),e._m(1),e._m(2),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <ul class="infinite-list" v-infinite-scroll="load">\n <li v-for="i in count" class="infinite-list-item">{{ i }}</li>\n </ul>\n</template>\n\n<script>\n export default {\n data () {\n return {\n count: 0\n }\n },\n methods: {\n load () {\n this.count += 2\n }\n }\n }\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="infinite-list-wrapper">\n <ul\n class="list"\n v-infinite-scroll="load"\n infinite-scroll-disabled="disabled">\n <li v-for="i in count" class="list-item">{{ i }}</li>\n </ul>\n <p v-if="loading">Loading...</p>\n <p v-if="noMore">No more</p>\n </div>\n</template>\n\n<script>\n export default {\n data () {\n return {\n count: 10,\n loading: false\n }\n },\n computed: {\n noMore () {\n return this.count >= 20\n },\n disabled () {\n return this.loading || this.noMore\n }\n },\n methods: {\n load () {\n this.loading = true\n setTimeout(() => {\n this.count += 2\n this.loading = false\n }, 2000)\n }\n }\n }\n<\/script>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"infinitescroll"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#infinitescroll","aria-hidden":"true"}},[this._v("¶")]),this._v(" InfiniteScroll")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Add "),t("code",[this._v("v-infinite-scroll")]),this._v(" to the list to automatically execute loading method when scrolling to the bottom.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disable-loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disable-loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disable Loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("infinite-scroll-disabled")]),n("td",[e._v("is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("infinite-scroll-delay")]),n("td",[e._v("throttle delay (ms)")]),n("td",[e._v("number")]),n("td",[e._v("-")]),n("td",[e._v("200")])]),n("tr",[n("td",[e._v("infinite-scroll-distance")]),n("td",[e._v("trigger distance (px)")]),n("td",[e._v("number")]),n("td",[e._v("-")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("infinite-scroll-immediate")]),n("td",[e._v("Whether to execute the loading method immediately, in case the content cannot be filled up in the initial state.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])}],!1,null,null,null);t.default=r.exports},542:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-image"},t._l(t.fits,function(e){return n("div",{key:e,staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v(t._s(e))]),t._v(" "),n("el-image",{staticStyle:{width:"100px",height:"100px"},attrs:{src:t.url,fit:e}})],1)}),0)])},staticRenderFns:[]},{data:function(){return{fits:["fill","contain","cover","none","scale-down"],url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"demo-image__placeholder"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Default")]),e._v(" "),n("el-image",{attrs:{src:e.src}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Custom")]),e._v(" "),n("el-image",{attrs:{src:e.src}},[n("div",{staticClass:"image-slot",attrs:{slot:"placeholder"},slot:"placeholder"},[e._v("\n Loading"),n("span",{staticClass:"dot"},[e._v("...")])])])],1)])])},staticRenderFns:[]},{data:function(){return{src:"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"}}}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"demo-image__error"},[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Default")]),this._v(" "),t("el-image")],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Custom")]),this._v(" "),t("el-image",[t("div",{staticClass:"image-slot",attrs:{slot:"error"},slot:"error"},[t("i",{staticClass:"el-icon-picture-outline"})])])],1)])])},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"demo-image__lazy"},this._l(this.urls,function(e){return t("el-image",{key:e,attrs:{src:e,lazy:""}})}),1)])},staticRenderFns:[]},{data:function(){return{urls:["https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg","https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg","https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg","https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg","https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg","https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg","https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg"]}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Besides the native features of img, support lazy load, custom placeholder and load failure, etc.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Indicate how the image should be resized to fit its container by "),n("code",[e._v("fit")]),e._v(", same as native "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"}},[e._v("object-fit")]),e._v("。")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-image">\n <div class="block" v-for="fit in fits" :key="fit">\n <span class="demonstration">{{ fit }}</span>\n <el-image\n style="width: 100px; height: 100px"\n :src="url"\n :fit="fit"></el-image>\n </div>\n</div>\n\n<script>\n export default {\n data() {\n return {\n fits: [\'fill\', \'contain\', \'cover\', \'none\', \'scale-down\'],\n url: \'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\'\n }\n }\n }\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Custom placeholder content when image hasn't loaded yet by "),n("code",[e._v("slot = placeholder")])])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-image__placeholder">\n <div class="block">\n <span class="demonstration">Default</span>\n <el-image :src="src"></el-image>\n </div>\n <div class="block">\n <span class="demonstration">Custom</span>\n <el-image :src="src">\n <div slot="placeholder" class="image-slot">\n Loading<span class="dot">...</span>\n </div>\n </el-image>\n </div>\n</div>\n\n<script>\n export default {\n data() {\n return {\n src: \'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg\'\n }\n }\n }\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Custom failed content when error occurs to image load by "),n("code",[e._v("slot = error")])])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-image__error">\n <div class="block">\n <span class="demonstration">Default</span>\n <el-image></el-image>\n </div>\n <div class="block">\n <span class="demonstration">Custom</span>\n <el-image>\n <div slot="error" class="image-slot">\n <i class="el-icon-picture-outline"></i>\n </div>\n </el-image>\n </div>\n</div>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Use lazy load by "),n("code",[e._v("lazy = true")]),e._v(". Image will load until scroll into view when set. You can indicate scroll container that adds scroll listener to by "),n("code",[e._v("scroll-container")]),e._v(". If undefined, will be the nearest parent container whose overflow property is auto or scroll.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"demo-image__lazy\">\n <el-image v-for=\"url in urls\" :key=\"url\" :src=\"url\" lazy></el-image>\n</div>\n\n<script>\n export default {\n data() {\n return {\n urls: [\n 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',\n 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',\n 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',\n 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',\n 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',\n 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',\n 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'\n ]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"image"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#image","aria-hidden":"true"}},[this._v("¶")]),this._v(" Image")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"placeholder"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#placeholder","aria-hidden":"true"}},[this._v("¶")]),this._v(" Placeholder")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"load-failed"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#load-failed","aria-hidden":"true"}},[this._v("¶")]),this._v(" Load Failed")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"lazy-load"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lazy-load","aria-hidden":"true"}},[this._v("¶")]),this._v(" Lazy Load")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("src")]),n("td",[e._v("Image source, same as native")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("Indicate how the image should be resized to fit its container, same as "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"}},[e._v("object-fit")])]),n("td",[e._v("string")]),n("td",[e._v("fill / contain / cover / none / scale-down")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("alt")]),n("td",[e._v("Native alt")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("referrer-policy")]),n("td",[e._v("Native referrerPolicy")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("Whether to use lazy load")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("scroll-container")]),n("td",[e._v("The container to add scroll listener when using lazy load")]),n("td",[e._v("string / HTMLElement")]),n("td",[e._v("—")]),n("td",[e._v("The nearest parent container whose overflow property is auto or scroll")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("load")]),n("td",[e._v("Same as native load")]),n("td",[e._v("(e: Event)")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("Same as native error")]),n("td",[e._v("(e: Error)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Slot Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("placeholder")]),t("td",[this._v("Triggers when image load")])]),t("tr",[t("td",[this._v("error")]),t("td",[this._v("Triggers when image load failed")])])])])}],!1,null,null,null);t.default=r.exports},545:function(e,t,n){"use strict";n.r(t);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e})({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("i",{staticClass:"el-icon-edit"}),this._v(" "),t("i",{staticClass:"el-icon-share"}),this._v(" "),t("i",{staticClass:"el-icon-delete"}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("Search")])],1)},staticRenderFns:[]},{})}},i=n(0),l=Object(i.a)(a,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"content element-doc"},[t._m(0),n("p",[t._v("Element provides a set of common icons.")]),t._m(1),t._m(2),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n\n')])])])],2),t._m(3),n("ul",{staticClass:"icon-list"},t._l(t.$icon,function(e){return n("li",{key:e},[n("span",[n("i",{class:"el-icon-"+e}),n("span",{staticClass:"icon-name"},[t._v(t._s("el-icon-"+e))])])])}),0)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Just assign the class name to "),t("code",[this._v("el-icon-iconName")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icons"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icons","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icons")])}],!1,null,null,null);t.default=l.exports},546:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("Default")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success"}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info"}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning"}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger"}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:""}},[e._v("Plain")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("Round")]),e._v(" "),n("el-button",{attrs:{type:"primary",round:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",round:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",round:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",round:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",round:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{icon:"el-icon-search",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",{attrs:{disabled:""}},[e._v("Default")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",disabled:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",disabled:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",disabled:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",disabled:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:"",disabled:""}},[e._v("Plain")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:"",disabled:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:"",disabled:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[e._v("Danger")])],1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"text"}},[this._v("Text Button")]),this._v(" "),t("el-button",{attrs:{type:"text",disabled:""}},[this._v("Text Button")])],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("Search")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Upload"),t("i",{staticClass:"el-icon-upload el-icon-right"})])],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[this._v("Previous Page")]),this._v(" "),t("el-button",{attrs:{type:"primary"}},[this._v("Next Page"),t("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),this._v(" "),t("el-button-group",[t("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",loading:!0}},[this._v("Loading")])],1)},staticRenderFns:[]},{}),"element-demo6":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("Default")]),e._v(" "),n("el-button",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),n("el-button",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),n("el-button",{attrs:{size:"mini"}},[e._v("Mini")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("Default")]),e._v(" "),n("el-button",{attrs:{size:"medium",round:""}},[e._v("Medium")]),e._v(" "),n("el-button",{attrs:{size:"small",round:""}},[e._v("Small")]),e._v(" "),n("el-button",{attrs:{size:"mini",round:""}},[e._v("Mini")])],1)],1)},staticRenderFns:[]},{})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Commonly used button.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("type")]),e._v(", "),n("code",[e._v("plain")]),e._v(", "),n("code",[e._v("round")]),e._v(" and "),n("code",[e._v("circle")]),e._v(" to define Button's style.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n <el-button>Default</el-button>\n <el-button type="primary">Primary</el-button>\n <el-button type="success">Success</el-button>\n <el-button type="info">Info</el-button>\n <el-button type="warning">Warning</el-button>\n <el-button type="danger">Danger</el-button>\n</el-row>\n\n<el-row>\n <el-button plain>Plain</el-button>\n <el-button type="primary" plain>Primary</el-button>\n <el-button type="success" plain>Success</el-button>\n <el-button type="info" plain>Info</el-button>\n <el-button type="warning" plain>Warning</el-button>\n <el-button type="danger" plain>Danger</el-button>\n</el-row>\n\n<el-row>\n <el-button round>Round</el-button>\n <el-button type="primary" round>Primary</el-button>\n <el-button type="success" round>Success</el-button>\n <el-button type="info" round>Info</el-button>\n <el-button type="warning" round>Warning</el-button>\n <el-button type="danger" round>Danger</el-button>\n</el-row>\n\n<el-row>\n <el-button icon="el-icon-search" circle></el-button>\n <el-button type="primary" icon="el-icon-edit" circle></el-button>\n <el-button type="success" icon="el-icon-check" circle></el-button>\n <el-button type="info" icon="el-icon-message" circle></el-button>\n <el-button type="warning" icon="el-icon-star-off" circle></el-button>\n <el-button type="danger" icon="el-icon-delete" circle></el-button>\n</el-row>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("disabled")]),e._v(" attribute to determine whether a button is disabled. It accepts a "),n("code",[e._v("Boolean")]),e._v(" value.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n <el-button disabled>Default</el-button>\n <el-button type="primary" disabled>Primary</el-button>\n <el-button type="success" disabled>Success</el-button>\n <el-button type="info" disabled>Info</el-button>\n <el-button type="warning" disabled>Warning</el-button>\n <el-button type="danger" disabled>Danger</el-button>\n</el-row>\n\n<el-row>\n <el-button plain disabled>Plain</el-button>\n <el-button type="primary" plain disabled>Primary</el-button>\n <el-button type="success" plain disabled>Success</el-button>\n <el-button type="info" plain disabled>Info</el-button>\n <el-button type="warning" plain disabled>Warning</el-button>\n <el-button type="danger" plain disabled>Danger</el-button>\n</el-row>\n')])])])],2),e._m(4),n("p",[e._v("Buttons without border and background.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text">Text Button</el-button>\n<el-button type="text" disabled>Text Button</el-button>\n')])])])],2),e._m(5),n("p",[e._v("Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.")]),n("demo-block",[n("div",[n("p",[e._v("Use the "),n("code",[e._v("icon")]),e._v(" attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an "),n("code",[e._v("<i>")]),e._v(" tag. Custom icons can be used as well.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">Search</el-button>\n<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>\n')])])])],2),e._m(6),n("p",[e._v("Displayed as a button group, can be used to group a series of similar operations.")]),n("demo-block",[n("div",[n("p",[e._v("Use tag "),n("code",[e._v("<el-button-group>")]),e._v(" to group your buttons.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button-group>\n <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>\n <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>\n</el-button-group>\n<el-button-group>\n <el-button type="primary" icon="el-icon-edit"></el-button>\n <el-button type="primary" icon="el-icon-share"></el-button>\n <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n')])])])],2),e._m(7),n("p",[e._v("Click the button to load data, then the button displays a loading state.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("loading")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" to display loading state.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" :loading="true">Loading</el-button>\n')])])])],2),e._m(8),n("p",[e._v("Besides default size, Button component provides three additional sizes for you to choose among different scenarios.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("size")]),e._v(" to set additional sizes with "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" or "),n("code",[e._v("mini")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n <el-button>Default</el-button>\n <el-button size="medium">Medium</el-button>\n <el-button size="small">Small</el-button>\n <el-button size="mini">Mini</el-button>\n</el-row>\n<el-row>\n <el-button round>Default</el-button>\n <el-button size="medium" round>Medium</el-button>\n <el-button size="small" round>Small</el-button>\n <el-button size="mini" round>Mini</el-button>\n</el-row>\n')])])])],2),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("The "),t("code",[this._v("disabled")]),this._v(" attribute determines if the button is disabled.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"text-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#text-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Text Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icon-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"button-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button Group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"loading-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading Button")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("size")]),n("td",[e._v("button size")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("button type")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info / text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("plain")]),n("td",[e._v("determine whether it's a plain button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("round")]),n("td",[e._v("determine whether it's a round button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("circle")]),n("td",[e._v("determine whether it's a circle button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("determine whether it's loading")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("disable the button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon class name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("same as native button's "),n("code",[e._v("autofocus")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("native-type")]),n("td",[e._v("same as native button's "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("button / submit / reset")]),n("td",[e._v("button")])])])])}],!1,null,null,null);t.default=r.exports},550:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.form,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Activity name"}},[n("el-input",{model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.form.date1,callback:function(e){t.$set(t.form,"date1",e)},expression:"form.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.form.date2,callback:function(e){t.$set(t.form,"date2",e)},expression:"form.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Instant delivery"}},[n("el-switch",{model:{value:t.form.delivery,callback:function(e){t.$set(t.form,"delivery",e)},expression:"form.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type"}},[n("el-checkbox-group",{model:{value:t.form.type,callback:function(e){t.$set(t.form,"type",e)},expression:"form.type"}},[n("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources"}},[n("el-radio-group",{model:{value:t.form.resource,callback:function(e){t.$set(t.form,"resource",e)},expression:"form.resource"}},[n("el-radio",{attrs:{label:"Sponsor"}}),t._v(" "),n("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.form.desc,callback:function(e){t.$set(t.form,"desc",e)},expression:"form.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),n("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:t.formInline}},[n("el-form-item",{attrs:{label:"Approved by"}},[n("el-input",{attrs:{placeholder:"Approved by"},model:{value:t.formInline.user,callback:function(e){t.$set(t.formInline,"user",e)},expression:"formInline.user"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.formInline.region,callback:function(e){t.$set(t.formInline,"region",e)},expression:"formInline.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Query")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{attrs:{size:"small"},model:{value:t.labelPosition,callback:function(e){t.labelPosition=e},expression:"labelPosition"}},[n("el-radio-button",{attrs:{label:"left"}},[t._v("Left")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("Right")]),t._v(" "),n("el-radio-button",{attrs:{label:"top"}},[t._v("Top")])],1),t._v(" "),n("div",{staticStyle:{margin:"20px"}}),t._v(" "),n("el-form",{attrs:{"label-position":t.labelPosition,"label-width":"100px",model:t.formLabelAlign}},[n("el-form-item",{attrs:{label:"Name"}},[n("el-input",{model:{value:t.formLabelAlign.name,callback:function(e){t.$set(t.formLabelAlign,"name",e)},expression:"formLabelAlign.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-input",{model:{value:t.formLabelAlign.region,callback:function(e){t.$set(t.formLabelAlign,"region",e)},expression:"formLabelAlign.region"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form"}},[n("el-input",{model:{value:t.formLabelAlign.type,callback:function(e){t.$set(t.formLabelAlign,"type",e)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,rules:t.rules,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[n("el-input",{model:{value:t.ruleForm.name,callback:function(e){t.$set(t.ruleForm,"name",e)},expression:"ruleForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[n("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.ruleForm.region,callback:function(e){t.$set(t.ruleForm,"region",e)},expression:"ruleForm.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time",required:""}},[n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date1"}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.ruleForm.date1,callback:function(e){t.$set(t.ruleForm,"date1",e)},expression:"ruleForm.date1"}})],1)],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date2"}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.ruleForm.date2,callback:function(e){t.$set(t.ruleForm,"date2",e)},expression:"ruleForm.date2"}})],1)],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[n("el-switch",{model:{value:t.ruleForm.delivery,callback:function(e){t.$set(t.ruleForm,"delivery",e)},expression:"ruleForm.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[n("el-checkbox-group",{model:{value:t.ruleForm.type,callback:function(e){t.$set(t.ruleForm,"type",e)},expression:"ruleForm.type"}},[n("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[n("el-radio-group",{model:{value:t.ruleForm.resource,callback:function(e){t.$set(t.ruleForm,"resource",e)},expression:"ruleForm.resource"}},[n("el-radio",{attrs:{label:"Sponsorship"}}),t._v(" "),n("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.ruleForm.desc,callback:function(e){t.$set(t.ruleForm,"desc",e)},expression:"ruleForm.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("Create")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,"status-icon":"",rules:t.rules,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Password",prop:"pass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm.pass,callback:function(e){t.$set(t.ruleForm,"pass",e)},expression:"ruleForm.pass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm.checkPass,callback:function(e){t.$set(t.ruleForm,"checkPass",e)},expression:"ruleForm.checkPass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Age",prop:"age"}},[n("el-input",{model:{value:t.ruleForm.age,callback:function(e){t.$set(t.ruleForm,"age",t._n(e))},expression:"ruleForm.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("Submit")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]},{data:function(){var a=this;return{ruleForm:{pass:"",checkPass:"",age:""},rules:{pass:[{validator:function(e,t,n){""===t?n(new Error("Please input the password")):(""!==a.ruleForm.checkPass&&a.$refs.ruleForm.validateField("checkPass"),n())},trigger:"blur"}],checkPass:[{validator:function(e,t,n){""===t?n(new Error("Please input the password again")):t!==a.ruleForm.pass?n(new Error("Two inputs don't match!")):n()},trigger:"blur"}],age:[{validator:function(e,t,n){if(!t)return n(new Error("Please input the age"));setTimeout(function(){Number.isInteger(t)?t<18?n(new Error("Age must be greater than 18")):n():n(new Error("Please input digits"))},1e3)},trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}}),"element-demo5":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:n.dynamicValidateForm,"label-width":"120px"}},[a("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Please input email address",trigger:"blur"},{type:"email",message:"Please input correct email address",trigger:["blur","change"]}]}},[a("el-input",{model:{value:n.dynamicValidateForm.email,callback:function(e){n.$set(n.dynamicValidateForm,"email",e)},expression:"dynamicValidateForm.email"}})],1),n._v(" "),n._l(n.dynamicValidateForm.domains,function(t,e){return a("el-form-item",{key:t.key,attrs:{label:"Domain"+e,prop:"domains."+e+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(e){n.$set(t,"value",e)},expression:"domain.value"}}),a("el-button",{on:{click:function(e){e.preventDefault(),n.removeDomain(t)}}},[n._v("Delete")])],1)}),n._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){n.submitForm("dynamicValidateForm")}}},[n._v("Submit")]),n._v(" "),a("el-button",{on:{click:n.addDomain}},[n._v("New domain")]),n._v(" "),a("el-button",{on:{click:function(e){n.resetForm("dynamicValidateForm")}}},[n._v("Reset")])],1)],2)],1)},staticRenderFns:[]},{data:function(){return{dynamicValidateForm:{domains:[{key:1,value:""}],email:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()},removeDomain:function(e){var t=this.dynamicValidateForm.domains.indexOf(e);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}}),"element-demo6":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:t.numberValidateForm,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[n("el-input",{attrs:{type:"age",autocomplete:"off"},model:{value:t.numberValidateForm.age,callback:function(e){t.$set(t.numberValidateForm,"age",t._n(e))},expression:"numberValidateForm.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("numberValidateForm")}}},[t._v("Submit")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("numberValidateForm")}}},[t._v("Reset")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{numberValidateForm:{age:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}}),"element-demo7":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.sizeForm,"label-width":"120px",size:"mini"}},[n("el-form-item",{attrs:{label:"Activity name"}},[n("el-input",{model:{value:t.sizeForm.name,callback:function(e){t.$set(t.sizeForm,"name",e)},expression:"sizeForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.sizeForm.region,callback:function(e){t.$set(t.sizeForm,"region",e)},expression:"sizeForm.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:t.sizeForm.date1,callback:function(e){t.$set(t.sizeForm,"date1",e)},expression:"sizeForm.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.sizeForm.date2,callback:function(e){t.$set(t.sizeForm,"date2",e)},expression:"sizeForm.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type"}},[n("el-checkbox-group",{model:{value:t.sizeForm.type,callback:function(e){t.$set(t.sizeForm,"type",e)},expression:"sizeForm.type"}},[n("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.sizeForm.resource,callback:function(e){t.$set(t.sizeForm,"resource",e)},expression:"sizeForm.resource"}},[n("el-radio",{attrs:{border:"",label:"Sponsor"}}),t._v(" "),n("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{size:"large"}},[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Create")]),t._v(" "),n("el-button",[t._v("Cancel")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("In each "),n("code",[e._v("form")]),e._v(" component, you need a "),n("code",[e._v("form-item")]),e._v(" field to be the container of your input item.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="form" label-width="120px">\n <el-form-item label="Activity name">\n <el-input v-model="form.name"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone">\n <el-select v-model="form.region" placeholder="please select your zone">\n <el-option label="Zone one" value="shanghai"></el-option>\n <el-option label="Zone two" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label="Activity time">\n <el-col :span="11">\n <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>\n </el-col>\n <el-col class="line" :span="2">-</el-col>\n <el-col :span="11">\n <el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>\n </el-col>\n </el-form-item>\n <el-form-item label="Instant delivery">\n <el-switch v-model="form.delivery"></el-switch>\n </el-form-item>\n <el-form-item label="Activity type">\n <el-checkbox-group v-model="form.type">\n <el-checkbox label="Online activities" name="type"></el-checkbox>\n <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n <el-checkbox label="Offline activities" name="type"></el-checkbox>\n <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label="Resources">\n <el-radio-group v-model="form.resource">\n <el-radio label="Sponsor"></el-radio>\n <el-radio label="Venue"></el-radio>\n </el-radio-group>\n </el-form-item>\n <el-form-item label="Activity form">\n <el-input type="textarea" v-model="form.desc"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="onSubmit">Create</el-button>\n <el-button>Cancel</el-button>\n </el-form-item>\n</el-form>\n<script>\n export default {\n data() {\n return {\n form: {\n name: \'\',\n region: \'\',\n date1: \'\',\n date2: \'\',\n delivery: false,\n type: [],\n resource: \'\',\n desc: \'\'\n }\n }\n },\n methods: {\n onSubmit() {\n console.log(\'submit!\');\n }\n }\n }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("p",[e._v("When the vertical space is limited and the form is relatively simple, you can put it in one line.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("inline")]),e._v(" attribute to "),n("code",[e._v("true")]),e._v(" and the form will be inline.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :inline="true" :model="formInline" class="demo-form-inline">\n <el-form-item label="Approved by">\n <el-input v-model="formInline.user" placeholder="Approved by"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone">\n <el-select v-model="formInline.region" placeholder="Activity zone">\n <el-option label="Zone one" value="shanghai"></el-option>\n <el-option label="Zone two" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="onSubmit">Query</el-button>\n </el-form-item>\n</el-form>\n<script>\n export default {\n data() {\n return {\n formInline: {\n user: \'\',\n region: \'\'\n }\n }\n },\n methods: {\n onSubmit() {\n console.log(\'submit!\');\n }\n }\n }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Depending on your design, there are several different ways to align your label element.")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("label-position")]),e._v(" attribute decides how labels align, it can be "),n("code",[e._v("top")]),e._v(" or "),n("code",[e._v("left")]),e._v(". When set to "),n("code",[e._v("top")]),e._v(", labels will be placed at the top of the form field.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="labelPosition" size="small">\n <el-radio-button label="left">Left</el-radio-button>\n <el-radio-button label="right">Right</el-radio-button>\n <el-radio-button label="top">Top</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">\n <el-form-item label="Name">\n <el-input v-model="formLabelAlign.name"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone">\n <el-input v-model="formLabelAlign.region"></el-input>\n </el-form-item>\n <el-form-item label="Activity form">\n <el-input v-model="formLabelAlign.type"></el-input>\n </el-form-item>\n</el-form>\n<script>\n export default {\n data() {\n return {\n labelPosition: \'right\',\n formLabelAlign: {\n name: \'\',\n region: \'\',\n type: \'\'\n }\n };\n }\n }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("Form component allows you to verify your data, helping you find and correct errors.")]),n("demo-block",[n("div",[n("p",[e._v("Just add the "),n("code",[e._v("rules")]),e._v(" attribute for "),n("code",[e._v("Form")]),e._v(" component, pass validation rules, and set "),n("code",[e._v("prop")]),e._v(" attribute for "),n("code",[e._v("Form-Item")]),e._v(" as a specific key that needs to be validated. See more information at "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n <el-form-item label="Activity name" prop="name">\n <el-input v-model="ruleForm.name"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone" prop="region">\n <el-select v-model="ruleForm.region" placeholder="Activity zone">\n <el-option label="Zone one" value="shanghai"></el-option>\n <el-option label="Zone two" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label="Activity time" required>\n <el-col :span="11">\n <el-form-item prop="date1">\n <el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n </el-form-item>\n </el-col>\n <el-col class="line" :span="2">-</el-col>\n <el-col :span="11">\n <el-form-item prop="date2">\n <el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n </el-form-item>\n </el-col>\n </el-form-item>\n <el-form-item label="Instant delivery" prop="delivery">\n <el-switch v-model="ruleForm.delivery"></el-switch>\n </el-form-item>\n <el-form-item label="Activity type" prop="type">\n <el-checkbox-group v-model="ruleForm.type">\n <el-checkbox label="Online activities" name="type"></el-checkbox>\n <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n <el-checkbox label="Offline activities" name="type"></el-checkbox>\n <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label="Resources" prop="resource">\n <el-radio-group v-model="ruleForm.resource">\n <el-radio label="Sponsorship"></el-radio>\n <el-radio label="Venue"></el-radio>\n </el-radio-group>\n </el-form-item>\n <el-form-item label="Activity form" prop="desc">\n <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'ruleForm\')">Create</el-button>\n <el-button @click="resetForm(\'ruleForm\')">Reset</el-button>\n </el-form-item>\n</el-form>\n<script>\n export default {\n data() {\n return {\n ruleForm: {\n name: \'\',\n region: \'\',\n date1: \'\',\n date2: \'\',\n delivery: false,\n type: [],\n resource: \'\',\n desc: \'\'\n },\n rules: {\n name: [\n { required: true, message: \'Please input Activity name\', trigger: \'blur\' },\n { min: 3, max: 5, message: \'Length should be 3 to 5\', trigger: \'blur\' }\n ],\n region: [\n { required: true, message: \'Please select Activity zone\', trigger: \'change\' }\n ],\n date1: [\n { type: \'date\', required: true, message: \'Please pick a date\', trigger: \'change\' }\n ],\n date2: [\n { type: \'date\', required: true, message: \'Please pick a time\', trigger: \'change\' }\n ],\n type: [\n { type: \'array\', required: true, message: \'Please select at least one activity type\', trigger: \'change\' }\n ],\n resource: [\n { required: true, message: \'Please select activity resource\', trigger: \'change\' }\n ],\n desc: [\n { required: true, message: \'Please input activity form\', trigger: \'blur\' }\n ]\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert(\'submit!\');\n } else {\n console.log(\'error submit!!\');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n<\/script>\n')])])])],2),e._m(8),n("p",[e._v("This example shows how to customize your own validation rules to finish a two-factor password verification.")]),n("demo-block",[n("div",[n("p",[e._v("Here we use "),n("code",[e._v("status-icon")]),e._v(" to reflect validation result as an icon.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n <el-form-item label="Password" prop="pass">\n <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>\n </el-form-item>\n <el-form-item label="Confirm" prop="checkPass">\n <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>\n </el-form-item>\n <el-form-item label="Age" prop="age">\n <el-input v-model.number="ruleForm.age"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'ruleForm\')">Submit</el-button>\n <el-button @click="resetForm(\'ruleForm\')">Reset</el-button>\n </el-form-item>\n</el-form>\n<script>\n export default {\n data() {\n var checkAge = (rule, value, callback) => {\n if (!value) {\n return callback(new Error(\'Please input the age\'));\n }\n setTimeout(() => {\n if (!Number.isInteger(value)) {\n callback(new Error(\'Please input digits\'));\n } else {\n if (value < 18) {\n callback(new Error(\'Age must be greater than 18\'));\n } else {\n callback();\n }\n }\n }, 1000);\n };\n var validatePass = (rule, value, callback) => {\n if (value === \'\') {\n callback(new Error(\'Please input the password\'));\n } else {\n if (this.ruleForm.checkPass !== \'\') {\n this.$refs.ruleForm.validateField(\'checkPass\');\n }\n callback();\n }\n };\n var validatePass2 = (rule, value, callback) => {\n if (value === \'\') {\n callback(new Error(\'Please input the password again\'));\n } else if (value !== this.ruleForm.pass) {\n callback(new Error(\'Two inputs don\\\'t match!\'));\n } else {\n callback();\n }\n };\n return {\n ruleForm: {\n pass: \'\',\n checkPass: \'\',\n age: \'\'\n },\n rules: {\n pass: [\n { validator: validatePass, trigger: \'blur\' }\n ],\n checkPass: [\n { validator: validatePass2, trigger: \'blur\' }\n ],\n age: [\n { validator: checkAge, trigger: \'blur\' }\n ]\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert(\'submit!\');\n } else {\n console.log(\'error submit!!\');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("div",[n("p",[e._v("In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">\n <el-form-item\n prop="email"\n label="Email"\n :rules="[\n { required: true, message: \'Please input email address\', trigger: \'blur\' },\n { type: \'email\', message: \'Please input correct email address\', trigger: [\'blur\', \'change\'] }\n ]"\n >\n <el-input v-model="dynamicValidateForm.email"></el-input>\n </el-form-item>\n <el-form-item\n v-for="(domain, index) in dynamicValidateForm.domains"\n :label="\'Domain\' + index"\n :key="domain.key"\n :prop="\'domains.\' + index + \'.value\'"\n :rules="{\n required: true, message: \'domain can not be null\', trigger: \'blur\'\n }"\n >\n <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">Submit</el-button>\n <el-button @click="addDomain">New domain</el-button>\n <el-button @click="resetForm(\'dynamicValidateForm\')">Reset</el-button>\n </el-form-item>\n</el-form>\n<script>\n export default {\n data() {\n return {\n dynamicValidateForm: {\n domains: [{\n key: 1,\n value: \'\'\n }],\n email: \'\'\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert(\'submit!\');\n } else {\n console.log(\'error submit!!\');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n },\n removeDomain(item) {\n var index = this.dynamicValidateForm.domains.indexOf(item);\n if (index !== -1) {\n this.dynamicValidateForm.domains.splice(index, 1);\n }\n },\n addDomain() {\n this.dynamicValidateForm.domains.push({\n key: Date.now(),\n value: \'\'\n });\n }\n }\n }\n<\/script>\n')])])])],2),e._m(11),n("demo-block",[n("div",[n("p",[e._v("Number Validate need a "),n("code",[e._v(".number")]),e._v(" modifier added on the input "),n("code",[e._v("v-model")]),e._v(" binding，it's used to transform the string value to the number which is provided by Vuejs.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n <el-form-item\n label="age"\n prop="age"\n :rules="[\n { required: true, message: \'age is required\'},\n { type: \'number\', message: \'age must be a number\'}\n ]"\n >\n <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="submitForm(\'numberValidateForm\')">Submit</el-button>\n <el-button @click="resetForm(\'numberValidateForm\')">Reset</el-button>\n </el-form-item>\n</el-form>\n<script>\n export default {\n data() {\n return {\n numberValidateForm: {\n age: \'\'\n }\n };\n },\n methods: {\n submitForm(formName) {\n this.$refs[formName].validate((valid) => {\n if (valid) {\n alert(\'submit!\');\n } else {\n console.log(\'error submit!!\');\n return false;\n }\n });\n },\n resetForm(formName) {\n this.$refs[formName].resetFields();\n }\n }\n }\n<\/script>\n')])])])],2),e._m(12),e._m(13),e._m(14),n("demo-block",[n("div",[n("p",[e._v("Still you can fine tune each component's "),n("code",[e._v("size")]),e._v(" if you don't want that component to inherit its size from From or FormIten.")])]),n("template",{slot:"source"},[n("element-demo7")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">\n <el-form-item label="Activity name">\n <el-input v-model="sizeForm.name"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone">\n <el-select v-model="sizeForm.region" placeholder="please select your zone">\n <el-option label="Zone one" value="shanghai"></el-option>\n <el-option label="Zone two" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label="Activity time">\n <el-col :span="11">\n <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n </el-col>\n <el-col class="line" :span="2">-</el-col>\n <el-col :span="11">\n <el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n </el-col>\n </el-form-item>\n <el-form-item label="Activity type">\n <el-checkbox-group v-model="sizeForm.type">\n <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>\n <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label="Resources">\n <el-radio-group v-model="sizeForm.resource" size="medium">\n <el-radio border label="Sponsor"></el-radio>\n <el-radio border label="Venue"></el-radio>\n </el-radio-group>\n </el-form-item>\n <el-form-item size="large">\n <el-button type="primary" @click="onSubmit">Create</el-button>\n <el-button>Cancel</el-button>\n </el-form-item>\n</el-form>\n\n<script>\n export default {\n data() {\n return {\n sizeForm: {\n name: \'\',\n region: \'\',\n date1: \'\',\n date2: \'\',\n delivery: false,\n type: [],\n resource: \'\',\n desc: \'\'\n }\n };\n },\n methods: {\n onSubmit() {\n console.log(\'submit!\');\n }\n }\n };\n<\/script>\n')])])])],2),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Form consists of "),n("code",[e._v("input")]),e._v(", "),n("code",[e._v("radio")]),e._v(", "),n("code",[e._v("select")]),e._v(", "),n("code",[e._v("checkbox")]),e._v(" and so on. With form, you can collect, verify and submit data.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("It includes all kinds of input items, such as "),n("code",[e._v("input")]),e._v(", "),n("code",[e._v("select")]),e._v(", "),n("code",[e._v("radio")]),e._v(" and "),n("code",[e._v("checkbox")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[n("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[e._v("W3C")]),e._v(" regulates that")]),n("blockquote",[n("p",[n("i",[e._v("When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.")])])]),n("p",[e._v("To prevent this behavior, you can add "),n("code",[e._v("@submit.native.prevent")]),e._v(" on "),n("code",[e._v("<el-form>")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"inline-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inline-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Inline form")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alignment"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignment")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-validation-rules"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-validation-rules","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom validation rules")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("Custom validate callback function must be called. See more advanced usage at "),t("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[this._v("async-validator")]),this._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"delete-or-add-form-items-dynamically"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#delete-or-add-form-items-dynamically","aria-hidden":"true"}},[this._v("¶")]),this._v(" Delete or add form items dynamically")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"number-validate"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#number-validate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Number Validate")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("When an "),n("code",[e._v("el-form-item")]),e._v(" is nested in another "),n("code",[e._v("el-form-item")]),e._v(", its label width will be "),n("code",[e._v("0")]),e._v(". You can set "),n("code",[e._v("label-width")]),e._v(" on that "),n("code",[e._v("el-form-item")]),e._v(" if needed.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"size-control"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#size-control","aria-hidden":"true"}},[this._v("¶")]),this._v(" Size control")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("All components in a Form inherit their "),t("code",[this._v("size")]),this._v(" attribute from that Form. Similarly, FormItem also has a "),t("code",[this._v("size")]),this._v(" attribute.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("model")]),n("td",[e._v("data of form component")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("validation rules of form")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inline")]),n("td",[e._v("whether the form is inline")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label-position")]),n("td",[e._v("position of label. If set to 'left' or 'right', "),n("code",[e._v("label-width")]),e._v(" prop is also required")]),n("td",[e._v("string")]),n("td",[e._v("left / right / top")]),n("td",[e._v("right")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("width of label, e.g. '50px'. All its direct child form items will inherit this value. Width "),n("code",[e._v("auto")]),e._v(" is supported.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-suffix")]),n("td",[e._v("suffix of the label")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-required-asterisk")]),n("td",[e._v("whether required fields should have a red asterisk (star) beside their labels")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("whether to show the error message")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("whether to display the error message inline with the form item")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status-icon")]),n("td",[e._v("whether to display an icon indicating the validation result")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("validate-on-rule-change")]),n("td",[e._v("whether to trigger validation when the "),n("code",[e._v("rules")]),e._v(" prop is changed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("control the size of components in this form")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether to disabled all components in this form. If set to true, it cannot be overridden by its inner components' "),n("code",[e._v("disabled")]),e._v(" prop")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("validate the whole form. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Returns a promise if callback is omitted")]),n("td",[e._v("Function(callback: Function(boolean, object))")])]),n("tr",[n("td",[e._v("validateField")]),n("td",[e._v("validate one or several form items")]),n("td",[e._v("Function(props: string | array, callback: Function(errorMessage: string))")])]),n("tr",[n("td",[e._v("resetFields")]),n("td",[e._v("reset all the fields and remove validation result")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("clear validation message for certain fields. The parameter is prop name or an array of prop names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared")]),n("td",[e._v("Function(props: string | array)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("validate")]),t("td",[this._v("triggers after a form item is validated")]),t("td",[this._v("prop name of the form item being validated, whether validation is passed and the error message if not")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("prop")]),n("td",[e._v("a key of "),n("code",[e._v("model")]),e._v(". In the use of validate and resetFields method, the attribute is required")]),n("td",[e._v("string")]),n("td",[e._v("keys of model that passed to "),n("code",[e._v("form")])]),n("td")]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("label")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("width of label, e.g. '50px'. Width "),n("code",[e._v("auto")]),e._v(" is supported.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("required")]),n("td",[e._v("whether the field is required or not, will be determined by validation rules if omitted")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("validation rules of form")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("field error message, set its value and the field will validate error and show this message immediately")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("whether to show the error message")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("inline style validate message")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("control the size of components in this form-item")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("content of Form Item")])]),t("tr",[t("td",[this._v("label")]),t("td",[this._v("content of label")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-scoped-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Scoped Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("error")]),t("td",[this._v("Custom content to display validation message. The scope parameter is { error }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"form-item-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form-Item Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("resetField")]),n("td",[e._v("reset current field and remove validation result")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("remove validation status of the field")]),n("td",[e._v("-")])])])])}],!1,null,null,null);t.default=r.exports},552:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("el-button",{attrs:{type:"primary"}},[e._v("\n Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",[e._v("Action 5")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:e.handleClick}},[e._v("\n Dropdown List\n "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]},{methods:{handleClick:function(){alert("button click")}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"block-col-2"},[n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("hover to trigger")]),e._v(" "),n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("click to trigger")]),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check-outline"}},[e._v("Action 5")])],1)],1)],1)],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"hide-on-click":!1}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{on:{command:e.handleCommand}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n Dropdown List"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{command:"a"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"b"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"c"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"d",disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"e",divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]},{methods:{handleCommand:function(e){this.$message("click on item "+e)}}}),"element-demo5":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[e._v("\n Default\n "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[e._v("\n Medium\n "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[e._v("\n Small\n "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[e._v("\n Mini\n "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1)],1)},staticRenderFns:[]},{})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Toggleable menu for displaying lists of links and actions.")]),e._m(1),n("p",[e._v("Hover on the dropdown menu to unfold it for more actions.")]),n("demo-block",[n("div",[n("p",[e._v("The triggering element is rendered by the default "),n("code",[e._v("slot")]),e._v(", and the dropdown part is rendered by the "),n("code",[e._v("slot")]),e._v(" named "),n("code",[e._v("dropdown")]),e._v(". By default, dropdown list shows when you hover on the triggering element without having to click it.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item disabled>Action 4</el-dropdown-item>\n <el-dropdown-item divided>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n</style>\n\n')])])])],2),e._m(2),n("p",[e._v("Use the button to trigger the dropdown list.")]),n("demo-block",[n("div",[n("p",[e._v("Use "),n("code",[e._v("split-button")]),e._v(" to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class "),n("code",[e._v("divider")]),e._v(" to item four.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n <el-button type="primary">\n Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n </el-button>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n <el-dropdown-item>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n Dropdown List\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n <el-dropdown-item>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n .el-dropdown {\n vertical-align: top;\n }\n .el-dropdown + .el-dropdown {\n margin-left: 15px;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n</style>\n\n<script>\n export default {\n methods: {\n handleClick() {\n alert(\'button click\');\n }\n }\n }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Click the triggering element or hover on it.")]),n("demo-block",[n("div",[n("p",[e._v("Use the attribute "),n("code",[e._v("trigger")]),e._v(". By default, it is "),n("code",[e._v("hover")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="block-col-2">\n <el-col :span="12">\n <span class="demonstration">hover to trigger</span>\n <el-dropdown>\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n </el-dropdown-menu>\n </el-dropdown>\n </el-col>\n <el-col :span="12">\n <span class="demonstration">click to trigger</span>\n <el-dropdown trigger="click">\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n <el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>\n </el-dropdown-menu>\n </el-dropdown>\n </el-col>\n</el-row>\n\n<style>\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n .demonstration {\n display: block;\n color: #8492a6;\n font-size: 14px;\n margin-bottom: 20px;\n }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown :hide-on-click="false">\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item disabled>Action 4</el-dropdown-item>\n <el-dropdown-item divided>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n</style>\n')])])])],2),e._m(6),n("p",[e._v("Clicking each dropdown item fires an event whose parameter is assigned by each item.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown @command="handleCommand">\n <span class="el-dropdown-link">\n Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>\n </span>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item command="a">Action 1</el-dropdown-item>\n <el-dropdown-item command="b">Action 2</el-dropdown-item>\n <el-dropdown-item command="c">Action 3</el-dropdown-item>\n <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>\n <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n .el-dropdown-link {\n cursor: pointer;\n color: #409EFF;\n }\n .el-icon-arrow-down {\n font-size: 12px;\n }\n</style>\n\n<script>\n export default {\n methods: {\n handleCommand(command) {\n this.$message(\'click on item \' + command);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.")]),n("demo-block",[n("div",[n("p",[e._v("Use attribute "),n("code",[e._v("size")]),e._v(" to set additional sizes with "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" or "),n("code",[e._v("mini")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown split-button type="primary">\n Default\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n Medium\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n Small\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n Mini\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"triggering-element"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#triggering-element","aria-hidden":"true"}},[this._v("¶")]),this._v(" Triggering element")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"how-to-trigger"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-to-trigger","aria-hidden":"true"}},[this._v("¶")]),this._v(" How to trigger")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-hiding-behavior"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-hiding-behavior","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu hiding behavior")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use "),t("code",[this._v("hide-on-click")]),this._v(" to define if menu closes on clicking.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"command-event"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#command-event","aria-hidden":"true"}},[this._v("¶")]),this._v(" Command event")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("menu button type, refer to "),n("code",[e._v("Button")]),e._v(" Component, only works when "),n("code",[e._v("split-button")]),e._v(" is true")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("menu size, also works on the split button")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("split-button")]),n("td",[e._v("whether a button group is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("placement of pop menu")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),n("td",[e._v("bottom-end")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("how to trigger")]),n("td",[e._v("string")]),n("td",[e._v("hover/click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("hide-on-click")]),n("td",[e._v("whether to hide menu after clicking menu-item")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("Delay time before show a dropdown (only works when trigger is "),n("code",[e._v("hover")]),e._v(")")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("250")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("Delay time before hide a dropdown (only works when trigger is "),n("code",[e._v("hover")]),e._v(")")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("150")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"}},[e._v("tabindex")]),e._v(" of Dropdown")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("content of Dropdown. Notice: Must be a valid html dom element (ex. "),n("code",[e._v("<span>, <button> etc.")]),e._v(") or "),n("code",[e._v("el-component")]),e._v(", to attach the trigger listener")])]),n("tr",[n("td",[e._v("dropdown")]),n("td",[e._v("content of the Dropdown Menu, usually a "),n("code",[e._v("<el-dropdown-menu>")]),e._v(" element")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("if "),n("code",[e._v("split-button")]),e._v(" is "),n("code",[e._v("true")]),e._v(", triggers when left button is clicked")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("command")]),n("td",[e._v("triggers when a dropdown item is clicked")]),n("td",[e._v("the command dispatched from the dropdown item")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("triggers when the dropdown appears/disappears")]),n("td",[e._v("true when it appears, and false otherwise")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Menu Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("command")]),n("td",[e._v("a command to be dispatched to Dropdown's "),n("code",[e._v("command")]),e._v(" callback")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the item is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("divided")]),n("td",[e._v("whether a divider is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon class name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=r.exports},555:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("div",[t("span",[this._v("I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.")]),this._v(" "),t("el-divider"),this._v(" "),t("span",[this._v("There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.")])],1)]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("span",[e._v("What you are you do not see, what you see is your shadow. ")]),e._v(" "),n("el-divider",{attrs:{"content-position":"left"}},[e._v("Rabindranath Tagore")]),e._v(" "),n("span",[e._v("I cannot choose the best. The best chooses me.")]),e._v(" "),n("el-divider",[n("i",{staticClass:"el-icon-star-on"})]),e._v(" "),n("span",[e._v("My wishes are fools, they shout across thy song, my Master. Let me but listen.")]),e._v(" "),n("el-divider",{attrs:{"content-position":"right"}},[e._v("Rabindranath Tagore")])],1)]],2)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("div",[t("span",[this._v("Rain")]),this._v(" "),t("el-divider",{attrs:{direction:"vertical"}}),this._v(" "),t("span",[this._v("Home")]),this._v(" "),t("el-divider",{attrs:{direction:"vertical"}}),this._v(" "),t("span",[this._v("Grass")])],1)]],2)},staticRenderFns:[]},{})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("The dividing line that separates the content.")]),e._m(1),n("p",[e._v("Divide the text of different paragraphs.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <div>\n <span>I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.</span>\n <el-divider></el-divider>\n <span>There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.</span>\n </div>\n</template>\n")])])])],2),e._m(2),n("p",[e._v("You can customize the content on the divider line.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <span>What you are you do not see, what you see is your shadow. </span>\n <el-divider content-position="left">Rabindranath Tagore</el-divider>\n <span>I cannot choose the best. The best chooses me.</span>\n <el-divider><i class="el-icon-star-on"></i></el-divider>\n <span>My wishes are fools, they shout across thy song, my Master. Let me but listen.</span>\n <el-divider content-position="right">Rabindranath Tagore</el-divider>\n </div>\n</template>\n')])])])],2),e._m(3),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <span>Rain</span>\n <el-divider direction="vertical"></el-divider>\n <span>Home</span>\n <el-divider direction="vertical"></el-divider>\n <span>Grass</span>\n </div>\n</template>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"divider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#divider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Divider")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"vertical-divider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vertical-divider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Vertical divider")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"divider-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#divider-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Divider Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("direction")]),n("td",[e._v("Set divider's direction")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("horizontal")])]),n("tr",[n("td",[e._v("content-position")]),n("td",[e._v("customize the content on the divider line")]),n("td",[e._v("String")]),n("td",[e._v("left / right / center")]),n("td",[e._v("center")])])])])}],!1,null,null,null);t.default=r.exports},557:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogVisible=!0}}},[t._v("click to open the Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Tips",visible:t.dialogVisible,width:"30%","before-close":t.handleClose},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("span",[t._v("This is a message")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogVisible=!1}}},[t._v("Confirm")])],1)])],1)},staticRenderFns:[]},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(t){this.$confirm("Are you sure to close this dialog?").then(function(e){t()}).catch(function(e){})}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogTableVisible=!0}}},[t._v("open a Table nested Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogTableVisible},on:{"update:visible":function(e){t.dialogTableVisible=e}}},[n("el-table",{attrs:{data:t.gridData}},[n("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),t._v(" "),n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogFormVisible=!0}}},[t._v("open a Form nested Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Shipping address",visible:t.dialogFormVisible},on:{"update:visible":function(e){t.dialogFormVisible=e}}},[n("el-form",{attrs:{model:t.form}},[n("el-form-item",{attrs:{label:"Promotion name","label-width":t.formLabelWidth}},[n("el-input",{attrs:{autocomplete:"off"},model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Zones","label-width":t.formLabelWidth}},[n("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Confirm")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518, Jinshajiang Road, Putuo District"}],dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.outerVisible=!0}}},[t._v("open the outer Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Outer Dialog",visible:t.outerVisible},on:{"update:visible":function(e){t.outerVisible=e}}},[n("el-dialog",{attrs:{width:"30%",title:"Inner Dialog",visible:t.innerVisible,"append-to-body":""},on:{"update:visible":function(e){t.innerVisible=e}}}),t._v(" "),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.outerVisible=!1}}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.innerVisible=!0}}},[t._v("open the inner Dialog")])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{outerVisible:!1,innerVisible:!1}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.centerDialogVisible=!0}}},[t._v("Click to open the Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"Warning",visible:t.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(e){t.centerDialogVisible=e}}},[n("span",[t._v("It should be noted that the content will not be aligned in center by default")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Confirm")])],1)])],1)},staticRenderFns:[]},{data:function(){return{centerDialogVisible:!1}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Informs users while preserving the current page state.")]),e._m(1),n("p",[e._v("Dialog pops up a dialog box, and it's quite customizable.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("visible")]),e._v(" attribute with a "),n("code",[e._v("Boolean")]),e._v(", and Dialog shows when it is "),n("code",[e._v("true")]),e._v(". The Dialog has two parts: "),n("code",[e._v("body")]),e._v(" and "),n("code",[e._v("footer")]),e._v(", and the latter requires a "),n("code",[e._v("slot")]),e._v(" named "),n("code",[e._v("footer")]),e._v(". The optional "),n("code",[e._v("title")]),e._v(" attribute (empty by default) is for defining a title. Finally, this example demonstrates how "),n("code",[e._v("before-close")]),e._v(" is used.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>\n\n<el-dialog\n title="Tips"\n :visible.sync="dialogVisible"\n width="30%"\n :before-close="handleClose">\n <span>This is a message</span>\n <span slot="footer" class="dialog-footer">\n <el-button @click="dialogVisible = false">Cancel</el-button>\n <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>\n </span>\n</el-dialog>\n\n<script>\n export default {\n data() {\n return {\n dialogVisible: false\n };\n },\n methods: {\n handleClose(done) {\n this.$confirm(\'Are you sure to close this dialog?\')\n .then(_ => {\n done();\n })\n .catch(_ => {});\n }\n }\n };\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("p",[e._v("The content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">\n <el-table :data="gridData">\n <el-table-column property="date" label="Date" width="150"></el-table-column>\n <el-table-column property="name" label="Name" width="200"></el-table-column>\n <el-table-column property="address" label="Address"></el-table-column>\n </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>\n\n<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">\n <el-form :model="form">\n <el-form-item label="Promotion name" :label-width="formLabelWidth">\n <el-input v-model="form.name" autocomplete="off"></el-input>\n </el-form-item>\n <el-form-item label="Zones" :label-width="formLabelWidth">\n <el-select v-model="form.region" placeholder="Please select a zone">\n <el-option label="Zone No.1" value="shanghai"></el-option>\n <el-option label="Zone No.2" value="beijing"></el-option>\n </el-select>\n </el-form-item>\n </el-form>\n <span slot="footer" class="dialog-footer">\n <el-button @click="dialogFormVisible = false">Cancel</el-button>\n <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>\n </span>\n</el-dialog>\n\n<script>\n export default {\n data() {\n return {\n gridData: [{\n date: \'2016-05-02\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }, {\n date: \'2016-05-04\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }, {\n date: \'2016-05-01\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }, {\n date: \'2016-05-03\',\n name: \'John Smith\',\n address: \'No.1518, Jinshajiang Road, Putuo District\'\n }],\n dialogTableVisible: false,\n dialogFormVisible: false,\n form: {\n name: \'\',\n region: \'\',\n date1: \'\',\n date2: \'\',\n delivery: false,\n type: [],\n resource: \'\',\n desc: \'\'\n },\n formLabelWidth: \'120px\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Normally we do not recommend using nested Dialog. If you need multiple Dialogs rendered on the page, you can simply flat them so that they're siblings to each other. If you must nest a Dialog inside another Dialog, set "),n("code",[e._v("append-to-body")]),e._v(" of the nested Dialog to true, and it will append to body instead of its parent node, so both Dialogs can be correctly rendered.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>\n \n <el-dialog title="Outer Dialog" :visible.sync="outerVisible">\n <el-dialog\n width="30%"\n title="Inner Dialog"\n :visible.sync="innerVisible"\n append-to-body>\n </el-dialog>\n <div slot="footer" class="dialog-footer">\n <el-button @click="outerVisible = false">Cancel</el-button>\n <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>\n </div>\n </el-dialog>\n</template>\n\n<script>\n export default {\n data() {\n return {\n outerVisible: false,\n innerVisible: false\n };\n }\n }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Dialog's content can be centered.")]),n("demo-block",[n("div",[n("p",[e._v("Setting "),n("code",[e._v("center")]),e._v(" to "),n("code",[e._v("true")]),e._v(" will center dialog's header and footer horizontally. "),n("code",[e._v("center")]),e._v(" only affects Dialog's header and footer. The body of Dialog can be anything, so sometimes it may not look good when centered. You need to write some CSS if you wish to center the body as well.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>\n\n<el-dialog\n title="Warning"\n :visible.sync="centerDialogVisible"\n width="30%"\n center>\n <span>It should be noted that the content will not be aligned in center by default</span>\n <span slot="footer" class="dialog-footer">\n <el-button @click="centerDialogVisible = false">Cancel</el-button>\n <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>\n </span>\n</el-dialog>\n\n<script>\n export default {\n data() {\n return {\n centerDialogVisible: false\n };\n }\n };\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[t("code",[this._v("before-close")]),this._v(" only works when user clicks the close icon or the backdrop. If you have buttons that close the Dialog in the "),t("code",[this._v("footer")]),this._v(" named slot, you can add what you would do with "),t("code",[this._v("before-close")]),this._v(" in the buttons' click event handler.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizations"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizations")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nested-dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nested-dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nested Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("If a Dialog is nested in another Dialog, "),t("code",[this._v("append-to-body")]),this._v(" is required.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centered-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centered-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centered content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using "),t("code",[this._v("ref")]),this._v(", do it in the "),t("code",[this._v("open")]),this._v(" event callback.")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("If the variable bound to "),n("code",[e._v("visible")]),e._v(" is managed in Vuex store, the "),n("code",[e._v(".sync")]),e._v(" can not work properly. In this case, please remove the "),n("code",[e._v(".sync")]),e._v(" modifier, listen to "),n("code",[e._v("open")]),e._v(" and "),n("code",[e._v("close")]),e._v(" events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("visible")]),n("td",[e._v("visibility of Dialog, supports the .sync modifier")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("title of Dialog. Can also be passed with a named slot (see the following table)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("width of Dialog")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("50%")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("whether the Dialog takes up full screen")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("top")]),n("td",[e._v("value for "),n("code",[e._v("margin-top")]),e._v(" of Dialog CSS")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("15vh")])]),n("tr",[n("td",[e._v("modal")]),n("td",[e._v("whether a mask is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("modal-append-to-body")]),n("td",[e._v("whether to append modal to body element. If false, the modal will be appended to Dialog's parent element")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("append-to-body")]),n("td",[e._v("whether to append Dialog itself to body. A nested Dialog should have this attribute set to "),n("code",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lock-scroll")]),n("td",[e._v("whether scroll of body is disabled while Dialog is displayed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("custom-class")]),n("td",[e._v("custom class names for Dialog")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close-on-click-modal")]),n("td",[e._v("whether the Dialog can be closed by clicking the mask")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("close-on-press-escape")]),n("td",[e._v("whether the Dialog can be closed by pressing ESC")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-close")]),n("td",[e._v("whether to show a close button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("before-close")]),n("td",[e._v("callback before Dialog closes, and it will prevent Dialog from closing")]),n("td",[e._v("function(done)，done is used to close the Dialog")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("whether to align the header and footer in center")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("content of Dialog")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("content of the Dialog title")])]),n("tr",[n("td",[e._v("footer")]),n("td",[e._v("content of the Dialog footer")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("triggers when the Dialog opens")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("opened")]),n("td",[e._v("triggers when the Dialog opening animation ends")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("triggers when the Dialog closes")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closed")]),n("td",[e._v("triggers when the Dialog closing animation ends")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=r.exports},560:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":t.pickerOptions},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With default time")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","default-time":"12:00:00"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:"",value3:""}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With shortcuts")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions,"range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date",align:"right"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"Last month",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value1:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value2:""}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Start date time 12:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00"]},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Start date time 12:00:00, end date time 08:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-time":["12:00:00","08:00:00"]},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:"",value2:""}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Select date and time in one picker.")]),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("You can select date and time in one picker at the same time by setting "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("datetime")]),e._v(". The way to use shortcuts is the same as Date Picker.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Default</span>\n <el-date-picker\n v-model="value1"\n type="datetime"\n placeholder="Select date and time">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">With shortcuts</span>\n <el-date-picker\n v-model="value2"\n type="datetime"\n placeholder="Select date and time"\n :picker-options="pickerOptions">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">With default time</span>\n <el-date-picker\n v-model="value3"\n type="datetime"\n placeholder="Select date and time"\n default-time="12:00:00">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n pickerOptions: {\n shortcuts: [{\n text: \'Today\',\n onClick(picker) {\n picker.$emit(\'pick\', new Date());\n }\n }, {\n text: \'Yesterday\',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit(\'pick\', date);\n }\n }, {\n text: \'A week ago\',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit(\'pick\', date);\n }\n }]\n },\n value1: \'\',\n value2: \'\',\n value3: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("You can select date and time range by setting "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("datetimerange")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Default</span>\n <el-date-picker\n v-model="value1"\n type="datetimerange"\n range-separator="To"\n start-placeholder="Start date"\n end-placeholder="End date">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">With shortcuts</span>\n <el-date-picker\n v-model="value2"\n type="datetimerange"\n :picker-options="pickerOptions"\n range-separator="To"\n start-placeholder="Start date"\n end-placeholder="End date"\n align="right">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n pickerOptions: {\n shortcuts: [{\n text: \'Last week\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit(\'pick\', [start, end]);\n }\n }, {\n text: \'Last month\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit(\'pick\', [start, end]);\n }\n }, {\n text: \'Last 3 months\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit(\'pick\', [start, end]);\n }\n }]\n },\n value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n value2: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("When picking date range on the date panel with type "),n("code",[e._v("datetimerange")]),e._v(", "),n("code",[e._v("00:00:00")]),e._v(" will be used as the default time value for start and end date. We can control it with the "),n("code",[e._v("default-time")]),e._v(" attribute. "),n("code",[e._v("default-time")]),e._v(" accepts an array of up to two strings. The first item controls time value of the start date and the second item controls time value of the end date.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Start date time 12:00:00</span>\n <el-date-picker\n v-model="value1"\n type="datetimerange"\n start-placeholder="Start Date"\n end-placeholder="End Date"\n :default-time="[\'12:00:00\']">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>\n <el-date-picker\n v-model="value2"\n type="datetimerange"\n align="right"\n start-placeholder="Start Date"\n end-placeholder="End Date"\n :default-time="[\'12:00:00\', \'08:00:00\']">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value1: \'\',\n value2: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datetimepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on "),t("code",[this._v("pickerOptions")]),this._v(" and other attributes, you can refer to DatePicker and TimePicker.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-and-time"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date and time")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-and-time-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date and time range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-time-value-for-start-date-and-end-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-time-value-for-start-date-and-end-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default time value for start date and end date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("whether DatePicker is read only")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether DatePicker is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("whether the input is editable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder in non-range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("placeholder for the start date in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("placeholder for the end date in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("time-arrow-control")]),n("td",[e._v("whether to pick time using arrow buttons")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of the picker")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/datetime/ week/datetimerange/daterange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("format of the displayed value in the input box")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("yyyy-MM-dd HH:mm:ss")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("alignment")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for DateTimePicker's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("additional options, check the table below")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("range separator")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("optional, default date of the calendar")]),n("td",[e._v("Date")]),n("td",[e._v("anything accepted by "),n("code",[e._v("new Date()")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("the default time value after picking a date")]),n("td",[e._v("non-range: string / range: string[]")]),n("td",[e._v("non-range: a string like "),n("code",[e._v("12:00:00")]),e._v(", range: array of two strings, and the first item is for the start date and second for the end date. "),n("code",[e._v("00:00:00")]),e._v(" will be used if not specified")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("optional, format of binding value. If not specified, the binding value will be a Date object")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("unllink two date-panels in range-picker")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Custom prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Custom clear icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("a { text, onClick } object array to set shortcut options, check the table below")]),n("td",[e._v("object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("first day of week")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("7")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._v(" shortcuts")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("title of the shortcut")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("callback function, triggers when the shortcut is clicked, with the "),n("code",[e._v("vm")]),e._v(" as its parameter. You can change the picker value by emitting the "),n("code",[e._v("pick")]),e._v(" event. Example: "),n("code",[e._v("vm.$emit('pick', new Date())")])]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when user confirms the value")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Method")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("focus the Input component")]),t("td",[this._v("—")])])])])}],!1,null,null,null);t.default=r.exports},563:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Picker with quick options")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":t.pickerOptions},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{disabledDate:function(e){return e.getTime()>Date.now()},shortcuts:[{text:"Today",onClick:function(e){e.$emit("pick",new Date)}},{text:"Yesterday",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"A week ago",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:""}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Week")]),t._v(" "),n("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Month")]),t._v(" "),n("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]),t._v(" "),n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Year")]),t._v(" "),n("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Dates")]),t._v(" "),n("el-date-picker",{attrs:{type:"dates",placeholder:"Pick one or more dates"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)])])},staticRenderFns:[]},{data:function(){return{value1:"",value2:"",value3:"",value4:""}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start date","end-placeholder":"End date","picker-options":t.pickerOptions},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{shortcuts:[{text:"Last week",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"Last month",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"Last 3 months",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value1:"",value2:""}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Default")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With quick options")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange",align:"right","unlink-panels":"","range-separator":"To","start-placeholder":"Start month","end-placeholder":"End month","picker-options":t.pickerOptions},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{shortcuts:[{text:"This month",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"This year",onClick:function(e){var t=new Date,n=new Date((new Date).getFullYear(),0);e.$emit("pick",[n,t])}},{text:"Last 6 months",onClick:function(e){var t=new Date,n=new Date;n.setMonth(n.getMonth()-6),e.$emit("pick",[n,t])}}]},value1:"",value2:""}}}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("date")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a date","default-value":"2010-10-01"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("daterange")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","start-placeholder":"Start Date","end-placeholder":"End Date","default-value":"2010-10-01"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:"",value2:""}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Emits Date object")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value1))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Use value-format")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value2))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Timestamp")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value："+t._s(t.value3))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Pick a Date",format:"yyyy/MM/dd","value-format":"timestamp"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:"",value2:"",value3:""}}}),"element-demo6":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("p",[t._v("Component value："+t._s(t.value))]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","start-placeholder":"Start date","end-placeholder":"End date","default-time":["00:00:00","23:59:59"]},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:""}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Use Date Picker for date input.")]),e._m(1),n("p",[e._v("Basic date picker measured by 'day'.")]),n("demo-block",[n("div",[n("p",[e._v("The measurement is determined by the "),n("code",[e._v("type")]),e._v(" attribute. You can enable quick options by creating a "),n("code",[e._v("picker-options")]),e._v(" object with "),n("code",[e._v("shortcuts")]),e._v(" property. The disabled date is set by "),n("code",[e._v("disabledDate")]),e._v(", which is a function.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Default</span>\n <el-date-picker\n v-model="value1"\n type="date"\n placeholder="Pick a day">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">Picker with quick options</span>\n <el-date-picker\n v-model="value2"\n type="date"\n placeholder="Pick a day"\n :picker-options="pickerOptions">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n pickerOptions: {\n disabledDate(time) {\n return time.getTime() > Date.now();\n },\n shortcuts: [{\n text: \'Today\',\n onClick(picker) {\n picker.$emit(\'pick\', new Date());\n }\n }, {\n text: \'Yesterday\',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit(\'pick\', date);\n }\n }, {\n text: \'A week ago\',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit(\'pick\', date);\n }\n }]\n },\n value1: \'\',\n value2: \'\',\n };\n }\n };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("You can choose week, month, year or multiple dates by extending the standard date picker component.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="container">\n <div class="block">\n <span class="demonstration">Week</span>\n <el-date-picker\n v-model="value1"\n type="week"\n format="Week WW"\n placeholder="Pick a week">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">Month</span>\n <el-date-picker\n v-model="value2"\n type="month"\n placeholder="Pick a month">\n </el-date-picker>\n </div>\n</div>\n<div class="container">\n <div class="block">\n <span class="demonstration">Year</span>\n <el-date-picker\n v-model="value3"\n type="year"\n placeholder="Pick a year">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">Dates</span>\n <el-date-picker\n type="dates"\n v-model="value4"\n placeholder="Pick one or more dates">\n </el-date-picker>\n </div>\n</div>\n\n<script>\n export default {\n data() {\n return {\n value1: \'\',\n value2: \'\',\n value3: \'\',\n value4: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Picking a date range is supported.")]),n("demo-block",[n("div",[n("p",[e._v("When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the "),n("code",[e._v("unlink-panels")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Default</span>\n <el-date-picker\n v-model="value1"\n type="daterange"\n range-separator="To"\n start-placeholder="Start date"\n end-placeholder="End date">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">With quick options</span>\n <el-date-picker\n v-model="value2"\n type="daterange"\n align="right"\n unlink-panels\n range-separator="To"\n start-placeholder="Start date"\n end-placeholder="End date"\n :picker-options="pickerOptions">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n pickerOptions: {\n shortcuts: [{\n text: \'Last week\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit(\'pick\', [start, end]);\n }\n }, {\n text: \'Last month\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit(\'pick\', [start, end]);\n }\n }, {\n text: \'Last 3 months\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit(\'pick\', [start, end]);\n }\n }]\n },\n value1: \'\',\n value2: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Picking a month range is supported.")]),n("demo-block",[n("div",[n("p",[e._v("When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the "),n("code",[e._v("unlink-panels")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Default</span>\n <el-date-picker\n v-model="value1"\n type="monthrange"\n range-separator="To"\n start-placeholder="Start month"\n end-placeholder="End month">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">With quick options</span>\n <el-date-picker\n v-model="value2"\n type="monthrange"\n align="right"\n unlink-panels\n range-separator="To"\n start-placeholder="Start month"\n end-placeholder="End month"\n :picker-options="pickerOptions">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n pickerOptions: {\n shortcuts: [{\n text: \'This month\',\n onClick(picker) {\n picker.$emit(\'pick\', [new Date(), new Date()]);\n }\n }, {\n text: \'This year\',\n onClick(picker) {\n const end = new Date();\n const start = new Date(new Date().getFullYear(), 0);\n picker.$emit(\'pick\', [start, end]);\n }\n }, {\n text: \'Last 6 months\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setMonth(start.getMonth() - 6);\n picker.$emit(\'pick\', [start, end]);\n }\n }]\n },\n value1: \'\',\n value2: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">date</span>\n <el-date-picker\n v-model="value1"\n type="date"\n placeholder="Pick a date"\n default-value="2010-10-01">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">daterange</span>\n <el-date-picker\n v-model="value2"\n type="daterange"\n align="right"\n start-placeholder="Start Date"\n end-placeholder="End Date"\n default-value="2010-10-01">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value1: \'\',\n value2: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),n("demo-block",[n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Emits Date object</span>\n <div class="demonstration">Value: {{ value1 }}</div>\n <el-date-picker\n v-model="value1"\n type="date"\n placeholder="Pick a Date"\n format="yyyy/MM/dd">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">Use value-format</span>\n <div class="demonstration">Value: {{ value2 }}</div>\n <el-date-picker\n v-model="value2"\n type="date"\n placeholder="Pick a Date"\n format="yyyy/MM/dd"\n value-format="yyyy-MM-dd">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">Timestamp</span>\n <div class="demonstration">Value：{{ value3 }}</div>\n <el-date-picker\n v-model="value3"\n type="date"\n placeholder="Pick a Date"\n format="yyyy/MM/dd"\n value-format="timestamp">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value1: \'\',\n value2: \'\',\n value3: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("When picking a date range, you can assign the time part for start date and end date.")]),n("demo-block",[n("div",[n("p",[e._v("By default, the time part of start date and end date are both "),n("code",[e._v("00:00:00")]),e._v(". Setting "),n("code",[e._v("default-time")]),e._v(" can change their time respectively. It accepts an array of up to two strings with the format of "),n("code",[e._v("12:00:00")]),e._v(". The first string sets the time for the start date, and the second for the end date.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <p>Component value：{{ value }}</p>\n <el-date-picker\n v-model="value"\n type="daterange"\n start-placeholder="Start date"\n end-placeholder="End date"\n :default-time="[\'00:00:00\', \'23:59:59\']">\n </el-date-picker>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value: \'\'\n };\n }\n };\n<\/script>\n')])])])],2),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"enter-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#enter-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Enter Date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"other-measurements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#other-measurements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Other measurements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date Range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"month-range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#month-range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Month Range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-value"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-value","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default Value")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("If user hasn't picked a date, shows today's calendar by default. You can use "),t("code",[this._v("default-value")]),this._v(" to set another date. Its value should be parsable by "),t("code",[this._v("new Date()")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("If type is "),t("code",[this._v("daterange")]),this._v(", "),t("code",[this._v("default-value")]),this._v(" sets the left side calendar.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-formats"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-formats","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date Formats")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use "),t("code",[this._v("format")]),this._v(" to control displayed text's format in the input box. Use "),t("code",[this._v("value-format")]),this._v(" to control binding value's format.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("By default, the component accepts and emits a "),t("code",[this._v("Date")]),this._v(" object. Below are supported format strings, using UTC 2017-01-02 03:04:05 as an example:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"warning"},[t("p",[this._v("Pay attention to capitalization")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("format")]),n("th",[e._v("meaning")]),n("th",[e._v("note")]),n("th",[e._v("example")])])]),n("tbody",[n("tr",[n("td",[n("code",[e._v("yyyy")])]),n("td",[e._v("year")]),n("td"),n("td",[e._v("2017")])]),n("tr",[n("td",[n("code",[e._v("M")])]),n("td",[e._v("month")]),n("td",[e._v("no leading 0")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("MM")])]),n("td",[e._v("month")]),n("td"),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("MMM")])]),n("td",[e._v("month")]),n("td"),n("td",[e._v("Jan")])]),n("tr",[n("td",[n("code",[e._v("MMMM")])]),n("td",[e._v("month")]),n("td"),n("td",[e._v("January")])]),n("tr",[n("td",[n("code",[e._v("W")])]),n("td",[e._v("week")]),n("td",[e._v("only for week picker's "),n("code",[e._v("format")]),e._v("; no leading 0")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("WW")])]),n("td",[e._v("week")]),n("td",[e._v("only for week picker's "),n("code",[e._v("format")])]),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("d")])]),n("td",[e._v("day")]),n("td",[e._v("no leading 0")]),n("td",[e._v("2")])]),n("tr",[n("td",[n("code",[e._v("dd")])]),n("td",[e._v("day")]),n("td"),n("td",[e._v("02")])]),n("tr",[n("td",[n("code",[e._v("H")])]),n("td",[e._v("hour")]),n("td",[e._v("24-hour clock; no leading 0")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("HH")])]),n("td",[e._v("hour")]),n("td",[e._v("24-hour clock")]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("h")])]),n("td",[e._v("hour")]),n("td",[e._v("12-hour clock; must be used with "),n("code",[e._v("A")]),e._v(" or "),n("code",[e._v("a")]),e._v("; no leading 0")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("hh")])]),n("td",[e._v("hour")]),n("td",[e._v("12-hour clock; must be used with "),n("code",[e._v("A")]),e._v(" or "),n("code",[e._v("a")])]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("m")])]),n("td",[e._v("minute")]),n("td",[e._v("no leading 0")]),n("td",[e._v("4")])]),n("tr",[n("td",[n("code",[e._v("mm")])]),n("td",[e._v("minute")]),n("td"),n("td",[e._v("04")])]),n("tr",[n("td",[n("code",[e._v("s")])]),n("td",[e._v("second")]),n("td",[e._v("no leading 0")]),n("td",[e._v("5")])]),n("tr",[n("td",[n("code",[e._v("ss")])]),n("td",[e._v("second")]),n("td"),n("td",[e._v("05")])]),n("tr",[n("td",[n("code",[e._v("A")])]),n("td",[e._v("AM/PM")]),n("td",[e._v("only for "),n("code",[e._v("format")]),e._v(", uppercased")]),n("td",[e._v("AM")])]),n("tr",[n("td",[n("code",[e._v("a")])]),n("td",[e._v("am/pm")]),n("td",[e._v("only for "),n("code",[e._v("format")]),e._v(", lowercased")]),n("td",[e._v("am")])]),n("tr",[n("td",[n("code",[e._v("timestamp")])]),n("td",[e._v("JS timestamp")]),n("td",[e._v("only for "),n("code",[e._v("value-format")]),e._v("; binding value will be a "),n("code",[e._v("number")])]),n("td",[e._v("1483326245000")])]),n("tr",[n("td",[n("code",[e._v("[MM]")])]),n("td",[e._v("No escape characters")]),n("td",[e._v("To escape characters, wrap them in square brackets (e.g. [A] [MM])")]),n("td",[e._v("MM")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"default-time-for-start-date-and-end-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#default-time-for-start-date-and-end-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Default time for start date and end date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("date(DatePicker) / array(DateRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("whether DatePicker is read only")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether DatePicker is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of Input")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("whether the input is editable")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether to show clear button")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder in non-range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("placeholder for the start date in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("placeholder for the end date in range mode")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of the picker")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("format of the displayed value in the input box")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("yyyy-MM-dd")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("alignment")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for DatePicker's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("additional options, check the table below")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("range separator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("optional, default date of the calendar")]),n("td",[e._v("Date")]),n("td",[e._v("anything accepted by "),n("code",[e._v("new Date()")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("optional, the time value to use when selecting date range")]),n("td",[e._v("string[]")]),n("td",[e._v("Array with length 2, each item is a string like "),n("code",[e._v("12:00:00")]),e._v(". The first item for the start date and then second item for the end date")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("optional, format of binding value. If not specified, the binding value will be a Date object")]),n("td",[e._v("string")]),n("td",[e._v("see "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("same as "),n("code",[e._v("name")]),e._v(" in native input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("unlink two date-panels in range-picker")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Custom prefix icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Custom clear icon class")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("whether to trigger form validation")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("a { text, onClick } object array to set shortcut options, check the table below")]),n("td",[e._v("object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("first day of week")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("onPick")]),n("td",[e._v("a callback that triggers when the selected date is changed. Only for "),n("code",[e._v("daterange")]),e._v(" and "),n("code",[e._v("datetimerange")]),e._v(".")]),n("td",[e._v("Function({ maxDate, minDate })")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[this._v("¶")]),this._v(" shortcuts")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("title of the shortcut")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("callback function, triggers when the shortcut is clicked, with the "),n("code",[e._v("vm")]),e._v(" as its parameter. You can change the picker value by emitting the "),n("code",[e._v("pick")]),e._v(" event. Example: "),n("code",[e._v("vm.$emit('pick', new Date())")])]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when user confirms the value")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Input blurs")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Input focuses")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Methods")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Method")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("focus the Input component")]),t("td",[this._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("range-separator")]),t("td",[this._v("custom range separator content")])])])])}],!1,null,null,null);t.default=r.exports},565:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-calendar",{model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:new Date}}}),"element-demo1":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-calendar",{scopedSlots:n._u([{key:"dateCell",fn:function(e){e.date;var t=e.data;return[a("p",{class:t.isSelected?"is-selected":""},[n._v("\n "+n._s(t.day.split("-").slice(1).join("-"))+" "+n._s(t.isSelected?"✔️":"")+"\n ")])]}}])})],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-calendar",{attrs:{range:["2019-03-04","2019-03-24"]}})],1)},staticRenderFns:[]},{})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Display date.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("value")]),e._v(" to specify the currently displayed month. If "),n("code",[e._v("value")]),e._v(" is not specified, current month is displayed. "),n("code",[e._v("value")]),e._v(" supports two-way binding.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-calendar v-model="value">\n</el-calendar>\n\n<script>\n export default {\n data() {\n return {\n value: new Date()\n }\n }\n }\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Customize what is displayed in the calendar cell by setting "),n("code",[e._v("scoped-slot")]),e._v(" named "),n("code",[e._v("dateCell")]),e._v(". In "),n("code",[e._v("scoped-slot")]),e._v(" you can get the date (the date of the current cell), data (including the type, isSelected, day attribute). For details, please refer to the API documentation below.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-calendar>\n \x3c!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax--\x3e\n <template\n slot=\"dateCell\"\n slot-scope=\"{date, data}\">\n <p :class=\"data.isSelected ? 'is-selected' : ''\">\n {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}\n </p>\n </template>\n</el-calendar>\n<style>\n .is-selected {\n color: #1989FA;\n }\n</style>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("range")]),e._v(" attribute to specify the display range of the calendar. Start time must be Monday, end time must be Sunday, and the time span cannot exceed two months.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-calendar :range=\"['2019-03-04', '2019-03-24']\">\n</el-calendar>\n")])])])],2),e._m(4),e._m(5),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"calendar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#calendar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Calendar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom Content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"range"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#range","aria-hidden":"true"}},[this._v("¶")]),this._v(" Range")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("Date/string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("range")]),n("td",[e._v("time range, including start time and end time. Start time must be Monday, end time must be Sunday, the time span cannot exceed two months")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("first-day-of-week")]),n("td",[e._v("fisrt day of week")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("1")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"datecell-scoped-slot-can-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datecell-scoped-slot-can-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" dateCell scoped slot 参数")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("date")]),n("td",[e._v("date the cell represents")]),n("td",[e._v("Date")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("{ type, isSelected, day}. "),n("code",[e._v("type")]),e._v(" indicates which month the date belongs, optional values are prev-month, current-month, next-month; "),n("code",[e._v("isSelected")]),e._v(" indicates whether the date is selected; "),n("code",[e._v("day")]),e._v(" is the formatted date in the format yyyy-MM-dd")]),n("td",[e._v("Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=r.exports},567:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[n("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[n("el-menu",{attrs:{"default-openeds":["1","3"]}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-message"}),e._v("Navigator One")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("Option4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-menu"}),e._v("Navigator Two")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"2-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"3"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-setting"}),e._v("Navigator Three")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"3-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"3-4"}},[n("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-4-1"}},[e._v("Option 4-1")])],2)],2)],1)],1),e._v(" "),n("el-container",[n("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[n("el-dropdown",[n("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("View")]),e._v(" "),n("el-dropdown-item",[e._v("Add")]),e._v(" "),n("el-dropdown-item",[e._v("Delete")])],1)],1),e._v(" "),n("span",[e._v("Tom")])],1),e._v(" "),n("el-main",[n("el-table",{attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1)},staticRenderFns:[]},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"})}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Container components for scaffolding basic structure of the page:")]),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container>\n <el-header>Header</el-header>\n <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n <el-header>Header</el-header>\n <el-main>Main</el-main>\n <el-footer>Footer</el-footer>\n</el-container>\n\n<el-container>\n <el-aside width="200px">Aside</el-aside>\n <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n <el-header>Header</el-header>\n <el-container>\n <el-aside width="200px">Aside</el-aside>\n <el-main>Main</el-main>\n </el-container>\n</el-container>\n\n<el-container>\n <el-header>Header</el-header>\n <el-container>\n <el-aside width="200px">Aside</el-aside>\n <el-container>\n <el-main>Main</el-main>\n <el-footer>Footer</el-footer>\n </el-container>\n </el-container>\n</el-container>\n\n<el-container>\n <el-aside width="200px">Aside</el-aside>\n <el-container>\n <el-header>Header</el-header>\n <el-main>Main</el-main>\n </el-container>\n</el-container>\n\n<el-container>\n <el-aside width="200px">Aside</el-aside>\n <el-container>\n <el-header>Header</el-header>\n <el-main>Main</el-main>\n <el-footer>Footer</el-footer>\n </el-container>\n</el-container>\n\n<style>\n .el-header, .el-footer {\n background-color: #B3C0D1;\n color: #333;\n text-align: center;\n line-height: 60px;\n }\n \n .el-aside {\n background-color: #D3DCE6;\n color: #333;\n text-align: center;\n line-height: 200px;\n }\n \n .el-main {\n background-color: #E9EEF3;\n color: #333;\n text-align: center;\n line-height: 160px;\n }\n \n body > .el-container {\n margin-bottom: 40px;\n }\n \n .el-container:nth-child(5) .el-aside,\n .el-container:nth-child(6) .el-aside {\n line-height: 260px;\n }\n \n .el-container:nth-child(7) .el-aside {\n line-height: 320px;\n }\n</style>\n')])])])],2),e._m(8),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container style="height: 500px; border: 1px solid #eee">\n <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n <el-menu :default-openeds="[\'1\', \'3\']">\n <el-submenu index="1">\n <template slot="title"><i class="el-icon-message"></i>Navigator One</template>\n <el-menu-item-group>\n <template slot="title">Group 1</template>\n <el-menu-item index="1-1">Option 1</el-menu-item>\n <el-menu-item index="1-2">Option 2</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group 2">\n <el-menu-item index="1-3">Option 3</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="1-4">\n <template slot="title">Option4</template>\n <el-menu-item index="1-4-1">Option 4-1</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-submenu index="2">\n <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>\n <el-menu-item-group>\n <template slot="title">Group 1</template>\n <el-menu-item index="2-1">Option 1</el-menu-item>\n <el-menu-item index="2-2">Option 2</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group 2">\n <el-menu-item index="2-3">Option 3</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="2-4">\n <template slot="title">Option 4</template>\n <el-menu-item index="2-4-1">Option 4-1</el-menu-item>\n </el-submenu>\n </el-submenu>\n <el-submenu index="3">\n <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>\n <el-menu-item-group>\n <template slot="title">Group 1</template>\n <el-menu-item index="3-1">Option 1</el-menu-item>\n <el-menu-item index="3-2">Option 2</el-menu-item>\n </el-menu-item-group>\n <el-menu-item-group title="Group 2">\n <el-menu-item index="3-3">Option 3</el-menu-item>\n </el-menu-item-group>\n <el-submenu index="3-4">\n <template slot="title">Option 4</template>\n <el-menu-item index="3-4-1">Option 4-1</el-menu-item>\n </el-submenu>\n </el-submenu>\n </el-menu>\n </el-aside>\n \n <el-container>\n <el-header style="text-align: right; font-size: 12px">\n <el-dropdown>\n <i class="el-icon-setting" style="margin-right: 15px"></i>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>View</el-dropdown-item>\n <el-dropdown-item>Add</el-dropdown-item>\n <el-dropdown-item>Delete</el-dropdown-item>\n </el-dropdown-menu>\n </el-dropdown>\n <span>Tom</span>\n </el-header>\n \n <el-main>\n <el-table :data="tableData">\n <el-table-column prop="date" label="Date" width="140">\n </el-table-column>\n <el-table-column prop="name" label="Name" width="120">\n </el-table-column>\n <el-table-column prop="address" label="Address">\n </el-table-column>\n </el-table>\n </el-main>\n </el-container>\n</el-container>\n\n<style>\n .el-header {\n background-color: #B3C0D1;\n color: #333;\n line-height: 60px;\n }\n \n .el-aside {\n color: #333;\n }\n</style>\n\n<script>\n export default {\n data() {\n const item = {\n date: \'2016-05-02\',\n name: \'Tom\',\n address: \'No. 189, Grove St, Los Angeles\'\n };\n return {\n tableData: Array(20).fill(item)\n }\n }\n };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-container>")]),this._v(": wrapper container. When nested with a "),t("code",[this._v("<el-header>")]),this._v(" or "),t("code",[this._v("<el-footer>")]),this._v(", all its child elements will be vertically arranged. Otherwise horizontally.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-header>")]),this._v(": container for headers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-aside>")]),this._v(": container for side sections (usually a side nav).")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-main>")]),this._v(": container for main sections.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-footer>")]),this._v(": container for footers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("These components use flex for layout, so please make sure your browser supports it. Besides, "),t("code",[this._v("<el-container>")]),this._v("'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a "),t("code",[this._v("<el-container>")]),this._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"common-layouts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#common-layouts","aria-hidden":"true"}},[this._v("¶")]),this._v(" Common layouts")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"example"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#example","aria-hidden":"true"}},[this._v("¶")]),this._v(" Example")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"container-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("direction")]),n("td",[e._v("layout direction for child elements")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical when nested with "),n("code",[e._v("el-header")]),e._v(" or "),n("code",[e._v("el-footer")]),e._v("; horizontal otherwise")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"header-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#header-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Header Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("height of the header")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"aside-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#aside-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Aside Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("width")]),n("td",[e._v("width of the side section")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("300px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"footer-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#footer-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Footer Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("height of the footer")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])}],!1,null,null,null);t.default=r.exports},570:function(e,t,n){"use strict";n.r(t);var a=n(31),i=n(201),l=n(32),r={primary:"$--color-primary",success:"$--color-success",warning:"$--color-warning",danger:"$--color-danger",info:"$--color-info",white:"$--color-white",black:"$--color-black",textPrimary:"$--color-text-primary",textRegular:"$--color-text-regular",textSecondary:"$--color-text-secondary",textPlaceholder:"$--color-text-placeholder",borderBase:"$--border-color-base",borderLight:"$--border-color-light",borderLighter:"$--border-color-lighter",borderExtraLight:"$--border-color-extra-light"},o={primary:"#409EFF",success:"#67C23A",warning:"#E6A23C",danger:"#F56C6C",info:"#909399",white:"#FFFFFF",black:"#000000",textPrimary:"#303133",textRegular:"#606266",textSecondary:"#909399",textPlaceholder:"#C0C4CC",borderBase:"#DCDFE6",borderLight:"#E4E7ED",borderLighter:"#EBEEF5",borderExtraLight:"#F2F6FC"},s={created:function(){a.a.$on(l.d,this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return Object(i.a)(e,t)},setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},primary:"",success:"",warning:"",danger:"",info:"",white:"",black:"",textPrimary:"",textRegular:"",textSecondary:"",textPlaceholder:"",borderBase:"",borderLight:"",borderLighter:"",borderExtraLight:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(o).forEach(function(e){t[r[e]]?n[e]=t[r[e]]:n[e]=o[e]})}}}},d=n(0),c=Object(d.a)(s,function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("section",{staticClass:"content element-doc"},[n._m(0),a("p",[n._v("Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.")]),n._m(1),a("p",[n._v("The main color of Element is bright and friendly blue.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:10,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.primary}},[n._v("\n Brand Color"),a("div",{staticClass:"value"},[n._v("#409EFF")]),a("div",{staticClass:"bg-color-sub",style:{background:n.tintColor(n.primary,.9)}},n._l(Array(8),function(e,t){return a("div",{key:t,staticClass:"bg-blue-sub-item",style:{background:n.tintColor(n.primary,(t+1)/10)}})}),0)])])],1),n._m(2),a("p",[n._v("Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.success}},[n._v("Success"),a("div",{staticClass:"value"},[n._v("#67C23A")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.success,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.warning}},[n._v("Warning"),a("div",{staticClass:"value"},[n._v("#E6A23C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.warning,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.danger}},[n._v("Danger"),a("div",{staticClass:"value"},[n._v("#F56C6C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.danger,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.info}},[n._v("Info"),a("div",{staticClass:"value"},[n._v("#909399")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.info,(t+8)/10)}})}),0)])])],1),n._m(3),a("p",[n._v("Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPrimary}},[n._v("Primary Text"),a("div",{staticClass:"value"},[n._v(n._s(n.textPrimary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textRegular}},[n._v("\n Regular Text"),a("div",{staticClass:"value"},[n._v(n._s(n.textRegular))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textSecondary}},[n._v("Secondary Text"),a("div",{staticClass:"value"},[n._v(n._s(n.textSecondary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPlaceholder}},[n._v("Placeholder Text"),a("div",{staticClass:"value"},[n._v(n._s(n.textPlaceholder))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderBase}},[n._v("Base Border"),a("div",{staticClass:"value"},[n._v(n._s(n.borderBase))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLight}},[n._v("Light Border"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLight))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLighter}},[n._v("Lighter Border"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLighter))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderExtraLight}},[n._v("Extra Light Border"),a("div",{staticClass:"value"},[n._v(n._s(n.borderExtraLight))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.black}},[n._v("Basic Black"),a("div",{staticClass:"value"},[n._v(n._s(n.black))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.white,color:"#303133",border:"1px solid #eee"}},[n._v("Basic White"),a("div",{staticClass:"value"},[n._v(n._s(n.white))])]),a("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[n._v("Transparent"),a("div",{staticClass:"value"},[n._v("Transparent")])])])])],1)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"main-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#main-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Main Color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"secondary-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#secondary-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Secondary Color")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"neutral-color"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#neutral-color","aria-hidden":"true"}},[this._v("¶")]),this._v(" Neutral Color")])}],!1,null,null,null);t.default=c.exports},573:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With default value")]),t._v(" "),n("el-color-picker",{model:{value:t.color1,callback:function(e){t.color1=e},expression:"color1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("With no default value")]),t._v(" "),n("el-color-picker",{model:{value:t.color2,callback:function(e){t.color2=e},expression:"color2"}})],1)])},staticRenderFns:[]},{data:function(){return{color1:"#409EFF",color2:null}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":""},model:{value:t.color,callback:function(e){t.color=e},expression:"color"}})],1)},staticRenderFns:[]},{data:function(){return{color:"rgba(19, 206, 102, 0.8)"}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":"",predefine:t.predefineColors},model:{value:t.color,callback:function(e){t.color=e},expression:"color"}})],1)},staticRenderFns:[]},{data:function(){return{color:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{model:{value:t.color,callback:function(e){t.color=e},expression:"color"}}),t._v(" "),n("el-color-picker",{attrs:{size:"medium"},model:{value:t.color,callback:function(e){t.color=e},expression:"color"}}),t._v(" "),n("el-color-picker",{attrs:{size:"small"},model:{value:t.color,callback:function(e){t.color=e},expression:"color"}}),t._v(" "),n("el-color-picker",{attrs:{size:"mini"},model:{value:t.color,callback:function(e){t.color=e},expression:"color"}})],1)},staticRenderFns:[]},{data:function(){return{color:"#409EFF"}}})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("ColorPicker is a color selector supporting multiple color formats.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("ColorPicker requires a string typed variable to be bound to v-model.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n <span class="demonstration">With default value</span>\n <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n <span class="demonstration">With no default value</span>\n <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n<script>\n export default {\n data() {\n return {\n color1: \'#409EFF\',\n color2: null\n }\n }\n };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the "),n("code",[e._v("show-alpha")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker v-model=\"color\" show-alpha></el-color-picker>\n\n<script>\n export default {\n data() {\n return {\n color: 'rgba(19, 206, 102, 0.8)'\n }\n }\n };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("ColorPicker supports predefined color options")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker\n v-model=\"color\"\n show-alpha\n :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n export default {\n data() {\n return {\n color: 'rgba(255, 69, 0, 0.68)',\n predefineColors: [\n '#ff4500',\n '#ff8c00',\n '#ffd700',\n '#90ee90',\n '#00ced1',\n '#1e90ff',\n '#c71585',\n 'rgba(255, 69, 0, 0.68)',\n 'rgb(255, 120, 0)',\n 'hsv(51, 100, 98)',\n 'hsva(120, 40, 94, 0.5)',\n 'hsl(181, 100%, 37%)',\n 'hsla(209, 100%, 56%, 0.73)',\n '#c7158577'\n ]\n }\n }\n };\n<\/script>\n")])])])],2),e._m(4),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-color-picker v-model="color"></el-color-picker>\n<el-color-picker v-model="color" size="medium"></el-color-picker>\n<el-color-picker v-model="color" size="small"></el-color-picker>\n<el-color-picker v-model="color" size="mini"></el-color-picker>\n\n<script>\n export default {\n data() {\n return {\n color: \'#409EFF\'\n }\n }\n };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"colorpicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alpha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alpha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"predefined-colors"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#predefined-colors","aria-hidden":"true"}},[this._v("¶")]),this._v(" Predefined colors")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether to disable the ColorPicker")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of ColorPicker")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("medium / small / mini")])]),n("tr",[n("td",[e._v("show-alpha")]),n("td",[e._v("whether to display the alpha slider")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color-format")]),n("td",[e._v("color format of v-model")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("hex (when show-alpha is false)/ rgb (when show-alpha is true)")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for ColorPicker's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("predefine")]),n("td",[e._v("predefined color options")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when input value changes")]),n("td",[e._v("color value")])]),n("tr",[n("td",[e._v("active-change")]),n("td",[e._v("triggers when the current active color changes")]),n("td",[e._v("active color value")])])])])}],!1,null,null,null);t.default=r.exports},575:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{on:{change:t.handleChange},model:{value:t.activeNames,callback:function(e){t.activeNames=e},expression:"activeNames"}},[n("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[n("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),t._v(" "),n("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t._v(" "),n("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[n("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),t._v(" "),n("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t._v(" "),n("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[n("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t._v(" "),n("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]},{data:function(){return{activeNames:["1"]}},methods:{handleChange:function(e){console.log(e)}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{attrs:{accordion:""},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[n("div",[t._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),t._v(" "),n("div",[t._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[t._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),t._v(" "),n("div",[t._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[n("div",[t._v("Simplify the process: keep operating process simple and intuitive;")]),t._v(" "),n("div",[t._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),t._v(" "),n("div",[t._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[n("div",[t._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),t._v(" "),n("div",[t._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]},{data:function(){return{activeName:"1"}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-collapse",{attrs:{accordion:""}},[n("el-collapse-item",{attrs:{name:"1"}},[n("template",{slot:"title"},[e._v("\n Consistency"),n("i",{staticClass:"header-icon el-icon-info"})]),e._v(" "),n("div",[e._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),e._v(" "),n("div",[e._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),e._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[e._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),e._v(" "),n("div",[e._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[n("div",[e._v("Simplify the process: keep operating process simple and intuitive;")]),e._v(" "),n("div",[e._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),e._v(" "),n("div",[e._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[n("div",[e._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),e._v(" "),n("div",[e._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1)},staticRenderFns:[]},{})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Use Collapse to store contents.")]),e._m(1),n("p",[e._v("You can expand multiple panels")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeNames" @change="handleChange">\n <el-collapse-item title="Consistency" name="1">\n <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n </el-collapse-item>\n <el-collapse-item title="Feedback" name="2">\n <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n </el-collapse-item>\n <el-collapse-item title="Efficiency" name="3">\n <div>Simplify the process: keep operating process simple and intuitive;</div>\n <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n </el-collapse-item>\n <el-collapse-item title="Controllability" name="4">\n <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n </el-collapse-item>\n</el-collapse>\n<script>\n export default {\n data() {\n return {\n activeNames: [\'1\']\n };\n },\n methods: {\n handleChange(val) {\n console.log(val);\n }\n }\n }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("In accordion mode, only one panel can be expanded at once")]),n("demo-block",[n("div",[n("p",[e._v("Activate accordion mode using the "),n("code",[e._v("accordion")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeName" accordion>\n <el-collapse-item title="Consistency" name="1">\n <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n </el-collapse-item>\n <el-collapse-item title="Feedback" name="2">\n <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n </el-collapse-item>\n <el-collapse-item title="Efficiency" name="3">\n <div>Simplify the process: keep operating process simple and intuitive;</div>\n <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n </el-collapse-item>\n <el-collapse-item title="Controllability" name="4">\n <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n </el-collapse-item>\n</el-collapse>\n<script>\n export default {\n data() {\n return {\n activeName: \'1\'\n };\n }\n }\n<\/script>\n')])])])],2),e._m(3),e._m(4),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse accordion>\n <el-collapse-item name="1">\n <template slot="title">\n Consistency<i class="header-icon el-icon-info"></i>\n </template>\n <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>\n <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n </el-collapse-item>\n <el-collapse-item title="Feedback" name="2">\n <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n </el-collapse-item>\n <el-collapse-item title="Efficiency" name="3">\n <div>Simplify the process: keep operating process simple and intuitive;</div>\n <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n </el-collapse-item>\n <el-collapse-item title="Controllability" name="4">\n <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n </el-collapse-item>\n</el-collapse>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accordion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-title"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-title","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom title")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Besides using the "),t("code",[this._v("title")]),this._v(" attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("currently active panel")]),n("td",[e._v("string (accordion mode) / array (non-accordion mode)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("whether to activate accordion mode")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("triggers when active panels change")]),t("td",[this._v("(activeNames: array (non-accordion mode) / string (accordion mode))")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("unique identification of the panel")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("title of the panel")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("disable the collapse item")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=r.exports},578:function(e,t,n){"use strict";n.r(t);var a,i,l,r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},o={name:"component-doc",components:{"element-demo0":r({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},[t._v("Option")])]],2)},staticRenderFns:[]},{data:function(){return{checked:!0}}}),"element-demo1":r({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}},[t._v("Option")]),t._v(" "),n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}},[t._v("Option")])]],2)},staticRenderFns:[]},{data:function(){return{checked1:!1,checked2:!0}}}),"element-demo2":r({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{model:{value:t.checkList,callback:function(e){t.checkList=e},expression:"checkList"}},[n("el-checkbox",{attrs:{label:"Option A"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option B"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option C"}}),t._v(" "),n("el-checkbox",{attrs:{label:"disabled",disabled:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"selected and disabled",disabled:""}})],1)]],2)},staticRenderFns:[]},{data:function(){return{checkList:["selected and disabled","Option A"]}}}),"element-demo3":(l=["Shanghai","Beijing","Guangzhou","Shenzhen"],r({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleCheckAllChange},model:{value:t.checkAll,callback:function(e){t.checkAll=e},expression:"checkAll"}},[t._v("Check all")]),t._v(" "),n("div",{staticStyle:{margin:"15px 0"}}),t._v(" "),n("el-checkbox-group",{on:{change:t.handleCheckedCitiesChange},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]},{data:function(){return{checkAll:!1,checkedCities:["Shanghai","Beijing"],cities:l,isIndeterminate:!0}},methods:{handleCheckAllChange:function(e){this.checkedCities=e?l:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(e){var t=e.length;this.checkAll=t===this.cities.length,this.isIndeterminate=0<t&&t<this.cities.length}}})),"element-demo4":(i=["Shanghai","Beijing","Guangzhou","Shenzhen"],r({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{attrs:{min:1,max:2},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]},{data:function(){return{checkedCities:["Shanghai","Beijing"],cities:i}}})),"element-demo5":(a=["Shanghai","Beijing","Guangzhou","Shenzhen"],r({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox-group",{model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"medium"},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup3,callback:function(e){t.checkboxGroup3=e},expression:"checkboxGroup3"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e,disabled:"Beijing"===e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup4,callback:function(e){t.checkboxGroup4=e},expression:"checkboxGroup4"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1)]],2)},staticRenderFns:[]},{data:function(){return{checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],cities:a}}})),"element-demo6":r({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox",{attrs:{label:"Option1",border:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox",{attrs:{label:"Option1",border:"",size:"medium"},model:{value:t.checked3,callback:function(e){t.checked3=e},expression:"checked3"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:"",size:"medium"},model:{value:t.checked4,callback:function(e){t.checked4=e},expression:"checked4"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},[n("el-checkbox",{attrs:{label:"Option1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:"",disabled:""}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},[n("el-checkbox",{attrs:{label:"Option1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:""}})],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{checked1:!0,checked2:!1,checked3:!1,checked4:!0,checkboxGroup1:[],checkboxGroup2:[]}}})}},s=n(0),d=Object(s.a)(o,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("A group of options for multiple choices.")]),e._m(1),n("p",[e._v("Checkbox can be used alone to switch between two states.")]),n("demo-block",[n("div",[n("p",[e._v("Define "),n("code",[e._v("v-model")]),e._v("(bind variable) in "),n("code",[e._v("el-checkbox")]),e._v(". The default value is a "),n("code",[e._v("Boolean")]),e._v(" for single "),n("code",[e._v("checkbox")]),e._v(", and it becomes "),n("code",[e._v("true")]),e._v(" when selected. Content inside the "),n("code",[e._v("el-checkbox")]),e._v(" tag will become the description following the button of the checkbox.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n \x3c!-- `checked` should be true or false --\x3e\n <el-checkbox v-model="checked">Option</el-checkbox>\n</template>\n<script>\n export default {\n data() {\n return {\n checked: true\n };\n }\n };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Disabled state for checkbox.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("disabled")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-checkbox v-model="checked1" disabled>Option</el-checkbox>\n <el-checkbox v-model="checked2" disabled>Option</el-checkbox>\n</template>\n<script>\n export default {\n data() {\n return {\n checked1: false,\n checked2: true\n };\n }\n };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("checkbox-group")]),e._v(" element can manage multiple checkboxes in one group by using "),n("code",[e._v("v-model")]),e._v(" which is bound as an "),n("code",[e._v("Array")]),e._v(". Inside the "),n("code",[e._v("el-checkbox")]),e._v(" element, "),n("code",[e._v("label")]),e._v(" is the value of the checkbox. If no content is nested in that tag, "),n("code",[e._v("label")]),e._v(" will be rendered as the description following the button of the checkbox. "),n("code",[e._v("label")]),e._v(" also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-checkbox-group v-model="checkList">\n <el-checkbox label="Option A"></el-checkbox>\n <el-checkbox label="Option B"></el-checkbox>\n <el-checkbox label="Option C"></el-checkbox>\n <el-checkbox label="disabled" disabled></el-checkbox>\n <el-checkbox label="selected and disabled" disabled></el-checkbox>\n </el-checkbox-group>\n</template>\n\n<script>\n export default {\n data () {\n return {\n checkList: [\'selected and disabled\',\'Option A\']\n };\n }\n };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>\n <div style="margin: 15px 0;"></div>\n <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n </el-checkbox-group>\n</template>\n<script>\n const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n export default {\n data() {\n return {\n checkAll: false,\n checkedCities: [\'Shanghai\', \'Beijing\'],\n cities: cityOptions,\n isIndeterminate: true\n };\n },\n methods: {\n handleCheckAllChange(val) {\n this.checkedCities = val ? cityOptions : [];\n this.isIndeterminate = false;\n },\n handleCheckedCitiesChange(value) {\n let checkedCount = value.length;\n this.checkAll = checkedCount === this.cities.length;\n this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n }\n }\n };\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n <el-checkbox-group \n v-model=\"checkedCities\"\n :min=\"1\"\n :max=\"2\">\n <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n </el-checkbox-group>\n</template>\n<script>\n const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n export default {\n data() {\n return {\n checkedCities: ['Shanghai', 'Beijing'],\n cities: cityOptions\n };\n }\n };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Checkbox with button styles.")]),n("demo-block",[n("div",[n("p",[e._v("You just need to change "),n("code",[e._v("el-checkbox")]),e._v(" element into "),n("code",[e._v("el-checkbox-button")]),e._v(" element. We also provide "),n("code",[e._v("size")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <el-checkbox-group v-model="checkboxGroup1">\n <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n </el-checkbox-group>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox-group v-model="checkboxGroup2" size="medium">\n <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n </el-checkbox-group>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox-group v-model="checkboxGroup3" size="small">\n <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'Beijing\'" :key="city">{{city}}</el-checkbox-button>\n </el-checkbox-group>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n </el-checkbox-group>\n </div>\n</template>\n<script>\n const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n\n export default {\n data () {\n return {\n checkboxGroup1: [\'Shanghai\'],\n checkboxGroup2: [\'Shanghai\'],\n checkboxGroup3: [\'Shanghai\'],\n checkboxGroup4: [\'Shanghai\'],\n cities: cityOptions\n };\n }\n }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("border")]),e._v(" attribute adds a border to Checkboxes.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div>\n <el-checkbox v-model="checked1" label="Option1" border></el-checkbox>\n <el-checkbox v-model="checked2" label="Option2" border></el-checkbox>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox v-model="checked3" label="Option1" border size="medium"></el-checkbox>\n <el-checkbox v-model="checked4" label="Option2" border size="medium"></el-checkbox>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox-group v-model="checkboxGroup1" size="small">\n <el-checkbox label="Option1" border></el-checkbox>\n <el-checkbox label="Option2" border disabled></el-checkbox>\n </el-checkbox-group>\n </div>\n <div style="margin-top: 20px">\n <el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>\n <el-checkbox label="Option1" border></el-checkbox>\n <el-checkbox label="Option2" border></el-checkbox>\n </el-checkbox-group>\n </div>\n</template>\n\n<script>\n export default {\n data () {\n return {\n checked1: true,\n checked2: false,\n checked3: false,\n checked4: true,\n checkboxGroup1: [],\n checkboxGroup2: []\n };\n }\n }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-state"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-state","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled State")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indeterminate"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indeterminate")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("The "),t("code",[this._v("indeterminate")]),this._v(" property can help you to achieve a 'check all' effect.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"minimum-maximum-items-checked"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-items-checked","aria-hidden":"true"}},[this._v("¶")]),this._v(" Minimum / Maximum items checked")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("The "),t("code",[this._v("min")]),this._v(" and "),t("code",[this._v("max")]),this._v(" properties can help you to limit the number of checked items.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"button-style"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button style")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-borders"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-borders","aria-hidden":"true"}},[this._v("¶")]),this._v(" With borders")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("value of the Checkbox when used inside a "),n("code",[e._v("checkbox-group")])]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("value of the Checkbox if it's checked")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("value of the Checkbox if it's not checked")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the Checkbox is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("whether to add a border around Checkbox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of the Checkbox, only works when "),n("code",[e._v("border")]),e._v(" is true")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("native 'name' attribute")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("if the Checkbox is checked")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indeterminate")]),n("td",[e._v("same as "),n("code",[e._v("indeterminate")]),e._v(" in native checkbox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("triggers when the binding value changes")]),t("td",[this._v("the updated value")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of checkbox buttons or bordered checkboxes")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the nesting checkboxes are disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("minimum number of checkbox checked")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("maximum number of checkbox checked")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("font color when button is active")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("border and background color when button is active")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-group Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("triggers when the binding value changes")]),t("td",[this._v("the updated value")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-button-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox-button Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("value of the checkbox when used inside a "),n("code",[e._v("checkbox-group")])]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("value of the checkbox if it's checked")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("value of the checkbox if it's not checked")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether the checkbox is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("native 'name' attribute")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("if the checkbox is checked")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);t.default=d.exports},580:function(e,t,n){"use strict";n.r(t);var a,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":i({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Child options expand when clicked (default)")]),t._v(" "),n("el-cascader",{attrs:{options:t.options},on:{change:t.handleChange},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Child options expand when hovered")]),t._v(" "),n("el-cascader",{attrs:{options:t.options,props:{expandTrigger:"hover"}},on:{change:t.handleChange},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)])},staticRenderFns:[]},{data:function(){return{value:[],options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}},methods:{handleChange:function(e){console.log(e)}}}),"element-demo1":i({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options}})],1)},staticRenderFns:[]},{data:function(){return{options:[{value:"guide",label:"Guide",disabled:!0,children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}}),"element-demo2":i({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,clearable:""}})],1)},staticRenderFns:[]},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}}),"element-demo3":i({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"show-all-levels":!1}})],1)},staticRenderFns:[]},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}}),"element-demo4":i({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Display all tags (default)")]),e._v(" "),n("el-cascader",{attrs:{options:e.options,props:e.props,clearable:""}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Collapse tags")]),e._v(" "),n("el-cascader",{attrs:{options:e.options,props:e.props,"collapse-tags":"",clearable:""}})],1)])},staticRenderFns:[]},{data:function(){return{props:{multiple:!0},options:[{value:1,label:"Asia",children:[{value:2,label:"China",children:[{value:3,label:"Beijing"},{value:4,label:"Shanghai"},{value:5,label:"Hangzhou"}]},{value:6,label:"Japan",children:[{value:7,label:"Tokyo"},{value:8,label:"Osaka"},{value:9,label:"Kyoto"}]},{value:10,label:"Korea",children:[{value:11,label:"Seoul"},{value:12,label:"Busan"},{value:13,label:"Taegu"}]}]},{value:14,label:"Europe",children:[{value:15,label:"France",children:[{value:16,label:"Paris"},{value:17,label:"Marseille"},{value:18,label:"Lyon"}]},{value:19,label:"UK",children:[{value:20,label:"London"},{value:21,label:"Birmingham"},{value:22,label:"Manchester"}]}]},{value:23,label:"North America",children:[{value:24,label:"US",children:[{value:25,label:"New York"},{value:26,label:"Los Angeles"},{value:27,label:"Washington"}]},{value:28,label:"Canada",children:[{value:29,label:"Toronto"},{value:30,label:"Montreal"},{value:31,label:"Ottawa"}]}]}]}}}),"element-demo5":i({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Select any level of options (Single selection)")]),this._v(" "),t("el-cascader",{attrs:{options:this.options,props:{checkStrictly:!0},clearable:""}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Select any level of options (Multiple selection)")]),this._v(" "),t("el-cascader",{attrs:{options:this.options,props:{multiple:!0,checkStrictly:!0},clearable:""}})],1)])},staticRenderFns:[]},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}}),"element-demo6":(a=0,i({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{props:this.props}})],1)},staticRenderFns:[]},{data:function(){return{props:{lazy:!0,lazyLoad:function(e,t){var n=e.level;setTimeout(function(){var e=Array.from({length:n+1}).map(function(e){return{value:++a,label:"Option - "+a,leaf:2<=n}});t(e)},1e3)}}}}})),"element-demo7":i({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Filterable (Single selection)")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searchingL Guide",options:this.options,filterable:""}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Filterable (Multiple selection)")]),this._v(" "),t("el-cascader",{attrs:{placeholder:"Try searchingL Guide",options:this.options,props:{multiple:!0},filterable:""}})],1)])},staticRenderFns:[]},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}}),"element-demo8":i({render:function(){var a=this,e=a.$createElement,i=a._self._c||e;return i("div",[i("el-cascader",{attrs:{options:a.options},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.node,n=e.data;return[i("span",[a._v(a._s(n.label))]),a._v(" "),t.isLeaf?a._e():i("span",[a._v(" ("+a._s(n.children.length)+") ")])]}}])})],1)},staticRenderFns:[]},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}}),"element-demo9":i({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader-panel",{attrs:{options:this.options}})],1)},staticRenderFns:[]},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}})}},r=n(0),o=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("If the options have a clear hierarchical structure, Cascader can be used to view and select them.")]),e._m(1),n("p",[e._v("There are two ways to expand child option items.")]),n("demo-block",[n("div",[n("p",[e._v("Assigning the "),n("code",[e._v("options")]),e._v(" attribute to an array of options renders a Cascader. The "),n("code",[e._v("props.expandTrigger")]),e._v(" attribute defines how child options are expanded.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n <span class=\"demonstration\">Child options expand when clicked (default)</span>\n <el-cascader\n v-model=\"value\"\n :options=\"options\"\n @change=\"handleChange\"></el-cascader>\n</div>\n<div class=\"block\">\n <span class=\"demonstration\">Child options expand when hovered</span>\n <el-cascader\n v-model=\"value\"\n :options=\"options\"\n :props=\"{ expandTrigger: 'hover' }\"\n @change=\"handleChange\"></el-cascader>\n</div>\n\n<script>\n export default {\n data() {\n return {\n value: [],\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n<\/script>\n")])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("In this example, the first item in "),n("code",[e._v("options")]),e._v(" array has a "),n("code",[e._v("disabled: true")]),e._v(" field, so it is disabled. By default, Cascader checks the "),n("code",[e._v("disabled")]),e._v(" field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the "),n("code",[e._v("props.disabled")]),e._v(" attribute (see the API table below for details). And of course, field name "),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("label")]),e._v(" and "),n("code",[e._v("children")]),e._v(" can also be customized in the same way.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader :options=\"options\"></el-cascader>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n disabled: true,\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n<\/script>\n")])])])],2),e._m(4),e._m(5),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader :options=\"options\" clearable></el-cascader>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("The input can display only the last level instead of all levels.")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("show-all-levels")]),e._v(" attribute defines if all levels are displayed. If it is "),n("code",[e._v("false")]),e._v(", only the last level is displayed.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader :options=\"options\" :show-all-levels=\"false\"></el-cascader>\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n<\/script>\n")])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("When using multiple selection, all selected tags will display by default, You can set "),n("code",[e._v("collapse-tags = true")]),e._v(" to fold selected tags.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n <span class=\"demonstration\">Display all tags (default)</span>\n <el-cascader\n :options=\"options\"\n :props=\"props\"\n clearable></el-cascader>\n</div>\n<div class=\"block\">\n <span class=\"demonstration\">Collapse tags</span>\n <el-cascader\n :options=\"options\"\n :props=\"props\"\n collapse-tags\n clearable></el-cascader>\n</div>\n\n<script>\n export default {\n data() {\n return {\n props: { multiple: true },\n options: [{\n value: 1,\n label: 'Asia',\n children: [{\n value: 2,\n label: 'China',\n children: [\n { value: 3, label: 'Beijing' },\n { value: 4, label: 'Shanghai' },\n { value: 5, label: 'Hangzhou' }\n ]\n }, {\n value: 6,\n label: 'Japan',\n children: [\n { value: 7, label: 'Tokyo' },\n { value: 8, label: 'Osaka' },\n { value: 9, label: 'Kyoto' }\n ]\n }, {\n value: 10,\n label: 'Korea',\n children: [\n { value: 11, label: 'Seoul' },\n { value: 12, label: 'Busan' },\n { value: 13, label: 'Taegu' }\n ]\n }]\n }, {\n value: 14,\n label: 'Europe',\n children: [{\n value: 15,\n label: 'France',\n children: [\n { value: 16, label: 'Paris' },\n { value: 17, label: 'Marseille' },\n { value: 18, label: 'Lyon' }\n ]\n }, {\n value: 19,\n label: 'UK',\n children: [\n { value: 20, label: 'London' },\n { value: 21, label: 'Birmingham' },\n { value: 22, label: 'Manchester' }\n ]\n }]\n }, {\n value: 23,\n label: 'North America',\n children: [{\n value: 24,\n label: 'US',\n children: [\n { value: 25, label: 'New York' },\n { value: 26, label: 'Los Angeles' },\n { value: 27, label: 'Washington' }\n ]\n }, {\n value: 28,\n label: 'Canada',\n children: [\n { value: 29, label: 'Toronto' },\n { value: 30, label: 'Montreal' },\n { value: 31, label: 'Ottawa' }\n ]\n }]\n }]\n };\n }\n };\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("In single selection, only the leaf nodes can be checked, and in multiple selection, check parent nodes will lead to leaf nodes be checked eventually. When enable this feature, it can make parent and child nodes unlinked and you can select any level of options.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("props.checkStrictly = true")]),e._v(" to make checked state of a node not affects its parent nodes and child nodes, and then you can select any level of options.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n <span class=\"demonstration\">Select any level of options (Single selection)</span>\n <el-cascader\n :options=\"options\"\n :props=\"{ checkStrictly: true }\"\n clearable></el-cascader>\n</div>\n<div class=\"block\">\n <span class=\"demonstration\">Select any level of options (Multiple selection)</span>\n <el-cascader\n :options=\"options\"\n :props=\"{ multiple: true, checkStrictly: true }\"\n clearable></el-cascader>\n</div>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("Dynamic load its child nodes when checked a node.")]),n("demo-block",[n("div",[n("p",[e._v("Set "),n("code",[e._v("lazy = true")]),e._v(" to use dynamic loading, and you have to specify how to load the data source by "),n("code",[e._v("lazyload")]),e._v(". There are two parameters of "),n("code",[e._v("lazyload")]),e._v(",the first parameter "),n("code",[e._v("node")]),e._v(" is the node currently clicked, and the "),n("code",[e._v("resolve")]),e._v(" is a callback that indicate loading is finished which must invoke. To display the status of node more accurately, you can add a "),n("code",[e._v("leaf")]),e._v(" field (can be modified by "),n("code",[e._v("props.leaf")]),e._v(") to indicate whether it is a leaf node. Otherwise, it will be inferred by if has any child nodes.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-cascader :props="props"></el-cascader>\n\n<script>\n let id = 0;\n\n export default {\n data() {\n return {\n props: {\n lazy: true,\n lazyLoad (node, resolve) {\n const { level } = node;\n setTimeout(() => {\n const nodes = Array.from({ length: level + 1 })\n .map(item => ({\n value: ++id,\n label: `Option - ${id}`,\n leaf: level >= 2\n }));\n // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.\n resolve(nodes);\n }, 1000);\n }\n }\n };\n }\n };\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("Search and select options with a keyword.")]),n("demo-block",[n("div",[n("p",[e._v("Adding "),n("code",[e._v("filterable")]),e._v(" to "),n("code",[e._v("el-cascader")]),e._v(" enables filtering. Cascader will match nodes whose label or parent's label (according to "),n("code",[e._v("show-all-levels")]),e._v(") includes input keyword. Of course, you can customize search logic by "),n("code",[e._v("filter-method")]),e._v(" which accepts a function, the first parameter is "),n("code",[e._v("node")]),e._v(", the second is "),n("code",[e._v("keyword")]),e._v(", and need return a boolean value indicating whether it hits.")])]),n("template",{slot:"source"},[n("element-demo7")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n <span class=\"demonstration\">Filterable (Single selection)</span>\n <el-cascader\n placeholder=\"Try searchingL Guide\"\n :options=\"options\"\n filterable></el-cascader>\n</div>\n<div class=\"block\">\n <span class=\"demonstration\">Filterable (Multiple selection)</span>\n <el-cascader\n placeholder=\"Try searchingL Guide\"\n :options=\"options\"\n :props=\"{ multiple: true }\"\n filterable></el-cascader>\n</div>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n<\/script>\n")])])])],2),e._m(12),n("p",[e._v("You can customize the content of cascader node.")]),n("demo-block",[n("div",[n("p",[e._v("You can customize the content of cascader node by "),n("code",[e._v("scoped slot")]),e._v(". You'll have access to "),n("code",[e._v("node")]),e._v(" and "),n("code",[e._v("data")]),e._v(" in the scope, standing for the Node object and node data of the current node respectively。")])]),n("template",{slot:"source"},[n("element-demo8")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader :options=\"options\">\n <template slot-scope=\"{ node, data }\">\n <span>{{ data.label }}</span>\n <span v-if=\"!node.isLeaf\"> ({{ data.children.length }}) </span>\n </template>\n</el-cascader>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n }\n }\n }\n<\/script>\n")])])])],2),e._m(13),e._m(14),n("demo-block",[n("div",[n("p",[e._v("Just like "),n("code",[e._v("el-cascader")]),e._v(", you can set alternative options by "),n("code",[e._v("options")]),e._v(", and enable other features by "),n("code",[e._v("props")]),e._v(", see the API form below for details.")])]),n("template",{slot:"source"},[n("element-demo9")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader-panel :options=\"options\"></el-cascader-panel>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'guide',\n label: 'Guide',\n children: [{\n value: 'disciplines',\n label: 'Disciplines',\n children: [{\n value: 'consistency',\n label: 'Consistency'\n }, {\n value: 'feedback',\n label: 'Feedback'\n }, {\n value: 'efficiency',\n label: 'Efficiency'\n }, {\n value: 'controllability',\n label: 'Controllability'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'side nav',\n label: 'Side Navigation'\n }, {\n value: 'top nav',\n label: 'Top Navigation'\n }]\n }]\n }, {\n value: 'component',\n label: 'Component',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout'\n }, {\n value: 'color',\n label: 'Color'\n }, {\n value: 'typography',\n label: 'Typography'\n }, {\n value: 'icon',\n label: 'Icon'\n }, {\n value: 'button',\n label: 'Button'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio'\n }, {\n value: 'checkbox',\n label: 'Checkbox'\n }, {\n value: 'input',\n label: 'Input'\n }, {\n value: 'input-number',\n label: 'InputNumber'\n }, {\n value: 'select',\n label: 'Select'\n }, {\n value: 'cascader',\n label: 'Cascader'\n }, {\n value: 'switch',\n label: 'Switch'\n }, {\n value: 'slider',\n label: 'Slider'\n }, {\n value: 'time-picker',\n label: 'TimePicker'\n }, {\n value: 'date-picker',\n label: 'DatePicker'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker'\n }, {\n value: 'upload',\n label: 'Upload'\n }, {\n value: 'rate',\n label: 'Rate'\n }, {\n value: 'form',\n label: 'Form'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table'\n }, {\n value: 'tag',\n label: 'Tag'\n }, {\n value: 'progress',\n label: 'Progress'\n }, {\n value: 'tree',\n label: 'Tree'\n }, {\n value: 'pagination',\n label: 'Pagination'\n }, {\n value: 'badge',\n label: 'Badge'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert'\n }, {\n value: 'loading',\n label: 'Loading'\n }, {\n value: 'message',\n label: 'Message'\n }, {\n value: 'message-box',\n label: 'MessageBox'\n }, {\n value: 'notification',\n label: 'Notification'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu'\n }, {\n value: 'tabs',\n label: 'Tabs'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb'\n }, {\n value: 'dropdown',\n label: 'Dropdown'\n }, {\n value: 'steps',\n label: 'Steps'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog'\n }, {\n value: 'tooltip',\n label: 'Tooltip'\n }, {\n value: 'popover',\n label: 'Popover'\n }, {\n value: 'card',\n label: 'Card'\n }, {\n value: 'carousel',\n label: 'Carousel'\n }, {\n value: 'collapse',\n label: 'Collapse'\n }]\n }]\n }, {\n value: 'resource',\n label: 'Resource',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'docs',\n label: 'Design Documentation'\n }]\n }]\n };\n }\n };\n<\/script>\n")])])])],2),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cascader"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-option"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled option")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Disable an option by setting a "),t("code",[this._v("disabled")]),this._v(" field in the option object.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clearable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clearable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clearable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Set "),t("code",[this._v("clearable")]),this._v(" attribute for "),t("code",[this._v("el-cascader")]),this._v(" and a clear icon will appear when selected and hovered")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"display-only-the-last-level"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#display-only-the-last-level","aria-hidden":"true"}},[this._v("¶")]),this._v(" Display only the last level")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"multiple-selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#multiple-selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Multiple Selection")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Set "),t("code",[this._v("props.multiple = true")]),this._v(" to use multiple selection.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-any-level-of-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-any-level-of-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select any level of options")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dynamic-loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dynamic-loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dynamic loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filterable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filterable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-option-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-option-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom option content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascader-panel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-panel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader panel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("CascaderPanel")]),this._v(" is the core component of "),t("code",[this._v("Cascader")]),this._v(" which has various of features such as single selection, multiple selection, dynamic loading and so on.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascader-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("-")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("options")]),n("td",[e._v("data of the options，the key of "),n("code",[e._v("value")]),e._v(" and "),n("code",[e._v("label")]),e._v(" can be customize by "),n("code",[e._v("Props")]),e._v(".")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("configuration options, see the following table.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of input")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("placeholder of input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Select")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("whether Cascader is disabled")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("whether selected value can be cleared")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-all-levels")]),n("td",[e._v("whether to display all levels of the selected value in the input")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("collapse-tags")]),n("td",[e._v("whether to collapse tags in multiple selection mode")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("separator")]),n("td",[e._v("option label separator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("' / '")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("whether the options can be searched")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("customize search logic, the first parameter is "),n("code",[e._v("node")]),e._v(", the second is "),n("code",[e._v("keyword")]),e._v(", and need return a boolean value indicating whether it hits.")]),n("td",[e._v("function(node, keyword)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("debounce delay when typing filter keyword, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("before-filter")]),n("td",[e._v("hook function before filtering with the value to be filtered as its parameter. If "),n("code",[e._v("false")]),e._v(" is returned or a "),n("code",[e._v("Promise")]),e._v(" is returned and then is rejected, filtering will be aborted")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("custom class name for Cascader's dropdown")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascader-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the binding value changes")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("triggers when expand option changes")]),n("td",[e._v("an array of the expanding node's parent nodes")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("triggers when Cascader blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("triggers when Cascader focuses")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("triggers when the dropdown appears/disappears")]),n("td",[e._v("true when it appears, and false otherwise")])]),n("tr",[n("td",[e._v("remove-tag")]),n("td",[e._v("triggers when remove tag in multiple selection mode")]),n("td",[e._v("the value of the tag which is removed")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascader-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader Slots")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Slot Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("-")]),t("td",[this._v("the custom content of cascader node, the parameter is { node, data }, which are current Node object and node data respectively.")])]),t("tr",[t("td",[this._v("empty")]),t("td",[this._v("content when there is no matched options.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascaderpanel-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascaderpanel-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" CascaderPanel Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("binding value")]),n("td",[e._v("-")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("options")]),n("td",[e._v("data of the options，the key of "),n("code",[e._v("value")]),e._v(" and "),n("code",[e._v("label")]),e._v(" can be customize by "),n("code",[e._v("Props")]),e._v(".")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("configuration options, see the following table.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascaderpanel-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascaderpanel-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" CascaderPanel Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("triggers when the binding value changes")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("triggers when expand option changes")]),n("td",[e._v("an array of the expanding node's parent nodes")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascaderpanel-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascaderpanel-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" CascaderPanel Slots")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Slot Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("-")]),t("td",[this._v("the custom content of cascader node, the parameter is { node, data }, which are current Node object and node data respectively.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" Props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("expandTrigger")]),n("td",[e._v("trigger mode of expanding options")]),n("td",[e._v("string")]),n("td",[e._v("click / hover")]),n("td",[e._v("'click'")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("whether multiple selection is enabled")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("checkStrictly")]),n("td",[e._v("whether checked state of a node not affects its parent and child nodes")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("emitPath")]),n("td",[e._v("when checked nodes change, whether to emit an array of node's path, if false, only emit the value of node.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("whether to dynamic load child nodes, use with "),n("code",[e._v("lazyload")]),e._v(" attribute")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lazyLoad")]),n("td",[e._v("method for loading child nodes data, only works when "),n("code",[e._v("lazy")]),e._v(" is true")]),n("td",[e._v("function(node, resolve)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("specify which key of node object is used as the node's value")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'value'")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("specify which key of node object is used as the node's label")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'label'")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("specify which key of node object is used as the node's children")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'children'")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("specify which key of node object is used as the node's disabled")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'disabled'")])]),n("tr",[n("td",[e._v("leaf")]),n("td",[e._v("specify which key of node object is used as the node's leaf field")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'leaf'")])])])])}],!1,null,null,null);t.default=o.exports},583:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Switch when indicator is hovered (default)")]),t._v(" "),n("el-carousel",{attrs:{height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",{staticClass:"small"},[t._v(t._s(e))])])}),1)],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Switch when indicator is clicked")]),t._v(" "),n("el-carousel",{attrs:{trigger:"click",height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",{staticClass:"small"},[t._v(t._s(e))])])}),1)],1)]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{"indicator-position":"outside"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:5e3,arrow:"always"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},t._l(6,function(e){return n("el-carousel-item",{key:e},[n("h3",{staticClass:"medium"},[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{height:"200px",direction:"vertical",autoplay:!1}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",{staticClass:"medium"},[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]},{})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Loop a series of images or texts in a limited space")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Combine "),n("code",[e._v("el-carousel")]),e._v(" with "),n("code",[e._v("el-carousel-item")]),e._v(", and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside "),n("code",[e._v("el-carousel-item")]),e._v(" tag. By default the carousel switches when mouse hovers over an indicator. Set "),n("code",[e._v("trigger")]),e._v(" to "),n("code",[e._v("click")]),e._v(", and the carousel switches only when an indicator is clicked.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <div class="block">\n <span class="demonstration">Switch when indicator is hovered (default)</span>\n <el-carousel height="150px">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3 class="small">{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n </div>\n <div class="block">\n <span class="demonstration">Switch when indicator is clicked</span>\n <el-carousel trigger="click" height="150px">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3 class="small">{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n </div>\n</template>\n\n<style>\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 150px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Indicators can be displayed outside the carousel")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("indicator-position")]),e._v(" attribute determines where the indicators are located. By default they are inside the carousel, and setting "),n("code",[e._v("indicator-position")]),e._v(" to "),n("code",[e._v("outside")]),e._v(" moves them outside; setting "),n("code",[e._v("indicator-position")]),e._v(" to "),n("code",[e._v("none")]),e._v(" hides the indicators.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-carousel indicator-position="outside">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n</template>\n\n<style>\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("You can define when arrows are displayed")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("arrow")]),e._v(" attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting "),n("code",[e._v("arrow")]),e._v(" to "),n("code",[e._v("always")]),e._v(" or "),n("code",[e._v("never")]),e._v(" shows/hides the arrows permanently.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-carousel :interval="5000" arrow="always">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3>{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n</template>\n\n<style>\n .el-carousel__item h3 {\n color: #475669;\n font-size: 18px;\n opacity: 0.75;\n line-height: 300px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("When a page is wide enough but has limited height, you can activate card mode for carousels")]),n("demo-block",[n("div",[n("p",[e._v("Setting "),n("code",[e._v("type")]),e._v(" to "),n("code",[e._v("card")]),e._v(" activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-carousel :interval="4000" type="card" height="200px">\n <el-carousel-item v-for="item in 6" :key="item">\n <h3 class="medium">{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n</template>\n\n<style>\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 200px;\n margin: 0;\n }\n\n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n\n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n</style>\n')])])])],2),e._m(5),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n <el-carousel height="200px" direction="vertical" :autoplay="false">\n <el-carousel-item v-for="item in 4" :key="item">\n <h3 class="medium">{{ item }}</h3>\n </el-carousel-item>\n </el-carousel>\n</template>\n\n<style>\n .el-carousel__item h3 {\n color: #475669;\n font-size: 14px;\n opacity: 0.75;\n line-height: 200px;\n margin: 0;\n }\n \n .el-carousel__item:nth-child(2n) {\n background-color: #99a9bf;\n }\n \n .el-carousel__item:nth-child(2n+1) {\n background-color: #d3dce6;\n }\n</style>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indicators"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indicators","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indicators")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arrows"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arrows","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arrows")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"card-mode"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-mode","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card mode")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("By default, "),n("code",[e._v("direction")]),e._v(" is "),n("code",[e._v("horizontal")]),e._v(". Let carousel be displayed in the vertical direction by setting "),n("code",[e._v("direction")]),e._v(" to "),n("code",[e._v("vertical")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("height of the carousel")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("initial-index")]),n("td",[e._v("index of the initially active slide (starting from 0)")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("how indicators are triggered")]),n("td",[e._v("string")]),n("td",[e._v("hover/click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("autoplay")]),n("td",[e._v("whether automatically loop the slides")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("interval")]),n("td",[e._v("interval of the auto loop, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("indicator-position")]),n("td",[e._v("position of the indicators")]),n("td",[e._v("string")]),n("td",[e._v("outside/none")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("arrow")]),n("td",[e._v("when arrows are shown")]),n("td",[e._v("string")]),n("td",[e._v("always/hover/never")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("type of the Carousel")]),n("td",[e._v("string")]),n("td",[e._v("card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loop")]),n("td",[e._v("display the items in loop")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("direction")]),n("td",[e._v("display direction")]),n("td",[e._v("string")]),n("td",[e._v("horizontal/vertical")]),n("td",[e._v("horizontal")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("triggers when the active slide switches")]),t("td",[this._v("index of the new active slide, index of the old active slide")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("setActiveItem")]),n("td",[e._v("manually switch slide")]),n("td",[e._v("index of the slide to be switched to, starting from 0; or the "),n("code",[e._v("name")]),e._v(" of corresponding "),n("code",[e._v("el-carousel-item")])])]),n("tr",[n("td",[e._v("prev")]),n("td",[e._v("switch to the previous slide")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next")]),n("td",[e._v("switch to the next slide")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"carousel-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel-Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("name of the item, can be used in "),n("code",[e._v("setActiveItem")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("text content for the corresponding indicator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=r.exports},585:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},[n("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[n("span",[t._v("Card name")]),t._v(" "),n("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[t._v("Operation button")])],1),t._v(" "),t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n "+t._s("List item "+e)+"\n ")])})],2)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n "+t._s("List item "+e)+"\n ")])}),0)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-row",n._l(2,function(e,t){return a("el-col",{key:e,attrs:{span:8,offset:0<t?2:0}},[a("el-card",{attrs:{"body-style":{padding:"0px"}}},[a("img",{staticClass:"image",attrs:{src:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"}}),n._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("span",[n._v("Yummy hamburger")]),n._v(" "),a("div",{staticClass:"bottom clearfix"},[a("time",{staticClass:"time"},[n._v(n._s(n.currentDate))]),n._v(" "),a("el-button",{staticClass:"button",attrs:{type:"text"}},[n._v("Operating")])],1)])])],1)}),1)],1)},staticRenderFns:[]},{data:function(){return{currentDate:new Date}}}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:12}},[t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"always"}},[this._v("\n Always\n ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"hover"}},[this._v("\n Hover\n ")])],1),this._v(" "),t("el-col",{attrs:{span:8}},[t("el-card",{attrs:{shadow:"never"}},[this._v("\n Never\n ")])],1)],1)],1)},staticRenderFns:[]},{})}},l=n(0),r=Object(l.a)(i,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Integrate information in a card container.")]),e._m(1),n("p",[e._v("Card includes title, content and operations.")]),n("demo-block",[n("div",[n("p",[e._v("Card is made up of "),n("code",[e._v("header")]),e._v(" and "),n("code",[e._v("body")]),e._v(". "),n("code",[e._v("header")]),e._v(" is optional, and its content distribution depends on a named slot.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n <div slot="header" class="clearfix">\n <span>Card name</span>\n <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>\n </div>\n <div v-for="o in 4" :key="o" class="text item">\n {{\'List item \' + o }}\n </div>\n</el-card>\n\n<style>\n .text {\n font-size: 14px;\n }\n\n .item {\n margin-bottom: 18px;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n .clearfix:after {\n clear: both\n }\n\n .box-card {\n width: 480px;\n }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("The header part can be omitted.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n <div v-for="o in 4" :key="o" class="text item">\n {{\'List item \' + o }}\n </div>\n</el-card>\n\n<style>\n .text {\n font-size: 14px;\n }\n\n .item {\n padding: 18px 0;\n }\n\n .box-card {\n width: 480px;\n }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Display richer content by adding some configs.")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("body-style")]),e._v(" attribute defines CSS style of custom "),n("code",[e._v("body")]),e._v(". This example also uses "),n("code",[e._v("el-col")]),e._v(" for layout.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n <el-card :body-style="{ padding: \'0px\' }">\n <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">\n <div style="padding: 14px;">\n <span>Yummy hamburger</span>\n <div class="bottom clearfix">\n <time class="time">{{ currentDate }}</time>\n <el-button type="text" class="button">Operating</el-button>\n </div>\n </div>\n </el-card>\n </el-col>\n</el-row>\n\n<style>\n .time {\n font-size: 13px;\n color: #999;\n }\n \n .bottom {\n margin-top: 13px;\n line-height: 12px;\n }\n\n .button {\n padding: 0;\n float: right;\n }\n\n .image {\n width: 100%;\n display: block;\n }\n\n .clearfix:before,\n .clearfix:after {\n display: table;\n content: "";\n }\n \n .clearfix:after {\n clear: both\n }\n</style>\n\n<script>\nexport default {\n data() {\n return {\n currentDate: new Date()\n };\n }\n}\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("You can define when to show the card shadows")]),n("demo-block",[n("div",[n("p",[e._v("The "),n("code",[e._v("shadow")]),e._v(" attribute determines when the card shadows are displayed. It can be "),n("code",[e._v("always")]),e._v(", "),n("code",[e._v("hover")]),e._v(" or "),n("code",[e._v("never")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="12">\n <el-col :span="8">\n <el-card shadow="always">\n Always\n </el-card>\n </el-col>\n <el-col :span="8">\n <el-card shadow="hover">\n Hover\n </el-card>\n </el-col>\n <el-col :span="8">\n <el-card shadow="never">\n Never\n </el-card>\n </el-col>\n</el-row>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"simple-card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#simple-card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Simple card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"with-images"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#with-images","aria-hidden":"true"}},[this._v("¶")]),this._v(" With images")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shadow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shadow","aria-hidden":"true"}},[this._v("¶")]),this._v(" Shadow")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("header")]),n("td",[e._v("title of the card. Also accepts a DOM passed by "),n("code",[e._v("slot#header")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("body-style")]),n("td",[e._v("CSS style of body")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{ padding: '20px' }")])]),n("tr",[n("td",[e._v("shadow")]),n("td",[e._v("when to show card shadows")]),n("td",[e._v("string")]),n("td",[e._v("always / hover / never")]),n("td",[e._v("always")])])])])}],!1,null,null,null);t.default=r.exports},586:function(e,t,n){"use strict";n.r(t);var a=n(31),i=n(78),l=n(18),r=n.n(l),o={data:function(){return{lang:this.$route.meta.lang,navsData:i,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null}},watch:{"$route.path":function(){var e=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){e.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var e=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),n=location.href.split("#").splice(0,2).join("#");[].slice.call(e).forEach(function(e){var t=e.getAttribute("href");e.href=n+t})}},goAnchor:function(){var t=this;if(1<location.href.match(/#/g).length){var e=location.href.match(/#[^#]+$/g);if(!e)return;var n=document.querySelector(e[0]);if(!n)return;setTimeout(function(e){t.componentScrollBox.scrollTop=n.offsetTop},50)}},handleScroll:function(){var e=this.componentScrollBox.scrollTop;this.showHeader!==this.scrollTop>e&&(this.showHeader=this.scrollTop>e),0===e&&(this.showHeader=!0),this.navFaded||a.a.$emit("fadeNav"),this.scrollTop=e}},computed:{showBackToTop:function(){return!this.$route.path.match(/backtop/)}},created:function(){var t=this;a.a.$on("navFade",function(e){t.navFaded=e})},mounted:function(){this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=r()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(e,t,n){var a=this;n(),setTimeout(function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,a.renderAnchorHref()):a.goAnchor()},100)}},s=(n(313),n(0)),d=Object(s.a)(o,function(){var e=this.$createElement,t=this._self._c||e;return t("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[t("div",{staticClass:"page-container page-component"},[t("el-scrollbar",{staticClass:"page-component__nav"},[t("side-nav",{attrs:{data:this.navsData[this.lang],base:"/"+this.lang+"/component"}})],1),t("div",{staticClass:"page-component__content"},[t("router-view",{staticClass:"content"}),t("footer-nav")],1),this.showBackToTop?t("el-backtop",{attrs:{target:".page-component__scroll .el-scrollbar__wrap",right:100,bottom:150}}):this._e()],1)])},[],!1,null,null,null);t.default=d.exports},588:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"custom-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme","aria-hidden":"true"}},[e._v("¶")]),e._v(" Custom theme")]),n("p",[e._v("Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide four ways to change the style variables.")]),n("h3",{attrs:{id:"online-theme-roller"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#online-theme-roller","aria-hidden":"true"}},[e._v("¶")]),e._v(" Online Theme Roller")]),n("p",[e._v("Use "),n("a",{attrs:{href:"./#/en-US/theme"}},[e._v("Online Theme Roller")]),e._v(" to customize all Design Tokens of global variables and components，and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' part of this section).")]),n("img",{staticStyle:{width:"70%",margin:"30px auto 0",display:"block"},attrs:{src:"https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png"}}),n("h3",{attrs:{id:"changing-theme-color"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changing-theme-color","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changing theme color")]),n("p",[e._v("If you just want to change the theme color of Element, the "),n("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview/#/en-US"}},[e._v("theme preview website")]),e._v(" is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.")]),n("p",[e._v("The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).")]),n("h3",{attrs:{id:"update-scss-variables-in-your-project"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#update-scss-variables-in-your-project","aria-hidden":"true"}},[e._v("¶")]),e._v(" Update SCSS variables in your project")]),n("p",[n("code",[e._v("theme-chalk")]),e._v(" is written in SCSS. If your project also uses SCSS, you can directly change Element style variables. Create a new style file, e.g. "),n("code",[e._v("element-variables.scss")]),e._v(":")]),n("pre",[n("code",{staticClass:"language-html"},[e._v("/* theme color */\n$--color-primary: teal;\n\n/* icon font path, required */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),n("p",[e._v("Then in the entry file of your project, import this style file instead of Element's built CSS:")]),n("pre",[n("code",{staticClass:"language-JS"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),n("div",{staticClass:"tip"},[n("p",[e._v("Note that it is required to override icon font path to the relative path of Element's font files.")])]),n("h3",{attrs:{id:"cli-theme-tool"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cli-theme-tool","aria-hidden":"true"}},[e._v("¶")]),e._v(" CLI theme tool")]),n("p",[e._v("If you project doesn't use SCSS, you can customize themes with our CLI theme tool:")]),n("h4",{attrs:{id:"install"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#install","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Install")])]),n("p",[e._v("First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-theme -g\n")])]),n("p",[e._v("Then install the chalk theme from npm or GitHub.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("# from npm\nnpm i element-theme-chalk -D\n\n# from GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),n("h4",{attrs:{id:"initialize-variable-file"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#initialize-variable-file","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Initialize variable file")])]),n("p",[e._v("After successfully installing the above packages, a command named "),n("code",[e._v("et")]),e._v(" is available in CLI (if the packages are installed locally, use "),n("code",[e._v("node_modules/.bin/et")]),e._v(" instead). Run "),n("code",[e._v("-i")]),e._v(" to initialize the variable file which outputs to "),n("code",[e._v("element-variables.scss")]),e._v(" by default. And you can specify its output directory as you will.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et -i [custom output file]\n\n> ✔ Generator variables file\n")])]),n("p",[e._v("In "),n("code",[e._v("element-variables.scss")]),e._v(" you can find all the variables we used to style Element and they are defined in SCSS format. Here's a snippet:")]),n("pre",[n("code",{staticClass:"language-css"},[e._v("$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n")])]),n("h4",{attrs:{id:"modify-variables"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#modify-variables","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Modify variables")])]),n("p",[e._v("Just edit "),n("code",[e._v("element-variables.scss")]),e._v(", e.g. changing the theme color to red:")]),n("pre",[n("code",{staticClass:"language-CSS"},[e._v("$--color-primary: red;\n")])]),n("h4",{attrs:{id:"build-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#build-theme","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Build theme")])]),n("p",[e._v("After saving the variable file, use "),n("code",[e._v("et")]),e._v(" to build your theme. You can activate "),n("code",[e._v("watch")]),e._v(" mode by adding a parameter "),n("code",[e._v("-w")]),e._v(". And if you customized the variable file's output, you need to add a parameter "),n("code",[e._v("-c")]),e._v(" and variable file's name. By default the build theme file is placed inside "),n("code",[e._v("./theme")]),e._v(". You can specify its output directory with parameter "),n("code",[e._v("-o")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),n("h3",{attrs:{id:"use-custom-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-custom-theme","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use custom theme")]),n("h4",{attrs:{id:"import-custom-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-custom-theme","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Import custom theme")])]),n("p",[e._v('Importing your own theme is just like importing the default theme, only this time you import the file built from "Online Theme Roller" or "CLI tool":')]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n")])]),n("h4",{attrs:{id:"import-component-theme-on-demand"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-component-theme-on-demand","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Import component theme on demand")])]),n("p",[e._v("If you are using "),n("code",[e._v("babel-plugin-component")]),e._v(" for on-demand import, just modify "),n("code",[e._v(".babelrc")]),e._v(" and specify "),n("code",[e._v("styleLibraryName")]),e._v(" to the path where your custom theme is located relative to "),n("code",[e._v(".babelrc")]),e._v(". Note that "),n("code",[e._v("~")]),e._v(" is required:")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n "plugins": [\n [\n "component",\n {\n "libraryName": "element-ui",\n "styleLibraryName": "~theme"\n }\n ]\n ]\n}\n')])]),n("p",[e._v("If you are unfamiliar with "),n("code",[e._v("babel-plugin-component")]),e._v(", please refer to "),n("a",{attrs:{href:"./#/en-US/component/quickstart"}},[e._v("Quick Start")]),e._v(". For more details, check out the "),n("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[e._v("project repository")]),e._v(" of "),n("code",[e._v("element-theme")]),e._v(".")])])}],!1,null,null,null);t.default=i.exports},590:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"internationalization"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#internationalization","aria-hidden":"true"}},[e._v("¶")]),e._v(" Internationalization")]),n("p",[e._v("The default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n")])]),n("p",[e._v("Or if you are importing Element on demand:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// configure language\nlocale.use(lang)\n\n// import components\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),n("p",[e._v("The Chinese language pack is imported by default, even if you're using another language. But with "),n("code",[e._v("NormalModuleReplacementPlugin")]),e._v(" provided by webpack you can replace default locale:")]),n("p",[e._v("webpack.config.js")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("{\n plugins: [\n new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n ]\n}\n")])]),n("h2",{attrs:{id:"compatible-with-vue-i18n-5-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-vue-i18n-5-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible with "),n("code",[e._v("vue-i18n@5.x")])]),n("p",[e._v("Element is compatible with "),n("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("vue-i18n@5.x")]),e._v(", which makes multilingual switching even easier.")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n")])]),n("h2",{attrs:{id:"compatible-with-other-i18n-plugins"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-other-i18n-plugins","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible with other i18n plugins")]),n("p",[e._v("Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n i18n: function (path, options) {\n // ...\n }\n})\n")])]),n("h2",{attrs:{id:"compatible-with-vue-i18n-6-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-vue-i18n-6-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible with "),n("code",[e._v("vue-i18n@6.x")])]),n("p",[e._v("You need to manually handle it for compatibility with "),n("code",[e._v("6.x")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n en: {\n message: 'hello',\n ...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`\n },\n zh: {\n message: '你好',\n ...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`\n }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n locale: 'en', // set locale\n messages, // set locale messages\n})\n\nVue.use(Element, {\n i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n")])]),n("h2",{attrs:{id:"custom-i18n-in-on-demand-components"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#custom-i18n-in-on-demand-components","aria-hidden":"true"}},[e._v("¶")]),e._v(" Custom i18n in on-demand components")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n en: {\n message: 'hello',\n ...enLocale\n },\n zh: {\n message: '你好',\n ...zhLocale\n }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n locale: 'en', // set locale\n messages, // set locale messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n")])]),n("h2",{attrs:{id:"import-via-cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-via-cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" Import via CDN")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n ELEMENT.locale(ELEMENT.lang.en)\n<\/script>\n')])]),n("p",[e._v("Compatible with "),n("code",[e._v("vue-i18n")])]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n Vue.locale(\'en\', ELEMENT.lang.en)\n Vue.locale(\'zh-cn\', ELEMENT.lang.zhCN)\n<\/script>\n')])]),n("p",[e._v("Currently Element ships with the following languages:")]),n("ul",{staticClass:"language-list"},[n("li",[e._v("Simplified Chinese (zh-CN)")]),n("li",[e._v("English (en)")]),n("li",[e._v("German (de)")]),n("li",[e._v("Portuguese (pt)")]),n("li",[e._v("Spanish (es)")]),n("li",[e._v("Danish (da)")]),n("li",[e._v("French (fr)")]),n("li",[e._v("Norwegian (nb-NO)")]),n("li",[e._v("Traditional Chinese (zh-TW)")]),n("li",[e._v("Italian (it)")]),n("li",[e._v("Korean (ko)")]),n("li",[e._v("Japanese (ja)")]),n("li",[e._v("Dutch (nl)")]),n("li",[e._v("Vietnamese (vi)")]),n("li",[e._v("Russian (ru-RU)")]),n("li",[e._v("Turkish (tr-TR)")]),n("li",[e._v("Brazilian Portuguese (pt-br)")]),n("li",[e._v("Farsi (fa)")]),n("li",[e._v("Thai (th)")]),n("li",[e._v("Indonesian (id)")]),n("li",[e._v("Bulgarian (bg)")]),n("li",[e._v("Polish (pl)")]),n("li",[e._v("Finnish (fi)")]),n("li",[e._v("Swedish (sv-SE)")]),n("li",[e._v("Greek (el)")]),n("li",[e._v("Slovak (sk)")]),n("li",[e._v("Catalunya (ca)")]),n("li",[e._v("Czech (cs-CZ)")]),n("li",[e._v("Ukrainian (ua)")]),n("li",[e._v("Turkmen (tk)")]),n("li",[e._v("Tamil (ta)")]),n("li",[e._v("Latvian (lv)")]),n("li",[e._v("Afrikaans (af-ZA)")]),n("li",[e._v("Estonian (ee)")]),n("li",[e._v("Slovenian (sl)")]),n("li",[e._v("Arabic (ar)")]),n("li",[e._v("Hebrew (he)")]),n("li",[e._v("Lithuanian (lt)")]),n("li",[e._v("Mongolian (mn)")]),n("li",[e._v("Kazakh (kz)")]),n("li",[e._v("Hungarian (hu)")]),n("li",[e._v("Romanian (ro)")]),n("li",[e._v("Kurdish (ku)")]),n("li",[e._v("Uighur (ug-CN)")]),n("li",[e._v("Khmer (km)")]),n("li",[e._v("Serbian (sr)")]),n("li",[e._v("Basque (eu)")]),n("li",[e._v("Kyrgyz (kg)")]),n("li",[e._v("Armenian (hy)")]),n("li",[e._v("Croatian (hr)")])]),n("p",[e._v("If your target language is not included, you are more than welcome to contribute: just add another language config "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[e._v("here")]),e._v(" and create a pull request.")])])}],!1,null,null,null);t.default=i.exports},592:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"installation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[e._v("¶")]),e._v(" Installation")]),n("h3",{attrs:{id:"npm"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[e._v("¶")]),e._v(" npm")]),n("p",[e._v("Installing with npm is recommended and it works seamlessly with "),n("a",{attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-ui -S\n")])]),n("h3",{attrs:{id:"cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" CDN")]),n("p",[e._v("Get the latest version from "),n("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[e._v("unpkg.com/element-ui")]),e._v(" , and import JavaScript and CSS file in your page.")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('\x3c!-- import CSS --\x3e\n<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">\n\x3c!-- import JavaScript --\x3e\n<script src="https://unpkg.com/element-ui/lib/index.js"><\/script>\n')])]),n("div",{staticClass:"tip"},[n("p",[e._v("We recommend our users to lock Element's version when using CDN. Please refer to "),n("a",{attrs:{href:"https://unpkg.com"}},[e._v("unpkg.com")]),e._v(" for more information.")])]),n("h3",{attrs:{id:"hello-world"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[e._v("¶")]),e._v(" Hello world")]),n("p",[e._v("If you are using CDN, a hello-world page is easy with Element. "),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd"}},[e._v("Online Demo")])]),n("iframe",{staticStyle:{width:"100%"},attrs:{height:"265",scrolling:"no",title:"Element demo",src:"//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html",frameborder:"no",allowtransparency:"true",allowfullscreen:"true"}},[e._v("\n See the Pen "),n("a",{attrs:{href:"https://codepen.io/ziyoung/pen/rRKYpd/"}},[e._v("Element demo")]),e._v(" by hetech\n ("),n("a",{attrs:{href:"https://codepen.io/ziyoung"}},[e._v("@ziyoung")]),e._v(") on "),n("a",{attrs:{href:"https://codepen.io"}},[e._v("CodePen")]),e._v(".\n")]),n("p",[e._v("If you are using npm and wish to apply webpack, please continue to the next page: "),n("a",{attrs:{href:"/#/en-US/component/quickstart"}},[e._v("Quick Start")]),e._v(".")])])}],!1,null,null,null);t.default=i.exports},596:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"quick-start"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},[e._v("¶")]),e._v(" Quick start")]),n("p",[e._v("This part walks you through the process of using Element in a webpack project.")]),n("h3",{attrs:{id:"use-vue-cli-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-vue-cli-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use vue-cli@3")]),n("p",[e._v("We provide an "),n("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("Element plugin")]),e._v(" for vue-cli@3, which you can use to quickly build an Element-based project.")]),n("h3",{attrs:{id:"use-starter-kit"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-starter-kit","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use Starter Kit")]),n("p",[e._v("We provide a general "),n("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[e._v("project template")]),e._v(" for you. For Laravel users, we also have a "),n("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[e._v("template")]),e._v(". You can download and use them directly.")]),n("p",[e._v("If you prefer not to use them, please read the following.")]),n("h3",{attrs:{id:"import-element"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-element","aria-hidden":"true"}},[e._v("¶")]),e._v(" Import Element")]),n("p",[e._v("You can import Element entirely, or just import what you need. Let's start with fully import.")]),n("h4",{attrs:{id:"fully-import"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#fully-import","aria-hidden":"true"}},[e._v("¶")]),e._v(" Fully import")]),n("p",[e._v("In main.js:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n});\n")])]),n("p",[e._v("The above imports Element entirely. Note that CSS file needs to be imported separately.")]),n("h4",{attrs:{id:"on-demand"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[e._v("¶")]),e._v(" On demand")]),n("p",[e._v("With the help of "),n("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[e._v("babel-plugin-component")]),e._v(", we can import components we actually need, making the project smaller than otherwise.")]),n("p",[e._v("First, install babel-plugin-component:")]),n("pre",[n("code",{staticClass:"language-bash"},[e._v("npm install babel-plugin-component -D\n")])]),n("p",[e._v("Then edit .babelrc:")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n "presets": [["es2015", { "modules": false }]],\n "plugins": [\n [\n "component",\n {\n "libraryName": "element-ui",\n "styleLibraryName": "theme-chalk"\n }\n ]\n ]\n}\n')])]),n("p",[e._v("Next, if you need Button and Select, edit main.js:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n el: '#app',\n render: h => h(App)\n});\n")])]),n("p",[e._v("Full example (Component list reference "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[e._v("components.json")]),e._v(")")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport {\n Pagination,\n Dialog,\n Autocomplete,\n Dropdown,\n DropdownMenu,\n DropdownItem,\n Menu,\n Submenu,\n MenuItem,\n MenuItemGroup,\n Input,\n InputNumber,\n Radio,\n RadioGroup,\n RadioButton,\n Checkbox,\n CheckboxButton,\n CheckboxGroup,\n Switch,\n Select,\n Option,\n OptionGroup,\n Button,\n ButtonGroup,\n Table,\n TableColumn,\n DatePicker,\n TimeSelect,\n TimePicker,\n Popover,\n Tooltip,\n Breadcrumb,\n BreadcrumbItem,\n Form,\n FormItem,\n Tabs,\n TabPane,\n Tag,\n Tree,\n Alert,\n Slider,\n Icon,\n Row,\n Col,\n Upload,\n Progress,\n Spinner,\n Badge,\n Card,\n Rate,\n Steps,\n Step,\n Carousel,\n CarouselItem,\n Collapse,\n CollapseItem,\n Cascader,\n ColorPicker,\n Transfer,\n Container,\n Header,\n Aside,\n Main,\n Footer,\n Timeline,\n TimelineItem,\n Link,\n Divider,\n Image,\n Calendar,\n Backtop,\n PageHeader,\n CascaderPanel,\n Loading,\n MessageBox,\n Message,\n Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxButton);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Spinner);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\nVue.use(Timeline);\nVue.use(TimelineItem);\nVue.use(Link);\nVue.use(Divider);\nVue.use(Image);\nVue.use(Calendar);\nVue.use(Backtop);\nVue.use(PageHeader);\nVue.use(CascaderPanel);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n")])]),n("h3",{attrs:{id:"global-config"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#global-config","aria-hidden":"true"}},[e._v("¶")]),e._v(" Global config")]),n("p",[e._v("When importing Element, you can define a global config object. For now this object has two properties: "),n("code",[e._v("size")]),e._v(" and "),n("code",[e._v("zIndex")]),e._v(". The property "),n("code",[e._v("size")]),e._v(" sets the default size for all components and the property "),n("code",[e._v("zIndex")]),e._v(" sets the initial z-index (default: 2000) for modal boxes:")]),n("p",[e._v("Fully import Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n")])]),n("p",[e._v("Partial import Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n")])]),n("p",[e._v("With the above config, the default size of all components that have size attribute will be 'small', and the initial z-index of modal boxes is 3000.")]),n("h3",{attrs:{id:"start-coding"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#start-coding","aria-hidden":"true"}},[e._v("¶")]),e._v(" Start coding")]),n("p",[e._v("Now you have implemented Vue and Element to your project, and it's time to write your code. Please refer to each component's documentation to learn how to use them.")]),n("h3",{attrs:{id:"use-nuxt-js"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-nuxt-js","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use Nuxt.js")]),n("p",[e._v("We can also start a project using "),n("a",{attrs:{href:"https://nuxtjs.org/"}},[e._v("Nuxt.js")]),e._v(":")]),n("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[n("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);t.default=i.exports},600:function(e,t,n){"use strict";n.r(t);var a=n(0),i=Object(a.a)({},function(){var e=this.$createElement;return(this._self._c||e)("router-view")},[],!1,null,null,null);t.default=i.exports},602:function(e,t,a){"use strict";a.r(t);a(314);var n=a(0),i=Object(n.a)({},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("Design Disciplines")]),n("el-row",{staticClass:"cards",attrs:{gutter:14}},[n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(202),alt:"Consistency"}}),n("h4",[e._v("Consistency")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(203),alt:"Feedback"}}),n("h4",[e._v("Feedback")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(204),alt:"Efficiency"}}),n("h4",[e._v("Efficiency")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(205),alt:"Controllability"}}),n("h4",[e._v("Controllability")]),n("span")])])],1),n("h3",[e._v("Consistency")]),e._m(0),n("h3",[e._v("Feedback")]),e._m(1),n("h3",[e._v("Efficiency")]),e._m(2),n("h3",[e._v("Controllability")]),e._m(3)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Consistent with real life: ")]),this._v("in line with the process and logic of real life, and comply with languages and habits that the users are used to.")]),t("li",[t("strong",[this._v("Consistent within interface: ")]),this._v("all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Operation feedback: ")]),this._v("enable the users to clearly perceive their operations by style updates and interactive effects.")]),t("li",[t("strong",[this._v("Visual feedback: ")]),this._v("reflect current state by updating or rearranging elements of the page.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Simplify the process: ")]),this._v("keep operating process simple and intuitive.")]),t("li",[t("strong",[this._v("Definite and clear: ")]),this._v("enunciate your intentions clearly so that the users can quickly understand and make decisions.")]),t("li",[t("strong",[this._v("Easy to identify: ")]),this._v("the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Decision making: ")]),this._v("giving advices about operations is acceptable, but do not make decisions for the users.")]),t("li",[t("strong",[this._v("Controlled consequences: ")]),this._v("users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])}],!1,null,"13cd15b3",null);t.default=i.exports},614:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"page-container page-resource"},[n("h2",[e._v("Resource")]),n("p",[e._v("More resources are being developed")]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(218),alt:""}}),n("h3",[e._v("Axure Components")]),n("p",[e._v("By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[e._v("Download")])])]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(219),alt:""}}),n("h3",[e._v("Sketch Template")]),n("p",[e._v("Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');",href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[e._v("Download")])])])])])])}],i=(a(318),a(0)),l=Object(i.a)({},function(){this.$createElement;this._self._c;return this._m(0)},n,!1,null,"2da07f7f",null);t.default=l.exports}}]);
Reference in New Issue View Git Blame Copy Permalink