(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{389:function(e,t,n){var a={"./changelog.vue":532,"./component.vue":536,"./design.vue":804,"./guide.vue":537,"./index.vue":538,"./nav.vue":539,"./resource.vue":805,"./theme-nav.vue":806,"./theme-preview.vue":540,"./theme.vue":541};function l(e){var t=r(e);return n(t)}function r(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}l.keys=function(){return Object.keys(a)},l.resolve=r,(e.exports=l).id=389},393:function(e,t,n){var a={"./zh-CN/alert.md":560,"./zh-CN/avatar.md":561,"./zh-CN/backtop.md":562,"./zh-CN/badge.md":563,"./zh-CN/border.md":564,"./zh-CN/breadcrumb.md":565,"./zh-CN/button.md":566,"./zh-CN/calendar.md":567,"./zh-CN/card.md":568,"./zh-CN/carousel.md":569,"./zh-CN/cascader.md":570,"./zh-CN/checkbox.md":571,"./zh-CN/collapse.md":572,"./zh-CN/color-picker.md":573,"./zh-CN/color.md":574,"./zh-CN/container.md":575,"./zh-CN/custom-theme.md":816,"./zh-CN/date-picker.md":576,"./zh-CN/datetime-picker.md":577,"./zh-CN/descriptions.md":578,"./zh-CN/dialog.md":579,"./zh-CN/divider.md":580,"./zh-CN/drawer.md":581,"./zh-CN/dropdown.md":582,"./zh-CN/empty.md":583,"./zh-CN/form.md":584,"./zh-CN/i18n.md":817,"./zh-CN/icon.md":585,"./zh-CN/image.md":586,"./zh-CN/infiniteScroll.md":587,"./zh-CN/input-number.md":588,"./zh-CN/input.md":589,"./zh-CN/installation.md":818,"./zh-CN/layout.md":590,"./zh-CN/link.md":591,"./zh-CN/loading.md":592,"./zh-CN/menu.md":593,"./zh-CN/message-box.md":594,"./zh-CN/message.md":595,"./zh-CN/notification.md":596,"./zh-CN/page-header.md":597,"./zh-CN/pagination.md":598,"./zh-CN/popconfirm.md":599,"./zh-CN/popover.md":600,"./zh-CN/progress.md":601,"./zh-CN/quickstart.md":819,"./zh-CN/radio.md":602,"./zh-CN/rate.md":603,"./zh-CN/result.md":604,"./zh-CN/select.md":605,"./zh-CN/skeleton.md":606,"./zh-CN/slider.md":607,"./zh-CN/steps.md":608,"./zh-CN/switch.md":609,"./zh-CN/table.md":610,"./zh-CN/tabs.md":611,"./zh-CN/tag.md":612,"./zh-CN/time-picker.md":613,"./zh-CN/timeline.md":614,"./zh-CN/tooltip.md":615,"./zh-CN/transfer.md":616,"./zh-CN/transition.md":617,"./zh-CN/tree.md":618,"./zh-CN/typography.md":619,"./zh-CN/upload.md":620};function l(e){var t=r(e);return n(t)}function r(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}l.keys=function(){return Object.keys(a)},l.resolve=r,(e.exports=l).id=393},427:function(e,t,n){},428:function(e,t,n){},429:function(e,t,n){},430:function(e,t,n){},431:function(e,t,n){},432:function(e,t,n){},433:function(e,t,n){},446:function(e,t,n){},448:function(e,t,n){},476:function(e,t,n){"use strict";var a=n(427);n.n(a).a},477:function(e,t,n){"use strict";var a=n(428);n.n(a).a},478:function(e,t,n){"use strict";var a=n(429);n.n(a).a},479:function(e,t,n){"use strict";var a=n(430);n.n(a).a},480:function(e,t,n){"use strict";var a=n(431);n.n(a).a},481:function(e,t,n){"use strict";var a=n(432);n.n(a).a},482:function(e,t,n){"use strict";var a=n(433);n.n(a).a},497:function(e,t,n){"use strict";var a=n(446);n.n(a).a},504:function(e,t,n){"use strict";var a=n(448);n.n(a).a},532:function(e,t,n){"use strict";n.r(t);var a=n(0),l={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:"geng-xin-ri-zhi"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#geng-xin-ri-zhi","aria-hidden":"true"}},[e._v("¶")]),e._v(" 更新日志")]),n("h3",{attrs:{id:"2-15-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.10")]),n("p",[n("em",[e._v("2022-09-13")])]),n("h4",{attrs:{id:"bug-xiu-fu"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("修复 props placement 报错信息 问题 (#21908 by @lqzhgood)")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("修复 使用 Loading 的DOM元素 sticky失效 问题 (#22087 by @zzjjhh001)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("修复 Popover 文案 (#22083 by @lm312)")]),n("li",[e._v("修复 Skeleton 文案 (#22092 by @lm312)")]),n("li",[e._v("修复 DatePicker 文案 (#21970 by @guojiongwei)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("修复 懒加载默认选中 问题 (#21934 by @kiss-yu)")])])])]),n("h4",{attrs:{id:"you-hua"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("新增 僧伽罗语 翻译 (#21936 by @sayuri-gi)")]),n("li",[e._v("更新 西班牙语 翻译 (#21924 by @jcardus)")]),n("li",[e._v("新增 马来西亚语 翻译 (#22028 by @iorange0411)")]),n("li",[e._v("更新 斯瓦希里语 翻译 (#21904 by @Cholowao)")])])]),n("li",[e._v("Utils\n"),n("ul",[n("li",[e._v("更新 date-util.js (#22099 by @Due07)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("新增 months 和 years 类型 (#21918 by @akiko123456)")])])])]),n("h3",{attrs:{id:"2-15-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.9")]),n("p",[n("em",[e._v("2022-06-02")])]),n("h4",{attrs:{id:"bug-xiu-fu-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("表头抖动修复 (#21863 by @bofeng)")]),n("li",[e._v("按需引用时 "),n("code",[e._v("el-checkbox not imported")]),e._v(" 修复 (#21828 by @bobohuochai)")])])]),n("li",[e._v("FormItem\n"),n("ul",[n("li",[e._v("修复 rules 切换为 null 时校验未重置 问题 (#21892 by @bofeng)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("修复 切换 options 时错误报错信息 问题 (#21759 by @louiebb)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("修复 Popover 文案 (#21843 by @lod61)")]),n("li",[e._v("修复 Calendar 文案 (#21814 by @GoJam11)")]),n("li",[e._v("修复 TimePicker 文案 (#21803 by @Alanscut)")]),n("li",[e._v("修复 DatePicker 文案 (#21877 by @Nirvanaiu)")])])]),n("li",[e._v("其他\n"),n("ul",[n("li",[e._v("官网在线演示功能修复 (#21863 by @bofeng)")])])])]),n("h4",{attrs:{id:"you-hua-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("新增 斯瓦希里语 翻译 (#21895 by @quilltouch)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("本地开发时可从 devTools 工具跳转源代码 (#21633 by @polemices)")])])]),n("li",[e._v("DatePicker & Cascader\n"),n("ul",[n("li",[e._v("弹窗方向优化 (#21806 by @XivLaw)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("优化 "),n("code",[e._v("getFirstElement")]),e._v(" 代码 (#21886 by @zhankang)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("优化 scss 代码 (#21558 by @cheese-git)")])])])]),n("h3",{attrs:{id:"2-15-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.8")]),n("p",[n("em",[e._v("2022-04-12")])]),n("h4",{attrs:{id:"bug-xiu-fu-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Drawer\n"),n("ul",[n("li",[e._v("修复 appendToBody 失效问题 (#21264 by @cs1707)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("修复 toggling value 问题(#19473 by @EdwinBetanc0urt)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("修复 input 文案 (#21723 by @justforuse)")]),n("li",[e._v("修复 DatePicker 文案 (#21663 by @justforuse)")]),n("li",[e._v("修复 Skeleton 文案 (#21601 by @yanwydxf)")])])]),n("li",[e._v("其他\n"),n("ul",[n("li",[e._v("修复 vue 版本(#21736 by @ckvv)")])])])]),n("h4",{attrs:{id:"you-hua-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("新增 阿塞拜疆语 翻译 (#21012 by @ricardotondello)")]),n("li",[e._v("更新 斯洛文尼亚语 翻译 (#21729 by @patik123)")]),n("li",[e._v("更新 斯洛伐克语 翻译 (#21711 by @sjaustirni )")]),n("li",[e._v("新增 冰岛语 的翻译 (#21709 by @aronhr)")]),n("li",[e._v("新增 孟加拉 语的翻译 (#21485 by @llwwtt)")])])])]),n("h4",{attrs:{id:"qi-ta"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta","aria-hidden":"true"}},[e._v("¶")]),e._v(" 其他")]),n("ul",[n("li",[e._v("因兼容性考虑，撤回2.15.7关于node-sass的更新(#21019 by @linxsbox)，重新评估后会在后续合适版本上线")])]),n("h3",{attrs:{id:"2-15-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.7")]),n("p",[n("em",[e._v("2021-11-18")])]),n("h4",{attrs:{id:"bug-xiu-fu-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("修复 filter 模式下，点击图标不能触发下拉的 bug (#21314 by @dennyak47)")]),n("li",[e._v("修复 composition 模式下 keydown 事件 (#21336 by @bchen1029)")])])]),n("li",[e._v("Badge\n"),n("ul",[n("li",[e._v("修复 is-dot class (#21308 by @adaex)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("validate 方法返回错误信息 (#21374 by @cs1707)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复 resizeObserver loop limit exceeded (#21255 by @tomieric)")]),n("li",[e._v("修复 toggleAllSelection (#21456 by @cs1707)")]),n("li",[e._v("优化 table 性能 (#21330 by @cs1707)")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("修复 disabled 优先级 (#21375 by @cs1707)")])])]),n("li",[e._v("Descriptions\n"),n("ul",[n("li",[e._v("修复 label slot bug (#21462 by @cs1707)")])])]),n("li",[e._v("SASS\n"),n("ul",[n("li",[e._v("node-sass 替换为 dart-sass (#21019 by @linxsbox)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("修复 skeleton 文案 (#21408 by @zhhbstudio)")])])])]),n("h3",{attrs:{id:"2-15-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.6")]),n("p",[n("em",[e._v("2021-09-02")])]),n("h4",{attrs:{id:"bug-xiu-fu-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("修复浏览器缩放模式下抖动的 bug (#21207 by @cs1707)")]),n("li",[e._v("优化性能 (#21231 by @cs1707)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("修复多选模式下文字溢出的 bug (#21237 by @cs1707)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("增加 disabled 属性 (#21235 by @mshioda)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("修复浏览器返回后保留状态的 bug (#21250 by @cs1707)")])])]),n("li",[e._v("Descriptions\n"),n("ul",[n("li",[e._v("修复类型定义 (#21265 by @adaex)")]),n("li",[e._v("修复与表格组件混用样式冲突的问题 (#21254 by @adaex)")])])]),n("li",[e._v("Drawer\n"),n("ul",[n("li",[e._v("修复 append-to-body (#21264 by @cs1707)")])])]),n("li",[e._v("Local\n"),n("ul",[n("li",[e._v("修复 italian 翻译错误 (#21012 by @ricardotondello)")])])])]),n("h3",{attrs:{id:"2-15-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.5")]),n("p",[n("em",[e._v("2021-08-04")])]),n("h4",{attrs:{id:"bug-xiu-fu-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("修复 resetInputHeight 报错的 bug (#21201 by @cs1707)")])])])]),n("h3",{attrs:{id:"2-15-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.4")]),n("p",[n("em",[e._v("2021-08-03")])]),n("h4",{attrs:{id:"xin-te-xing"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Descriptions\n"),n("ul",[n("li",[e._v("新增 Descriptions 组件 (#21129 by @cs1707)")])])]),n("li",[e._v("Result\n"),n("ul",[n("li",[e._v("新增 Result 组件 (#21171 by @cs1707)")])])])]),n("h4",{attrs:{id:"bug-xiu-fu-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Utils\n"),n("ul",[n("li",[e._v("修复 isScroll (#21098 by @canvascat)")])])]),n("li",[e._v("Translation\n"),n("ul",[n("li",[e._v("更新 it.js (#21133 by @bliberi)")])])]),n("li",[e._v("RadioGroup\n"),n("ul",[n("li",[e._v("修复 RadioGroup 与 component 兼容的 bug (#20783 by @lceric)")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("修复 message[type] (#21088 by @cs1707)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("修复 setActiveItem 重置计时 (#20846 by @Nekojita1)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("修复 emitPath (#21185 by @cs1707)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("修复 filterable bug (#17494 by @profore)")]),n("li",[e._v("修复浏览器缩放模式下抖动的 bug (#21197 by @cs1707)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("修复 insertChild (#21194 by @cs1707)")])])])]),n("h3",{attrs:{id:"2-15-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.3")]),n("p",[n("em",[e._v("2021-06-29")])]),n("h4",{attrs:{id:"xin-te-xing-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Skeleton\n"),n("ul",[n("li",[e._v("新增 Skeleton 组件 (#21038 by @cs1707)")])])]),n("li",[e._v("Empty\n"),n("ul",[n("li",[e._v("新增 Empty 组件 (#21080 by @cs1707)")])])])]),n("h4",{attrs:{id:"bug-xiu-fu-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Local\n"),n("ul",[n("li",[e._v("修复 hr 语言 week 翻译 (#21040 by @cs1707)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复 lazy load data (#21041 by @cs1707)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("修改 form 组件\b hide-required-asterisk 描述 (#21045 by @cs1707)")])])]),n("li",[e._v("Drawer:\n"),n("ul",[n("li",[e._v("修复 destroy (#20715 by @zj9495)")])])]),n("li",[e._v("Row\n"),n("ul",[n("li",[e._v("修复 align top (#20963 by @cs1707)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("修复 value 为 Boolean 类型的bug (#21052 by @cs1707)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("修复 first-day-of-week (#21057 by @cs1707)")])])]),n("li",[e._v("Utils\n"),n("ul",[n("li",[e._v("修复 fix isScroll (#21065 by @cs1707)")]),n("li",[e._v("修复 (utils.dom by @fw6)")])])]),n("li",[e._v("TypeScript\n"),n("ul",[n("li",[e._v("增加 CascaderPanel 类型导出 (#21070 by @qige2016)")]),n("li",[e._v("增加 spinner.d.ts (#21090 by @qige2016)")])])])]),n("h3",{attrs:{id:"2-15-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.2")]),n("p",[n("em",[e._v("2021-05-28")])]),n("h4",{attrs:{id:"bug-xiu-fu-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("修复 z-index 增加 keydown 事件 添加 stopPropagation (#20859 by @cs1707)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("修复 password cursor 展示 (#20870 by @cs1707)")]),n("li",[e._v("修复 password icon 在 edge 下的展示 (#20902 by @cs1707)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("修复 interval 和 scale bug (#20931 by @cs1707)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("修复 delete tag bug (#20939 by @cs1707)")])])]),n("li",[e._v("Drawer\n"),n("ul",[n("li",[e._v("支持 overflow auto (#20948 by @cs1707)")])])]),n("li",[e._v("其他\n"),n("ul",[n("li",[e._v("修复 isFunction (#20912 by @cs1707)")])])])]),n("h3",{attrs:{id:"2-15-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.1")]),n("p",[n("em",[e._v("2021-02-23")])]),n("h4",{attrs:{id:"bug-xiu-fu-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Drawer\n"),n("ul",[n("li",[e._v("修复 Drawer bug (by @cs1707)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("修复 image object fit ratio 在 IE 下的 bug  (#19583 by @charlie0228)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("修复 cascader panel active path (#20730 by @cs1707)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("修复 calendar 国际化 bug (#20758 by @iamkun)")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("修复 bugs (by @UxieVerity)")])])])]),n("h4",{attrs:{id:"you-hua-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("更新 Axure 设计资源 v2.1.0 (by @iamkun)")])])])]),n("h3",{attrs:{id:"2-15-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.0")]),n("p",[n("em",[e._v("2021-01-15")])]),n("h4",{attrs:{id:"bug-xiu-fu-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("修复 placeholder 国际化 bug (#17644 by @nzh63)")])])]),n("li",[e._v("Popconfirm\n"),n("ul",[n("li",[e._v("修复 Popconfirm 国际化 bug by @iamkun")])])]),n("li",[e._v("Drawer\n"),n("ul",[n("li",[e._v("修复 focus bug (#20626 by @cs1707)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("图片预览优化 (#20652 by @cs1707)")])])])]),n("h4",{attrs:{id:"you-hua-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("更新法语文档 datetime-picker.md (#20543 by @lonk)")]),n("li",[e._v("更新 Progress 组件文档 (#20641 by @cs1707)")])])])]),n("h3",{attrs:{id:"2-14-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-14-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.14.1")]),n("p",[n("em",[e._v("2020-11-11")])]),n("h4",{attrs:{id:"bug-xiu-fu-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("兼容 Vue 2.6 新 v-slot 语法 (#20424 by @iamkun)")])])])]),n("h4",{attrs:{id:"you-hua-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("更新阿拉伯语翻译 (#20202 by @elkattan)")]),n("li",[e._v("更新维吾尔语翻译 (#20177 by @IlhamTahir)")])])])]),n("h3",{attrs:{id:"2-14-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-14-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.14.0")]),n("p",[n("em",[e._v("2020-10-29")])]),n("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin","aria-hidden":"true"}},[e._v("¶")]),e._v(" 非兼容性更新")]),n("ul",[n("li",[e._v("Popconfirm\n"),n("ul",[n("li",[e._v("事件名称修改为 "),n("code",[e._v("confirm")]),e._v(", "),n("code",[e._v("cancel")]),e._v(" (#20240 by @hugiron)")])])])]),n("h4",{attrs:{id:"bug-xiu-fu-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Progress\n"),n("ul",[n("li",[e._v("修复参数错误的问题 (#19985 by @Caaalabash)")])])])]),n("h4",{attrs:{id:"you-hua-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("更新俄语翻译 (#19451 by @yangirov)")]),n("li",[e._v("更新高棉语翻译 (#20077 by @Sovai)")]),n("li",[e._v("更新乌克兰语翻译 (#20344 by @MammutAlex)")])])])]),n("h3",{attrs:{id:"2-13-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-13-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.13.2")]),n("p",[n("em",[e._v("2020-05-18")])]),n("h4",{attrs:{id:"bug-xiu-fu-14"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-14","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("修复 'change event' 错误 (#19200 by @sxzz)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("更新错误状态 (#19194 by @lhx6538665)")])])])]),n("h4",{attrs:{id:"you-hua-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("更新 ru-RU popconfirm 翻译 (#19220 by @Opppex)")]),n("li",[e._v("更新 vi 翻译 (#19244 by @quangln2810)")]),n("li",[e._v("更新 Catalan 和 Spanish 翻译 (#19296 by @Ismaaa)")]),n("li",[e._v("更新 Indonesia 翻译 (#19320) by @therour)")]),n("li",[e._v("更新 Brazilian Portuguese 翻译 (#19374 by @diegomengarda)")])])])]),n("h3",{attrs:{id:"2-13-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-13-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.13.1")]),n("p",[n("em",[e._v("2020-04-13")])]),n("h4",{attrs:{id:"xin-te-xing-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("添加 change 事件 (#17913 by @sxzz)")])])])]),n("h4",{attrs:{id:"bug-xiu-fu-15"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-15","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("修复类型为 textarea 时建议错误问题 (#18478 by @Roojay)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("修复 console.warn 文案拼写错误 (#18264 by @IceFox)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("修复当 preview-src-list 属性不包含 src 时图片预览大图展示为空的问题 (#18975) (#19130 by @luckyCao)")]),n("li",[e._v("修复第二次图片预览时快捷键失效问题 (#18983) (#19156 by @luckyCao)")]),n("li",[e._v("修复 preview-src-list 为空时点击图片会给 body 添加 overflow: scroll 的问题 (#18967 by @inooNgt)")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[e._v("修复和 Form 组件一起使用时错误的行高问题 (#18917 by @Hanx)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("正确计算 inputNumberDisabled (#18439 by @ashuser-pendo)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("更新首页文案 (#19155 by @iamkun)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("更新 Popconfirm 文档 (#18324 by @iamkun)")]),n("li",[e._v("修复 step-strictly 文档拼写问题 (#18705 by @dream2023)")]),n("li",[e._v("修复 Steps 组件文档问题 (#17555 by @haoranyu)")])])])]),n("h3",{attrs:{id:"2-13-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-13-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.13.0")]),n("p",[n("em",[e._v("2019-11-26")])]),n("h4",{attrs:{id:"xin-te-xing-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Popconfirm\n"),n("ul",[n("li",[e._v("新增 Popconfirm 组件 (#17548 by @iamkun)")])])])]),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("BackTop\n"),n("ul",[n("li",[e._v("平滑过渡动画 (by @lon)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("修复选择最小日期的 bug (#17191 by @smk0621)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("修复测试用例  (by @msidolphin)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("增加 font-size 样式 (#17094 by @spengjie)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("头部可自定义 (#17291 by @ziyoung)")]),n("li",[e._v("更新头部样式 (#17284 by @ziyoung)")]),n("li",[e._v("修复时候 filter 之后高度问题 (#17348 by @ziyoung)")]),n("li",[e._v("修复 row-style 失效的 bug (#17002 by @a631807682)")]),n("li",[e._v("修复头部消失的 bug (#17341 by @ziyoung)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("导入 el-button 和 el-button-group (#17376 by @masongzhi)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("修复图表位置 (#17410 by @nullptru)")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("滚动后设置正确的位置 (#16868 by @mattheyan)")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("修复关闭的 offsetHeight（#17564） (#17852 by @gzwgq222)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("ValidateField 的回调应为可选项 (#17314 by @CarterLi)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("修复 TypeScript 3.7 的兼容问题 (#17881 by @CarterLi)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("修复 NavigationDuplicated 在 vue-router@^3.1.0 的报错 (#17269 by @iamkun)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("更新类型文件 (#17550 by @iamkun)")])])]),n("li",[e._v("Progress\n"),n("ul",[n("li",[e._v("增加 strokeLinecap 属性 (#17552 by @iamkun)")])])]),n("li",[e._v("InfiniteScroll\n"),n("ul",[n("li",[e._v("跳过不可见元素触发 (#17553 by @iamkun)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("优化用户体验 (#16985 by @luckyCao)")]),n("li",[e._v("优化大图片展示问题 (#16796 by @luckyCao)")])])]),n("li",[e._v("Drawer\n"),n("ul",[n("li",[e._v("修复 drawer-append-to-body 失效的 bug (#16953 by @JeremyWuuuuu)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("修复空 tag 的 bug (17199 by @luckyCao)")])])]),n("li",[e._v("Scrollbar\n"),n("ul",[n("li",[e._v("修复 FireFox 双滚动条的 bug (#18091 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("I18n\n"),n("ul",[n("li",[e._v("更新 sv-SE.js (#17926 by @FOLLGAD)")]),n("li",[e._v("更新 avatar 组件法语文档 (#17762 by @blombard)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("修复 time-select 文档错误 (#17250 by @wacky6)")]),n("li",[e._v("修复 Drawer 文档错误 (#17122 by @haoranyu)")]),n("li",[e._v("更新 Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)")]),n("li",[e._v("修复 Changelog 文档错误 (#17874 by @renlixin)")]),n("li",[e._v("修复 Loading 示例 (#17862 by @MBearo)")]),n("li",[e._v("增加 input event 相关文档 (#18061 by @zhouxinyong)")]),n("li",[e._v("移除 Input repeat change event 相关文档 (#18085 by @zhouxinyong)")])])])]),n("h3",{attrs:{id:"2-12-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-12-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.12.0")]),n("p",[n("em",[e._v("2019-08-29")])]),n("h4",{attrs:{id:"xin-te-xing-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("添加 close-delay 属性 (#16671 by @LachlanStuart)")])])]),n("li",[e._v("Theme\n"),n("ul",[n("li",[e._v("增加 Chrome 插件: Element Theme Extension (#16686 by @iamkun)")])])]),n("li",[e._v("Icon\n"),n("ul",[n("li",[e._v("支持 font-display 属性的配置 (#16805 by @iamfaizalandyka)")])])])]),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("Table\n"),n("ul",[n("li",[e._v("在表头拖拽后阻止 click 事件的触发 (#16850 by @ziyoung)")]),n("li",[e._v("修复表头 display 为 none 造成浏览器崩溃的问题 (#16956 by @luckyCao)")]),n("li",[e._v("修复没有数据的时表格高度问题 (#16861 by @ziyoung)")]),n("li",[e._v("调用 toggleExpansion 不再抛出异常 (#16304 by @yyjjqq94)")]),n("li",[e._v("挂载时不再触发 sort-change 事件 (#17113 by @a631807682)")]),n("li",[e._v("修复 setCurrentRow 方法不生效的问题 (#16879 by @ziyoung)")]),n("li",[e._v("修复当数据异步加载时，expand-row-keys 不生效的问题 (#16899 by @ziyoung)")]),n("li",[e._v("把 toggleAllSelection 设置为 Table 示例的属性 (#17137 by @ziyoung)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("修复文字与复选框之间的距离 (#16799 by @Hazlank)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("修复 TabItem 位置不正确的问题 (#16520 by @victorting)")]),n("li",[e._v("修复高亮的 Tab 不在可视区的问题 (#17033 by @nullptru)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("修复日期的显示问题 (#16772 by @ubitoffee)")]),n("li",[e._v("修复在夏令时的显示问题 (#17208 by @iamkun)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("修复 CascaderPanel 的显示问题 (#16716 by @zhangHongEn)")]),n("li",[e._v("禁用状态下，关闭按钮不显示 (#16224 by @yyjjqq94)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("修复韩语输入问题 (#15069 by @MoonHyuk)")]),n("li",[e._v("触发清除按钮的点击事件 (#16576 by @a631807682)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("过滤时，不收起下拉框 (#17205 by @luckyCao)")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[e._v("修复样式问题 (#17206 by @iamkun)")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("添加 SCSS 变量 (#16365 by @haoranyu)")])])]),n("li",[e._v("RadioGroup\n"),n("ul",[n("li",[e._v("is 指定时，不产生非法的 HTML 片段 (#17070 by @nullptru)")])])]),n("li",[e._v("Divider\n"),n("ul",[n("li",[e._v("支持自定义类 (#17078 by @island205)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("修复 change 的触发时机 (#16705 by @iamkun)")])])]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("不修改传入的 option (#16704 by @iamkun)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("给 picker-option 添加 className 属性 (#16632 by @iamkun)")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("修复时间选择滚动条的问题 (#16854 by @jesse-li)")])])])]),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("Checkbox\n"),n("ul",[n("li",[e._v("提高可访问性 (#16575 by @tylertrotter)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("更新 changelog (#16773 by @SimonaliaChen)")]),n("li",[e._v("更新贡献指南 (#14800 by @sinchang)")]),n("li",[e._v("修复 Drawer 文档中的拼写错误 (#16848 by @winkay)")]),n("li",[e._v("更新自定义主题 (#16983 by @iamkun)")]),n("li",[e._v("新增 Esperanto 翻译 (#16955 by @maxkoryukov)")]),n("li",[e._v("更新 input-number 文档 (#16316 by @luckyCao)")]),n("li",[e._v("更新 Spanish 文档 (#16961 #16548 by @Gonzalo2310)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("更新加泰罗尼亚语翻译 (#14722 by @oscaralbareda)")]),n("li",[e._v("更新阿拉伯语翻译 (#16653 by @l3op)")])])]),n("li",[e._v("Test\n"),n("ul",[n("li",[e._v("修复拼写错误 (#16672 by @boomler)")]),n("li",[e._v("优化 image 的单元测试 (#16847 by @a631807682)")])])]),n("li",[e._v("Types\n"),n("ul",[n("li",[e._v("修复 httprequest 的类型 (#16633 by @luckyCao)")])])])]),n("h3",{attrs:{id:"2-11-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-11-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.11.1")]),n("p",[n("em",[e._v("2019-07-26")])]),n("h4",{attrs:{id:"bug-xiu-fu-16"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-16","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("修复 Image 组件 SSR 兼容性 (#16737 by @luckyCao)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("更新 dart-sass 的兼容性 (#16744 by @LewisChennnnn)")])])])]),n("h3",{attrs:{id:"2-11-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-11-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.11.0")]),n("p",[n("em",[e._v("2019-07-25")])]),n("h4",{attrs:{id:"xin-te-xing-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Drawer\n"),n("ul",[n("li",[e._v("新增抽屉组件 (#16577 by @JeremyWuuuuu)")])])])]),n("h4",{attrs:{id:"bug-xiu-fu-17"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-17","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("修复 CSS 样式问题 (#16006 by @Hazlank)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("更新类型定义为泛类型 (#15934 by @JeremyWuuuuu)")]),n("li",[e._v("修复设置节点 isCurrent 的为 false 的问题 (#15870 by @kkkisme)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("更新 split-button 默认颜色 (#15931 by @JuniorTour)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("修复一级菜单更新问题 (#16399 by @luckyCao)")]),n("li",[e._v("懒加载时设默认值 (#16420 by @luckyCao)")]),n("li",[e._v("修复当节点值重复时的显示问题 (#15935 by @junyiz)")]),n("li",[e._v("对外暴露 getCheckedNodes 和修复 options 改变会影响选中的问题 (#16709 by @SimonaliaChen)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("更新显示正确的 header 的逻辑 (#16354 by @ziyoung)")])])]),n("li",[e._v("Submenu\n"),n("ul",[n("li",[e._v("修复 append-to-body 问题 (#16289 by @a631807682)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复 tree table 数据更新问题 (#16481 by @island205)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("修复内存泄漏问题 (#16463 by @island205)")])])]),n("li",[e._v("InfiniteScroll\n"),n("ul",[n("li",[e._v("更新命名和说明 (#16698 by @iamkun)")])])]),n("li",[e._v("Avatar\n"),n("ul",[n("li",[e._v("修复图片不居中的问题 (#16489 by @luckyCao)")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("增加 destroyOnClose 属性 (#16455 by @ziyoung)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("增加大图预览 (#16333 by @luckyCao)")])])])]),n("h4",{attrs:{id:"you-hua-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("修复 dropdown 示例 (#16193 by @webxmsj)")]),n("li",[e._v("修正笔误 (#15971 by @howiefh)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("更新泰文翻译 (#16689 by @ponkrit)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("更新基础 API 地址 (#16607 by @iamkun)")]),n("li",[e._v("增加 Form 的主题 token (#16699 by @iamkun)")]),n("li",[e._v("更新统计 (#16609 by @iamkun)")]),n("li",[e._v("修复文档锚点问题 (#16692 by @iamkun)")])])])]),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("p",[n("em",[e._v("2019-07-02")])]),n("h4",{attrs:{id:"bug-xiu-fu-18"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-18","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("排序 icon 问题修复 (#15439 by @bezany)")]),n("li",[e._v("修复 "),n("code",[e._v("append")]),e._v(" slot 存在时布局错位问题 (#16332 by @ziyoung)")]),n("li",[e._v("修复 "),n("code",[e._v("showOverflowTooltip")]),e._v(" 更新无效的问题 (#16295 by @a631807682)")]),n("li",[e._v("修复 "),n("code",[e._v("FilterPanel")]),e._v(" 中 "),n("code",[e._v("Scrollbar")]),e._v(" 未注册问题  (#16246 by @ziyoung)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("更新版本号，修复文档问题 (#16233 by @ziyoung)")]),n("li",[e._v("修复英文首页样式问题 (#16254 by @iamkun)")])])])]),n("h4",{attrs:{id:"you-hua-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("兼容 IE (#16334 by @ziyoung)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("更新钉钉3群二维码 (#16236 by @iamkun)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("更新主题编辑器文档 (#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:"xin-te-xing-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("支持乌兹别克语 (#15796 by @ogabek96)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("支持 "),n("code",[e._v("first-day-of-week")]),e._v(" 配置 (#16047 by @ziyoung)")])])]),n("li",[e._v("Avatar\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("Avatar")]),e._v(" 组件 (#16144 by @luckyCao)")])])]),n("li",[e._v("Upload:\n"),n("ul",[n("li",[e._v("支持自定义缩略图模版 (#13192 by @victorzhuk)")])])])]),n("h4",{attrs:{id:"bug-xiu-fu-19"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-19","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("当 "),n("code",[e._v("currentKey")]),e._v(" 为 "),n("code",[e._v("null")]),e._v(" 时取消对树节点的高亮 (#15668 by @yyjjqq94)")]),n("li",[e._v("修复多实例共享数据的问题 #15538 (#15615 by @VanMess)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("更新 "),n("code",[e._v("fileList")]),e._v(" 的类型定义 (#15716 by @underfin)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复加载 icon 不显示的问题 (#15868 by @ziyoung)")]),n("li",[e._v("修复复杂表格中 hover 行背景色问题 (#15504 by @cnlon)")]),n("li",[e._v("修复 "),n("code",[e._v("current-row-key")]),e._v(" 和选择事件的问题 (#15983 by @ziyoung)")]),n("li",[n("code",[e._v("height")]),e._v(" 属性接受更多单位 (#16013 by @ziyoung)")]),n("li",[e._v("修复 "),n("code",[e._v("reserve-selection")]),e._v(" 无效的问题 (#16135 by @ziyoung)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("popper-append-to-body")]),e._v(" 设置后，子菜单无法收起的问题 (#15391 by @PanJiaChen)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("initialInputHeight")]),e._v(" 问题 (#15989 by @yyjjqq94)")]),n("li",[e._v("修复输入中文时 "),n("code",[e._v("default-first-option")]),e._v(" 的行为问题 (#15431 by @VanMess)")]),n("li",[n("code",[e._v("import")]),e._v(" 重复 (#16215 by @lengband)")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("类型定义中添加 "),n("code",[e._v("offset")]),e._v(" 属性 (#16027 by @matjaz)")])])]),n("li",[e._v("Timeline\n"),n("ul",[n("li",[e._v("修复逆序问题 (#16091 by @ziyoung)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("补充 "),n("code",[e._v("input")]),e._v(" 事件文档 (#15588 by @VanMess)")])])]),n("li",[e._v("InfiniteScroll\n"),n("ul",[n("li",[e._v("更新包名 (#16125 by @iamkun)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" 行为与文档不符的问题 (#15438 by @qingdengyue)")])])]),n("li",[e._v("PopupManager\n"),n("ul",[n("li",[e._v("修复无法复写 "),n("code",[e._v("z-index")]),e._v(" 的问题 (#15738 by @luckyCao)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("删除不必要的内容 (#16194 by @Alexeykhr)")]),n("li",[e._v("更正 "),n("code",[e._v("Divider")]),e._v(" 属性类型 (#15889 by @haoranyu)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("更新测试 API 地址 (#15807 by @iamkun)")])])])]),n("h4",{attrs:{id:"you-hua-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Tree\n-优化循环性能 (#15699 by @KingJeason)")]),n("li",[e._v("Theme\n"),n("ul",[n("li",[e._v("更新 GA 打点，修改页底地址链接到主题编辑器 (#16007 by @island205)")])])]),n("li",[e._v("Badge\n"),n("ul",[n("li",[e._v("更新类型定义 (#16198 by @iamkun)")])])]),n("li",[e._v("Avatar\n"),n("ul",[n("li",[e._v("更新主题变量配置 (#16202 by @luckyCao)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("更新葡萄牙语 (#15776 by @gigioSouza)")]),n("li",[e._v("更新波斯语 (#15881 by @pamenary)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("补充入门文档中的组件列表 (#16063 by @pape2016)")]),n("li",[e._v("更新法语文档 (#16208 by @blombard)")]),n("li",[e._v("为 "),n("code",[e._v("Alert")]),e._v(" 添加 默认插槽文档 (#15444 by @Alexeykhr)")]),n("li",[e._v("更新西班牙语文档 (#15840 by @Gonzalo2310)")]),n("li",[e._v("更新法语文档中的拼写错误 (#15837 by @blombard)")]),n("li",[e._v("更新 2.9.2 西班牙文档 (#16185 by @Gonzalo2310)")])])])]),n("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 非兼容性更新")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("移除输入框的成功状态 (#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-xiu-fu-20"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-20","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("修复 TS 定义文件 (#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:"xin-te-xing-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Tree Table 支持 tree-props，default-expand-all，expand-row-keys 属性, toggle-row-expansion 方法，expand-change 事件 (#15709 by @ziyoung)")])])])]),n("h4",{attrs:{id:"bug-xiu-fu-21"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-21","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复了一些问题 (#15709 by @ziyoung)")])])]),n("li",[e._v("Theme\n"),n("ul",[n("li",[e._v("更新接口域名 (#15784 by @iamkun)")])])])]),n("h4",{attrs:{id:"you-hua-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("更新 InfiniteScroll 组件定义文件 (#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:"xin-te-xing-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Backtop\n"),n("ul",[n("li",[e._v("新增 Backtop 组件 (#15541 by @iamkun)")])])]),n("li",[e._v("PageHeader\n"),n("ul",[n("li",[e._v("新增 PageHeader 组件 (#15714 by @ziyoung)")])])]),n("li",[e._v("InfiniteScroll\n"),n("ul",[n("li",[e._v("新增 InfiniteScroll 指令 (#15567 by @iamkun)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("新增多选模式和 filter-method 方法 (#15611 by @SimonaliaChen)")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("信息依次展示 (#15639 by @island205)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("新增 effect 属性 (#15725 by @SimonaliaChen)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("卡片模式下标题左对齐 (#15695 by @luckyCao)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("支持字符串常量 (#15525 by island205)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("支持 attrs 和 listeners (#15578 by @VanMess)")])])]),n("li",[e._v("Theme\n"),n("ul",[n("li",[e._v("新增 popup 背景配置 (#15412 by @iamkun)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("更新文档首页 (#15682 by @iamkun)")])])])]),n("h4",{attrs:{id:"bug-xiu-fu-22"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-22","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复排序条件为空时的排序问题 (#15012 by @joelxr)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("修复 ssr 问题和 object-fit 的兼容性 (#15346 by @SimonaliaChen)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("修复 show-word-count 样式问题 (#15359 by @lvjiaxuan)")]),n("li",[e._v("修复删除图标样式 (#15354 by @YiiGuxing)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("修复星期展示错误 (#15399 by @qingdengyue)")]),n("li",[e._v("修复十月展示问题 (#15394 by @qingdengyue)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("修复 padding 问题 (#15461 by @SimonaliaChen)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("修复阻止冒泡问题 (#15150 by @infjer)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("修复 form-item 的高度错误 (#15457 by @SimonaliaChen)")]),n("li",[e._v("修复 resetFields 问题 (15181 by @luckyCao)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("修复自定义 tabindex 不生效问题 (#15619 by @SimonaliaChen)")])])]),n("li",[e._v("Link\n"),n("ul",[n("li",[e._v("修复图标 class 问题 (#15752 by @iamkun)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("回滚清除时，设置 value 为 null 的修改 (#15447 by @iamkun)")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("修复 Dom 不更新的问题 (#15123 by @FAKER-A)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("修复事件重复触发问题 (#15178 by @FAKER-A)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("修复点击时样式问题 (#15561 by @luckyCao)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("修复 value 不更新的问题 (#14809 by @OverTree)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("修复 resetFields 问题 (15181 by @luckyCao)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("更新依赖 (#15324 by ziyoung)")])])]),n("li",[e._v("Type\n"),n("ul",[n("li",[e._v("修复 Loading 定义文件 (#15635 by @iamkun)")]),n("li",[e._v("修复 Icon 定义文件 (#15634 by @iamkun)")]),n("li",[e._v("修复 Link 定义文件 (#15402 by @iamkun)")])])])]),n("h4",{attrs:{id:"you-hua-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("重构 (#15611 by @SimonaliaChen)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("更新新建组件的脚本 (by @iamkun)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("重新命名文档变量 (#15185 by @liupl)")]),n("li",[e._v("更新 Image 组件文档 (#15423 by @haoranyu)")]),n("li",[e._v("修复 Form 组件文档错误 (#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-xiu-fu-23"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-23","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Icon\n"),n("ul",[n("li",[e._v("更新 icon (#15272 by @iamkun)")])])]),n("li",[e._v("文档\n"),n("ul",[n("li",[e._v("修复 Form 与 Input 文档样式 (#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-xiu-fu-24"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-24","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Icon\n"),n("ul",[n("li",[e._v("更新 Select 与 Cascader 的 icon (#15264 by @SimonaliaChen)")]),n("li",[e._v("更新 icon (#15258 by @iamkun)")])])])]),n("h4",{attrs:{id:"you-hua-14"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-14","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("更新构建脚本 (#15267 by @ziyoung)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("修复 link 的样式 (#15265 by @iamkun)")])])]),n("li",[e._v("其他\n"),n("ul",[n("li",[e._v("migrating 配置兼容驼峰名称 (#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:"xin-te-xing-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Divider\n"),n("ul",[n("li",[e._v("新增 Divider 组件 (#15055 by @island205)")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("支持通过对象自定义 colors 与 icon-classes 属性 (#15051 by @SimonaliaChen)")])])]),n("li",[e._v("Link\n"),n("ul",[n("li",[e._v("新增 Link 组件 (#15052 by @iamkun)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("新增 Calendar 组件 (#14908 by @ziyoung)")])])]),n("li",[e._v("Icon\n"),n("ul",[n("li",[e._v("新增图标 (#15214 by @iamkun)")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("新增高饱和度主题 (#15041 by @island205)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("新增 Image 组件 (#15117 by @SimonaliaChen)")])])]),n("li",[e._v("Collapse\n"),n("ul",[n("li",[e._v("CollapseItem 支持禁用 (#15076 by @ziyoung)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("新增 direction 属性，支持垂直方向切换 (#15122 by @ziyoung)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("新增 hide-on-single-page 属性 (#15096 by @ziyoung)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("新增 marks 属性 (#15133 by @luckyCao)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("新增 show-word-count 属性 (#15075 by @luckyCao)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("新增 step-strictly 属性 (#15050 by @luckyCao)")])])]),n("li",[e._v("Tooltip, Dropdown, Popover\n"),n("ul",[n("li",[e._v("新增 tabindex 属性 (#15167 by @ziyoung)")])])])]),n("h4",{attrs:{id:"bug-xiu-fu-25"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-25","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug 修复")]),n("ul",[n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("修复标题不换行的问题 (#15008 by @iamkun)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("修复动态表单校验规则不生效的问题 (#14985 by @luckyCao)")]),n("li",[e._v("修复 label 的样式 (#14969 by @ziyoung)")]),n("li",[e._v("当 required 为 true 时，显示星号 (#15144 by @ziyoung)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("修复 slot 未更新的问题 (#14711 by @lucyhao)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复懒加载时加载数据的 bug (#15101 by @ziyoung)")]),n("li",[e._v("在合并单元格时，修复单元格的宽度计算不正确的问题 (#15196 by @ziyoung)")]),n("li",[e._v("提升表格的性能 (#14868 by @ziyoung)")]),n("li",[e._v("初始化时不再触发 sort-change 事件 (#14625 by @PeanutWatson)")]),n("li",[e._v("让 height 与 max-height 属性的行为保持一致 (#14660 by @arthurdenner)")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("修复内容不换行的问题 (#15027 by @iamkun)")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("更新 typescript 定义文件 (#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("slot 改变时，重新渲染 (#15238 by @ziyoung)")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("修复 typescript 定义文件 (#14968 by @agoni1212)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("修复当 value 为 undefined 或者 null 的报错 (#15022 by @luckyCao)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("当前节点被删除后，选中的节点也应该删除 (#14604 by @sinchang)")]),n("li",[e._v("提升性能 (#14881 by @ChenZhuoSteve)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("修复样式 (#14907 by @doing123)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("修复可访问性问题 (#14792 by @erezsob)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("如果 defaultIndex 不存在，activeIndex 应该为空 (#14074 by @hoythan)")])])]),n("li",[e._v("Directive\n"),n("ul",[n("li",[e._v("RepeatClick: 使用 Date.now 提升性能 (#14776 by @pavelmash)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("修复 Upload 的背景颜色 (#15039 by @iamkun)")])])]),n("li",[e._v("Theme\n"),n("ul",[n("li",[e._v("添加无圆角变量 (#15256 by @iamkun)")])])])]),n("h4",{attrs:{id:"you-hua-15"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-15","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("更新中文 changelog (#14965 by @iamkun)")]),n("li",[e._v("当 demo 描述为空时，不再显示 (#15014 by @ziyoung)")]),n("li",[e._v("显示 DevServer 的信息 (#15028 by @iamkun)")]),n("li",[e._v("修复 2.6 changelog 的 bug (#15026 by @iamkun)")]),n("li",[e._v("更新构建脚本 (#14821 by @abc3660170)")]),n("li",[e._v("本次开发时支持热更新 (#15221 by @SimonaliaChen)")]),n("li",[e._v("本地开发时，加载 sourcemap (#15087 by @ibufu)\nDocs")]),n("li",[e._v("重命名 demo 中的变量 (#14602 #15003 #15094 #15105 by @liupl)")]),n("li",[e._v("修复 upload 文档中的错误 (#15023 by @iamkun)")]),n("li",[e._v("更新 Form 文档 (#15040 by @iamkun)")]),n("li",[e._v("更新 Tabs 文档 (#15053 by @iamkun)")]),n("li",[e._v("使用 eleme.cn 作为新域名 (#15139 by @ziyoung)")]),n("li",[e._v("修复 Image 组件的路由名 (#15194 by @iamkun)")]),n("li",[e._v("删除多余的法语翻译 (#15207 by @iamkun)")])])])]),n("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 非兼容性更新")]),n("ul",[n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("禁用情况下，显示小位数 (#15089 by @haoranyu)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("过滤情况下，placeholder 为选中选项的 label (#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:"xiu-fu"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("label-width")]),e._v(" 为 "),n("code",[e._v("auto")]),e._v(" 的样式 (#14955 by @ziyoung)")])])])]),n("h4",{attrs:{id:"you-hua-16"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-16","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("修复文档内图片链接错误 (#14957 by @iamkun)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("修复发布时 mkdir 异常 (#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:"xiu-fu-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("清空时设置 value 为 null (#14322 by @aaronfulkerson)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("当类型改变时更新 DOM (#14889 by @wacky6)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复当有展开列时 "),n("code",[e._v("defaultExpandAll")]),e._v(" 的行为 (#14935 by @ziyoung)")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("可以设置背景色 (#14939 by @ziyoung)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[n("code",[e._v("label-width")]),e._v(" 支持自动宽度 (#14944 by @ziyoung)")])])])]),n("h4",{attrs:{id:"you-hua-17"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-17","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("更新西班牙语文档 (#14913 by @Gonzalo2310)")]),n("li",[e._v("新增组件自动生成法语文档 (#14924 by @ziyoung)")]),n("li",[e._v("更新 Tabs 文档 (#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:"xin-te-xing-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("增加对树形结构数据的支持 (#14632 by @ziyoung)")])])])]),n("h4",{attrs:{id:"xiu-fu-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("阴影样式使用全局主颜色 (#14558 by @Richard-Choooou)")]),n("li",[e._v("当 label 改变时触发更新 (#14496 by @akki-jat)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Table footer 与 body 的对齐一致 (#14730 by @ziyoung)")])])]),n("li",[e._v("NavMenu\n"),n("ul",[n("li",[e._v("修复点击 el-submenu 多次触发 childMenu 问题 (#14443 by @PanJiaChen)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("兼容 Vue 2.6 新 v-slot 语法 (#14832 by @ziyoung)")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("修复十六进制颜色字符串解析问题 (#14793 by @iamkun)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("恢复 pr #13349 (#14847 by @ziyoung)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("当初始值为 true 时默认显示 (#14826 by @ziyoung)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("更新 Cascader 文档 (#14442 by @panhezeng)")])])]),n("li",[e._v("Style\n"),n("ul",[n("li",[e._v("修复媒体查询 sm-only, md-only, lg-only 问题 (#14611 by @sinchang)")])])])]),n("h4",{attrs:{id:"you-hua-18"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-18","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("增加网页描述信息 (#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:"xiu-fu-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("修复 Cascader 文档页的样式 (#14789 by @ziyoung)")]),n("li",[e._v("移除 Cascader 中多余的 DOM 操作 (#14788 by @ziyoung)")]),n("li",[e._v("DateRange 支持夏令时 (#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:"xin-te-xing-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("支持 monthrange 类型 (#14487 by @zxyRealm)")])])]),n("li",[e._v("i18n\n"),n("ul",[n("li",[e._v("添加 Croatian 语言包 (#14360 by @danijelh)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("更新 2.6.1 法语文档，修复笔误 (#14555 by @smalesys)")]),n("li",[e._v("更新法语翻译 (#14643 by @smalesys)")])])])]),n("h4",{attrs:{id:"xiu-fu-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),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("修复 first-day-of-week 的计算 (#14523 by @sinchang)")]),n("li",[e._v("修复 WeekPicker value-format 的问题 (#13754 by @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("修复 #14502 (#14596 by @sinchang)")]),n("li",[e._v("修复简单模式下的样式 (#14610 by @sinchang)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("重命名 Table 文档中的变量 (#14587 by @likwotsing)")]),n("li",[e._v("添加法语文档索引 (#14565 by @iamkun)")]),n("li",[e._v("修复 TimePicker 文档页的样式 (#14579 by @ziyoung)")]),n("li",[e._v("重命名 Upload 文档中的变量 (#14593 by @liupl)")]),n("li",[e._v("在 Form 文档中 添加的 async-validator 文档 (#14694 by @iamkun)")]),n("li",[e._v("修复 Tooltip 文档的 bug (#14748 by @iamkun)")]),n("li",[e._v("修复笔误 (#14751 by @2bj)")]),n("li",[e._v("修复 Switch 在移动端 Webkit 浏览器的高亮问题 (#14703 by @VladG0r)")])])])]),n("h4",{attrs:{id:"you-hua-19"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-19","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Chore:\n"),n("ul",[n("li",[e._v("更新 ci 构建脚本 (#14600 by @ziyoung)")]),n("li",[e._v("更新谷歌统计 (#14560 by @iamkun)")]),n("li",[e._v("添加更多谷歌统计事件 (#14633 by @iamkun)")]),n("li",[e._v("更新聊天组信息 (#14741 by @iamkun)")]),n("li",[e._v("升级测试依赖 (#14735 by @wacky6)")]),n("li",[e._v("升级 gulp (#14745 by @ziyoung)")]),n("li",[e._v("使用 codepen 显示 demo，修复文档中的错误 (#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:"xiu-fu-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[n("strong",[e._v("不再指定 node 版本")]),e._v(" (by @iamkun in #14546)")]),n("li",[e._v("调整 "),n("code",[e._v("deloy-faas.sh")]),e._v(" 中的文档目录 (by @ziyoung in #14553)")]),n("li",[e._v("调整 2.6.0 中 changelog 日期样式 (by @island205 in #14547)")]),n("li",[e._v("修复拼写错误 (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:"xin-te-xing-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Timeline\n"),n("ul",[n("li",[e._v("添加 Timeline 组件 (by @jikkai in #14248)")])])]),n("li",[e._v("DropdownItem\n"),n("ul",[n("li",[n("code",[e._v("el-dropdown-item")]),e._v(" 支持添加 icon (by @gabrielboliveira in #14088)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("添加 "),n("code",[e._v("show-password")]),e._v(" 属性，支持配置显示密码按钮 (by @phshy0607 in #13966)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("添加 slot "),n("code",[e._v("empty")]),e._v(" (by @elfman in #13785)")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("添加 "),n("code",[e._v("highlight-first-item")]),e._v(" 属性，控制是否默认突出显示远程搜索建议中的第一项 (by @YamenSharaf in #14269)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("添加亚美尼亚语支持 (by @hamletbarsamyan in #14214)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("新增法语文档 (by @smalesys in #12153, #14418, #14434)")])])])]),n("h4",{attrs:{id:"you-hua-20"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-20","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("组件对通过 slot 传入的 description 也应用默认样式类 (by @iamkun in #14488)")])])]),n("li",[e._v("InputNumber\n-移除多余的 "),n("code",[e._v("parseFloat")]),e._v(" (by @JuniorTour in #14172)")]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("支持 "),n("code",[e._v("el-menu-item")]),e._v(" 不添加 index (by @georgyfarniev in #13298)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("移除无用的 DOM 操作 (by @elfman in #13643)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("代码优化 (by @elfman in #13973)")])])]),n("li",[e._v("Popup\n"),n("ul",[n("li",[e._v("移除无用代码 (by @KAionro in #14413)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("添加更多文档说明如何贡献代码 (by @island205 in #14355)")]),n("li",[e._v("添加 "),n("code",[e._v("el-input")]),e._v(" 是受控组件的警示 (by @wacky6 in #14463)")]),n("li",[e._v("优化 Table 的文档 (by @luguokong in #14329)")]),n("li",[e._v("更新 Input 文档 (by @iamkun in #14437)")]),n("li",[e._v("优化自定义主题文档 (by @wangguohao in #14297)")]),n("li",[e._v("为 Icon 文档添加 hover 效果 (by @tuxinghuan in #14295)")])])]),n("li",[e._v("Build\n"),n("ul",[n("li",[e._v("压缩 Element 文档站的 JS 和 CSS 文件 (by @iamkun in #14430)")]),n("li",[e._v("优化 Webpack 打包速度，从6分钟优化到1分多 (by @hetech in #14484)")]),n("li",[e._v("添加 CLI 工具，选择版本号 (by @hetech in #14354)")])])]),n("li",[e._v("使用 Stale 来管理过时（暂定1年）的 Issue 和 PR (by @island205 in #14392)")])]),n("h4",{attrs:{id:"wen-ti-xiu-fu"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#wen-ti-xiu-fu","aria-hidden":"true"}},[e._v("¶")]),e._v(" 问题修复")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("修复浏览器标签切换引起的 focus 问题 (by @liupl in #13976)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("修复 TS 定义 (by @NateScarlet in #14278)")])])]),n("li",[e._v("ScrollBar\n"),n("ul",[n("li",[e._v("修复点击鼠标右键导致拖动的问题 (by @xifeiwu in #14196)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("添加 "),n("code",[e._v("validate-event")]),e._v(" 属性，设置改变 Switch 状态时是否触发表单的校验 (by @hetech in #14426)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复多 Table 实例共享 "),n("code",[e._v("toggleAllSelection")]),e._v(" 方法，造成无法切换问题 (by @letanure in #14075)")])])]),n("li",[e._v("Tabs & Dropdown\n"),n("ul",[n("li",[e._v("修复样式问题 (by @hetech in #14452)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("与 Table 统一占位文样式 (by @ColinCll in #14331)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("修复 DatetimePicker 文档问题 (by @iamkun in #14290)")]),n("li",[e._v("修复 DatePicker 文档拼写问题 (by @helmut in #14481)")]),n("li",[e._v("修复分页组件文档样式问题 (by @liuchuzhang in #14451)")])])])]),n("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 非兼容性更新")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复 row 事件的参数顺序 (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:"xiu-fu-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("构建: 修复 "),n("code",[e._v(".babelrc")]),e._v(" 配置问题——导致 Tree 等组件没有动画 (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:"you-hua-21"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-21","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("优化 Message 的代码 (by @vok123 in #14029)")]),n("li",[e._v("移除 gh-pages (by @ziyoung in #14266)")]),n("li",[e._v("添加 IssueHunt 的链接 (by @island205 in #14261)")])]),n("h4",{attrs:{id:"xiu-fu-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("修复 UMD 包在服务器端运行出错的问题 (by @island205 in #14242)")]),n("li",[e._v("修复 Tabbar 高亮时的样式 (by @iamkun in #14240)")]),n("li",[e._v("修复 Table 示例代码的错误 (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:"you-hua-22"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-22","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("文档:\n"),n("ul",[n("li",[e._v("2.5.1 版本西班牙语文档更新 (by @Gonzalo2310 in #14231)")])])])]),n("h4",{attrs:{id:"xiu-fu-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("构建:\n"),n("ul",[n("li",[e._v("删除 umd 模块 "),n("code",[e._v("lib/index.js")]),e._v(" 中本没有的注释 (by @island205 in #14233)")]),n("li",[e._v("修复 nuxt.js 中关于 "),n("code",[e._v("export")]),e._v(" 关键字的报错 (by @island205 in #14232)")]),n("li",[e._v("修复发布 2.5.1 过程中的错误 (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:"you-hua-23"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-23","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("DatePicker：添加月、年高亮的样式（by @Debiancc in #14211）")]),n("li",[e._v("更新 2.5.0 changelog （by @wacky6 in #14217）")])]),n("h4",{attrs:{id:"xiu-fu-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("修复升级 Webpack 4 产生的问题，无法具名 "),n("code",[e._v("import")]),e._v(" 组件，"),n("code",[e._v("ELEMENT.locale()")]),e._v(" 调用报错。（by @island205 in #14220）")]),n("li",[e._v("恢复 2.4.11 文档 (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:"xin-te-xing-14"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-14","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("validate-event")]),e._v(" 属性 (by @ziyoung in #13531)")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[n("code",[e._v("pickerOptions")]),e._v(" 支持 "),n("code",[e._v("selectableRange")]),e._v(" 选项 (by @eeeeeeeason)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("click")]),e._v(" 事件 (by @licdream in #14106)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("新增 柯尔克孜语 (Kyrgyz) (by @zzjframework in #14174)")])])])]),n("h4",{attrs:{id:"you-hua-24"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-24","aria-hidden":"true"}},[e._v("¶")]),e._v(" 优化")]),n("ul",[n("li",[e._v("升级到 webpack@4 (by @jikkai in #14173)")]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("简化内部实现，遵循单向数据流；修复若干相关 Bug (by @wacky6 in #13471)")])])]),n("li",[e._v("更新 Axure 文件，增加新组件 (by @ziyoung in #13773)")])]),n("h4",{attrs:{id:"xiu-fu-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("修正下拉框最后一行显示不完整的问题 (by @ziyoung in #13597)")]),n("li",[e._v("修正下拉框箭头 (by @liuchuzhang in #13762)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("组件销毁时释放内部 Timer (by @elfman in #13820)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("移除已废弃的计算属性的 cache 属性 (by @iamkun in #13737)")]),n("li",[e._v("修正 TypeScript 中 CascaderOption 类型定义 (by @NateScarlet in #13613)")]),n("li",[e._v("修正图标覆盖文字的问题 (by @ziyoung in #13596)")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("改进显示样式 (by @PanJiaChen)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("修正 TimeSpinner 中缺失的 v-for "),n("code",[e._v("key")]),e._v(" 属性 (by @Ende93 in #13547)")]),n("li",[e._v("修正周选择器在跨年时的高亮行为 (by @suyi91 in #13883)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("修复 textarea 时的 DOM 节点引用 (by @laomu1988 @island205 in #13803)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("输入框的值不会小于 1 (by @elfman in #13727)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("修正 hover 的触发行为 (by @goldengecko in #13104)")]),n("li",[e._v("修正弹出框的内存泄漏 (by @qpxtWhite in #13988)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("改进显示样式 (by @ohhoney1)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("改进点击排序箭头时的行为 (by @ohhoney1 in #12890)")]),n("li",[e._v("修正 IE10+ 中 “暂无数据” 提示的垂直布局 (by @imzjy in #13638)")]),n("li",[e._v("修正文档中 "),n("code",[e._v("index")]),e._v(" 的类型说明 (by @ilovefafa in #13628)")]),n("li",[e._v("修正多级表头使用 "),n("code",[e._v("fixed")]),e._v(" 属性时，表尾合计行的显示样式 (by @luckyCao in #13914)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("修正自动滚动 (by @iamkun in #13696)")]),n("li",[e._v("通过面板名称查找面板 (by @iamkun in #13705)")]),n("li",[e._v("使用 "),n("code",[e._v("paneName")]),e._v(" 计算面板样式 (by @iamkun in #13733)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("修正 "),n("code",[e._v("showCheckbox")]),e._v(" 不能影响子节点的问题 (by @KidneyFlower)")]),n("li",[e._v("更新文档和 TypeScript 定义 (by @ziyoung in #13540)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[n("code",[e._v("list-type")]),e._v(" 改变时，保留 "),n("code",[e._v("url")]),e._v(" 属性 (by @elfman in #13771)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("修正源代码缩进 (by @wacky6 in #13955)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("补充加泰罗尼亚语 (Catalan) 翻译 (by @jaumesala)")]),n("li",[e._v("补充俄语 (Russian) 翻译 (by @justlp in #13658)")]),n("li",[e._v("补充芬兰语 (Finnish) 翻译 (by @jenkrisu in #14137)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("更新西班牙语文档至 2.4.11 (by @Gonzalo2310 in #13522)")])])]),n("li",[e._v("其它\n"),n("ul",[n("li",[e._v("移除多余的构建脚本 (by @ziyoung)")]),n("li",[e._v("修正文档超链接 (by @iamkun in #13753)")]),n("li",[e._v("修正文档中不一致的大小写 (by @wonderjar)")]),n("li",[e._v("增加钉钉群的二维码 (by @iamkun in #13957)")]),n("li",[e._v(".gitignore 增加 yarn 日志文件 (by @mimimi in #13922)")]),n("li",[e._v("移除赞助商 多态 (by @island205 in #14156)")]),n("li",[e._v("Update readme qr code src (by @iamkun in #13960)")]),n("li",[e._v("更新 CDN 链接，修正错别字 (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("撤销 pr #13296，修复点击 Menu 外部导致 Submenu 收起的问题，#13478")]),n("li",[e._v("调整小屏幕（xs）媒体查询断点，#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("修复多次点击 Select 才显示下拉列表的问题，#13268")]),n("li",[e._v("Form 禁用时不显示 Input 的 clear 图标，#13208")]),n("li",[e._v("调整 Select，Progress，Autocomplete，Tooltip，Collaspe，TimePicker 的样式，#13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)")]),n("li",[e._v("Carousel 组件新增 "),n("code",[e._v("loop")]),e._v(" 属性，#13217")]),n("li",[e._v("Table 的 data 改变时，高亮行会继续保留，#13200")]),n("li",[e._v("Table 的 header slot 可以接收参数，#13263")]),n("li",[e._v("Table 的 "),n("code",[e._v("clearFilter")]),e._v(" 方法支持参数，#13176")]),n("li",[e._v("Table 单元格内没有内容时不再创建 Tooltip，#13152 (by @rongxingsun)")]),n("li",[e._v("ColorPicker 面板的输入框内容可以正常显示了，#13278")]),n("li",[e._v("在拖拽时，ColorPicker 不再触发表单校验，#13299")]),n("li",[e._v("InputNumber 新增 "),n("code",[e._v("select")]),e._v(" 方法，#13286 (by @st-sloth)")]),n("li",[e._v("Autocomplete 新增 "),n("code",[e._v("clear")]),e._v(" 事件，#12171(by arthurdenner) #13326")]),n("li",[e._v("可以通过点击 Menu 外部来关闭 Menu，#13296")]),n("li",[e._v("Form 的 "),n("code",[e._v("validateField")]),e._v(" 方法可以接收参数，#13319")]),n("li",[e._v("Cascader 新增 "),n("code",[e._v("visible-change")]),e._v(" 事件，#13415")]),n("li",[e._v("DatePicker 新增 range-separator slot， #13272 (by @milworm)")]),n("li",[e._v("Tree 新增 "),n("code",[e._v("iconClass")]),e._v(" 与 "),n("code",[e._v("currentNodeKey")]),e._v(" 属性，#13337 #13197 (by @isnifer)")]),n("li",[e._v("Progress 的 "),n("code",[e._v("status")]),e._v(" 添加了 text #13198 (by @ali-master)")]),n("li",[e._v("修复 Tree 的 "),n("code",[e._v("defaultCheckedKeys")]),e._v(" 导致显示的错误，#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("Form 组件 clearValidate 方法参数支持字符串，#12990 （by @codinglobster）")]),n("li",[e._v("Badge 新增 type 属性，#12991")]),n("li",[e._v("用户可以使用 scoped-slot 来自定义表头，#13012（by @ivanseidel）")]),n("li",[e._v("修复 IE 下 Select 输入框不能输入的问题，#13034（by @GaliMU）")]),n("li",[e._v("Select 多选时，选项不换行，#12329 （by @akki-jat）")]),n("li",[e._v("Select 下拉列表展开后，箭头图标也可以正确显示，#12353（by @firesh）")]),n("li",[e._v("修复 Select 的 size 属性不生效的问题，#13070")]),n("li",[e._v("多选时可以清除 Select 已选中的值，#13049（by @ZSkycat）")]),n("li",[e._v("修复最后一个 TabNav 不能删除的问题，#13039")]),n("li",[e._v("修复 TabNav 中 label 显示不正确的问题，#13178")]),n("li",[e._v("Alert 新增 title slot，#13082（by @Kingwl）")]),n("li",[e._v("修复 Table 中的 tooltip 内容不正确的问题，#13159（by @elfman）")]),n("li",[e._v("优化 Upload 文件列表删除时的动画，#12987")]),n("li",[e._v("当 InputNumber 控制按钮不显示时，调整了边距，#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("Switch 聚焦时不显示轮廓，#12771")]),n("li",[e._v("修复 Dropdown 在 ButtonGroup 中样式问题，#12819 （by @bluejfox）")]),n("li",[e._v("Dialog 新增 opened 事件，#12828")]),n("li",[e._v("修复 TabNav 显示顺序不正确的问题，#12846")]),n("li",[e._v("修复 Tabs 没有滑动到选中 tab 的问题，#12948")]),n("li",[e._v("修复 Tree 节点在拖拽时标识符不显示的问题，#12854")]),n("li",[e._v("Form 的 validate 事件参数中包含了校验的信息，#12860 （by @YamenSharaf）")]),n("li",[e._v("修复 DatePicker 没有校验用户输入时间的合法性问题，#12898")]),n("li",[e._v("修复 Table 表头的 "),n("code",[e._v("render-header")]),e._v("属性不生效的问题，#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("修复 DatePicker 未触发表单检验的问题，#12328，#12348")]),n("li",[e._v("修复 DatePicker 多选时报错的问题，#12347")]),n("li",[e._v("修复 DatePicker 选择时间时 spinner 位置不正确的问题，#12415 （by @rang-ali）")]),n("li",[e._v("修复 Datepicker 输入框自动填充的问题，#12521 （by @abdallanayer）")]),n("li",[e._v("修复 Cascader 中 Input 未高亮的问题，#12341")]),n("li",[e._v("修复 Tabpane 顺序不正确的问题，#12346")]),n("li",[e._v("修复 ColorPicker 取色光标位置不正确的问题，#12376 （by @cnwhy）")]),n("li",[e._v("调整 Submenu 的样式，#12457")]),n("li",[e._v("修复 Submenu 选中后没有高亮的问题，#12479")]),n("li",[e._v("修复 Cascader 选择值不正确的问题，#12508 （by @huangjinqiang）")]),n("li",[e._v("修复 Pagination 输入框值不正确的问题，#12525")]),n("li",[e._v("调整 Pagination 触发事件的顺序，#12530")]),n("li",[e._v("修复 Table 的 filter 不显示的问题，#12539")]),n("li",[e._v("修复 Tree 无法删除节点的问题，#12684")]),n("li",[e._v("修复 Select 在单选时 Input 高度变化的问题，#12719")]),n("li",[e._v("修复 Form 在嵌套时 label 显示不正确的问题，#12748")]),n("li",[e._v("新增 Input 的 autocomplete 属性，废弃 auto-complete 属性，#12514 （by @axetroy）")]),n("li",[e._v("新增 Form 的 slot-scope 展示表单校验信息，#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("修复 Table 的 filter 初始值为空数组时不显示筛选图标的问题，#12165")]),n("li",[e._v("修复 Menu 在更改 "),n("code",[e._v("collapse")]),e._v(" 时不保存菜单激活状态的问题，#12178 (by @elfman)")]),n("li",[e._v("修复 Cascader 未转义特殊字符的问题，#12248")]),n("li",[e._v("修复禁用的 RadioButton 在点击时显示 box-shadow 的问题，#12262")]),n("li",[e._v("修复 Select 初始值为 "),n("code",[e._v("undefined")]),e._v(" 时方向键失效的问题，#12322")]),n("li",[e._v("修复 Select 多选时输入的关键字消失的问题，#12304")]),n("li",[e._v("修复 Select 多选时查询函数没有去抖的问题，#12181")]),n("li",[e._v("修复 Dialog 在全屏显示时宽度不正确的问题，#12203")]),n("li",[e._v("修复 Main 在 IE 下的显示不正确的问题，#12237")]),n("li",[e._v("修复 Input 触发两次表单校验的问题，#12260")]),n("li",[e._v("修复 Tree 在懒加载时添加节点导致节点消失的问题，#12256")]),n("li",[e._v("修复 Tree 节点在拖拽后无法删除的问题，#12279")]),n("li",[e._v("修复 Popover 在 InputNumber 聚焦时不显示的问题，#12284")]),n("li",[e._v("添加 Autocomplete 的 popper-append-to-body 属性，#12241")]),n("li",[e._v("添加 Pagination 的 "),n("code",[e._v("page-size")]),e._v(" 属性 "),n("code",[e._v("sync")]),e._v(" 修饰符的支持，#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("修复 Table 设置 "),n("code",[e._v("class-name")]),e._v(" 对 "),n("code",[e._v("expand")]),e._v(" 列不生效的问题，#12006")]),n("li",[e._v("新增 Table 的 "),n("code",[e._v("toggleAllSelection")]),e._v(" 方法，#12047")]),n("li",[e._v("修复 Input 包含 Select 时，suffix 插槽位置显示不正确的问题，#12108")]),n("li",[e._v("修复 Option 的 "),n("code",[e._v("line-height")]),e._v(" 无法设置的问题，#12120")]),n("li",[e._v("修复初始值为 "),n("code",[e._v("null")]),e._v(" 的 TimeSelect 在执行 "),n("code",[e._v("resetField")]),e._v(" 后无法再赋值的问题，#12010")]),n("li",[e._v("修复 Tree 组件中不响应方向键以外 keydown 事件的问题，#12008")]),n("li",[e._v("修复 Tree 在懒加载情况下选中父节点的问题，#12106")]),n("li",[e._v("Tree 的 "),n("code",[e._v("getCheckedNodes")]),e._v(" 方法新增 "),n("code",[e._v("includeHalfChecked")]),e._v(" 参数，#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("修复重置表单后触发 Select 组件校验问题，#11837")]),n("li",[e._v("修复 Input 组件 "),n("code",[e._v("suffix")]),e._v(" 与 "),n("code",[e._v("append")]),e._v(" 共存时样式错乱问题，#11951")]),n("li",[e._v("修复可清空的只读 Input 仍会显示清空图标的问题，#11967")]),n("li",[e._v("修复 Tree 节点禁用时仍可以选中的问题，#11847")]),n("li",[e._v("修复 Tree "),n("code",[e._v("default-checked-keys")]),e._v(" 属性不生效的问题，#11971")]),n("li",[e._v("修复 Tree 在过滤节点时下 "),n("code",[e._v("empty-text")]),e._v(" 不显示的问题，#11971")]),n("li",[e._v("修复 Table 的 "),n("code",[e._v("empty-text")]),e._v(" 过长时的位置样式问题，#11965")]),n("li",[e._v("修复 Table 的 "),n("code",[e._v("current-row-key")]),e._v(" 设置为 "),n("code",[e._v("null")]),e._v(" 时高亮行不清除的问题，#11866")]),n("li",[e._v("修复当 "),n("code",[e._v("filters")]),e._v(" 为空数组时显示过滤器下拉列表的问题，#11864")]),n("li",[e._v("修复 Radio 的 label 不阻止事件冒泡的问题，#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("修复当自定义 Tree 节点高度时，"),n("code",[e._v("allow-drop")]),e._v(" 不能正常工作的问题，#11797")]),n("li",[e._v("现在 Form 的 "),n("code",[e._v("clearValidate")]),e._v(" 方法支持传入参数，指定需要清空校验结果的 FormItem，#11821")]),n("li",[e._v("新增 MessageBox 的 "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" 属性，#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("修复 Table 的 "),n("code",[e._v("class-name")]),e._v(" 和 "),n("code",[e._v("label-class-name")]),e._v(" 属性不支持动态更新的问题，#11626")]),n("li",[e._v("修复 Table 在 "),n("code",[e._v("highlight-current-row")]),e._v(" 为 "),n("code",[e._v("false")]),e._v(" 时点击行也会触发高亮的问题，#11691 #11563")]),n("li",[e._v("修复 ButtonGroup 中只有一个 "),n("code",[e._v("round")]),e._v(" 或 "),n("code",[e._v("circle")]),e._v(" 的 Button 时的样式错误，#11605")]),n("li",[e._v("修复在某些情况下 Pagination 的条目数选择器的样式错误，#11622")]),n("li",[e._v("修复 Menu 的 "),n("code",[e._v("collapse")]),e._v(" 属性变化后无法使用 "),n("code",[e._v("open")]),e._v(" 方法的问题，#11646")]),n("li",[e._v("Tabs 的 "),n("code",[e._v("before-leave")]),e._v(" 钩子添加了 "),n("code",[e._v("activeName")]),e._v(" 和 "),n("code",[e._v("oldActiveName")]),e._v(" 参数，#11713")]),n("li",[e._v("修复 Cascader 关闭后的聚焦问题，#11588")]),n("li",[e._v("修复 Cascader 在 "),n("code",[e._v("change-on-select")]),e._v(" 状态下点击选项不关闭的问题，#11623")]),n("li",[e._v("现在通过代码改变 Select 的值后会触发表单校验，与 Input 行为一致，#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("移除 Autocomplete 的重复类型声明，#11388")]),n("li",[e._v("修复嵌套在 Form 内的 Select 在 FireFox 浏览器中下拉箭头错位的问题，#11427")]),n("li",[e._v("修复 Select 的初始值为 "),n("code",[e._v("null")]),e._v(" 时仍然显示清除图标的问题，#11460")]),n("li",[e._v("修复禁用的 Radio 在点击时显示 box-shadow 的问题，#11462")]),n("li",[e._v("新增 MessageBox 的 "),n("code",[e._v("iconClass")]),e._v(" 属性，#11499")]),n("li",[e._v("新增 Tabs 的 "),n("code",[e._v("stretch")]),e._v(" 属性，#11476")]),n("li",[e._v("修复 Tabs 开启 "),n("code",[e._v("lazy")]),e._v(" 时渲染顺序异常的问题，#11461")]),n("li",[e._v("修复 Table 展开行时无法保留选中行样式的问题，#11464")]),n("li",[e._v("修复 Tabs 调用 "),n("code",[e._v("before-leave")]),e._v(" 并返回 Promise 的时候，Tabs 会存在 focus 状态的问题，#11386")]),n("li",[e._v("修复 Popover 禁用状态下创建弹出框的问题，#11426")]),n("li",[e._v("修复 Tree 在懒加载状态下添加新节点造成无限循环的问题，#11430 （by @wangjingf）")]),n("li",[e._v("新增 Dialog 的 "),n("code",[e._v("closed")]),e._v(" 事件，#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:"xin-te-xing-15"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-15","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("综合\n"),n("ul",[n("li",[e._v("使用原生 webpack 作为构建和打包工具，#11216")]),n("li",[e._v("可以全局配置弹出层的初始 z-index，#11257")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("hide-loading")]),e._v(" 属性，#11260")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("现在圆形按钮也支持通过 "),n("code",[e._v("size")]),e._v(" 属性改变其尺寸了，#11275")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("precision")]),e._v(" 属性，#11281")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("before-leave")]),e._v(" 钩子，#11259")]),n("li",[e._v("新增 "),n("code",[e._v("lazy")]),e._v(" 属性，#11167（by @Kingwl）")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("sort")]),e._v(" 方法，支持手动排序，#11311")])])])]),n("h4",{attrs:{id:"xiu-fu-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("修复使用中文输入法快速输入文字时会导致视图重新渲染的问题，#11235（by @STLighter）")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("修复当触发元素为 Radio 或 Checkbox 时控制台报错的问题，#11265")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("to")]),e._v(" 属性不支持动态更新的问题，#11286")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("修复在 "),n("code",[e._v("beforeUpload")]),e._v(" 方法返回的 Promise 中 resolve 一个 File 时控制台报错的问题，#11297（by @qusiba）")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("修复内容为空时箭头错位的问题，#11335")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("修复在快速删除搜索内容后输入建议不正确的问题，#11323")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("修复关闭选色器时触发 "),n("code",[e._v("active-change")]),e._v(" 事件的问题，#11304")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复筛选列表过长导致样式超出的问题，#11314")]),n("li",[e._v("修复排序后导致无法正常显示选中行样式的问题，#11348")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("修复单个 Checkbox 不支持表单验证的问题，#11271")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("修复通过空格可以选中被禁用的 Radio 的问题，#11303")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("修复连续打开两个 MessageBox 时 "),n("code",[e._v("el-popup-parent--hidden")]),e._v(" 无法移除的问题，#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("修复当 TableColumn 的 "),n("code",[e._v("prop")]),e._v(" 属性指定的字段在数据源中不存在时，鼠标移入该列单元格会报错的问题，#11137")]),n("li",[e._v("弹出类组件的 "),n("code",[e._v("lockScroll")]),e._v(" 属性不再为父元素添加内联样式，而是添加相应类名，#11114")]),n("li",[e._v("修复 Progress 在 "),n("code",[e._v("status")]),e._v(" 为 exception 时图标不显示的问题，#11172")]),n("li",[e._v("修复可搜索的 Cascader 在输入关键词后，选项的 "),n("code",[e._v("disabled")]),e._v(" 属性失效的问题，#11185")]),n("li",[e._v("修复可展开的 Table 在展开某一行后更新数据源会造成该行无法收起的问题，#11186")]),n("li",[e._v("Tree 的 "),n("code",[e._v("setCurrentKey")]),e._v(" 方法支持传入 "),n("code",[e._v("null")]),e._v("，可取消当前高亮的节点，#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("修复 "),n("code",[e._v("type")]),e._v(" 为 dates 的 DatePicker 在选择非当前月的日期后，面板会跳转至当前月的问题，#10973")]),n("li",[e._v("修复可清空的只读 Input 仍会显示清空图标的问题，#10912")]),n("li",[e._v("修复范围选择的 DatePicker 在未改变值的情况下关闭下拉面板仍会触发 "),n("code",[e._v("change")]),e._v(" 事件的问题，#11017")]),n("li",[e._v("修复 Select 在有分组选项时不能正确通过键盘导航的问题，#11058")]),n("li",[e._v("新增 Select 的 "),n("code",[e._v("prefix")]),e._v(" 具名 slot，#11063")]),n("li",[e._v("新增 FormItem 的 "),n("code",[e._v("clearValidate")]),e._v(" 方法，#11076")]),n("li",[e._v("新增 Tree 的 "),n("code",[e._v("checkOnClickNode")]),e._v(" 属性，#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("修复 Table 在由于筛选而使原有的滚动条消失后表头各列宽度未及时更新的问题，#10834")]),n("li",[e._v("修复可清空的 Input 在初始值为 "),n("code",[e._v("null")]),e._v(" 时仍然显示清空图标的问题，#10912")]),n("li",[e._v("修复在通过代码改变 ColorPicker 的绑定值后错误地触发 "),n("code",[e._v("active-change")]),e._v(" 事件的问题，#10903（by @zhangbobell）")]),n("li",[e._v("修复可搜索的 Select 在备选项均被禁用时，通过键盘导航会造成无限循环的问题，#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("修复 Tree 的 "),n("code",[e._v("allow-drop")]),e._v(" 回调在使用 "),n("code",[e._v("type")]),e._v(" 参数后的错误行为，#10821")]),n("li",[e._v("修复可搜索的单选 Select 在 IE11 中无法输入搜索关键词的问题，#10822")]),n("li",[e._v("修复单选 Select 在使用鼠标选中某个选项后错误地触发 "),n("code",[e._v("blur")]),e._v(" 事件的问题，#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("修复 DatePicker 的 "),n("code",[e._v("type")]),e._v(" 为 week 时面板错误高亮的问题，#10712")]),n("li",[e._v("修复 InputNumber 初始值为 0 时输入框为空的问题，#10714")]),n("li",[e._v("新增 Select 的 "),n("code",[e._v("automatic-dropdown")]),e._v(" 属性，#10042（by @Seebiscuit）")]),n("li",[e._v("修复 "),n("code",[e._v("disabled")]),e._v(" 的 Rate 仍能通过键盘左右键改变组件值的问题，#10726（by @Richard-Choooou）")]),n("li",[e._v("现在 DatePicker 的 "),n("code",[e._v("type")]),e._v(" 属性可以接收 "),n("code",[e._v("'dates'")]),e._v("，用于选择多个日期，#10650（by @Mini256）")]),n("li",[e._v("新增 Pagination 的 "),n("code",[e._v("prev-click")]),e._v(" 和 "),n("code",[e._v("next-click")]),e._v(" 事件，#10755")]),n("li",[e._v("新增 Pagination 的 "),n("code",[e._v("pager-count")]),e._v(" 属性，#10493（by @chongjohn716）")]),n("li",[e._v("新增 "),n("code",[e._v("type")]),e._v(" 作为 Tree 的 "),n("code",[e._v("allow-drop")]),e._v(" 属性回调的第三个参数，#10792")]),n("li",[e._v("改用 ResizeObserver 对元素的尺寸变化进行监测，#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("删除 SubMenu 在 TypeScript 类型声明中重复的 "),n("code",[e._v("showTimeout")]),e._v(" 属性，#10566（by @kimond）")]),n("li",[e._v("现在 Transfer 数据项的渲染支持通过 scoped slot 自定义，#10577")]),n("li",[e._v("修复点击 Pagination 禁用的上一页、下一页按钮仍会触发 "),n("code",[e._v("current-change")]),e._v(" 事件的问题，#10628")]),n("li",[e._v("修复未绑定值的 Textarea 在 SSR 中会显示 "),n("code",[e._v("undefined")]),e._v(" 的问题，#10630")]),n("li",[e._v("修复 "),n("code",[e._v("type")]),e._v(" 为 border-card 的 Tabs 中被禁用标签项的样式，#10640")]),n("li",[e._v("新增 "),n("code",[e._v("$index")]),e._v(" 作为 Table 的 "),n("code",[e._v("formatter")]),e._v(" 属性回调的第四个参数，#10645")]),n("li",[e._v("修复 TypeScript 类型声明未导出 CheckboxButton 的问题，#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("新增 Card 的 "),n("code",[e._v("shadow")]),e._v(" 属性，#10418（by @YunYouJun）")]),n("li",[e._v("修复 Badge 在 "),n("code",[e._v("value")]),e._v(" 属性为 "),n("code",[e._v("0")]),e._v(" 时不显示上标的问题，#10470")]),n("li",[e._v("修复 Tree 节点拖拽相关的问题，#10474 #10494")]),n("li",[e._v("新增 Autocomplete 的 "),n("code",[e._v("placement")]),e._v(" 属性，#10475")]),n("li",[e._v("现在 "),n("code",[e._v("default-time")]),e._v(" 属性也可用于非范围选择的 DateTimePicker 了，#10321（by @RickMacTurk）")]),n("li",[e._v("修复 TabItem 在浏览器失焦和隐藏后出现蓝色边框的问题，#10503")]),n("li",[e._v("新增 SubMenu 的 "),n("code",[e._v("popper-append-to-body")]),e._v(" 属性，#10515")]),n("li",[e._v("现在非链接的 BreadcrumbItem 在 hover 时不再具有视觉反馈，#10551")]),n("li",[e._v("调整 InputNumber "),n("code",[e._v("change")]),e._v(" 事件的触发时机，使得在回调中能够取得最新的组件绑定值，#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("修复 Autocomplete 报错的问题，#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("修复 Input 的 "),n("code",[e._v("type")]),e._v(" 属性未传递至原生 input 元素的问题，#10415")]),n("li",[e._v("新增 Select 的 "),n("code",[e._v("blur")]),e._v(" 方法，#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:"xin-te-xing-16"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-16","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("现在 TableColumn 的 "),n("code",[e._v("formatter")]),e._v(" 属性可以是动态的，#10184（by @elfman）")]),n("li",[e._v("新增 "),n("code",[e._v("select-on-indeterminate")]),e._v(" 属性，#9924（by @syn-zeta）")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("collapse-transition")]),e._v(" 属性，#8809（by @limichange）")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("select")]),e._v(" 方法，#10229")]),n("li",[e._v("新增 "),n("code",[e._v("blur")]),e._v(" 方法，#10356")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("predefine")]),e._v(" 属性，#10170（by @elfman）")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("draggable")]),e._v("、"),n("code",[e._v("allow-drop")]),e._v(" 和 "),n("code",[e._v("allow-drag")]),e._v(" 属性，以及 "),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(" 和 "),n("code",[e._v("node-drop")]),e._v(" 事件，#9251 #10372（by @elfman）")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[n("code",[e._v("validate")]),e._v(" 方法新增第二个参数，包含未通过本次校验的表单项信息，#10279")]),n("li",[e._v("新增 "),n("code",[e._v("validate")]),e._v(" 事件，#10351")])])]),n("li",[e._v("Progress\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("color")]),e._v(" 属性，#10352（by @YunYouJun）")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("circle")]),e._v(" 属性，#10359（by @YunYouJun）")])])])]),n("h4",{attrs:{id:"xiu-fu-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("修复嵌套复合型 Input 时，FormItem 标签与输入框未对齐的问题，#10189")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("现在折叠状态的菜单项仅在传入 "),n("code",[e._v("title")]),e._v(" slot 时才显示 Tooltip，#10193（by @PanJiaChen）")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("current-change")]),e._v(" 在未发生用户交互时错误触发的问题，#10247")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("现在时间日期选择器下拉面板中的值能够正确地从 "),n("code",[e._v("format")]),e._v(" 属性中获取对应格式了，#10174（by @remizovvv）")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("现在拖拽上传会拦截不在 "),n("code",[e._v("accept")]),e._v(" 属性范围内的文件，#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("新增 Input 的 "),n("code",[e._v("clear")]),e._v(" 事件，#9988（by @blackmiaool）")]),n("li",[e._v("现在 ColorPicker 的手动输入支持 "),n("code",[e._v("hsl")]),e._v("、"),n("code",[e._v("hsv")]),e._v(" 和 "),n("code",[e._v("rgb")]),e._v(" 格式了，#9991")]),n("li",[e._v("修复 DatePicker 在清除初始值时不触发 "),n("code",[e._v("change")]),e._v(" 事件的问题，#9986")]),n("li",[e._v("现在 Rate 的图标类相关属性支持动态更新了，#10003")]),n("li",[e._v("修复含有固定列的 Table 在设置 "),n("code",[e._v("max-height")]),e._v(" 属性后有时不能及时更新布局高度的问题，#10034")]),n("li",[e._v("现在 DatePicker 的范围选择支持先点选结束日期，再点选开始日期了，#8156（by @earlymeme）")]),n("li",[e._v("新增 Pagination 的 "),n("code",[e._v("disabled")]),e._v(" 属性，#10006")]),n("li",[e._v("新增 Popover 的 "),n("code",[e._v("after-enter")]),e._v(" 和 "),n("code",[e._v("after-leave")]),e._v(" 事件，#10047")]),n("li",[e._v("修复重置表单后，用户第一次改变 Select 的值时不触发校验的问题，#10105")]),n("li",[e._v("修复 Table 的固定列在某些情况下宽度不正确的问题，#10130")]),n("li",[e._v("修复调用 MessageBox 未传入 "),n("code",[e._v("title")]),e._v(" 时，打开的 MessageBox 会继承上一个实例的 "),n("code",[e._v("title")]),e._v(" 属性的问题，#10126（by @Pochodaydayup）")]),n("li",[e._v("新增 Slider 的 "),n("code",[e._v("input-size")]),e._v(" 属性，#10154")]),n("li",[e._v("新增 Transfer 的 "),n("code",[e._v("left-check-change")]),e._v(" 和 "),n("code",[e._v("right-check-change")]),e._v(" 事件，#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("修复 Aside、Header 和 Footer 在某些布局中被压缩的问题，#9812")]),n("li",[e._v("修复设置了 "),n("code",[e._v("height")]),e._v(" 属性的 Table 在服务端渲染时无法加载的问题，#9876")]),n("li",[e._v("修复可展开的 Table 在展开某一行后高度未重新计算的问题，#9848")]),n("li",[e._v("修复在 DateTimePicker 中手动输入日期后不能正确触发 "),n("code",[e._v("change")]),e._v(" 事件的问题，#9913")]),n("li",[e._v("修复鼠标右键点击 Select 的输入框会展开选项的问题，#9894（by @openks）")]),n("li",[e._v("新增 Slider 的 "),n("code",[e._v("tooltip-class")]),e._v(" 属性，#9957")]),n("li",[e._v("现在的 Select 在选中选项后仍然处于 focus 状态，#9857（by @Seebiscuit）")]),n("li",[e._v("新增 Transfer 的 "),n("code",[e._v("target-order")]),e._v(" 属性，#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:"xin-te-xing-17"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-17","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("SubMenu 新增 "),n("code",[e._v("popper-class")]),e._v(" 和 "),n("code",[e._v("disabled")]),e._v(" 属性，#9604 #9771")]),n("li",[e._v("现在水平模式下的 Menu 支持多级 SubMenu 了，#9741")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("node-contextmenu")]),e._v(" 事件，#9678")]),n("li",[e._v("现在可以使用 scoped slot 自定义树节点的模板了，#9686")]),n("li",[e._v("新增 "),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(" 方法和 "),n("code",[e._v("check")]),e._v(" 事件，#9718 #9730")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("clearQuery")]),e._v(" 方法，#9753")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("popper-append-to-body")]),e._v(" 属性，#9782")])])])]),n("h4",{attrs:{id:"xiu-fu-14"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-14","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复点击可展开行的展开图标会触发 "),n("code",[e._v("row-click")]),e._v(" 事件的问题，#9654")]),n("li",[e._v("修复某些情况下通过拖动改变列宽后，布局没有同步更新的问题，#9668")]),n("li",[e._v("修复合计行与固定列并存时的样式问题，#9667")])])]),n("li",[e._v("Container\n"),n("ul",[n("li",[e._v("修复布局组件在 IE11 中无法自动填充可用空间的问题，#9655")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("修复在 "),n("code",[e._v("mounted")]),e._v(" 中修改 "),n("code",[e._v("v-loading")]),e._v(" 的值为 true 时不能正确显示 Loading 的问题，#9722")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("修复点击时会触发两次原生 click 事件的问题，#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:"xin-te-xing-18"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-18","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("focus")]),e._v(" 和 "),n("code",[e._v("blur")]),e._v(" 事件，#9184（by @viewweiwu）")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[n("code",[e._v("filter-method")]),e._v(" 方法加入第三个参数 "),n("code",[e._v("column")]),e._v("，#9196（by @liyanlong）")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("prefix-icon")]),e._v(" 和 "),n("code",[e._v("clear-icon")]),e._v(" 属性，#9237（by @AdamSGit）")]),n("li",[e._v("新增 "),n("code",[e._v("default-time")]),e._v(" 属性，#9094（by @nighca）")]),n("li",[n("code",[e._v("value-format")]),e._v(" 属性增加对 "),n("code",[e._v("timestamp")]),e._v(" 的支持，#9319（by @wacky6）")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("组件绑定变量的值支持 "),n("code",[e._v("undefined")]),e._v("，#9361")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("auto-complete")]),e._v(" 属性，#9388")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("disabled")]),e._v(" 属性，#9529")]),n("li",[e._v("新增 "),n("code",[e._v("validateOnRuleChange")]),e._v(" 属性，#8141")])])]),n("li",[e._v("Notificaition\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("closeAll")]),e._v(" 方法，#9514")])])])]),n("h4",{attrs:{id:"xiu-fu-15"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-15","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("修复初始输入小数点时被重置的问题，#9116")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("修复当页面仅有水平滚动条时，某些浏览器下拉菜单定位错误的问题，#9138（by @banzhuanmei）")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复带有固定列的 Table 在列数据变化后固定列的个数计算错误的问题，#9188（by @kolesoffac）")]),n("li",[e._v("修复多级表头最后一列的边框不能正确显示的问题，#9326")]),n("li",[e._v("修复在 Safari 浏览器中表头错位的问题，#9327")]),n("li",[e._v("修复带有展开行的表格在展开某一行后，当表格数据更新但 "),n("code",[e._v("row-key")]),e._v(" 值不变时，该行会自动收起的问题，#9462")]),n("li",[e._v("修复在一些情况下不必要的多次渲染问题，#9426")]),n("li",[e._v("修复动态改变 TableColumn 的 "),n("code",[e._v("width")]),e._v(" 属性时，其宽度计算错误的问题，#9426")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("修复某些情况下 Loading 不能被正确隐藏的问题，#9313")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("修复 "),n("code",[e._v("focus")]),e._v(" 方法在范围选择时无效的问题，#9437")]),n("li",[e._v("修复当目前时刻处于不可选择的范围内时，点击面板上的「此刻」按钮仍能选中目前时刻的问题，#9470（by @wacky6）")]),n("li",[e._v("修复当在月选择面板中选中天数较少的月份时，日期面板呈现下一个月的问题，#9577（by @wacky6）")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("修复在 IE 11 中的样式问题，#9454")])])])]),n("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 非兼容性更新")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[n("code",[e._v("collapse")]),e._v(" 状态下的弹出菜单现在会插入至 body 元素，修复其位于 Aside 内时弹出菜单不可见的问题，#9263")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("勾选多选表格的 checkbox 时不再同时触发 "),n("code",[e._v("row-click")]),e._v(" 事件，#9467")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("非全屏 Loading 遮罩层的 "),n("code",[e._v("z-index")]),e._v(" 修改为 2000；全屏 Loading 遮罩层的 "),n("code",[e._v("z-index")]),e._v(" 值会随页面上的弹出组件动态更新，#9522")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("show-timeout")]),e._v(" 和 "),n("code",[e._v("hide-timeout")]),e._v(" 属性现在仅在 trigger 为 "),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("修复 Input 的 "),n("code",[e._v("prepend")]),e._v(" 或 "),n("code",[e._v("append")]),e._v(" slot 中 Select 的边框颜色错误，#9089")]),n("li",[e._v("修复 Select 的 "),n("code",[e._v("remove-tag")]),e._v(" 事件参数与文档不符的问题，#9090")]),n("li",[e._v("新增 SubMenu 的 "),n("code",[e._v("show-timeout")]),e._v(" 和 "),n("code",[e._v("hide-timeout")]),e._v(" 属性，#8934（by @HugoLew）")]),n("li",[e._v("修复按需引入 Table 时 "),n("code",[e._v("show-overflow-tooltip")]),e._v(" 的 Tooltip 样式丢失的问题，#9130")]),n("li",[e._v("修复 Table 在执行 "),n("code",[e._v("clearSort")]),e._v(" 后点击对应列的排序图标无法正常排序的问题，#9100（by @zEmily）")]),n("li",[e._v("捷克语的 i18n 配置文件由 "),n("code",[e._v("cz")]),e._v(" 重命名为 "),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("修复了 Table 在固定列和合计行并存时的高度计算错误的问题，#9026")]),n("li",[e._v("修复了 Table 样式 SCSS 文件错误编译的问题，#9028")]),n("li",[e._v("现在 DatePicker 的 "),n("code",[e._v("change")]),e._v(" 事件只会在 "),n("code",[e._v("value")]),e._v(" 真正改变的时候触发，#9029（by @remizovvv）")]),n("li",[e._v("新增 Input 的 "),n("code",[e._v("tabindex")]),e._v(" 属性，#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("新增 Upload 的 "),n("code",[e._v("before-remove")]),e._v(" 钩子方法，#8788（by @firesh）")]),n("li",[e._v("修复 FormItem 的 "),n("code",[e._v("error")]),e._v(" 属性初始值无效的问题，#8840")]),n("li",[e._v("通过指令调用的 Loading 现在支持以 "),n("code",[e._v("element-loading-custom-class")]),e._v(" 属性的方式设置自定义类名，#8826（by @earlymeme）")]),n("li",[e._v("修复 CarouselItem 为异步获取时被隐藏的问题，#8921")]),n("li",[e._v("新增 Tree 的 "),n("code",[e._v("renderAfterExpand")]),e._v(" 属性，#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("新增西班牙语文档")]),n("li",[e._v("修复 "),n("code",[e._v("show-timeout")]),e._v(" 对点击触发的 Dropdown 无效的问题，#8734（by @presidenten）")]),n("li",[e._v("修复 Form 对于 "),n("code",[e._v("trigger")]),e._v(" 为 blur 的校验规则触发时机有误的问题，#8776")]),n("li",[e._v("修复 DatePicker 在范围选择时 blur 事件触发时机有误的问题，#8784")]),n("li",[e._v("TimePicker 的 "),n("code",[e._v("format")]),e._v(" 新增对 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("修复禁用文字按钮的样式问题，#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("修复 Table 排序图标的样式问题，#8405")]),n("li",[e._v("修复 "),n("code",[e._v("trigger")]),e._v(" 为 manual 的 Popover 的触发问题，#8467")]),n("li",[e._v("新增 Autocomplete 的 "),n("code",[e._v("prefix-icon")]),e._v(" 和 "),n("code",[e._v("suffix-icon")]),e._v(" 属性，#8446（by @liyanlong）")]),n("li",[e._v("新增 Cascader 的 "),n("code",[e._v("separator")]),e._v(" 属性，#8501")]),n("li",[e._v("新增 Input 的 "),n("code",[e._v("clearable")]),e._v(" 属性，#8509（by @lbogdan）")]),n("li",[e._v("新增 Pagination 的 "),n("code",[e._v("background")]),e._v(" 属性，#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("修复上个版本引入的 Popover、Tree、Breadcrumb、Cascader 的 bug，#8188 #8217 #8283")]),n("li",[e._v("修复 clickoutside 指令的内存泄露问题，#8168 #8225（by @badpunman @STLighter）")]),n("li",[e._v("修复默认尺寸的多选 Select 在清空选项后输入框高度不随之更新的问题，#8317（by @luciy）")]),n("li",[e._v("新增 Select 的 "),n("code",[e._v("collapse-tags")]),e._v(" 属性，用于在多选时以文字代替 Tag，避免组件高度的增大，#8190")]),n("li",[e._v("修复被隐藏的 Table 会造成 CPU 占用持续增加的问题，#8351")]),n("li",[e._v("开放 Table 的 "),n("code",[e._v("doLayout")]),e._v(" 方法，用于重新计算 Table 的布局，#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("提升 Cascader、Dropdown、Message、Notification、Popover、Tooltip、Tree 的可访问性")]),n("li",[e._v("修复当视口变窄时 Container 无法同步更新其宽度的问题，#8042")]),n("li",[e._v("修复 Tree 的 "),n("code",[e._v("updateKeyChildren")]),e._v(" 在删除子节点时的行为错误，#8100")]),n("li",[e._v("修复带有边框的 CheckboxButton 在 Form 中高度错误的问题，#8100")]),n("li",[e._v("修复 Menu 在解析自定义颜色时的错误，#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("修复范围选择的 DatePicker "),n("code",[e._v("editable")]),e._v(" 和 "),n("code",[e._v("readonly")]),e._v(" 属性无法正常工作的问题，#7922")]),n("li",[e._v("修复嵌套的 Tabs 的样式错误，#7941")]),n("li",[e._v("修复纵向 Steps 中最后一个 Step 的样式错误，#7980")]),n("li",[e._v("修复 Pagination 的 "),n("code",[e._v("current-change")]),e._v(" 事件触发时机错误的问题，#7995")]),n("li",[e._v("修复由于 Menu 使用了未注册的 Tooltip 造成其在按需引入时报错的问题，#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("在 InputNumber 的加减按钮上单击鼠标右键不再触发值的改变，#7817")]),n("li",[e._v("Form 的 "),n("code",[e._v("validate")]),e._v(" 方法现在能够正确地在异步校验完成后执行回调了，#7774（by @Allenice）")]),n("li",[e._v("修复 DatePicker 的范围选择在内核为 Chromium 53-57 的浏览器中无法使用的问题，#7838")]),n("li",[e._v("修复 "),n("code",[e._v("list-type")]),e._v(" 为 picture-card 的 Upload 预览和删除图标丢失的问题，#7857")]),n("li",[e._v("新增 TableColumn 的 "),n("code",[e._v("sort-by")]),e._v(" 属性，#7828（by @wangfengming）")]),n("li",[e._v("修复周模式下的 DatePicker 在选择某年第一周可能会显示为前一年第一周的问题，#7860（by @hh23485）")]),n("li",[e._v("修复垂直模式的 Steps 中图标宽度的样式错误，#7891")]),n("li",[e._v("增大了 Tree 中展开箭头的点击热区，#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("修复 RadioButton 和 CheckboxButton 的样式问题，#7793")]),n("li",[e._v("修复 TimePicker 在某些情况下无法滚动的问题，#7811")]),n("li",[e._v("修复部分组件在按需引入时样式不完整的问题，#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:"xin-te-xing-19"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-19","aria-hidden":"true"}},[e._v("¶")]),e._v(" 新特性")]),n("ul",[n("li",[e._v("综合\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("theme-chalk")]),e._v(" 主题")]),n("li",[e._v("增强以下组件的可访问性：Alert、AutoComplete、Breadcrumb、Button、Checkbox、Collapse、Input、InputNumber、Menu、Progress、Radio、Rate、Slider、Switch 和 Upload")]),n("li",[e._v("新增布局组件 Container、Header、Aside、Main 和 Footer")]),n("li",[e._v("新增 TypeScript 类型声明")]),n("li",[e._v("重绘了全部图标，并新增了部分图标")]),n("li",[e._v("新增了一系列基于断点的工具类，用于当视口尺寸满足一定条件时隐藏元素")]),n("li",[e._v("新增全局配置组件尺寸的功能。在引入 Element 时，配置 "),n("code",[e._v("size")]),e._v(" 字段可以改变所有组件的默认尺寸")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("round")]),e._v(" 属性，用于圆角按钮 #6643")])])]),n("li",[e._v("TimeSelect\n"),n("ul",[n("li",[e._v("可以用 "),n("code",[e._v("Up")]),e._v("、"),n("code",[e._v("Down")]),e._v(" 导航，用 "),n("code",[e._v("Enter")]),e._v(" 选中时间 #6023")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("可以用方向键导航，用 "),n("code",[e._v("Enter")]),e._v(" 选中时间 #6050")]),n("li",[e._v("新增 "),n("code",[e._v("start-placeholder")]),e._v(" 和 "),n("code",[e._v("end-placeholder")]),e._v("，用于设置范围选择时两个输入框的占位符 #7169")]),n("li",[e._v("新增 "),n("code",[e._v("arrow-control")]),e._v(" 属性，提供另一种交互形式，#7438")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("子节点在首次被展开之前不进行渲染 #6257")]),n("li",[e._v("新增 "),n("code",[e._v("check-descendants")]),e._v(" 属性，设置 "),n("code",[e._v("lazy")]),e._v(" 模式下勾选节点时，是否完全展开整个子树 #6235")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("size")]),e._v(" 属性 #7203")])])]),n("li",[e._v("Datepicker\n"),n("ul",[n("li",[e._v("type 为 "),n("code",[e._v("datetimerange")]),e._v(" 时可以使用 "),n("code",[e._v("timeFormat")]),e._v(" 格式化时间选择器 #6052")]),n("li",[e._v("新增 "),n("code",[e._v("start-placeholder")]),e._v(" 和 "),n("code",[e._v("end-placeholder")]),e._v("，用于设置范围选择时两个输入框的占位符 #7169")]),n("li",[e._v("新增 "),n("code",[e._v("value-format")]),e._v(" 属性，支持对绑定值的格式进行自定义，#7367")]),n("li",[e._v("新增 "),n("code",[e._v("unlink-panels")]),e._v(" 属性，用于在选择日期范围时取消两个日期面板之间的联动")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("closeOnHashChange")]),e._v(" 属性 #6043")]),n("li",[e._v("新增 "),n("code",[e._v("center")]),e._v(" 属性，提供居中布局 #7029")]),n("li",[e._v("新增 "),n("code",[e._v("roundButton")]),e._v(" 属性，使得内部按钮为圆角按钮 #7029")]),n("li",[e._v("新增 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 属性，使得 "),n("code",[e._v("message")]),e._v(" 支持传入 HTML 字符串"),n("sup",[e._v("*")]),e._v(" #6043")]),n("li",[e._v("新增 "),n("code",[e._v("inputType")]),e._v(" 属性，用户指定内部输入框的类型，#7651")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("width")]),e._v("、"),n("code",[e._v("fullscreen")]),e._v("、"),n("code",[e._v("append-to-body")]),e._v(" 属性，支持嵌套使用")]),n("li",[e._v("新增 "),n("code",[e._v("center")]),e._v(" 属性，提供居中布局 #7042")]),n("li",[e._v("新增 "),n("code",[e._v("focus-after-closed")]),e._v("、"),n("code",[e._v("focus-after-open")]),e._v("属性，支持无障碍访问 #6511")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("增加手动输入色值的支持 #6167")]),n("li",[e._v("新增 "),n("code",[e._v("size")]),e._v(" 属性，用于控制组件的大小 #7026")]),n("li",[e._v("新增 "),n("code",[e._v("disabled")]),e._v(" 属性，用于禁用组件 #7026")]),n("li",[e._v("新增 "),n("code",[e._v("popper-class")]),e._v(" 属性，#7351")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("图标部分使用 icon 代替图片，从而支持通过 CSS 修改图标背景色 #6207")]),n("li",[e._v("新增 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 属性，使得 "),n("code",[e._v("message")]),e._v(" 属性支持传入 HTML 字符串"),n("sup",[e._v("*")]),e._v(" #6207")]),n("li",[e._v("新增 "),n("code",[e._v("center")]),e._v(" 属性，提供居中布局 #6875")])])]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("position")]),e._v(" 属性，用于配置 Notification 出现的位置 #6231")]),n("li",[e._v("新增 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 属性，使得 "),n("code",[e._v("message")]),e._v(" 属性支持传入 HTML 字符串"),n("sup",[e._v("*")]),e._v(" #6231")]),n("li",[e._v("新增 "),n("code",[e._v("showClose")]),e._v(" 属性，用于隐藏关闭按钮 #6402")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("show-score")]),e._v(" 属性，控制是否在右侧显示当前分数 #6295")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("tab-position")]),e._v(" 属性，控制选项面板内容显示的上、下、左、右四个方向 #6096")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("增加 "),n("code",[e._v("border")]),e._v(" 属性和 "),n("code",[e._v("size")]),e._v(" 属性 #6690")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("增加 "),n("code",[e._v("border")]),e._v(" 属性和 "),n("code",[e._v("size")]),e._v(" 属性 #6690")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("center")]),e._v(" 属性，提供居中布局 #6876")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("background-color")]),e._v("、"),n("code",[e._v("text-color")]),e._v(" 和 "),n("code",[e._v("active-text-color")]),e._v(" 属性，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色 #7064")]),n("li",[e._v("新增 "),n("code",[e._v("open")]),e._v(" 和 "),n("code",[e._v("close")]),e._v(" 方法，支持手动打开和关闭 SubMenu，#7412")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("inline-message")]),e._v(" 属性，设置后校验信息会以行内样式显示 #7032")]),n("li",[e._v("新增 "),n("code",[e._v("status-icon")]),e._v(" 属性，用于在输入框中显示校验结果反馈图标 #7032")]),n("li",[e._v("Form 和 FormItem 新增 "),n("code",[e._v("size")]),e._v(" 属性，用于控制表单内组件的尺寸，#7428")]),n("li",[n("code",[e._v("validate")]),e._v(" 方法在不传入 callback 的情况下返回 promise，#7405")]),n("li",[e._v("新增 "),n("code",[e._v("clearValidate")]),e._v(" 方法，用于清空所有表单项的验证信息，#7623")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("suffix")]),e._v("、"),n("code",[e._v("prefix")]),e._v(" 的 slot，以及 "),n("code",[e._v("suffixIcon")]),e._v("、"),n("code",[e._v("prefixIcon")]),e._v(" 属性，用于给输入框内部增加前置和后置内容 #7032")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("separator-class")]),e._v(" 属性，可使用图标作为分隔符 #7203")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("simple")]),e._v(" 属性，用于开启简洁风格的步骤条 #7274")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("prev-text")]),e._v(" 和 "),n("code",[e._v("next-text")]),e._v(" 属性，用于自定义上一页和下一页的文本 #7005")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("配置对象新增 "),n("code",[e._v("spinner")]),e._v(" 和 "),n("code",[e._v("background")]),e._v(" 字段，支持自定义加载图标和背景色，#7390")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("debounce")]),e._v(" 属性，#7413")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("limit")]),e._v(" 和 "),n("code",[e._v("on-exceed")]),e._v(" 属性，支持对上传文件的个数进行限制，#7405")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("time-arrow-control")]),e._v(" 属性，用于开启时间选择器的 "),n("code",[e._v("arrow-control")]),e._v("，#7438")])])]),n("li",[e._v("Layout\n"),n("ul",[n("li",[e._v("新增断点 "),n("code",[e._v("xl")]),e._v("，适用于宽度大于 1920px 的视口")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("span-method")]),e._v(" 属性，用于合并行或列")]),n("li",[e._v("新增 "),n("code",[e._v("clearSort")]),e._v(" 方法，用于清空排序状态")]),n("li",[e._v("新增 "),n("code",[e._v("clearFilter")]),e._v(" 方法，用于清空过滤状态")]),n("li",[e._v("对于可展开行，当该行展开时会获得一个 "),n("code",[e._v(".expanded")]),e._v(" 类名，方便自定义样式")]),n("li",[e._v("新增 "),n("code",[e._v("size")]),e._v(" 属性，用于控制表格尺寸")]),n("li",[e._v("新增 "),n("code",[e._v("toggleRowExpansion")]),e._v(" 方法，用于手动展开或关闭行")]),n("li",[e._v("新增 "),n("code",[e._v("cell-class-name")]),e._v(" 属性，用于指定单元格的类名")]),n("li",[e._v("新增 "),n("code",[e._v("cell-style")]),e._v(" 属性，用于指定单元格的样式")]),n("li",[e._v("新增 "),n("code",[e._v("header-row-class-name")]),e._v(" 属性，用于指定表头行的类名")]),n("li",[e._v("新增 "),n("code",[e._v("header-row-style")]),e._v(" 属性，用于指定表头行的样式")]),n("li",[e._v("新增 "),n("code",[e._v("header-cell-class-name")]),e._v(" 属性，用于指定表头单元格的类名")]),n("li",[e._v("新增 "),n("code",[e._v("header-cell-style")]),e._v(" 属性，用于指定表头单元格的样式")]),n("li",[e._v("TableColumn 的 "),n("code",[e._v("prop")]),e._v(" 属性支持 "),n("code",[e._v("object[key]")]),e._v(" 格式")]),n("li",[e._v("TableColumn 新增 "),n("code",[e._v("index")]),e._v(" 属性，用于自定义索引值")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("新增 "),n("code",[e._v("reserve-keyword")]),e._v(" 属性，用于在选择某个选项后保留当前的搜索关键词")])])])]),n("h4",{attrs:{id:"xiu-fu-16"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-16","aria-hidden":"true"}},[e._v("¶")]),e._v(" 修复")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("选择周数时，"),n("code",[e._v("v-model")]),e._v(" 结果返回该周第二天的问题 #6038")]),n("li",[e._v("在 "),n("code",[e._v("daterange")]),e._v(" 类型中，第一次的输入会被清空的问题 #6021")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("和 TimePicker 相互影响的问题 #6090")]),n("li",[e._v("选择时间小时和秒可超出限制的问题 #6076")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("失去焦点时无法正确改变 "),n("code",[e._v("v-model")]),e._v(" 值的问题 #6023")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("当含有下拉框时，下拉框的打开和关闭会造成文字虚晃的问题 #6088")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("提升性能，修复组件销毁时可能导致 Vue dev-tool 卡死的问题 #6151")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("修复 Table 在父元素从 "),n("code",[e._v("display: none")]),e._v(" 变成其他状态时会隐藏的问题")]),n("li",[e._v("修复 Table 在父元素为 "),n("code",[e._v("display: flex")]),e._v(" 时可能出现的宽度逐渐变大的问题")]),n("li",[e._v("修复 "),n("code",[e._v("append")]),e._v(" 具名 slot 和固定列并存时，动态获取表格数据会导致固定列消失的问题")]),n("li",[e._v("修复 "),n("code",[e._v("expand-row-keys")]),e._v(" 属性初始化无效的问题")]),n("li",[e._v("修复 "),n("code",[e._v("data")]),e._v(" 改变时过滤条件失效的问题")]),n("li",[e._v("修复多级表头时固定列隐藏情况计算错误的问题")]),n("li",[e._v("修复 "),n("code",[e._v("max-height")]),e._v(" 变更后无法恢复的问题")]),n("li",[e._v("修复一些样式上的计算错误")])])])]),n("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 非兼容性更新")]),n("ul",[n("li",[e._v("综合\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("theme-default")])]),n("li",[e._v("最低兼容 Vue 2.5.2 和 IE 10")]),n("li",[e._v("表单组件的 "),n("code",[e._v("change")]),e._v(" 事件和 Pagination 的 "),n("code",[e._v("current-change")]),e._v(" 事件现在仅响应用户交互")]),n("li",[e._v("Button 和表单组件的 "),n("code",[e._v("size")]),e._v(" 属性现在可接受 "),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v(" 和 "),n("code",[e._v("mini")])]),n("li",[e._v("为了方便使用第三方图标，Button 的 "),n("code",[e._v("icon")]),e._v(" 属性、Input 的 "),n("code",[e._v("prefix-icon")]),e._v(" 和 "),n("code",[e._v("suffix-icon")]),e._v(" 属性、Steps 的 "),n("code",[e._v("icon")]),e._v(" 属性现在需要传入完整的图标类名")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("size")]),e._v(" 属性。现在 Dialog 的尺寸由 "),n("code",[e._v("width")]),e._v(" 和 "),n("code",[e._v("fullscreen")]),e._v(" 控制")]),n("li",[e._v("移除通过 "),n("code",[e._v("v-model")]),e._v(" 控制 Dialog 显示和隐藏的功能")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[n("code",[e._v("text-template")]),e._v(" 属性更名为 "),n("code",[e._v("score-template")])])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("menu-align")]),e._v(" 属性变更为 "),n("code",[e._v("placement")]),e._v("，增加更多方位属性")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[n("code",[e._v("footer-format")]),e._v(" 属性更名为 "),n("code",[e._v("format")])])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("由于 "),n("code",[e._v("on-*")]),e._v(" 属性在 JSX 中会被识别为事件，导致 Switch 所有 "),n("code",[e._v("on-*")]),e._v(" 属性在 JSX 中无法正常工作，所以 "),n("code",[e._v("on-*")]),e._v(" 属性更名为 "),n("code",[e._v("active-*")]),e._v("，对应地，"),n("code",[e._v("off-*")]),e._v(" 属性更名为 "),n("code",[e._v("inactive-*")]),e._v("。受到影响的属性有："),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(" 和 "),n("code",[e._v("inactive-text")]),e._v(" 属性不再有默认值")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[n("code",[e._v("type")]),e._v(" 属性现在支持 "),n("code",[e._v("success")]),e._v("、"),n("code",[e._v("info")]),e._v("、"),n("code",[e._v("warning")]),e._v(" 和 "),n("code",[e._v("danger")]),e._v(" 四个值")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("theme")]),e._v(" 属性。现在通过 "),n("code",[e._v("background-color")]),e._v("、"),n("code",[e._v("text-color")]),e._v(" 和 "),n("code",[e._v("active-text-color")]),e._v(" 属性进行颜色的自定义")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("icon")]),e._v(" 属性。现在通过 "),n("code",[e._v("suffix-icon")]),e._v(" 属性或者 "),n("code",[e._v("suffix")]),e._v(" 具名 slot 来加入尾部图标")]),n("li",[e._v("移除 "),n("code",[e._v("on-icon-click")]),e._v(" 属性和 "),n("code",[e._v("click")]),e._v(" 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标")]),n("li",[n("code",[e._v("change")]),e._v(" 事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 input 元素一致。如果需要实时响应用户的输入，可以使用 "),n("code",[e._v("input")]),e._v(" 事件")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("custom-item")]),e._v(" 属性。现在通过 "),n("code",[e._v("scoped slot")]),e._v(" 自定义输入建议列表项的内容")]),n("li",[e._v("移除 "),n("code",[e._v("props")]),e._v(" 属性，现在使用 "),n("code",[e._v("value-key")]),e._v(" 属性指定输入建议对象中用于显示的键名")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("移除 "),n("code",[e._v("center")]),e._v(" 属性")]),n("li",[e._v("现在步骤条将默认充满父容器")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[n("code",[e._v("change")]),e._v(" 事件参数现在为组件的绑定值，格式由 "),n("code",[e._v("value-format")]),e._v(" 控制")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("移除通过 "),n("code",[e._v("inline-template")]),e._v(" 自定义列模板的功能")]),n("li",[n("code",[e._v("sort-method")]),e._v(" 现在和 "),n("code",[e._v("Array.sort")]),e._v(" 保持一致的逻辑，要求返回一个数字")]),n("li",[e._v("将 "),n("code",[e._v("append")]),e._v(" slot 移至 "),n("code",[e._v("tbody")]),e._v(" 元素以外，以保证其只被渲染一次")]),n("li",[n("code",[e._v("expand")]),e._v(" 事件更名为 "),n("code",[e._v("expand-change")]),e._v("，以保证 API 的命名一致性")]),n("li",[n("code",[e._v("row-class-name")]),e._v(" 和 "),n("code",[e._v("row-style")]),e._v(" 的函数参数改为对象，以保证 API 的一致性")])])])]),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(" 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS 攻击")]),e._v("。因此请在 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 打开的情况下，确保 "),n("code",[e._v("message")]),e._v(" 的内容是可信的，"),n("strong",[e._v("永远不要")]),e._v("将用户提交的内容赋值给 "),n("code",[e._v("message")]),e._v(" 属性。")])])])}],!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(),l='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+a+'" target="_blank">'+a+"</a></h3>",r=t.length,i=2;i<r;i++){var s=t[i];(n=t[i].querySelector("a"))&&"header-anchor"===n.getAttribute("class")&&n.remove(),"H3"!==s.tagName?l+=t[i].outerHTML:l+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(a=t[i].textContent.trim())+'" target="_blank">'+a+"</a></h3>"}l=(l=l.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=l+"</li>",e.$el.remove()}},r=(n(476),Object(a.a)(l,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    更新日志\n  ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));t.default=r.exports},536:function(e,t,n){"use strict";n.r(t);var a=n(24),l=n(153),r=n(29),i=n.n(r),s={data:function(){return{lang:this.$route.meta.lang,navsData:l,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=i()(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(n,a,e){var l=this;e(),setTimeout(function(){var e=n.path,t=a.path;e===t&&n.hash&&l.goAnchor(),e!==t&&(document.documentElement.scrollTop=document.body.scrollTop=0,l.renderAnchorHref())},100)}},o=(n(477),n(0)),d=Object(o.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[n("div",{staticClass:"page-container page-component"},[n("el-scrollbar",{staticClass:"page-component__nav"},[n("side-nav",{attrs:{data:e.navsData[e.lang],base:"/"+e.lang+"/component"}})],1),n("div",{staticClass:"page-component__content"},[n("router-view",{staticClass:"content"}),n("footer-nav")],1),e.showBackToTop?n("el-backtop",{attrs:{target:".page-component__scroll .el-scrollbar__wrap",right:100,bottom:150}}):e._e()],1)])},[],!1,null,null,null);t.default=d.exports},537:function(e,t,n){"use strict";n.r(t);var a={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"设计原则"},{path:"/nav",name:"导航"}]}}},l=(n(479),n(0)),r=Object(l.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=r.exports},538:function(e,t,a){"use strict";a.r(t);var n=a(29),l=a.n(n),r={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,l=2*(180-n.top);l<0&&(l=0),a<l&&(l=a),this.mainImgOffset=l}},data:function(){return{lang:this.$route.meta.lang,mainImgOffset:0}},beforeDestroy:function(){window.removeEventListener("scroll",this.throttledHandleScroll)},mounted:function(){window.addEventListener("scroll",this.throttledHandleScroll)}},i=(a(480),a(0)),s=Object(i.a)(r,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(403),alt:""}}),n("div",{staticClass:"jumbotron-red",style:{height:e.mainImgOffset+"px"}},[n("img",{attrs:{src:a(404),alt:""}})])]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(405),alt:""}}),n("h3",[e._v("指南")]),n("p",[e._v("了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。")]),n("router-link",{attrs:{"active-class":"active",to:"/zh-CN/guide/design",exact:""}},[e._v("查看详情\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(406),alt:""}}),n("h3",[e._v("组件")]),n("p",[e._v("使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。")]),n("router-link",{attrs:{"active-class":"active",to:"/zh-CN/component/layout",exact:""}},[e._v("查看详情\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(407),alt:""}}),n("h3",[e._v("主题")]),n("p",[e._v("在线主题编辑器，可视化定制和管理站点主题、组件样式")]),n("router-link",{attrs:{"active-class":"active",to:"/zh-CN/theme",exact:""}},[e._v("查看详情\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(408),alt:""}}),n("h3",[e._v("资源")]),n("p",[e._v("下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。")]),n("router-link",{attrs:{"active-class":"active",to:"/zh-CN/resource",exact:""}},[e._v("查看详情\n          ")])],1)])])])])},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("网站快速成型工具")]),t("p",[this._v("Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库")])])])}],!1,null,"706538fd",null);t.default=s.exports},539: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={},l=document;a.left=(l.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}}},l=(a(481),a(0)),r=Object(l.a)(n,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("h2",[t._v("导航")]),t._m(0),t._m(1),n("div",{staticClass:"block"},[n("h3",[t._v("侧栏导航")]),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:9}},[n("p",[t._v("可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:15}},[n("img",{attrs:{src:a(409),alt:"一级类目"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("一级类目")]),n("p",[t._v("适用于结构简单的网站：只有一级页面时，不需要使用面包屑。")]),n("img",{attrs:{src:a(410),alt:"二级类目"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("二级类目")]),n("p",[t._v("侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。")]),n("img",{attrs:{src:a(411),alt:"三级类目"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("三级类目")]),n("p",[t._v("适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。")])])],1)],1),n("div",{staticClass:"block"},[n("h3",[t._v("顶部导航")]),n("el-row",[n("el-col",{attrs:{span:10}},[n("p",[t._v("顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:14}},[n("img",{attrs:{src:a(412),alt:""},on:{click:function(e){t.enlarge(846,e)}}}),n("p",[t._v("适用于导航较少，页面篇幅较长的网站。")])])],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("导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("h3",[this._v("选择合适的导航")]),t("p",[this._v("选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。")])])}],!1,null,"aadaaa32",null);t.default=r.exports},540:function(e,t,n){"use strict";n.r(t);var l=n(24),a=n(423),r=n(424),i=n(425),s=n(182),o=n(154),d=n(25),c=n(29),v=n.n(c),_=n(274),u={components:{ThemeConfigurator:a.a,BasicTokensPreview:i.a,ComponentsPreview:r.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,l=n.name;if(this.isOfficial){if(8<=this.userTheme.length)return void this.$message.error(Object(_.c)("max-user-theme"));var r=this.getNewUserThemeName(l);return this.previewConfig.name=r,this.previewConfig.type="user",this.userTheme.push({update:Date.now(),name:r,theme:t}),void Object(s.d)(this.userTheme)}"user"===a&&(this.userTheme.forEach(function(e){e.name===l&&(e.update=Date.now(),e.theme=t)}),Object(s.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(s.b)();var e=Object(s.a)(),t=this.$route.params.refer;if(e&&t){this.previewConfig=e;var a=Object(o.a)(e.theme);a&&(this.themeConfig=a,l.a.$emit(d.a,a))}else this.$alert(Object(_.c)("no-preview-config"),Object(_.c)("notice"),{confirmButtonText:Object(_.c)("confirm"),callback:function(e){var t=n.$route.path.replace("/preview","");n.$router.replace(t)}})}},h=(n(497),n(0)),m=Object(h.a)(u,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      返回\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=m.exports},541:function(e,t,n){"use strict";n.r(t);var a=n(426),l=n(415),r=n(182),i=n(274),s={components:{ThemeCard:a.a},mounted:function(){this.userTheme=Object(r.b)(),Array.isArray(this.userTheme)||(this.userTheme=[],Object(r.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(l.b.concat(this.$isEle?l.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(i.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 r=this;this.$refs.copyForm.validate(function(e){if(e){var t=r.copyForm,n=t.theme,a=t.name,l=t.oldname;n?r.userTheme.push({update:Date.now(),name:a,theme:n}):r.userTheme.forEach(function(e){e.name===l&&(e.update=Date.now(),e.name=a)}),r.saveToLocal(),r.closeCopyForm()}})},saveToLocal:function(){Object(r.d)(this.userTheme)}}},o=(n(504),n(0)),d=Object(o.a)(s,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("官方主题")]),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("我的主题 ("+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:"主题名称",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},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},l={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:"成功提示的文案",type:"success"}}),e._v(" "),n("el-alert",{attrs:{title:"消息提示的文案",type:"info"}}),e._v(" "),n("el-alert",{attrs:{title:"警告提示的文案",type:"warning"}}),e._v(" "),n("el-alert",{attrs:{title:"错误提示的文案",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:"成功提示的文案",type:"success",effect:"dark"}}),e._v(" "),n("el-alert",{attrs:{title:"消息提示的文案",type:"info",effect:"dark"}}),e._v(" "),n("el-alert",{attrs:{title:"警告提示的文案",type:"warning",effect:"dark"}}),e._v(" "),n("el-alert",{attrs:{title:"错误提示的文案",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:"不可关闭的 alert",type:"success",closable:!1}}),e._v(" "),n("el-alert",{attrs:{title:"自定义 close-text",type:"info","close-text":"知道了"}}),e._v(" "),n("el-alert",{attrs:{title:"设置了回调的 alert",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:"成功提示的文案",type:"success","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"消息提示的文案",type:"info","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"警告提示的文案",type:"warning","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"错误提示的文案",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:"成功提示的文案",type:"success",center:"","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"消息提示的文案",type:"info",center:"","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"警告提示的文案",type:"warning",center:"","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"错误提示的文案",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:"带辅助性文字介绍",type:"success",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:"成功提示的文案",type:"success",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"消息提示的文案",type:"info",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"警告提示的文案",type:"warning",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"错误提示的文案",type:"error",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}})]],2)},staticRenderFns:[]},{})}},r=n(0),i=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("用于页面中展示重要的提示信息。")]),e._m(1),n("p",[e._v("页面中的非浮层元素，不会自动消失。")]),n("demo-block",[n("div",[n("p",[e._v("Alert 组件提供四种主题，由"),n("code",[e._v("type")]),e._v("属性指定，默认值为"),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="成功提示的文案"\n    type="success">\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info">\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning">\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\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("通过设置"),n("code",[e._v("effect")]),e._v("属性来改变主题，默认为"),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="成功提示的文案"\n    type="success"\n    effect="dark">\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info"\n    effect="dark">\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning"\n    effect="dark">\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\n    type="error"\n    effect="dark">\n  </el-alert>\n</template>\n')])])])],2),e._m(4),n("p",[e._v("自定义关闭按钮为文字或其他符号。")]),n("demo-block",[n("div",[n("p",[e._v("在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。"),n("code",[e._v("closable")]),e._v("属性决定是否可关闭，接受"),n("code",[e._v("boolean")]),e._v("，默认为"),n("code",[e._v("true")]),e._v("。你可以设置"),n("code",[e._v("close-text")]),e._v("属性来代替右侧的关闭图标，注意："),n("code",[e._v("close-text")]),e._v("必须为文本。设置"),n("code",[e._v("close")]),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-alert\n    title="不可关闭的 alert"\n    type="success"\n    :closable="false">\n  </el-alert>\n  <el-alert\n    title="自定义 close-text"\n    type="info"\n    close-text="知道了">\n  </el-alert>\n  <el-alert\n    title="设置了回调的 alert"\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("表示某种状态时提升可读性。")]),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("show-icon")]),e._v("属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。")])]),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="成功提示的文案"\n    type="success"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\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="成功提示的文案"\n    type="success"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\n    type="error"\n    center\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(8),n("p",[e._v("包含标题和内容，解释更详细的警告。")]),n("demo-block",[n("div",[n("p",[e._v("除了必填的"),n("code",[e._v("title")]),e._v("属性外，你可以设置"),n("code",[e._v("description")]),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-alert\n    title="带辅助性文字介绍"\n    type="success"\n    description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">\n  </el-alert>\n</template>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("最后，这是一个同时具有 icon 和辅助性文字的样例。")])]),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="成功提示的文案"\n    type="success"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="消息提示的文案"\n    type="info"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="警告提示的文案"\n    type="warning"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="错误提示的文案"\n    type="error"\n    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-jing-gao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert-jing-gao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert 警告")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhu-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" 主题")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Alert 组件提供了两个不同的主题："),n("code",[e._v("light")]),e._v("和"),n("code",[e._v("dark")]),e._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-guan-bi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-guan-bi-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义关闭按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有 icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-zi-ju-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-ju-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字居中")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("使用 "),n("code",[e._v("center")]),e._v(" 属性让文字水平居中。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-fu-zhu-xing-wen-zi-jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有辅助性文字介绍")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("主题")]),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("辅助性文字。也可通过默认 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("是否可关闭")]),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("文字是否居中")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("close-text")]),n("td",[e._v("关闭按钮自定义文本")]),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("是否显示图标")]),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("选择提供的主题")]),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("描述")])]),n("tr",[n("td",[e._v("title")]),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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("close")]),n("td",[e._v("关闭alert时触发的事件")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},561: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},l={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"}}})}},r=n(0),i=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("用图标、图片或者字符的形式展示用户或事物信息。")]),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("支持三种类型：图标、图片和字符")]),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 行为")]),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),e._m(12)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"avatar-tou-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avatar-tou-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avatar 头像")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("通过 "),n("code",[e._v("shape")]),e._v(" 和 "),n("code",[e._v("size")]),e._v(" 设置头像的形状和大小。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhan-shi-lei-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhan-shi-lei-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 展示类型")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-pian-jia-zai-shi-bai-de-fallback-xing-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-pian-jia-zai-shi-bai-de-fallback-xing-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图片加载失败的 fallback 行为")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-pian-ru-he-gua-ying-rong-qi-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-pian-ru-he-gua-ying-rong-qi-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图片如何适应容器框")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("当展示类型为图片的时候，使用 "),n("code",[e._v("fit")]),e._v(" 属性定义图片如何适应容器框，同原生 "),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("设置头像的图标类型，参考 Icon 组件")]),n("td",[e._v("string")]),n("td"),n("td")]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("设置头像的大小")]),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("设置头像的形状")]),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("图片头像的资源地址")]),n("td",[e._v("string")]),n("td"),n("td")]),n("tr",[n("td",[e._v("srcSet")]),n("td",[e._v("以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像")]),n("td",[e._v("string")]),n("td"),n("td")]),n("tr",[n("td",[e._v("alt")]),n("td",[e._v("描述图像的替换文本")]),n("td",[e._v("string")]),n("td"),n("td")]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("当展示类型为图片的时候，设置图片如何适应容器框")]),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("事件名")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("error")]),n("td",[e._v("图片类头像加载失败的回调， 返回 false 会关闭组件默认的 fallback 行为")]),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")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("名称")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("default")]),n("td",[e._v("自定义头像展示内容")])])])])}],!1,null,null,null);t.default=i.exports},562: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},l={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:[]},{})}},r=n(0),i=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("返回页面顶部的操作按钮")]),e._m(1),n("p",[e._v("滑动页面即可看到右下方的按钮。")]),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("显示区域被固定为 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-hui-dao-ding-bu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#backtop-hui-dao-ding-bu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Backtop 回到顶部")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-xian-shi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-xian-shi-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("target")]),n("td",[e._v("触发滚动的对象")]),n("td",[e._v("string")]),n("td"),n("td")]),n("tr",[n("td",[e._v("visibility-height")]),n("td",[e._v("滚动高度达到此参数值才出现")]),n("td",[e._v("number")]),n("td"),n("td",[e._v("200")])]),n("tr",[n("td",[e._v("right")]),n("td",[e._v("控制其显示位置, 距离页面右边距")]),n("td",[e._v("number")]),n("td"),n("td",[e._v("40")])]),n("tr",[n("td",[e._v("bottom")]),n("td",[e._v("控制其显示位置, 距离页面底部距离")]),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("事件名")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("点击按钮触发的事件")]),n("td",[e._v("点击事件")])])])])}],!1,null,null,null);t.default=i.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},l={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("评论")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:3}},[n("el-button",{attrs:{size:"small"}},[e._v("回复")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[n("el-button",{attrs:{size:"small"}},[e._v("评论")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[n("el-button",{attrs:{size:"small"}},[e._v("回复")])],1),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    点我查看"),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      评论\n      "),n("el-badge",{staticClass:"mark",attrs:{value:12}})],1),e._v(" "),n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      回复\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("评论")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[n("el-button",{attrs:{size:"small"}},[e._v("回复")])],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("评论")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:"hot"}},[n("el-button",{attrs:{size:"small"}},[e._v("回复")])],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("数据查询")]),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:[]},{})}},r=n(0),i=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("出现在按钮、图标旁的数字或状态标记。")]),e._m(1),n("p",[e._v("展示新消息数量。")]),n("demo-block",[n("div",[n("p",[e._v("定义"),n("code",[e._v("value")]),e._v("属性，它接受"),n("code",[e._v("Number")]),e._v("或者"),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">评论</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    点我查看<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item class="clearfix">\n      评论\n      <el-badge class="mark" :value="12" />\n    </el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      回复\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("可自定义最大值。")]),n("demo-block",[n("div",[n("p",[e._v("由"),n("code",[e._v("max")]),e._v("属性定义，它接受一个"),n("code",[e._v("Number")]),e._v("，需要注意的是，只有当"),n("code",[e._v("value")]),e._v("为"),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">评论</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(3),n("p",[e._v("可以显示数字以外的文本内容。")]),n("demo-block",[n("div",[n("p",[e._v("定义"),n("code",[e._v("value")]),e._v("为"),n("code",[e._v("String")]),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-badge value="new" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(4),n("p",[e._v("以红点的形式标注需要关注的内容。")]),n("demo-block",[n("div",[n("p",[e._v("除了数字外，设置"),n("code",[e._v("is-dot")]),e._v("属性，它接受一个"),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">数据查询</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-biao-ji"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge-biao-ji","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge 标记")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zui-da-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zui-da-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 最大值")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xiao-hong-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-hong-dian","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("显示值")]),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("最大值，超过最大值会显示 '{max}+'，要求 value 是 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("小圆点")]),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("隐藏 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("类型")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},564:function(e,t,n){"use strict";n.r(t);var a=n(24),l=n(25),r={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},i={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"},s={created:function(){a.a.$on(l.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(r).forEach(function(e){t[e]?n[r[e]]=t[e]:n[r[e]]=i[r[e]]})}}}},o=n(0),d=Object(o.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("我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。")]),e._m(1),n("p",[e._v("我们提供了以下几种边框样式，以供选择。")]),e._m(2),e._m(3),n("p",[e._v("我们提供了以下几种圆角样式，以供选择。")]),n("el-row",{staticClass:"demo-radius",attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("无圆角")]),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("小圆角")]),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("大圆角")]),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("圆形圆角")]),n("div",{staticClass:"value"},[e._v("border-radius: 30px")]),n("div",{staticClass:"radius radius-30"})])],1),e._m(4),n("p",[e._v("我们提供了以下几种投影样式，以供选择。")]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),n("span",{staticClass:"demo-shadow-text"},[e._v("基础投影 box-shadow: "+e._s(e.boxShadowBase))]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowLight}}),n("span",{staticClass:"demo-shadow-text"},[e._v("浅色投影 box-shadow: "+e._s(e.boxShadowLight))])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"border-bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Border 边框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 边框")])},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("名称")]),n("td",{staticClass:"text"},[e._v("粗细")]),n("td",{staticClass:"line"},[e._v("举例")])]),n("tr",[n("td",{staticClass:"text"},[e._v("\b实线")]),n("td",{staticClass:"text"},[e._v("1px")]),n("td",{staticClass:"line"},[n("div")])]),n("tr",[n("td",{staticClass:"text"},[e._v("\b虚线")]),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:"yuan-jiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-jiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 圆角")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tou-ying"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tou-ying","aria-hidden":"true"}},[this._v("¶")]),this._v(" 投影")])}],!1,null,null,null);t.default=d.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},l={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-breadcrumb",{attrs:{separator:"/"}},[n("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[e._v("首页")]),e._v(" "),n("el-breadcrumb-item",[n("a",{attrs:{href:"/"}},[e._v("活动管理")])]),e._v(" "),n("el-breadcrumb-item",[e._v("活动列表")]),e._v(" "),n("el-breadcrumb-item",[e._v("活动详情")])],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[n("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[e._v("首页")]),e._v(" "),n("el-breadcrumb-item",[e._v("活动管理")]),e._v(" "),n("el-breadcrumb-item",[e._v("活动列表")]),e._v(" "),n("el-breadcrumb-item",[e._v("活动详情")])],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=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("显示当前页面的路径，快速返回之前的任意页面。")]),e._m(1),n("p",[e._v("适用广泛的基础用法。")]),n("demo-block",[n("div",[n("p",[e._v("在"),n("code",[e._v("el-breadcrumb")]),e._v("中使用"),n("code",[e._v("el-breadcrumb-item")]),e._v("标签表示从首页开始的每一级。Element 提供了一个"),n("code",[e._v("separator")]),e._v("属性，在"),n("code",[e._v("el-breadcrumb")]),e._v("标签中设置它来决定分隔符，它只能是字符串，默认为斜杠"),n("code",[e._v("/")]),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-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">首页</el-breadcrumb-item>\n  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>\n  <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n  <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("通过设置 "),n("code",[e._v("separator-class")]),e._v(" 可使用相应的 "),n("code",[e._v("iconfont")]),e._v(" 作为分隔符，注意这将使 "),n("code",[e._v("separator")]),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-breadcrumb separator-class="el-icon-arrow-right">\n  <el-breadcrumb-item :to="{ path: \'/\' }">首页</el-breadcrumb-item>\n  <el-breadcrumb-item>活动管理</el-breadcrumb-item>\n  <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n  <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],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-mian-bao-xie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-mian-bao-xie","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb 面包屑")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-biao-fen-ge-fu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-fen-ge-fu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图标分隔符")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("separator")]),n("td",[e._v("分隔符")]),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")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("to")]),n("td",[e._v("路由跳转对象，同 "),n("code",[e._v("vue-router")]),e._v(" 的 "),n("code",[e._v("to")])]),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("在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);t.default=i.exports},566: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},l={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("默认按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success"}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info"}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning"}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger"}},[e._v("危险按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:""}},[e._v("朴素按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:""}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:""}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:""}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:""}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:""}},[e._v("危险按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("圆角按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary",round:""}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success",round:""}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info",round:""}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning",round:""}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger",round:""}},[e._v("危险按钮")])],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("默认按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:""}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success",disabled:""}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info",disabled:""}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning",disabled:""}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger",disabled:""}},[e._v("危险按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:"",disabled:""}},[e._v("朴素按钮")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[e._v("主要按钮")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:"",disabled:""}},[e._v("成功按钮")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:"",disabled:""}},[e._v("信息按钮")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[e._v("警告按钮")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[e._v("危险按钮")])],1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-button",{attrs:{type:"text"}},[e._v("文字按钮")]),e._v(" "),n("el-button",{attrs:{type:"text",disabled:""}},[e._v("文字按钮")])],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[e._v("搜索")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("上传"),n("i",{staticClass:"el-icon-upload el-icon--right"})])],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-button-group",[n("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[e._v("上一页")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("下一页"),n("i",{staticClass:"el-icon-arrow-right el-icon--right"})])],1),e._v(" "),n("el-button-group",[n("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),e._v(" "),n("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("加载中")])],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("默认按钮")]),e._v(" "),n("el-button",{attrs:{size:"medium"}},[e._v("中等按钮")]),e._v(" "),n("el-button",{attrs:{size:"small"}},[e._v("小型按钮")]),e._v(" "),n("el-button",{attrs:{size:"mini"}},[e._v("超小按钮")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("默认按钮")]),e._v(" "),n("el-button",{attrs:{size:"medium",round:""}},[e._v("中等按钮")]),e._v(" "),n("el-button",{attrs:{size:"small",round:""}},[e._v("小型按钮")]),e._v(" "),n("el-button",{attrs:{size:"mini",round:""}},[e._v("超小按钮")])],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=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("常用的操作按钮。")]),e._m(1),n("p",[e._v("基础的按钮用法。")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("type")]),e._v("、"),n("code",[e._v("plain")]),e._v("、"),n("code",[e._v("round")]),e._v("和"),n("code",[e._v("circle")]),e._v("属性来定义 Button 的样式。")])]),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>默认按钮</el-button>\n  <el-button type="primary">主要按钮</el-button>\n  <el-button type="success">成功按钮</el-button>\n  <el-button type="info">信息按钮</el-button>\n  <el-button type="warning">警告按钮</el-button>\n  <el-button type="danger">危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>朴素按钮</el-button>\n  <el-button type="primary" plain>主要按钮</el-button>\n  <el-button type="success" plain>成功按钮</el-button>\n  <el-button type="info" plain>信息按钮</el-button>\n  <el-button type="warning" plain>警告按钮</el-button>\n  <el-button type="danger" plain>危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>圆角按钮</el-button>\n  <el-button type="primary" round>主要按钮</el-button>\n  <el-button type="success" round>成功按钮</el-button>\n  <el-button type="info" round>信息按钮</el-button>\n  <el-button type="warning" round>警告按钮</el-button>\n  <el-button type="danger" round>危险按钮</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),n("p",[e._v("按钮不可用状态。")]),n("demo-block",[n("div",[n("p",[e._v("你可以使用"),n("code",[e._v("disabled")]),e._v("属性来定义按钮是否可用，它接受一个"),n("code",[e._v("Boolean")]),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-row>\n  <el-button disabled>默认按钮</el-button>\n  <el-button type="primary" disabled>主要按钮</el-button>\n  <el-button type="success" disabled>成功按钮</el-button>\n  <el-button type="info" disabled>信息按钮</el-button>\n  <el-button type="warning" disabled>警告按钮</el-button>\n  <el-button type="danger" disabled>危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>朴素按钮</el-button>\n  <el-button type="primary" plain disabled>主要按钮</el-button>\n  <el-button type="success" plain disabled>成功按钮</el-button>\n  <el-button type="info" plain disabled>信息按钮</el-button>\n  <el-button type="warning" plain disabled>警告按钮</el-button>\n  <el-button type="danger" plain disabled>危险按钮</el-button>\n</el-row>\n')])])])],2),e._m(3),n("p",[e._v("没有边框和背景色的按钮。")]),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">文字按钮</el-button>\n<el-button type="text" disabled>文字按钮</el-button>\n')])])])],2),e._m(4),n("p",[e._v("带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("icon")]),e._v("属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用"),n("code",[e._v("i")]),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-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">搜索</el-button>\n<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>\n')])])])],2),e._m(5),n("p",[e._v("以按钮组的方式出现，常用于多项类似操作。")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("<el-button-group>")]),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-button-group>\n  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>\n  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type="primary" icon="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(6),n("p",[e._v("点击按钮后进行数据加载操作，在按钮上显示加载状态。")]),n("demo-block",[n("div",[n("p",[e._v("要设置为 loading 状态，只要设置"),n("code",[e._v("loading")]),e._v("属性为"),n("code",[e._v("true")]),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-button type="primary" :loading="true">加载中</el-button>\n')])])])],2),e._m(7),n("p",[e._v("Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),n("demo-block",[n("div",[n("p",[e._v("额外的尺寸："),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v("、"),n("code",[e._v("mini")]),e._v("，通过设置"),n("code",[e._v("size")]),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>默认按钮</el-button>\n  <el-button size="medium">中等按钮</el-button>\n  <el-button size="small">小型按钮</el-button>\n  <el-button size="mini">超小按钮</el-button>\n</el-row>\n<el-row>\n  <el-button round>默认按钮</el-button>\n  <el-button size="medium" round>中等按钮</el-button>\n  <el-button size="small" round>小型按钮</el-button>\n  <el-button size="mini" round>超小按钮</el-button>\n</el-row>\n')])])])],2),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"button-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Button 按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-zi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-biao-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图标按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-niu-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮组")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jia-zai-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 加载中")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("size")]),n("td",[e._v("尺寸")]),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("类型")]),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("是否朴素按钮")]),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("是否圆角按钮")]),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("是否圆形按钮")]),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("是否加载中状态")]),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("是否禁用状态")]),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("图标类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("是否默认聚焦")]),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("原生 type 属性")]),n("td",[e._v("string")]),n("td",[e._v("button / submit / reset")]),n("td",[e._v("button")])])])])}],!1,null,null,null);t.default=i.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},l={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:[]},{})}},r=n(0),i=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("显示日期")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("设置 "),n("code",[e._v("value")]),e._v(" 来指定当前显示的月份。如果 "),n("code",[e._v("value")]),e._v(" 未指定，则显示当月。"),n("code",[e._v("value")]),e._v(" 支持 "),n("code",[e._v("v-model")]),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-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("通过设置名为 "),n("code",[e._v("dateCell")]),e._v(" 的 "),n("code",[e._v("scoped-slot")]),e._v(" 来自定义日历单元格中显示的内容。在 "),n("code",[e._v("scoped-slot")]),e._v(" 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。详情解释参考下方的 API 文档。")])]),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!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法--\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("设置 "),n("code",[e._v("range")]),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-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-ri-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#calendar-ri-li","aria-hidden":"true"}},[this._v("¶")]),this._v(" Calendar 日历")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),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("时间范围，包括开始时间与结束时间。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。")]),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("周起始日")]),n("td",[e._v("Number")]),n("td",[e._v("1 到 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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("date")]),n("td",[e._v("单元格代表的日期")]),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(" 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；"),n("code",[e._v("isSelected")]),e._v(" 标明该日期是否被选中；"),n("code",[e._v("day")]),e._v(" 是格式化的日期，格式为 yyyy-MM-dd")]),n("td",[e._v("Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},568: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},l={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("卡片名称")]),t._v(" "),n("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[t._v("操作按钮")])],1),t._v(" "),t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("列表内容 "+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("列表内容 "+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("好吃的汉堡")]),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("操作按钮")])],1)])])],1)}),1)],1)},staticRenderFns:[]},{data:function(){return{currentDate:new Date}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:12}},[n("el-col",{attrs:{span:8}},[n("el-card",{attrs:{shadow:"always"}},[e._v("\n      总是显示\n    ")])],1),e._v(" "),n("el-col",{attrs:{span:8}},[n("el-card",{attrs:{shadow:"hover"}},[e._v("\n      鼠标悬浮时显示\n    ")])],1),e._v(" "),n("el-col",{attrs:{span:8}},[n("el-card",{attrs:{shadow:"never"}},[e._v("\n      从不显示\n    ")])],1)],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=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("将信息聚合在卡片容器中展示。")]),e._m(1),n("p",[e._v("包含标题，内容和操作。")]),n("demo-block",[n("div",[n("p",[e._v("Card 组件包括"),n("code",[e._v("header")]),e._v("和"),n("code",[e._v("body")]),e._v("部分，"),n("code",[e._v("header")]),e._v("部分需要有显式具名 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>卡片名称</span>\n    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'列表内容 \' + 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("卡片可以只有内容区域。")]),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    {{\'列表内容 \' + 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("可配置定义更丰富的内容展示。")]),n("demo-block",[n("div",[n("p",[e._v("配置"),n("code",[e._v("body-style")]),e._v("属性来自定义"),n("code",[e._v("body")]),e._v("部分的"),n("code",[e._v("style")]),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>\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>好吃的汉堡</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="button">操作按钮</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<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("可对阴影的显示进行配置。")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("shadow")]),e._v("属性设置卡片阴影出现的时机："),n("code",[e._v("always")]),e._v("、"),n("code",[e._v("hover")]),e._v("或"),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      总是显示\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="hover">\n      鼠标悬浮时显示\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="never">\n      从不显示\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-qia-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-qia-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card 卡片")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jian-dan-qia-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jian-dan-qia-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 简单卡片")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-tu-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带图片")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qia-pian-yin-ying"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-yin-ying","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("header")]),n("td",[e._v("设置 header，也可以通过 "),n("code",[e._v("slot#header")]),e._v(" 传入 DOM")]),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("设置 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("设置阴影显示时机")]),n("td",[e._v("string")]),n("td",[e._v("always / hover / never")]),n("td",[e._v("always")])])])])}],!1,null,null,null);t.default=i.exports},569: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},l={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("默认 Hover 指示器触发")]),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("Click 指示器触发")]),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(3,function(e){return n("el-carousel-item",{key:e},[n("h3",{staticClass:"medium"},[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]},{})}},r=n(0),i=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("在有限空间内，循环播放同一类型的图片、文字等内容")]),e._m(1),n("p",[e._v("适用广泛的基础用法")]),n("demo-block",[n("div",[n("p",[e._v("结合使用"),n("code",[e._v("el-carousel")]),e._v("和"),n("code",[e._v("el-carousel-item")]),e._v("标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在"),n("code",[e._v("el-carousel-item")]),e._v("标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置"),n("code",[e._v("trigger")]),e._v("属性为"),n("code",[e._v("click")]),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 class="block">\n    <span class="demonstration">默认 Hover 指示器触发</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">Click 指示器触发</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("可以将指示器的显示位置设置在容器外部")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("indicator-position")]),e._v("属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为"),n("code",[e._v("outside")]),e._v("则会显示在外部；设置为"),n("code",[e._v("none")]),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-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("可以设置切换箭头的显示时机")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("arrow")]),e._v("属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将"),n("code",[e._v("arrow")]),e._v("设置为"),n("code",[e._v("always")]),e._v("，则会一直显示；设置为"),n("code",[e._v("never")]),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-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("当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("type")]),e._v("属性设置为"),n("code",[e._v("card")]),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-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),e._m(6),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 3" :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(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:"carousel-zou-ma-deng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-zou-ma-deng","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel 走马灯")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhi-shi-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-shi-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 指示器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qie-huan-jian-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qie-huan-jian-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 切换箭头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qia-pian-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[this._v("¶")]),this._v(" 卡片化")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fang-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 方向")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("默认情况下，"),n("code",[e._v("direction")]),e._v(" 为 "),n("code",[e._v("horizontal")]),e._v("。通过设置 "),n("code",[e._v("direction")]),e._v(" 为 "),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("走马灯的高度")]),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("初始状态激活的幻灯片的索引，从 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("指示器的触发方式")]),n("td",[e._v("string")]),n("td",[e._v("click")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autoplay")]),n("td",[e._v("是否自动切换")]),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("自动切换的时间间隔，单位为毫秒")]),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("指示器的位置")]),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("切换箭头的显示时机")]),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("走马灯的类型")]),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("是否循环显示")]),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("走马灯展示的方向")]),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,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("幻灯片切换时触发")]),n("td",[e._v("目前激活的幻灯片的索引，原幻灯片的索引")])])])])},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("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("setActiveItem")]),n("td",[e._v("手动切换幻灯片")]),n("td",[e._v("需要切换的幻灯片的索引，从 0 开始；或相应 "),n("code",[e._v("el-carousel-item")]),e._v(" 的 "),n("code",[e._v("name")]),e._v(" 属性值")])]),n("tr",[n("td",[e._v("prev")]),n("td",[e._v("切换至上一张幻灯片")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next")]),n("td",[e._v("切换至下一张幻灯片")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("幻灯片的名字，可用作 "),n("code",[e._v("setActiveItem")]),e._v(" 的参数")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("该幻灯片所对应指示器的文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},570:function(e,t,n){"use strict";n.r(t);var a,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 t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("默认 click 触发子菜单")]),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("hover 触发子菜单")]),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:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",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:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}},methods:{handleChange:function(e){console.log(e)}}}),"element-demo1":l({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:"zhinan",label:"指南",disabled:!0,children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",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:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}}),"element-demo2":l({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:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",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:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}}),"element-demo3":l({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:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",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:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}}),"element-demo4":l({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("默认显示所有Tag")]),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("折叠展示Tag")]),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:"东南",children:[{value:2,label:"上海",children:[{value:3,label:"普陀"},{value:4,label:"黄埔"},{value:5,label:"徐汇"}]},{value:7,label:"江苏",children:[{value:8,label:"南京"},{value:9,label:"苏州"},{value:10,label:"无锡"}]},{value:12,label:"浙江",children:[{value:13,label:"杭州"},{value:14,label:"宁波"},{value:15,label:"嘉兴"}]}]},{value:17,label:"西北",children:[{value:18,label:"陕西",children:[{value:19,label:"西安"},{value:20,label:"延安"}]},{value:21,label:"新疆维吾尔族自治区",children:[{value:22,label:"乌鲁木齐"},{value:23,label:"克拉玛依"}]}]}]}}}),"element-demo5":l({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("单选选择任意一级选项")]),e._v(" "),n("el-cascader",{attrs:{options:e.options,props:{checkStrictly:!0},clearable:""}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("多选选择任意一级选项")]),e._v(" "),n("el-cascader",{attrs:{options:e.options,props:{multiple:!0,checkStrictly:!0},clearable:""}})],1)])},staticRenderFns:[]},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",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:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}}),"element-demo6":(a=0,l({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:"选项"+a,leaf:2<=n}});t(e)},1e3)}}}}})),"element-demo7":l({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("单选可搜索")]),e._v(" "),n("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:e.options,filterable:""}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("多选可搜索")]),e._v(" "),n("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:e.options,props:{multiple:!0},filterable:""}})],1)])},staticRenderFns:[]},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",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:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}}),"element-demo8":l({render:function(){var a=this,e=a.$createElement,l=a._self._c||e;return l("div",[l("el-cascader",{attrs:{options:a.options},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.node,n=e.data;return[l("span",[a._v(a._s(n.label))]),a._v(" "),t.isLeaf?a._e():l("span",[a._v(" ("+a._s(n.children.length)+") ")])]}}])})],1)},staticRenderFns:[]},{data:function(){return{options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",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:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}}),"element-demo9":l({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:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",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:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}]}}})}},i=n(0),s=Object(i.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("当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。")]),e._m(1),n("p",[e._v("有两种触发子菜单的方式")]),n("demo-block",[n("div",[n("p",[e._v("只需为 Cascader 的"),n("code",[e._v("options")]),e._v("属性指定选项数组即可渲染出一个级联选择器。通过"),n("code",[e._v("props.expandTrigger")]),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=\"block\">\n  <span class=\"demonstration\">默认 click 触发子菜单</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\">hover 触发子菜单</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: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\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("本例中，"),n("code",[e._v("options")]),e._v("指定的数组中的第一个元素含有"),n("code",[e._v("disabled: true")]),e._v("键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的"),n("code",[e._v("disabled")]),e._v("字段是否为"),n("code",[e._v("true")]),e._v("，如果你的数据中表示禁用含义的字段名不为"),n("code",[e._v("disabled")]),e._v("，可以通过"),n("code",[e._v("props.disabled")]),e._v("属性来指定（详见下方 API 表格）。当然，"),n("code",[e._v("value")]),e._v("、"),n("code",[e._v("label")]),e._v("和"),n("code",[e._v("children")]),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-cascader :options=\"options\"></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          disabled: true,\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\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: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。")]),n("demo-block",[n("div",[n("p",[e._v("属性"),n("code",[e._v("show-all-levels")]),e._v("定义了是否显示完整的路径，将其赋值为"),n("code",[e._v("false")]),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-cascader :options=\"options\" :show-all-levels=\"false\"></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("在开启多选模式后，默认情况下会展示所有已选中的选项的Tag，你可以使用"),n("code",[e._v("collapse-tags")]),e._v("来折叠Tag")])]),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\">默认显示所有Tag</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"props\"\n    clearable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">折叠展示Tag</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: '东南',\n          children: [{\n            value: 2,\n            label: '上海',\n            children: [\n              { value: 3, label: '普陀' },\n              { value: 4, label: '黄埔' },\n              { value: 5, label: '徐汇' }\n            ]\n          }, {\n            value: 7,\n            label: '江苏',\n            children: [\n              { value: 8, label: '南京' },\n              { value: 9, label: '苏州' },\n              { value: 10, label: '无锡' }\n            ]\n          }, {\n            value: 12,\n            label: '浙江',\n            children: [\n              { value: 13, label: '杭州' },\n              { value: 14, label: '宁波' },\n              { value: 15, label: '嘉兴' }\n            ]\n          }]\n        }, {\n          value: 17,\n          label: '西北',\n          children: [{\n            value: 18,\n            label: '陕西',\n            children: [\n              { value: 19, label: '西安' },\n              { value: 20, label: '延安' }\n            ]\n          }, {\n            value: 21,\n            label: '新疆维吾尔族自治区',\n            children: [\n              { value: 22, label: '乌鲁木齐' },\n              { value: 23, label: '克拉玛依' }\n            ]\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。")]),n("demo-block",[n("div",[n("p",[e._v("可通过 "),n("code",[e._v("props.checkStrictly = true")]),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("<div class=\"block\">\n  <span class=\"demonstration\">单选选择任意一级选项</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\">多选选择任意一级选项</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: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("当选中某一级时，动态加载该级下的选项。")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("lazy")]),e._v("开启动态加载，并通过"),n("code",[e._v("lazyload")]),e._v("来设置加载数据源的方法。"),n("code",[e._v("lazyload")]),e._v("方法有两个参数，第一个参数"),n("code",[e._v("node")]),e._v("为当前点击的节点，第二个"),n("code",[e._v("resolve")]),e._v("为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为"),n("code",[e._v("leaf")]),e._v("，可通过"),n("code",[e._v("props.leaf")]),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-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: `选项${id}`,\n                  leaf: level >= 2\n                }));\n              // 通过调用resolve将子节点数据返回，通知组件数据加载完成\n              resolve(nodes);\n            }, 1000);\n          }\n        }\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("可以快捷地搜索选项并选择。")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("filterable")]),e._v("赋值为"),n("code",[e._v("true")]),e._v("即可打开搜索功能，默认会匹配节点的"),n("code",[e._v("label")]),e._v("或所有父节点的"),n("code",[e._v("label")]),e._v("(由"),n("code",[e._v("show-all-levels")]),e._v("决定)中包含输入值的选项。你也可以用"),n("code",[e._v("filter-method")]),e._v("自定义搜索逻辑，接受一个函数，第一个参数是节点"),n("code",[e._v("node")]),e._v("，第二个参数是搜索关键词"),n("code",[e._v("keyword")]),e._v("，通过返回布尔值表示是否命中。")])]),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\">单选可搜索</span>\n  <el-cascader\n    placeholder=\"试试搜索：指南\"\n    :options=\"options\"\n    filterable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">多选可搜索</span>\n  <el-cascader\n    placeholder=\"试试搜索：指南\"\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: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(12),n("p",[e._v("可以自定义备选项的节点内容")]),n("demo-block",[n("div",[n("p",[e._v("可以通过"),n("code",[e._v("scoped slot")]),e._v("对级联选择器的备选项的节点内容进行自定义，scoped slot会传入两个字段 "),n("code",[e._v("node")]),e._v(" 和 "),n("code",[e._v("data")]),e._v("，分别表示当前节点的 Node 对象和数据。")])]),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: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(13),n("p",[e._v("级联面板是级联选择器的核心组件，与级联选择器一样，有单选、多选、动态加载等多种功能。")]),n("demo-block",[n("div",[n("p",[e._v("和级联选择器一样，通过"),n("code",[e._v("options")]),e._v("来指定选项，也可通过"),n("code",[e._v("props")]),e._v("来设置多选、动态加载等功能，具体详情见下方API表格。")])]),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: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\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),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cascader-ji-lian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-ji-lian-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader 级联选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-xuan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用选项")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("通过在数据源中设置 "),n("code",[e._v("disabled")]),e._v(" 字段来声明该选项是禁用的")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-qing-kong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可清空")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("通过 "),n("code",[e._v("clearable")]),e._v(" 设置输入框可清空")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-xian-shi-zui-hou-yi-ji"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-xian-shi-zui-hou-yi-ji","aria-hidden":"true"}},[this._v("¶")]),this._v(" 仅显示最后一级")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多选")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("可通过 "),n("code",[e._v("props.multiple = true")]),e._v(" 来开启多选模式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-ren-yi-yi-ji-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ren-yi-yi-ji-xuan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择任意一级选项")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-tai-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-jie-dian-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-jie-dian-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义节点内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-lian-mian-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-lian-mian-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" 级联面板")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("选中项绑定值")]),n("td",[e._v("-")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("options")]),n("td",[e._v("可选项数据源，键名可通过 "),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("配置选项，具体见下表")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("尺寸")]),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("输入框占位文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("请选择")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),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("是否支持清空选项")]),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("输入框中是否显示选中值的完整路径")]),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("多选模式下是否折叠Tag")]),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("选项分隔符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("斜杠' / '")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("是否可搜索选项")]),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("自定义搜索逻辑，第一个参数是节点"),n("code",[e._v("node")]),e._v("，第二个参数是搜索关键词"),n("code",[e._v("keyword")]),e._v("，通过返回布尔值表示是否命中")]),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("搜索关键词输入的去抖延迟，毫秒")]),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("筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选")]),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("自定义浮层类名")]),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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当选中节点变化时触发")]),n("td",[e._v("选中节点的值")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("当展开节点发生变化时触发")]),n("td",[e._v("各父级选项值组成的数组")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当失去焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当获得焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("下拉框出现/隐藏时触发")]),n("td",[e._v("出现则为 true，隐藏则为 false")])]),n("tr",[n("td",[e._v("remove-tag")]),n("td",[e._v("在多选模式下，移除Tag时触发")]),n("td",[e._v("移除的Tag对应的节点的值")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascader-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("getCheckedNodes")]),n("td",[e._v("获取选中的节点")]),n("td",[e._v("(leafOnly) 是否只是叶子节点，默认值为 "),n("code",[e._v("false")])])])])])},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,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("名称")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("-")]),n("td",[e._v("自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据")])]),n("tr",[n("td",[e._v("empty")]),n("td",[e._v("无匹配选项时的内容")])])])])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("选中项绑定值")]),n("td",[e._v("-")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("options")]),n("td",[e._v("可选项数据源，键名可通过 "),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("配置选项，具体见下表")]),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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当选中节点变化时触发")]),n("td",[e._v("选中节点的值")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("当展开节点发生变化时触发")]),n("td",[e._v("各父级选项值组成的数组")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascaderpanel-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascaderpanel-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" CascaderPanel Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("getCheckedNodes")]),n("td",[e._v("获取选中的节点数组")]),n("td",[e._v("(leafOnly) 是否只是叶子节点，默认值为 "),n("code",[e._v("false")])])]),n("tr",[n("td",[e._v("clearCheckedNodes")]),n("td",[e._v("清空选中的节点")]),n("td",[e._v("-")])])])])},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,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("名称")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("-")]),n("td",[e._v("自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据")])])])])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("expandTrigger")]),n("td",[e._v("次级菜单的展开方式")]),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("是否多选")]),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("是否严格的遵守父子节点不互相关联")]),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("在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值")]),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("是否动态加载子节点，需与 lazyLoad 方法结合使用")]),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("加载动态数据的方法，仅在 lazy 为 true 时有效")]),n("td",[e._v("function(node, resolve)，"),n("code",[e._v("node")]),e._v("为当前点击的节点，"),n("code",[e._v("resolve")]),e._v("为数据加载完成的回调(必须调用)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("指定选项的值为选项对象的某个属性值")]),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("指定选项标签为选项对象的某个属性值")]),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("指定选项的子选项为选项对象的某个属性值")]),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("指定选项的禁用为选项对象的某个属性值")]),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("指定选项的叶子节点的标志位为选项对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'leaf'")])])])])}],!1,null,null,null);t.default=s.exports},571:function(e,t,n){"use strict";n.r(t);var a,l,r,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},s={name:"component-doc",components:{"element-demo0":i({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("备选项")])]],2)},staticRenderFns:[]},{data:function(){return{checked:!0}}}),"element-demo1":i({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("备选项1")]),t._v(" "),n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}},[t._v("备选项")])]],2)},staticRenderFns:[]},{data:function(){return{checked1:!1,checked2:!0}}}),"element-demo2":i({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:"复选框 A"}}),t._v(" "),n("el-checkbox",{attrs:{label:"复选框 B"}}),t._v(" "),n("el-checkbox",{attrs:{label:"复选框 C"}}),t._v(" "),n("el-checkbox",{attrs:{label:"禁用",disabled:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"选中且禁用",disabled:""}})],1)]],2)},staticRenderFns:[]},{data:function(){return{checkList:["选中且禁用","复选框 A"]}}}),"element-demo3":(r=["上海","北京","广州","深圳"],i({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("全选")]),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:["上海","北京"],cities:r,isIndeterminate:!0}},methods:{handleCheckAllChange:function(e){this.checkedCities=e?r:[],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":(l=["上海","北京","广州","深圳"],i({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:["上海","北京"],cities:l}}})),"element-demo5":(a=["上海","北京","广州","深圳"],i({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:"北京"===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:["上海"],checkboxGroup2:["上海"],checkboxGroup3:["上海"],checkboxGroup4:["上海"],cities:a}}})),"element-demo6":i({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox",{attrs:{label:"备选项1",border:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}}),t._v(" "),n("el-checkbox",{attrs:{label:"备选项2",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:"备选项1",border:"",size:"medium"},model:{value:t.checked3,callback:function(e){t.checked3=e},expression:"checked3"}}),t._v(" "),n("el-checkbox",{attrs:{label:"备选项2",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:"备选项1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"备选项2",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:"备选项1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"备选项2",border:""}})],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{checked1:!0,checked2:!1,checked3:!1,checked4:!0,checkboxGroup1:[],checkboxGroup2:[]}}})}},o=n(0),d=Object(o.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("一组备选项中进行多选")]),e._m(1),n("p",[e._v("单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。")]),n("demo-block",[n("div",[n("p",[e._v("在"),n("code",[e._v("el-checkbox")]),e._v("元素中定义"),n("code",[e._v("v-model")]),e._v("绑定变量，单一的"),n("code",[e._v("checkbox")]),e._v("中，默认绑定变量的值会是"),n("code",[e._v("Boolean")]),e._v("，选中为"),n("code",[e._v("true")]),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  \x3c!-- `checked` 为 true 或 false --\x3e\n  <el-checkbox v-model="checked">备选项</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("多选框不可用状态。")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("disabled")]),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-checkbox v-model="checked1" disabled>备选项1</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>备选项</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("适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("checkbox-group")]),e._v("元素能把多个 checkbox 管理为一组，只需要在 Group 中使用"),n("code",[e._v("v-model")]),e._v("绑定"),n("code",[e._v("Array")]),e._v("类型的变量即可。 "),n("code",[e._v("el-checkbox")]),e._v(" 的 "),n("code",[e._v("label")]),e._v("属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。"),n("code",[e._v("label")]),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-checkbox-group v-model="checkList">\n    <el-checkbox label="复选框 A"></el-checkbox>\n    <el-checkbox label="复选框 B"></el-checkbox>\n    <el-checkbox label="复选框 C"></el-checkbox>\n    <el-checkbox label="禁用" disabled></el-checkbox>\n    <el-checkbox label="选中且禁用" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: [\'选中且禁用\',\'复选框 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">全选</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 = [\'上海\', \'北京\', \'广州\', \'深圳\'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: [\'上海\', \'北京\'],\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 = ['上海', '北京', '广州', '深圳'];\n  export default {\n    data() {\n      return {\n        checkedCities: ['上海', '北京'],\n        cities: cityOptions\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("按钮样式的多选组合。")]),n("demo-block",[n("div",[n("p",[e._v("只需要把"),n("code",[e._v("el-checkbox")]),e._v("元素替换为"),n("code",[e._v("el-checkbox-button")]),e._v("元素即可。此外，Element 还提供了"),n("code",[e._v("size")]),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  <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 === \'北京\'" :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 = [\'上海\', \'北京\', \'广州\', \'深圳\'];\n  export default {\n    data () {\n      return {\n        checkboxGroup1: [\'上海\'],\n        checkboxGroup2: [\'上海\'],\n        checkboxGroup3: [\'上海\'],\n        checkboxGroup4: [\'上海\'],\n        cities: cityOptions\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("border")]),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('<template>\n  <div>\n    <el-checkbox v-model="checked1" label="备选项1" border></el-checkbox>\n    <el-checkbox v-model="checked2" label="备选项2" border></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox v-model="checked3" label="备选项1" border size="medium"></el-checkbox>\n    <el-checkbox v-model="checked4" label="备选项2" 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="备选项1" border></el-checkbox>\n      <el-checkbox label="备选项2" 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="备选项1" border></el-checkbox>\n      <el-checkbox label="备选项2" 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-duo-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-duo-xuan-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox 多选框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"duo-xuan-kuang-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan-kuang-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多选框组")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indeterminate-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" indeterminate 状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("indeterminate")]),this._v(" 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-xuan-xiang-mu-shu-liang-de-xian-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-xiang-mu-shu-liang-de-xian-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可选项目数量的限制")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("使用 "),n("code",[e._v("min")]),e._v(" 和 "),n("code",[e._v("max")]),e._v(" 属性能够限制可以被勾选的项目的数量。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-niu-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有边框")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),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("选中状态的值（只有在"),n("code",[e._v("checkbox-group")]),e._v("或者绑定对象类型为"),n("code",[e._v("array")]),e._v("时有效）")]),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("选中时的值")]),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("没有选中时的值")]),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("是否禁用")]),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("是否显示边框")]),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("Checkbox 的尺寸，仅在 border 为真时有效")]),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("原生 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("当前是否勾选")]),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("设置 indeterminate 状态，只负责样式控制")]),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,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当绑定值变化时触发的事件")]),n("td",[e._v("更新后的值")])])])])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效")]),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("是否禁用")]),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("可被勾选的 checkbox 的最小数量")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("可被勾选的 checkbox 的最大数量")]),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("按钮形式的 Checkbox 激活时的文本颜色")]),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("按钮形式的 Checkbox 激活时的填充色和边框色")]),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,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当绑定值变化时触发的事件")]),n("td",[e._v("更新后的值")])])])])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("选中状态的值（只有在"),n("code",[e._v("checkbox-group")]),e._v("或者绑定对象类型为"),n("code",[e._v("array")]),e._v("时有效）")]),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("选中时的值")]),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("没有选中时的值")]),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("是否禁用")]),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("原生 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("当前是否勾选")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);t.default=d.exports},572: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},l={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("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),t._v(" "),n("div",[t._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"反馈 Feedback",name:"2"}},[n("div",[t._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),t._v(" "),n("div",[t._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[n("div",[t._v("简化流程：设计简洁直观的操作流程；")]),t._v(" "),n("div",[t._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),t._v(" "),n("div",[t._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[n("div",[t._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),t._v(" "),n("div",[t._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],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("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),t._v(" "),n("div",[t._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"反馈 Feedback",name:"2"}},[n("div",[t._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),t._v(" "),n("div",[t._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[n("div",[t._v("简化流程：设计简洁直观的操作流程；")]),t._v(" "),n("div",[t._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),t._v(" "),n("div",[t._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[n("div",[t._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),t._v(" "),n("div",[t._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],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",[n("template",{slot:"title"},[e._v("\n      一致性 Consistency"),n("i",{staticClass:"header-icon el-icon-info"})]),e._v(" "),n("div",[e._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),e._v(" "),n("div",[e._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])],2),e._v(" "),n("el-collapse-item",{attrs:{title:"反馈 Feedback"}},[n("div",[e._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),e._v(" "),n("div",[e._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"效率 Efficiency"}},[n("div",[e._v("简化流程：设计简洁直观的操作流程；")]),e._v(" "),n("div",[e._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),e._v(" "),n("div",[e._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"可控 Controllability"}},[n("div",[e._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),e._v(" "),n("div",[e._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=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("通过折叠面板收纳内容区域")]),e._m(1),n("p",[e._v("可同时展开多个面板，面板之间不影响")]),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>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</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("每次只能展开一个面板")]),n("demo-block",[n("div",[n("p",[e._v("通过 "),n("code",[e._v("accordion")]),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-collapse v-model="activeName" accordion>\n  <el-collapse-item title="一致性 Consistency" name="1">\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</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>\n    <template slot="title">\n      一致性 Consistency<i class="header-icon el-icon-info"></i>\n    </template>\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</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-zhe-die-mian-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhe-die-mian-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse 折叠面板")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shou-feng-qin-xiao-guo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-xiao-guo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 手风琴效果")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-mian-ban-biao-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mian-ban-biao-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义面板标题")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("除了可以通过 "),n("code",[e._v("title")]),e._v(" 属性以外，还可以通过具名 "),n("code",[e._v("slot")]),e._v(" 来实现自定义面板的标题内容，以实现增加图标等效果。")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("当前激活的面板(如果是手风琴模式，绑定值类型需要为"),n("code",[e._v("string")]),e._v("，否则为"),n("code",[e._v("array")]),e._v(")")]),n("td",[e._v("string / array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("是否手风琴模式")]),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,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当前激活面板改变时触发(如果是手风琴模式，参数 "),n("code",[e._v("activeNames")]),e._v(" 类型为"),n("code",[e._v("string")]),e._v("，否则为"),n("code",[e._v("array")]),e._v(")")]),n("td",[e._v("(activeNames: array / string)")])])])])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("唯一标志符")]),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("面板标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.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},l={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("有默认值")]),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("无默认值")]),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"}}})}},r=n(0),i=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("用于颜色选择，支持多种格式。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。")])]),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">有默认值</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">无默认值</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 支持普通颜色，也支持带 Alpha 通道的颜色，通过"),n("code",[e._v("show-alpha")]),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-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 支持预定义颜色")])]),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-yan-se-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker-yan-se-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker 颜色选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-tou-ming-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-tou-ming-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择透明度")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yu-ding-yi-yan-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yu-ding-yi-yan-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 预定义颜色")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),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("尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-alpha")]),n("td",[e._v("是否支持透明度选择")]),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("写入 v-model 的颜色的格式")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("hex（show-alpha 为 false）/ rgb（show-alpha 为 true）")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("ColorPicker 下拉框的类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("predefine")]),n("td",[e._v("预定义颜色")]),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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("当绑定值变化时触发")]),n("td",[e._v("当前值")])]),n("tr",[n("td",[e._v("active-change")]),n("td",[e._v("面板中当前显示的颜色发生改变时触发")]),n("td",[e._v("当前显示的颜色值")])])])])}],!1,null,null,null);t.default=i.exports},574:function(e,t,n){"use strict";n.r(t);var a=n(24),l=n(398),r=n(25),i={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"},s={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"},o={created:function(){a.a.$on(r.d,this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return Object(l.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(s).forEach(function(e){t[i[e]]?n[e]=t[i[e]]:n[e]=s[e]})}}}},d=n(0),c=Object(d.a)(o,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 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。")]),n._m(1),a("p",[n._v("Element 主要品牌颜色是鲜艳、友好的蓝色。")]),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("Brand Color\n      "),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("除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。")]),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("中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。")]),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("主要文字"),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      常规文字"),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("次要文字"),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("占位文字"),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("一级边框"),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("二级边框"),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("三级边框"),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("四级边框"),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("基础黑色"),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("基础白色"),a("div",{staticClass:"value"},[n._v(n._s(n.white))])]),a("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[n._v("透明"),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-se-cai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-se-cai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Color 色彩")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhu-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 主色")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-zhu-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 辅助色")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhong-xing-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhong-xing-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 中性色")])}],!1,null,null,null);t.default=c.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},l={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("导航一")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("选项4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-menu"}),e._v("导航二")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"2-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("选项4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"3"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-setting"}),e._v("导航三")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"3-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"3-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-4-1"}},[e._v("选项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("查看")]),e._v(" "),n("el-dropdown-item",[e._v("新增")]),e._v(" "),n("el-dropdown-item",[e._v("删除")])],1)],1),e._v(" "),n("span",[e._v("王小虎")])],1),e._v(" "),n("el-main",[n("el-table",{attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",width:"140"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)],1)],1)],1)],1)},staticRenderFns:[]},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"})}}})}},r=n(0),i=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("用于布局的容器组件，方便快速搭建页面的基本结构：")]),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>导航一</template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项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>导航二</template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="2-1">选项1</el-menu-item>\n          <el-menu-item index="2-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="2-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="2-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="2-4-1">选项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>导航三</template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="3-1">选项1</el-menu-item>\n          <el-menu-item index="3-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="3-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="3-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="3-4-1">选项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>查看</el-dropdown-item>\n          <el-dropdown-item>新增</el-dropdown-item>\n          <el-dropdown-item>删除</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>王小虎</span>\n    </el-header>\n    \n    <el-main>\n      <el-table :data="tableData">\n        <el-table-column prop="date" label="日期" width="140">\n        </el-table-column>\n        <el-table-column prop="name" label="姓名" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="地址">\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: \'王小虎\',\n        address: \'上海市普陀区金沙江路 1518 弄\'\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-bu-ju-rong-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container-bu-ju-rong-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container 布局容器")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("<el-container>")]),e._v("：外层容器。当子元素中包含 "),n("code",[e._v("<el-header>")]),e._v(" 或 "),n("code",[e._v("<el-footer>")]),e._v(" 时，全部子元素会垂直上下排列，否则会水平左右排列。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-header>")]),this._v("：顶栏容器。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-aside>")]),this._v("：侧边栏容器。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-main>")]),this._v("：主要区域容器。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-footer>")]),this._v("：底栏容器。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，"),n("code",[e._v("<el-container>")]),e._v(" 的子元素只能是后四者，后四者的父元素也只能是 "),n("code",[e._v("<el-container>")]),e._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chang-jian-ye-mian-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-ye-mian-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 常见页面布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li","aria-hidden":"true"}},[this._v("¶")]),this._v(" 实例")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("direction")]),n("td",[e._v("子元素的排列方向")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("子元素中有 "),n("code",[e._v("el-header")]),e._v(" 或 "),n("code",[e._v("el-footer")]),e._v(" 时为 vertical，否则为 horizontal")])])])])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("顶栏高度")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("width")]),n("td",[e._v("侧边栏宽度")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("底栏高度")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])}],!1,null,null,null);t.default=i.exports},576: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},l={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("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"选择日期"},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("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{align:"right",type:"date",placeholder:"选择日期","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:"今天",onClick:function(e){e.$emit("pick",new Date)}},{text:"昨天",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"一周前",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("周")]),t._v(" "),n("el-date-picker",{attrs:{type:"week",format:"yyyy 第 WW 周",placeholder:"选择周"},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("月")]),t._v(" "),n("el-date-picker",{attrs:{type:"month",placeholder:"选择月"},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("年")]),t._v(" "),n("el-date-picker",{attrs:{type:"year",placeholder:"选择年"},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("多个日期")]),t._v(" "),n("el-date-picker",{attrs:{type:"dates",placeholder:"选择一个或多个日期"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)]),t._v(" "),n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("多个月")]),t._v(" "),n("el-date-picker",{attrs:{type:"months",placeholder:"选择一个或多个月"},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("多个年")]),t._v(" "),n("el-date-picker",{attrs:{type:"years",placeholder:"选择一个或多个年"},model:{value:t.value6,callback:function(e){t.value6=e},expression:"value6"}})],1)])])},staticRenderFns:[]},{data:function(){return{value1:"",value2:"",value3:"",value4:"",value5:"",value6:""}}}),"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("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期"},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("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期","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:"最近一周",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"最近一个月",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"最近三个月",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("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange","range-separator":"至","start-placeholder":"开始月份","end-placeholder":"结束月份"},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("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange",align:"right","unlink-panels":"","range-separator":"至","start-placeholder":"开始月份","end-placeholder":"结束月份","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:"本月",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"今年至今",onClick:function(e){var t=new Date,n=new Date((new Date).getFullYear(),0);e.$emit("pick",[n,t])}},{text:"最近六个月",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("div",{staticClass:"demonstration"},[t._v("值："+t._s(t.value1))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",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("使用 value-format")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("值："+t._s(t.value2))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",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("时间戳")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("值："+t._s(t.value3))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"选择日期",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-demo5":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("组件值："+t._s(t.value))]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","start-placeholder":"开始日期","end-placeholder":"结束日期","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:""}}})}},r=n(0),i=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("用于选择或输入日期")]),e._m(1),n("p",[e._v("以「日」为基本单位，基础的日期选择控件")]),n("demo-block",[n("div",[n("p",[e._v("基本单位由"),n("code",[e._v("type")]),e._v("属性指定。快捷选项需配置"),n("code",[e._v("picker-options")]),e._v("对象中的"),n("code",[e._v("shortcuts")]),e._v("，禁用日期通过 "),n("code",[e._v("disabledDate")]),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 class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="选择日期">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value2"\n      align="right"\n      type="date"\n      placeholder="选择日期"\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: \'今天\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'昨天\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'一周前\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("通过扩展基础的日期选择，可以选择周、月、年或多个日期")]),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">周</span>\n    <el-date-picker\n      v-model="value1"\n      type="week"\n      format="yyyy 第 WW 周"\n      placeholder="选择周">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">月</span>\n    <el-date-picker\n      v-model="value2"\n      type="month"\n      placeholder="选择月">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">年</span>\n    <el-date-picker\n      v-model="value3"\n      type="year"\n      placeholder="选择年">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">多个日期</span>\n    <el-date-picker\n      type="dates"\n      v-model="value4"\n      placeholder="选择一个或多个日期">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">多个月</span>\n    <el-date-picker\n      type="months"\n      v-model="value5"\n      placeholder="选择一个或多个月">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">多个年</span>\n    <el-date-picker\n      type="years"\n      v-model="value6"\n      placeholder="选择一个或多个年">\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        value5: \'\',\n        value6: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("可在一个选择器中便捷地选择一个时间范围")]),n("demo-block",[n("div",[n("p",[e._v("在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用"),n("code",[e._v("unlink-panels")]),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  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value1"\n      type="daterange"\n      range-separator="至"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value2"\n      type="daterange"\n      align="right"\n      unlink-panels\n      range-separator="至"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\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: \'最近一周\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近一个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近三个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("可在一个选择器中便捷地选择一个月份范围")]),n("demo-block",[n("div",[n("p",[e._v("在选择月份范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前年份，可以使用"),n("code",[e._v("unlink-panels")]),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  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker\n      v-model="value1"\n      type="monthrange"\n      range-separator="至"\n      start-placeholder="开始月份"\n      end-placeholder="结束月份">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value2"\n      type="monthrange"\n      align="right"\n      unlink-panels\n      range-separator="至"\n      start-placeholder="开始月份"\n      end-placeholder="结束月份"\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: \'本月\',\n            onClick(picker) {\n              picker.$emit(\'pick\', [new Date(), new Date()]);\n            }\n          }, {\n            text: \'今年至今\',\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: \'最近六个月\',\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),e._m(8),e._m(9),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    <div class="demonstration">值：{{ value1 }}</div>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="选择日期"\n      format="yyyy 年 MM 月 dd 日">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">使用 value-format</span>\n    <div class="demonstration">值：{{ value2 }}</div>\n    <el-date-picker\n      v-model="value2"\n      type="date"\n      placeholder="选择日期"\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">时间戳</span>\n    <div class="demonstration">值：{{ value3 }}</div>\n    <el-date-picker\n      v-model="value3"\n      type="date"\n      placeholder="选择日期"\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(10),n("p",[e._v("在选择日期范围时，指定起始日期和结束日期的默认时刻。")]),n("demo-block",[n("div",[n("p",[e._v("选择日期范围时，默认情况下，起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过"),n("code",[e._v("default-time")]),e._v("可以分别指定二者的具体时刻。"),n("code",[e._v("default-time")]),e._v("接受一个数组，其中的值为形如"),n("code",[e._v("12:00:00")]),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  <div class="block">\n    <p>组件值：{{ value }}</p>\n    <el-date-picker\n      v-model="value"\n      type="daterange"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\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(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)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datepicker-ri-qi-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker-ri-qi-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker 日期选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-ri"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择日")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qi-ta-ri-qi-dan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-ri-qi-dan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 其他日期单位")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-ri-qi-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri-qi-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择日期范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ze-yue-fen-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-yue-fen-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选择月份范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ri-qi-ge-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-ge-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 日期格式")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("使用"),n("code",[e._v("format")]),e._v("指定输入框的格式；使用"),n("code",[e._v("value-format")]),e._v("指定绑定值的格式。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("默认情况下，组件接受并返回"),n("code",[e._v("Date")]),e._v("对象。以下为可用的格式化字符串，以 UTC 2017年1月2日 03:04:05 为例：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"warning"},[t("p",[this._v("请注意大小写")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("格式")]),n("th",[e._v("含义")]),n("th",[e._v("备注")]),n("th",[e._v("举例")])])]),n("tbody",[n("tr",[n("td",[n("code",[e._v("yyyy")])]),n("td",[e._v("年")]),n("td"),n("td",[e._v("2017")])]),n("tr",[n("td",[n("code",[e._v("M")])]),n("td",[e._v("月")]),n("td",[e._v("不补0")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("MM")])]),n("td",[e._v("月")]),n("td"),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("W")])]),n("td",[e._v("周")]),n("td",[e._v("仅周选择器的 "),n("code",[e._v("format")]),e._v(" 可用；不补0")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("WW")])]),n("td",[e._v("周")]),n("td",[e._v("仅周选择器的 "),n("code",[e._v("format")]),e._v(" 可用")]),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("d")])]),n("td",[e._v("日")]),n("td",[e._v("不补0")]),n("td",[e._v("2")])]),n("tr",[n("td",[n("code",[e._v("dd")])]),n("td",[e._v("日")]),n("td"),n("td",[e._v("02")])]),n("tr",[n("td",[n("code",[e._v("H")])]),n("td",[e._v("小时")]),n("td",[e._v("24小时制；不补0")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("HH")])]),n("td",[e._v("小时")]),n("td",[e._v("24小时制")]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("h")])]),n("td",[e._v("小时")]),n("td",[e._v("12小时制，须和 "),n("code",[e._v("A")]),e._v(" 或 "),n("code",[e._v("a")]),e._v(" 使用；不补0")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("hh")])]),n("td",[e._v("小时")]),n("td",[e._v("12小时制，须和 "),n("code",[e._v("A")]),e._v(" 或 "),n("code",[e._v("a")]),e._v(" 使用")]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("m")])]),n("td",[e._v("分钟")]),n("td",[e._v("不补0")]),n("td",[e._v("4")])]),n("tr",[n("td",[n("code",[e._v("mm")])]),n("td",[e._v("分钟")]),n("td"),n("td",[e._v("04")])]),n("tr",[n("td",[n("code",[e._v("s")])]),n("td",[e._v("秒")]),n("td",[e._v("不补0")]),n("td",[e._v("5")])]),n("tr",[n("td",[n("code",[e._v("ss")])]),n("td",[e._v("秒")]),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("仅 "),n("code",[e._v("format")]),e._v(" 可用，大写")]),n("td",[e._v("AM")])]),n("tr",[n("td",[n("code",[e._v("a")])]),n("td",[e._v("am/pm")]),n("td",[e._v("仅 "),n("code",[e._v("format")]),e._v(" 可用，小写")]),n("td",[e._v("am")])]),n("tr",[n("td",[n("code",[e._v("timestamp")])]),n("td",[e._v("JS时间戳")]),n("td",[e._v("仅 "),n("code",[e._v("value-format")]),e._v(" 可用；组件绑定值为"),n("code",[e._v("number")]),e._v("类型")]),n("td",[e._v("1483326245000")])]),n("tr",[n("td",[n("code",[e._v("[MM]")])]),n("td",[e._v("不需要格式化字符")]),n("td",[e._v("使用方括号标识不需要格式化的字符 (如  [A] [MM])")]),n("td",[e._v("MM")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mo-ren-xian-shi-ri-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-xian-shi-ri-qi","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),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("完全只读")]),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("禁用")]),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("文本框可输入")]),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("是否显示清除按钮")]),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("输入框尺寸")]),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("非范围选择时的占位内容")]),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("范围选择时开始日期的占位内容")]),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("范围选择时结束日期的占位内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("显示类型")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("显示在输入框中的格式")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("yyyy-MM-dd")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("对齐方式")]),n("td",[e._v("string")]),n("td",[e._v("left, center, right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("DatePicker 下拉框的类名")]),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("当前时间日期选择器特有的选项参考下表")]),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("选择范围时的分隔符")]),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("可选，选择器打开时默认显示的时间")]),n("td",[e._v("Date")]),n("td",[e._v("可被"),n("code",[e._v("new Date()")]),e._v("解析")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("范围选择时选中日期所使用的当日内具体时刻")]),n("td",[e._v("string[]")]),n("td",[e._v("数组，长度为 2，每项值为字符串，形如"),n("code",[e._v("12:00:00")]),e._v("，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 "),n("code",[e._v("00:00:00")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("可选，绑定值的格式。不指定则绑定值为 Date 对象")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),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("在范围选择器里取消两个日期面板之间的联动")]),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("自定义头部图标的类名")]),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("自定义清空图标的类名")]),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("输入时是否触发表单的校验")]),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("DetePicker 自身是否插入至 body 元素上。")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),n("td",[e._v("Object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),n("td",[e._v("Function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cellClassName")]),n("td",[e._v("设置日期的 className")]),n("td",[e._v("Function(Date)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("周起始日")]),n("td",[e._v("Number")]),n("td",[e._v("1 到 7")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("onPick")]),n("td",[e._v("选中日期后会执行的回调，只有当 "),n("code",[e._v("daterange")]),e._v(" 或 "),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("标题文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("用户确认选定的值时触发")]),n("td",[e._v("组件绑定值。格式与绑定值一致，可受 "),n("code",[e._v("value-format")]),e._v(" 控制")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当 input 失去焦点时触发")]),n("td",[e._v("组件实例")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当 input 获得焦点时触发")]),n("td",[e._v("组件实例")])])])])},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("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},577: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},l={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("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间"},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("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间",align:"right","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("设置默认时间")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间","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:"今天",onClick:function(e){e.$emit("pick",new Date)}},{text:"昨天",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"一周前",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("默认")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期"},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("带快捷选项")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions,"range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期",align:"right"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{shortcuts:[{text:"最近一周",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"最近一个月",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"最近三个月",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("起始日期时刻为 12:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"开始日期","end-placeholder":"结束日期","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("起始日期时刻为 12:00:00，结束日期时刻为 08:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"开始日期","end-placeholder":"结束日期","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:""}}})}},r=n(0),i=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("在同一个选择器里选择日期和时间")]),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("type")]),e._v("属性为"),n("code",[e._v("datetime")]),e._v("，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 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">默认</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetime"\n      placeholder="选择日期时间">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetime"\n      placeholder="选择日期时间"\n      align="right"\n      :picker-options="pickerOptions">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">设置默认时间</span>\n    <el-date-picker\n      v-model="value3"\n      type="datetime"\n      placeholder="选择日期时间"\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: \'今天\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'昨天\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'一周前\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n        value3: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("type")]),e._v("为"),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">默认</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetimerange"\n      range-separator="至"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetimerange"\n      :picker-options="pickerOptions"\n      range-separator="至"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\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: \'最近一周\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近一个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'最近三个月\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        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("使用"),n("code",[e._v("datetimerange")]),e._v("进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的"),n("code",[e._v("00:00:00")]),e._v("作为起始与结束的时刻；通过选项"),n("code",[e._v("default-time")]),e._v("可以控制选中起始与结束日期时所使用的具体时刻。"),n("code",[e._v("default-time")]),e._v("接受一个数组，数组每项值为字符串，形如"),n("code",[e._v("12:00:00")]),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  <div class="block">\n    <span class="demonstration">起始日期时刻为 12:00:00</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetimerange"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\n      :default-time="[\'12:00:00\']">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetimerange"\n      align="right"\n      start-placeholder="开始日期"\n      end-placeholder="结束日期"\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),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datetimepicker-ri-qi-shi-jian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker-ri-qi-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker 日期时间选择器")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("DateTimePicker 由 DatePicker 和 TimePicker 派生，"),n("code",[e._v("Picker Options")]),e._v(" 或者其他选项可以参照 DatePicker 和 TimePicker。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ri-qi-he-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 日期和时间点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ri-qi-he-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 日期和时间范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mo-ren-de-qi-shi-yu-jie-shu-shi-ke"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-de-qi-shi-yu-jie-shu-shi-ke","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),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("完全只读")]),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("禁用")]),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("文本框可输入")]),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("是否显示清除按钮")]),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("输入框尺寸")]),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("非范围选择时的占位内容")]),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("范围选择时开始日期的占位内容")]),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("范围选择时结束日期的占位内容")]),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("是否使用箭头进行时间选择")]),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("显示类型")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/week/ datetime/datetimerange/daterange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("显示在输入框中的格式")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("yyyy-MM-dd HH:mm:ss")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("对齐方式")]),n("td",[e._v("string")]),n("td",[e._v("left, center, right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("DateTimePicker 下拉框的类名")]),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("当前时间日期选择器特有的选项参考下表")]),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("选择范围时的分隔符")]),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("可选，选择器打开时默认显示的时间")]),n("td",[e._v("Date")]),n("td",[e._v("可被"),n("code",[e._v("new Date()")]),e._v("解析")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("选中日期后的默认具体时刻")]),n("td",[e._v("非范围选择时：string / 范围选择时：string[]")]),n("td",[e._v("非范围选择时：形如"),n("code",[e._v("12:00:00")]),e._v("的字符串；范围选择时：数组，长度为 2，每项值为字符串，形如"),n("code",[e._v("12:00:00")]),e._v("，第一项指定开始日期的时刻，第二项指定结束日期的时刻。不指定会使用时刻 "),n("code",[e._v("00:00:00")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("可选，绑定值的格式。不指定则绑定值为 Date 对象")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),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("在范围选择器里取消两个日期面板之间的联动")]),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("自定义头部图标的类名")]),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("自定义清空图标的类名")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),n("td",[e._v("Object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),n("td",[e._v("Function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cellClassName")]),n("td",[e._v("设置日期的 className")]),n("td",[e._v("Function(Date)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("周起始日")]),n("td",[e._v("Number")]),n("td",[e._v("1 到 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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("标题文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 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("用户确认选定的值时触发")]),n("td",[e._v("组件绑定值。格式与绑定值一致，可受 "),n("code",[e._v("value-format")]),e._v(" 控制")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当 input 失去焦点时触发")]),n("td",[e._v("组件实例")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当 input 获得焦点时触发")]),n("td",[e._v("组件实例")])])])])},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("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),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("Name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("自定义分隔符")])])])])}],!1,null,null,null);t.default=i.exports},578: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},l={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-descriptions",{attrs:{title:"用户信息"}},[n("el-descriptions-item",{attrs:{label:"用户名"}},[e._v("kooriookami")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"手机号"}},[e._v("18100000000")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"居住地"}},[e._v("苏州市")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"备注"}},[n("el-tag",{attrs:{size:"small"}},[e._v("学校")])],1),e._v(" "),n("el-descriptions-item",{attrs:{label:"联系地址"}},[e._v("江苏省苏州市吴中区吴中大道 1188 号")])],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio-group",{model:{value:t.size,callback:function(e){t.size=e},expression:"size"}},[n("el-radio",{attrs:{label:""}},[t._v("默认")]),t._v(" "),n("el-radio",{attrs:{label:"medium"}},[t._v("中等")]),t._v(" "),n("el-radio",{attrs:{label:"small"}},[t._v("小型")]),t._v(" "),n("el-radio",{attrs:{label:"mini"}},[t._v("超小")])],1),t._v(" "),n("el-descriptions",{staticClass:"margin-top",attrs:{title:"带边框列表",column:3,size:t.size,border:""}},[n("template",{slot:"extra"},[n("el-button",{attrs:{type:"primary",size:"small"}},[t._v("操作")])],1),t._v(" "),n("el-descriptions-item",[n("template",{slot:"label"},[n("i",{staticClass:"el-icon-user"}),t._v("\n        用户名\n      ")]),t._v("\n      kooriookami\n    ")],2),t._v(" "),n("el-descriptions-item",[n("template",{slot:"label"},[n("i",{staticClass:"el-icon-mobile-phone"}),t._v("\n        手机号\n      ")]),t._v("\n      18100000000\n    ")],2),t._v(" "),n("el-descriptions-item",[n("template",{slot:"label"},[n("i",{staticClass:"el-icon-location-outline"}),t._v("\n        居住地\n      ")]),t._v("\n      苏州市\n    ")],2),t._v(" "),n("el-descriptions-item",[n("template",{slot:"label"},[n("i",{staticClass:"el-icon-tickets"}),t._v("\n        备注\n      ")]),t._v(" "),n("el-tag",{attrs:{size:"small"}},[t._v("学校")])],2),t._v(" "),n("el-descriptions-item",[n("template",{slot:"label"},[n("i",{staticClass:"el-icon-office-building"}),t._v("\n        联系地址\n      ")]),t._v("\n      江苏省苏州市吴中区吴中大道 1188 号\n    ")],2)],2),t._v(" "),n("el-descriptions",{staticClass:"margin-top",attrs:{title:"无边框列表",column:3,size:t.size}},[n("template",{slot:"extra"},[n("el-button",{attrs:{type:"primary",size:"small"}},[t._v("操作")])],1),t._v(" "),n("el-descriptions-item",{attrs:{label:"用户名"}},[t._v("kooriookami")]),t._v(" "),n("el-descriptions-item",{attrs:{label:"手机号"}},[t._v("18100000000")]),t._v(" "),n("el-descriptions-item",{attrs:{label:"居住地"}},[t._v("苏州市")]),t._v(" "),n("el-descriptions-item",{attrs:{label:"备注"}},[n("el-tag",{attrs:{size:"small"}},[t._v("学校")])],1),t._v(" "),n("el-descriptions-item",{attrs:{label:"联系地址"}},[t._v("江苏省苏州市吴中区吴中大道 1188 号")])],2)]],2)},staticRenderFns:[]},{data:function(){return{size:""}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-descriptions",{attrs:{title:"垂直带边框列表",direction:"vertical",column:4,border:""}},[n("el-descriptions-item",{attrs:{label:"用户名"}},[e._v("kooriookami")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"手机号"}},[e._v("18100000000")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"居住地",span:2}},[e._v("苏州市")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"备注"}},[n("el-tag",{attrs:{size:"small"}},[e._v("学校")])],1),e._v(" "),n("el-descriptions-item",{attrs:{label:"联系地址"}},[e._v("江苏省苏州市吴中区吴中大道 1188 号")])],1),e._v(" "),n("el-descriptions",{staticClass:"margin-top",attrs:{title:"垂直无边框列表",column:4,direction:"vertical"}},[n("el-descriptions-item",{attrs:{label:"用户名"}},[e._v("kooriookami")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"手机号"}},[e._v("18100000000")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"居住地",span:2}},[e._v("苏州市")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"备注"}},[n("el-tag",{attrs:{size:"small"}},[e._v("学校")])],1),e._v(" "),n("el-descriptions-item",{attrs:{label:"联系地址"}},[e._v("江苏省苏州市吴中区吴中大道 1188 号")])],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-descriptions",{attrs:{title:"自定义样式列表",column:3,border:""}},[n("el-descriptions-item",{attrs:{label:"用户名","label-class-name":"my-label","content-class-name":"my-content"}},[e._v("kooriookami")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"手机号"}},[e._v("18100000000")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"居住地"}},[e._v("苏州市")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"备注"}},[n("el-tag",{attrs:{size:"small"}},[e._v("学校")])],1),e._v(" "),n("el-descriptions-item",{attrs:{label:"联系地址",contentStyle:{"text-align":"right"}}},[e._v("江苏省苏州市吴中区吴中大道 1188 号")])],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=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("列表形式展示多个字段。")]),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-descriptions title="用户信息">\n    <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>\n    <el-descriptions-item label="手机号">18100000000</el-descriptions-item>\n    <el-descriptions-item label="居住地">苏州市</el-descriptions-item>\n    <el-descriptions-item label="备注">\n      <el-tag size="small">学校</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>\n</el-descriptions>\n')])])])],2),e._m(2),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  <el-radio-group v-model="size">\n    <el-radio label="">默认</el-radio>\n    <el-radio label="medium">中等</el-radio>\n    <el-radio label="small">小型</el-radio>\n    <el-radio label="mini">超小</el-radio>\n  </el-radio-group>\n\n  <el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>\n    <template slot="extra">\n      <el-button type="primary" size="small">操作</el-button>\n    </template>\n    <el-descriptions-item>\n      <template slot="label">\n        <i class="el-icon-user"></i>\n        用户名\n      </template>\n      kooriookami\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot="label">\n        <i class="el-icon-mobile-phone"></i>\n        手机号\n      </template>\n      18100000000\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot="label">\n        <i class="el-icon-location-outline"></i>\n        居住地\n      </template>\n      苏州市\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot="label">\n        <i class="el-icon-tickets"></i>\n        备注\n      </template>\n      <el-tag size="small">学校</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot="label">\n        <i class="el-icon-office-building"></i>\n        联系地址\n      </template>\n      江苏省苏州市吴中区吴中大道 1188 号\n    </el-descriptions-item>\n  </el-descriptions>\n\n  <el-descriptions class="margin-top" title="无边框列表" :column="3" :size="size">\n    <template slot="extra">\n      <el-button type="primary" size="small">操作</el-button>\n    </template>\n    <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>\n    <el-descriptions-item label="手机号">18100000000</el-descriptions-item>\n    <el-descriptions-item label="居住地">苏州市</el-descriptions-item>\n    <el-descriptions-item label="备注">\n      <el-tag size="small">学校</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>\n  </el-descriptions>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        size: \'\'\n      };\n    }\n  }\n<\/script>\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('<el-descriptions title="垂直带边框列表" direction="vertical" :column="4" border>\n  <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>\n  <el-descriptions-item label="手机号">18100000000</el-descriptions-item>\n  <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>\n  <el-descriptions-item label="备注">\n    <el-tag size="small">学校</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>\n</el-descriptions>\n\n<el-descriptions class="margin-top" title="垂直无边框列表" :column="4" direction="vertical">\n  <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>\n  <el-descriptions-item label="手机号">18100000000</el-descriptions-item>\n  <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>\n  <el-descriptions-item label="备注">\n    <el-tag size="small">学校</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>\n</el-descriptions>\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-descriptions title="自定义样式列表" :column="3" border>\n  <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>\n  <el-descriptions-item label="手机号">18100000000</el-descriptions-item>\n  <el-descriptions-item label="居住地">苏州市</el-descriptions-item>\n  <el-descriptions-item label="备注">\n    <el-tag size="small">学校</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label="联系地址" :contentStyle="{\'text-align\': \'right\'}">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>\n</el-descriptions>\n<style>\n  .my-label {\n    background: #E1F3D8;\n  }\n\n  .my-content {\n    background: #FDE2E2;\n  }\n</style>\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)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"descriptions-miao-shu-lie-biao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#descriptions-miao-shu-lie-biao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Descriptions 描述列表")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chui-zhi-lie-biao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chui-zhi-lie-biao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 垂直列表")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"descriptions-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#descriptions-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Descriptions Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("border")]),n("td",[e._v("是否带有边框")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("column")]),n("td",[e._v("一行 "),n("code",[e._v("Descriptions Item")]),e._v(" 的数量")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3")])]),n("tr",[n("td",[e._v("direction")]),n("td",[e._v("排列的方向")]),n("td",[e._v("string")]),n("td",[e._v("vertical / horizontal")]),n("td",[e._v("horizontal")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("列表的尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题文本，显示在左上方")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("extra")]),n("td",[e._v("操作区文本，显示在右上方")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("colon")]),n("td",[e._v("是否显示冒号")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("labelClassName")]),n("td",[e._v("自定义标签类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("contentClassName")]),n("td",[e._v("自定义内容类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("labelStyle")]),n("td",[e._v("自定义标签样式")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("contentStyle")]),n("td",[e._v("自定义内容样式")]),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:"descriptions-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#descriptions-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Descriptions 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("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("自定义标题，显示在左上方")])]),n("tr",[n("td",[e._v("extra")]),n("td",[e._v("自定义操作区，显示在右上方")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"descriptions-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#descriptions-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Descriptions 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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("标签文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("span")]),n("td",[e._v("列的数量")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("labelClassName")]),n("td",[e._v("自定义标签类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("contentClassName")]),n("td",[e._v("自定义内容类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("labelStyle")]),n("td",[e._v("自定义标签样式")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("contentStyle")]),n("td",[e._v("自定义内容样式")]),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:"descriptions-item-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#descriptions-item-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Descriptions Item 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("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("自定义标签文本")])])])])}],!1,null,null,null);t.default=i.exports},579: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},l={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("点击打开 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"提示",visible:t.dialogVisible,width:"30%","before-close":t.handleClose},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("span",[t._v("这是一段信息")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogVisible=!1}}},[t._v("确 定")])],1)])],1)},staticRenderFns:[]},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(t){this.$confirm("确认关闭？").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("打开嵌套表格的 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"收货地址",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:"日期",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"姓名",width:"200"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"地址"}})],1)],1),t._v(" "),n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogFormVisible=!0}}},[t._v("打开嵌套表单的 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"收货地址",visible:t.dialogFormVisible},on:{"update:visible":function(e){t.dialogFormVisible=e}}},[n("el-form",{attrs:{model:t.form}},[n("el-form-item",{attrs:{label:"活动名称","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:"活动区域","label-width":t.formLabelWidth}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1)],1),t._v(" "),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("确 定")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],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("点击打开外层 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"外层 Dialog",visible:t.outerVisible},on:{"update:visible":function(e){t.outerVisible=e}}},[n("el-dialog",{attrs:{width:"30%",title:"内层 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("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.innerVisible=!0}}},[t._v("打开内层 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("点击打开 Dialog")]),t._v(" "),n("el-dialog",{attrs:{title:"提示",visible:t.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(e){t.centerDialogVisible=e}}},[n("span",[t._v("需要注意的是内容是默认不居中的")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("确 定")])],1)])],1)},staticRenderFns:[]},{data:function(){return{centerDialogVisible:!1}}})}},r=n(0),i=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("在保留当前页面状态的情况下，告知用户并承载相关操作。")]),e._m(1),n("p",[e._v("Dialog 弹出一个对话框，适合需要定制性更大的场景。")]),n("demo-block",[n("div",[n("p",[e._v("需要设置"),n("code",[e._v("visible")]),e._v("属性，它接收"),n("code",[e._v("Boolean")]),e._v("，当为"),n("code",[e._v("true")]),e._v("时显示 Dialog。Dialog 分为两个部分："),n("code",[e._v("body")]),e._v("和"),n("code",[e._v("footer")]),e._v("，"),n("code",[e._v("footer")]),e._v("需要具名为"),n("code",[e._v("footer")]),e._v("的"),n("code",[e._v("slot")]),e._v("。"),n("code",[e._v("title")]),e._v("属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了"),n("code",[e._v("before-close")]),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-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>\n\n<el-dialog\n  title="提示"\n  :visible.sync="dialogVisible"\n  width="30%"\n  :before-close="handleClose">\n  <span>这是一段信息</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">取 消</el-button>\n    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'确认关闭？\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("p",[e._v("Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。")]),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">打开嵌套表格的 Dialog</el-button>\n\n<el-dialog title="收货地址" :visible.sync="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="日期" width="150"></el-table-column>\n    <el-table-column property="name" label="姓名" width="200"></el-table-column>\n    <el-table-column property="address" label="地址"></el-table-column>\n  </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>\n\n<el-dialog title="收货地址" :visible.sync="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="活动名称" :label-width="formLabelWidth">\n      <el-input v-model="form.name" autocomplete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="活动区域" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="请选择活动区域">\n        <el-option label="区域一" value="shanghai"></el-option>\n        <el-option label="区域二" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <div slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">取 消</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>\n  </div>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        formLabelWidth: \'120px\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了"),n("code",[e._v("append-to-body")]),e._v("属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。")])]),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">点击打开外层 Dialog</el-button>\n  \n  <el-dialog title="外层 Dialog" :visible.sync="outerVisible">\n    <el-dialog\n      width="30%"\n      title="内层 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">取 消</el-button>\n      <el-button type="primary" @click="innerVisible = true">打开内层 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("标题和底部可水平居中")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("center")]),e._v("设置为"),n("code",[e._v("true")]),e._v("即可使标题和底部居中。"),n("code",[e._v("center")]),e._v("仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。")])]),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">点击打开 Dialog</el-button>\n\n<el-dialog\n  title="提示"\n  :visible.sync="centerDialogVisible"\n  width="30%"\n  center>\n  <span>需要注意的是内容是默认不居中的</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="centerDialogVisible = false">取 消</el-button>\n    <el-button type="primary" @click="centerDialogVisible = false">确 定</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-dui-hua-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog-dui-hua-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog 对话框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[n("code",[e._v("before-close")]),e._v(" 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 "),n("code",[e._v("footer")]),e._v(" 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 "),n("code",[e._v("before-close")]),e._v(" 的相关逻辑。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qian-tao-de-dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-de-dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" 嵌套的 Dialog")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 "),n("code",[e._v("append-to-body")]),e._v(" 属性。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ju-zhong-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 居中布局")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 "),n("code",[e._v("ref")]),e._v(" 获取相应组件，请在 "),n("code",[e._v("open")]),e._v(" 事件回调中进行。")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("如果 "),n("code",[e._v("visible")]),e._v(" 属性绑定的变量位于 Vuex 的 store 内，那么 "),n("code",[e._v(".sync")]),e._v(" 不会正常工作。此时需要去除 "),n("code",[e._v(".sync")]),e._v(" 修饰符，同时监听 Dialog 的 "),n("code",[e._v("open")]),e._v(" 和 "),n("code",[e._v("close")]),e._v(" 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 "),n("code",[e._v("visible")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("visible")]),n("td",[e._v("是否显示 Dialog，支持 .sync 修饰符")]),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("Dialog 的标题，也可通过具名 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("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("是否为全屏 Dialog")]),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("Dialog CSS 中的 margin-top 值")]),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("是否需要遮罩层")]),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("遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上")]),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("Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 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("是否在 Dialog 出现时将 body 滚动锁定")]),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("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("是否可以通过点击 modal 关闭 Dialog")]),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("是否可以通过按下 ESC 关闭 Dialog")]),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("是否显示关闭按钮")]),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("关闭前的回调，会暂停 Dialog 的关闭")]),n("td",[e._v("function(done)，done 用于关闭 Dialog")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("是否对头部和底部采用居中布局")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("destroy-on-close")]),n("td",[e._v("关闭时销毁 Dialog 中的元素")]),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("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Dialog 的内容")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Dialog 标题区的内容")])]),n("tr",[n("td",[e._v("footer")]),n("td",[e._v("Dialog 按钮操作区的内容")])])])])},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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("Dialog 打开的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("opened")]),n("td",[e._v("Dialog 打开动画结束时的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Dialog 关闭的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closed")]),n("td",[e._v("Dialog 关闭动画结束时的回调")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},580: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},l={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("span",[e._v("青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪")]),e._v(" "),n("el-divider"),e._v(" "),n("span",[e._v("少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉")])],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("头上一片晴天，心中一个想念")]),e._v(" "),n("el-divider",{attrs:{"content-position":"left"}},[e._v("少年包青天")]),e._v(" "),n("span",[e._v("饿了别叫妈, 叫饿了么")]),e._v(" "),n("el-divider",[n("i",{staticClass:"el-icon-mobile-phone"})]),e._v(" "),n("span",[e._v("为了无法计算的价值")]),e._v(" "),n("el-divider",{attrs:{"content-position":"right"}},[e._v("阿里云")])],1)]],2)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("span",[e._v("雨纷纷")]),e._v(" "),n("el-divider",{attrs:{direction:"vertical"}}),e._v(" "),n("span",[e._v("旧故里")]),e._v(" "),n("el-divider",{attrs:{direction:"vertical"}}),e._v(" "),n("span",[e._v("草木深")])],1)]],2)},staticRenderFns:[]},{})}},r=n(0),i=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("区隔内容的分割线。")]),e._m(1),n("p",[e._v("对不同章节的文本段落进行分割。")]),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>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>\n    <el-divider></el-divider>\n    <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>\n  </div>\n</template>\n")])])])],2),e._m(2),n("p",[e._v("可以在分割线上自定义文案内容。")]),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>头上一片晴天，心中一个想念</span>\n    <el-divider content-position="left">少年包青天</el-divider>\n    <span>饿了别叫妈, 叫饿了么</span>\n    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>\n    <span>为了无法计算的价值</span>\n    <el-divider content-position="right">阿里云</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>雨纷纷</span>\n    <el-divider direction="vertical"></el-divider>\n    <span>旧故里</span>\n    <el-divider direction="vertical"></el-divider>\n    <span>草木深</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-fen-ge-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#divider-fen-ge-xian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Divider 分割线")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"she-zhi-wen-an"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-wen-an","aria-hidden":"true"}},[this._v("¶")]),this._v(" 设置文案")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chui-zhi-fen-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chui-zhi-fen-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 垂直分割")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("direction")]),n("td",[e._v("设置分割线方向")]),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("设置分割线文案的位置")]),n("td",[e._v("string")]),n("td",[e._v("left / right / center")]),n("td",[e._v("center")])])])])}],!1,null,null,null);t.default=i.exports},581: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},l={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-group",{model:{value:t.direction,callback:function(e){t.direction=e},expression:"direction"}},[n("el-radio",{attrs:{label:"ltr"}},[t._v("从左往右开")]),t._v(" "),n("el-radio",{attrs:{label:"rtl"}},[t._v("从右往左开")]),t._v(" "),n("el-radio",{attrs:{label:"ttb"}},[t._v("从上往下开")]),t._v(" "),n("el-radio",{attrs:{label:"btt"}},[t._v("从下往上开")])],1),t._v(" "),n("el-button",{staticStyle:{"margin-left":"16px"},attrs:{type:"primary"},on:{click:function(e){t.drawer=!0}}},[t._v("\n  点我打开\n")]),t._v(" "),n("el-drawer",{attrs:{title:"我是标题",visible:t.drawer,direction:t.direction,"before-close":t.handleClose},on:{"update:visible":function(e){t.drawer=e}}},[n("span",[t._v("我来啦!")])])],1)},staticRenderFns:[]},{data:function(){return{drawer:!1,direction:"rtl"}},methods:{handleClose:function(t){this.$confirm("确认关闭？").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",{staticStyle:{"margin-left":"16px"},attrs:{type:"primary"},on:{click:function(e){t.drawer=!0}}},[t._v("\n  点我打开\n")]),t._v(" "),n("el-drawer",{attrs:{title:"我是标题",visible:t.drawer,"with-header":!1},on:{"update:visible":function(e){t.drawer=e}}},[n("span",[t._v("我来啦!")])])],1)},staticRenderFns:[]},{data:function(){return{drawer:!1}}}),"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.table=!0}}},[t._v("打开嵌套表格的 Drawer")]),t._v(" "),n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialog=!0}}},[t._v("打开嵌套 Form 的 Drawer")]),t._v(" "),n("el-drawer",{attrs:{title:"我嵌套了表格!",visible:t.table,direction:"rtl",size:"50%"},on:{"update:visible":function(e){t.table=e}}},[n("el-table",{attrs:{data:t.gridData}},[n("el-table-column",{attrs:{property:"date",label:"日期",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"姓名",width:"200"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"地址"}})],1)],1),t._v(" "),n("el-drawer",{ref:"drawer",attrs:{title:"我嵌套了 Form !","before-close":t.handleClose,visible:t.dialog,direction:"ltr","custom-class":"demo-drawer"},on:{"update:visible":function(e){t.dialog=e}}},[n("div",{staticClass:"demo-drawer__content"},[n("el-form",{attrs:{model:t.form}},[n("el-form-item",{attrs:{label:"活动名称","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:"活动区域","label-width":t.formLabelWidth}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1)],1),t._v(" "),n("div",{staticClass:"demo-drawer__footer"},[n("el-button",{on:{click:t.cancelForm}},[t._v("取 消")]),t._v(" "),n("el-button",{attrs:{type:"primary",loading:t.loading},on:{click:function(e){t.$refs.drawer.closeDrawer()}}},[t._v(t._s(t.loading?"提交中 ...":"确 定"))])],1)],1)])],1)},staticRenderFns:[]},{data:function(){return{table:!1,dialog:!1,loading:!1,gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"80px",timer:null}},methods:{handleClose:function(t){var n=this;this.loading||this.$confirm("确定要提交表单吗？").then(function(e){n.loading=!0,n.timer=setTimeout(function(){t(),setTimeout(function(){n.loading=!1},400)},2e3)}).catch(function(e){})},cancelForm:function(){this.loading=!1,this.dialog=!1,clearTimeout(this.timer)}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{staticStyle:{"margin-left":"16px"},attrs:{type:"primary"},on:{click:function(e){t.drawer=!0}}},[t._v("\n  点我打开\n")]),t._v(" "),n("el-drawer",{attrs:{title:"我是外面的 Drawer",visible:t.drawer,size:"50%"},on:{"update:visible":function(e){t.drawer=e}}},[n("div",[n("el-button",{on:{click:function(e){t.innerDrawer=!0}}},[t._v("打开里面的!")]),t._v(" "),n("el-drawer",{attrs:{title:"我是里面的","append-to-body":!0,"before-close":t.handleClose,visible:t.innerDrawer},on:{"update:visible":function(e){t.innerDrawer=e}}},[n("p",[t._v("_(:зゝ∠)_")])])],1)])],1)},staticRenderFns:[]},{data:function(){return{drawer:!1,innerDrawer:!1}},methods:{handleClose:function(t){this.$confirm("还有未保存的工作哦确定关闭吗？").then(function(e){t()}).catch(function(e){})}}})}},r=n(0),i=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),e._m(1),e._m(2),n("p",[e._v("呼出一个临时的侧边栏, 可以从多个方向呼出")]),n("demo-block",[n("div",[n("p",[e._v("需要设置 "),n("code",[e._v("visible")]),e._v(" 属性，它的"),n("strong",[e._v("类型")]),e._v("是 "),n("code",[e._v("boolean")]),e._v(",当为 "),n("strong",[e._v("true")]),e._v(" 时显示 Drawer。Drawer 分为两个部分："),n("code",[e._v("title")]),e._v(" 和 "),n("code",[e._v("body")]),e._v("，"),n("code",[e._v("title")]),e._v(" 需要具名为 "),n("strong",[e._v("title")]),e._v(" 的 "),n("code",[e._v("slot")]),e._v(", 也可以通过 "),n("code",[e._v("title")]),e._v(" 属性来定义，默认值为空。需要注意的是, Drawer 默认是从右往左打开, 当然可以设置对应的 "),n("code",[e._v("direction")]),e._v(", 详细请参考 "),n("code",[e._v("direction")]),e._v(" 用法 最后，本例还展示了 "),n("code",[e._v("before-close")]),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-radio-group v-model="direction">\n  <el-radio label="ltr">从左往右开</el-radio>\n  <el-radio label="rtl">从右往左开</el-radio>\n  <el-radio label="ttb">从上往下开</el-radio>\n  <el-radio label="btt">从下往上开</el-radio>\n</el-radio-group>\n\n<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">\n  点我打开\n</el-button>\n\n<el-drawer\n  title="我是标题"\n  :visible.sync="drawer"\n  :direction="direction"\n  :before-close="handleClose">\n  <span>我来啦!</span>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n        direction: \'rtl\',\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'确认关闭？\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("当你不需要标题到时候, 你还可以去掉标题")]),n("demo-block",[n("div",[n("p",[e._v("当遇到不需要 title 的场景时, 可以通过 "),n("code",[e._v("withHeader")]),e._v(" 这个属性来关闭掉 title 的显示, 这样可以留出更大的空间给到用户, 为了用户的可访问性, 请务必设定 "),n("code",[e._v("title")]),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-button @click="drawer = true" type="primary" style="margin-left: 16px;">\n  点我打开\n</el-button>\n\n<el-drawer\n  title="我是标题"\n  :visible.sync="drawer"\n  :with-header="false">\n  <span>我来啦!</span>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\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-button type="text" @click="table = true">打开嵌套表格的 Drawer</el-button>\n<el-button type="text" @click="dialog = true">打开嵌套 Form 的 Drawer</el-button>\n<el-drawer\n  title="我嵌套了表格!"\n  :visible.sync="table"\n  direction="rtl"\n  size="50%">\n   <el-table :data="gridData">\n      <el-table-column property="date" label="日期" width="150"></el-table-column>\n      <el-table-column property="name" label="姓名" width="200"></el-table-column>\n      <el-table-column property="address" label="地址"></el-table-column>\n    </el-table>\n</el-drawer>\n\n<el-drawer\n  title="我嵌套了 Form !"\n  :before-close="handleClose"\n  :visible.sync="dialog"\n  direction="ltr"\n  custom-class="demo-drawer"\n  ref="drawer"\n  >\n  <div class="demo-drawer__content">\n    <el-form :model="form">\n      <el-form-item label="活动名称" :label-width="formLabelWidth">\n        <el-input v-model="form.name" autocomplete="off"></el-input>\n      </el-form-item>\n      <el-form-item label="活动区域" :label-width="formLabelWidth">\n        <el-select v-model="form.region" placeholder="请选择活动区域">\n          <el-option label="区域一" value="shanghai"></el-option>\n          <el-option label="区域二" value="beijing"></el-option>\n        </el-select>\n      </el-form-item>\n    </el-form>\n    <div class="demo-drawer__footer">\n      <el-button @click="cancelForm">取 消</el-button>\n      <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? \'提交中 ...\' : \'确 定\' }}</el-button>\n    </div>\n  </div>\n</el-drawer>\n\n<script>\nexport default {\n  data() {\n    return {\n      table: false,\n      dialog: false,\n      loading: false,\n      gridData: [{\n        date: \'2016-05-02\',\n        name: \'王小虎\',\n        address: \'上海市普陀区金沙江路 1518 弄\'\n      }, {\n        date: \'2016-05-04\',\n        name: \'王小虎\',\n        address: \'上海市普陀区金沙江路 1518 弄\'\n      }, {\n        date: \'2016-05-01\',\n        name: \'王小虎\',\n        address: \'上海市普陀区金沙江路 1518 弄\'\n      }, {\n        date: \'2016-05-03\',\n        name: \'王小虎\',\n        address: \'上海市普陀区金沙江路 1518 弄\'\n      }],\n      form: {\n        name: \'\',\n        region: \'\',\n        date1: \'\',\n        date2: \'\',\n        delivery: false,\n        type: [],\n        resource: \'\',\n        desc: \'\'\n      },\n      formLabelWidth: \'80px\',\n      timer: null,\n    };\n  },\n  methods: {\n    handleClose(done) {\n      if (this.loading) {\n        return;\n      }\n      this.$confirm(\'确定要提交表单吗？\')\n        .then(_ => {\n          this.loading = true;\n          this.timer = setTimeout(() => {\n            done();\n            // 动画关闭需要一定的时间\n            setTimeout(() => {\n              this.loading = false;\n            }, 400);\n          }, 2000);\n        })\n        .catch(_ => {});\n    },\n    cancelForm() {\n      this.loading = false;\n      this.dialog = false;\n      clearTimeout(this.timer);\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div",[n("p",[e._v("同样, 如果你需要嵌套多层 "),n("code",[e._v("Drawer")]),e._v(" 请一定要设置 "),n("code",[e._v("append-to-body")]),e._v(" 属性为 "),n("strong",[e._v("true")])])]),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('\n<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">\n  点我打开\n</el-button>\n\n<el-drawer\n  title="我是外面的 Drawer"\n  :visible.sync="drawer"\n  size="50%">\n  <div>\n   <el-button @click="innerDrawer = true">打开里面的!</el-button>\n   <el-drawer\n     title="我是里面的"\n     :append-to-body="true"\n     :before-close="handleClose"\n     :visible.sync="innerDrawer">\n     <p>_(:зゝ∠)_</p>\n   </el-drawer>\n  </div>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n        innerDrawer: false,\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'还有未保存的工作哦确定关闭吗？\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n\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)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"drawer-chou-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drawer-chou-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" Drawer 抽屉")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("有些时候, "),n("code",[e._v("Dialog")]),e._v(" 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, "),n("code",[e._v("Drawer")]),e._v(" 拥有和 "),n("code",[e._v("Dialog")]),e._v(" 几乎相同的 API, 在 UI 上带来不一样的体验.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tian-jia-title"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tian-jia-title","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不添加 Title")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("和 "),n("code",[e._v("Dialog")]),e._v(" 组件一样, "),n("code",[e._v("Drawer")]),e._v(" 同样可以在其内部嵌套各种丰富的操作")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"duo-ceng-qian-tao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-ceng-qian-tao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多层嵌套")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Drawer")]),this._v(" 组件也拥有多层嵌套的方法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Drawer 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 "),n("code",[e._v("ref")]),e._v(" 获取相应组件，请在 "),n("code",[e._v("open")]),e._v(" 事件回调中进行。")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Drawer 提供一个 "),n("code",[e._v("destroyOnClose")]),e._v(" API, 用来在关闭 Drawer 时销毁子组件内容, 例如清理表单内的状态, 在必要时可以将该属性设置为 "),n("strong",[e._v("true")]),e._v(" 用来保证初始状态的一致性")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("如果 "),n("code",[e._v("visible")]),e._v(" 属性绑定的变量位于 Vuex 的 store 内，那么 "),n("code",[e._v(".sync")]),e._v(" 不会正常工作。此时需要去除 "),n("code",[e._v(".sync")]),e._v(" 修饰符，同时监听 Drawer 的 "),n("code",[e._v("open")]),e._v(" 和 "),n("code",[e._v("close")]),e._v(" 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 "),n("code",[e._v("visible")]),e._v(" 属性绑定的变量的值。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"drawer-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drawer-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Drawer Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("append-to-body")]),n("td",[e._v("Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("before-close")]),n("td",[e._v("关闭前的回调，会暂停 Drawer 的关闭")]),n("td",[e._v("function(done)，done 用于关闭 Drawer")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close-on-press-escape")]),n("td",[e._v("是否可以通过按下 ESC 关闭 Drawer")]),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("Drawer 的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("destroy-on-close")]),n("td",[e._v("控制是否在关闭 Drawer 之后将子元素全部销毁")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("modal")]),n("td",[e._v("是否需要遮罩层")]),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("遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上")]),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("Drawer 打开的方向")]),n("td",[e._v("Direction")]),n("td",[e._v("rtl / ltr / ttb / btt")]),n("td",[e._v("rtl")])]),n("tr",[n("td",[e._v("show-close")]),n("td",[e._v("是否显示关闭按钮")]),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("Drawer 窗体的大小, 当使用 "),n("code",[e._v("number")]),e._v(" 类型时, 以像素为单位, 当使用 "),n("code",[e._v("string")]),e._v(" 类型时, 请传入 'x%', 否则便会以 "),n("code",[e._v("number")]),e._v(" 类型解释")]),n("td",[e._v("number / string")]),n("td",[e._v("-")]),n("td",[e._v("'30%'")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Drawer 的标题，也可通过具名 slot （见下表）传入")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("visible")]),n("td",[e._v("是否显示 Drawer，支持 .sync 修饰符")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("wrapperClosable")]),n("td",[e._v("点击遮罩层是否可以关闭 Drawer")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("withHeader")]),n("td",[e._v("控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效")]),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:"drawer-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drawer-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Drawer 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("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Drawer 的内容")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Drawer 标题区的内容")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"drawer-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drawer-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Drawer Methods")])},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("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("closeDrawer")]),n("td",[e._v("用于关闭 Drawer, 该方法会调用传入的 "),n("code",[e._v("before-close")]),e._v(" 方法")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"drawer-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drawer-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Drawer Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("Drawer 打开的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("opened")]),n("td",[e._v("Drawer 打开动画结束时的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Drawer 关闭的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closed")]),n("td",[e._v("Drawer 关闭动画结束时的回调")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},582: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},l={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    下拉菜单"),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("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("蚵仔煎")])],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    更多菜单"),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("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:e.handleClick}},[e._v("\n  更多菜单\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],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 激活")]),e._v(" "),n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        下拉菜单"),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("黄金糕")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check"}},[e._v("蚵仔煎")])],1)],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("click 激活")]),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        下拉菜单"),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("黄金糕")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check"}},[e._v("蚵仔煎")])],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    下拉菜单"),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("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("蚵仔煎")])],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    下拉菜单"),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("黄金糕")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"b"}},[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"c"}},[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"d",disabled:""}},[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"e",divided:""}},[e._v("蚵仔煎")])],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  默认尺寸\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[e._v("\n  中等尺寸\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[e._v("\n  小型尺寸\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[e._v("\n  超小尺寸\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("黄金糕")]),e._v(" "),n("el-dropdown-item",[e._v("狮子头")]),e._v(" "),n("el-dropdown-item",[e._v("螺蛳粉")]),e._v(" "),n("el-dropdown-item",[e._v("双皮奶")]),e._v(" "),n("el-dropdown-item",[e._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=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("将动作或菜单折叠到下拉菜单中。")]),e._m(1),n("p",[e._v("移动到下拉菜单上，展开更多操作。")]),n("demo-block",[n("div",[n("p",[e._v("通过组件"),n("code",[e._v("slot")]),e._v("来设置下拉触发的元素以及需要通过具名"),n("code",[e._v("slot")]),e._v("为"),n("code",[e._v("dropdown")]),e._v(" 来设置下拉菜单。默认情况下，下拉按钮只要"),n("code",[e._v("hover")]),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-dropdown>\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\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(2),n("p",[e._v("可使用按钮触发下拉菜单。")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("split-button")]),e._v("属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为"),n("code",[e._v("true")]),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-dropdown>\n  <el-button type="primary">\n    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  更多菜单\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<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\n')])])])],2),e._m(3),n("p",[e._v("可以配置 click 激活或者 hover 激活。")]),n("demo-block",[n("div",[n("p",[e._v("在"),n("code",[e._v("trigger")]),e._v("属性设置为"),n("code",[e._v("click")]),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 激活</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        下拉菜单<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">黄金糕</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">click 激活</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</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("下拉菜单默认在点击菜单项后会被隐藏，将"),n("code",[e._v("hide-on-click")]),e._v("属性默认为"),n("code",[e._v("false")]),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-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\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("点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作")]),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    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">黄金糕</el-dropdown-item>\n    <el-dropdown-item command="b">狮子头</el-dropdown-item>\n    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<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("Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。")]),n("demo-block",[n("div",[n("p",[e._v("额外的尺寸："),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v("、"),n("code",[e._v("mini")]),e._v("，通过设置"),n("code",[e._v("size")]),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  默认尺寸\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n  中等尺寸\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n  小型尺寸\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n  超小尺寸\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n')])])])],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-xia-la-cai-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-xia-la-cai-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown 下拉菜单")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hong-fa-dui-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-dui-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 触发对象")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hong-fa-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 触发方式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cai-dan-yin-cang-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cai-dan-yin-cang-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 菜单隐藏方式")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("可以"),n("code",[e._v("hide-on-click")]),e._v("属性来配置。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhi-ling-shi-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-ling-shi-jian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 指令事件")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("菜单按钮类型，同 Button 组件(只在"),n("code",[e._v("split-button")]),e._v("为 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("菜单尺寸，在"),n("code",[e._v("split-button")]),e._v("为 true 的情况下也对触发按钮生效")]),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("下拉触发元素呈现为按钮组")]),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("菜单弹出位置")]),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("触发下拉的行为")]),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("是否在点击菜单项后隐藏菜单")]),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("展开下拉菜单的延时（仅在 trigger 为 hover 时有效）")]),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("收起下拉菜单的延时（仅在 trigger 为 hover 时有效）")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("150")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[e._v("Dropdown 组件的 "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"}},[e._v("tabindex")])]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),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:"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("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("触发下拉列表显示的元素。 注意： 必须是一个元素或者或者组件")])]),n("tr",[n("td",[e._v("dropdown")]),n("td",[e._v("下拉列表，通常是 "),n("code",[e._v("<el-dropdown-menu>")]),e._v(" 组件")])])])])},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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[n("code",[e._v("split-button")]),e._v(" 为 true 时，点击左侧按钮的回调")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("command")]),n("td",[e._v("点击菜单项触发的事件回调")]),n("td",[e._v("dropdown-item 的指令")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("下拉框出现/隐藏时触发")]),n("td",[e._v("出现则为 true，隐藏则为 false")])])])])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("command")]),n("td",[e._v("指令")]),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("禁用")]),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("显示分割线")]),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("图标类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.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},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-empty",{attrs:{description:"描述文字"}})],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-empty",{attrs:{image:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"}})],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-empty",{attrs:{"image-size":200}})],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-empty",[t("el-button",{attrs:{type:"primary"}},[this._v("按钮")])],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=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("空状态时的占位提示。")]),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-empty description="描述文字"></el-empty>\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-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>\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-empty :image-size="200"></el-empty>\n')])])])],2),e._m(6),n("p",[e._v("使用默认插槽可在底部插入内容。")]),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-empty>\n  <el-button type="primary">按钮</el-button>\n</el-empty>\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:"empty-kong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#empty-kong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Empty 空状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-tu-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-tu-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义图片")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("通过设置 "),n("code",[e._v("image")]),e._v(" 属性传入图片 URL。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-pian-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-pian-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图片尺寸")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("通过设置 "),n("code",[e._v("image-size")]),e._v(" 属性来控制图片大小。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"di-bu-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#di-bu-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 底部内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"empty-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#empty-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Empty Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("image")]),n("td",[e._v("图片地址")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("image-size")]),n("td",[e._v("图片大小（宽度）")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("文本描述")]),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:"empty-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#empty-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Empty 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("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("default")]),n("td",[e._v("自定义底部内容")])]),n("tr",[n("td",[e._v("image")]),n("td",[e._v("自定义图片")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("自定义描述文字")])])])])}],!1,null,null,null);t.default=i.exports},584: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},l={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":"80px"}},[n("el-form-item",{attrs:{label:"活动名称"}},[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:"活动区域"}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动时间"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},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:"选择时间"},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:"即时配送"}},[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:"活动性质"}},[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:"美食/餐厅线上活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"特殊资源"}},[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:"线上品牌商赞助"}}),t._v(" "),n("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动形式"}},[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("立即创建")]),t._v(" "),n("el-button",[t._v("取消")])],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:"审批人"}},[n("el-input",{attrs:{placeholder:"审批人"},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:"活动区域"}},[n("el-select",{attrs:{placeholder:"活动区域"},model:{value:t.formInline.region,callback:function(e){t.$set(t.formInline,"region",e)},expression:"formInline.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("查询")])],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("左对齐")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("右对齐")]),t._v(" "),n("el-radio-button",{attrs:{label:"top"}},[t._v("顶部对齐")])],1),t._v(" "),n("div",{staticStyle:{margin:"20px"}}),t._v(" "),n("el-form",{attrs:{"label-position":t.labelPosition,"label-width":"80px",model:t.formLabelAlign}},[n("el-form-item",{attrs:{label:"名称"}},[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:"活动区域"}},[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:"活动形式"}},[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":"100px"}},[n("el-form-item",{attrs:{label:"活动名称",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:"活动区域",prop:"region"}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.ruleForm.region,callback:function(e){t.$set(t.ruleForm,"region",e)},expression:"ruleForm.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动时间",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:"选择日期"},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:"选择时间"},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:"即时配送",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:"活动性质",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:"美食/餐厅线上活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"特殊资源",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:"线上品牌商赞助"}}),t._v(" "),n("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动形式",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("立即创建")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("重置")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},rules:{name:[{required:!0,message:"请输入活动名称",trigger:"blur"},{min:3,max:5,message:"长度在 3 到 5 个字符",trigger:"blur"}],region:[{required:!0,message:"请选择活动区域",trigger:"change"}],date1:[{type:"date",required:!0,message:"请选择日期",trigger:"change"}],date2:[{type:"date",required:!0,message:"请选择时间",trigger:"change"}],type:[{type:"array",required:!0,message:"请至少选择一个活动性质",trigger:"change"}],resource:[{required:!0,message:"请选择活动资源",trigger:"change"}],desc:[{required:!0,message:"请填写活动形式",trigger:"blur"}]}}},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":"100px"}},[n("el-form-item",{attrs:{label:"密码",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:"确认密码",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:"年龄",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("提交")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("重置")])],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("请输入密码")):(""!==a.ruleForm.checkPass&&a.$refs.ruleForm.validateField("checkPass"),n())},trigger:"blur"}],checkPass:[{validator:function(e,t,n){""===t?n(new Error("请再次输入密码")):t!==a.ruleForm.pass?n(new Error("两次输入密码不一致!")):n()},trigger:"blur"}],age:[{validator:function(e,t,n){if(!t)return n(new Error("年龄不能为空"));setTimeout(function(){Number.isInteger(t)?t<18?n(new Error("必须年满18岁")):n():n(new Error("请输入数字值"))},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":"100px"}},[a("el-form-item",{attrs:{prop:"email",label:"邮箱",rules:[{required:!0,message:"请输入邮箱地址",trigger:"blur"},{type:"email",message:"请输入正确的邮箱地址",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:"域名"+e,prop:"domains."+e+".value",rules:{required:!0,message:"域名不能为空",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("删除")])],1)}),n._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){n.submitForm("dynamicValidateForm")}}},[n._v("提交")]),n._v(" "),a("el-button",{on:{click:n.addDomain}},[n._v("新增域名")]),n._v(" "),a("el-button",{on:{click:function(e){n.resetForm("dynamicValidateForm")}}},[n._v("重置")])],1)],2)],1)},staticRenderFns:[]},{data:function(){return{dynamicValidateForm:{domains:[{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({value:"",key:Date.now()})}}}),"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:"年龄",prop:"age",rules:[{required:!0,message:"年龄不能为空"},{type:"number",message:"年龄必须为数字值"}]}},[n("el-input",{attrs:{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("提交")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("numberValidateForm")}}},[t._v("重置")])],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":"80px",size:"mini"}},[n("el-form-item",{attrs:{label:"活动名称"}},[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:"活动区域"}},[n("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:t.sizeForm.region,callback:function(e){t.$set(t.sizeForm,"region",e)},expression:"sizeForm.region"}},[n("el-option",{attrs:{label:"区域一",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"活动时间"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},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:"选择时间"},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:"活动性质"}},[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:"美食/餐厅线上活动",name:"type"}}),t._v(" "),n("el-checkbox-button",{attrs:{label:"地推活动",name:"type"}}),t._v(" "),n("el-checkbox-button",{attrs:{label:"线下主题活动",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"特殊资源"}},[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:"线上品牌商赞助"}}),t._v(" "),n("el-radio",{attrs:{border:"",label:"线下场地免费"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{size:"large"}},[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("立即创建")]),t._v(" "),n("el-button",[t._v("取消")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}})}},r=n(0),i=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("由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据")]),e._m(1),n("p",[e._v("包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。")]),n("demo-block",[n("div",[n("p",[e._v("在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker")])]),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="80px">\n  <el-form-item label="活动名称">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="form.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="即时配送">\n    <el-switch v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="活动性质">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n      <el-checkbox label="地推活动" name="type"></el-checkbox>\n      <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="线上品牌商赞助"></el-radio>\n      <el-radio label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="活动形式">\n    <el-input type="textarea" v-model="form.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">立即创建</el-button>\n    <el-button>取消</el-button>\n  </el-form-item>\n</el-form>\n<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(2),e._m(3),n("p",[e._v("当垂直方向空间受限且表单较简单时，可以在一行内放置表单。")]),n("demo-block",[n("div",[n("p",[e._v("设置 "),n("code",[e._v("inline")]),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-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="审批人">\n    <el-input v-model="formInline.user" placeholder="审批人"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="formInline.region" placeholder="活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">查询</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(4),n("p",[e._v("根据具体目标和制约因素，选择最佳的标签对齐方式。")]),n("demo-block",[n("div",[n("p",[e._v("通过设置 "),n("code",[e._v("label-position")]),e._v(" 属性可以改变表单域标签的位置，可选值为 "),n("code",[e._v("top")]),e._v("、"),n("code",[e._v("left")]),e._v("，当设为 "),n("code",[e._v("top")]),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-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">左对齐</el-radio-button>\n  <el-radio-button label="right">右对齐</el-radio-button>\n  <el-radio-button label="top">顶部对齐</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">\n  <el-form-item label="名称">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="活动形式">\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(5),n("p",[e._v("在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。")]),n("demo-block",[n("div",[n("p",[e._v("Form 组件提供了表单验证的功能，只需要通过 "),n("code",[e._v("rules")]),e._v(" 属性传入约定的验证规则，并将 Form-Item 的 "),n("code",[e._v("prop")]),e._v(" 属性设置为需校验的字段名即可。校验规则参见 "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")])])]),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="100px" class="demo-ruleForm">\n  <el-form-item label="活动名称" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-form-item prop="date2">\n        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="即时配送" prop="delivery">\n    <el-switch v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="活动性质" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n      <el-checkbox label="地推活动" name="type"></el-checkbox>\n      <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="线上品牌商赞助"></el-radio>\n      <el-radio label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="活动形式" prop="desc">\n    <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm\')">立即创建</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">重置</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: \'请输入活动名称\', trigger: \'blur\' },\n            { min: 3, max: 5, message: \'长度在 3 到 5 个字符\', trigger: \'blur\' }\n          ],\n          region: [\n            { required: true, message: \'请选择活动区域\', trigger: \'change\' }\n          ],\n          date1: [\n            { type: \'date\', required: true, message: \'请选择日期\', trigger: \'change\' }\n          ],\n          date2: [\n            { type: \'date\', required: true, message: \'请选择时间\', trigger: \'change\' }\n          ],\n          type: [\n            { type: \'array\', required: true, message: \'请至少选择一个活动性质\', trigger: \'change\' }\n          ],\n          resource: [\n            { required: true, message: \'请选择活动资源\', trigger: \'change\' }\n          ],\n          desc: [\n            { required: true, message: \'请填写活动形式\', trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      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(6),n("p",[e._v("这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。")]),n("demo-block",[n("div",[n("p",[e._v("本例还使用"),n("code",[e._v("status-icon")]),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-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item label="密码" prop="pass">\n    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="确认密码" prop="checkPass">\n    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item label="年龄" 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\')">提交</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">重置</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(\'年龄不能为空\'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error(\'请输入数字值\'));\n          } else {\n            if (value < 18) {\n              callback(new Error(\'必须年满18岁\'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === \'\') {\n          callback(new Error(\'请输入密码\'));\n        } else {\n          if (this.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(\'请再次输入密码\'));\n        } else if (value !== this.ruleForm.pass) {\n          callback(new Error(\'两次输入密码不一致!\'));\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(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则")])]),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="100px" class="demo-dynamic">\n  <el-form-item\n    prop="email"\n    label="邮箱"\n    :rules="[\n      { required: true, message: \'请输入邮箱地址\', trigger: \'blur\' },\n      { type: \'email\', message: \'请输入正确的邮箱地址\', 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="\'域名\' + index"\n    :key="domain.key"\n    :prop="\'domains.\' + index + \'.value\'"\n    :rules="{\n      required: true, message: \'域名不能为空\', trigger: \'blur\'\n    }"\n  >\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">提交</el-button>\n    <el-button @click="addDomain">新增域名</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\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          value: \'\',\n          key: Date.now()\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("数字类型的验证需要在 "),n("code",[e._v("v-model")]),e._v(" 处加上 "),n("code",[e._v(".number")]),e._v(" 的修饰符，这是 "),n("code",[e._v("Vue")]),e._v(" 自身提供的用于将绑定值转化为 "),n("code",[e._v("number")]),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-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item\n    label="年龄"\n    prop="age"\n    :rules="[\n      { required: true, message: \'年龄不能为空\'},\n      { type: \'number\', message: \'年龄必须为数字值\'}\n    ]"\n  >\n    <el-input 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\')">提交</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">重置</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(10),e._m(11),e._m(12),n("demo-block",[n("div",[n("p",[e._v("如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的"),n("code",[e._v("size")]),e._v("属性，直接为这个表单项或表单组件设置自己的"),n("code",[e._v("size")]),e._v("即可。")])]),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="80px" size="mini">\n  <el-form-item label="活动名称">\n    <el-input v-model="sizeForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="sizeForm.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="选择日期" v-model="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="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="活动性质">\n    <el-checkbox-group v-model="sizeForm.type">\n      <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>\n      <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>\n      <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源">\n    <el-radio-group v-model="sizeForm.resource" size="medium">\n      <el-radio border label="线上品牌商赞助"></el-radio>\n      <el-radio border label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size="large">\n    <el-button type="primary" @click="onSubmit">立即创建</el-button>\n    <el-button>取消</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        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(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),e._m(24),e._m(25),e._m(26)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"form-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-biao-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form 表单")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dian-xing-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dian-xing-biao-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 典型表单")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("W3C 标准中有如下"),n("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[e._v("规定")]),e._v("：")]),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("即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 "),n("code",[e._v("<el-form>")]),e._v(" 标签上添加 "),n("code",[e._v("@submit.native.prevent")]),e._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xing-nei-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xing-nei-biao-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 行内表单")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dui-qi-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 对齐方式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"biao-dan-yan-zheng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-yan-zheng","aria-hidden":"true"}},[this._v("¶")]),this._v(" 表单验证")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-xiao-yan-gui-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-xiao-yan-gui-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义校验规则")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("自定义校验 callback 必须被调用。 更多高级用法可参考 "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-tai-zeng-jian-biao-dan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-dan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态增减表单项")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-zi-lei-xing-yan-zheng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-zi-lei-xing-yan-zheng","aria-hidden":"true"}},[this._v("¶")]),this._v(" 数字类型验证")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("嵌套在 "),n("code",[e._v("el-form-item")]),e._v(" 中的 "),n("code",[e._v("el-form-item")]),e._v(" 标签宽度默认为零，不会继承 "),n("code",[e._v("el-form")]),e._v(" 的 "),n("code",[e._v("label-width")]),e._v("。如果需要可以为其单独设置 "),n("code",[e._v("label-width")]),e._v(" 属性。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"biao-dan-nei-zu-jian-chi-cun-kong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-nei-zu-jian-chi-cun-kong-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 表单内组件尺寸控制")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("通过设置 Form 上的 "),n("code",[e._v("size")]),e._v(" 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("model")]),n("td",[e._v("表单数据对象")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("表单验证规则")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inline")]),n("td",[e._v("行内表单模式")]),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("表单域标签的位置，如果值为 left 或者 right 时，则需要设置 "),n("code",[e._v("label-width")])]),n("td",[e._v("string")]),n("td",[e._v("right/left/top")]),n("td",[e._v("right")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 "),n("code",[e._v("auto")]),e._v("。")]),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("表单域标签的后缀")]),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("是否隐藏必填字段的标签旁边的红色星号")]),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("是否显示校验错误信息")]),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("是否以行内形式展示校验信息")]),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("是否在输入框中显示校验结果反馈图标")]),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("是否在 "),n("code",[e._v("rules")]),e._v(" 属性改变后立即触发一次验证")]),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("用于控制该表单内组件的尺寸")]),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("是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 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:"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("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise")]),n("td",[e._v("Function(callback: Function(boolean, object))")])]),n("tr",[n("td",[e._v("validateField")]),n("td",[e._v("对部分表单字段进行校验的方法")]),n("td",[e._v("Function(props: array | string, callback: Function(errorMessage: string))")])]),n("tr",[n("td",[e._v("resetFields")]),n("td",[e._v("对整个表单进行重置，将所有字段值重置为初始值并移除校验结果")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果")]),n("td",[e._v("Function(props: array | string)")])])])])},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,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("任一表单项被校验后触发")]),n("td",[e._v("被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）")])])])])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("prop")]),n("td",[e._v("表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的")]),n("td",[e._v("string")]),n("td",[e._v("传入 Form 组件的 "),n("code",[e._v("model")]),e._v(" 中的字段")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("标签文本")]),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("表单域标签的的宽度，例如 '50px'。支持 "),n("code",[e._v("auto")]),e._v("。")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("required")]),n("td",[e._v("是否必填，如不设置，则会根据校验规则自动生成")]),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("表单验证规则")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("表单域验证错误信息, 设置该值会使表单验证状态变为"),n("code",[e._v("error")]),e._v("，并显示该错误信息")]),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("是否显示校验错误信息")]),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("以行内形式展示校验信息")]),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("用于控制该表单域下组件的尺寸")]),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,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Form Item 的内容")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("标签文本的内容")])])])])},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,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("name")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("error")]),n("td",[e._v("自定义表单校验信息的显示方式，参数为 { 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("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("resetField")]),n("td",[e._v("对该表单项进行重置，将其值重置为初始值并移除校验结果")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("移除该表单项的校验结果")]),n("td",[e._v("-")])])])])}],!1,null,null,null);t.default=i.exports},585: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,t=e.$createElement,n=e._self._c||t;return n("div",[n("i",{staticClass:"el-icon-edit"}),e._v(" "),n("i",{staticClass:"el-icon-share"}),e._v(" "),n("i",{staticClass:"el-icon-delete"}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[e._v("搜索")])],1)},staticRenderFns:[]},{})}},l=n(0),r=Object(l.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("提供了一套常用的图标集合。")]),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">搜索</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-tu-biao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon-tu-biao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icon 图标")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-yong-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用方法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("直接通过设置类名为 "),n("code",[e._v("el-icon-iconName")]),e._v(" 来使用即可。例如：")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-biao-ji-he"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-ji-he","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图标集合")])}],!1,null,null,null);t.default=r.exports},586: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},l={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("默认")]),e._v(" "),n("el-image",{attrs:{src:e.src}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("自定义")]),e._v(" "),n("el-image",{attrs:{src:e.src}},[n("div",{staticClass:"image-slot",attrs:{slot:"placeholder"},slot:"placeholder"},[e._v("\n        加载中"),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,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"demo-image__error"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("默认")]),e._v(" "),n("el-image")],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("自定义")]),e._v(" "),n("el-image",[n("div",{staticClass:"image-slot",attrs:{slot:"error"},slot:"error"},[n("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"]}}}),"element-demo4":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"demo-image__preview"},[t("el-image",{staticStyle:{width:"100px",height:"100px"},attrs:{src:this.url,"preview-src-list":this.srcList}})],1)])},staticRenderFns:[]},{data:function(){return{url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",srcList:["https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg","https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"]}}})}},r=n(0),i=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("图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("可通过"),n("code",[e._v("fit")]),e._v("确定图片如何适应到容器框，同原生 "),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("可通过"),n("code",[e._v("slot = placeholder")]),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('<div class="demo-image__placeholder">\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-image :src="src"></el-image>\n  </div>\n  <div class="block">\n    <span class="demonstration">自定义</span>\n    <el-image :src="src">\n      <div slot="placeholder" class="image-slot">\n        加载中<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("可通过"),n("code",[e._v("slot = error")]),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('<div class="demo-image__error">\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-image></el-image>\n  </div>\n  <div class="block">\n    <span class="demonstration">自定义</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("可通过"),n("code",[e._v("lazy")]),e._v("开启懒加载功能，当图片滚动到可视范围内才会加载。可通过"),n("code",[e._v("scroll-container")]),e._v("来设置滚动容器，若未定义，则为最近一个"),n("code",[e._v("overflow")]),e._v("值为"),n("code",[e._v("auto")]),e._v("或"),n("code",[e._v("scroll")]),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("<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),n("demo-block",[n("div",[n("p",[e._v("可通过 "),n("code",[e._v("previewSrcList")]),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('<div class="demo-image__preview">\n  <el-image \n    style="width: 100px; height: 100px"\n    :src="url" \n    :preview-src-list="srcList">\n  </el-image>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        url: \'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\',\n        srcList: [\n          \'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg\',\n          \'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg\'\n        ]\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)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"image-tu-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#image-tu-pian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Image 图片")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhan-wei-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhan-wei-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 占位内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jia-zai-shi-bai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-shi-bai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 加载失败")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"lan-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lan-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 懒加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"da-tu-yu-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#da-tu-yu-lan","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("src")]),n("td",[e._v("图片源，同原生")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("确定图片如何适应容器框，同原生 "),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("原生 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("原生 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("是否开启懒加载")]),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("开启懒加载后，监听 scroll 事件的容器")]),n("td",[e._v("string / HTMLElement")]),n("td",[e._v("—")]),n("td",[e._v("最近一个 overflow 值为 auto 或 scroll 的父元素")])]),n("tr",[n("td",[e._v("preview-src-list")]),n("td",[e._v("开启图片预览功能")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("z-index")]),n("td",[e._v("设置图片预览的 z-index")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("2000")])])])])},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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("load")]),n("td",[e._v("图片加载成功触发")]),n("td",[e._v("(e: Event)")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("图片加载失败触发")]),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,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("名称")]),n("th",[e._v("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("图片未加载的占位内容")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("加载失败的内容")])])])])}],!1,null,null,null);t.default=i.exports},587: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},l={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",staticStyle:{overflow:"auto"}},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",staticStyle:{overflow:"auto"}},[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("加载中...")]):t._e(),t._v(" "),t.noMore?n("p",[t._v("没有更多了")]):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)}}})}},r=n(0),i=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("滚动至底部时，加载更多数据。")]),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" style="overflow:auto">\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" style="overflow:auto">\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">加载中...</p>\n    <p v-if="noMore">没有更多了</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-wu-xian-gun-dong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#infinitescroll-wu-xian-gun-dong","aria-hidden":"true"}},[this._v("¶")]),this._v(" InfiniteScroll 无限滚动")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("在要实现滚动加载的列表上上添加"),n("code",[e._v("v-infinite-scroll")]),e._v("，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("infinite-scroll-disabled")]),n("td",[e._v("是否禁用")]),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("节流时延，单位为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("触发加载的距离阈值，单位为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("是否立即执行加载方法，以防初始状态下内容无法撑满容器。")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])}],!1,null,null,null);t.default=i.exports},588: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},l={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,label:"描述文字"},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)}}})}},r=n(0),i=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("仅允许输入标准的数字值，可定义范围")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("要使用它，只需要在"),n("code",[e._v("el-input-number")]),e._v("元素中使用"),n("code",[e._v("v-model")]),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-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></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",[n("code",[e._v("disabled")]),e._v("属性接受一个"),n("code",[e._v("Boolean")]),e._v("，设置为"),n("code",[e._v("true")]),e._v("即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置"),n("code",[e._v("min")]),e._v("属性和"),n("code",[e._v("max")]),e._v("属性，不设置"),n("code",[e._v("min")]),e._v("和"),n("code",[e._v("max")]),e._v("时，最小值为 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('<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("允许定义递增递减的步数控制")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("step")]),e._v("属性可以控制步长，接受一个"),n("code",[e._v("Number")]),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-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",[n("code",[e._v("step-strictly")]),e._v("属性接受一个"),n("code",[e._v("Boolean")]),e._v("。如果这个属性被设置为"),n("code",[e._v("true")]),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-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("设置 "),n("code",[e._v("precision")]),e._v(" 属性可以控制数值精度，接收一个 "),n("code",[e._v("Number")]),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('<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("设置 "),n("code",[e._v("controls-position")]),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('<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-ji-shu-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber-ji-shu-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber 计数器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 步数")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yan-ge-bu-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yan-ge-bu-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 严格步数")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jing-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jing-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 精度")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[n("code",[e._v("precision")]),e._v(" 的值必须是一个非负整数，并且不能小于 "),n("code",[e._v("step")]),e._v(" 的小数位数。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 尺寸")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("额外提供了 "),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v("、"),n("code",[e._v("mini")]),e._v(" 三种尺寸的数字输入框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-niu-wei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-wei-zhi","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),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("设置计数器允许的最小值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("-Infinity")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("设置计数器允许的最大值")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("Infinity")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("计数器步长")]),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("是否只能输入 step 的倍数")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("precision")]),n("td",[e._v("数值精度")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("计数器尺寸")]),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("是否禁用计数器")]),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("是否使用控制按钮")]),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("控制按钮位置")]),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("原生属性")]),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文字")]),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")]),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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("绑定值被改变时触发")]),n("td",[e._v("currentValue, oldValue")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("在组件 Input 失去焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("在组件 Input 获得焦点时触发")]),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("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("选中 input 中的文字")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},589: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},l={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:"请输入内容"},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:"请输入内容",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:"请输入内容",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:"请输入密码","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"},[t._v("\n  属性方式：\n  "),n("el-input",{attrs:{placeholder:"请选择日期","suffix-icon":"el-icon-date"},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}}),t._v(" "),n("el-input",{attrs:{placeholder:"请输入内容","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"},[t._v("\n  slot 方式：\n  "),n("el-input",{attrs:{placeholder:"请选择日期"},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:"请输入内容"},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:"请输入内容"},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:"请输入内容"},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:"请输入内容"},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:"请输入内容"},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:"请输入内容"},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:"请输入内容"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[n("el-select",{attrs:{slot:"prepend",placeholder:"请选择"},slot:"prepend",model:{value:t.select,callback:function(e){t.select=e},expression:"select"}},[n("el-option",{attrs:{label:"餐厅名",value:"1"}}),t._v(" "),n("el-option",{attrs:{label:"订单号",value:"2"}}),t._v(" "),n("el-option",{attrs:{label:"用户电话",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:"请输入内容","suffix-icon":"el-icon-date"},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}}),t._v(" "),n("el-input",{attrs:{size:"medium",placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}}),t._v(" "),n("el-input",{attrs:{size:"small",placeholder:"请输入内容","suffix-icon":"el-icon-date"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}}),t._v(" "),n("el-input",{attrs:{size:"mini",placeholder:"请输入内容","suffix-icon":"el-icon-date"},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("激活即列出输入建议")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"请输入内容"},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("输入后匹配输入建议")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"请输入内容","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{restaurants:[],state1:"",state2:""}},methods:{querySearch:function(e,t){var n=this.restaurants;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:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE  鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},handleSelect:function(e){console.log(e)}},mounted:function(){this.restaurants=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:"请输入内容"},on:{select:n.handleSelect},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.item;return[a("div",{staticClass:"name"},[n._v(n._s(t.value))]),n._v(" "),a("span",{staticClass:"addr"},[n._v(n._s(t.address))])]}}]),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{restaurants:[],state:""}},methods:{querySearch:function(e,t){var n=this.restaurants;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:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE  鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},handleSelect:function(e){console.log(e)},handleIconClick:function(e){console.log(e)}},mounted:function(){this.restaurants=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:"请输入内容"},on:{select:t.handleSelect},model:{value:t.state,callback:function(e){t.state=e},expression:"state"}})],1)},staticRenderFns:[]},{data:function(){return{restaurants:[],state:"",timeout:null}},methods:{loadAll:function(){return[{value:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE  鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},querySearchAsync:function(e,t){var n=this.restaurants,a=e?n.filter(this.createStateFilter(e)):n;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(a)},3e3*Math.random())},createStateFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.restaurants=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:"请输入内容",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:"请输入内容",maxlength:"30","show-word-limit":""},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]},{data:function(){return{text:"",textarea:""}}})}},r=n(0),i=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("通过鼠标或键盘输入字符")]),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 v-model="input" placeholder="请输入内容"></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("通过 "),n("code",[e._v("disabled")]),e._v(" 属性指定是否禁用 input 组件")])]),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="请输入内容"\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("使用"),n("code",[e._v("clearable")]),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-input\n  placeholder="请输入内容"\n  v-model="input"\n  clearable>\n</el-input>\n\n<script>\n  export 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("使用"),n("code",[e._v("show-password")]),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-input placeholder="请输入密码" 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("带有图标标记输入类型")]),n("demo-block",[n("div",[n("p",[e._v("可以通过 "),n("code",[e._v("prefix-icon")]),e._v(" 和 "),n("code",[e._v("suffix-icon")]),e._v(" 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。")])]),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  属性方式：\n  <el-input\n    placeholder="请选择日期"\n    suffix-icon="el-icon-date"\n    v-model="input1">\n  </el-input>\n  <el-input\n    placeholder="请输入内容"\n    prefix-icon="el-icon-search"\n    v-model="input2">\n  </el-input>\n</div>\n<div class="demo-input-suffix">\n  slot 方式：\n  <el-input\n    placeholder="请选择日期"\n    v-model="input3">\n    <i slot="suffix" class="el-input__icon el-icon-date"></i>\n  </el-input>\n  <el-input\n    placeholder="请输入内容"\n    v-model="input4">\n    <i slot="prefix" class="el-input__icon el-icon-search"></i>\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(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("文本域高度可通过 "),n("code",[e._v("rows")]),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-input\n  type="textarea"\n  :rows="2"\n  placeholder="请输入内容"\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="请输入内容"\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="请输入内容"\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("可前置或后置元素，一般为标签或按钮")]),n("demo-block",[n("div",[n("p",[e._v("可通过 slot 来指定在 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="请输入内容" v-model="input1">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="请输入内容" v-model="input2">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">\n    <el-select v-model="select" slot="prepend" placeholder="请选择">\n      <el-option label="餐厅名" value="1"></el-option>\n      <el-option label="订单号" value="2"></el-option>\n      <el-option label="用户电话" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="el-icon-search"></el-button>\n  </el-input>\n</div>\n<style>\n  .el-select .el-input {\n    width: 130px;\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("可通过 "),n("code",[e._v("size")]),e._v(" 属性指定输入框的尺寸，除了默认的大小外，还提供了 medium、small 和 mini 三种尺寸。")])]),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="请输入内容"\n    suffix-icon="el-icon-date"\n    v-model="input1">\n  </el-input>\n  <el-input\n    size="medium"\n    placeholder="请输入内容"\n    suffix-icon="el-icon-date"\n    v-model="input2">\n  </el-input>\n  <el-input\n    size="small"\n    placeholder="请输入内容"\n    suffix-icon="el-icon-date"\n    v-model="input3">\n  </el-input>\n  <el-input\n    size="mini"\n    placeholder="请输入内容"\n    suffix-icon="el-icon-date"\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("根据输入内容提供对应的输入建议")]),n("demo-block",[n("div",[n("p",[e._v("autocomplete 是一个可带输入建议的输入框组件，"),n("code",[e._v("fetch-suggestions")]),e._v(" 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。")])]),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">激活即列出输入建议</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state1"\n      :fetch-suggestions="querySearch"\n      placeholder="请输入内容"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">输入后匹配输入建议</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state2"\n      :fetch-suggestions="querySearch"\n      placeholder="请输入内容"\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        restaurants: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(14),n("p",[e._v("可自定义输入建议的显示")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("scoped slot")]),e._v("自定义输入建议的模板。该 scope 的参数为"),n("code",[e._v("item")]),e._v("，表示当前输入建议对象。")])]),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="请输入内容"\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="name">{{ item.value }}</div>\n    <span class="addr">{{ item.address }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n.my-autocomplete {\n  li {\n    line-height: normal;\n    padding: 7px;\n\n    .name {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n    .addr {\n      font-size: 12px;\n      color: #b4b4b4;\n    }\n\n    .highlighted .addr {\n      color: #ddd;\n    }\n  }\n}\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("从服务端搜索数据")]),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="请输入内容"\n  @select="handleSelect"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      querySearchAsync(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createStateFilter(queryString) {\n        return (state) => {\n          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),n("demo-block",[n("div",[n("p",[n("code",[e._v("maxlength")]),e._v(" 和 "),n("code",[e._v("minlength")]),e._v(" 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 "),n("code",[e._v("text")]),e._v(" 或 "),n("code",[e._v("textarea")]),e._v(" 的输入框，在使用 "),n("code",[e._v("maxlength")]),e._v(" 属性限制最大输入长度的同时，可通过设置 "),n("code",[e._v("show-word-limit")]),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('<el-input\n  type="text"\n  placeholder="请输入内容"\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="请输入内容"\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-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-shu-ru-kuang","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 为受控组件，它"),n("strong",[e._v("总会显示 Vue 绑定值")]),e._v("。")]),n("p",[e._v("通常情况下，应当处理 "),n("code",[e._v("input")]),e._v(" 事件，并更新组件的绑定值（或使用"),n("code",[e._v("v-model")]),e._v("）。否则，输入框内显示的值将不会改变。")]),n("p",[e._v("不支持 "),n("code",[e._v("v-model")]),e._v(" 修饰符。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-qing-kong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可清空")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mi-ma-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mi-ma-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 密码框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-icon-de-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-icon-de-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带 icon 的输入框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-ben-yu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-ben-yu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文本域")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("用于输入多行文本信息，通过将 "),n("code",[e._v("type")]),e._v(" 属性的值指定为 textarea。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可自适应文本高度的文本域")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("通过设置 "),n("code",[e._v("autosize")]),e._v(" 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 "),n("code",[e._v("autosize")]),e._v(" 还可以设定为一个对象，指定最小行数和最大行数。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-he-xing-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-he-xing-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 复合型输入框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-shu-ru-jian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-shu-ru-jian-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带输入建议")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义模板")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 远程搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-ru-chang-du-xian-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-ru-chang-du-xian-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 输入长度限制")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("类型")]),n("td",[e._v("string")]),n("td",[e._v("text，textarea 和其他 "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types"}},[e._v("原生 input 的 type 值")])]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),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("原生属性，最大输入长度")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("minlength")]),n("td",[e._v("原生属性，最小输入长度")]),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("是否显示输入字数统计，只在 "),n("code",[e._v('type = "text"')]),e._v(" 或 "),n("code",[e._v('type = "textarea"')]),e._v(" 时有效")]),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("输入框占位文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否可清空")]),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("是否显示切换密码图标")]),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("禁用")]),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("输入框尺寸，只在 "),n("code",[e._v('type!="textarea"')]),e._v(" 时有效")]),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("输入框头部图标")]),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("输入框尾部图标")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rows")]),n("td",[e._v("输入框行数，只对 "),n("code",[e._v('type="textarea"')]),e._v(" 有效")]),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("自适应内容高度，只对 "),n("code",[e._v('type="textarea"')]),e._v(" 有效，可传入对象，如，{ 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("原生属性，自动补全")]),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("下个主版本弃用")]),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("原生属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("原生属性，是否只读")]),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("原生属性，设置最大值")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("原生属性，设置最小值")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("原生属性，设置输入字段的合法数字间隔")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("resize")]),n("td",[e._v("控制是否能被用户缩放")]),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("原生属性，自动获取焦点")]),n("td",[e._v("boolean")]),n("td",[e._v("true, false")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("form")]),n("td",[e._v("原生属性")]),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文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[e._v("输入框的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("输入时是否触发表单的校验")]),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("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("输入框头部内容，只对 "),n("code",[e._v('type="text"')]),e._v(" 有效")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("输入框尾部内容，只对 "),n("code",[e._v('type="text"')]),e._v(" 有效")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("输入框前置内容，只对 "),n("code",[e._v('type="text"')]),e._v(" 有效")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("输入框后置内容，只对 "),n("code",[e._v('type="text"')]),e._v(" 有效")])])])])},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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("blur")]),n("td",[e._v("在 Input 失去焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("在 Input 获得焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("change")]),n("td",[e._v("仅在输入框失去焦点或用户按下回车时触发")]),n("td",[e._v("(value: string | number)")])]),n("tr",[n("td",[e._v("input")]),n("td",[e._v("在 Input 值改变时触发")]),n("td",[e._v("(value: string | number)")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("在点击由 "),n("code",[e._v("clearable")]),e._v(" 属性生成的清空按钮时触发")]),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("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("使 input 失去焦点")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("选中 input 中的文字")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("输入框占位文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("禁用")]),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("输入建议对象中用于显示的键名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("必填值，输入绑定值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("获取输入建议的去抖延时")]),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("菜单弹出位置")]),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("返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它")]),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("Autocomplete 下拉列表的类名")]),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("是否在输入框 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("原生属性")]),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("在输入没有任何匹配建议的情况下，按下回车是否触发 "),n("code",[e._v("select")]),e._v(" 事件")]),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文字")]),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("输入框头部图标")]),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("输入框尾部图标")]),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("是否隐藏远程加载时的加载图标")]),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("是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 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("是否默认突出显示远程搜索建议中的第一项")]),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("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("输入框头部内容")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("输入框尾部内容")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("输入框前置内容")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("输入框后置内容")])])])])},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("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("自定义输入建议，参数为 { 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,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("点击选中建议项时触发")]),n("td",[e._v("选中建议项")])]),n("tr",[n("td",[e._v("change")]),n("td",[e._v("在 Input 值改变时触发")]),n("td",[e._v("(value: string | number)")])])])])},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("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 input 获取焦点")]),t("td",[this._v("-")])])])])}],!1,null,null,null);t.default=i.exports},590: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},l={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:[]},{})}},r=n(0),i=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("通过基础的 24 分栏，迅速简便地创建布局。")]),e._m(1),n("p",[e._v("使用单一分栏创建基础的栅格布局。")]),n("demo-block",[n("div",[n("p",[e._v("通过 row 和 col 组件，并通过 col 组件的 "),n("code",[e._v("span")]),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-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("分栏之间存在间隔。")]),n("demo-block",[n("div",[n("p",[e._v("Row 组件 提供 "),n("code",[e._v("gutter")]),e._v(" 属性来指定每一栏之间的间隔，默认间隔为 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("通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。")]),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("支持偏移指定的栏数。")]),n("demo-block",[n("div",[n("p",[e._v("通过制定 col 组件的 "),n("code",[e._v("offset")]),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="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),e._m(6),n("demo-block",[n("div",[n("p",[e._v("将 "),n("code",[e._v("type")]),e._v(" 属性赋值为 'flex'，可以启用 flex 布局，并可通过 "),n("code",[e._v("justify")]),e._v(" 属性来指定 start, center, end, space-between, 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(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('<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(9),n("p",[e._v("Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：")]),e._m(10),n("p",[e._v("包含的类名及其含义为：")]),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:"layout-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout 布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fen-lan-jian-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-jian-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 分栏间隔")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hun-he-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hun-he-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 混合布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fen-lan-pian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-pian-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 分栏偏移")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dui-qi-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 对齐方式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("通过 "),t("code",[this._v("flex")]),this._v(" 布局来对分栏进行灵活的对齐。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xiang-ying-shi-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiang-ying-shi-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 响应式布局")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸："),n("code",[e._v("xs")]),e._v("、"),n("code",[e._v("sm")]),e._v("、"),n("code",[e._v("md")]),e._v("、"),n("code",[e._v("lg")]),e._v(" 和 "),n("code",[e._v("xl")]),e._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-yu-duan-dian-de-yin-cang-lei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-yu-duan-dian-de-yin-cang-lei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基于断点的隐藏类")])},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(" - 当视口在 "),n("code",[e._v("xs")]),e._v(" 尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-sm-only")]),e._v(" - 当视口在 "),n("code",[e._v("sm")]),e._v(" 尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-sm-and-down")]),e._v(" - 当视口在 "),n("code",[e._v("sm")]),e._v(" 及以下尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-sm-and-up")]),e._v(" - 当视口在 "),n("code",[e._v("sm")]),e._v(" 及以上尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-md-only")]),e._v(" - 当视口在 "),n("code",[e._v("md")]),e._v(" 尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-md-and-down")]),e._v(" - 当视口在 "),n("code",[e._v("md")]),e._v(" 及以下尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-md-and-up")]),e._v(" - 当视口在 "),n("code",[e._v("md")]),e._v(" 及以上尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-lg-only")]),e._v(" - 当视口在 "),n("code",[e._v("lg")]),e._v(" 尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-lg-and-down")]),e._v(" - 当视口在 "),n("code",[e._v("lg")]),e._v(" 及以下尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-lg-and-up")]),e._v(" - 当视口在 "),n("code",[e._v("lg")]),e._v(" 及以上尺寸时隐藏")]),n("li",[n("code",[e._v("hidden-xl-only")]),e._v(" - 当视口在 "),n("code",[e._v("xl")]),e._v(" 尺寸时隐藏")])])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("gutter")]),n("td",[e._v("栅格间隔")]),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("布局模式，可选 flex，现代浏览器下有效")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("justify")]),n("td",[e._v("flex 布局下的水平排列方式")]),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("flex 布局下的垂直排列方式")]),n("td",[e._v("string")]),n("td",[e._v("top/middle/bottom")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("自定义元素标签")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("span")]),n("td",[e._v("栅格占据的列数")]),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("栅格左侧的间隔格数")]),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("栅格向右移动格数")]),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("栅格向左移动格数")]),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(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {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(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {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(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {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(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {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(" 响应式栅格数或者栅格属性对象")]),n("td",[e._v("number/object (例如： {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("自定义元素标签")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])}],!1,null,null,null);t.default=i.exports},591: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},l={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("默认链接")]),e._v(" "),n("el-link",{attrs:{type:"primary"}},[e._v("主要链接")]),e._v(" "),n("el-link",{attrs:{type:"success"}},[e._v("成功链接")]),e._v(" "),n("el-link",{attrs:{type:"warning"}},[e._v("警告链接")]),e._v(" "),n("el-link",{attrs:{type:"danger"}},[e._v("危险链接")]),e._v(" "),n("el-link",{attrs:{type:"info"}},[e._v("信息链接")])],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("默认链接")]),e._v(" "),n("el-link",{attrs:{type:"primary",disabled:""}},[e._v("主要链接")]),e._v(" "),n("el-link",{attrs:{type:"success",disabled:""}},[e._v("成功链接")]),e._v(" "),n("el-link",{attrs:{type:"warning",disabled:""}},[e._v("警告链接")]),e._v(" "),n("el-link",{attrs:{type:"danger",disabled:""}},[e._v("危险链接")]),e._v(" "),n("el-link",{attrs:{type:"info",disabled:""}},[e._v("信息链接")])],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("无下划线")]),this._v(" "),t("el-link",[this._v("有下划线")])],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("编辑")]),this._v(" "),t("el-link",[this._v("查看"),t("i",{staticClass:"el-icon-view el-icon--right"})])],1)])},staticRenderFns:[]},{})}},r=n(0),i=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("文字超链接")]),e._m(1),n("p",[e._v("基础的文字链接用法。")]),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">默认链接</el-link>\n  <el-link type="primary">主要链接</el-link>\n  <el-link type="success">成功链接</el-link>\n  <el-link type="warning">警告链接</el-link>\n  <el-link type="danger">危险链接</el-link>\n  <el-link type="info">信息链接</el-link>\n</div>\n')])])])],2),e._m(2),n("p",[e._v("文字链接不可用状态。")]),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>默认链接</el-link>\n  <el-link type="primary" disabled>主要链接</el-link>\n  <el-link type="success" disabled>成功链接</el-link>\n  <el-link type="warning" disabled>警告链接</el-link>\n  <el-link type="danger" disabled>危险链接</el-link>\n  <el-link type="info" disabled>信息链接</el-link>\n</div>\n')])])])],2),e._m(3),n("p",[e._v("文字链接下划线。")]),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">无下划线</el-link>\n  <el-link>有下划线</el-link>\n</div>\n')])])])],2),e._m(4),n("p",[e._v("带图标的文字链接可增强辨识度。")]),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">编辑</el-link>\n  <el-link>查看<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-wen-zi-lian-jie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#link-wen-zi-lian-jie","aria-hidden":"true"}},[this._v("¶")]),this._v(" Link 文字链接")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xia-hua-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xia-hua-xian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 下划线")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-biao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("类型")]),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("是否下划线")]),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("是否禁用状态")]),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("原生 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("图标类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])}],!1,null,null,null);t.default=i.exports},592: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},l={name:"component-doc",components:{"element-demo0":a({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:"日期",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],loading:!0}}}),"element-demo1":a({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":"拼命加载中","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:"日期",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],loading:!0}}}),"element-demo2":a({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.openFullScreen1}},[this._v("\n    指令方式\n  ")]),this._v(" "),t("el-button",{attrs:{type:"primary"},on:{click:this.openFullScreen2}},[this._v("\n    服务方式\n  ")])]],2)},staticRenderFns:[]},{data:function(){return{fullscreenLoading:!1}},methods:{openFullScreen1:function(){var e=this;this.fullscreenLoading=!0,setTimeout(function(){e.fullscreenLoading=!1},2e3)},openFullScreen2: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)}}})}},r=n(0),i=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("加载数据时显示动效。")]),e._m(1),n("p",[e._v("在表格等容器中加载数据时显示。")]),n("demo-block",[n("div",[n("p",[e._v("Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令"),n("code",[e._v("v-loading")]),e._v("，只需要绑定"),n("code",[e._v("Boolean")]),e._v("即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加"),n("code",[e._v("body")]),e._v("修饰符，可以使遮罩插入至 DOM 中的 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-table\n    v-loading="loading"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="日期"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="地址">\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-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }],\n        loading: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("可自定义加载文案、图标和背景色。")]),n("demo-block",[n("div",[n("p",[e._v("在绑定了"),n("code",[e._v("v-loading")]),e._v("指令的元素上添加"),n("code",[e._v("element-loading-text")]),e._v("属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，"),n("code",[e._v("element-loading-spinner")]),e._v("和"),n("code",[e._v("element-loading-background")]),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-table\n    v-loading="loading"\n    element-loading-text="拼命加载中"\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="日期"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="地址">\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: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }],\n        loading: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("页面数据加载时显示。")]),n("demo-block",[n("div",[n("p",[e._v("当使用指令方式时，全屏遮罩需要添加"),n("code",[e._v("fullscreen")]),e._v("修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用"),n("code",[e._v("lock")]),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    type="primary"\n    @click="openFullScreen1"\n    v-loading.fullscreen.lock="fullscreenLoading">\n    指令方式\n  </el-button>\n  <el-button\n    type="primary"\n    @click="openFullScreen2">\n    服务方式\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen1() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\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("Loading 还可以以服务的方式调用。引入 Loading 服务：")]),e._m(5),n("p",[e._v("在需要调用时：")]),e._m(6),e._m(7),e._m(8),n("p",[e._v("需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：")]),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-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading 加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qu-yu-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qu-yu-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 区域加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zheng-ye-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zheng-ye-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 整页加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-wu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-wu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 服务")])},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("其中 "),t("code",[this._v("options")]),this._v(" 参数为 Loading 的配置项，具体见下表。"),t("code",[this._v("LoadingService")]),this._v(" 会返回一个 Loading 实例，可通过调用该实例的 "),t("code",[this._v("close")]),this._v(" 方法来关闭它：")])},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 需要异步关闭\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("此时调用它们中任意一个的 "),t("code",[this._v("close")]),this._v(" 方法都能关闭这个全屏 Loading。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 "),t("code",[this._v("$loading")]),this._v("，它的调用方式为："),t("code",[this._v("this.$loading(options)")]),this._v("，同样会返回一个 Loading 实例。")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("target")]),n("td",[e._v("Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 "),n("code",[e._v("document.querySelector")]),e._v("以获取到对应 DOM 节点")]),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("同 "),n("code",[e._v("v-loading")]),e._v(" 指令中的 "),n("code",[e._v("body")]),e._v(" 修饰符")]),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("同 "),n("code",[e._v("v-loading")]),e._v(" 指令中的 "),n("code",[e._v("fullscreen")]),e._v(" 修饰符")]),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("同 "),n("code",[e._v("v-loading")]),e._v(" 指令中的 "),n("code",[e._v("lock")]),e._v(" 修饰符")]),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("显示在加载图标下方的加载文案")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("spinner")]),n("td",[e._v("自定义加载图标类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("遮罩背景色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Loading 的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},593: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},l={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("处理中心")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("我的工作台")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("选项2")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("选项3")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("选项2")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("选项3")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("消息中心")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("订单管理")])])],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("处理中心")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("我的工作台")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("选项2")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("选项3")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("选项2")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("选项3")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("消息中心")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("订单管理")])])],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("默认颜色")]),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("导航一")])]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("选项1")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航二")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航三")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航四")])])],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("h5",[e._v("自定义颜色")]),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("导航一")])]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("分组一")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("选项1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("选项2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("选项3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("选项4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("选项1")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航二")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航三")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航四")])])],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("展开")]),t._v(" "),n("el-radio-button",{attrs:{label:!0}},[t._v("收起")])],1),t._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"1-4-1",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("导航一")])]),t._v(" "),n("el-menu-item-group",[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("分组一")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[t._v("选项1")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[t._v("选项2")])],1),t._v(" "),n("el-menu-item-group",{attrs:{title:"分组2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[t._v("选项3")])],1),t._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("选项4")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("选项1")])],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("导航二")])]),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("导航三")])]),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("导航四")])])],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)}}})}},r=n(0),i=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("为网站提供导航功能的菜单。")]),e._m(1),n("p",[e._v("适用广泛的基础用法。")]),n("demo-block",[n("div",[n("p",[e._v("导航菜单默认为垂直模式，通过"),n("code",[e._v("mode")]),e._v("属性可以使导航菜单变更为水平模式。另外，在菜单中通过"),n("code",[e._v("submenu")]),e._v("组件可以生成二级菜单。Menu 还提供了"),n("code",[e._v("background-color")]),e._v("、"),n("code",[e._v("text-color")]),e._v("和"),n("code",[e._v("active-text-color")]),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-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n  <el-menu-item index="1">处理中心</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">我的工作台</template>\n    <el-menu-item index="2-1">选项1</el-menu-item>\n    <el-menu-item index="2-2">选项2</el-menu-item>\n    <el-menu-item index="2-3">选项3</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">选项4</template>\n      <el-menu-item index="2-4-1">选项1</el-menu-item>\n      <el-menu-item index="2-4-2">选项2</el-menu-item>\n      <el-menu-item index="2-4-3">选项3</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>消息中心</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</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">处理中心</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">我的工作台</template>\n    <el-menu-item index="2-1">选项1</el-menu-item>\n    <el-menu-item index="2-2">选项2</el-menu-item>\n    <el-menu-item index="2-3">选项3</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">选项4</template>\n      <el-menu-item index="2-4-1">选项1</el-menu-item>\n      <el-menu-item index="2-4-2">选项2</el-menu-item>\n      <el-menu-item index="2-4-3">选项3</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>消息中心</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</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("垂直菜单，可内嵌子菜单。")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("el-menu-item-group")]),e._v("组件可以实现菜单进行分组，分组名可以通过"),n("code",[e._v("title")]),e._v("属性直接设定，也可以通过具名 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>默认颜色</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>导航一</span>\n        </template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span slot="title">导航二</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span slot="title">导航三</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span slot="title">导航四</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="12">\n    <h5>自定义颜色</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>导航一</span>\n        </template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span slot="title">导航二</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span slot="title">导航三</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span slot="title">导航四</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("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">展开</el-radio-button>\n  <el-radio-button :label="true">收起</el-radio-button>\n</el-radio-group>\n<el-menu default-active="1-4-1" 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">导航一</span>\n    </template>\n    <el-menu-item-group>\n      <span slot="title">分组一</span>\n      <el-menu-item index="1-1">选项1</el-menu-item>\n      <el-menu-item index="1-2">选项2</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title="分组2">\n      <el-menu-item index="1-3">选项3</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index="1-4">\n      <span slot="title">选项4</span>\n      <el-menu-item index="1-4-1">选项1</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">导航二</span>\n  </el-menu-item>\n  <el-menu-item index="3" disabled>\n    <i class="el-icon-document"></i>\n    <span slot="title">导航三</span>\n  </el-menu-item>\n  <el-menu-item index="4">\n    <i class="el-icon-setting"></i>\n    <span slot="title">导航四</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)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"navmenu-dao-hang-cai-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu-dao-hang-cai-dan","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu 导航菜单")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ding-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-lan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 顶栏")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ce-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ce-lan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 侧栏")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhe-die"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhe-die","aria-hidden":"true"}},[this._v("¶")]),this._v(" 折叠")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("mode")]),n("td",[e._v("模式")]),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("是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）")]),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("菜单的背景色（仅支持 hex 格式）")]),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("菜单的文字颜色（仅支持 hex 格式）")]),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("当前激活菜单的文字颜色（仅支持 hex 格式）")]),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")]),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("当前打开的 sub-menu 的 index 的数组")]),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("是否只保持一个子菜单的展开")]),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("子菜单打开的触发方式(只在 mode 为 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("是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转")]),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("是否开启折叠动画")]),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("方法名称")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("展开指定的 sub-menu")]),n("td",[e._v("index: 需要打开的 sub-menu 的 index")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("收起指定的 sub-menu")]),n("td",[e._v("index: 需要收起的 sub-menu 的 index")])])])])},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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("菜单激活回调")]),n("td",[e._v("index: 选中菜单项的 index, indexPath: 选中菜单项的 index path")])]),n("tr",[n("td",[e._v("open")]),n("td",[e._v("sub-menu 展开的回调")]),n("td",[e._v("index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("sub-menu 收起的回调")]),n("td",[e._v("index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path")])])])])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("唯一标志")]),n("td",[e._v("string/null")]),n("td",[e._v("—")]),n("td",[e._v("null")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("弹出菜单的自定义类名")]),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("展开 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("收起 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("是否禁用")]),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("是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("一级子菜单：true / 非一级子菜单：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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("唯一标志")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("route")]),n("td",[e._v("Vue Router 路径对象")]),n("td",[e._v("Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("分组标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},594: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},l={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("点击打开 Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var t=this;this.$alert("这是一段内容","标题名称",{confirmButtonText:"确定",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("点击打开 Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var e=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(function(){e.$message({type:"success",message:"删除成功!"})}).catch(function(){e.$message({type:"info",message:"已取消删除"})})}}}),"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("点击打开 Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var n=this;this.$prompt("请输入邮箱","提示",{confirmButtonText:"确定",cancelButtonText:"取消",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"邮箱格式不正确"}).then(function(e){var t=e.value;n.$message({type:"success",message:"你的邮箱是: "+t})}).catch(function(){n.$message({type:"info",message:"取消输入"})})}}}),"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("点击打开 Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var t=this,e=this.$createElement;this.$msgbox({title:"消息",message:e("p",null,[e("span",null,"内容可以是 "),e("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"确定",cancelButtonText:"取消",beforeClose:function(e,t,n){"confirm"===e?(t.confirmButtonLoading=!0,t.confirmButtonText="执行中...",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("点击打开 Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$alert("<strong>这是 <i>HTML</i> 片段</strong>","HTML 片段",{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("点击打开 Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var t=this;this.$confirm("检测到未保存的内容，是否在离开页面前保存修改？","确认信息",{distinguishCancelAndClose:!0,confirmButtonText:"保存",cancelButtonText:"放弃修改"}).then(function(){t.$message({type:"info",message:"保存修改"})}).catch(function(e){t.$message({type:"info",message:"cancel"===e?"放弃保存并离开页面":"停留在当前页面"})})}}}),"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("点击打开 Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var e=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning",center:!0}).then(function(){e.$message({type:"success",message:"删除成功!"})}).catch(function(){e.$message({type:"info",message:"已取消删除"})})}}})}},r=n(0),i=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("模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。")]),e._m(1),e._m(2),n("p",[e._v("当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。")]),n("demo-block",[n("div",[n("p",[e._v("调用"),n("code",[e._v("$alert")]),e._v("方法即可打开消息提示，它模拟了系统的 "),n("code",[e._v("alert")]),e._v("，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，"),n("code",[e._v("message")]),e._v("和"),n("code",[e._v("title")]),e._v("。值得一提的是，窗口被关闭后，它默认会返回一个"),n("code",[e._v("Promise")]),e._v("对象便于进行后续操作的处理。若不确定浏览器是否支持"),n("code",[e._v("Promise")]),e._v("，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。")])]),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\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('这是一段内容', '标题名称', {\n          confirmButtonText: '确定',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。")]),n("demo-block",[n("div",[n("p",[e._v("调用"),n("code",[e._v("$confirm")]),e._v("方法即可打开消息提示，它模拟了系统的 "),n("code",[e._v("confirm")]),e._v("。Message Box 组件也拥有极高的定制性，我们可以传入"),n("code",[e._v("options")]),e._v("作为第三个参数，它是一个字面量对象。"),n("code",[e._v("type")]),e._v("字段表明消息类型，可以为"),n("code",[e._v("success")]),e._v("，"),n("code",[e._v("error")]),e._v("，"),n("code",[e._v("info")]),e._v("和"),n("code",[e._v("warning")]),e._v("，无效的设置将会被忽略。注意，第二个参数"),n("code",[e._v("title")]),e._v("必须定义为"),n("code",[e._v("String")]),e._v("类型，如果是"),n("code",[e._v("Object")]),e._v("，会被理解为"),n("code",[e._v("options")]),e._v("。在这里我们用了 Promise 来处理后续响应。")])]),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\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: '删除成功!'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '已取消删除'\n          });          \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。")]),n("demo-block",[n("div",[n("p",[e._v("调用"),n("code",[e._v("$prompt")]),e._v("方法即可打开消息提示，它模拟了系统的 "),n("code",[e._v("prompt")]),e._v("。可以用"),n("code",[e._v("inputPattern")]),e._v("字段自己规定匹配模式，或者用"),n("code",[e._v("inputValidator")]),e._v("规定校验函数，可以返回"),n("code",[e._v("Boolean")]),e._v("或"),n("code",[e._v("String")]),e._v("，返回"),n("code",[e._v("false")]),e._v("或字符串时均表示校验未通过，同时返回的字符串相当于定义了"),n("code",[e._v("inputErrorMessage")]),e._v("字段。此外，可以用"),n("code",[e._v("inputPlaceholder")]),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 type=\"text\" @click=\"open\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$prompt('请输入邮箱', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: '邮箱格式不正确'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: '你的邮箱是: ' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '取消输入'\n          });       \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("可自定义配置不同内容。")]),n("demo-block",[n("div",[n("p",[e._v("以上三个方法都是对"),n("code",[e._v("$msgbox")]),e._v("方法的再包装。本例直接调用"),n("code",[e._v("$msgbox")]),e._v("方法，使用了"),n("code",[e._v("showCancelButton")]),e._v("字段，用于显示取消按钮。另外可使用"),n("code",[e._v("cancelButtonClass")]),e._v("为其添加自定义样式，使用"),n("code",[e._v("cancelButtonText")]),e._v("来自定义按钮文本（Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表）。此例还使用了"),n("code",[e._v("beforeClose")]),e._v("属性，它的值是一个方法，会在 MessageBox 的实例关闭前被调用，同时暂停实例的关闭。它有三个参数："),n("code",[e._v("action")]),e._v("、实例本身和"),n("code",[e._v("done")]),e._v("方法。使用它能够在关闭前对实例进行一些操作，比如为确定按钮添加"),n("code",[e._v("loading")]),e._v("状态等；此时若需要关闭实例，可以调用"),n("code",[e._v("done")]),e._v("方法（若在"),n("code",[e._v("beforeClose")]),e._v("中没有调用"),n("code",[e._v("done")]),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-button type=\"text\" @click=\"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: '消息',\n          message: h('p', null, [\n            h('span', null, '内容可以是 '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = '执行中...';\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("将"),n("code",[e._v("dangerouslyUseHTMLString")]),e._v("属性设置为 true，"),n("code",[e._v("message")]),e._v(" 就会被当作 HTML 片段处理。")])]),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\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),n("p",[e._v("有些场景下，点击取消按钮与点击关闭按钮有着不同的含义。")]),n("demo-block",[n("div",[n("p",[e._v("默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和"),n("code",[e._v("callback")]),e._v("回调的参数均为 'cancel'。如果将"),n("code",[e._v("distinguishCancelAndClose")]),e._v("属性设置为 true，则上述两种行为的参数分别为 'cancel' 和 'close'。")])]),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\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: '保存',\n          cancelButtonText: '放弃修改'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: '保存修改'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? '放弃保存并离开页面'\n                : '停留在当前页面'\n            })\n          });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),n("p",[e._v("内容支持居中布局")]),n("demo-block",[n("div",[n("p",[e._v("将 "),n("code",[e._v("center")]),e._v(" 设置为 "),n("code",[e._v("true")]),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("<template>\n  <el-button type=\"text\" @click=\"open\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: '删除成功!'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '已取消删除'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),n("p",[e._v("那么对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，调用参数与全局方法相同。")]),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"messagebox-dan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox-dan-kuang","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("从场景上说，MessageBox 的作用是美化系统自带的 "),t("code",[this._v("alert")]),this._v("、"),t("code",[this._v("confirm")]),this._v(" 和 "),t("code",[this._v("prompt")]),this._v("，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xiao-xi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xi-ti-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 消息提示")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"que-ren-xiao-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#que-ren-xiao-xi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 确认消息")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ti-jiao-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ti-jiao-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 提交内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("弹出层的内容可以是 "),n("code",[e._v("VNode")]),e._v("，所以我们能把一些自定义组件传入其中。每次弹出层打开后，Vue 会对新老 "),n("code",[e._v("VNode")]),e._v(" 节点进行比对，然后将根据比较结果进行最小单位地修改视图。这也许会造成弹出层内容区域的组件没有重新渲染，例如 "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[e._v("#8931")]),e._v("。当这类问题出现时，解决方案是给 "),n("code",[e._v("VNode")]),e._v(" 加上一个不相同的 key，参考"),n("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef/"}},[e._v("这里")]),e._v("。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用 HTML 片段")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" 属性支持传入 HTML 片段。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[n("code",[e._v("message")]),e._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS 攻击")]),e._v("。因此在 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 打开的情况下，请确保 "),n("code",[e._v("message")]),e._v(" 的内容是可信的，"),n("strong",[e._v("永远不要")]),e._v("将用户提交的内容赋值给 "),n("code",[e._v("message")]),e._v(" 属性。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qu-fen-qu-xiao-yu-guan-bi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qu-fen-qu-xiao-yu-guan-bi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 区分取消与关闭")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ju-zhong-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-bu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 居中布局")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 全局方法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 "),t("code",[this._v("MessageBox")]),this._v("。调用参数为：")])},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(" 或 "),n("code",[e._v("$alert(message, options)")])]),n("li",[n("code",[e._v("$confirm(message, title, options)")]),e._v(" 或 "),n("code",[e._v("$confirm(message, options)")])]),n("li",[n("code",[e._v("$prompt(message, title, options)")]),e._v(" 或 "),n("code",[e._v("$prompt(message, options)")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单独引用")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("如果单独引入 "),t("code",[this._v("MessageBox")]),this._v("：")])},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.$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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("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("MessageBox 消息正文内容")]),n("td",[e._v("string / VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("是否将 message 属性作为 HTML 片段处理")]),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("消息类型，用于显示图标")]),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("自定义图标的类名，会覆盖 "),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("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("若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调")]),n("td",[e._v("function(action, instance)，action 的值为'confirm', 'cancel'或'close', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("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("MessageBox 关闭前的回调，会暂停实例的关闭")]),n("td",[e._v("function(action, instance, done)，action 的值为'confirm', 'cancel'或'close'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("distinguishCancelAndClose")]),n("td",[e._v("是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 ESC 键）进行区分")]),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("是否在 MessageBox 出现时将 body 滚动锁定")]),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("是否显示取消按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false（以 confirm 和 prompt 方式调用时为 true）")])]),n("tr",[n("td",[e._v("showConfirmButton")]),n("td",[e._v("是否显示确定按钮")]),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("取消按钮的文本内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("取消")])]),n("tr",[n("td",[e._v("confirmButtonText")]),n("td",[e._v("确定按钮的文本内容")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("确定")])]),n("tr",[n("td",[e._v("cancelButtonClass")]),n("td",[e._v("取消按钮的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("confirmButtonClass")]),n("td",[e._v("确定按钮的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closeOnClickModal")]),n("td",[e._v("是否可通过点击遮罩关闭 MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true（以 alert 方式调用时为 false）")])]),n("tr",[n("td",[e._v("closeOnPressEscape")]),n("td",[e._v("是否可通过按下 ESC 键关闭 MessageBox")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true（以 alert 方式调用时为 false）")])]),n("tr",[n("td",[e._v("closeOnHashChange")]),n("td",[e._v("是否在 hashchange 时关闭 MessageBox")]),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("是否显示输入框")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false（以 prompt 方式调用时为 true）")])]),n("tr",[n("td",[e._v("inputPlaceholder")]),n("td",[e._v("输入框的占位符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputType")]),n("td",[e._v("输入框的类型")]),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("输入框的初始文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputPattern")]),n("td",[e._v("输入框的校验表达式")]),n("td",[e._v("regexp")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputValidator")]),n("td",[e._v("输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 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("校验未通过时的提示文本")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("输入的数据不合法!")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("是否居中布局")]),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("是否使用圆角按钮")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);t.default=i.exports},595: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},l={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("打开消息提示")]),this._v(" "),t("el-button",{attrs:{plain:!0},on:{click:this.openVn}},[this._v("VNode")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$message("这是一条消息提示")},openVn:function(){var e=this.$createElement;this.$message({message:e("p",null,[e("span",null,"内容可以是 "),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("成功")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("警告")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open1}},[e._v("消息")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("错误")])]],2)},staticRenderFns:[]},{methods:{open1:function(){this.$message("这是一条消息提示")},open2:function(){this.$message({message:"恭喜你，这是一条成功消息",type:"success"})},open3:function(){this.$message({message:"警告哦，这是一条警告消息",type:"warning"})},open4:function(){this.$message.error("错了哦，这是一条错误消息")}}}),"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("消息")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("成功")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("警告")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("错误")])]],2)},staticRenderFns:[]},{methods:{open1:function(){this.$message({showClose:!0,message:"这是一条消息提示"})},open2:function(){this.$message({showClose:!0,message:"恭喜你，这是一条成功消息",type:"success"})},open3:function(){this.$message({showClose:!0,message:"警告哦，这是一条警告消息",type:"warning"})},open4:function(){this.$message({showClose:!0,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("文字居中")])]],2)},staticRenderFns:[]},{methods:{openCenter:function(){this.$message({message:"居中的文字",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("使用 HTML 片段")])]],2)},staticRenderFns:[]},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>这是 <i>HTML</i> 片段</strong>"})}}})}},r=n(0),i=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("常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。")]),e._m(1),n("p",[e._v("从顶部出现，3 秒后自动消失。")]),n("demo-block",[n("div",[n("p",[e._v("Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个"),n("code",[e._v("$message")]),e._v("方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。")])]),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\">打开消息提示</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('这是一条消息提示');\n      },\n\n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, '内容可以是 '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("用来显示「成功、警告、消息、错误」类的操作反馈。")]),n("demo-block",[n("div",[n("p",[e._v("当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置"),n("code",[e._v("type")]),e._v("字段可以定义不同的状态，默认为"),n("code",[e._v("info")]),e._v("。此时正文内容以"),n("code",[e._v("message")]),e._v("的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入"),n("code",[e._v("type")]),e._v("字段的情况下像"),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">成功</el-button>\n  <el-button :plain="true" @click="open3">警告</el-button>\n  <el-button :plain="true" @click="open1">消息</el-button>\n  <el-button :plain="true" @click="open4">错误</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$message(\'这是一条消息提示\');\n      },\n      open2() {\n        this.$message({\n          message: \'恭喜你，这是一条成功消息\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: \'警告哦，这是一条警告消息\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\n        this.$message.error(\'错了哦，这是一条错误消息\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("可以添加关闭按钮。")]),n("demo-block",[n("div",[n("p",[e._v("默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用"),n("code",[e._v("showClose")]),e._v("字段。此外，和 Notification 一样，Message 拥有可控的"),n("code",[e._v("duration")]),e._v("，设置"),n("code",[e._v("0")]),e._v("为不会被自动关闭，默认为 3000 毫秒。")])]),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">消息</el-button>\n  <el-button :plain="true" @click="open2">成功</el-button>\n  <el-button :plain="true" @click="open3">警告</el-button>\n  <el-button :plain="true" @click="open4">错误</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$message({\n          showClose: true,\n          message: \'这是一条消息提示\'\n        });\n      },\n\n      open2() {\n        this.$message({\n          showClose: true,\n          message: \'恭喜你，这是一条成功消息\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          showClose: true,\n          message: \'警告哦，这是一条警告消息\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\n        this.$message({\n          showClose: true,\n          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">文字居中</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: \'居中的文字\',\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("将"),n("code",[e._v("dangerouslyUseHTMLString")]),e._v("属性设置为 true，"),n("code",[e._v("message")]),e._v(" 就会被当作 HTML 片段处理。")])]),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">使用 HTML 片段</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: \'<strong>这是 <i>HTML</i> 片段</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-xiao-xi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message-xiao-xi-ti-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message 消息提示")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-guan-bi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-guan-bi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可关闭")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-zi-ju-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-ju-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字居中")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("使用 "),t("code",[this._v("center")]),this._v(" 属性让文字水平居中。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用 HTML 片段")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" 属性支持传入 HTML 片段")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[n("code",[e._v("message")]),e._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS 攻击")]),e._v("。因此在 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 打开的情况下，请确保 "),n("code",[e._v("message")]),e._v(" 的内容是可信的，"),n("strong",[e._v("永远不要")]),e._v("将用户提交的内容赋值给 "),n("code",[e._v("message")]),e._v(" 属性。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 全局方法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 "),t("code",[this._v("Message")]),this._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单独引用")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("单独引入 "),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("此时调用方法为 "),t("code",[this._v("Message(options)")]),this._v("。我们也为每个 type 定义了各自的方法，如 "),t("code",[this._v("Message.success(options)")]),this._v("。并且可以调用 "),t("code",[this._v("Message.closeAll()")]),this._v(" 手动关闭所有实例。")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("message")]),n("td",[e._v("消息文字")]),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("主题")]),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("自定义图标的类名，会覆盖 "),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("是否将 message 属性作为 HTML 片段处理")]),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("自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),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("是否显示关闭按钮")]),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("文字是否居中")]),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("关闭时的回调函数, 参数为被关闭的 message 实例")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Message 距离窗口顶部的偏移量")]),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:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 方法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("调用 "),t("code",[this._v("Message")]),this._v(" 或 "),t("code",[this._v("this.$message")]),this._v(" 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 "),t("code",[this._v("close")]),this._v(" 方法。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("关闭当前的 Message")])])])])}],!1,null,null,null);t.default=i.exports},596: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},l={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    可自动关闭\n  ")]),this._v(" "),t("el-button",{attrs:{plain:""},on:{click:this.open2}},[this._v("\n    不会自动关闭\n    ")])]],2)},staticRenderFns:[]},{methods:{open1:function(){var e=this.$createElement;this.$notify({title:"标题名称",message:e("i",{style:"color: teal"},"这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案")})},open2:function(){this.$notify({title:"提示",message:"这是一条不会自动关闭的消息",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    成功\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n    警告\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    消息\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    错误\n  ")])]],2)},staticRenderFns:[]},{methods:{open1:function(){this.$notify({title:"成功",message:"这是一条成功的提示消息",type:"success"})},open2:function(){this.$notify({title:"警告",message:"这是一条警告的提示消息",type:"warning"})},open3:function(){this.$notify.info({title:"消息",message:"这是一条消息的提示消息"})},open4:function(){this.$notify.error({title:"错误",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    右上角\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n    右下角\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    左下角\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    左上角\n  ")])]],2)},staticRenderFns:[]},{methods:{open1:function(){this.$notify({title:"自定义位置",message:"右上角弹出的消息"})},open2:function(){this.$notify({title:"自定义位置",message:"右下角弹出的消息",position:"bottom-right"})},open3:function(){this.$notify({title:"自定义位置",message:"左下角弹出的消息",position:"bottom-left"})},open4:function(){this.$notify({title:"自定义位置",message:"左上角弹出的消息",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    偏移的消息\n  ")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$notify({title:"偏移",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    使用 HTML 片段\n  ")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$notify({title:"HTML 片段",dangerouslyUseHTMLString:!0,message:"<strong>这是 <i>HTML</i> 片段</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    隐藏关闭按钮\n  ")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$notify.success({title:"Info",message:"这是一条没有关闭按钮的消息",showClose:!1})}}})}},r=n(0),i=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("悬浮出现在页面角落，显示全局的通知提醒消息。")]),e._m(1),n("p",[e._v("适用性广泛的通知栏")]),n("demo-block",[n("div",[n("p",[e._v("Notification 组件提供通知功能，Element 注册了"),n("code",[e._v("$notify")]),e._v("方法，接收一个"),n("code",[e._v("options")]),e._v("字面量参数，在最简单的情况下，你可以设置"),n("code",[e._v("title")]),e._v("字段和"),n("code",[e._v("message")]),e._v("字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置"),n("code",[e._v("duration")]),e._v("，可以控制关闭的时间间隔，特别的是，如果设置为"),n("code",[e._v("0")]),e._v("，则不会自动关闭。注意："),n("code",[e._v("duration")]),e._v("接收一个"),n("code",[e._v("Number")]),e._v("，单位为毫秒，默认为"),n("code",[e._v("4500")]),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-button\n    plain\n    @click=\"open1\">\n    可自动关闭\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    不会自动关闭\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: '标题名称',\n          message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: '提示',\n          message: '这是一条不会自动关闭的消息',\n          duration: 0\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息")]),n("demo-block",[n("div",[n("p",[e._v("Element 为 Notification 组件准备了四种通知类型："),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("warning")]),e._v(", "),n("code",[e._v("info")]),e._v(", "),n("code",[e._v("error")]),e._v("。通过"),n("code",[e._v("type")]),e._v("字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入"),n("code",[e._v("type")]),e._v("字段的情况下像"),n("code",[e._v("open3")]),e._v("和"),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\n    plain\n    @click=\"open1\">\n    成功\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    警告\n  </el-button>\n  <el-button\n    plain\n    @click=\"open3\">\n    消息\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    错误\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$notify({\n          title: '成功',\n          message: '这是一条成功的提示消息',\n          type: 'success'\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: '警告',\n          message: '这是一条警告的提示消息',\n          type: 'warning'\n        });\n      },\n\n      open3() {\n        this.$notify.info({\n          title: '消息',\n          message: '这是一条消息的提示消息'\n        });\n      },\n\n      open4() {\n        this.$notify.error({\n          title: '错误',\n          message: '这是一条错误的提示消息'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("可以让 Notification 从屏幕四角中的任意一角弹出")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("position")]),e._v("属性定义 Notification 的弹出位置，支持四个选项："),n("code",[e._v("top-right")]),e._v("、"),n("code",[e._v("top-left")]),e._v("、"),n("code",[e._v("bottom-right")]),e._v("、"),n("code",[e._v("bottom-left")]),e._v("，默认为"),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    右上角\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    右下角\n  </el-button>\n  <el-button\n    plain\n    @click=\"open3\">\n    左下角\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    左上角\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$notify({\n          title: '自定义位置',\n          message: '右上角弹出的消息'\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: '自定义位置',\n          message: '右下角弹出的消息',\n          position: 'bottom-right'\n        });\n      },\n\n      open3() {\n        this.$notify({\n          title: '自定义位置',\n          message: '左下角弹出的消息',\n          position: 'bottom-left'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: '自定义位置',\n          message: '左上角弹出的消息',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("让 Notification 偏移一些位置")]),n("demo-block",[n("div",[n("p",[e._v("Notification 提供设置偏移量的功能，通过设置 "),n("code",[e._v("offset")]),e._v(" 字段，可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。")])]),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    偏移的消息\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify({\n          title: '偏移',\n          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("将"),n("code",[e._v("dangerouslyUseHTMLString")]),e._v("属性设置为 true，"),n("code",[e._v("message")]),e._v(" 就会被当作 HTML 片段处理。")])]),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    使用 HTML 片段\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify({\n          title: 'HTML 片段',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>这是 <i>HTML</i> 片段</strong>'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),e._m(8),n("p",[e._v("可以不显示关闭按钮")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("showClose")]),e._v("属性设置为"),n("code",[e._v("false")]),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-button\n    plain\n    @click=\"open\">\n    隐藏关闭按钮\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify.success({\n          title: 'Info',\n          message: '这是一条没有关闭按钮的消息',\n          showClose: false\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),n("p",[e._v("单独引入 Notification：")]),e._m(12),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:"notification-tong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification-tong-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification 通知")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-qing-xiang-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-qing-xiang-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有倾向性")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-dan-chu-wei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-dan-chu-wei-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义弹出位置")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-pian-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-pian-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有偏移")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shi-yong-html-pian-duan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-html-pian-duan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 使用 HTML 片段")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" 属性支持传入 HTML 片段")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[n("code",[e._v("message")]),e._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("XSS 攻击")]),e._v("。因此在 "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" 打开的情况下，请确保 "),n("code",[e._v("message")]),e._v(" 的内容是可信的，"),n("strong",[e._v("永远不要")]),e._v("将用户提交的内容赋值给 "),n("code",[e._v("message")]),e._v(" 属性。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yin-cang-guan-bi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yin-cang-guan-bi-an-niu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 隐藏关闭按钮")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 全局方法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Element 为 "),t("code",[this._v("Vue.prototype")]),this._v(" 添加了全局方法 "),t("code",[this._v("$notify")]),this._v("。因此在 vue instance 中可以采用本页面中的方式调用 Notification。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-du-yin-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[this._v("¶")]),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("此时调用方法为 "),t("code",[this._v("Notification(options)")]),this._v("。我们也为每个 type 定义了各自的方法，如 "),t("code",[this._v("Notification.success(options)")]),this._v("。并且可以调用 "),t("code",[this._v("Notification.closeAll()")]),this._v(" 手动关闭所有实例。")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("说明文字")]),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("是否将 message 属性作为 HTML 片段处理")]),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("主题样式，如果不在可选值内将被忽略")]),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("自定义图标的类名。若设置了 "),n("code",[e._v("type")]),e._v("，则 "),n("code",[e._v("iconClass")]),e._v(" 会被覆盖")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("显示时间, 毫秒。设为 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("自定义弹出位置")]),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("是否显示关闭按钮")]),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("关闭时的回调函数")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("点击 Notification 时的回调函数")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量")]),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:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 方法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("调用 "),t("code",[this._v("Notification")]),this._v(" 或 "),t("code",[this._v("this.$notify")]),this._v(" 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 "),t("code",[this._v("close")]),this._v(" 方法。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("关闭当前的 Notification")])])])])}],!1,null,null,null);t.default=i.exports},597: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:"详情页面"},on:{back:this.goBack}})],1)},staticRenderFns:[]},{methods:{goBack:function(){console.log("go back")}}})}},l=n(0),r=Object(l.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("如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。")]),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="详情页面">\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-ye-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pageheader-ye-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" PageHeader 页头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("返回")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("内容")]),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.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("back")]),t("td",[this._v("点击左侧区域触发")]),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("事件名称")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("title")]),t("td",[this._v("标题内容")])]),t("tr",[t("td",[this._v("content")]),t("td",[this._v("内容")])])])])}],!1,null,null,null);t.default=r.exports},598: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},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("页数较少时的效果")]),this._v(" "),t("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("大于 7 页时的效果")]),this._v(" "),t("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("显示总数")]),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("调整每页显示条数")]),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("直接前往")]),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("完整功能")]),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}})],1)]],2)},staticRenderFns:[]},{methods:{handleSizeChange:function(e){console.log("每页 "+e+" 条")},handleCurrentChange:function(e){console.log("当前页: "+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}}})}},r=n(0),i=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("当数据量过多时，使用分页分解数据。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("layout")]),e._v("，表示需要显示的内容，用逗号分隔，布局元素会依次显示。"),n("code",[e._v("prev")]),e._v("表示上一页，"),n("code",[e._v("next")]),e._v("为下一页，"),n("code",[e._v("pager")]),e._v("表示页码列表，除此以外还提供了"),n("code",[e._v("jumper")]),e._v("和"),n("code",[e._v("total")]),e._v("，"),n("code",[e._v("size")]),e._v("和特殊的布局符号"),n("code",[e._v("->")]),e._v("，"),n("code",[e._v("->")]),e._v("后的元素会靠右显示，"),n("code",[e._v("jumper")]),e._v("表示跳页元素，"),n("code",[e._v("total")]),e._v("表示总条目数，"),n("code",[e._v("size")]),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="block">\n  <span class="demonstration">页数较少时的效果</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">大于 7 页时的效果</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("默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过"),n("code",[e._v("pager-count")]),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-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("设置"),n("code",[e._v("background")]),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-pagination\n  background\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(4),n("p",[e._v("在空间有限的情况下，可以使用简单的小型分页。")]),n("demo-block",[n("div",[n("p",[e._v("只需要一个"),n("code",[e._v("small")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("，默认为"),n("code",[e._v("false")]),e._v("，设为"),n("code",[e._v("true")]),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-pagination\n  small\n  layout="prev, pager, next"\n  :total="50">\n</el-pagination>\n')])])])],2),e._m(5),n("p",[e._v("根据场景需要，可以添加其他功能模块。")]),n("demo-block",[n("div",[n("p",[e._v("此例是一个完整的用例，使用了"),n("code",[e._v("size-change")]),e._v("和"),n("code",[e._v("current-change")]),e._v("事件来处理页码大小和当前页变动时候触发的事件。"),n("code",[e._v("page-sizes")]),e._v("接受一个整型数组，数组元素为展示的选择每页显示个数的选项，"),n("code",[e._v("[100, 200, 300, 400]")]),e._v("表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。")])]),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">显示总数</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">调整每页显示条数</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">直接前往</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">完整功能</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page="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} 条`);\n      },\n      handleCurrentChange(val) {\n        console.log(`当前页: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n<\/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-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination-fen-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pagination 分页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"she-zhi-zui-da-ye-ma-an-niu-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-zui-da-ye-ma-an-niu-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 设置最大页码按钮数")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-bei-jing-se-de-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bei-jing-se-de-fen-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有背景色的分页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xiao-xing-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xing-fen-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 小型分页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-jia-gong-neng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-jia-gong-neng","aria-hidden":"true"}},[this._v("¶")]),this._v(" 附加功能")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dang-zhi-you-yi-ye-shi-yin-cang-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dang-zhi-you-yi-ye-shi-yin-cang-fen-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 当只有一页时隐藏分页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("当只有一页时，通过设置 "),t("code",[this._v("hide-on-single-page")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("small")]),n("td",[e._v("是否使用小型分页样式")]),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("是否为分页按钮添加背景色")]),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("每页显示条目个数，支持 .sync 修饰符")]),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("总条目数")]),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 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性")]),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("页码按钮的数量，当总页数超过该值时会折叠")]),n("td",[e._v("number")]),n("td",[e._v("大于等于 5 且小于等于 21 的奇数")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("current-page")]),n("td",[e._v("当前页数，支持 .sync 修饰符")]),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("组件布局，子组件名用逗号分隔")]),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("每页显示个数选择器的选项设置")]),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("每页显示个数选择器的下拉框类名")]),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("替代图标显示的上一页文字")]),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("替代图标显示的下一页文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),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("只有一页时是否隐藏")]),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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("size-change")]),n("td",[e._v("pageSize 改变时会触发")]),n("td",[e._v("每页条数")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("currentPage 改变时会触发")]),n("td",[e._v("当前页")])]),n("tr",[n("td",[e._v("prev-click")]),n("td",[e._v("用户点击上一页按钮改变当前页后触发")]),n("td",[e._v("当前页")])]),n("tr",[n("td",[e._v("next-click")]),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.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("自定义内容，需要在 "),t("code",[this._v("layout")]),this._v(" 中列出 "),t("code",[this._v("slot")])])])])])}],!1,null,null,null);t.default=i.exports},599: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},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-popconfirm",{attrs:{title:"这是一段内容确定删除吗？"}},[t("el-button",{attrs:{slot:"reference"},slot:"reference"},[this._v("删除")])],1)]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-popconfirm",{attrs:{"confirm-button-text":"好的","cancel-button-text":"不用了",icon:"el-icon-info","icon-color":"red",title:"这是一段内容确定删除吗？"}},[t("el-button",{attrs:{slot:"reference"},slot:"reference"},[this._v("删除")])],1)]],2)},staticRenderFns:[]},{})}},r=n(0),i=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("点击元素，弹出气泡确认框。")]),e._m(1),n("p",[e._v("Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考 Popover 的文档，在此文档中不做详尽解释。")]),n("demo-block",[n("div",[n("p",[e._v("在 Popconfirm 中，只有 "),n("code",[e._v("title")]),e._v(" 属性可用，"),n("code",[e._v("content")]),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-popconfirm\n  title="这是一段内容确定删除吗？"\n>\n  <el-button slot="reference">删除</el-button>\n</el-popconfirm>\n</template>\n')])])])],2),e._m(2),n("p",[e._v("可以在 Popconfirm 中自定义内容。")]),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<el-popconfirm\n  confirm-button-text=\'好的\'\n  cancel-button-text=\'不用了\'\n  icon="el-icon-info"\n  icon-color="red"\n  title="这是一段内容确定删除吗？"\n>\n  <el-button slot="reference">删除</el-button>\n</el-popconfirm>\n</template>\n')])])])],2),e._m(3),e._m(4),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:"popconfirm-qi-pao-que-ren-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popconfirm-qi-pao-que-ren-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popconfirm 气泡确认框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("confirm-button-text")]),n("td",[e._v("确认按钮文字")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cancel-button-text")]),n("td",[e._v("取消按钮文字")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("confirm-button-type")]),n("td",[e._v("确认按钮类型")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("Primary")])]),n("tr",[n("td",[e._v("cancel-button-type")]),n("td",[e._v("取消按钮类型")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("Text")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Icon")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-question")])]),n("tr",[n("td",[e._v("icon-color")]),n("td",[e._v("Icon 颜色")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("#f90")])]),n("tr",[n("td",[e._v("hide-icon")]),n("td",[e._v("是否隐藏 Icon")]),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.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("参数")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("reference")]),t("td",[this._v("触发 Popconfirm 显示的 HTML 元素")])])])])},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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("confirm")]),n("td",[e._v("点击确认按钮时触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cancel")]),n("td",[e._v("点击取消按钮时触发")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},600: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},l={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:"标题",width:"200",trigger:"hover",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("hover 激活")])],1),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"标题",width:"200",trigger:"click",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("click 激活")])],1),t._v(" "),n("el-popover",{ref:"popover",attrs:{placement:"right",title:"标题",width:"200",trigger:"focus",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),t._v(" "),n("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[t._v("focus 激活")]),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"标题",width:"200",trigger:"manual",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("手动激活")])],1)]],2)},staticRenderFns:[]},{data:function(){return{visible:!1}}}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[t("el-table",{attrs:{data:this.gridData}},[t("el-table-column",{attrs:{width:"150",property:"date",label:"日期"}}),this._v(" "),t("el-table-column",{attrs:{width:"100",property:"name",label:"姓名"}}),this._v(" "),t("el-table-column",{attrs:{width:"300",property:"address",label:"地址"}})],1),this._v(" "),t("el-button",{attrs:{slot:"reference"},slot:"reference"},[this._v("click 激活")])],1)],1)},staticRenderFns:[]},{data:function(){return{gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}]}}}),"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("这是一段内容这是一段内容确定删除吗？")]),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("取消")]),t._v(" "),n("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(e){t.visible=!1}}},[t._v("确定")])],1),t._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("删除")])],1)],1)},staticRenderFns:[]},{data:function(){return{visible:!1}}})}},r=n(0),i=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),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[n("code",[e._v("trigger")]),e._v("属性用于设置何时触发 Popover，支持四种触发方式："),n("code",[e._v("hover")]),e._v("，"),n("code",[e._v("click")]),e._v("，"),n("code",[e._v("focus")]),e._v(" 和 "),n("code",[e._v("manual")]),e._v("。对于触发 Popover 的元素，有两种写法：使用 "),n("code",[e._v('slot="reference"')]),e._v(" 的具名插槽，或使用自定义指令"),n("code",[e._v("v-popover")]),e._v("指向 Popover 的索引"),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="标题"\n    width="200"\n    trigger="hover"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n    <el-button slot="reference">hover 激活</el-button>\n  </el-popover>\n\n  <el-popover\n    placement="bottom"\n    title="标题"\n    width="200"\n    trigger="click"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n    <el-button slot="reference">click 激活</el-button>\n  </el-popover>\n\n  <el-popover\n    ref="popover"\n    placement="right"\n    title="标题"\n    width="200"\n    trigger="focus"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n  </el-popover>\n  <el-button v-popover:popover>focus 激活</el-button>\n\n  <el-popover\n    placement="bottom"\n    title="标题"\n    width="200"\n    trigger="manual"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"\n    v-model="visible">\n    <el-button slot="reference" @click="visible = !visible">手动激活</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("可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。")]),n("demo-block",[n("div",[n("p",[e._v("利用分发取代"),n("code",[e._v("content")]),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="日期"></el-table-column>\n    <el-table-column width="100" property="name" label="姓名"></el-table-column>\n    <el-table-column width="300" property="address" label="地址"></el-table-column>\n  </el-table>\n  <el-button slot="reference">click 激活</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("当然，你还可以嵌套操作，这相比 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>这是一段内容这是一段内容确定删除吗？</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible = false">取消</el-button>\n    <el-button type="primary" size="mini" @click="visible = false">确定</el-button>\n  </div>\n  <el-button slot="reference">删除</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-dan-chu-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover-dan-chu-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover 弹出框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Popover 的属性与 Tooltip 很类似，它们都是基于"),t("code",[this._v("Vue-popper")]),this._v("开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qian-tao-xin-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-xin-xi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 嵌套信息")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qian-tao-cao-zuo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-cao-zuo","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("触发方式")]),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("标题")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("显示的内容，也可以通过 "),n("code",[e._v("slot")]),e._v(" 传入 DOM")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("宽度")]),n("td",[e._v("String, Number")]),n("td",[e._v("—")]),n("td",[e._v("最小宽度 150px")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("出现位置")]),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("Popover 是否可用")]),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("状态是否可见")]),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("出现位置的偏移量")]),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("定义渐变动画")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("是否显示 Tooltip 箭头，更多参数可见"),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",[n("a",{attrs:{href:"https://popper.js.org/docs/v2/"}},[e._v("popper.js")]),e._v(" 的参数")]),n("td",[e._v("Object")]),n("td",[e._v("参考 "),n("a",{attrs:{href:"https://popper.js.org/docs/v2/"}},[e._v("popper.js")]),e._v(" 文档")]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("为 popper 添加类名")]),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("触发方式为 hover 时的显示延迟，单位为毫秒")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close-delay")]),n("td",[e._v("触发方式为 hover 时的隐藏延迟，单位为毫秒")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("200")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[e._v("Popover 组件的 "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"}},[e._v("tabindex")])]),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.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("参数")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Popover 内嵌 HTML 文本")])]),t("tr",[t("td",[this._v("reference")]),t("td",[this._v("触发 Popover 显示的 HTML 元素")])])])])},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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("show")]),n("td",[e._v("显示时触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-enter")]),n("td",[e._v("显示动画播放完毕后触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide")]),n("td",[e._v("隐藏时触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-leave")]),n("td",[e._v("隐藏动画播放完毕后触发")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},601: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},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{percentage:50}}),this._v(" "),t("el-progress",{attrs:{percentage:100,format:this.format}}),this._v(" "),t("el-progress",{attrs:{percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{percentage:100,status:"warning"}}),this._v(" "),t("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]},{methods:{format:function(e){return 100===e?"满":e+"%"}}}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{"text-inside":!0,"stroke-width":26,percentage:70}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":24,percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":22,percentage:80,status:"warning"}}),this._v(" "),t("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.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{type:"circle",percentage:0}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:25}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:70,status:"warning"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{type:"dashboard",percentage:this.percentage,color:this.colors}}),this._v(" "),t("div",[t("el-button-group",[t("el-button",{attrs:{icon:"el-icon-minus"},on:{click:this.decrease}}),this._v(" "),t("el-button",{attrs:{icon:"el-icon-plus"},on:{click:this.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)}}})}},r=n(0),i=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("用于展示操作进度，告知用户当前状态和预期。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Progress 组件设置"),n("code",[e._v("percentage")]),e._v("属性即可，表示进度条对应的百分比，"),n("strong",[e._v("必填")]),e._v("，必须在 0-100。通过 "),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 ? \'满\' : `${percentage}%`;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("百分比不占用额外控件，适用于文件上传等场景。")]),n("demo-block",[n("div",[n("p",[e._v("Progress 组件可通过 "),n("code",[e._v("stroke-width")]),e._v(" 属性更改进度条的高度，并可通过 "),n("code",[e._v("text-inside")]),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-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),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('<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(7),n("demo-block",[n("div",[n("p",[e._v("通过 "),n("code",[e._v("type")]),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('\n<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-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress-jin-du-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progress 进度条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xian-xing-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 线形进度条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bai-fen-bi-nei-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bai-fen-bi-nei-xian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 百分比内显")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-yan-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-yan-se","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义颜色")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("可以通过 "),t("code",[this._v("color")]),this._v(" 设置进度条的颜色，"),t("code",[this._v("color")]),this._v(" 可以接受颜色字符串，函数和数组。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"huan-xing-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#huan-xing-jin-du-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 环形进度条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Progress 组件可通过 "),t("code",[this._v("type")]),this._v(" 属性来指定使用环形进度条，在环形进度条中，还可以通过 "),t("code",[this._v("width")]),this._v(" 属性来设置其大小。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yi-biao-pan-xing-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yi-biao-pan-xing-jin-du-tiao","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[n("strong",[e._v("percentage")])]),n("td",[n("strong",[e._v("百分比（必填）")])]),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("进度条类型")]),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("进度条的宽度，单位 px")]),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("进度条显示文字内置在进度条内（只在 type=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("进度条当前状态")]),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("进度条背景色（会覆盖 status 状态颜色）")]),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("环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）")]),n("td",[e._v("number")]),n("td"),n("td",[e._v("126")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("是否显示进度条文字内容")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("stroke-linecap")]),n("td",[e._v("circle/dashboard 类型路径两端的形状")]),n("td",[e._v("string")]),n("td",[e._v("butt/round/square")]),n("td",[e._v("round")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("指定进度条文字内容")]),n("td",[e._v("function(percentage)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},602: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},l={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("备选项")]),t._v(" "),n("el-radio",{attrs:{label:"2"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("备选项")])]],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:"禁用"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("备选项")]),t._v(" "),n("el-radio",{attrs:{disabled:"",label:"选中且禁用"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("备选项")])]],2)},staticRenderFns:[]},{data:function(){return{radio:"选中且禁用"}}}),"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("备选项")]),t._v(" "),n("el-radio",{attrs:{label:6}},[t._v("备选项")]),t._v(" "),n("el-radio",{attrs:{label:9}},[t._v("备选项")])],1)]],2)},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:"上海"}}),t._v(" "),n("el-radio-button",{attrs:{label:"北京"}}),t._v(" "),n("el-radio-button",{attrs:{label:"广州"}}),t._v(" "),n("el-radio-button",{attrs:{label:"深圳"}})],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:"上海"}}),t._v(" "),n("el-radio-button",{attrs:{label:"北京"}}),t._v(" "),n("el-radio-button",{attrs:{label:"广州"}}),t._v(" "),n("el-radio-button",{attrs:{label:"深圳"}})],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:"上海"}}),t._v(" "),n("el-radio-button",{attrs:{label:"北京",disabled:""}}),t._v(" "),n("el-radio-button",{attrs:{label:"广州"}}),t._v(" "),n("el-radio-button",{attrs:{label:"深圳"}})],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:"上海"}}),t._v(" "),n("el-radio-button",{attrs:{label:"北京"}}),t._v(" "),n("el-radio-button",{attrs:{label:"广州"}}),t._v(" "),n("el-radio-button",{attrs:{label:"深圳"}})],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{radio1:"上海",radio2:"上海",radio3:"上海",radio4:"上海"}}}),"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("备选项1")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("备选项2")])],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("备选项1")]),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("备选项2")])],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("备选项1")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",disabled:""}},[t._v("备选项2")])],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("备选项1")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""}},[t._v("备选项2")])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{radio1:"1",radio2:"1",radio3:"1",radio4:"1"}}})}},r=n(0),i=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("在一组备选项中进行单选")]),e._m(1),n("p",[e._v("由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。")]),n("demo-block",[n("div",[n("p",[e._v("要使用 Radio 组件，只需要设置"),n("code",[e._v("v-model")]),e._v("绑定变量，选中意味着变量的值为相应 Radio "),n("code",[e._v("label")]),e._v("属性的值，"),n("code",[e._v("label")]),e._v("可以是"),n("code",[e._v("String")]),e._v("、"),n("code",[e._v("Number")]),e._v("或"),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">备选项</el-radio>\n  <el-radio v-model="radio" label="2">备选项</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),n("p",[e._v("单选框不可用的状态。")]),n("demo-block",[n("div",[n("p",[e._v("只要在"),n("code",[e._v("el-radio")]),e._v("元素中设置"),n("code",[e._v("disabled")]),e._v("属性即可，它接受一个"),n("code",[e._v("Boolean")]),e._v("，"),n("code",[e._v("true")]),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-radio disabled v-model="radio" label="禁用">备选项</el-radio>\n  <el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'选中且禁用\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("适用于在多个互斥的选项中选择的场景")]),n("demo-block",[n("div",[n("p",[e._v("结合"),n("code",[e._v("el-radio-group")]),e._v("元素和子元素"),n("code",[e._v("el-radio")]),e._v("可以实现单选组，在"),n("code",[e._v("el-radio-group")]),e._v("中绑定"),n("code",[e._v("v-model")]),e._v("，在"),n("code",[e._v("el-radio")]),e._v("中设置好"),n("code",[e._v("label")]),e._v("即可，无需再给每一个"),n("code",[e._v("el-radio")]),e._v("绑定变量，另外，还提供了"),n("code",[e._v("change")]),e._v("事件来响应变化，它会传入一个参数"),n("code",[e._v("value")]),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-radio-group v-model="radio">\n    <el-radio :label="3">备选项</el-radio>\n    <el-radio :label="6">备选项</el-radio>\n    <el-radio :label="9">备选项</el-radio>\n  </el-radio-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: 3\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("按钮样式的单选组合。")]),n("demo-block",[n("div",[n("p",[e._v("只需要把"),n("code",[e._v("el-radio")]),e._v("元素换成"),n("code",[e._v("el-radio-button")]),e._v("元素即可，此外，Element 还提供了"),n("code",[e._v("size")]),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  <div>\n    <el-radio-group v-model="radio1">\n      <el-radio-button label="上海"></el-radio-button>\n      <el-radio-button label="北京"></el-radio-button>\n      <el-radio-button label="广州"></el-radio-button>\n      <el-radio-button label="深圳"></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="上海" ></el-radio-button>\n      <el-radio-button label="北京"></el-radio-button>\n      <el-radio-button label="广州"></el-radio-button>\n      <el-radio-button label="深圳"></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="上海"></el-radio-button>\n      <el-radio-button label="北京" disabled ></el-radio-button>\n      <el-radio-button label="广州"></el-radio-button>\n      <el-radio-button label="深圳"></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="上海"></el-radio-button>\n      <el-radio-button label="北京"></el-radio-button>\n      <el-radio-button label="广州"></el-radio-button>\n      <el-radio-button label="深圳"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: \'上海\',\n        radio2: \'上海\',\n        radio3: \'上海\',\n        radio4: \'上海\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("border")]),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('<template>\n  <div>\n    <el-radio v-model="radio1" label="1" border>备选项1</el-radio>\n    <el-radio v-model="radio1" label="2" border>备选项2</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio>\n    <el-radio v-model="radio2" label="2" border size="medium">备选项2</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>备选项1</el-radio>\n      <el-radio label="2" border disabled>备选项2</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>备选项1</el-radio>\n      <el-radio label="2" border>备选项2</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(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:"radio-dan-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-dan-xuan-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio 单选框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-xuan-kuang-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan-kuang-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单选框组")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-niu-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按钮样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-bian-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有边框")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),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("Radio 的 value")]),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("是否禁用")]),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("是否显示边框")]),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("Radio 的尺寸，仅在 border 为真时有效")]),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("原生 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:"radio-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("绑定值变化时触发的事件")]),t("td",[this._v("选中的 Radio label 值")])])])])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),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("单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效")]),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("是否禁用")]),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("按钮形式的 Radio 激活时的文本颜色")]),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("按钮形式的 Radio 激活时的填充色和边框色")]),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.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("绑定值变化时触发的事件")]),t("td",[this._v("选中的 Radio label 值")])])])])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Radio 的 value")]),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("是否禁用")]),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("原生 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},603: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},l={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("默认不区分颜色")]),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("区分颜色")]),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:{"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}"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:3.7}}})}},r=n(0),i=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("评分组件")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("评分默认被分为三个等级，可以利用颜色数组对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用"),n("code",[e._v("colors")]),e._v("属性设置，而它们对应的两个阈值则通过 "),n("code",[e._v("low-threshold")]),e._v(" 和 "),n("code",[e._v("high-threshold")]),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="block">\n  <span class="demonstration">默认不区分颜色</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">区分颜色</span>\n  <el-rate\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\']  // 等同于 { 2: \'#99A9BF\', 4: { value: \'#F7BA2A\', excluded: true }, 5: \'#FF9900\' }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("用辅助文字直接地表达对应分数")]),n("demo-block",[n("div",[n("p",[e._v("为组件设置 "),n("code",[e._v("show-text")]),e._v(" 属性会在右侧显示辅助文字。通过设置 "),n("code",[e._v("texts")]),e._v(" 可以为每一个分值指定对应的辅助文字。"),n("code",[e._v("texts")]),e._v(" 为一个数组，长度应等于最大值 "),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  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("当有多层评价时，可以用不同类型的 icon 区分评分层级")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("icon-classes")]),e._v("属性可以自定义不同分段的图标。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名。本例还使用"),n("code",[e._v("void-icon-class")]),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-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'] // 等同于 { 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("只读的评分用来展示分数，允许出现半星")]),n("demo-block",[n("div",[n("p",[e._v("为组件设置 "),n("code",[e._v("disabled")]),e._v(" 属性表示组件为只读，支持小数分值。此时若设置 "),n("code",[e._v("show-score")]),e._v("，则会在右侧显示目前的分值。可以提供 "),n("code",[e._v("score-template")]),e._v(" 作为显示模板，模板为一个包含了 "),n("code",[e._v("{value}")]),e._v(" 的字符串，"),n("code",[e._v("{value}")]),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-rate\n  v-model="value"\n  disabled\n  show-score\n  text-color="#ff9900"\n  score-template="{value}">\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-ping-fen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate-ping-fen","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rate 评分")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fu-zhu-wen-zi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-wen-zi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 辅助文字")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qi-ta-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-icon","aria-hidden":"true"}},[this._v("¶")]),this._v(" 其它 icon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhi-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-du","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),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("最大分值")]),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("是否为只读")]),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("是否允许半选")]),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("低分和中等分数的界限值，值本身被划分在低分中")]),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("高分和中等分数的界限值，值本身被划分在高分中")]),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("icon 的颜色。若传入数组，共有 3 个元素，为 3 个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色")]),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("未选中 icon 的颜色")]),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("只读时未选中 icon 的颜色")]),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("icon 的类名。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名")]),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("未选中 icon 的类名")]),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("只读时未选中 icon 的类名")]),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("是否显示辅助文字，若为真，则会从 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("是否显示当前分数，show-score 和 show-text 不能同时为真")]),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("辅助文字的颜色")]),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("辅助文字数组")]),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("分数显示模板")]),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.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("分值改变时触发")]),t("td",[this._v("改变后的分值")])])])])}],!1,null,null,null);t.default=i.exports},604: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},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",[t("el-col",{attrs:{sm:12,lg:6}},[t("el-result",{attrs:{icon:"success",title:"成功提示",subTitle:"请根据提示进行操作"}},[t("template",{slot:"extra"},[t("el-button",{attrs:{type:"primary",size:"medium"}},[this._v("返回")])],1)],2)],1),this._v(" "),t("el-col",{attrs:{sm:12,lg:6}},[t("el-result",{attrs:{icon:"warning",title:"警告提示",subTitle:"请根据提示进行操作"}},[t("template",{slot:"extra"},[t("el-button",{attrs:{type:"primary",size:"medium"}},[this._v("返回")])],1)],2)],1),this._v(" "),t("el-col",{attrs:{sm:12,lg:6}},[t("el-result",{attrs:{icon:"error",title:"错误提示",subTitle:"请根据提示进行操作"}},[t("template",{slot:"extra"},[t("el-button",{attrs:{type:"primary",size:"medium"}},[this._v("返回")])],1)],2)],1),this._v(" "),t("el-col",{attrs:{sm:12,lg:6}},[t("el-result",{attrs:{icon:"info",title:"信息提示",subTitle:"请根据提示进行操作"}},[t("template",{slot:"extra"},[t("el-button",{attrs:{type:"primary",size:"medium"}},[this._v("返回")])],1)],2)],1)],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-result",{attrs:{title:"404",subTitle:"抱歉，请求错误"}},[t("template",{slot:"icon"},[t("el-image",{attrs:{src:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"}})],1),this._v(" "),t("template",{slot:"extra"},[t("el-button",{attrs:{type:"primary",size:"medium"}},[this._v("返回")])],1)],2)],1)},staticRenderFns:[]},{})}},r=n(0),i=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("用于对用户的操作结果或者异常状态做反馈。")]),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-row>\n  <el-col :sm="12" :lg="6">\n    <el-result icon="success" title="成功提示" subTitle="请根据提示进行操作">\n      <template slot="extra">\n        <el-button type="primary" size="medium">返回</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm="12" :lg="6">\n    <el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作">\n      <template slot="extra">\n        <el-button type="primary" size="medium">返回</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm="12" :lg="6">\n    <el-result icon="error" title="错误提示" subTitle="请根据提示进行操作">\n      <template slot="extra">\n        <el-button type="primary" size="medium">返回</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm="12" :lg="6">\n    <el-result icon="info" title="信息提示" subTitle="请根据提示进行操作">\n      <template slot="extra">\n        <el-button type="primary" size="medium">返回</el-button>\n      </template>\n    </el-result>\n  </el-col>\n</el-row>\n')])])])],2),e._m(2),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-result title="404" subTitle="抱歉，请求错误">\n  <template slot="icon">\n    <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>\n  </template>\n  <template slot="extra">\n    <el-button type="primary" size="medium">返回</el-button>\n  </template>\n</el-result>\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:"result-jie-guo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#result-jie-guo","aria-hidden":"true"}},[this._v("¶")]),this._v(" Result 结果")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"result-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#result-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Result Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sub-title")]),n("td",[e._v("二级标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("图标类型")]),n("td",[e._v("string")]),n("td",[e._v("success / warning / info / error")]),n("td",[e._v("info")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"result-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#result-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Result 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("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("自定义图标")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("自定义标题")])]),n("tr",[n("td",[e._v("subTitle")]),n("td",[e._v("自定义二级标题")])]),n("tr",[n("td",[e._v("extra")]),n("td",[e._v("自定义底部额外区域")])])])])}],!1,null,null,null);t.default=i.exports},605: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},l={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:"请选择"},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:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],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:"请选择"},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:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶",disabled:!0},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],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:"请选择"},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:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],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:"请选择"},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:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],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:"请选择"},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:"请选择"},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:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],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:"请选择"},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:"北京"},{value:"Shanghai",label:"上海"},{value:"Nanjing",label:"南京"},{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"}],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:"请选择"},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:"热门城市",options:[{value:"Shanghai",label:"上海"},{value:"Beijing",label:"北京"}]},{label:"城市名",options:[{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"},{value:"Dalian",label:"大连"}]}],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:"请选择"},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:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],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:"请输入关键词","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:"value:"+e,label:"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:"请选择文章标签"},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:[]}}})}},r=n(0),i=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("当选项过多时，使用下拉菜单展示并选择内容。")]),e._m(1),n("p",[e._v("适用广泛的基础单选")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("v-model")]),e._v("的值为当前被选中的"),n("code",[e._v("el-option")]),e._v("的 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  <el-select v-model=\"value\" placeholder=\"请选择\">\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: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("在"),n("code",[e._v("el-option")]),e._v("中，设定"),n("code",[e._v("disabled")]),e._v("值为 true，即可禁用该选项")])]),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=\"请选择\">\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: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶',\n          disabled: true\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("选择器不可用状态")]),n("demo-block",[n("div",[n("p",[e._v("为"),n("code",[e._v("el-select")]),e._v("设置"),n("code",[e._v("disabled")]),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-select v-model=\"value\" disabled placeholder=\"请选择\">\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: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("包含清空按钮，可将选择器清空为初始状态")]),n("demo-block",[n("div",[n("p",[e._v("为"),n("code",[e._v("el-select")]),e._v("设置"),n("code",[e._v("clearable")]),e._v("属性，则可将选择器清空。需要注意的是，"),n("code",[e._v("clearable")]),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-select v-model=\"value\" clearable placeholder=\"请选择\">\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: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("适用性较广的基础多选，用 Tag 展示已选项")]),n("demo-block",[n("div",[n("p",[e._v("为"),n("code",[e._v("el-select")]),e._v("设置"),n("code",[e._v("multiple")]),e._v("属性即可启用多选，此时"),n("code",[e._v("v-model")]),e._v("的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置"),n("code",[e._v("collapse-tags")]),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('<template>\n  <el-select v-model="value1" multiple placeholder="请选择">\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="请选择">\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: \'选项1\',\n          label: \'黄金糕\'\n        }, {\n          value: \'选项2\',\n          label: \'双皮奶\'\n        }, {\n          value: \'选项3\',\n          label: \'蚵仔煎\'\n        }, {\n          value: \'选项4\',\n          label: \'龙须面\'\n        }, {\n          value: \'选项5\',\n          label: \'北京烤鸭\'\n        }],\n        value1: [],\n        value2: []\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("可以自定义备选项")]),n("demo-block",[n("div",[n("p",[e._v("将自定义的 HTML 模板插入"),n("code",[e._v("el-option")]),e._v("的 slot 中即可。")])]),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=\"请选择\">\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: '北京'\n        }, {\n          value: 'Shanghai',\n          label: '上海'\n        }, {\n          value: 'Nanjing',\n          label: '南京'\n        }, {\n          value: 'Chengdu',\n          label: '成都'\n        }, {\n          value: 'Shenzhen',\n          label: '深圳'\n        }, {\n          value: 'Guangzhou',\n          label: '广州'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("备选项进行分组展示")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("el-option-group")]),e._v("对备选项进行分组，它的"),n("code",[e._v("label")]),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("<template>\n  <el-select v-model=\"value\" placeholder=\"请选择\">\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: '热门城市',\n          options: [{\n            value: 'Shanghai',\n            label: '上海'\n          }, {\n            value: 'Beijing',\n            label: '北京'\n          }]\n        }, {\n          label: '城市名',\n          options: [{\n            value: 'Chengdu',\n            label: '成都'\n          }, {\n            value: 'Shenzhen',\n            label: '深圳'\n          }, {\n            value: 'Guangzhou',\n            label: '广州'\n          }, {\n            value: 'Dalian',\n            label: '大连'\n          }]\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("可以利用搜索功能快速查找选项")]),n("demo-block",[n("div",[n("p",[e._v("为"),n("code",[e._v("el-select")]),e._v("添加"),n("code",[e._v("filterable")]),e._v("属性即可启用搜索功能。默认情况下，Select 会找出所有"),n("code",[e._v("label")]),e._v("属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个"),n("code",[e._v("filter-method")]),e._v("来实现。"),n("code",[e._v("filter-method")]),e._v("为一个"),n("code",[e._v("Function")]),e._v("，它会在输入值发生变化时调用，参数为当前输入值。")])]),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=\"请选择\">\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: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("从服务器搜索数据，输入关键字进行查找")]),n("demo-block",[n("div",[n("p",[e._v("为了启用远程搜索，需要将"),n("code",[e._v("filterable")]),e._v("和"),n("code",[e._v("remote")]),e._v("设置为"),n("code",[e._v("true")]),e._v("，同时传入一个"),n("code",[e._v("remote-method")]),e._v("。"),n("code",[e._v("remote-method")]),e._v("为一个"),n("code",[e._v("Function")]),e._v("，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果"),n("code",[e._v("el-option")]),e._v("是通过"),n("code",[e._v("v-for")]),e._v("指令渲染出来的，此时需要为"),n("code",[e._v("el-option")]),e._v("添加"),n("code",[e._v("key")]),e._v("属性，且其值需具有唯一性，比如此例中的"),n("code",[e._v("item.value")]),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('<template>\n  <el-select\n    v-model="value"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder="请输入关键词"\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: `value:${item}`, label: `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("可以创建并选中选项中不存在的条目")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("allow-create")]),e._v("属性即可通过在输入框中输入文字来创建新的条目。注意此时"),n("code",[e._v("filterable")]),e._v("必须为真。本例还使用了"),n("code",[e._v("default-first-option")]),e._v("属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。")])]),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=\"请选择文章标签\">\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-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select 选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"you-jin-yong-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#you-jin-yong-xuan-xiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 有禁用选项")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-qing-kong-dan-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong-dan-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可清空单选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-duo-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础多选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义模板")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fen-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-zu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 分组")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 远程搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chuang-jian-tiao-mu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chuang-jian-tiao-mu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 创建条目")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("如果 Select 的绑定值为对象类型，请务必指定 "),t("code",[this._v("value-key")]),this._v(" 作为它的唯一性标识。")])])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),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("是否多选")]),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("是否禁用")]),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("作为 value 唯一标识的键名，绑定值为对象类型时必填")]),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("输入框尺寸")]),n("td",[e._v("string")]),n("td",[e._v("medium/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("是否可以清空选项")]),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("多选时是否将选中值按文字的形式展示")]),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("多选时用户最多可以选择的项目数，为 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("select input 的 name 属性")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("select input 的 autocomplete 属性")]),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("下个主版本弃用")]),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("占位符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("请选择")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("是否可搜索")]),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("是否允许用户创建新条目，需配合 "),n("code",[e._v("filterable")]),e._v(" 使用")]),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("自定义搜索方法")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("remote")]),n("td",[e._v("是否为远程搜索")]),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("远程搜索方法")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("是否正在从远程获取数据")]),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("远程加载时显示的文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("加载中")])]),n("tr",[n("td",[e._v("no-match-text")]),n("td",[e._v("搜索条件无匹配时显示的文字，也可以使用"),n("code",[e._v('slot="empty"')]),e._v("设置")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("无匹配数据")])]),n("tr",[n("td",[e._v("no-data-text")]),n("td",[e._v("选项为空时显示的文字，也可以使用"),n("code",[e._v('slot="empty"')]),e._v("设置")]),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("Select 下拉框的类名")]),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("多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词")]),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("在输入框按下回车，选择第一个匹配项。需配合 "),n("code",[e._v("filterable")]),e._v(" 或 "),n("code",[e._v("remote")]),e._v(" 使用")]),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("是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 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("对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单")]),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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("选中值发生变化时触发")]),n("td",[e._v("目前的选中值")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("下拉框出现/隐藏时触发")]),n("td",[e._v("出现则为 true，隐藏则为 false")])]),n("tr",[n("td",[e._v("remove-tag")]),n("td",[e._v("多选模式下移除tag时触发")]),n("td",[e._v("移除的tag值")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("可清空的单选模式下用户点击清空按钮时触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当 input 失去焦点时触发")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当 input 获得焦点时触发")]),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("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Option 组件列表")])]),n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("Select 组件头部内容")])]),n("tr",[n("td",[e._v("empty")]),n("td",[e._v("无选项时的列表")])])])])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("分组的组名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否将该分组下所有选项置为禁用")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("选项的值")]),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("选项的标签，若不设置则默认与 "),n("code",[e._v("value")]),e._v(" 相同")]),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("是否禁用该选项")]),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("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("使 input 获取焦点")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("使 input 失去焦点，并隐藏下拉框")]),n("td",[e._v("-")])])])])}],!1,null,null,null);t.default=i.exports},606: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},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-skeleton")]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-skeleton",{attrs:{rows:6}})],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-skeleton",{attrs:{rows:6,animated:""}})],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-skeleton",{staticStyle:{width:"240px"}},[t("template",{slot:"template"},[t("el-skeleton-item",{staticStyle:{width:"240px",height:"240px"},attrs:{variant:"image"}}),this._v(" "),t("div",{staticStyle:{padding:"14px"}},[t("el-skeleton-item",{staticStyle:{width:"50%"},attrs:{variant:"p"}}),this._v(" "),t("div",{staticStyle:{display:"flex","align-items":"center","justify-items":"space-between"}},[t("el-skeleton-item",{staticStyle:{"margin-right":"16px"},attrs:{variant:"text"}}),this._v(" "),t("el-skeleton-item",{staticStyle:{width:"30%"},attrs:{variant:"text"}})],1)],1)],1)],2)]],2)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticStyle:{width:"240px"}},[n("p",[n("label",{staticStyle:{"margin-right":"16px"}},[t._v("切换 Loading")]),t._v(" "),n("el-switch",{model:{value:t.loading,callback:function(e){t.loading=e},expression:"loading"}})],1),t._v(" "),n("el-skeleton",{staticStyle:{width:"240px"},attrs:{loading:t.loading,animated:""}},[n("template",{slot:"template"},[n("el-skeleton-item",{staticStyle:{width:"240px",height:"240px"},attrs:{variant:"image"}}),t._v(" "),n("div",{staticStyle:{padding:"14px"}},[n("el-skeleton-item",{staticStyle:{width:"50%"},attrs:{variant:"h3"}}),t._v(" "),n("div",{staticStyle:{display:"flex","align-items":"center","justify-items":"space-between","margin-top":"16px",height:"16px"}},[n("el-skeleton-item",{staticStyle:{"margin-right":"16px"},attrs:{variant:"text"}}),t._v(" "),n("el-skeleton-item",{staticStyle:{width:"30%"},attrs:{variant:"text"}})],1)],1)],1),t._v(" "),[n("el-card",{attrs:{"body-style":{padding:"0px",marginBottom:"1px"}}},[n("img",{staticClass:"image",attrs:{src:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"}}),t._v(" "),n("div",{staticStyle:{padding:"14px"}},[n("span",[t._v("好吃的汉堡")]),t._v(" "),n("div",{staticClass:"bottom card-header"},[n("span",{staticClass:"time"},[t._v(t._s(t.currentDate))]),t._v(" "),n("el-button",{staticClass:"button",attrs:{type:"text"}},[t._v("操作按钮")])],1)])])]],2)],1)]],2)},staticRenderFns:[]},{data:function(){return{loading:!0,currentDate:"2021-06-01"}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticStyle:{width:"400px"}},[n("p",[n("el-button",{on:{click:t.setLoading}},[t._v("点我重新加载")])],1),t._v(" "),n("el-skeleton",{staticStyle:{width:"400px"},attrs:{loading:t.loading,animated:"",count:3}},[n("template",{slot:"template"},[n("el-skeleton-item",{staticStyle:{width:"400px",height:"267px"},attrs:{variant:"image"}}),t._v(" "),n("div",{staticStyle:{padding:"14px"}},[n("el-skeleton-item",{staticStyle:{width:"50%"},attrs:{variant:"h3"}}),t._v(" "),n("div",{staticStyle:{display:"flex","align-items":"center","justify-items":"space-between","margin-top":"16px",height:"16px"}},[n("el-skeleton-item",{staticStyle:{"margin-right":"16px"},attrs:{variant:"text"}}),t._v(" "),n("el-skeleton-item",{staticStyle:{width:"30%"},attrs:{variant:"text"}})],1)],1)],1),t._v(" "),t._l(t.lists,function(e){return n("el-card",{key:e.name,attrs:{"body-style":{padding:"0px",marginBottom:"1px"}}},[n("img",{staticClass:"image multi-content",attrs:{src:e.imgUrl}}),t._v(" "),n("div",{staticStyle:{padding:"14px"}},[n("span",[t._v(t._s(e.name))]),t._v(" "),n("div",{staticClass:"bottom card-header"},[n("span",{staticClass:"time"},[t._v(t._s(t.currentDate))]),t._v(" "),n("el-button",{staticClass:"button",attrs:{type:"text"}},[t._v("操作按钮")])],1)])])})],2)],1)]],2)},staticRenderFns:[]},{data:function(){return{loading:!0,currentDate:"2021-06-01",lists:[]}},mounted:function(){this.loading=!1,this.lists=[{imgUrl:"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",name:"鹿"},{imgUrl:"https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",name:"马"},{imgUrl:"https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",name:"山狮"}]},methods:{setLoading:function(){var e=this;this.loading=!0,setTimeout(function(){return e.loading=!1},2e3)}}}),"element-demo6":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticStyle:{width:"240px"}},[n("p",[n("label",{staticStyle:{"margin-right":"16px"}},[t._v("切换 Loading")]),t._v(" "),n("el-switch",{model:{value:t.loading,callback:function(e){t.loading=e},expression:"loading"}})],1),t._v(" "),n("el-skeleton",{staticStyle:{width:"240px"},attrs:{loading:t.loading,animated:"",throttle:500}},[n("template",{slot:"template"},[n("el-skeleton-item",{staticStyle:{width:"240px",height:"240px"},attrs:{variant:"image"}}),t._v(" "),n("div",{staticStyle:{padding:"14px"}},[n("el-skeleton-item",{staticStyle:{width:"50%"},attrs:{variant:"h3"}}),t._v(" "),n("div",{staticStyle:{display:"flex","align-items":"center","justify-items":"space-between","margin-top":"16px",height:"16px"}},[n("el-skeleton-item",{staticStyle:{"margin-right":"16px"},attrs:{variant:"text"}}),t._v(" "),n("el-skeleton-item",{staticStyle:{width:"30%"},attrs:{variant:"text"}})],1)],1)],1),t._v(" "),[n("el-card",{attrs:{"body-style":{padding:"0px",marginBottom:"1px"}}},[n("img",{staticClass:"image",attrs:{src:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"}}),t._v(" "),n("div",{staticStyle:{padding:"14px"}},[n("span",[t._v("好吃的汉堡")]),t._v(" "),n("div",{staticClass:"bottom card-header"},[n("span",{staticClass:"time"},[t._v(t._s(t.currentDate))]),t._v(" "),n("el-button",{staticClass:"button",attrs:{type:"text"}},[t._v("操作按钮")])],1)])])]],2)],1)]],2)},staticRenderFns:[]},{data:function(){return{loading:!1,currentDate:"2021-06-01"}}})}},r=n(0),i=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("在需要等待加载内容的位置设置一个骨架屏，某些场景下比 Loading 的视觉效果更好。")]),e._m(1),n("p",[e._v("基础的骨架效果。")]),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-skeleton />\n</template>\n")])])])],2),e._m(2),n("p",[e._v("可以配置骨架屏段落数量，以便更接近真实渲染效果。首行会被渲染一个长度 33% 的段首。")]),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-skeleton :rows="6" />\n')])])])],2),e._m(3),n("p",[e._v("显示动画效果。")]),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-skeleton :rows="6" animated />\n')])])])],2),e._m(4),n("p",[e._v("Element 提供的排版模式有时候并不满足要求，当您想要用自己定义的模板时，可以通过一个具名 Slot 来自己设定模板。")]),n("p",[e._v("我们提供了不同的模板单元可供使用，具体可选值请看 API 详细描述。 建议在描述模板的时候，尽量靠近真实的 DOM 结构，这样可以避免 DOM 高度差距引起的抖动。")]),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-skeleton style="width: 240px">\n    <template slot="template">\n      <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />\n      <div style="padding: 14px;">\n        <el-skeleton-item variant="p" style="width: 50%" />\n        <div\n          style="display: flex; align-items: center; justify-items: space-between;"\n        >\n          <el-skeleton-item variant="text" style="margin-right: 16px;" />\n          <el-skeleton-item variant="text" style="width: 30%;" />\n        </div>\n      </div>\n    </template>\n  </el-skeleton>\n</template>\n')])])])],2),e._m(5),e._m(6),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 style="width: 240px">\n    <p>\n      <label style="margin-right: 16px;">切换 Loading</label>\n      <el-switch v-model="loading" />\n    </p>\n    <el-skeleton style="width: 240px" :loading="loading" animated>\n      <template slot="template">\n        <el-skeleton-item\n          variant="image"\n          style="width: 240px; height: 240px;"\n        />\n        <div style="padding: 14px;">\n          <el-skeleton-item variant="h3" style="width: 50%;" />\n          <div\n            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"\n          >\n            <el-skeleton-item variant="text" style="margin-right: 16px;" />\n            <el-skeleton-item variant="text" style="width: 30%;" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card :body-style="{ padding: \'0px\', marginBottom: \'1px\' }">\n          <img\n            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"\n            class="image"\n          />\n          <div style="padding: 14px;">\n            <span>好吃的汉堡</span>\n            <div class="bottom card-header">\n              <span class="time">{{ currentDate }}</span>\n              <el-button type="text" class="button">操作按钮</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        loading: true,\n        currentDate: \'2021-06-01\'\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),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 style="width: 400px">\n    <p>\n      <el-button @click="setLoading">点我重新加载</el-button>\n    </p>\n    <el-skeleton style="width:400px" :loading="loading" animated :count="3">\n      <template slot="template">\n        <el-skeleton-item\n          variant="image"\n          style="width: 400px; height: 267px;"\n        />\n        <div style="padding: 14px;">\n          <el-skeleton-item variant="h3" style="width: 50%;" />\n          <div\n            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"\n          >\n            <el-skeleton-item variant="text" style="margin-right: 16px;" />\n            <el-skeleton-item variant="text" style="width: 30%;" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card\n          :body-style="{ padding: \'0px\', marginBottom: \'1px\' }"\n          v-for="item in lists"\n          :key="item.name"\n        >\n          <img :src="item.imgUrl" class="image multi-content" />\n          <div style="padding: 14px;">\n            <span>{{ item.name }}</span>\n            <div class="bottom card-header">\n              <span class="time">{{ currentDate }}</span>\n              <el-button type="text" class="button">操作按钮</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        loading: true,\n        currentDate: \'2021-06-01\',\n        lists: [],\n      }\n    },\n    mounted() {\n      this.loading = false\n      this.lists = [\n        {\n          imgUrl:\n            \'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg\',\n          name: \'鹿\',\n        },\n        {\n          imgUrl:\n            \'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg\',\n          name: \'马\',\n        },\n        {\n          imgUrl:\n            \'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg\',\n          name: \'山狮\',\n        },\n      ]\n    },\n    methods: {\n      setLoading() {\n        this.loading = true\n        setTimeout(() => (this.loading = false), 2000)\n      },\n    },\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),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('<template>\n  <div style="width: 240px">\n    <p>\n      <label style="margin-right: 16px;">切换 Loading</label>\n      <el-switch v-model="loading" />\n    </p>\n    <el-skeleton\n      style="width: 240px"\n      :loading="loading"\n      animated\n      :throttle="500"\n    >\n      <template slot="template">\n        <el-skeleton-item\n          variant="image"\n          style="width: 240px; height: 240px;"\n        />\n        <div style="padding: 14px;">\n          <el-skeleton-item variant="h3" style="width: 50%;" />\n          <div\n            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"\n          >\n            <el-skeleton-item variant="text" style="margin-right: 16px;" />\n            <el-skeleton-item variant="text" style="width: 30%;" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card :body-style="{ padding: \'0px\', marginBottom: \'1px\'}">\n          <img\n            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"\n            class="image"\n          />\n          <div style="padding: 14px;">\n            <span>好吃的汉堡</span>\n            <div class="bottom card-header">\n              <span class="time">{{ currentDate }}</span>\n              <el-button type="text" class="button">操作按钮</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        loading: false,\n        currentDate: \'2021-06-01\'\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)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"skeleton-gu-jia-ping"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#skeleton-gu-jia-ping","aria-hidden":"true"}},[this._v("¶")]),this._v(" Skeleton 骨架屏")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"geng-duo-can-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#geng-duo-can-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 更多参数")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-hua-xiao-guo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-hua-xiao-guo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动画效果")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"loading-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading 状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("当 Loading 结束之后，我们往往需要显示真实的 UI，可以通过 "),t("code",[this._v("loading")]),this._v(" 的值来控制是否显示真实的 DOM。然后通过\n具名 Slot 来设置当 loading 结束之后需要展示的 UI。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-ran-duo-tiao-shu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ran-duo-tiao-shu-ju","aria-hidden":"true"}},[this._v("¶")]),this._v(" 渲染多条数据")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("大多时候, 骨架屏都被用来渲染列表, 当我们需要在从服务器获取数据的时候来渲染一个假的 UI。利用 "),t("code",[this._v("count")]),this._v(" 这个属性就能控制渲染多少条假的数据在页面上")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("请注意, 请尽可能的将 "),t("code",[this._v("count")]),this._v(" 的大小保持在最小状态, 即使是假的 UI, DOM 元素多了之后, 照样会引起性能问题, 并且在骨架屏销毁时所消耗的时间也会更长(相对的)。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fang-zhi-xuan-ran-dou-dong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-zhi-xuan-ran-dou-dong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 防止渲染抖动")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("有的时候，API 的请求回来的特别快，往往骨架占位刚刚被渲染，真实的数据就已经回来了，用户的界面会突然一闪，此时为了避免这种情况，就需要通过 "),t("code",[this._v("throttle")]),this._v(" 属性来避免这个问题。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"skeleton-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#skeleton-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Skeleton Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("animated")]),n("td",[e._v("是否使用动画")]),n("td",[e._v("boolean")]),n("td",[e._v("true / false")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("count")]),n("td",[e._v("渲染多少个 template, 建议使用尽可能小的数字")]),n("td",[e._v("number")]),n("td",[e._v("integer")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("是否显示 skeleton 骨架屏")]),n("td",[e._v("boolean")]),n("td",[e._v("true / false")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("rows")]),n("td",[e._v("骨架屏段落数量")]),n("td",[e._v("number")]),n("td",[e._v("正整数")]),n("td",[e._v("4")])]),n("tr",[n("td",[e._v("throttle")]),n("td",[e._v("延迟占位 DOM 渲染的时间, 单位是毫秒")]),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:"skeleton-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#skeleton-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Skeleton 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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("variant")]),n("td",[e._v("当前显示的占位元素的样式")]),n("td",[e._v("Enum(string)")]),n("td",[e._v("p / h1 / h3 / text / caption / button / image / circle / rect")]),n("td",[e._v("text")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"skeleton-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#skeleton-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Skeleton 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("default")]),t("td",[this._v("\b用来展示真实 UI")])]),t("tr",[t("td",[this._v("template")]),t("td",[this._v("用来展示自定义占位符")])])])])}],!1,null,null,null);t.default=i.exports},607: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},l={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("默认")]),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("自定义初始值")]),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("隐藏 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("格式化 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("禁用")]),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("不显示间断点")]),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("显示间断点")]),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%")}}}}})}},r=n(0),i=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("通过拖动滑块在一个固定区间内进行选择")]),e._m(1),n("p",[e._v("在拖动滑块时，显示当前值")]),n("demo-block",[n("div",[n("p",[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 class="block">\n    <span class="demonstration">默认</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">自定义初始值</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">隐藏 Tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">格式化 Tooltip</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">禁用</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("选项可以是离散的")]),n("demo-block",[n("div",[n("p",[e._v("改变"),n("code",[e._v("step")]),e._v("的值可以改变步长，通过设置"),n("code",[e._v("show-stops")]),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">不显示间断点</span>\n    <el-slider\n      v-model="value1"\n      :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">显示间断点</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("通过输入框设置精确数值")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("show-input")]),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  <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("支持选择某一数值范围")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("range")]),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  <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("设置"),n("code",[e._v("vertical")]),e._v("可使 Slider 变成竖向模式，此时必须设置高度"),n("code",[e._v("height")]),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('<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("设置 "),n("code",[e._v("marks")]),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  <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-hua-kuai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-hua-kuai","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider 滑块")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chi-san-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-san-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 离散值")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-you-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-shu-ru-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带有输入框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fan-wei-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fan-wei-xuan-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 范围选择")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-xiang-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-xiang-mo-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 竖向模式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhan-shi-biao-ji"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhan-shi-biao-ji","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),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("最小值")]),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("最大值")]),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("是否禁用")]),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("步长")]),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("是否显示输入框，仅在非范围选择时有效")]),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("在显示输入框的情况下，是否显示输入框的控制按钮")]),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("输入框的尺寸")]),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("是否显示间断点")]),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("是否显示 tooltip")]),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("格式化 tooltip message")]),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("是否为范围选择")]),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("是否竖向模式")]),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 高度，竖向模式时必填")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("屏幕阅读器标签")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("输入时的去抖延迟，毫秒，仅在"),n("code",[e._v("show-input")]),e._v("等于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("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("标记， key 的类型必须为 number 且取值在闭区间 "),n("code",[e._v("[min, max]")]),e._v(" 内，每个标记可以单独设置样式")]),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:"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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）")]),n("td",[e._v("改变后的值")])]),n("tr",[n("td",[e._v("input")]),n("td",[e._v("数据改变时触发（使用鼠标拖曳时，活动过程实时触发）")]),n("td",[e._v("改变后的值")])])])])}],!1,null,null,null);t.default=i.exports},608: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},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:this.active,"finish-status":"success"}},[t("el-step",{attrs:{title:"步骤 1"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3"}})],1),this._v(" "),t("el-button",{staticStyle:{"margin-top":"12px"},on:{click:this.next}},[this._v("下一步")])],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:"已完成"}}),this._v(" "),t("el-step",{attrs:{title:"进行中"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3"}})],1)],1)},staticRenderFns:[]},{}),"element-demo2":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:"步骤 1",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3",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:2,"align-center":""}},[t("el-step",{attrs:{title:"步骤1",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤2",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤3",description:"这是一段很长很长很长的描述性文字"}}),this._v(" "),t("el-step",{attrs:{title:"步骤4",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:"步骤 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 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:"步骤 1"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3",description:"这是一段很长很长很长的描述性文字"}})],1)],1)])},staticRenderFns:[]},{}),"element-demo6":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1,simple:""}},[t("el-step",{attrs:{title:"步骤 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3",icon:"el-icon-picture"}})],1),this._v(" "),t("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[t("el-step",{attrs:{title:"步骤 1"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 2"}}),this._v(" "),t("el-step",{attrs:{title:"步骤 3"}})],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=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("引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。")]),e._m(1),n("p",[e._v("简单的步骤条。")]),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("active")]),e._v("属性，接受一个"),n("code",[e._v("Number")]),e._v("，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置"),n("code",[e._v("space")]),e._v("属性即可，它接受"),n("code",[e._v("Number")]),e._v("，单位为"),n("code",[e._v("px")]),e._v("，如果不设置，则为自适应。设置"),n("code",[e._v("finish-status")]),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-steps :active="active" finish-status="success">\n  <el-step title="步骤 1"></el-step>\n  <el-step title="步骤 2"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">下一步</el-button>\n\n<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("每一步骤显示出该步骤的状态。")]),n("demo-block",[n("div",[n("p",[e._v("也可以使用"),n("code",[e._v("title")]),e._v("具名分发，可以用"),n("code",[e._v("slot")]),e._v("的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。")])]),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="已完成"></el-step>\n  <el-step title="进行中"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n')])])])],2),e._m(3),n("p",[e._v("每个步骤有其对应的步骤状态描述。")]),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="1">\n  <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤 3" description="这段就没那么长了"></el-step>\n</el-steps>\n')])])])],2),e._m(4),n("p",[e._v("标题和描述都将居中。")]),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="2" align-center>\n  <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>\n</el-steps>\n')])])])],2),e._m(5),n("p",[e._v("步骤条内可以启用各种自定义的图标。")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("icon")]),e._v("属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名"),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('\n<el-steps :active="1">\n  <el-step title="步骤 1" icon="el-icon-edit"></el-step>\n  <el-step title="步骤 2" icon="el-icon-upload"></el-step>\n  <el-step title="步骤 3" icon="el-icon-picture"></el-step>\n</el-steps>\n')])])])],2),e._m(6),n("p",[e._v("竖直方向的步骤条。")]),n("demo-block",[n("div",[n("p",[e._v("只需要在"),n("code",[e._v("el-steps")]),e._v("元素中设置"),n("code",[e._v("direction")]),e._v("属性为"),n("code",[e._v("vertical")]),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('<div style="height: 300px;">\n  <el-steps direction="vertical" :active="1">\n    <el-step title="步骤 1"></el-step>\n    <el-step title="步骤 2"></el-step>\n    <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></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 :active="1" simple>\n  <el-step title="步骤 1" icon="el-icon-edit"></el-step>\n  <el-step title="步骤 2" icon="el-icon-upload"></el-step>\n  <el-step title="步骤 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="步骤 1" ></el-step>\n  <el-step title="步骤 2" ></el-step>\n  <el-step title="步骤 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-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps 步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"han-zhuang-tai-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#han-zhuang-tai-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 含状态步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"you-miao-shu-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#you-miao-shu-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 有描述的步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ju-zhong-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 居中的步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-tu-biao-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-biao-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带图标的步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-shi-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-shi-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 竖式步骤条")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jian-ji-feng-ge-de-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jian-ji-feng-ge-de-bu-zou-tiao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 简洁风格的步骤条")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("设置 "),n("code",[e._v("simple")]),e._v(" 可应用简洁风格，该条件下 "),n("code",[e._v("align-center")]),e._v(" / "),n("code",[e._v("description")]),e._v(" / "),n("code",[e._v("direction")]),e._v(" / "),n("code",[e._v("space")]),e._v(" 都将失效。")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("space")]),n("td",[e._v("每个 step 的间距，不填写将自适应间距。支持百分比。")]),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("显示方向")]),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("设置当前激活步骤")]),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("设置当前步骤的状态")]),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("设置结束步骤的状态")]),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("进行居中对齐")]),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("是否应用简洁风格")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("描述性文字")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("图标")]),n("td",[e._v("传入 icon 的 class 全名来自定义 icon，也支持 slot 方式写入")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("设置当前步骤的状态，不设置则根据 steps 确定状态")]),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("说明")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("自定义图标")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("自定义标题")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("自定义描述性文字")])])])])}],!1,null,null,null);t.default=i.exports},609: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},l={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",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:!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":"按月付费","inactive-text":"按年付费"},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":"按月付费","inactive-text":"按年付费"},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}}})}},r=n(0),i=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("表示两种相互对立的状态间的切换，多用于触发「开/关」。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("绑定"),n("code",[e._v("v-model")]),e._v("到一个"),n("code",[e._v("Boolean")]),e._v("类型的变量。可以使用"),n("code",[e._v("active-color")]),e._v("属性与"),n("code",[e._v("inactive-color")]),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-switch\n  v-model="value"\n  active-color="#13ce66"\n  inactive-color="#ff4949">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("active-text")]),e._v("属性与"),n("code",[e._v("inactive-text")]),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-switch\n  v-model="value1"\n  active-text="按月付费"\n  inactive-text="按年付费">\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="按月付费"\n  inactive-text="按年付费">\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("设置"),n("code",[e._v("active-value")]),e._v("和"),n("code",[e._v("inactive-value")]),e._v("属性，接受"),n("code",[e._v("Boolean")]),e._v(", "),n("code",[e._v("String")]),e._v("或"),n("code",[e._v("Number")]),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 :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("设置"),n("code",[e._v("disabled")]),e._v("属性，接受一个"),n("code",[e._v("Boolean")]),e._v("，设置"),n("code",[e._v("true")]),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-switch\n  v-model="value1"\n  disabled>\n</el-switch>\n<el-switch\n  v-model="value2"\n  disabled>\n</el-switch>\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-kai-guan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch-kai-guan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch 开关")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-zi-miao-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-miao-shu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文字描述")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"kuo-zhan-de-value-lei-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#kuo-zhan-de-value-lei-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 扩展的 value 类型")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),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("是否禁用")]),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("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("switch 打开时所显示图标的类名，设置此项会忽略 "),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("switch 关闭时所显示图标的类名，设置此项会忽略 "),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("switch 打开时的文字描述")]),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("switch 关闭时的文字描述")]),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 打开时的值")]),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 关闭时的值")]),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("switch 打开时的背景色")]),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("switch 关闭时的背景色")]),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("switch 对应的 name 属性")]),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("改变 switch 状态时是否触发表单的校验")]),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.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("事件名称")]),t("th",[this._v("说明")]),t("th",[this._v("回调参数")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("switch 状态发生变化时的回调函数")]),t("td",[this._v("新状态的值")])])])])},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("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 Switch 获取焦点")]),t("td",[this._v("-")])])])])}],!1,null,null,null);t.default=i.exports},610: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},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}}}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,stripe:""}},[t("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}}}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,border:""}},[t("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}}}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,"row-class-name":this.tableRowClassName}},[t("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"地址"}})],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-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}]}}}),"element-demo4":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,height:"250",border:""}},[t("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-08",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-06",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-07",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}]}}}),"element-demo5":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,border:""}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),n._v(" "),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),n._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"操作",width:"100"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:function(e){n.handleClick(t.row)}}},[n._v("查看")]),n._v(" "),a("el-button",{attrs:{type:"text",size:"small"}},[n._v("编辑")])]}}])})],1)]],2)},staticRenderFns:[]},{methods:{handleClick:function(e){console.log(e)}},data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1517 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1519 弄",zip:200333},{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1516 弄",zip:200333}]}}}),"element-demo6":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,height:"250"}},[t("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),this._v(" "),t("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}]}}}),"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:"日期",width:"150"}}),n._v(" "),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),n._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"操作",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          移除\n        ")])]}}])})],1)]],2)},staticRenderFns:[]},{methods:{deleteRow:function(e,t){t.splice(e,1)}},data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}]}}}),"element-demo8":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"日期",width:"150"}}),this._v(" "),t("el-table-column",{attrs:{label:"配送信息"}},[t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{label:"地址"}},[t("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),this._v(" "),t("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}]}}}),"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:"日期",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"姓名",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"地址"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.setCurrent(t.tableData[1])}}},[t._v("选中第二行")]),t._v(" "),n("el-button",{on:{click:function(e){t.setCurrent()}}},[t._v("取消选择")])],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}],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,"tooltip-effect":"dark"},on:{"selection-change":t.handleSelectionChange}},[n("el-table-column",{attrs:{type:"selection",width:"55"}}),t._v(" "),n("el-table-column",{attrs:{label:"日期",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:{prop:"name",label:"姓名",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址","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("切换第二、第三行的选中状态")]),t._v(" "),n("el-button",{on:{click:function(e){t.toggleSelection()}}},[t._v("取消选择")])],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-08",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-06",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-07",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],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.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,"default-sort":{prop:"date",order:"descending"}}},[t("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"姓名",sortable:"",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"地址",formatter:this.formatter}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}},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("清除日期过滤器")]),t._v(" "),n("el-button",{on:{click:t.clearFilter}},[t._v("清除所有过滤器")]),t._v(" "),n("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"日期",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:"姓名",width:"180"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址",formatter:t.formatter}}),t._v(" "),n("el-table-column",{attrs:{prop:"tag",label:"标签",width:"100",filters:[{text:"家",value:"家"},{text:"公司",value:"公司"}],"filter-method":t.filterTag,"filter-placement":"bottom-end"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-tag",{attrs:{type:"家"===e.row.tag?"primary":"success","disable-transitions":""}},[t._v(t._s(e.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",tag:"家"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄",tag:"公司"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄",tag:"家"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄",tag:"公司"}]}},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:"日期",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:"姓名",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[n._v("姓名: "+n._s(e.row.name))]),n._v(" "),a("p",[n._v("住址: "+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:"操作"},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("编辑")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("删除")])]}}])})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}}),"element-demo14":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("el-form",{staticClass:"demo-table-expand",attrs:{"label-position":"left",inline:""}},[n("el-form-item",{attrs:{label:"商品名称"}},[n("span",[t._v(t._s(e.row.name))])]),t._v(" "),n("el-form-item",{attrs:{label:"所属店铺"}},[n("span",[t._v(t._s(e.row.shop))])]),t._v(" "),n("el-form-item",{attrs:{label:"商品 ID"}},[n("span",[t._v(t._s(e.row.id))])]),t._v(" "),n("el-form-item",{attrs:{label:"店铺 ID"}},[n("span",[t._v(t._s(e.row.shopId))])]),t._v(" "),n("el-form-item",{attrs:{label:"商品分类"}},[n("span",[t._v(t._s(e.row.category))])]),t._v(" "),n("el-form-item",{attrs:{label:"店铺地址"}},[n("span",[t._v(t._s(e.row.address))])]),t._v(" "),n("el-form-item",{attrs:{label:"商品描述"}},[n("span",[t._v(t._s(e.row.desc))])])],1)]}}])}),t._v(" "),n("el-table-column",{attrs:{label:"商品 ID",prop:"id"}}),t._v(" "),n("el-table-column",{attrs:{label:"商品名称",prop:"name"}}),t._v(" "),n("el-table-column",{attrs:{label:"描述",prop:"desc"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{id:"12987122",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987123",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987125",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987126",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"}]}}}),"element-demo15":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":"","tree-props":{children:"children",hasChildren:"hasChildren"}}},[n("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",sortable:"",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],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:"日期",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{id:1,date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{id:2,date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{id:3,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄",children:[{id:31,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{id:32,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"}]},{id:4,date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}],tableData1:[{id:1,date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{id:2,date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{id:3,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄",hasChildren:!0},{id:4,date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}]}},methods:{load:function(e,t,n){setTimeout(function(){n([{id:31,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{id:32,date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"}])},1e3)}}}),"element-demo16":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:"输入关键字搜索"},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-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1517 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1519 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1516 弄"}],search:""}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}}),"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:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"数值 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"数值 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"数值 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:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"数值 1（元）"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"数值 2（元）"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"数值 3（元）"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{id:"12987122",name:"王小虎",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"王小虎",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"王小虎",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"王小虎",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"王小虎",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{getSummaries:function(e){var t=e.columns,a=e.data,l=[];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)})?l[e]="N/A":(l[e]=n.reduce(function(e,t){var n=Number(t);return isNaN(n)?e:e+t},0),l[e]+=" 元")}else l[e]="总价"}),l}}}),"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:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"数值 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"数值 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"数值 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:"姓名"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"数值 1（元）"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"数值 2（元）"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"数值 3（元）"}})],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{id:"12987122",name:"王小虎",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"王小虎",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"王小虎",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"王小虎",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"王小虎",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.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("el-table-column",{attrs:{type:"index",index:this.indexMethod}}),this._v(" "),t("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"家"},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1517 弄",zip:200333,tag:"公司"},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1519 弄",zip:200333,tag:"家"},{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1516 弄",zip:200333,tag:"公司"}]}},methods:{indexMethod:function(e){return 2*e}}})}},r=n(0),i=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("用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。")]),e._m(1),n("p",[e._v("基础的表格展示用法。")]),n("demo-block",[n("div",[n("p",[e._v("当"),n("code",[e._v("el-table")]),e._v("元素中注入"),n("code",[e._v("data")]),e._v("对象数组后，在"),n("code",[e._v("el-table-column")]),e._v("中用"),n("code",[e._v("prop")]),e._v("属性来对应对象中的键名即可填入数据，用"),n("code",[e._v("label")]),e._v("属性来定义表格的列名。可以使用"),n("code",[e._v("width")]),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-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"日期\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"姓名\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"地址\">\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: '王小虎',\n            address: '上海市普陀区金沙江路 1518 弄'\n          }, {\n            date: '2016-05-04',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1517 弄'\n          }, {\n            date: '2016-05-01',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1519 弄'\n          }, {\n            date: '2016-05-03',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1516 弄'\n          }]\n        }\n      }\n    }\n  <\/script>\n")])])])],2),e._m(2),n("p",[e._v("使用带斑马纹的表格，可以更容易区分出不同行的数据。")]),n("demo-block",[n("div",[n("p",[n("code",[e._v("stripe")]),e._v("属性可以创建带斑马纹的表格。它接受一个"),n("code",[e._v("Boolean")]),e._v("，默认为"),n("code",[e._v("false")]),e._v("，设置为"),n("code",[e._v("true")]),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-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\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: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用"),n("code",[e._v("border")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("，设置为"),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=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\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: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。")]),n("demo-block",[n("div",[n("p",[e._v("可以通过指定 Table 组件的 "),n("code",[e._v("row-class-name")]),e._v(" 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。")])]),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=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\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-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("纵向内容过多时，可选择固定表头。")]),n("demo-block",[n("div",[n("p",[e._v("只要在"),n("code",[e._v("el-table")]),e._v("元素中定义了"),n("code",[e._v("height")]),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("<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\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: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("横向内容过多时，可选择固定列。")]),n("demo-block",[n("div",[n("p",[e._v("固定列需要使用"),n("code",[e._v("fixed")]),e._v("属性，它接受 Boolean 值或者"),n("code",[e._v("left")]),n("code",[e._v("right")]),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-table\n    :data="tableData"\n    border\n    style="width: 100%">\n    <el-table-column\n      fixed\n      prop="date"\n      label="日期"\n      width="150">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="姓名"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      prop="province"\n      label="省份"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      prop="city"\n      label="市区"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="地址"\n      width="300">\n    </el-table-column>\n    <el-table-column\n      prop="zip"\n      label="邮编"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      fixed="right"\n      label="操作"\n      width="100">\n      <template slot-scope="scope">\n        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>\n        <el-button type="text" size="small">编辑</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick(row) {\n        console.log(row);\n      }\n    },\n\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          province: \'上海\',\n          city: \'普陀区\',\n          address: \'上海市普陀区金沙江路 1518 弄\',\n          zip: 200333\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          province: \'上海\',\n          city: \'普陀区\',\n          address: \'上海市普陀区金沙江路 1517 弄\',\n          zip: 200333\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          province: \'上海\',\n          city: \'普陀区\',\n          address: \'上海市普陀区金沙江路 1519 弄\',\n          zip: 200333\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          province: \'上海\',\n          city: \'普陀区\',\n          address: \'上海市普陀区金沙江路 1516 弄\',\n          zip: 200333\n        }]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("横纵内容过多时，可选择固定列和表头。")]),n("demo-block",[n("div",[n("p",[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("<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=\"日期\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"province\"\n      label=\"省份\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"市区\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"邮编\"\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: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("当数据量动态变化时，可以为 Table 设置一个最大高度。")]),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("max-height")]),e._v("属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。")])]),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=\"日期\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"province\"\n      label=\"省份\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"市区\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"邮编\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"操作\"\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          移除\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: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。")]),n("demo-block",[n("div",[n("p",[e._v("只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。")])]),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=\"日期\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"配送信息\">\n      <el-table-column\n        prop=\"name\"\n        label=\"姓名\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"地址\">\n        <el-table-column\n          prop=\"province\"\n          label=\"省份\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"市区\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"地址\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"邮编\"\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: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("选择单行数据时使用色块表示。")]),n("demo-block",[n("div",[n("p",[e._v("Table 组件提供了单选的支持，只需要配置"),n("code",[e._v("highlight-current-row")]),e._v("属性即可实现单选。之后由"),n("code",[e._v("current-change")]),e._v("事件来管理选中时触发的事件，它会传入"),n("code",[e._v("currentRow")]),e._v("，"),n("code",[e._v("oldCurrentRow")]),e._v("。如果需要显示索引，可以增加一列"),n("code",[e._v("el-table-column")]),e._v("，设置"),n("code",[e._v("type")]),e._v("属性为"),n("code",[e._v("index")]),e._v("即可显示从 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="日期"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="name"\n      label="姓名"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="address"\n      label="地址">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>\n    <el-button @click="setCurrent()">取消选择</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1517 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1519 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1516 弄\'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      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("选择多行数据时使用 Checkbox。")]),n("demo-block",[n("div",[n("p",[e._v("实现多选非常简单: 手动添加一个"),n("code",[e._v("el-table-column")]),e._v("，设"),n("code",[e._v("type")]),e._v("属性为"),n("code",[e._v("selection")]),e._v("即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用"),n("code",[e._v("show-overflow-tooltip")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("，为"),n("code",[e._v("true")]),e._v("时多余的内容会在 hover 时以 tooltip 的形式显示出来。")])]),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    tooltip-effect=\"dark\"\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=\"日期\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\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]])\">切换第二、第三行的选中状态</el-button>\n    <el-button @click=\"toggleSelection()\">取消选择</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: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      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("对表格进行排序，可快速查找或对比数据。")]),n("demo-block",[n("div",[n("p",[e._v("在列中设置"),n("code",[e._v("sortable")]),e._v("属性即可实现以该列为基准的排序，接受一个"),n("code",[e._v("Boolean")]),e._v("，默认为"),n("code",[e._v("false")]),e._v("。可以通过 Table 的"),n("code",[e._v("default-sort")]),e._v("属性设置默认的排序列和排序顺序。可以使用"),n("code",[e._v("sort-method")]),e._v("或者"),n("code",[e._v("sort-by")]),e._v("使用自定义的排序规则。如果需要后端排序，需将"),n("code",[e._v("sortable")]),e._v("设置为"),n("code",[e._v("custom")]),e._v("，同时在 Table 上监听"),n("code",[e._v("sort-change")]),e._v("事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了"),n("code",[e._v("formatter")]),e._v("属性，它用于格式化指定列的值，接受一个"),n("code",[e._v("Function")]),e._v("，会传入两个参数："),n("code",[e._v("row")]),e._v("和"),n("code",[e._v("column")]),e._v("，可以根据自己的需求进行处理。")])]),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    style=\"width: 100%\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    >\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\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-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(13),n("p",[e._v("对表格进行筛选，可快速查找到自己想看的数据。")]),n("demo-block",[n("div",[n("p",[e._v("在列中设置"),n("code",[e._v("filters")]),n("code",[e._v("filter-method")]),e._v("属性即可开启该列的筛选，filters 是一个数组，"),n("code",[e._v("filter-method")]),e._v("是一个方法，它用于决定某些数据是否显示，会传入三个参数："),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("row")]),e._v(" 和 "),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\">清除日期过滤器</el-button>\n  <el-button @click=\"clearFilter\">清除所有过滤器</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\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=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"标签\"\n      width=\"100\"\n      :filters=\"[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === '家' ? '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-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n          tag: '家'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄',\n          tag: '公司'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄',\n          tag: '家'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄',\n          tag: '公司'\n        }]\n      }\n    },\n    methods: {\n      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("自定义列的显示内容，可组合其他组件使用。")]),n("demo-block",[n("div",[n("p",[e._v("通过 "),n("code",[e._v("Scoped slot")]),e._v(" 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。")])]),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="日期"\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="姓名"\n      width="180">\n      <template slot-scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>姓名: {{ scope.row.name }}</p>\n          <p>住址: {{ 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 label="操作">\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">删除</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-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1517 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1519 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1516 弄\'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。")]),n("demo-block",[n("div",[n("p",[e._v('通过设置 type="expand" 和 '),n("code",[e._v("Scoped slot")]),e._v(" 可以开启展开行功能，"),n("code",[e._v("el-table-column")]),e._v(" 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 "),n("code",[e._v("Scoped slot")]),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\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <el-form label-position=\"left\" inline class=\"demo-table-expand\">\n          <el-form-item label=\"商品名称\">\n            <span>{{ props.row.name }}</span>\n          </el-form-item>\n          <el-form-item label=\"所属店铺\">\n            <span>{{ props.row.shop }}</span>\n          </el-form-item>\n          <el-form-item label=\"商品 ID\">\n            <span>{{ props.row.id }}</span>\n          </el-form-item>\n          <el-form-item label=\"店铺 ID\">\n            <span>{{ props.row.shopId }}</span>\n          </el-form-item>\n          <el-form-item label=\"商品分类\">\n            <span>{{ props.row.category }}</span>\n          </el-form-item>\n          <el-form-item label=\"店铺地址\">\n            <span>{{ props.row.address }}</span>\n          </el-form-item>\n          <el-form-item label=\"商品描述\">\n            <span>{{ props.row.desc }}</span>\n          </el-form-item>\n        </el-form>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"商品 ID\"\n      prop=\"id\">\n    </el-table-column>\n    <el-table-column\n      label=\"商品名称\"\n      prop=\"name\">\n    </el-table-column>\n    <el-table-column\n      label=\"描述\"\n      prop=\"desc\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .demo-table-expand {\n    font-size: 0;\n  }\n  .demo-table-expand label {\n    width: 90px;\n    color: #99a9bf;\n  }\n  .demo-table-expand .el-form-item {\n    margin-right: 0;\n    margin-bottom: 0;\n    width: 50%;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: '12987122',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987123',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987125',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987126',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(16),n("demo-block",[n("div",[n("p",[e._v("支持树类型的数据的显示。当 row 中包含 "),n("code",[e._v("children")]),e._v(" 字段时，被视为树形数据。渲染树形数据时，必须要指定 "),n("code",[e._v("row-key")]),e._v("。支持子节点数据异步加载。设置 Table 的 "),n("code",[e._v("lazy")]),e._v(" 属性为 true 与加载函数 "),n("code",[e._v("load")]),e._v(" 。通过指定 row 中的 "),n("code",[e._v("hasChildren")]),e._v(" 字段来指定哪些行是包含子节点。"),n("code",[e._v("children")]),e._v(" 与 "),n("code",[e._v("hasChildren")]),e._v(" 都可以通过 "),n("code",[e._v("tree-props")]),e._v(" 配置。")])]),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<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    :tree-props=\"{children: 'children', hasChildren: 'hasChildren'}\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\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=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\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: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄',\n          children: [{\n              id: 31,\n              date: '2016-05-01',\n              name: '王小虎',\n              address: '上海市普陀区金沙江路 1519 弄'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: '王小虎',\n              address: '上海市普陀区金沙江路 1519 弄'\n          }]\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }],\n        tableData1: [{\n          id: 1,\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄',\n          hasChildren: true\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\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: '王小虎',\n              address: '上海市普陀区金沙江路 1519 弄'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: '王小虎',\n              address: '上海市普陀区金沙江路 1519 弄'\n            }\n          ])\n        }, 1000)\n      }\n    },\n  }\n<\/script>\n")])])])],2),e._m(17),n("p",[e._v("表头支持自定义。")]),n("demo-block",[n("div",[n("p",[e._v("通过设置 "),n("a",{attrs:{href:"https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD"}},[e._v("Scoped slot")]),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  <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="输入关键字搜索"/>\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-02\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1518 弄\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1517 弄\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1519 弄\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'王小虎\',\n          address: \'上海市普陀区金沙江路 1516 弄\'\n        }],\n        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(18),n("p",[e._v("若表格展示的是各类数字，可以在表尾显示各列的合计。")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("show-summary")]),e._v("设置为"),n("code",[e._v("true")]),e._v("就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过"),n("code",[e._v("sum-text")]),e._v("配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用"),n("code",[e._v("summary-method")]),e._v("并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。")])]),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="姓名">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      sortable\n      label="数值 1">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      sortable\n      label="数值 2">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      sortable\n      label="数值 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="姓名">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      label="数值 1（元）">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      label="数值 2（元）">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      label="数值 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: \'王小虎\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'王小虎\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'王小虎\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'王小虎\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'王小虎\',\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] = \'总价\';\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            sums[index] += \' 元\';\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("多行或多列共用一个数据时，可以合并行或列。")]),n("demo-block",[n("div",[n("p",[e._v("通过给"),n("code",[e._v("table")]),e._v("传入"),n("code",[e._v("span-method")]),e._v("方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行"),n("code",[e._v("row")]),e._v("、当前列"),n("code",[e._v("column")]),e._v("、当前行号"),n("code",[e._v("rowIndex")]),e._v("、当前列号"),n("code",[e._v("columnIndex")]),e._v("四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表"),n("code",[e._v("rowspan")]),e._v("，第二个元素代表"),n("code",[e._v("colspan")]),e._v("。 也可以返回一个键名为"),n("code",[e._v("rowspan")]),e._v("和"),n("code",[e._v("colspan")]),e._v("的对象。")])]),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="姓名">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        sortable\n        label="数值 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        sortable\n        label="数值 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        sortable\n        label="数值 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="姓名">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        label="数值 1（元）">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        label="数值 2（元）">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        label="数值 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: \'王小虎\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'王小虎\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'王小虎\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'王小虎\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'王小虎\',\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("通过给 "),n("code",[e._v("type=index")]),e._v(" 的列传入 "),n("code",[e._v("index")]),e._v(" 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 "),n("code",[e._v("0")]),e._v(" 开始）作为参数，返回值将作为索引展示。")])]),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=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\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: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333,\n          tag: '家'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1517 弄',\n          zip: 200333,\n          tag: '公司'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1519 弄',\n          zip: 200333,\n          tag: '家'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1516 弄',\n          zip: 200333,\n          tag: '公司'\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-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table 表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-ban-ma-wen-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ban-ma-wen-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带斑马纹表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-bian-kuang-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-bian-kuang-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带边框表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dai-zhuang-tai-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-zhuang-tai-biao-ge","aria-hidden":"true"}},[this._v("¶")]),this._v(" 带状态表格")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定表头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-lie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定列")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-lie-he-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie-he-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定列和表头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"liu-ti-gao-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#liu-ti-gao-du","aria-hidden":"true"}},[this._v("¶")]),this._v(" 流体高度")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"duo-ji-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-ji-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多级表头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dan-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 单选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 多选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pai-xu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pai-xu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 排序")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shai-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shai-xuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 筛选")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-lie-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-lie-mo-ban","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义列模板")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhan-kai-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhan-kai-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 展开行")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-xing-shu-ju-yu-lan-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-xing-shu-ju-yu-lan-jia-zai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 树形数据与懒加载")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-tou","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义表头")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"biao-wei-he-ji-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-wei-he-ji-xing","aria-hidden":"true"}},[this._v("¶")]),this._v(" 表尾合计行")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"he-bing-xing-huo-lie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#he-bing-xing-huo-lie","aria-hidden":"true"}},[this._v("¶")]),this._v(" 合并行或列")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-suo-yin"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-suo-yin","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义索引")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("自定义 "),t("code",[this._v("type=index")]),this._v(" 列的行号。")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("显示的数据")]),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 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。")]),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 的最大高度。合法的值为数字或者单位为 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("是否为斑马纹 table")]),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("是否带有纵向边框")]),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("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("列的宽度是否自撑开")]),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("是否显示表头")]),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("是否要高亮当前行")]),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，只写属性")]),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("行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。")]),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("行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。")]),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("单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。")]),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("单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。")]),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("表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。")]),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("表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。")]),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("表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。")]),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("表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。")]),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，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问："),n("code",[e._v("user.info.id")]),e._v("，但不支持 "),n("code",[e._v("user.info[0].id")]),e._v("，此种情况请使用 "),n("code",[e._v("Function")]),e._v("。")]),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("空数据时显示的文本内容，也可以通过 "),n("code",[e._v('slot="empty"')]),e._v(" 设置")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("暂无数据")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v("是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效")]),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("可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td")]),n("tr",[n("td",[e._v("default-sort")]),n("td",[e._v("默认的排序列的 prop 和顺序。它的"),n("code",[e._v("prop")]),e._v("属性指定默认的排序的列，"),n("code",[e._v("order")]),e._v("指定默认排序的顺序")]),n("td",[e._v("Object")]),n("td",[n("code",[e._v("order")]),e._v(": ascending, descending")]),n("td",[e._v("如果只指定了"),n("code",[e._v("prop")]),e._v(", 没有指定"),n("code",[e._v("order")]),e._v(", 则默认顺序是ascending")])]),n("tr",[n("td",[e._v("tooltip-effect")]),n("td",[e._v("tooltip "),n("code",[e._v("effect")]),e._v(" 属性")]),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("是否在表尾显示合计行")]),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("合计行第一列的文本")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("合计")])]),n("tr",[n("td",[e._v("summary-method")]),n("td",[e._v("自定义的合计计算方法")]),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("合并行或列的计算方法")]),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("在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行")]),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("展示树形数据时，树节点的缩进")]),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("是否懒加载子节点数据")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("加载子节点数据的函数，lazy 为 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("渲染嵌套数据的配置选项")]),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("事件名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("当用户手动勾选数据行的 Checkbox 时触发的事件")]),n("td",[e._v("selection, row")])]),n("tr",[n("td",[e._v("select-all")]),n("td",[e._v("当用户手动勾选全选 Checkbox 时触发的事件")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("selection-change")]),n("td",[e._v("当选择项发生变化时会触发该事件")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("cell-mouse-enter")]),n("td",[e._v("当单元格 hover 进入时会触发该事件")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-mouse-leave")]),n("td",[e._v("当单元格 hover 退出时会触发该事件")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-click")]),n("td",[e._v("当某个单元格被点击时会触发该事件")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-dblclick")]),n("td",[e._v("当某个单元格被双击击时会触发该事件")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("row-click")]),n("td",[e._v("当某一行被点击时会触发该事件")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-contextmenu")]),n("td",[e._v("当某一行被鼠标右键点击时会触发该事件")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-dblclick")]),n("td",[e._v("当某一行被双击时会触发该事件")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("header-click")]),n("td",[e._v("当某一列的表头被点击时会触发该事件")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("header-contextmenu")]),n("td",[e._v("当某一列的表头被鼠标右键点击时触发该事件")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("sort-change")]),n("td",[e._v("当表格的排序条件发生变化的时候会触发该事件")]),n("td",[e._v("{ column, prop, order }")])]),n("tr",[n("td",[e._v("filter-change")]),n("td",[e._v("当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。")]),n("td",[e._v("filters")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性")]),n("td",[e._v("currentRow, oldCurrentRow")])]),n("tr",[n("td",[e._v("header-dragend")]),n("td",[e._v("当拖动表头改变了列的宽度的时候会触发该事件")]),n("td",[e._v("newWidth, oldWidth, column, event")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 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("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("clearSelection")]),n("td",[e._v("用于多选表格，清空用户的选择")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("toggleRowSelection")]),n("td",[e._v("用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）")]),n("td",[e._v("row, selected")])]),n("tr",[n("td",[e._v("toggleAllSelection")]),n("td",[e._v("用于多选表格，切换所有行的选中状态")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("toggleRowExpansion")]),n("td",[e._v("用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）")]),n("td",[e._v("row, expanded")])]),n("tr",[n("td",[e._v("setCurrentRow")]),n("td",[e._v("用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。")]),n("td",[e._v("row")])]),n("tr",[n("td",[e._v("clearSort")]),n("td",[e._v("用于清空排序条件，数据会恢复成未排序的状态")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearFilter")]),n("td",[e._v("不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件")]),n("td",[e._v("columnKey")])]),n("tr",[n("td",[e._v("doLayout")]),n("td",[e._v("对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort")]),n("td",[e._v("手动对 Table 进行排序。参数"),n("code",[e._v("prop")]),e._v("属性指定排序列，"),n("code",[e._v("order")]),e._v("指定排序顺序。")]),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.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("append")]),t("td",[this._v("插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。")])])])])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("对应列的类型。如果设置了 "),n("code",[e._v("selection")]),e._v(" 则显示多选框；如果设置了 "),n("code",[e._v("index")]),e._v(" 则显示该行的索引（从 1 开始计算）；如果设置了 "),n("code",[e._v("expand")]),e._v(" 则显示为一个可展开的按钮")]),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("如果设置了 "),n("code",[e._v("type=index")]),e._v("，可以通过传递 "),n("code",[e._v("index")]),e._v(" 属性来自定义索引")]),n("td",[e._v("number, Function(index)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("column-key")]),n("td",[e._v("column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("显示的标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prop")]),n("td",[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("对应列的宽度")]),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("对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fixed")]),n("td",[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("列标题 Label 区域渲染使用的 Function")]),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("对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件")]),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("对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 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("指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推")]),n("td",[e._v("String/Array/Function(row, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-orders")]),n("td",[e._v("数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序")]),n("td",[e._v("array")]),n("td",[e._v("数组中的元素需为以下三者之一："),n("code",[e._v("ascending")]),e._v(" 表示升序，"),n("code",[e._v("descending")]),e._v(" 表示降序，"),n("code",[e._v("null")]),e._v(" 表示还原为原始顺序")]),n("td",[e._v("['ascending', 'descending', null]")])]),n("tr",[n("td",[e._v("resizable")]),n("td",[e._v("对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("formatter")]),n("td",[e._v("用来格式化内容")]),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("当内容过长被隐藏时显示 tooltip")]),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("对齐方式")]),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("表头对齐方式，若不设置该项，则使用表格的对齐方式")]),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("列的 className")]),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("当前列标题的自定义类名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("selectable")]),n("td",[e._v("仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选")]),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("仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 "),n("code",[e._v("row-key")]),e._v("）")]),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("数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。")]),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("过滤弹出框的定位")]),n("td",[e._v("String")]),n("td",[e._v("与 Tooltip 的 "),n("code",[e._v("placement")]),e._v(" 属性相同")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-multiple")]),n("td",[e._v("数据过滤的选项是否多选")]),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("数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 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("选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。")]),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.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("自定义列的内容，参数为 { row, column, $index }")])]),t("tr",[t("td",[this._v("header")]),t("td",[this._v("自定义表头的内容. 参数为 { column, $index }")])])])])}],!1,null,null,null);t.default=i.exports},611: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},l={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:"用户管理",name:"first"}},[t._v("用户管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[t._v("配置管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[t._v("角色管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[t._v("定时任务补偿")])],1)]],2)},staticRenderFns:[]},{data:function(){return{activeName:"second"}},methods:{handleClick:function(e,t){console.log(e,t)}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tabs",{attrs:{type:"card"},on:{"tab-click":t.handleClick},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[t._v("用户管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[t._v("配置管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[t._v("角色管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[t._v("定时任务补偿")])],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.$createElement,t=this._self._c||e;return t("div",[t("el-tabs",{attrs:{type:"border-card"}},[t("el-tab-pane",{attrs:{label:"用户管理"}},[this._v("用户管理")]),this._v(" "),t("el-tab-pane",{attrs:{label:"配置管理"}},[this._v("配置管理")]),this._v(" "),t("el-tab-pane",{attrs:{label:"角色管理"}},[this._v("角色管理")]),this._v(" "),t("el-tab-pane",{attrs:{label:"定时任务补偿"}},[this._v("定时任务补偿")])],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:"用户管理"}},[t._v("用户管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"配置管理"}},[t._v("配置管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"角色管理"}},[t._v("角色管理")]),t._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿"}},[t._v("定时任务补偿")])],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(" 我的行程")]),e._v("\n    我的行程\n  ")]),e._v(" "),n("el-tab-pane",{attrs:{label:"消息中心"}},[e._v("消息中心")]),e._v(" "),n("el-tab-pane",{attrs:{label:"角色管理"}},[e._v("角色管理")]),e._v(" "),n("el-tab-pane",{attrs:{label:"定时任务补偿"}},[e._v("定时任务补偿")])],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 l=this.editableTabs,r=this.editableTabsValue;r===a&&l.forEach(function(e,t){if(e.name===a){var n=l[t+1]||l[t-1];n&&(r=n.name)}}),this.editableTabsValue=r,this.editableTabs=l.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 l=this.editableTabs,r=this.editableTabsValue;r===a&&l.forEach(function(e,t){if(e.name===a){var n=l[t+1]||l[t-1];n&&(r=n.name)}}),this.editableTabsValue=r,this.editableTabs=l.filter(function(e){return e.name!==a})}}})}},r=n(0),i=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("分隔内容上有关联但属于不同类别的数据集合。")]),e._m(1),n("p",[e._v("基础的、简洁的标签页。")]),n("demo-block",[n("div",[n("p",[e._v("Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 "),n("code",[e._v("value")]),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-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'second\'\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("选项卡样式的标签页。")]),n("demo-block",[n("div",[n("p",[e._v("只需要设置 "),n("code",[e._v("type")]),e._v(" 属性为 "),n("code",[e._v("card")]),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-tabs v-model="activeName" type="card" @tab-click="handleClick">\n    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n<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("卡片化的标签页。")]),n("demo-block",[n("div",[n("p",[e._v("将"),n("code",[e._v("type")]),e._v("设置为"),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="用户管理">用户管理</el-tab-pane>\n  <el-tab-pane label="配置管理">配置管理</el-tab-pane>\n  <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("标签一共有四个方向的设置 "),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="用户管理">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: \'left\'\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('<el-tabs type="border-card">\n  <el-tab-pane>\n    <span slot="label"><i class="el-icon-date"></i> 我的行程</span>\n    我的行程\n  </el-tab-pane>\n  <el-tab-pane label="消息中心">消息中心</el-tab-pane>\n  <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(8),n("p",[e._v("增减标签页按钮只能在选项卡样式的标签页下使用")]),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    :key=\"item.name\"\n    v-for=\"(item, index) in editableTabs\"\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(9),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(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:"tabs-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-biao-qian-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs 标签页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xuan-xiang-qia-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-xiang-qia-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 选项卡样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"qia-pian-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[this._v("¶")]),this._v(" 卡片化")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wei-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 位置")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("可以通过 "),t("code",[this._v("tab-position")]),this._v(" 设置标签的位置")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-qian-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义标签页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("可以通过具名 "),t("code",[this._v("slot")]),this._v(" 来实现自定义标签页的内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-tai-zeng-jian-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-qian-ye","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态增减标签页")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义增加标签页触发器")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值，选中选项卡的 name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("第一个选项卡的 name")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("风格类型")]),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("标签是否可关闭")]),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("标签是否可增加")]),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("标签是否同时可增加和关闭")]),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("选项卡所在位置")]),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("标签的宽度是否自撑开")]),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("切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。")]),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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("tab-click")]),n("td",[e._v("tab 被选中时触发")]),n("td",[e._v("被选中的标签 tab 实例")])]),n("tr",[n("td",[e._v("tab-remove")]),n("td",[e._v("点击 tab 移除按钮后触发")]),n("td",[e._v("被删除的标签的 name")])]),n("tr",[n("td",[e._v("tab-add")]),n("td",[e._v("点击 tabs 的新增按钮后触发")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("edit")]),n("td",[e._v("点击 tabs 的新增按钮或 tab 被关闭后触发")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("选项卡标题")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),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("与选项卡绑定值 value 对应的标识符，表示选项卡别名")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("标签是否可关闭")]),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("标签是否延迟渲染")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);t.default=i.exports},612: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},l={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("标签一")]),e._v(" "),n("el-tag",{attrs:{type:"success"}},[e._v("标签二")]),e._v(" "),n("el-tag",{attrs:{type:"info"}},[e._v("标签三")]),e._v(" "),n("el-tag",{attrs:{type:"warning"}},[e._v("标签四")]),e._v(" "),n("el-tag",{attrs:{type:"danger"}},[e._v("标签五")])],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:"标签一",type:""},{name:"标签二",type:"success"},{name:"标签三",type:"info"},{name:"标签四",type:"warning"},{name:"标签五",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:"small"},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:["标签一","标签二","标签三"],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.$createElement,t=this._self._c||e;return t("div",[t("el-tag",{attrs:{closable:""}},[this._v("默认标签")]),this._v(" "),t("el-tag",{attrs:{size:"medium",closable:""}},[this._v("中等标签")]),this._v(" "),t("el-tag",{attrs:{size:"small",closable:""}},[this._v("小型标签")]),this._v(" "),t("el-tag",{attrs:{size:"mini",closable:""}},[this._v("超小标签")])],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:"标签一"},{type:"success",label:"标签二"},{type:"info",label:"标签三"},{type:"danger",label:"标签四"},{type:"warning",label:"标签五"}]}}})}},r=n(0),i=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("用于标记和选择。")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("由"),n("code",[e._v("type")]),e._v("属性来选择tag的类型，也可以通过"),n("code",[e._v("color")]),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-tag>标签一</el-tag>\n<el-tag type="success">标签二</el-tag>\n<el-tag type="info">标签三</el-tag>\n<el-tag type="warning">标签四</el-tag>\n<el-tag type="danger">标签五</el-tag>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("设置"),n("code",[e._v("closable")]),e._v("属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置"),n("code",[e._v("disable-transitions")]),e._v("属性，它接受一个"),n("code",[e._v("Boolean")]),e._v("，true 为关闭。")])]),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: '标签一', type: '' },\n          { name: '标签二', type: 'success' },\n          { name: '标签三', type: 'info' },\n          { name: '标签四', type: 'warning' },\n          { name: '标签五', 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="small"\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: [\'标签一\', \'标签二\', \'标签三\'],\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("Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),n("demo-block",[n("div",[n("p",[e._v("额外的尺寸："),n("code",[e._v("medium")]),e._v("、"),n("code",[e._v("small")]),e._v("、"),n("code",[e._v("mini")]),e._v("，通过设置"),n("code",[e._v("size")]),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 closable>默认标签</el-tag>\n<el-tag size="medium" closable>中等标签</el-tag>\n<el-tag size="small" closable>小型标签</el-tag>\n<el-tag size="mini" closable>超小标签</el-tag>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("effect")]),e._v("属性来改变主题，默认为 "),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: \'标签一\' },\n          { type: \'success\', label: \'标签二\' },\n          { type: \'info\', label: \'标签三\' },\n          { type: \'danger\', label: \'标签四\' },\n          { type: \'warning\', label: \'标签五\' }\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-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag-biao-qian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag 标签")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-yi-chu-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-yi-chu-biao-qian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可移除标签")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dong-tai-bian-ji-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-bian-ji-biao-qian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 动态编辑标签")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("动态编辑标签可以通过点击标签关闭按钮后触发的 "),t("code",[this._v("close")]),this._v(" 事件来实现")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bu-tong-zhu-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-zhu-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" 不同主题")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Tag 组件提供了三个不同的主题："),t("code",[this._v("dark")]),this._v("、"),t("code",[this._v("light")]),this._v(" 和 "),t("code",[this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("类型")]),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("是否可关闭")]),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("是否禁用渐变动画")]),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("是否有边框描边")]),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("背景色")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("尺寸")]),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("主题")]),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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("点击 Tag 时触发的事件")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("关闭 Tag 时触发的事件")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},613: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},l={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:"选择时间"},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:"任意时间点"},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:"任意时间点"},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:"起始时间","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:"结束时间","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":"至","start-placeholder":"开始时间","end-placeholder":"结束时间",placeholder:"选择时间范围"},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":"至","start-placeholder":"开始时间","end-placeholder":"结束时间",placeholder:"选择时间范围"},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)]}}})}},r=n(0),i=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("用于选择或输入时间")]),e._m(1),n("p",[e._v("提供几个固定的时间点供用户选择")]),n("demo-block",[n("div",[n("p",[e._v("使用 el-time-select 标签，分别通过"),n("code",[e._v("start")]),e._v("、"),n("code",[e._v("end")]),e._v("和"),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=\"选择时间\">\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("可以选择任意时间")]),n("demo-block",[n("div",[n("p",[e._v("使用 el-time-picker 标签，通过"),n("code",[e._v("selectableRange")]),e._v("限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开"),n("code",[e._v("arrow-control")]),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-time-picker\n    v-model="value1"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="任意时间点">\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="任意时间点">\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("若先选择开始时间，则结束时间内备选项的状态会随之改变")]),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=\"起始时间\"\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=\"结束时间\"\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("可选择任意的时间范围")]),n("demo-block",[n("div",[n("p",[e._v("添加"),n("code",[e._v("is-range")]),e._v("属性即可选择时间范围，同样支持"),n("code",[e._v("arrow-control")]),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-time-picker\n    is-range\n    v-model="value1"\n    range-separator="至"\n    start-placeholder="开始时间"\n    end-placeholder="结束时间"\n    placeholder="选择时间范围">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model="value2"\n    range-separator="至"\n    start-placeholder="开始时间"\n    end-placeholder="结束时间"\n    placeholder="选择时间范围">\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-shi-jian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[this._v("¶")]),this._v(" TimePicker 时间选择器")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定时间点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ren-yi-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 任意时间点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gu-ding-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._v(" 固定时间范围")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ren-yi-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-fan-wei","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),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("完全只读")]),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("禁用")]),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("文本框可输入")]),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("是否显示清除按钮")]),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("输入框尺寸")]),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("非范围选择时的占位内容")]),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("范围选择时开始日期的占位内容")]),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("范围选择时开始日期的占位内容")]),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("是否为时间范围选择，仅对"),n("code",[e._v("<el-time-picker>")]),e._v("有效")]),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("是否使用箭头进行时间选择，仅对"),n("code",[e._v("<el-time-picker>")]),e._v("有效")]),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("对齐方式")]),n("td",[e._v("string")]),n("td",[e._v("left / center / right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("TimePicker 下拉框的类名")]),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("当前时间日期选择器特有的选项参考下表")]),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("选择范围时的分隔符")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象")]),n("td",[e._v("string")]),n("td",[e._v("见"),n("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[e._v("日期格式")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("可选，选择器打开时默认显示的时间")]),n("td",[e._v("Date(TimePicker) / string(TimeSelect)")]),n("td",[e._v("可被"),n("code",[e._v("new Date()")]),e._v("解析(TimePicker) / 可选值(TimeSelect)")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("原生属性")]),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("自定义头部图标的类名")]),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("自定义清空图标的类名")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("start")]),n("td",[e._v("开始时间")]),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("结束时间")]),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("间隔时间")]),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("最小时间，小于该时间的时间段将被禁用")]),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("最大时间，大于该时间的时间段将被禁用")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("selectableRange")]),n("td",[e._v("可选时间段，例如"),n("code",[e._v("'18:30:00 - 20:30:00'")]),e._v("或者传入数组"),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("时间格式化(TimePicker)")]),n("td",[e._v("string")]),n("td",[e._v("小时："),n("code",[e._v("HH")]),e._v("，分："),n("code",[e._v("mm")]),e._v("，秒："),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("事件名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("用户确认选定的值时触发")]),n("td",[e._v("组件绑定值")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("当 input 失去焦点时触发")]),n("td",[e._v("组件实例")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("当 input 获得焦点时触发")]),n("td",[e._v("组件实例")])])])])},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("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("使 input 获取焦点")]),t("td",[this._v("-")])])])])}],!1,null,null,null);t.default=i.exports},614: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},l={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    排序：\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("倒序")]),n._v(" "),a("el-radio",{attrs:{label:!1}},[n._v("正序")])],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:"活动按期开始",timestamp:"2018-04-15"},{content:"通过审核",timestamp:"2018-04-13"},{content:"创建成功",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:"支持使用图标",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"支持自定义颜色",timestamp:"2018-04-03 20:46",color:"#0bbd87"},{content:"支持自定义尺寸",timestamp:"2018-04-03 20:46",size:"large"},{content:"默认样式的节点",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("更新 Github 模板")]),e._v(" "),n("p",[e._v("王小虎 提交于 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("更新 Github 模板")]),e._v(" "),n("p",[e._v("王小虎 提交于 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("更新 Github 模板")]),e._v(" "),n("p",[e._v("王小虎 提交于 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]},{})}},r=n(0),i=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("可视化地呈现时间流信息。")]),e._m(1),n("p",[e._v("Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 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    排序：\n    <el-radio-group v-model="reverse">\n      <el-radio :label="true">倒序</el-radio>\n      <el-radio :label="false">正序</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: \'活动按期开始\',\n          timestamp: \'2018-04-15\'\n        }, {\n          content: \'通过审核\',\n          timestamp: \'2018-04-13\'\n        }, {\n          content: \'创建成功\',\n          timestamp: \'2018-04-11\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("可根据实际场景⾃定义节点尺⼨、颜⾊，或直接使⽤图标。")]),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: '支持使用图标',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: '支持自定义颜色',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: '支持自定义尺寸',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: '默认样式的节点',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("当内容在垂直⽅向上过⾼时，可将时间戳置于内容之上。")]),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>更新 Github 模板</h4>\n        <p>王小虎 提交于 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>更新 Github 模板</h4>\n        <p>王小虎 提交于 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>更新 Github 模板</h4>\n        <p>王小虎 提交于 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-shi-jian-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-shi-jian-xian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline 时间线")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ding-yi-jie-dian-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-yi-jie-dian-yang-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" ⾃定义节点样式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ding-yi-shi-jian-chuo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-yi-shi-jian-chuo","aria-hidden":"true"}},[this._v("¶")]),this._v(" ⾃定义时间戳")])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("reverse")]),n("td",[e._v("指定节点排序方向，默认为正序")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("timestamp")]),n("td",[e._v("时间戳")]),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("是否隐藏时间戳")]),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("时间戳位置")]),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("节点类型")]),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("节点颜色")]),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("节点尺寸")]),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("节点图标")]),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.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Timeline-Item 的内容")])]),t("tr",[t("td",[this._v("dot")]),t("td",[this._v("自定义节点")])])])])}],!1,null,null,null);t.default=i.exports},615: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},l={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 提示文字",placement:"top-start"}},[n("el-button",[e._v("上左")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center 提示文字",placement:"top"}},[n("el-button",[e._v("上边")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right 提示文字",placement:"top-end"}},[n("el-button",[e._v("上右")])],1)],1),e._v(" "),n("div",{staticClass:"left"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top 提示文字",placement:"left-start"}},[n("el-button",[e._v("左上")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center 提示文字",placement:"left"}},[n("el-button",[e._v("左边")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom 提示文字",placement:"left-end"}},[n("el-button",[e._v("左下")])],1)],1),e._v(" "),n("div",{staticClass:"right"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top 提示文字",placement:"right-start"}},[n("el-button",[e._v("右上")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center 提示文字",placement:"right"}},[n("el-button",[e._v("右边")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom 提示文字",placement:"right-end"}},[n("el-button",[e._v("右下")])],1)],1),e._v(" "),n("div",{staticClass:"bottom"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left 提示文字",placement:"bottom-start"}},[n("el-button",[e._v("下左")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center 提示文字",placement:"bottom"}},[n("el-button",[e._v("下边")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right 提示文字",placement:"bottom-end"}},[n("el-button",[e._v("下右")])],1)],1)])])},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[t("el-button",[this._v("Dark")])],1),this._v(" "),t("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[t("el-button",[this._v("Light")])],1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tooltip",{attrs:{placement:"top"}},[t("div",{attrs:{slot:"content"},slot:"content"},[this._v("多行信息"),t("br"),this._v("第二行信息")]),this._v(" "),t("el-button",[this._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:"点击关闭 tooltip 功能",placement:"bottom",effect:"light"}},[n("el-button",{on:{click:function(e){t.disabled=!t.disabled}}},[t._v("点击"+t._s(t.disabled?"开启":"关闭")+" tooltip 功能")])],1)]],2)},staticRenderFns:[]},{data:function(){return{disabled:!1}}})}},r=n(0),i=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("常用于展示鼠标 hover 时的提示信息。")]),e._m(1),n("p",[e._v("在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。")]),n("demo-block",[n("div",[n("p",[e._v("使用"),n("code",[e._v("content")]),e._v("属性来决定"),n("code",[e._v("hover")]),e._v("时的提示信息。由"),n("code",[e._v("placement")]),e._v("属性决定展示效果："),n("code",[e._v("placement")]),e._v("属性值为："),n("code",[e._v("方向-对齐位置")]),e._v("；四个方向："),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("；三种对齐位置："),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v("，默认为空。如"),n("code",[e._v('placement="left-end"')]),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="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">\n      <el-button>上左</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">\n      <el-button>上边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">\n      <el-button>上右</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">\n      <el-button>左上</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">\n      <el-button>左边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">\n      <el-button>左下</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">\n      <el-button>右上</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">\n      <el-button>右边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">\n      <el-button>右下</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">\n      <el-button>下左</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">\n      <el-button>下边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">\n      <el-button>下右</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 60px;\n    }\n\n    .right {\n      float: right;\n      width: 60px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n  }\n</style>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("通过设置"),n("code",[e._v("effect")]),e._v("属性来改变主题，默认为"),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("展示多行文本或者是设置文本内容的格式")]),n("demo-block",[n("div",[n("p",[e._v("用具名 slot 分发"),n("code",[e._v("content")]),e._v("，替代"),n("code",[e._v("tooltip")]),e._v("中的"),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">多行信息<br/>第二行信息</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n')])])])],2),e._m(5),n("p",[e._v("除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：")]),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('<template>\n  <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">点击{{disabled ? \'开启\' : \'关闭\'}} tooltip 功能</el-button>\n  </el-tooltip>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),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:"tooltip-wen-zi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-wen-zi-ti-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip 文字提示")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhu-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" 主题")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Tooltip 组件提供了两个不同的主题："),t("code",[this._v("dark")]),this._v("和"),t("code",[this._v("light")]),this._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"geng-duo-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#geng-duo-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" 更多 Content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"gao-ji-kuo-zhan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gao-ji-kuo-zhan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 高级扩展")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("transition")]),e._v(" 属性可以定制显隐的动画效果，默认为"),n("code",[e._v("fade-in-linear")]),e._v("。\n如果需要关闭 "),n("code",[e._v("tooltip")]),e._v(" 功能，"),n("code",[e._v("disabled")]),e._v(" 属性可以满足这个需求，它接受一个"),n("code",[e._v("Boolean")]),e._v("，设置为"),n("code",[e._v("true")]),e._v("即可。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("事实上，这是基于 "),t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[this._v("Vue-popper")]),this._v(" 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。\n当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("tooltip 内不支持 "),n("code",[e._v("router-link")]),e._v(" 组件，请使用 "),n("code",[e._v("vm.$router.push")]),e._v(" 代替。")]),n("p",[e._v("tooltip 内不支持 disabled form 元素，参考"),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[e._v("MDN")]),e._v("，请在 disabled form 元素外层添加一层包裹元素。")])])},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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("effect")]),n("td",[e._v("默认提供的主题")]),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("显示的内容，也可以通过 "),n("code",[e._v("slot#content")]),e._v(" 传入 DOM")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("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("状态是否可见")]),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("Tooltip 是否可用")]),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("出现位置的偏移量")]),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("定义渐变动画")]),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("是否显示 Tooltip 箭头，更多参数可见"),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",[n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" 的参数")]),n("td",[e._v("Object")]),n("td",[e._v("参考 "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(" 文档")]),n("td",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("延迟出现，单位毫秒")]),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("手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效")]),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("为 Tooltip 的 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("鼠标是否可进入到 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("Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[e._v("Tooltip 组件的 "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"}},[e._v("tabindex")])]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])}],!1,null,null,null);t.default=i.exports},616: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},l={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:"备选项 "+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":"请输入城市拼音",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=["shanghai","beijing","guangzhou","shenzhen","nanjing","xian","chengdu"],["上海","北京","广州","深圳","南京","西安","成都"].forEach(function(e,t){n.push({label:e,key:t,pinyin:a[t]})}),n),value:[],filterMethod:function(e,t){return-1<t.pinyin.indexOf(e)}}}}),"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("使用 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":["到左边","到右边"],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("操作")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("操作")])],1)],1),n._v(" "),a("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[n._v("使用 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":["到左边","到右边"],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("操作")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("操作")])],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:"备选项 "+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:"备选项 "+n,disabled:n%4==0});return t}(),value:[]}}})}},r=n(0),i=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),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Transfer 的数据通过 "),n("code",[e._v("data")]),e._v(" 属性传入。数据需要是一个对象数组，每个对象有以下属性："),n("code",[e._v("key")]),e._v(" 为数据的唯一性标识，"),n("code",[e._v("label")]),e._v(" 为显示文本，"),n("code",[e._v("disabled")]),e._v(" 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 "),n("code",[e._v("v-model")]),e._v(" 的变量，值为数据项的 "),n("code",[e._v("key")]),e._v(" 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 "),n("code",[e._v("v-model")]),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-transfer v-model="value" :data="data"></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: `备选项 ${ 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("在数据很多的情况下，可以对数据进行搜索和过滤。")]),n("demo-block",[n("div",[n("p",[e._v("设置 "),n("code",[e._v("filterable")]),e._v(" 为 "),n("code",[e._v("true")]),e._v(" 即可开启搜索模式。默认情况下，若数据项的 "),n("code",[e._v("label")]),e._v(" 属性包含搜索关键字，则会在搜索结果中显示。你也可以使用 "),n("code",[e._v("filter-method")]),e._v(" 定义自己的搜索逻辑。"),n("code",[e._v("filter-method")]),e._v(" 接收一个方法，当搜索关键字变化时，会将当前的关键字和每个数据项传给该方法。若方法返回 "),n("code",[e._v("true")]),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-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"请输入城市拼音\"\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 cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];\n        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];\n        cities.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            pinyin: pinyin[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: [],\n        filterMethod(query, item) {\n          return item.pinyin.indexOf(query) > -1;\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。")]),n("demo-block",[n("div",[n("p",[e._v("可以使用 "),n("code",[e._v("titles")]),e._v("、"),n("code",[e._v("button-texts")]),e._v("、"),n("code",[e._v("render-content")]),e._v(" 和 "),n("code",[e._v("format")]),e._v(" 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表顶部的勾选状态文案进行自定义。数据项的渲染还可以使用 "),n("code",[e._v("scoped-slot")]),e._v(" 进行自定义。对于列表底部的内容区，提供了两个具名 slot："),n("code",[e._v("left-footer")]),e._v(" 和 "),n("code",[e._v("right-footer")]),e._v("。此外，如果希望某些数据项在初始化时就被勾选，可以使用 "),n("code",[e._v("left-default-checked")]),e._v(" 和 "),n("code",[e._v("right-default-checked")]),e._v(" 属性。最后，本例还展示了 "),n("code",[e._v("change")]),e._v(" 事件的用法。注意：由于 jsfiddle 不支持 JSX 语法，所以使用 "),n("code",[e._v("render-content")]),e._v(" 自定义数据项的例子在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")])]),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">使用 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="[\'到左边\', \'到右边\']"\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">操作</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>\n    </el-transfer>\n  </div>\n  <p style="text-align: center; margin: 50px 0 20px">使用 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="[\'到左边\', \'到右边\']"\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">操作</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>\n    </el-transfer>\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: `备选项 ${ 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("本例中的数据源没有 "),n("code",[e._v("key")]),e._v(" 和 "),n("code",[e._v("label")]),e._v(" 字段，在功能上与它们相同的字段名为 "),n("code",[e._v("value")]),e._v(" 和 "),n("code",[e._v("desc")]),e._v("。因此可以使用"),n("code",[e._v("props")]),e._v(" 属性为 "),n("code",[e._v("key")]),e._v(" 和 "),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: `备选项 ${ 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-chuan-suo-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer-chuan-suo-kuang","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer 穿梭框")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-ding-yi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可自定义")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-ju-xiang-shu-xing-bie-ming"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-ju-xiang-shu-xing-bie-ming","aria-hidden":"true"}},[this._v("¶")]),this._v(" 数据项属性别名")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("默认情况下，Transfer 仅能识别数据项中的 "),n("code",[e._v("key")]),e._v("、"),n("code",[e._v("label")]),e._v(" 和 "),n("code",[e._v("disabled")]),e._v(" 字段。如果你的数据的字段名不同，可以使用 "),n("code",[e._v("props")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("绑定值")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("Transfer 的数据源")]),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("是否可搜索")]),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("搜索框占位符")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("请输入搜索内容")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("自定义搜索方法")]),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("右侧列表元素的排序策略：若为 "),n("code",[e._v("original")]),e._v("，则保持与数据源相同的顺序；若为 "),n("code",[e._v("push")]),e._v("，则新加入的元素排在最后；若为 "),n("code",[e._v("unshift")]),e._v("，则新加入的元素排在最前")]),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("自定义列表标题")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['列表 1', '列表 2']")])]),n("tr",[n("td",[e._v("button-texts")]),n("td",[e._v("自定义按钮文案")]),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("自定义数据项渲染函数")]),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("列表顶部勾选状态文案")]),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("数据源的字段别名")]),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 数组")]),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 数组")]),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.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("left-footer")]),t("td",[this._v("左侧列表底部的内容")])]),t("tr",[t("td",[this._v("right-footer")]),t("td",[this._v("右侧列表底部的内容")])])])])},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.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("自定义数据项的内容，参数为 { 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.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("方法名")]),t("th",[this._v("说明")]),t("th",[this._v("参数")])])]),t("tbody",[t("tr",[t("td",[this._v("clearQuery")]),t("td",[this._v("清空某个面板的搜索关键词")]),t("td",[this._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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("右侧列表元素变化时触发")]),n("td",[e._v("当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组")])]),n("tr",[n("td",[e._v("left-check-change")]),n("td",[e._v("左侧列表元素被用户选中 / 取消选中时触发")]),n("td",[e._v("当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组")])]),n("tr",[n("td",[e._v("right-check-change")]),n("td",[e._v("右侧列表元素被用户选中 / 取消选中时触发")]),n("td",[e._v("当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组")])])])])}],!1,null,null,null);t.default=i.exports},617: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},l={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}}})}},r=n(0),i=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),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("提供 "),n("code",[e._v("el-fade-in-linear")]),e._v(" 和 "),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",[e._v("提供 "),n("code",[e._v("el-zoom-in-center")]),e._v("，"),n("code",[e._v("el-zoom-in-top")]),e._v(" 和 "),n("code",[e._v("el-zoom-in-bottom")]),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>\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:"nei-zhi-guo-du-dong-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nei-zhi-guo-du-dong-hua","aria-hidden":"true"}},[this._v("¶")]),this._v(" 内置过渡动画")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Element 内应用在部分组件的过渡动画，你也可以直接使用。在使用之前请阅读 "),t("a",{attrs:{href:"https://cn.vuejs.org/v2/api/#transition"}},[this._v("transition 组件文档")]),this._v(" 。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fade-dan-ru-dan-chu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade-dan-ru-dan-chu","aria-hidden":"true"}},[this._v("¶")]),this._v(" fade 淡入淡出")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zoom-suo-fang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom-suo-fang","aria-hidden":"true"}},[this._v("¶")]),this._v(" zoom 缩放")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse-zhan-kai-zhe-die"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhan-kai-zhe-die","aria-hidden":"true"}},[this._v("¶")]),this._v(" collapse 展开折叠")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("使用 "),t("code",[this._v("el-collapse-transition")]),this._v(" 组件实现折叠展开效果。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"an-xu-yin-ru"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru","aria-hidden":"true"}},[this._v("¶")]),this._v(" 按需引入")])},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=i.exports},618:function(e,t,n){"use strict";n.r(t);var a,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-tree",{attrs:{data:this.data,props:this.defaultProps},on:{"node-click":this.handleNodeClick}})],1)},staticRenderFns:[]},{data:function(){return{data:[{label:"一级 1",children:[{label:"二级 1-1",children:[{label:"三级 1-1-1"}]}]},{label:"一级 2",children:[{label:"二级 2-1",children:[{label:"三级 2-1-1"}]},{label:"二级 2-2",children:[{label:"三级 2-2-1"}]}]},{label:"一级 3",children:[{label:"二级 3-1",children:[{label:"三级 3-1-1"}]},{label:"二级 3-2",children:[{label:"三级 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}}),"element-demo1":l({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":""},on:{"check-change":this.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:"region1"},{name:"region2"}]):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":l({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":l({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:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}],defaultProps:{children:"children",label:"label"}}}}),"element-demo4":l({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]}})],1)},staticRenderFns:[]},{data:function(){return{data:[{id:1,label:"一级 2",children:[{id:3,label:"二级 2-1",children:[{id:4,label:"三级 3-1-1"},{id:5,label:"三级 3-1-2",disabled:!0}]},{id:2,label:"二级 2-2",disabled:!0,children:[{id:6,label:"三级 3-2-1"},{id:7,label:"三级 3-2-2",disabled:!0}]}]}],defaultProps:{children:"children",label:"label"}}}}),"element-demo5":l({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("通过 node 获取")]),e._v(" "),n("el-button",{on:{click:e.getCheckedKeys}},[e._v("通过 key 获取")]),e._v(" "),n("el-button",{on:{click:e.setCheckedNodes}},[e._v("通过 node 设置")]),e._v(" "),n("el-button",{on:{click:e.setCheckedKeys}},[e._v("通过 key 设置")]),e._v(" "),n("el-button",{on:{click:e.resetChecked}},[e._v("清空")])],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:"二级 2-1"},{id:9,label:"三级 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])}},data:function(){return{data:[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}],defaultProps:{children:"children",label:"label"}}}}),"element-demo6":(a=1e3,l({render:function(){var a=this,e=a.$createElement,l=a._self._c||e;return l("div",[l("div",{staticClass:"custom-tree-container"},[l("div",{staticClass:"block"},[l("p",[a._v("使用 render-content")]),a._v(" "),l("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(" "),l("div",{staticClass:"block"},[l("p",[a._v("使用 scoped slot")]),a._v(" "),l("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 l("span",{staticClass:"custom-tree-node"},[l("span",[a._v(a._s(t.label))]),a._v(" "),l("span",[l("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.append(n)}}},[a._v("\n            Append\n          ")]),a._v(" "),l("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:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 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,l=a.findIndex(function(e){return e.id===t.id});a.splice(l,1)},renderContent:function(e,t){var n=this,a=t.node,l=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(l)}}},["Append"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.remove(a,l)}}},["Delete"])])])}}})),"element-demo7":l({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"输入关键字进行过滤"},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:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}],defaultProps:{children:"children",label:"label"}}}}),"element-demo8":l({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,props:this.defaultProps,accordion:""},on:{"node-click":this.handleNodeClick}})],1)},staticRenderFns:[]},{data:function(){return{data:[{label:"一级 1",children:[{label:"二级 1-1",children:[{label:"三级 1-1-1"}]}]},{label:"一级 2",children:[{label:"二级 2-1",children:[{label:"三级 2-1-1"}]},{label:"二级 2-2",children:[{label:"三级 2-2-1"}]}]},{label:"一级 3",children:[{label:"二级 3-1",children:[{label:"三级 3-1-1"}]},{label:"二级 3-2",children:[{label:"三级 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}}),"element-demo9":l({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:[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2",children:[{id:11,label:"三级 3-2-1"},{id:12,label:"三级 3-2-2"},{id:13,label:"三级 3-2-3"}]}]}],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"二级 3-1"!==t.data.label||"inner"!==n},allowDrag:function(e){return-1===e.data.label.indexOf("三级 3-2-2")}}})}},i=n(0),s=Object(i.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("用清晰的层级结构展示信息，可展开或折叠。")]),e._m(1),n("p",[e._v("基础的树形结构展示。")]),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: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 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("适用于需要选择层级时使用。")]),n("demo-block",[n("div",[n("p",[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-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: 'region1' }, { name: 'region2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。")])]),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("可将 Tree 的某些节点设置为默认展开或默认选中")]),n("demo-block",[n("div",[n("p",[e._v("分别通过"),n("code",[e._v("default-expanded-keys")]),e._v("和"),n("code",[e._v("default-checked-keys")]),e._v("设置默认展开和默认选中的节点。需要注意的是，此时必须设置"),n("code",[e._v("node-key")]),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-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: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("可将 Tree 的某些节点设置为禁用状态")]),n("demo-block",[n("div",[n("p",[e._v("通过"),n("code",[e._v("disabled")]),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-tree\n  :data=\"data\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: '一级 2',\n          children: [{\n            id: 3,\n            label: '二级 2-1',\n            children: [{\n              id: 4,\n              label: '三级 3-1-1'\n            }, {\n              id: 5,\n              label: '三级 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: '二级 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: '三级 3-2-1'\n            }, {\n              id: 7,\n              label: '三级 3-2-2',\n              disabled: true\n            }]\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("本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置"),n("code",[e._v("node-key")]),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-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\">通过 node 获取</el-button>\n  <el-button @click=\"getCheckedKeys\">通过 key 获取</el-button>\n  <el-button @click=\"setCheckedNodes\">通过 node 设置</el-button>\n  <el-button @click=\"setCheckedKeys\">通过 key 设置</el-button>\n  <el-button @click=\"resetChecked\">清空</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: '二级 2-1'\n        }, {\n          id: 9,\n          label: '三级 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: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 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("节点的内容支持自定义，可以在节点区添加按钮或图标等内容")]),n("demo-block",[n("div",[n("p",[e._v("可以通过两种方法进行树节点内容的自定义："),n("code",[e._v("render-content")]),e._v("和 scoped slot。使用"),n("code",[e._v("render-content")]),e._v("指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数"),n("code",[e._v("node")]),e._v("和"),n("code",[e._v("data")]),e._v("，分别表示当前节点的 Node 对象和当前节点的数据。注意：由于 jsfiddle 不支持 JSX 语法，所以"),n("code",[e._v("render-content")]),e._v("示例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")])]),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>使用 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>使用 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: \'一级 1\',\n        children: [{\n          id: 4,\n          label: \'二级 1-1\',\n          children: [{\n            id: 9,\n            label: \'三级 1-1-1\'\n          }, {\n            id: 10,\n            label: \'三级 1-1-2\'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: \'一级 2\',\n        children: [{\n          id: 5,\n          label: \'二级 2-1\'\n        }, {\n          id: 6,\n          label: \'二级 2-2\'\n        }]\n      }, {\n        id: 3,\n        label: \'一级 3\',\n        children: [{\n          id: 7,\n          label: \'二级 3-1\'\n        }, {\n          id: 8,\n          label: \'二级 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("通过关键字过滤树节点")]),n("demo-block",[n("div",[n("p",[e._v("在需要对节点进行过滤时，调用 Tree 实例的"),n("code",[e._v("filter")]),e._v("方法，参数为关键字。需要注意的是，此时需要设置"),n("code",[e._v("filter-node-method")]),e._v("，值为过滤函数。")])]),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=\"输入关键字进行过滤\"\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: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 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("对于同一级的节点，每次只能展开一个")]),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: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 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),n("p",[e._v("通过 draggable 属性可让节点变为可拖拽。")]),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          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2',\n            children: [{\n             id: 11,\n              label: '三级 3-2-1'\n            }, {\n              id: 12,\n              label: '三级 3-2-2'\n            }, {\n              id: 13,\n              label: '三级 3-2-3'\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 === '二级 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('三级 3-2-2') === -1;\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)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tree-shu-xing-kong-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-shu-xing-kong-jian","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree 树形控件")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 可选择")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"lan-jia-zai-zi-ding-yi-xie-zi-jie-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lan-jia-zai-zi-ding-yi-xie-zi-jie-dian","aria-hidden":"true"}},[this._v("¶")]),this._v(" 懒加载自定义叶子节点")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mo-ren-zhan-kai-he-mo-ren-xuan-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhan-kai-he-mo-ren-xuan-zhong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 默认展开和默认选中")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shu-jie-dian-de-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-jie-dian-de-xuan-ze","aria-hidden":"true"}},[this._v("¶")]),this._v(" 树节点的选择")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ding-yi-jie-dian-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-jie-dian-nei-rong","aria-hidden":"true"}},[this._v("¶")]),this._v(" 自定义节点内容")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"jie-dian-guo-lu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-dian-guo-lu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 节点过滤")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shou-feng-qin-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-mo-shi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 手风琴模式")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ke-tuo-zhuai-jie-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-tuo-zhuai-jie-dian","aria-hidden":"true"}},[this._v("¶")]),this._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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("展示数据")]),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("内容为空的时候展示的文本")]),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("每个树节点用来作为唯一标识的属性，整棵树应该是唯一的")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("配置选项，具体看下表")]),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("是否在第一次展开某个树节点后才渲染其子节点")]),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("加载子树数据的方法，仅当 lazy 属性为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("树节点的内容区的渲染 Function")]),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("是否高亮当前选中节点，默认值是 false。")]),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("是否默认展开所有节点")]),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("是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。")]),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("是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。")]),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("展开子节点的时候是否自动展开父节点")]),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("默认展开的节点的 key 的数组")]),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("节点是否可被选择")]),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("在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false")]),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("默认勾选的节点的 key 的数组")]),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("当前选中的节点")]),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("对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏")]),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("是否每次只打开一个同级树节点展开")]),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("相邻级节点间的水平缩进，单位为像素")]),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("自定义树节点的图标")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("是否懒加载子节点，需与 load 方法结合使用")]),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("是否开启拖拽节点功能")]),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("判断节点能否被拖拽")]),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("拖拽时判定目标节点能否被放置。"),n("code",[e._v("type")]),e._v(" 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后")]),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("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("指定节点标签为节点对象的某个属性值")]),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("指定子树为节点对象的某个属性值")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("指定节点选择框是否禁用为节点对象的某个属性值")]),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("指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效")]),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:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[this._v("¶")]),this._v(" 方法")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Tree")]),this._v(" 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。\n"),t("code",[this._v("Tree")]),this._v(" 拥有如下方法：")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("filter")]),n("td",[e._v("对树节点进行筛选操作")]),n("td",[e._v("接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数")])]),n("tr",[n("td",[e._v("updateKeyChildren")]),n("td",[e._v("通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组")])]),n("tr",[n("td",[e._v("getCheckedNodes")]),n("td",[e._v("若节点可被选择（即 "),n("code",[e._v("show-checkbox")]),e._v(" 为 "),n("code",[e._v("true")]),e._v("），则返回目前被选中的节点所组成的数组")]),n("td",[e._v("(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 "),n("code",[e._v("false")]),e._v(" 2. 是否包含半选节点，默认值为 "),n("code",[e._v("false")])])]),n("tr",[n("td",[e._v("setCheckedNodes")]),n("td",[e._v("设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(nodes) 接收勾选节点数据的数组")])]),n("tr",[n("td",[e._v("getCheckedKeys")]),n("td",[e._v("若节点可被选择（即 "),n("code",[e._v("show-checkbox")]),e._v(" 为 "),n("code",[e._v("true")]),e._v("），则返回目前被选中的节点的 key 所组成的数组")]),n("td",[e._v("(leafOnly) 接收一个 boolean 类型的参数，若为 "),n("code",[e._v("true")]),e._v(" 则仅返回被选中的叶子节点的 keys，默认值为 "),n("code",[e._v("false")])])]),n("tr",[n("td",[e._v("setCheckedKeys")]),n("td",[e._v("通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 "),n("code",[e._v("true")]),e._v(" 则仅设置叶子节点的选中状态，默认值为 "),n("code",[e._v("false")])])]),n("tr",[n("td",[e._v("setChecked")]),n("td",[e._v("通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中  3. boolean 类型，是否设置子节点 ，默认为 false")])]),n("tr",[n("td",[e._v("getHalfCheckedNodes")]),n("td",[e._v("若节点可被选择（即 "),n("code",[e._v("show-checkbox")]),e._v(" 为 "),n("code",[e._v("true")]),e._v("），则返回目前半选中的节点所组成的数组")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getHalfCheckedKeys")]),n("td",[e._v("若节点可被选择（即 "),n("code",[e._v("show-checkbox")]),e._v(" 为 "),n("code",[e._v("true")]),e._v("），则返回目前半选中的节点的 key 所组成的数组")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getCurrentKey")]),n("td",[e._v("获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("getCurrentNode")]),n("td",[e._v("获取当前被选中节点的 data，若没有节点被选中则返回 null")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("setCurrentKey")]),n("td",[e._v("通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(key) 待被选节点的 key，若为 null 则取消当前高亮的节点")])]),n("tr",[n("td",[e._v("setCurrentNode")]),n("td",[e._v("通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(node) 待被选节点的 node")])]),n("tr",[n("td",[e._v("getNode")]),n("td",[e._v("根据 data 或者 key 拿到 Tree 组件中的 node")]),n("td",[e._v("(data) 要获得 node 的 key 或者 data")])]),n("tr",[n("td",[e._v("remove")]),n("td",[e._v("删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性")]),n("td",[e._v("(data) 要删除的节点的 data 或者 node")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("为 Tree 中的一个节点追加一个子节点")]),n("td",[e._v("(data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node")])]),n("tr",[n("td",[e._v("insertBefore")]),n("td",[e._v("为 Tree 的一个节点的前面增加一个节点")]),n("td",[e._v("(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node")])]),n("tr",[n("td",[e._v("insertAfter")]),n("td",[e._v("为 Tree 的一个节点的后面增加一个节点")]),n("td",[e._v("(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 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("事件名称")]),n("th",[e._v("说明")]),n("th",[e._v("回调参数")])])]),n("tbody",[n("tr",[n("td",[e._v("node-click")]),n("td",[e._v("节点被点击时的回调")]),n("td",[e._v("共三个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),n("tr",[n("td",[e._v("node-contextmenu")]),n("td",[e._v("当某一节点被鼠标右键点击时会触发该事件")]),n("td",[e._v("共四个参数，依次为：event、传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),n("tr",[n("td",[e._v("check-change")]),n("td",[e._v("节点选中状态发生变化时的回调")]),n("td",[e._v("共三个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点")])]),n("tr",[n("td",[e._v("check")]),n("td",[e._v("当复选框被点击的时候触发")]),n("td",[e._v("共两个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("当前选中节点变化时触发的事件")]),n("td",[e._v("共两个参数，依次为：当前节点的数据，当前节点的 Node 对象")])]),n("tr",[n("td",[e._v("node-expand")]),n("td",[e._v("节点被展开时触发的事件")]),n("td",[e._v("共三个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身")])]),n("tr",[n("td",[e._v("node-collapse")]),n("td",[e._v("节点被关闭时触发的事件")]),n("td",[e._v("共三个参数，依次为：传递给 "),n("code",[e._v("data")]),e._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身")])]),n("tr",[n("td",[e._v("node-drag-start")]),n("td",[e._v("节点开始拖拽时触发的事件")]),n("td",[e._v("共两个参数，依次为：被拖拽节点对应的 Node、event")])]),n("tr",[n("td",[e._v("node-drag-enter")]),n("td",[e._v("拖拽进入其他节点时触发的事件")]),n("td",[e._v("共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event")])]),n("tr",[n("td",[e._v("node-drag-leave")]),n("td",[e._v("拖拽离开某个节点时触发的事件")]),n("td",[e._v("共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event")])]),n("tr",[n("td",[e._v("node-drag-over")]),n("td",[e._v("在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）")]),n("td",[e._v("共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event")])]),n("tr",[n("td",[e._v("node-drag-end")]),n("td",[e._v("拖拽结束时（可能未成功）触发的事件")]),n("td",[e._v("共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event")])]),n("tr",[n("td",[e._v("node-drop")]),n("td",[e._v("拖拽成功完成时触发的事件")]),n("td",[e._v("共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（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.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("自定义树节点的内容，参数为 { node, data }")])])])])}],!1,null,null,null);t.default=s.exports},619: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-zi-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#typography-zi-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" Typography 字体")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ti","aria-hidden":"true"}},[this._v("¶")]),this._v(" 字体")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:a(416),alt:""}}),t("img",{attrs:{src:a(417),alt:""}}),t("img",{attrs:{src:a(418),alt:""}}),t("img",{attrs:{src:a(419),alt:""}}),t("img",{attrs:{src:a(420),alt:""}}),t("img",{attrs:{src:a(421),alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zi-hao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-hao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 字号")])},function(){var e=this.$createElement,t=this._self._c||e;return t("tr",[t("td",[this._v("层级")]),t("td",[this._v("字体大小")]),t("td",{staticClass:"color-dark-light"},[this._v("举例")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"xing-gao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xing-gao","aria-hidden":"true"}},[this._v("¶")]),this._v(" 行高")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("img",{staticClass:"lineH-left",attrs:{src:a(422)}}),n("ul",{staticClass:"lineH-right"},[n("li",[e._v("line-height:1 "),n("span",[e._v("无行高")])]),n("li",[e._v("line-height:1.3 "),n("span",[e._v("紧凑")])]),n("li",[e._v("line-height:1.5 "),n("span",[e._v("常规")])]),n("li",[e._v("line-height:1.7 "),n("span",[e._v("宽松")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-family-dai-ma"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family-dai-ma","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')])])}],l=a(24),r=a(25),i=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],s={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"},o={created:function(){l.a.$on(r.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;i.forEach(function(e){var t=e.replace("$--","").replace(/-/g,"_");n[e]?a[t]=n[e]:a[t]=s[t]})}}}},d=a(0),c=Object(d.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("我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。")]),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("辅助文字")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_small)+" Extra Small")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_small}},[n("td",[e._v("正文（小）")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_small)+" Small")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_base}},[n("td",[e._v("正文")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_base)+" Base")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_medium}},[n("td",[e._v("小标题")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_medium)+" Medium")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_large}},[n("td",[e._v("标题")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_large)+" large")]),n("td",[e._v("用 Element 快速搭建页面")])]),n("tr",{style:{fontSize:e.font_size_extra_large}},[n("td",[e._v("主标题")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_large)+" Extra large")]),n("td",[e._v("用 Element 快速搭建页面")])])])]),e._m(5),e._m(6),e._m(7),e._m(8)])},n,!1,null,null,null);t.default=c.exports},620: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},l={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("点击上传")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过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("当前限制选择 3 个文件，本次选择了 "+e.length+" 个文件，共选择了 "+(e.length+t.length)+" 个文件")},beforeRemove:function(e,t){return this.$confirm("确定移除 "+e.name+"？")}}}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":this.handleAvatarSuccess,"before-upload":this.beforeAvatarUpload}},[this.imageUrl?t("img",{staticClass:"avatar",attrs:{src:this.imageUrl}}):t("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("上传头像图片只能是 JPG 格式!"),n||this.$message.error("上传头像图片大小不能超过 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.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":this.handlePreview,"on-remove":this.handleRemove,"file-list":this.fileList,"list-type":"picture"}},[t("el-button",{attrs:{size:"small",type:"primary"}},[this._v("点击上传")]),this._v(" "),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[this._v("只能上传jpg/png文件，且不超过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.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":this.handleChange,"file-list":this.fileList}},[t("el-button",{attrs:{size:"small",type:"primary"}},[this._v("点击上传")]),this._v(" "),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[this._v("只能上传jpg/png文件，且不超过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.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/",multiple:""}},[t("i",{staticClass:"el-icon-upload"}),this._v(" "),t("div",{staticClass:"el-upload__text"},[this._v("将文件拖到此处，或"),t("em",[this._v("点击上传")])]),this._v(" "),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[this._v("只能上传jpg/png文件，且不超过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/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,"auto-upload":!1}},[n("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[e._v("选取文件")]),e._v(" "),n("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:e.submitUpload}},[e._v("上传到服务器")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("只能上传jpg/png文件，且不超过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:{submitUpload:function(){this.$refs.upload.submit()},handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}})}},r=n(0),i=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("通过点击或者拖拽上传文件")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置"),n("code",[e._v("limit")]),e._v("和"),n("code",[e._v("on-exceed")]),e._v("来限制上传文件的个数和定义超出限制时的行为。可通过设置"),n("code",[e._v("before-remove")]),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-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">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过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(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);\n      },\n      beforeRemove(file, fileList) {\n        return this.$confirm(`确定移除 ${ 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(\'上传头像图片只能是 JPG 格式!\');\n        }\n        if (!isLt2M) {\n          this.$message.error(\'上传头像图片大小不能超过 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">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过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">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过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("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  multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>\n  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过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  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过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      submitUpload() {\n        this.$refs.upload.submit();\n      },\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(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-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" Upload 上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dian-ji-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dian-ji-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 点击上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"yong-hu-tou-xiang-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yong-hu-tou-xiang-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 用户头像上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("使用 "),t("code",[this._v("before-upload")]),this._v(" 限制用户上传的图片格式和大小。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zhao-pian-qiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhao-pian-qiang","aria-hidden":"true"}},[this._v("¶")]),this._v(" 照片墙")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("使用 "),t("code",[this._v("list-type")]),this._v(" 属性来设置文件列表的样式。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"wen-jian-suo-lue-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-jian-suo-lue-tu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 文件缩略图")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("使用 "),t("code",[this._v("scoped-slot")]),this._v(" 去设置缩略图模版。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tu-pian-lie-biao-suo-lue-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-pian-lie-biao-suo-lue-tu","aria-hidden":"true"}},[this._v("¶")]),this._v(" 图片列表缩略图")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shang-chuan-wen-jian-lie-biao-kong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shang-chuan-wen-jian-lie-biao-kong-zhi","aria-hidden":"true"}},[this._v("¶")]),this._v(" 上传文件列表控制")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("通过 "),t("code",[this._v("on-change")]),this._v(" 钩子函数来对列表进行控制")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tuo-zhuai-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tuo-zhuai-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 拖拽上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"shou-dong-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-dong-shang-chuan","aria-hidden":"true"}},[this._v("¶")]),this._v(" 手动上传")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attribute","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attribute")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("参数")]),n("th",[e._v("说明")]),n("th",[e._v("类型")]),n("th",[e._v("可选值")]),n("th",[e._v("默认值")])])]),n("tbody",[n("tr",[n("td",[e._v("action")]),n("td",[e._v("必选参数，上传的地址")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("headers")]),n("td",[e._v("设置上传的请求头部")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("是否支持多选文件")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("上传时附带的额外参数")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("上传的文件字段名")]),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("支持发送 cookie 凭证信息")]),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("是否显示已上传文件列表")]),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("是否启用拖拽上传")]),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("接受上传的"),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[e._v("文件类型")]),e._v("（thumbnail-mode 模式下此参数无效）")]),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("点击文件列表中已上传的文件时的钩子")]),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("文件列表移除文件时的钩子")]),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("文件上传成功时的钩子")]),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("文件上传失败时的钩子")]),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("文件上传时的钩子")]),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("文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用")]),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("上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。")]),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("删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("list-type")]),n("td",[e._v("文件列表的类型")]),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("是否在选取文件后立即进行上传")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("file-list")]),n("td",[e._v("上传的文件列表, 例如: [{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("http-request")]),n("td",[e._v("覆盖默认的上传行为，可以自定义上传的实现")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("是否禁用")]),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("最大允许上传个数")]),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("文件超出个数限制时的钩子")]),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.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("trigger")]),t("td",[this._v("触发文件选择框的内容")])]),t("tr",[t("td",[this._v("tip")]),t("td",[this._v("提示说明文字")])])])])},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("方法名")]),n("th",[e._v("说明")]),n("th",[e._v("参数")])])]),n("tbody",[n("tr",[n("td",[e._v("clearFiles")]),n("td",[e._v("清空已上传的文件列表（该方法不支持在 before-upload 中调用）")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("abort")]),n("td",[e._v("取消上传请求")]),n("td",[e._v("（ file: fileList 中的 file 对象 ）")])]),n("tr",[n("td",[e._v("submit")]),n("td",[e._v("手动上传文件列表")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},804:function(e,t,a){"use strict";a.r(t);a(478);var n=a(0),l=Object(n.a)({},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("设计原则")]),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(399),alt:"Consistency"}}),n("h4",[e._v("一致")]),n("span",[e._v("Consistency")])])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(400),alt:"Feedback"}}),n("h4",[e._v("反馈")]),n("span",[e._v("Feedback")])])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(401),alt:"Efficiency"}}),n("h4",[e._v("效率")]),n("span",[e._v("Efficiency")])])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(402),alt:"Controllability"}}),n("h4",[e._v("可控")]),n("span",[e._v("Controllability")])])])],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("与现实生活一致：")]),this._v("与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),t("li",[t("strong",[this._v("在界面中一致：")]),this._v("所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("控制反馈：")]),this._v("通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),t("li",[t("strong",[this._v("页面反馈：")]),this._v("操作后，通过页面元素的变化清晰地展现当前状态。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("简化流程：")]),this._v("设计简洁直观的操作流程；")]),t("li",[t("strong",[this._v("清晰明确：")]),this._v("语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),t("li",[t("strong",[this._v("帮助用户识别：")]),this._v("界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("用户决策：")]),this._v("根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),t("li",[t("strong",[this._v("结果可控：")]),this._v("用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])}],!1,null,"7aed89bc",null);t.default=l.exports},805: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("资源")]),n("p",[e._v("设计资源正在整理和完善中")]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(413),alt:""}}),n("h3",[e._v("Axure Components")]),n("p",[e._v("通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.1.0.rplib"}},[e._v("下载")])])]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(414),alt:""}}),n("h3",[e._v("Sketch Template")]),n("p",[e._v("从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格")]),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("下载")])])])])])])}],l=(a(482),a(0)),r=Object(l.a)({},function(){this.$createElement;this._self._c;return this._m(0)},n,!1,null,"c8214268",null);t.default=r.exports},806:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){var e=this.$createElement;return(this._self._c||e)("router-view")},[],!1,null,null,null);t.default=l.exports},816:function(e,t,n){"use strict";n.r(t);var a=n(0),l=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:"zi-ding-yi-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),e._v(" 自定义主题")]),n("p",[e._v("Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了四种方法，可以进行不同程度的样式自定义。")]),n("h3",{attrs:{id:"zhu-ti-bian-ji-qi"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti-bian-ji-qi","aria-hidden":"true"}},[e._v("¶")]),e._v(" 主题编辑器")]),n("p",[e._v("使用"),n("a",{attrs:{href:"./#/zh-CN/theme"}},[e._v("在线主题编辑器")]),e._v("，可以修改定制 Element 所有全局和组件的 Design Tokens，并可以方便地实时预览样式改变后的视觉。同时它还可以基于新的定制样式生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」部分）。")]),n("p",[e._v("也可以使用"),n("a",{attrs:{href:"https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim"}},[e._v("主题编辑器 Chrome 插件")]),e._v("，在任何使用 Element 开发的网站上配置并实时预览主题。")]),n("img",{staticStyle:{width:"100%",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:"jin-ti-huan-zhu-ti-se"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jin-ti-huan-zhu-ti-se","aria-hidden":"true"}},[e._v("¶")]),e._v(" 仅替换主题色")]),n("p",[e._v("如果仅希望更换 Element 的主题色，推荐使用"),n("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview"}},[e._v("在线主题生成工具")]),e._v("。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。")]),n("p",[e._v("使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。")]),n("h3",{attrs:{id:"zai-xiang-mu-zhong-gai-bian-scss-bian-liang"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#zai-xiang-mu-zhong-gai-bian-scss-bian-liang","aria-hidden":"true"}},[e._v("¶")]),e._v(" 在项目中改变 SCSS 变量")]),n("p",[e._v("Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 "),n("code",[e._v("element-variables.scss")]),e._v("，写入以下内容：")]),n("pre",[n("code",{staticClass:"language-html"},[e._v("/* 改变主题色变量 */\n$--color-primary: teal;\n\n/* 改变 icon 字体路径变量，必需 */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),n("p",[e._v("之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 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("需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。")])]),n("h3",{attrs:{id:"ming-ling-xing-zhu-ti-gong-ju"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#ming-ling-xing-zhu-ti-gong-ju","aria-hidden":"true"}},[e._v("¶")]),e._v(" 命令行主题工具")]),n("p",[e._v("如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：")]),n("h4",{attrs:{id:"an-zhuang-gong-ju"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang-gong-ju","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("安装工具")])]),n("p",[e._v("首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-theme -g\n")])]),n("p",[e._v("安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("# 从 npm\nnpm i element-theme-chalk -D\n\n# 从 GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),n("h4",{attrs:{id:"chu-shi-hua-bian-liang-wen-jian"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#chu-shi-hua-bian-liang-wen-jian","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("初始化变量文件")])]),n("p",[e._v("主题生成工具安装成功后，如果全局安装可以在命令行里通过 "),n("code",[e._v("et")]),e._v(" 调用工具，如果安装在当前目录下，需要通过 "),n("code",[e._v("node_modules/.bin/et")]),e._v(" 访问到命令。执行 "),n("code",[e._v("-i")]),e._v(" 初始化变量文件。默认输出到 "),n("code",[e._v("element-variables.scss")]),e._v("，当然你可以传参数指定文件输出目录。")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et -i [可以自定义变量文件]\n\n> ✔ Generator variables file\n")])]),n("p",[e._v("如果使用默认配置，执行后当前目录会有一个 "),n("code",[e._v("element-variables.scss")]),e._v(" 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：")]),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:"xiu-gai-bian-liang"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-bian-liang","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("修改变量")])]),n("p",[e._v("直接编辑 "),n("code",[e._v("element-variables.scss")]),e._v(" 文件，例如修改主题色为红色。")]),n("pre",[n("code",{staticClass:"language-CSS"},[e._v("$--color-primary: red;\n")])]),n("h4",{attrs:{id:"bian-yi-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bian-yi-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("编译主题")])]),n("p",[e._v("保存文件后，到命令行里执行 "),n("code",[e._v("et")]),e._v(" 编译主题，如果你想启用 "),n("code",[e._v("watch")]),e._v(" 模式，实时编译主题，增加 "),n("code",[e._v("-w")]),e._v(" 参数；如果你在初始化时指定了自定义变量文件，则需要增加 "),n("code",[e._v("-c")]),e._v(" 参数，并带上你的变量文件名。默认情况下编译的主题目录是放在 "),n("code",[e._v("./theme")]),e._v(" 下，你可以通过 "),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:"shi-yong-zi-ding-yi-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-zi-ding-yi-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),e._v(" 使用自定义主题")]),n("h4",{attrs:{id:"yin-ru-zi-ding-yi-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-zi-ding-yi-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("引入自定义主题")])]),n("p",[e._v("和引入默认主题一样，在代码里直接引用「在线主题编辑器」或「命令行工具」生成的主题的 "),n("code",[e._v("theme/index.css")]),e._v(" 文件即可。")]),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:"da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("搭配插件按需引入组件主题")])]),n("p",[e._v("如果是搭配 "),n("code",[e._v("babel-plugin-component")]),e._v(" 一起使用，只需要修改 "),n("code",[e._v(".babelrc")]),e._v(" 的配置，指定 "),n("code",[e._v("styleLibraryName")]),e._v(" 路径为自定义主题相对于 "),n("code",[e._v(".babelrc")]),e._v(" 的路径，注意要加 "),n("code",[e._v("~")]),e._v("。")]),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("如果不清楚 "),n("code",[e._v("babel-plugin-component")]),e._v(" 是什么，请阅读 "),n("a",{attrs:{href:"./#/zh-CN/component/quickstart"}},[e._v("快速上手")]),e._v(" 一节。更多 "),n("code",[e._v("element-theme")]),e._v(" 用法请参考"),n("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[e._v("项目仓库")]),e._v("。")])])}],!1,null,null,null);t.default=l.exports},817:function(e,t,n){"use strict";n.r(t);var a=n(0),l=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:"guo-ji-hua"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#guo-ji-hua","aria-hidden":"true"}},[e._v("¶")]),e._v(" 国际化")]),n("p",[e._v("Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("// 完整引入 Element\nimport 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("或")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("// 按需引入 Element\nimport 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// 设置语言\nlocale.use(lang)\n\n// 引入组件\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),n("p",[e._v("如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。")]),n("p",[n("strong",[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:"jian-rong-vue-i18n-5-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-vue-i18n-5-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" 兼容 "),n("code",[e._v("vue-i18n@5.x")])]),n("p",[e._v("Element 兼容 "),n("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("vue-i18n@5.x")]),e._v("，搭配使用能更方便地实现多语言切换。")]),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:"jian-rong-qi-ta-i18n-cha-jian"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-qi-ta-i18n-cha-jian","aria-hidden":"true"}},[e._v("¶")]),e._v(" 兼容其他 i18n 插件")]),n("p",[e._v("如果不使用 "),n("code",[e._v("vue-i18n@5.x")]),e._v("，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 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:"jian-rong-vue-i18n-6-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-vue-i18n-6-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" 兼容 "),n("code",[e._v("vue-i18n@6.x")])]),n("p",[e._v("默认不支持 6.x 的 "),n("code",[e._v("vue-i18n")]),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 // 或者用 Object.assign({ message: 'hello' }, enLocale)\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // 或者用 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:"an-xu-jia-zai-li-ding-zhi-i18n"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-jia-zai-li-ding-zhi-i18n","aria-hidden":"true"}},[e._v("¶")]),e._v(" 按需加载里定制 i18n")]),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:"tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian","aria-hidden":"true"}},[e._v("¶")]),e._v(" 通过 CDN 的方式加载语言文件")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue@2"><\/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("搭配 "),n("code",[e._v("vue-i18n")]),e._v(" 使用")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue@2"><\/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("目前 Element 内置了以下语言：")]),n("ul",{staticClass:"language-list"},[n("li",[e._v("简体中文（zh-CN）")]),n("li",[e._v("英语（en）")]),n("li",[e._v("德语（de）")]),n("li",[e._v("葡萄牙语（pt）")]),n("li",[e._v("西班牙语（es）")]),n("li",[e._v("丹麦语（da）")]),n("li",[e._v("法语（fr）")]),n("li",[e._v("挪威语（nb-NO）")]),n("li",[e._v("繁体中文（zh-TW）")]),n("li",[e._v("意大利语（it）")]),n("li",[e._v("韩语（ko）")]),n("li",[e._v("日语（ja）")]),n("li",[e._v("荷兰语（nl）")]),n("li",[e._v("越南语（vi）")]),n("li",[e._v("俄语（ru-RU）")]),n("li",[e._v("土耳其语（tr-TR）")]),n("li",[e._v("巴西葡萄牙语（pt-br）")]),n("li",[e._v("波斯语（fa）")]),n("li",[e._v("泰语（th）")]),n("li",[e._v("印尼语（id）")]),n("li",[e._v("保加利亚语（bg）")]),n("li",[e._v("波兰语（pl）")]),n("li",[e._v("芬兰语（fi）")]),n("li",[e._v("瑞典语（sv-SE）")]),n("li",[e._v("希腊语（el）")]),n("li",[e._v("斯洛伐克语（sk）")]),n("li",[e._v("加泰罗尼亚语（ca）")]),n("li",[e._v("捷克语（cs-CZ）")]),n("li",[e._v("乌克兰语（ua）")]),n("li",[e._v("土库曼语（tk）")]),n("li",[e._v("泰米尔语（ta）")]),n("li",[e._v("拉脱维亚语（lv）")]),n("li",[e._v("南非荷兰语（af-ZA）")]),n("li",[e._v("爱沙尼亚语（ee）")]),n("li",[e._v("斯洛文尼亚语（sl）")]),n("li",[e._v("阿拉伯语（ar）")]),n("li",[e._v("希伯来语（he）")]),n("li",[e._v("立陶宛语（lt）")]),n("li",[e._v("蒙古语（mn）")]),n("li",[e._v("哈萨克斯坦语（kz）")]),n("li",[e._v("匈牙利语（hu）")]),n("li",[e._v("罗马尼亚语（ro）")]),n("li",[e._v("库尔德语（ku）")]),n("li",[e._v("维吾尔语（ug-CN）")]),n("li",[e._v("高棉语（km）")]),n("li",[e._v("塞尔维亚语（sr）")]),n("li",[e._v("巴斯克语（eu）")]),n("li",[e._v("吉尔吉斯语（kg）")]),n("li",[e._v("亚美尼亚语 (hy)")]),n("li",[e._v("克罗地亚 (hr)")]),n("li",[e._v("世界语 (eo)")])]),n("p",[e._v("如果你需要使用其他的语言，欢迎贡献 PR：只需在 "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[e._v("这里")]),e._v(" 添加一个语言配置文件即可。")])])}],!1,null,null,null);t.default=l.exports},818:function(e,t,n){"use strict";n.r(t);var a=n(0),l=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:"an-zhuang"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang","aria-hidden":"true"}},[e._v("¶")]),e._v(" 安装")]),n("h3",{attrs:{id:"npm-an-zhuang"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#npm-an-zhuang","aria-hidden":"true"}},[e._v("¶")]),e._v(" npm 安装")]),n("p",[e._v("推荐使用 npm 的方式安装，它能更好地和 "),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("目前可以通过 "),n("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[e._v("unpkg.com/element-ui")]),e._v(" 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('\x3c!-- 引入样式 --\x3e\n<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">\n\x3c!-- 引入组件库 --\x3e\n<script src="https://unpkg.com/element-ui/lib/index.js"><\/script>\n')])]),n("div",{staticClass:"tip"},[n("p",[e._v("我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 "),n("a",{attrs:{href:"https://unpkg.com"}},[e._v("unpkg.com")]),e._v("。")])]),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("通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。"),n("a",{attrs:{href:"https://codepen.io/bofeng/pen/poaEmJY"}},[e._v("在线演示")])]),n("iframe",{staticStyle:{width:"100%"},attrs:{height:"265",scrolling:"no",title:"Element demo",src:"//codepen.io/bofeng/embed/poaEmJY/?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/bofeng/pen/poaEmJY/"}},[e._v("Element demo")]),e._v(" by hetech\n  ("),n("a",{attrs:{href:"https://codepen.io/bofeng"}},[e._v("@bofeng")]),e._v(") on "),n("a",{attrs:{href:"https://codepen.io"}},[e._v("CodePen")]),e._v(".\n")]),n("p",[e._v("如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节："),n("a",{attrs:{href:"/#/zh-CN/component/quickstart"}},[e._v("快速上手")]),e._v("。")])])}],!1,null,null,null);t.default=l.exports},819:function(e,t,n){"use strict";n.r(t);var a=n(0),l=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:"kuai-su-shang-shou"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#kuai-su-shang-shou","aria-hidden":"true"}},[e._v("¶")]),e._v(" 快速上手")]),n("p",[e._v("本节将介绍如何在项目中使用 Element。")]),n("h3",{attrs:{id:"shi-yong-vue-cli-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-vue-cli-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 使用 vue-cli@3")]),n("p",[e._v("我们为新版的 vue-cli 准备了相应的 "),n("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("Element 插件")]),e._v("，你可以用它们快速地搭建一个基于 Element 的项目。")]),n("h3",{attrs:{id:"shi-yong-starter-kit"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-starter-kit","aria-hidden":"true"}},[e._v("¶")]),e._v(" 使用 Starter Kit")]),n("p",[e._v("我们提供了通用的"),n("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[e._v("项目模板")]),e._v("，你可以直接使用。对于 Laravel 用户，我们也准备了相应的"),n("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[e._v("模板")]),e._v("，同样可以直接下载使用。")]),n("p",[e._v("如果不希望使用我们提供的模板，请继续阅读。")]),n("h3",{attrs:{id:"yin-ru-element"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-element","aria-hidden":"true"}},[e._v("¶")]),e._v(" 引入 Element")]),n("p",[e._v("你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。")]),n("h4",{attrs:{id:"wan-zheng-yin-ru"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#wan-zheng-yin-ru","aria-hidden":"true"}},[e._v("¶")]),e._v(" 完整引入")]),n("p",[e._v("在 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("以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。")]),n("h4",{attrs:{id:"an-xu-yin-ru"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru","aria-hidden":"true"}},[e._v("¶")]),e._v(" 按需引入")]),n("p",[e._v("借助 "),n("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[e._v("babel-plugin-component")]),e._v("，我们可以只引入需要的组件，以达到减小项目体积的目的。")]),n("p",[e._v("首先，安装 babel-plugin-component：")]),n("pre",[n("code",{staticClass:"language-bash"},[e._v("npm install babel-plugin-component -D\n")])]),n("p",[e._v("然后，将 .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("接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 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/* 或写为\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("完整组件列表和引入方式（完整组件列表以 "),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:"quan-ju-pei-zhi"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-pei-zhi","aria-hidden":"true"}},[e._v("¶")]),e._v(" 全局配置")]),n("p",[e._v("在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 "),n("code",[e._v("size")]),e._v(" 与 "),n("code",[e._v("zIndex")]),e._v(" 字段。"),n("code",[e._v("size")]),e._v(" 用于改变组件的默认尺寸，"),n("code",[e._v("zIndex")]),e._v(" 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：")]),n("p",[e._v("完整引入 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("按需引入 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("按照以上设置，项目中所有拥有 "),n("code",[e._v("size")]),e._v(" 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。")]),n("h3",{attrs:{id:"kai-shi-shi-yong"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#kai-shi-shi-yong","aria-hidden":"true"}},[e._v("¶")]),e._v(" 开始使用")]),n("p",[e._v("至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。")]),n("h3",{attrs:{id:"shi-yong-nuxt-js"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-nuxt-js","aria-hidden":"true"}},[e._v("¶")]),e._v(" 使用 Nuxt.js")]),n("p",[e._v("我们还可以使用 "),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=l.exports}}]);