(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{1016:function(t,e,n){"use strict";n(965)},1017:function(t,e,n){"use strict";n(966)},1018:function(t,e,n){"use strict";n(967)},1019:function(t,e,n){"use strict";n(968)},1020:function(t,e,n){"use strict";n(969)},1021:function(t,e,n){"use strict";n(970)},1022:function(t,e,n){"use strict";n(971)},1023:function(t,e,n){"use strict";n(972)},1039:function(t,e,n){"use strict";n(986)},1046:function(t,e,n){"use strict";n(988)},1074:function(t,e,n){"use strict";n.r(e);var a=n(0),i={components:{ChangeLog:Object(a.a)({},function(){var t=this.$createElement;this._self._c;return this._m(0)},[function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h2",{attrs:{id:"geng-xin-ri-zhi"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#geng-xin-ri-zhi"}},[t._v("¶")]),t._v(" 更新日志")]),e("h3",{attrs:{id:"2-14-1"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-14-1"}},[t._v("¶")]),t._v(" 2.14.1")]),e("p",[e("em",[t._v("2020-11-11")])]),e("h4",{attrs:{id:"bug-xiu-fu"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu"}},[t._v("¶")]),t._v(" Bug 修复")]),e("ul",[e("li",[t._v("Popover\n"),e("ul",[e("li",[t._v("兼容 Vue 2.6 新 v-slot 语法 (#20424 by @iamkun)")])])])]),e("h4",{attrs:{id:"you-hua"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("I18n\n"),e("ul",[e("li",[t._v("更新阿拉伯语翻译 (#20202 by @elkattan)")]),e("li",[t._v("更新维吾尔语翻译 (#20177 by @IlhamTahir)")])])])]),e("h3",{attrs:{id:"2-14-0"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-14-0"}},[t._v("¶")]),t._v(" 2.14.0")]),e("p",[e("em",[t._v("2020-10-29")])]),e("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin"}},[t._v("¶")]),t._v(" 非兼容性更新")]),e("ul",[e("li",[t._v("Popconfirm\n"),e("ul",[e("li",[t._v("事件名称修改为 "),e("code",[t._v("confirm")]),t._v(", "),e("code",[t._v("cancel")]),t._v(" (#20240 by @hugiron)")])])])]),e("h4",{attrs:{id:"bug-xiu-fu-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-2"}},[t._v("¶")]),t._v(" Bug 修复")]),e("ul",[e("li",[t._v("Progress\n"),e("ul",[e("li",[t._v("修复参数错误的问题 (#19985 by @Caaalabash)")])])])]),e("h4",{attrs:{id:"you-hua-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-2"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("I18n\n"),e("ul",[e("li",[t._v("更新俄语翻译 (#19451 by @yangirov)")]),e("li",[t._v("更新高棉语翻译 (#20077 by @Sovai)")]),e("li",[t._v("更新乌克兰语翻译 (#20344 by @MammutAlex)")])])])]),e("h3",{attrs:{id:"2-13-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-13-2"}},[t._v("¶")]),t._v(" 2.13.2")]),e("p",[e("em",[t._v("2020-05-18")])]),e("h4",{attrs:{id:"bug-xiu-fu-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-3"}},[t._v("¶")]),t._v(" Bug 修复")]),e("ul",[e("li",[t._v("Autocomplete\n"),e("ul",[e("li",[t._v("修复 'change event' 错误 (#19200 by @sxzz)")])])]),e("li",[t._v("Image\n"),e("ul",[e("li",[t._v("更新错误状态 (#19194 by @lhx6538665)")])])])]),e("h4",{attrs:{id:"you-hua-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-3"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("I18n\n"),e("ul",[e("li",[t._v("更新 ru-RU popconfirm 翻译 (#19220 by @Opppex)")]),e("li",[t._v("更新 vi 翻译 (#19244 by @quangln2810)")]),e("li",[t._v("更新 Catalan 和 Spanish 翻译 (#19296 by @Ismaaa)")]),e("li",[t._v("更新 Indonesia 翻译 (#19320) by @therour)")]),e("li",[t._v("更新 Brazilian Portuguese 翻译 (#19374 by @diegomengarda)")])])])]),e("h3",{attrs:{id:"2-13-1"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-13-1"}},[t._v("¶")]),t._v(" 2.13.1")]),e("p",[e("em",[t._v("2020-04-13")])]),e("h4",{attrs:{id:"xin-te-xing"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("Autocomplete\n"),e("ul",[e("li",[t._v("添加 change 事件 (#17913 by @sxzz)")])])])]),e("h4",{attrs:{id:"bug-xiu-fu-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-4"}},[t._v("¶")]),t._v(" Bug 修复")]),e("ul",[e("li",[t._v("Autocomplete\n"),e("ul",[e("li",[t._v("修复类型为 textarea 时建议错误问题 (#18478 by @Roojay)")])])]),e("li",[t._v("Carousel\n"),e("ul",[e("li",[t._v("修复 console.warn 文案拼写错误 (#18264 by @IceFox)")])])]),e("li",[t._v("Image\n"),e("ul",[e("li",[t._v("修复当 preview-src-list 属性不包含 src 时图片预览大图展示为空的问题 (#18975) (#19130 by @luckyCao)")]),e("li",[t._v("修复第二次图片预览时快捷键失效问题 (#18983) (#19156 by @luckyCao)")]),e("li",[t._v("修复 preview-src-list 为空时点击图片会给 body 添加 overflow: scroll 的问题 (#18967 by @inooNgt)")])])]),e("li",[t._v("Transfer\n"),e("ul",[e("li",[t._v("修复和 Form 组件一起使用时错误的行高问题 (#18917 by @Hanx)")])])]),e("li",[t._v("InputNumber\n"),e("ul",[e("li",[t._v("正确计算 inputNumberDisabled (#18439 by @ashuser-pendo)")])])]),e("li",[t._v("Chore\n"),e("ul",[e("li",[t._v("更新首页文案 (#19155 by @iamkun)")])])]),e("li",[t._v("Doc\n"),e("ul",[e("li",[t._v("更新 Popconfirm 文档 (#18324 by @iamkun)")]),e("li",[t._v("修复 step-strictly 文档拼写问题 (#18705 by @dream2023)")]),e("li",[t._v("修复 Steps 组件文档问题 (#17555 by @haoranyu)")])])])]),e("h3",{attrs:{id:"2-13-0"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-13-0"}},[t._v("¶")]),t._v(" 2.13.0")]),e("p",[e("em",[t._v("2019-11-26")])]),e("h4",{attrs:{id:"xin-te-xing-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-2"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("Popconfirm\n"),e("ul",[e("li",[t._v("新增 Popconfirm 组件 (#17548 by @iamkun)")])])])]),e("h4",{attrs:{id:"bug-fixes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes"}},[t._v("¶")]),t._v(" Bug fixes")]),e("ul",[e("li",[t._v("BackTop\n"),e("ul",[e("li",[t._v("平滑过渡动画 (by @lon)")])])]),e("li",[t._v("DatePicker\n"),e("ul",[e("li",[t._v("修复选择最小日期的 bug (#17191 by @smk0621)")])])]),e("li",[t._v("Select\n"),e("ul",[e("li",[t._v("修复测试用例  (by @msidolphin)")])])]),e("li",[t._v("Tree\n"),e("ul",[e("li",[t._v("增加 font-size 样式 (#17094 by @spengjie)")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("头部可自定义 (#17291 by @ziyoung)")]),e("li",[t._v("更新头部样式 (#17284 by @ziyoung)")]),e("li",[t._v("修复时候 filter 之后高度问题 (#17348 by @ziyoung)")]),e("li",[t._v("修复 row-style 失效的 bug (#17002 by @a631807682)")]),e("li",[t._v("修复头部消失的 bug (#17341 by @ziyoung)")])])]),e("li",[t._v("Calendar\n"),e("ul",[e("li",[t._v("导入 el-button 和 el-button-group (#17376 by @masongzhi)")])])]),e("li",[t._v("MessageBox\n"),e("ul",[e("li",[t._v("修复图表位置 (#17410 by @nullptru)")])])]),e("li",[t._v("TimePicker\n"),e("ul",[e("li",[t._v("滚动后设置正确的位置 (#16868 by @mattheyan)")])])]),e("li",[t._v("Message\n"),e("ul",[e("li",[t._v("修复关闭的 offsetHeight（#17564） (#17852 by @gzwgq222)")])])]),e("li",[t._v("Form\n"),e("ul",[e("li",[t._v("ValidateField 的回调应为可选项 (#17314 by @CarterLi)")])])]),e("li",[t._v("Cascader\n"),e("ul",[e("li",[t._v("修复 TypeScript 3.7 的兼容问题 (#17881 by @CarterLi)")])])]),e("li",[t._v("Menu\n"),e("ul",[e("li",[t._v("修复 NavigationDuplicated 在 vue-router@^3.1.0 的报错 (#17269 by @iamkun)")])])]),e("li",[t._v("Dropdown\n"),e("ul",[e("li",[t._v("更新类型文件 (#17550 by @iamkun)")])])]),e("li",[t._v("Progress\n"),e("ul",[e("li",[t._v("增加 strokeLinecap 属性 (#17552 by @iamkun)")])])]),e("li",[t._v("InfiniteScroll\n"),e("ul",[e("li",[t._v("跳过不可见元素触发 (#17553 by @iamkun)")])])]),e("li",[t._v("Image\n"),e("ul",[e("li",[t._v("优化用户体验 (#16985 by @luckyCao)")]),e("li",[t._v("优化大图片展示问题 (#16796 by @luckyCao)")])])]),e("li",[t._v("Drawer\n"),e("ul",[e("li",[t._v("修复 drawer-append-to-body 失效的 bug (#16953 by @JeremyWuuuuu)")])])]),e("li",[t._v("Select\n"),e("ul",[e("li",[t._v("修复空 tag 的 bug (17199 by @luckyCao)")])])]),e("li",[t._v("Scrollbar\n"),e("ul",[e("li",[t._v("修复 FireFox 双滚动条的 bug (#18091 by @iamkun)")])])])]),e("h4",{attrs:{id:"optimization"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#optimization"}},[t._v("¶")]),t._v(" Optimization")]),e("ul",[e("li",[t._v("I18n\n"),e("ul",[e("li",[t._v("更新 sv-SE.js (#17926 by @FOLLGAD)")]),e("li",[t._v("更新 avatar 组件法语文档 (#17762 by @blombard)")])])]),e("li",[t._v("Docs\n"),e("ul",[e("li",[t._v("修复 time-select 文档错误 (#17250 by @wacky6)")]),e("li",[t._v("修复 Drawer 文档错误 (#17122 by @haoranyu)")]),e("li",[t._v("更新 Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)")]),e("li",[t._v("修复 Changelog 文档错误 (#17874 by @renlixin)")]),e("li",[t._v("修复 Loading 示例 (#17862 by @MBearo)")]),e("li",[t._v("增加 input event 相关文档 (#18061 by @zhouxinyong)")]),e("li",[t._v("移除 Input repeat change event 相关文档 (#18085 by @zhouxinyong)")])])])]),e("h3",{attrs:{id:"2-12-0"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-12-0"}},[t._v("¶")]),t._v(" 2.12.0")]),e("p",[e("em",[t._v("2019-08-29")])]),e("h4",{attrs:{id:"xin-te-xing-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-3"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("Popover\n"),e("ul",[e("li",[t._v("添加 close-delay 属性 (#16671 by @LachlanStuart)")])])]),e("li",[t._v("Theme\n"),e("ul",[e("li",[t._v("增加 Chrome 插件: Element Theme Extension (#16686 by @iamkun)")])])]),e("li",[t._v("Icon\n"),e("ul",[e("li",[t._v("支持 font-display 属性的配置 (#16805 by @iamfaizalandyka)")])])])]),e("h4",{attrs:{id:"bug-fixes-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-2"}},[t._v("¶")]),t._v(" Bug fixes")]),e("ul",[e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("在表头拖拽后阻止 click 事件的触发 (#16850 by @ziyoung)")]),e("li",[t._v("修复表头 display 为 none 造成浏览器崩溃的问题 (#16956 by @luckyCao)")]),e("li",[t._v("修复没有数据的时表格高度问题 (#16861 by @ziyoung)")]),e("li",[t._v("调用 toggleExpansion 不再抛出异常 (#16304 by @yyjjqq94)")]),e("li",[t._v("挂载时不再触发 sort-change 事件 (#17113 by @a631807682)")]),e("li",[t._v("修复 setCurrentRow 方法不生效的问题 (#16879 by @ziyoung)")]),e("li",[t._v("修复当数据异步加载时，expand-row-keys 不生效的问题 (#16899 by @ziyoung)")]),e("li",[t._v("把 toggleAllSelection 设置为 Table 示例的属性 (#17137 by @ziyoung)")])])]),e("li",[t._v("Tree\n"),e("ul",[e("li",[t._v("修复文字与复选框之间的距离 (#16799 by @Hazlank)")])])]),e("li",[t._v("Tabs\n"),e("ul",[e("li",[t._v("修复 TabItem 位置不正确的问题 (#16520 by @victorting)")]),e("li",[t._v("修复高亮的 Tab 不在可视区的问题 (#17033 by @nullptru)")])])]),e("li",[t._v("Calendar\n"),e("ul",[e("li",[t._v("修复日期的显示问题 (#16772 by @ubitoffee)")]),e("li",[t._v("修复在夏令时的显示问题 (#17208 by @iamkun)")])])]),e("li",[t._v("Cascader\n"),e("ul",[e("li",[t._v("修复 CascaderPanel 的显示问题 (#16716 by @zhangHongEn)")]),e("li",[t._v("禁用状态下，关闭按钮不显示 (#16224 by @yyjjqq94)")])])]),e("li",[t._v("Input\n"),e("ul",[e("li",[t._v("修复韩语输入问题 (#15069 by @MoonHyuk)")]),e("li",[t._v("触发清除按钮的点击事件 (#16576 by @a631807682)")])])]),e("li",[t._v("Select\n"),e("ul",[e("li",[t._v("过滤时，不收起下拉框 (#17205 by @luckyCao)")])])]),e("li",[t._v("Transfer\n"),e("ul",[e("li",[t._v("修复样式问题 (#17206 by @iamkun)")])])]),e("li",[t._v("Dialog\n"),e("ul",[e("li",[t._v("添加 SCSS 变量 (#16365 by @haoranyu)")])])]),e("li",[t._v("RadioGroup\n"),e("ul",[e("li",[t._v("is 指定时，不产生非法的 HTML 片段 (#17070 by @nullptru)")])])]),e("li",[t._v("Divider\n"),e("ul",[e("li",[t._v("支持自定义类 (#17078 by @island205)")])])]),e("li",[t._v("Carousel\n"),e("ul",[e("li",[t._v("修复 change 的触发时机 (#16705 by @iamkun)")])])]),e("li",[t._v("Notification\n"),e("ul",[e("li",[t._v("不修改传入的 option (#16704 by @iamkun)")])])]),e("li",[t._v("DatePicker\n"),e("ul",[e("li",[t._v("给 picker-option 添加 className 属性 (#16632 by @iamkun)")])])]),e("li",[t._v("DateTimePicker\n"),e("ul",[e("li",[t._v("修复时间选择滚动条的问题 (#16854 by @jesse-li)")])])])]),e("h4",{attrs:{id:"optimization-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#optimization-2"}},[t._v("¶")]),t._v(" Optimization")]),e("ul",[e("li",[t._v("Checkbox\n"),e("ul",[e("li",[t._v("提高可访问性 (#16575 by @tylertrotter)")])])]),e("li",[t._v("Docs\n"),e("ul",[e("li",[t._v("更新 changelog (#16773 by @SimonaliaChen)")]),e("li",[t._v("更新贡献指南 (#14800 by @sinchang)")]),e("li",[t._v("修复 Drawer 文档中的拼写错误 (#16848 by @winkay)")]),e("li",[t._v("更新自定义主题 (#16983 by @iamkun)")]),e("li",[t._v("新增 Esperanto 翻译 (#16955 by @maxkoryukov)")]),e("li",[t._v("更新 input-number 文档 (#16316 by @luckyCao)")]),e("li",[t._v("更新 Spanish 文档 (#16961 #16548 by @Gonzalo2310)")])])]),e("li",[t._v("I18n\n"),e("ul",[e("li",[t._v("更新加泰罗尼亚语翻译 (#14722 by @oscaralbareda)")]),e("li",[t._v("更新阿拉伯语翻译 (#16653 by @l3op)")])])]),e("li",[t._v("Test\n"),e("ul",[e("li",[t._v("修复拼写错误 (#16672 by @boomler)")]),e("li",[t._v("优化 image 的单元测试 (#16847 by @a631807682)")])])]),e("li",[t._v("Types\n"),e("ul",[e("li",[t._v("修复 httprequest 的类型 (#16633 by @luckyCao)")])])])]),e("h3",{attrs:{id:"2-11-1"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-11-1"}},[t._v("¶")]),t._v(" 2.11.1")]),e("p",[e("em",[t._v("2019-07-26")])]),e("h4",{attrs:{id:"bug-xiu-fu-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-5"}},[t._v("¶")]),t._v(" Bug 修复")]),e("ul",[e("li",[t._v("Image\n"),e("ul",[e("li",[t._v("修复 Image 组件 SSR 兼容性 (#16737 by @luckyCao)")])])]),e("li",[t._v("Chore\n"),e("ul",[e("li",[t._v("更新 dart-sass 的兼容性 (#16744 by @LewisChennnnn)")])])])]),e("h3",{attrs:{id:"2-11-0"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-11-0"}},[t._v("¶")]),t._v(" 2.11.0")]),e("p",[e("em",[t._v("2019-07-25")])]),e("h4",{attrs:{id:"xin-te-xing-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-4"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("Drawer\n"),e("ul",[e("li",[t._v("新增抽屉组件 (#16577 by @JeremyWuuuuu)")])])])]),e("h4",{attrs:{id:"bug-xiu-fu-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-6"}},[t._v("¶")]),t._v(" Bug 修复")]),e("ul",[e("li",[t._v("Checkbox\n"),e("ul",[e("li",[t._v("修复 CSS 样式问题 (#16006 by @Hazlank)")])])]),e("li",[t._v("Tree\n"),e("ul",[e("li",[t._v("更新类型定义为泛类型 (#15934 by @JeremyWuuuuu)")]),e("li",[t._v("修复设置节点 isCurrent 的为 false 的问题 (#15870 by @kkkisme)")])])]),e("li",[t._v("Dropdown\n"),e("ul",[e("li",[t._v("更新 split-button 默认颜色 (#15931 by @JuniorTour)")])])]),e("li",[t._v("Cascader\n"),e("ul",[e("li",[t._v("修复一级菜单更新问题 (#16399 by @luckyCao)")]),e("li",[t._v("懒加载时设默认值 (#16420 by @luckyCao)")]),e("li",[t._v("修复当节点值重复时的显示问题 (#15935 by @junyiz)")]),e("li",[t._v("对外暴露 getCheckedNodes 和修复 options 改变会影响选中的问题 (#16709 by @SimonaliaChen)")])])]),e("li",[t._v("Calendar\n"),e("ul",[e("li",[t._v("更新显示正确的 header 的逻辑 (#16354 by @ziyoung)")])])]),e("li",[t._v("Submenu\n"),e("ul",[e("li",[t._v("修复 append-to-body 问题 (#16289 by @a631807682)")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("修复 tree table 数据更新问题 (#16481 by @island205)")])])]),e("li",[t._v("Select\n"),e("ul",[e("li",[t._v("修复内存泄漏问题 (#16463 by @island205)")])])]),e("li",[t._v("InfiniteScroll\n"),e("ul",[e("li",[t._v("更新命名和说明 (#16698 by @iamkun)")])])]),e("li",[t._v("Avatar\n"),e("ul",[e("li",[t._v("修复图片不居中的问题 (#16489 by @luckyCao)")])])]),e("li",[t._v("Dialog\n"),e("ul",[e("li",[t._v("增加 destroyOnClose 属性 (#16455 by @ziyoung)")])])]),e("li",[t._v("Image\n"),e("ul",[e("li",[t._v("增加大图预览 (#16333 by @luckyCao)")])])])]),e("h4",{attrs:{id:"you-hua-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-4"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("Docs\n"),e("ul",[e("li",[t._v("修复 dropdown 示例 (#16193 by @webxmsj)")]),e("li",[t._v("修正笔误 (#15971 by @howiefh)")])])]),e("li",[t._v("I18n\n"),e("ul",[e("li",[t._v("更新泰文翻译 (#16689 by @ponkrit)")])])]),e("li",[t._v("Chore\n"),e("ul",[e("li",[t._v("更新基础 API 地址 (#16607 by @iamkun)")]),e("li",[t._v("增加 Form 的主题 token (#16699 by @iamkun)")]),e("li",[t._v("更新统计 (#16609 by @iamkun)")]),e("li",[t._v("修复文档锚点问题 (#16692 by @iamkun)")])])])]),e("h3",{attrs:{id:"2-10-1"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-10-1"}},[t._v("¶")]),t._v(" 2.10.1")]),e("p",[e("em",[t._v("2019-07-02")])]),e("h4",{attrs:{id:"bug-xiu-fu-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-7"}},[t._v("¶")]),t._v(" Bug 修复")]),e("ul",[e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("排序 icon 问题修复 (#15439 by @bezany)")]),e("li",[t._v("修复 "),e("code",[t._v("append")]),t._v(" slot 存在时布局错位问题 (#16332 by @ziyoung)")]),e("li",[t._v("修复 "),e("code",[t._v("showOverflowTooltip")]),t._v(" 更新无效的问题 (#16295 by @a631807682)")]),e("li",[t._v("修复 "),e("code",[t._v("FilterPanel")]),t._v(" 中 "),e("code",[t._v("Scrollbar")]),t._v(" 未注册问题  (#16246 by @ziyoung)")])])]),e("li",[t._v("Chore\n"),e("ul",[e("li",[t._v("更新版本号，修复文档问题 (#16233 by @ziyoung)")]),e("li",[t._v("修复英文首页样式问题 (#16254 by @iamkun)")])])])]),e("h4",{attrs:{id:"you-hua-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-5"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("Tag\n"),e("ul",[e("li",[t._v("兼容 IE (#16334 by @ziyoung)")])])]),e("li",[t._v("Chore\n"),e("ul",[e("li",[t._v("更新钉钉3群二维码 (#16236 by @iamkun)")])])]),e("li",[t._v("Doc\n"),e("ul",[e("li",[t._v("更新主题编辑器文档 (#16244 by @iamkun)")])])])]),e("h3",{attrs:{id:"2-10-0"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-10-0"}},[t._v("¶")]),t._v(" 2.10.0")]),e("p",[e("em",[t._v("2019-06-25")])]),e("h4",{attrs:{id:"xin-te-xing-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-5"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("I18n\n"),e("ul",[e("li",[t._v("支持乌兹别克语 (#15796 by @ogabek96)")])])]),e("li",[t._v("Calendar\n"),e("ul",[e("li",[t._v("支持 "),e("code",[t._v("first-day-of-week")]),t._v(" 配置 (#16047 by @ziyoung)")])])]),e("li",[t._v("Avatar\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("Avatar")]),t._v(" 组件 (#16144 by @luckyCao)")])])]),e("li",[t._v("Upload:\n"),e("ul",[e("li",[t._v("支持自定义缩略图模版 (#13192 by @victorzhuk)")])])])]),e("h4",{attrs:{id:"bug-xiu-fu-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-8"}},[t._v("¶")]),t._v(" Bug 修复")]),e("ul",[e("li",[t._v("Tree\n"),e("ul",[e("li",[t._v("当 "),e("code",[t._v("currentKey")]),t._v(" 为 "),e("code",[t._v("null")]),t._v(" 时取消对树节点的高亮 (#15668 by @yyjjqq94)")]),e("li",[t._v("修复多实例共享数据的问题 #15538 (#15615 by @VanMess)")])])]),e("li",[t._v("Upload\n"),e("ul",[e("li",[t._v("更新 "),e("code",[t._v("fileList")]),t._v(" 的类型定义 (#15716 by @underfin)")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("修复加载 icon 不显示的问题 (#15868 by @ziyoung)")]),e("li",[t._v("修复复杂表格中 hover 行背景色问题 (#15504 by @cnlon)")]),e("li",[t._v("修复 "),e("code",[t._v("current-row-key")]),t._v(" 和选择事件的问题 (#15983 by @ziyoung)")]),e("li",[e("code",[t._v("height")]),t._v(" 属性接受更多单位 (#16013 by @ziyoung)")]),e("li",[t._v("修复 "),e("code",[t._v("reserve-selection")]),t._v(" 无效的问题 (#16135 by @ziyoung)")])])]),e("li",[t._v("Menu\n"),e("ul",[e("li",[t._v("修复 "),e("code",[t._v("popper-append-to-body")]),t._v(" 设置后，子菜单无法收起的问题 (#15391 by @PanJiaChen)")])])]),e("li",[t._v("Select\n"),e("ul",[e("li",[t._v("修复 "),e("code",[t._v("initialInputHeight")]),t._v(" 问题 (#15989 by @yyjjqq94)")]),e("li",[t._v("修复输入中文时 "),e("code",[t._v("default-first-option")]),t._v(" 的行为问题 (#15431 by @VanMess)")]),e("li",[e("code",[t._v("import")]),t._v(" 重复 (#16215 by @lengband)")])])]),e("li",[t._v("Message\n"),e("ul",[e("li",[t._v("类型定义中添加 "),e("code",[t._v("offset")]),t._v(" 属性 (#16027 by @matjaz)")])])]),e("li",[t._v("Timeline\n"),e("ul",[e("li",[t._v("修复逆序问题 (#16091 by @ziyoung)")])])]),e("li",[t._v("Slider\n"),e("ul",[e("li",[t._v("补充 "),e("code",[t._v("input")]),t._v(" 事件文档 (#15588 by @VanMess)")])])]),e("li",[t._v("InfiniteScroll\n"),e("ul",[e("li",[t._v("更新包名 (#16125 by @iamkun)")])])]),e("li",[t._v("MessageBox\n"),e("ul",[e("li",[t._v("修复 "),e("code",[t._v("distinguishCancelAndClose")]),t._v(" 行为与文档不符的问题 (#15438 by @qingdengyue)")])])]),e("li",[t._v("PopupManager\n"),e("ul",[e("li",[t._v("修复无法复写 "),e("code",[t._v("z-index")]),t._v(" 的问题 (#15738 by @luckyCao)")])])]),e("li",[t._v("Docs\n"),e("ul",[e("li",[t._v("删除不必要的内容 (#16194 by @Alexeykhr)")]),e("li",[t._v("更正 "),e("code",[t._v("Divider")]),t._v(" 属性类型 (#15889 by @haoranyu)")])])]),e("li",[t._v("Chore\n"),e("ul",[e("li",[t._v("更新测试 API 地址 (#15807 by @iamkun)")])])])]),e("h4",{attrs:{id:"you-hua-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-6"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("Tree\n-优化循环性能 (#15699 by @KingJeason)")]),e("li",[t._v("Theme\n"),e("ul",[e("li",[t._v("更新 GA 打点，修改页底地址链接到主题编辑器 (#16007 by @island205)")])])]),e("li",[t._v("Badge\n"),e("ul",[e("li",[t._v("更新类型定义 (#16198 by @iamkun)")])])]),e("li",[t._v("Avatar\n"),e("ul",[e("li",[t._v("更新主题变量配置 (#16202 by @luckyCao)")])])]),e("li",[t._v("I18n\n"),e("ul",[e("li",[t._v("更新葡萄牙语 (#15776 by @gigioSouza)")]),e("li",[t._v("更新波斯语 (#15881 by @pamenary)")])])]),e("li",[t._v("Docs\n"),e("ul",[e("li",[t._v("补充入门文档中的组件列表 (#16063 by @pape2016)")]),e("li",[t._v("更新法语文档 (#16208 by @blombard)")]),e("li",[t._v("为 "),e("code",[t._v("Alert")]),t._v(" 添加 默认插槽文档 (#15444 by @Alexeykhr)")]),e("li",[t._v("更新西班牙语文档 (#15840 by @Gonzalo2310)")]),e("li",[t._v("更新法语文档中的拼写错误 (#15837 by @blombard)")]),e("li",[t._v("更新 2.9.2 西班牙文档 (#16185 by @Gonzalo2310)")])])])]),e("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-2"}},[t._v("¶")]),t._v(" 非兼容性更新")]),e("ul",[e("li",[t._v("Form\n"),e("ul",[e("li",[t._v("移除输入框的成功状态 (#16159 by @ziyoung)")])])])]),e("h3",{attrs:{id:"2-9-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-9-2"}},[t._v("¶")]),t._v(" 2.9.2")]),e("p",[e("em",[t._v("2019-06-21")])]),e("h4",{attrs:{id:"bug-xiu-fu-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-9"}},[t._v("¶")]),t._v(" Bug 修复")]),e("ul",[e("li",[t._v("Chore\n"),e("ul",[e("li",[t._v("修复 TS 定义文件 (#15805 by @NateScarlet)")])])])]),e("h3",{attrs:{id:"2-9-1"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-9-1"}},[t._v("¶")]),t._v(" 2.9.1")]),e("p",[e("em",[t._v("2019-05-30")])]),e("h4",{attrs:{id:"xin-te-xing-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-6"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("Tree Table 支持 tree-props，default-expand-all，expand-row-keys 属性, toggle-row-expansion 方法，expand-change 事件 (#15709 by @ziyoung)")])])])]),e("h4",{attrs:{id:"bug-xiu-fu-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-10"}},[t._v("¶")]),t._v(" Bug 修复")]),e("ul",[e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("修复了一些问题 (#15709 by @ziyoung)")])])]),e("li",[t._v("Theme\n"),e("ul",[e("li",[t._v("更新接口域名 (#15784 by @iamkun)")])])])]),e("h4",{attrs:{id:"you-hua-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-7"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("Chore\n"),e("ul",[e("li",[t._v("更新 InfiniteScroll 组件定义文件 (#15794 by @iamkun)")])])])]),e("h3",{attrs:{id:"2-9-0"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-9-0"}},[t._v("¶")]),t._v(" 2.9.0")]),e("p",[e("em",[t._v("2019-05-30")])]),e("h4",{attrs:{id:"xin-te-xing-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-7"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("Backtop\n"),e("ul",[e("li",[t._v("新增 Backtop 组件 (#15541 by @iamkun)")])])]),e("li",[t._v("PageHeader\n"),e("ul",[e("li",[t._v("新增 PageHeader 组件 (#15714 by @ziyoung)")])])]),e("li",[t._v("InfiniteScroll\n"),e("ul",[e("li",[t._v("新增 InfiniteScroll 指令 (#15567 by @iamkun)")])])]),e("li",[t._v("Cascader\n"),e("ul",[e("li",[t._v("新增多选模式和 filter-method 方法 (#15611 by @SimonaliaChen)")])])]),e("li",[t._v("Message\n"),e("ul",[e("li",[t._v("信息依次展示 (#15639 by @island205)")])])]),e("li",[t._v("Tag\n"),e("ul",[e("li",[t._v("新增 effect 属性 (#15725 by @SimonaliaChen)")])])]),e("li",[t._v("Tabs\n"),e("ul",[e("li",[t._v("卡片模式下标题左对齐 (#15695 by @luckyCao)")])])]),e("li",[t._v("DatePicker\n"),e("ul",[e("li",[t._v("支持字符串常量 (#15525 by island205)")])])]),e("li",[t._v("Image\n"),e("ul",[e("li",[t._v("支持 attrs 和 listeners (#15578 by @VanMess)")])])]),e("li",[t._v("Theme\n"),e("ul",[e("li",[t._v("新增 popup 背景配置 (#15412 by @iamkun)")])])]),e("li",[t._v("Chore\n"),e("ul",[e("li",[t._v("更新文档首页 (#15682 by @iamkun)")])])])]),e("h4",{attrs:{id:"bug-xiu-fu-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-11"}},[t._v("¶")]),t._v(" Bug 修复")]),e("ul",[e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("修复排序条件为空时的排序问题 (#15012 by @joelxr)")])])]),e("li",[t._v("Image\n"),e("ul",[e("li",[t._v("修复 ssr 问题和 object-fit 的兼容性 (#15346 by @SimonaliaChen)")])])]),e("li",[t._v("Input\n"),e("ul",[e("li",[t._v("修复 show-word-count 样式问题 (#15359 by @lvjiaxuan)")]),e("li",[t._v("修复删除图标样式 (#15354 by @YiiGuxing)")])])]),e("li",[t._v("Calendar\n"),e("ul",[e("li",[t._v("修复星期展示错误 (#15399 by @qingdengyue)")]),e("li",[t._v("修复十月展示问题 (#15394 by @qingdengyue)")])])]),e("li",[t._v("Tabs\n"),e("ul",[e("li",[t._v("修复 padding 问题 (#15461 by @SimonaliaChen)")])])]),e("li",[t._v("Tag\n"),e("ul",[e("li",[t._v("修复阻止冒泡问题 (#15150 by @infjer)")])])]),e("li",[t._v("Form\n"),e("ul",[e("li",[t._v("修复 form-item 的高度错误 (#15457 by @SimonaliaChen)")]),e("li",[t._v("修复 resetFields 问题 (15181 by @luckyCao)")])])]),e("li",[t._v("Tooltip\n"),e("ul",[e("li",[t._v("修复自定义 tabindex 不生效问题 (#15619 by @SimonaliaChen)")])])]),e("li",[t._v("Link\n"),e("ul",[e("li",[t._v("修复图标 class 问题 (#15752 by @iamkun)")])])]),e("li",[t._v("Select\n"),e("ul",[e("li",[t._v("回滚清除时，设置 value 为 null 的修改 (#15447 by @iamkun)")])])]),e("li",[t._v("Loading\n"),e("ul",[e("li",[t._v("修复 Dom 不更新的问题 (#15123 by @FAKER-A)")])])]),e("li",[t._v("Switch\n"),e("ul",[e("li",[t._v("修复事件重复触发问题 (#15178 by @FAKER-A)")])])]),e("li",[t._v("Slider\n"),e("ul",[e("li",[t._v("修复点击时样式问题 (#15561 by @luckyCao)")])])]),e("li",[t._v("Radio\n"),e("ul",[e("li",[t._v("修复 value 不更新的问题 (#14809 by @OverTree)")])])]),e("li",[t._v("Form\n"),e("ul",[e("li",[t._v("修复 resetFields 问题 (15181 by @luckyCao)")])])]),e("li",[t._v("Chore\n"),e("ul",[e("li",[t._v("更新依赖 (#15324 by ziyoung)")])])]),e("li",[t._v("Type\n"),e("ul",[e("li",[t._v("修复 Loading 定义文件 (#15635 by @iamkun)")]),e("li",[t._v("修复 Icon 定义文件 (#15634 by @iamkun)")]),e("li",[t._v("修复 Link 定义文件 (#15402 by @iamkun)")])])])]),e("h4",{attrs:{id:"you-hua-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-8"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("Cascader\n"),e("ul",[e("li",[t._v("重构 (#15611 by @SimonaliaChen)")])])]),e("li",[t._v("Chore\n"),e("ul",[e("li",[t._v("更新新建组件的脚本 (by @iamkun)")])])]),e("li",[t._v("Docs\n"),e("ul",[e("li",[t._v("重新命名文档变量 (#15185 by @liupl)")]),e("li",[t._v("更新 Image 组件文档 (#15423 by @haoranyu)")]),e("li",[t._v("修复 Form 组件文档错误 (#15228 by @SHERlocked93)")])])])]),e("h3",{attrs:{id:"2-8-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-8-2"}},[t._v("¶")]),t._v(" 2.8.2")]),e("p",[e("em",[t._v("2019-04-25")])]),e("h4",{attrs:{id:"bug-xiu-fu-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-12"}},[t._v("¶")]),t._v(" Bug 修复")]),e("ul",[e("li",[t._v("Icon\n"),e("ul",[e("li",[t._v("更新 icon (#15272 by @iamkun)")])])]),e("li",[t._v("文档\n"),e("ul",[e("li",[t._v("修复 Form 与 Input 文档样式 (#15273 by @ziyoung)")])])])]),e("h3",{attrs:{id:"2-8-1"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-8-1"}},[t._v("¶")]),t._v(" 2.8.1")]),e("p",[e("em",[t._v("2019-04-25")])]),e("h4",{attrs:{id:"bug-xiu-fu-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-13"}},[t._v("¶")]),t._v(" Bug 修复")]),e("ul",[e("li",[t._v("Icon\n"),e("ul",[e("li",[t._v("更新 Select 与 Cascader 的 icon (#15264 by @SimonaliaChen)")]),e("li",[t._v("更新 icon (#15258 by @iamkun)")])])])]),e("h4",{attrs:{id:"you-hua-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-9"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("Chore\n"),e("ul",[e("li",[t._v("更新构建脚本 (#15267 by @ziyoung)")])])]),e("li",[t._v("Docs\n"),e("ul",[e("li",[t._v("修复 link 的样式 (#15265 by @iamkun)")])])]),e("li",[t._v("其他\n"),e("ul",[e("li",[t._v("migrating 配置兼容驼峰名称 (#15260 by @SimonaliaChen)")])])])]),e("h3",{attrs:{id:"2-8-0"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-8-0"}},[t._v("¶")]),t._v(" 2.8.0")]),e("p",[e("em",[t._v("2019-04-25")])]),e("h4",{attrs:{id:"xin-te-xing-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-8"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("Divider\n"),e("ul",[e("li",[t._v("新增 Divider 组件 (#15055 by @island205)")])])]),e("li",[t._v("Rate\n"),e("ul",[e("li",[t._v("支持通过对象自定义 colors 与 icon-classes 属性 (#15051 by @SimonaliaChen)")])])]),e("li",[t._v("Link\n"),e("ul",[e("li",[t._v("新增 Link 组件 (#15052 by @iamkun)")])])]),e("li",[t._v("Calendar\n"),e("ul",[e("li",[t._v("新增 Calendar 组件 (#14908 by @ziyoung)")])])]),e("li",[t._v("Icon\n"),e("ul",[e("li",[t._v("新增图标 (#15214 by @iamkun)")])])]),e("li",[t._v("Alert\n"),e("ul",[e("li",[t._v("新增高饱和度主题 (#15041 by @island205)")])])]),e("li",[t._v("Image\n"),e("ul",[e("li",[t._v("新增 Image 组件 (#15117 by @SimonaliaChen)")])])]),e("li",[t._v("Collapse\n"),e("ul",[e("li",[t._v("CollapseItem 支持禁用 (#15076 by @ziyoung)")])])]),e("li",[t._v("Carousel\n"),e("ul",[e("li",[t._v("新增 direction 属性，支持垂直方向切换 (#15122 by @ziyoung)")])])]),e("li",[t._v("Pagination\n"),e("ul",[e("li",[t._v("新增 hide-on-single-page 属性 (#15096 by @ziyoung)")])])]),e("li",[t._v("Slider\n"),e("ul",[e("li",[t._v("新增 marks 属性 (#15133 by @luckyCao)")])])]),e("li",[t._v("Input\n"),e("ul",[e("li",[t._v("新增 show-word-count 属性 (#15075 by @luckyCao)")])])]),e("li",[t._v("InputNumber\n"),e("ul",[e("li",[t._v("新增 step-strictly 属性 (#15050 by @luckyCao)")])])]),e("li",[t._v("Tooltip, Dropdown, Popover\n"),e("ul",[e("li",[t._v("新增 tabindex 属性 (#15167 by @ziyoung)")])])])]),e("h4",{attrs:{id:"bug-xiu-fu-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bug-xiu-fu-14"}},[t._v("¶")]),t._v(" Bug 修复")]),e("ul",[e("li",[t._v("Notification\n"),e("ul",[e("li",[t._v("修复标题不换行的问题 (#15008 by @iamkun)")])])]),e("li",[t._v("Form\n"),e("ul",[e("li",[t._v("修复动态表单校验规则不生效的问题 (#14985 by @luckyCao)")]),e("li",[t._v("修复 label 的样式 (#14969 by @ziyoung)")]),e("li",[t._v("当 required 为 true 时，显示星号 (#15144 by @ziyoung)")])])]),e("li",[t._v("Pagination\n"),e("ul",[e("li",[t._v("修复 slot 未更新的问题 (#14711 by @lucyhao)")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("修复懒加载时加载数据的 bug (#15101 by @ziyoung)")]),e("li",[t._v("在合并单元格时，修复单元格的宽度计算不正确的问题 (#15196 by @ziyoung)")]),e("li",[t._v("提升表格的性能 (#14868 by @ziyoung)")]),e("li",[t._v("初始化时不再触发 sort-change 事件 (#14625 by @PeanutWatson)")]),e("li",[t._v("让 height 与 max-height 属性的行为保持一致 (#14660 by @arthurdenner)")])])]),e("li",[t._v("Dialog\n"),e("ul",[e("li",[t._v("修复内容不换行的问题 (#15027 by @iamkun)")])])]),e("li",[t._v("Alert\n"),e("ul",[e("li",[t._v("更新 typescript 定义文件 (#15186 by @ziyoung)")])])]),e("li",[t._v("Tabs\n"),e("ul",[e("li",[t._v("Fix issue where Promise rejection was hitting application (#14816 by @ffxsam)")]),e("li",[t._v("slot 改变时，重新渲染 (#15238 by @ziyoung)")])])]),e("li",[t._v("Message\n"),e("ul",[e("li",[t._v("修复 typescript 定义文件 (#14968 by @agoni1212)")])])]),e("li",[t._v("Select\n"),e("ul",[e("li",[t._v("修复当 value 为 undefined 或者 null 的报错 (#15022 by @luckyCao)")])])]),e("li",[t._v("Tree\n"),e("ul",[e("li",[t._v("当前节点被删除后，选中的节点也应该删除 (#14604 by @sinchang)")]),e("li",[t._v("提升性能 (#14881 by @ChenZhuoSteve)")])])]),e("li",[t._v("Dropdown\n"),e("ul",[e("li",[t._v("修复样式 (#14907 by @doing123)")])])]),e("li",[t._v("Slider\n"),e("ul",[e("li",[t._v("修复可访问性问题 (#14792 by @erezsob)")])])]),e("li",[t._v("Menu\n"),e("ul",[e("li",[t._v("如果 defaultIndex 不存在，activeIndex 应该为空 (#14074 by @hoythan)")])])]),e("li",[t._v("Directive\n"),e("ul",[e("li",[t._v("RepeatClick: 使用 Date.now 提升性能 (#14776 by @pavelmash)")])])]),e("li",[t._v("Upload\n"),e("ul",[e("li",[t._v("修复 Upload 的背景颜色 (#15039 by @iamkun)")])])]),e("li",[t._v("Theme\n"),e("ul",[e("li",[t._v("添加无圆角变量 (#15256 by @iamkun)")])])])]),e("h4",{attrs:{id:"you-hua-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-10"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("Chore\n"),e("ul",[e("li",[t._v("更新中文 changelog (#14965 by @iamkun)")]),e("li",[t._v("当 demo 描述为空时，不再显示 (#15014 by @ziyoung)")]),e("li",[t._v("显示 DevServer 的信息 (#15028 by @iamkun)")]),e("li",[t._v("修复 2.6 changelog 的 bug (#15026 by @iamkun)")]),e("li",[t._v("更新构建脚本 (#14821 by @abc3660170)")]),e("li",[t._v("本次开发时支持热更新 (#15221 by @SimonaliaChen)")]),e("li",[t._v("本地开发时，加载 sourcemap (#15087 by @ibufu)\nDocs")]),e("li",[t._v("重命名 demo 中的变量 (#14602 #15003 #15094 #15105 by @liupl)")]),e("li",[t._v("修复 upload 文档中的错误 (#15023 by @iamkun)")]),e("li",[t._v("更新 Form 文档 (#15040 by @iamkun)")]),e("li",[t._v("更新 Tabs 文档 (#15053 by @iamkun)")]),e("li",[t._v("使用 eleme.cn 作为新域名 (#15139 by @ziyoung)")]),e("li",[t._v("修复 Image 组件的路由名 (#15194 by @iamkun)")]),e("li",[t._v("删除多余的法语翻译 (#15207 by @iamkun)")])])])]),e("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-3"}},[t._v("¶")]),t._v(" 非兼容性更新")]),e("ul",[e("li",[t._v("Rate\n"),e("ul",[e("li",[t._v("禁用情况下，显示小位数 (#15089 by @haoranyu)")])])]),e("li",[t._v("Select\n"),e("ul",[e("li",[t._v("过滤情况下，placeholder 为选中选项的 label (#14989 by @ibufu)")])])])]),e("h3",{attrs:{id:"2-7-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-7-2"}},[t._v("¶")]),t._v(" 2.7.2")]),e("p",[e("em",[t._v("2019-04-03")])]),e("h4",{attrs:{id:"xiu-fu"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu"}},[t._v("¶")]),t._v(" 修复")]),e("ul",[e("li",[t._v("Form\n"),e("ul",[e("li",[t._v("修复 "),e("code",[t._v("label-width")]),t._v(" 为 "),e("code",[t._v("auto")]),t._v(" 的样式 (#14955 by @ziyoung)")])])])]),e("h4",{attrs:{id:"you-hua-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-11"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("Docs\n"),e("ul",[e("li",[t._v("修复文档内图片链接错误 (#14957 by @iamkun)")])])]),e("li",[t._v("Chore\n"),e("ul",[e("li",[t._v("修复发布时 mkdir 异常 (#14952 by @iamkun)")])])])]),e("h3",{attrs:{id:"2-7-1"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-7-1"}},[t._v("¶")]),t._v(" 2.7.1")]),e("p",[e("em",[t._v("2019-04-03")])]),e("h4",{attrs:{id:"xiu-fu-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-2"}},[t._v("¶")]),t._v(" 修复")]),e("ul",[e("li",[t._v("Select\n"),e("ul",[e("li",[t._v("清空时设置 value 为 null (#14322 by @aaronfulkerson)")])])]),e("li",[t._v("Input\n"),e("ul",[e("li",[t._v("当类型改变时更新 DOM (#14889 by @wacky6)")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("修复当有展开列时 "),e("code",[t._v("defaultExpandAll")]),t._v(" 的行为 (#14935 by @ziyoung)")])])]),e("li",[t._v("Dialog\n"),e("ul",[e("li",[t._v("可以设置背景色 (#14939 by @ziyoung)")])])]),e("li",[t._v("Form\n"),e("ul",[e("li",[e("code",[t._v("label-width")]),t._v(" 支持自动宽度 (#14944 by @ziyoung)")])])])]),e("h4",{attrs:{id:"you-hua-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-12"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("Docs\n"),e("ul",[e("li",[t._v("更新西班牙语文档 (#14913 by @Gonzalo2310)")]),e("li",[t._v("新增组件自动生成法语文档 (#14924 by @ziyoung)")]),e("li",[t._v("更新 Tabs 文档 (#14938 by @ziyoung)")])])])]),e("h3",{attrs:{id:"2-7-0"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-7-0"}},[t._v("¶")]),t._v(" 2.7.0")]),e("p",[e("em",[t._v("2019-03-28")])]),e("h4",{attrs:{id:"xin-te-xing-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-9"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("增加对树形结构数据的支持 (#14632 by @ziyoung)")])])])]),e("h4",{attrs:{id:"xiu-fu-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-3"}},[t._v("¶")]),t._v(" 修复")]),e("ul",[e("li",[t._v("Tabs\n"),e("ul",[e("li",[t._v("阴影样式使用全局主颜色 (#14558 by @Richard-Choooou)")]),e("li",[t._v("当 label 改变时触发更新 (#14496 by @akki-jat)")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("Table footer 与 body 的对齐一致 (#14730 by @ziyoung)")])])]),e("li",[t._v("NavMenu\n"),e("ul",[e("li",[t._v("修复点击 el-submenu 多次触发 childMenu 问题 (#14443 by @PanJiaChen)")])])]),e("li",[t._v("Dropdown\n"),e("ul",[e("li",[t._v("兼容 Vue 2.6 新 v-slot 语法 (#14832 by @ziyoung)")])])]),e("li",[t._v("ColorPicker\n"),e("ul",[e("li",[t._v("修复十六进制颜色字符串解析问题 (#14793 by @iamkun)")])])]),e("li",[t._v("Tree\n"),e("ul",[e("li",[t._v("恢复 pr #13349 (#14847 by @ziyoung)")])])]),e("li",[t._v("Tooltip\n"),e("ul",[e("li",[t._v("当初始值为 true 时默认显示 (#14826 by @ziyoung)")])])]),e("li",[t._v("Docs\n"),e("ul",[e("li",[t._v("更新 Cascader 文档 (#14442 by @panhezeng)")])])]),e("li",[t._v("Style\n"),e("ul",[e("li",[t._v("修复媒体查询 sm-only, md-only, lg-only 问题 (#14611 by @sinchang)")])])])]),e("h4",{attrs:{id:"you-hua-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-13"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("Chore\n"),e("ul",[e("li",[t._v("增加网页描述信息 (#14802 by @iamkun)")])])])]),e("h3",{attrs:{id:"2-6-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-6-3"}},[t._v("¶")]),t._v(" 2.6.3")]),e("p",[e("em",[t._v("2019-03-21")])]),e("h4",{attrs:{id:"xiu-fu-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-4"}},[t._v("¶")]),t._v(" 修复")]),e("ul",[e("li",[t._v("修复 Cascader 文档页的样式 (#14789 by @ziyoung)")]),e("li",[t._v("移除 Cascader 中多余的 DOM 操作 (#14788 by @ziyoung)")]),e("li",[t._v("DateRange 支持夏令时 (#14562 by @wacky6)")])]),e("h3",{attrs:{id:"2-6-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-6-2"}},[t._v("¶")]),t._v(" 2.6.2")]),e("p",[e("em",[t._v("2019-03-21")])]),e("h4",{attrs:{id:"xin-te-xing-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-10"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("DatePicker\n"),e("ul",[e("li",[t._v("支持 monthrange 类型 (#14487 by @zxyRealm)")])])]),e("li",[t._v("i18n\n"),e("ul",[e("li",[t._v("添加 Croatian 语言包 (#14360 by @danijelh)")])])]),e("li",[t._v("Docs\n"),e("ul",[e("li",[t._v("更新 2.6.1 法语文档，修复笔误 (#14555 by @smalesys)")]),e("li",[t._v("更新法语翻译 (#14643 by @smalesys)")])])])]),e("h4",{attrs:{id:"xiu-fu-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-5"}},[t._v("¶")]),t._v(" 修复")]),e("ul",[e("li",[t._v("Input\n"),e("ul",[e("li",[t._v("Fix regression (#14572 by @wacky6)")])])]),e("li",[t._v("DatePicker\n"),e("ul",[e("li",[t._v("修复 first-day-of-week 的计算 (#14523 by @sinchang)")]),e("li",[t._v("修复 WeekPicker value-format 的问题 (#13754 by @wacky6)")])])]),e("li",[t._v("Steps\n"),e("ul",[e("li",[t._v("修复 #14502 (#14596 by @sinchang)")]),e("li",[t._v("修复简单模式下的样式 (#14610 by @sinchang)")])])]),e("li",[t._v("Docs\n"),e("ul",[e("li",[t._v("重命名 Table 文档中的变量 (#14587 by @likwotsing)")]),e("li",[t._v("添加法语文档索引 (#14565 by @iamkun)")]),e("li",[t._v("修复 TimePicker 文档页的样式 (#14579 by @ziyoung)")]),e("li",[t._v("重命名 Upload 文档中的变量 (#14593 by @liupl)")]),e("li",[t._v("在 Form 文档中 添加的 async-validator 文档 (#14694 by @iamkun)")]),e("li",[t._v("修复 Tooltip 文档的 bug (#14748 by @iamkun)")]),e("li",[t._v("修复笔误 (#14751 by @2bj)")]),e("li",[t._v("修复 Switch 在移动端 Webkit 浏览器的高亮问题 (#14703 by @VladG0r)")])])])]),e("h4",{attrs:{id:"you-hua-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-14"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("Chore:\n"),e("ul",[e("li",[t._v("更新 ci 构建脚本 (#14600 by @ziyoung)")]),e("li",[t._v("更新谷歌统计 (#14560 by @iamkun)")]),e("li",[t._v("添加更多谷歌统计事件 (#14633 by @iamkun)")]),e("li",[t._v("更新聊天组信息 (#14741 by @iamkun)")]),e("li",[t._v("升级测试依赖 (#14735 by @wacky6)")]),e("li",[t._v("升级 gulp (#14745 by @ziyoung)")]),e("li",[t._v("使用 codepen 显示 demo，修复文档中的错误 (#14747 by @ziyoung)")])])])]),e("h3",{attrs:{id:"2-6-1"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-6-1"}},[t._v("¶")]),t._v(" 2.6.1")]),e("p",[e("em",[t._v("2019-03-03")])]),e("h4",{attrs:{id:"xiu-fu-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-6"}},[t._v("¶")]),t._v(" 修复")]),e("ul",[e("li",[e("strong",[t._v("不再指定 node 版本")]),t._v(" (by @iamkun in #14546)")]),e("li",[t._v("调整 "),e("code",[t._v("deloy-faas.sh")]),t._v(" 中的文档目录 (by @ziyoung in #14553)")]),e("li",[t._v("调整 2.6.0 中 changelog 日期样式 (by @island205 in #14547)")]),e("li",[t._v("修复拼写错误 (by @wack6 in #14552)")])]),e("h3",{attrs:{id:"2-6-0"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-6-0"}},[t._v("¶")]),t._v(" 2.6.0")]),e("p",[e("em",[t._v("2019-03-01")])]),e("h4",{attrs:{id:"xin-te-xing-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-11"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("Timeline\n"),e("ul",[e("li",[t._v("添加 Timeline 组件 (by @jikkai in #14248)")])])]),e("li",[t._v("DropdownItem\n"),e("ul",[e("li",[e("code",[t._v("el-dropdown-item")]),t._v(" 支持添加 icon (by @gabrielboliveira in #14088)")])])]),e("li",[t._v("Input\n"),e("ul",[e("li",[t._v("添加 "),e("code",[t._v("show-password")]),t._v(" 属性，支持配置显示密码按钮 (by @phshy0607 in #13966)")])])]),e("li",[t._v("Select\n"),e("ul",[e("li",[t._v("添加 slot "),e("code",[t._v("empty")]),t._v(" (by @elfman in #13785)")])])]),e("li",[t._v("Autocomplete\n"),e("ul",[e("li",[t._v("添加 "),e("code",[t._v("highlight-first-item")]),t._v(" 属性，控制是否默认突出显示远程搜索建议中的第一项 (by @YamenSharaf in #14269)")])])]),e("li",[t._v("I18n\n"),e("ul",[e("li",[t._v("添加亚美尼亚语支持 (by @hamletbarsamyan in #14214)")])])]),e("li",[t._v("Docs\n"),e("ul",[e("li",[t._v("新增法语文档 (by @smalesys in #12153, #14418, #14434)")])])])]),e("h4",{attrs:{id:"you-hua-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-15"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("Alert\n"),e("ul",[e("li",[t._v("组件对通过 slot 传入的 description 也应用默认样式类 (by @iamkun in #14488)")])])]),e("li",[t._v("InputNumber\n-移除多余的 "),e("code",[t._v("parseFloat")]),t._v(" (by @JuniorTour in #14172)")]),e("li",[t._v("Menu\n"),e("ul",[e("li",[t._v("支持 "),e("code",[t._v("el-menu-item")]),t._v(" 不添加 index (by @georgyfarniev in #13298)")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("移除无用的 DOM 操作 (by @elfman in #13643)")])])]),e("li",[t._v("Upload\n"),e("ul",[e("li",[t._v("代码优化 (by @elfman in #13973)")])])]),e("li",[t._v("Popup\n"),e("ul",[e("li",[t._v("移除无用代码 (by @KAionro in #14413)")])])]),e("li",[t._v("Docs\n"),e("ul",[e("li",[t._v("添加更多文档说明如何贡献代码 (by @island205 in #14355)")]),e("li",[t._v("添加 "),e("code",[t._v("el-input")]),t._v(" 是受控组件的警示 (by @wacky6 in #14463)")]),e("li",[t._v("优化 Table 的文档 (by @luguokong in #14329)")]),e("li",[t._v("更新 Input 文档 (by @iamkun in #14437)")]),e("li",[t._v("优化自定义主题文档 (by @wangguohao in #14297)")]),e("li",[t._v("为 Icon 文档添加 hover 效果 (by @tuxinghuan in #14295)")])])]),e("li",[t._v("Build\n"),e("ul",[e("li",[t._v("压缩 Element 文档站的 JS 和 CSS 文件 (by @iamkun in #14430)")]),e("li",[t._v("优化 Webpack 打包速度，从6分钟优化到1分多 (by @hetech in #14484)")]),e("li",[t._v("添加 CLI 工具，选择版本号 (by @hetech in #14354)")])])]),e("li",[t._v("使用 Stale 来管理过时（暂定1年）的 Issue 和 PR (by @island205 in #14392)")])]),e("h4",{attrs:{id:"wen-ti-xiu-fu"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#wen-ti-xiu-fu"}},[t._v("¶")]),t._v(" 问题修复")]),e("ul",[e("li",[t._v("Menu\n"),e("ul",[e("li",[t._v("修复浏览器标签切换引起的 focus 问题 (by @liupl in #13976)")])])]),e("li",[t._v("MessageBox\n"),e("ul",[e("li",[t._v("修复 TS 定义 (by @NateScarlet in #14278)")])])]),e("li",[t._v("ScrollBar\n"),e("ul",[e("li",[t._v("修复点击鼠标右键导致拖动的问题 (by @xifeiwu in #14196)")])])]),e("li",[t._v("Switch\n"),e("ul",[e("li",[t._v("添加 "),e("code",[t._v("validate-event")]),t._v(" 属性，设置改变 Switch 状态时是否触发表单的校验 (by @hetech in #14426)")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("修复多 Table 实例共享 "),e("code",[t._v("toggleAllSelection")]),t._v(" 方法，造成无法切换问题 (by @letanure in #14075)")])])]),e("li",[t._v("Tabs & Dropdown\n"),e("ul",[e("li",[t._v("修复样式问题 (by @hetech in #14452)")])])]),e("li",[t._v("Tree\n"),e("ul",[e("li",[t._v("与 Table 统一占位文样式 (by @ColinCll in #14331)")])])]),e("li",[t._v("Docs\n"),e("ul",[e("li",[t._v("修复 DatetimePicker 文档问题 (by @iamkun in #14290)")]),e("li",[t._v("修复 DatePicker 文档拼写问题 (by @helmut in #14481)")]),e("li",[t._v("修复分页组件文档样式问题 (by @liuchuzhang in #14451)")])])])]),e("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-4"}},[t._v("¶")]),t._v(" 非兼容性更新")]),e("ul",[e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("修复 row 事件的参数顺序 (by @jikkai in #12086)")])])])]),e("h3",{attrs:{id:"2-5-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-5-4"}},[t._v("¶")]),t._v(" 2.5.4")]),e("p",[e("em",[t._v("2019-02-01")])]),e("h4",{attrs:{id:"xiu-fu-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-7"}},[t._v("¶")]),t._v(" 修复")]),e("ul",[e("li",[t._v("构建: 修复 "),e("code",[t._v(".babelrc")]),t._v(" 配置问题——导致 Tree 等组件没有动画 (by @island205 in #14282)")])]),e("h3",{attrs:{id:"2-5-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-5-3"}},[t._v("¶")]),t._v(" 2.5.3")]),e("p",[e("em",[t._v("2019-01-31")])]),e("h4",{attrs:{id:"you-hua-16"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-16"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("优化 Message 的代码 (by @vok123 in #14029)")]),e("li",[t._v("移除 gh-pages (by @ziyoung in #14266)")]),e("li",[t._v("添加 IssueHunt 的链接 (by @island205 in #14261)")])]),e("h4",{attrs:{id:"xiu-fu-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-8"}},[t._v("¶")]),t._v(" 修复")]),e("ul",[e("li",[t._v("修复 UMD 包在服务器端运行出错的问题 (by @island205 in #14242)")]),e("li",[t._v("修复 Tabbar 高亮时的样式 (by @iamkun in #14240)")]),e("li",[t._v("修复 Table 示例代码的错误 (by @xunmeng in #14253)")])]),e("h3",{attrs:{id:"2-5-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2"}},[t._v("¶")]),t._v(" 2.5.2")]),e("p",[e("em",[t._v("2019-01-27")])]),e("h4",{attrs:{id:"you-hua-17"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-17"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("文档:\n"),e("ul",[e("li",[t._v("2.5.1 版本西班牙语文档更新 (by @Gonzalo2310 in #14231)")])])])]),e("h4",{attrs:{id:"xiu-fu-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-9"}},[t._v("¶")]),t._v(" 修复")]),e("ul",[e("li",[t._v("构建:\n"),e("ul",[e("li",[t._v("删除 umd 模块 "),e("code",[t._v("lib/index.js")]),t._v(" 中本没有的注释 (by @island205 in #14233)")]),e("li",[t._v("修复 nuxt.js 中关于 "),e("code",[t._v("export")]),t._v(" 关键字的报错 (by @island205 in #14232)")]),e("li",[t._v("修复发布 2.5.1 过程中的错误 (by @iamkun in #14228)")])])])]),e("h3",{attrs:{id:"2-5-1"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1"}},[t._v("¶")]),t._v(" 2.5.1")]),e("p",[e("em",[t._v("2019-01-26")])]),e("h4",{attrs:{id:"you-hua-18"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-18"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("DatePicker：添加月、年高亮的样式（by @Debiancc in #14211）")]),e("li",[t._v("更新 2.5.0 changelog （by @wacky6 in #14217）")])]),e("h4",{attrs:{id:"xiu-fu-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-10"}},[t._v("¶")]),t._v(" 修复")]),e("ul",[e("li",[t._v("修复升级 Webpack 4 产生的问题，无法具名 "),e("code",[t._v("import")]),t._v(" 组件，"),e("code",[t._v("ELEMENT.locale()")]),t._v(" 调用报错。（by @island205 in #14220）")]),e("li",[t._v("恢复 2.4.11 文档 (by @iamkun in #14222)")])]),e("h3",{attrs:{id:"2-5-0"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0"}},[t._v("¶")]),t._v(" 2.5.0")]),e("p",[e("em",[t._v("2019-01-25")])]),e("h4",{attrs:{id:"xin-te-xing-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-12"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("DatePicker\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("validate-event")]),t._v(" 属性 (by @ziyoung in #13531)")])])]),e("li",[t._v("DateTimePicker\n"),e("ul",[e("li",[e("code",[t._v("pickerOptions")]),t._v(" 支持 "),e("code",[t._v("selectableRange")]),t._v(" 选项 (by @eeeeeeeason)")])])]),e("li",[t._v("Tag\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("click")]),t._v(" 事件 (by @licdream in #14106)")])])]),e("li",[t._v("I18n\n"),e("ul",[e("li",[t._v("新增 柯尔克孜语 (Kyrgyz) (by @zzjframework in #14174)")])])])]),e("h4",{attrs:{id:"you-hua-19"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#you-hua-19"}},[t._v("¶")]),t._v(" 优化")]),e("ul",[e("li",[t._v("升级到 webpack@4 (by @jikkai in #14173)")]),e("li",[t._v("Input\n"),e("ul",[e("li",[t._v("简化内部实现，遵循单向数据流；修复若干相关 Bug (by @wacky6 in #13471)")])])]),e("li",[t._v("更新 Axure 文件，增加新组件 (by @ziyoung in #13773)")])]),e("h4",{attrs:{id:"xiu-fu-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-11"}},[t._v("¶")]),t._v(" 修复")]),e("ul",[e("li",[t._v("Autocomplete\n"),e("ul",[e("li",[t._v("修正下拉框最后一行显示不完整的问题 (by @ziyoung in #13597)")]),e("li",[t._v("修正下拉框箭头 (by @liuchuzhang in #13762)")])])]),e("li",[t._v("Carousel\n"),e("ul",[e("li",[t._v("组件销毁时释放内部 Timer (by @elfman in #13820)")])])]),e("li",[t._v("Cascader\n"),e("ul",[e("li",[t._v("移除已废弃的计算属性的 cache 属性 (by @iamkun in #13737)")]),e("li",[t._v("修正 TypeScript 中 CascaderOption 类型定义 (by @NateScarlet in #13613)")]),e("li",[t._v("修正图标覆盖文字的问题 (by @ziyoung in #13596)")])])]),e("li",[t._v("Checkbox\n"),e("ul",[e("li",[t._v("改进显示样式 (by @PanJiaChen)")])])]),e("li",[t._v("DatePicker\n"),e("ul",[e("li",[t._v("修正 TimeSpinner 中缺失的 v-for "),e("code",[t._v("key")]),t._v(" 属性 (by @Ende93 in #13547)")]),e("li",[t._v("修正周选择器在跨年时的高亮行为 (by @suyi91 in #13883)")])])]),e("li",[t._v("Input\n"),e("ul",[e("li",[t._v("修复 textarea 时的 DOM 节点引用 (by @laomu1988 @island205 in #13803)")])])]),e("li",[t._v("Pagination\n"),e("ul",[e("li",[t._v("输入框的值不会小于 1 (by @elfman in #13727)")])])]),e("li",[t._v("Popover\n"),e("ul",[e("li",[t._v("修正 hover 的触发行为 (by @goldengecko in #13104)")]),e("li",[t._v("修正弹出框的内存泄漏 (by @qpxtWhite in #13988)")])])]),e("li",[t._v("Radio\n"),e("ul",[e("li",[t._v("改进显示样式 (by @ohhoney1)")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("改进点击排序箭头时的行为 (by @ohhoney1 in #12890)")]),e("li",[t._v("修正 IE10+ 中 “暂无数据” 提示的垂直布局 (by @imzjy in #13638)")]),e("li",[t._v("修正文档中 "),e("code",[t._v("index")]),t._v(" 的类型说明 (by @ilovefafa in #13628)")]),e("li",[t._v("修正多级表头使用 "),e("code",[t._v("fixed")]),t._v(" 属性时，表尾合计行的显示样式 (by @luckyCao in #13914)")])])]),e("li",[t._v("Tabs\n"),e("ul",[e("li",[t._v("修正自动滚动 (by @iamkun in #13696)")]),e("li",[t._v("通过面板名称查找面板 (by @iamkun in #13705)")]),e("li",[t._v("使用 "),e("code",[t._v("paneName")]),t._v(" 计算面板样式 (by @iamkun in #13733)")])])]),e("li",[t._v("Tree\n"),e("ul",[e("li",[t._v("修正 "),e("code",[t._v("showCheckbox")]),t._v(" 不能影响子节点的问题 (by @KidneyFlower)")]),e("li",[t._v("更新文档和 TypeScript 定义 (by @ziyoung in #13540)")])])]),e("li",[t._v("Upload\n"),e("ul",[e("li",[e("code",[t._v("list-type")]),t._v(" 改变时，保留 "),e("code",[t._v("url")]),t._v(" 属性 (by @elfman in #13771)")])])]),e("li",[t._v("Slider\n"),e("ul",[e("li",[t._v("修正源代码缩进 (by @wacky6 in #13955)")])])]),e("li",[t._v("I18n\n"),e("ul",[e("li",[t._v("补充加泰罗尼亚语 (Catalan) 翻译 (by @jaumesala)")]),e("li",[t._v("补充俄语 (Russian) 翻译 (by @justlp in #13658)")]),e("li",[t._v("补充芬兰语 (Finnish) 翻译 (by @jenkrisu in #14137)")])])]),e("li",[t._v("Doc\n"),e("ul",[e("li",[t._v("更新西班牙语文档至 2.4.11 (by @Gonzalo2310 in #13522)")])])]),e("li",[t._v("其它\n"),e("ul",[e("li",[t._v("移除多余的构建脚本 (by @ziyoung)")]),e("li",[t._v("修正文档超链接 (by @iamkun in #13753)")]),e("li",[t._v("修正文档中不一致的大小写 (by @wonderjar)")]),e("li",[t._v("增加钉钉群的二维码 (by @iamkun in #13957)")]),e("li",[t._v(".gitignore 增加 yarn 日志文件 (by @mimimi in #13922)")]),e("li",[t._v("移除赞助商 多态 (by @island205 in #14156)")]),e("li",[t._v("Update readme qr code src (by @iamkun in #13960)")]),e("li",[t._v("更新 CDN 链接，修正错别字 (by @ziyoung)")])])])]),e("h3",{attrs:{id:"2-4-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11"}},[t._v("¶")]),t._v(" 2.4.11")]),e("p",[e("em",[t._v("2018-11-21")])]),e("ul",[e("li",[t._v("撤销 pr #13296，修复点击 Menu 外部导致 Submenu 收起的问题，#13478")]),e("li",[t._v("调整小屏幕（xs）媒体查询断点，#13468 （by @alekoshen712）")])]),e("h3",{attrs:{id:"2-4-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10"}},[t._v("¶")]),t._v(" 2.4.10")]),e("p",[e("em",[t._v("2018-11-16")])]),e("ul",[e("li",[t._v("修复多次点击 Select 才显示下拉列表的问题，#13268")]),e("li",[t._v("Form 禁用时不显示 Input 的 clear 图标，#13208")]),e("li",[t._v("调整 Select，Progress，Autocomplete，Tooltip，Collaspe，TimePicker 的样式，#13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)")]),e("li",[t._v("Carousel 组件新增 "),e("code",[t._v("loop")]),t._v(" 属性，#13217")]),e("li",[t._v("Table 的 data 改变时，高亮行会继续保留，#13200")]),e("li",[t._v("Table 的 header slot 可以接收参数，#13263")]),e("li",[t._v("Table 的 "),e("code",[t._v("clearFilter")]),t._v(" 方法支持参数，#13176")]),e("li",[t._v("Table 单元格内没有内容时不再创建 Tooltip，#13152 (by @rongxingsun)")]),e("li",[t._v("ColorPicker 面板的输入框内容可以正常显示了，#13278")]),e("li",[t._v("在拖拽时，ColorPicker 不再触发表单校验，#13299")]),e("li",[t._v("InputNumber 新增 "),e("code",[t._v("select")]),t._v(" 方法，#13286 (by @st-sloth)")]),e("li",[t._v("Autocomplete 新增 "),e("code",[t._v("clear")]),t._v(" 事件，#12171(by arthurdenner) #13326")]),e("li",[t._v("可以通过点击 Menu 外部来关闭 Menu，#13296")]),e("li",[t._v("Form 的 "),e("code",[t._v("validateField")]),t._v(" 方法可以接收参数，#13319")]),e("li",[t._v("Cascader 新增 "),e("code",[t._v("visible-change")]),t._v(" 事件，#13415")]),e("li",[t._v("DatePicker 新增 range-separator slot， #13272 (by @milworm)")]),e("li",[t._v("Tree 新增 "),e("code",[t._v("iconClass")]),t._v(" 与 "),e("code",[t._v("currentNodeKey")]),t._v(" 属性，#13337 #13197 (by @isnifer)")]),e("li",[t._v("Progress 的 "),e("code",[t._v("status")]),t._v(" 添加了 text #13198 (by @ali-master)")]),e("li",[t._v("修复 Tree 的 "),e("code",[t._v("defaultCheckedKeys")]),t._v(" 导致显示的错误，#13349 (by @dive2Pro)")])]),e("h3",{attrs:{id:"2-4-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9"}},[t._v("¶")]),t._v(" 2.4.9")]),e("p",[e("em",[t._v("2018-10-26")])]),e("ul",[e("li",[t._v("Form 组件 clearValidate 方法参数支持字符串，#12990 （by @codinglobster）")]),e("li",[t._v("Badge 新增 type 属性，#12991")]),e("li",[t._v("用户可以使用 scoped-slot 来自定义表头，#13012（by @ivanseidel）")]),e("li",[t._v("修复 IE 下 Select 输入框不能输入的问题，#13034（by @GaliMU）")]),e("li",[t._v("Select 多选时，选项不换行，#12329 （by @akki-jat）")]),e("li",[t._v("Select 下拉列表展开后，箭头图标也可以正确显示，#12353（by @firesh）")]),e("li",[t._v("修复 Select 的 size 属性不生效的问题，#13070")]),e("li",[t._v("多选时可以清除 Select 已选中的值，#13049（by @ZSkycat）")]),e("li",[t._v("修复最后一个 TabNav 不能删除的问题，#13039")]),e("li",[t._v("修复 TabNav 中 label 显示不正确的问题，#13178")]),e("li",[t._v("Alert 新增 title slot，#13082（by @Kingwl）")]),e("li",[t._v("修复 Table 中的 tooltip 内容不正确的问题，#13159（by @elfman）")]),e("li",[t._v("优化 Upload 文件列表删除时的动画，#12987")]),e("li",[t._v("当 InputNumber 控制按钮不显示时，调整了边距，#13052")])]),e("h3",{attrs:{id:"2-4-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8"}},[t._v("¶")]),t._v(" 2.4.8")]),e("ul",[e("li",[t._v("Switch 聚焦时不显示轮廓，#12771")]),e("li",[t._v("修复 Dropdown 在 ButtonGroup 中样式问题，#12819 （by @bluejfox）")]),e("li",[t._v("Dialog 新增 opened 事件，#12828")]),e("li",[t._v("修复 TabNav 显示顺序不正确的问题，#12846")]),e("li",[t._v("修复 Tabs 没有滑动到选中 tab 的问题，#12948")]),e("li",[t._v("修复 Tree 节点在拖拽时标识符不显示的问题，#12854")]),e("li",[t._v("Form 的 validate 事件参数中包含了校验的信息，#12860 （by @YamenSharaf）")]),e("li",[t._v("修复 DatePicker 没有校验用户输入时间的合法性问题，#12898")]),e("li",[t._v("修复 Table 表头的 "),e("code",[t._v("render-header")]),t._v("属性不生效的问题，#12914")])]),e("h3",{attrs:{id:"2-4-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7"}},[t._v("¶")]),t._v(" 2.4.7")]),e("p",[e("em",[t._v("2018-09-14")])]),e("ul",[e("li",[t._v("修复 DatePicker 未触发表单检验的问题，#12328，#12348")]),e("li",[t._v("修复 DatePicker 多选时报错的问题，#12347")]),e("li",[t._v("修复 DatePicker 选择时间时 spinner 位置不正确的问题，#12415 （by @rang-ali）")]),e("li",[t._v("修复 Datepicker 输入框自动填充的问题，#12521 （by @abdallanayer）")]),e("li",[t._v("修复 Cascader 中 Input 未高亮的问题，#12341")]),e("li",[t._v("修复 Tabpane 顺序不正确的问题，#12346")]),e("li",[t._v("修复 ColorPicker 取色光标位置不正确的问题，#12376 （by @cnwhy）")]),e("li",[t._v("调整 Submenu 的样式，#12457")]),e("li",[t._v("修复 Submenu 选中后没有高亮的问题，#12479")]),e("li",[t._v("修复 Cascader 选择值不正确的问题，#12508 （by @huangjinqiang）")]),e("li",[t._v("修复 Pagination 输入框值不正确的问题，#12525")]),e("li",[t._v("调整 Pagination 触发事件的顺序，#12530")]),e("li",[t._v("修复 Table 的 filter 不显示的问题，#12539")]),e("li",[t._v("修复 Tree 无法删除节点的问题，#12684")]),e("li",[t._v("修复 Select 在单选时 Input 高度变化的问题，#12719")]),e("li",[t._v("修复 Form 在嵌套时 label 显示不正确的问题，#12748")]),e("li",[t._v("新增 Input 的 autocomplete 属性，废弃 auto-complete 属性，#12514 （by @axetroy）")]),e("li",[t._v("新增 Form 的 slot-scope 展示表单校验信息，#12715 （by @YamenSharaf）")])]),e("h3",{attrs:{id:"2-4-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6"}},[t._v("¶")]),t._v(" 2.4.6")]),e("p",[e("em",[t._v("2018-08-09")])]),e("ul",[e("li",[t._v("修复 Table 的 filter 初始值为空数组时不显示筛选图标的问题，#12165")]),e("li",[t._v("修复 Menu 在更改 "),e("code",[t._v("collapse")]),t._v(" 时不保存菜单激活状态的问题，#12178 (by @elfman)")]),e("li",[t._v("修复 Cascader 未转义特殊字符的问题，#12248")]),e("li",[t._v("修复禁用的 RadioButton 在点击时显示 box-shadow 的问题，#12262")]),e("li",[t._v("修复 Select 初始值为 "),e("code",[t._v("undefined")]),t._v(" 时方向键失效的问题，#12322")]),e("li",[t._v("修复 Select 多选时输入的关键字消失的问题，#12304")]),e("li",[t._v("修复 Select 多选时查询函数没有去抖的问题，#12181")]),e("li",[t._v("修复 Dialog 在全屏显示时宽度不正确的问题，#12203")]),e("li",[t._v("修复 Main 在 IE 下的显示不正确的问题，#12237")]),e("li",[t._v("修复 Input 触发两次表单校验的问题，#12260")]),e("li",[t._v("修复 Tree 在懒加载时添加节点导致节点消失的问题，#12256")]),e("li",[t._v("修复 Tree 节点在拖拽后无法删除的问题，#12279")]),e("li",[t._v("修复 Popover 在 InputNumber 聚焦时不显示的问题，#12284")]),e("li",[t._v("添加 Autocomplete 的 popper-append-to-body 属性，#12241")]),e("li",[t._v("添加 Pagination 的 "),e("code",[t._v("page-size")]),t._v(" 属性 "),e("code",[t._v("sync")]),t._v(" 修饰符的支持，#12281")])]),e("h3",{attrs:{id:"2-4-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5"}},[t._v("¶")]),t._v(" 2.4.5")]),e("p",[e("em",[t._v("2018-07-26")])]),e("ul",[e("li",[t._v("修复 Table 设置 "),e("code",[t._v("class-name")]),t._v(" 对 "),e("code",[t._v("expand")]),t._v(" 列不生效的问题，#12006")]),e("li",[t._v("新增 Table 的 "),e("code",[t._v("toggleAllSelection")]),t._v(" 方法，#12047")]),e("li",[t._v("修复 Input 包含 Select 时，suffix 插槽位置显示不正确的问题，#12108")]),e("li",[t._v("修复 Option 的 "),e("code",[t._v("line-height")]),t._v(" 无法设置的问题，#12120")]),e("li",[t._v("修复初始值为 "),e("code",[t._v("null")]),t._v(" 的 TimeSelect 在执行 "),e("code",[t._v("resetField")]),t._v(" 后无法再赋值的问题，#12010")]),e("li",[t._v("修复 Tree 组件中不响应方向键以外 keydown 事件的问题，#12008")]),e("li",[t._v("修复 Tree 在懒加载情况下选中父节点的问题，#12106")]),e("li",[t._v("Tree 的 "),e("code",[t._v("getCheckedNodes")]),t._v(" 方法新增 "),e("code",[t._v("includeHalfChecked")]),t._v(" 参数，#12014")])]),e("h3",{attrs:{id:"2-4-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4"}},[t._v("¶")]),t._v(" 2.4.4")]),e("p",[e("em",[t._v("2018-07-13")])]),e("ul",[e("li",[t._v("修复重置表单后触发 Select 组件校验问题，#11837")]),e("li",[t._v("修复 Input 组件 "),e("code",[t._v("suffix")]),t._v(" 与 "),e("code",[t._v("append")]),t._v(" 共存时样式错乱问题，#11951")]),e("li",[t._v("修复可清空的只读 Input 仍会显示清空图标的问题，#11967")]),e("li",[t._v("修复 Tree 节点禁用时仍可以选中的问题，#11847")]),e("li",[t._v("修复 Tree "),e("code",[t._v("default-checked-keys")]),t._v(" 属性不生效的问题，#11971")]),e("li",[t._v("修复 Tree 在过滤节点时下 "),e("code",[t._v("empty-text")]),t._v(" 不显示的问题，#11971")]),e("li",[t._v("修复 Table 的 "),e("code",[t._v("empty-text")]),t._v(" 过长时的位置样式问题，#11965")]),e("li",[t._v("修复 Table 的 "),e("code",[t._v("current-row-key")]),t._v(" 设置为 "),e("code",[t._v("null")]),t._v(" 时高亮行不清除的问题，#11866")]),e("li",[t._v("修复当 "),e("code",[t._v("filters")]),t._v(" 为空数组时显示过滤器下拉列表的问题，#11864")]),e("li",[t._v("修复 Radio 的 label 不阻止事件冒泡的问题，#11912")])]),e("h3",{attrs:{id:"2-4-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3"}},[t._v("¶")]),t._v(" 2.4.3")]),e("p",[e("em",[t._v("2018-07-03")])]),e("ul",[e("li",[t._v("修复当自定义 Tree 节点高度时，"),e("code",[t._v("allow-drop")]),t._v(" 不能正常工作的问题，#11797")]),e("li",[t._v("现在 Form 的 "),e("code",[t._v("clearValidate")]),t._v(" 方法支持传入参数，指定需要清空校验结果的 FormItem，#11821")]),e("li",[t._v("新增 MessageBox 的 "),e("code",[t._v("distinguishCancelAndClose")]),t._v(" 属性，#11831")])]),e("h3",{attrs:{id:"2-4-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2"}},[t._v("¶")]),t._v(" 2.4.2")]),e("p",[e("em",[t._v("2018-06-26")])]),e("ul",[e("li",[t._v("修复 Table 的 "),e("code",[t._v("class-name")]),t._v(" 和 "),e("code",[t._v("label-class-name")]),t._v(" 属性不支持动态更新的问题，#11626")]),e("li",[t._v("修复 Table 在 "),e("code",[t._v("highlight-current-row")]),t._v(" 为 "),e("code",[t._v("false")]),t._v(" 时点击行也会触发高亮的问题，#11691 #11563")]),e("li",[t._v("修复 ButtonGroup 中只有一个 "),e("code",[t._v("round")]),t._v(" 或 "),e("code",[t._v("circle")]),t._v(" 的 Button 时的样式错误，#11605")]),e("li",[t._v("修复在某些情况下 Pagination 的条目数选择器的样式错误，#11622")]),e("li",[t._v("修复 Menu 的 "),e("code",[t._v("collapse")]),t._v(" 属性变化后无法使用 "),e("code",[t._v("open")]),t._v(" 方法的问题，#11646")]),e("li",[t._v("Tabs 的 "),e("code",[t._v("before-leave")]),t._v(" 钩子添加了 "),e("code",[t._v("activeName")]),t._v(" 和 "),e("code",[t._v("oldActiveName")]),t._v(" 参数，#11713")]),e("li",[t._v("修复 Cascader 关闭后的聚焦问题，#11588")]),e("li",[t._v("修复 Cascader 在 "),e("code",[t._v("change-on-select")]),t._v(" 状态下点击选项不关闭的问题，#11623")]),e("li",[t._v("现在通过代码改变 Select 的值后会触发表单校验，与 Input 行为一致，#11672")])]),e("h3",{attrs:{id:"2-4-1"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1"}},[t._v("¶")]),t._v(" 2.4.1")]),e("p",[e("em",[t._v("2018-06-08")])]),e("ul",[e("li",[t._v("移除 Autocomplete 的重复类型声明，#11388")]),e("li",[t._v("修复嵌套在 Form 内的 Select 在 FireFox 浏览器中下拉箭头错位的问题，#11427")]),e("li",[t._v("修复 Select 的初始值为 "),e("code",[t._v("null")]),t._v(" 时仍然显示清除图标的问题，#11460")]),e("li",[t._v("修复禁用的 Radio 在点击时显示 box-shadow 的问题，#11462")]),e("li",[t._v("新增 MessageBox 的 "),e("code",[t._v("iconClass")]),t._v(" 属性，#11499")]),e("li",[t._v("新增 Tabs 的 "),e("code",[t._v("stretch")]),t._v(" 属性，#11476")]),e("li",[t._v("修复 Tabs 开启 "),e("code",[t._v("lazy")]),t._v(" 时渲染顺序异常的问题，#11461")]),e("li",[t._v("修复 Table 展开行时无法保留选中行样式的问题，#11464")]),e("li",[t._v("修复 Tabs 调用 "),e("code",[t._v("before-leave")]),t._v(" 并返回 Promise 的时候，Tabs 会存在 focus 状态的问题，#11386")]),e("li",[t._v("修复 Popover 禁用状态下创建弹出框的问题，#11426")]),e("li",[t._v("修复 Tree 在懒加载状态下添加新节点造成无限循环的问题，#11430 （by @wangjingf）")]),e("li",[t._v("新增 Dialog 的 "),e("code",[t._v("closed")]),t._v(" 事件，#11490")])]),e("h3",{attrs:{id:"2-4-0-fullerene"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene"}},[t._v("¶")]),t._v(" 2.4.0 Fullerene")]),e("p",[e("em",[t._v("2018-05-28")])]),e("h4",{attrs:{id:"xin-te-xing-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-13"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("综合\n"),e("ul",[e("li",[t._v("使用原生 webpack 作为构建和打包工具，#11216")]),e("li",[t._v("可以全局配置弹出层的初始 z-index，#11257")])])]),e("li",[t._v("Autocomplete\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("hide-loading")]),t._v(" 属性，#11260")])])]),e("li",[t._v("Button\n"),e("ul",[e("li",[t._v("现在圆形按钮也支持通过 "),e("code",[t._v("size")]),t._v(" 属性改变其尺寸了，#11275")])])]),e("li",[t._v("InputNumber\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("precision")]),t._v(" 属性，#11281")])])]),e("li",[t._v("Tabs\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("before-leave")]),t._v(" 钩子，#11259")]),e("li",[t._v("新增 "),e("code",[t._v("lazy")]),t._v(" 属性，#11167（by @Kingwl）")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("sort")]),t._v(" 方法，支持手动排序，#11311")])])])]),e("h4",{attrs:{id:"xiu-fu-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-12"}},[t._v("¶")]),t._v(" 修复")]),e("ul",[e("li",[t._v("Input\n"),e("ul",[e("li",[t._v("修复使用中文输入法快速输入文字时会导致视图重新渲染的问题，#11235（by @STLighter）")])])]),e("li",[t._v("Popover\n"),e("ul",[e("li",[t._v("修复当触发元素为 Radio 或 Checkbox 时控制台报错的问题，#11265")])])]),e("li",[t._v("Breadcrumb\n"),e("ul",[e("li",[t._v("修复 "),e("code",[t._v("to")]),t._v(" 属性不支持动态更新的问题，#11286")])])]),e("li",[t._v("Upload\n"),e("ul",[e("li",[t._v("修复在 "),e("code",[t._v("beforeUpload")]),t._v(" 方法返回的 Promise 中 resolve 一个 File 时控制台报错的问题，#11297（by @qusiba）")])])]),e("li",[t._v("Tooltip\n"),e("ul",[e("li",[t._v("修复内容为空时箭头错位的问题，#11335")])])]),e("li",[t._v("Autocomplete\n"),e("ul",[e("li",[t._v("修复在快速删除搜索内容后输入建议不正确的问题，#11323")])])]),e("li",[t._v("ColorPicker\n"),e("ul",[e("li",[t._v("修复关闭选色器时触发 "),e("code",[t._v("active-change")]),t._v(" 事件的问题，#11304")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("修复筛选列表过长导致样式超出的问题，#11314")]),e("li",[t._v("修复排序后导致无法正常显示选中行样式的问题，#11348")])])]),e("li",[t._v("Checkbox\n"),e("ul",[e("li",[t._v("修复单个 Checkbox 不支持表单验证的问题，#11271")])])]),e("li",[t._v("Radio\n"),e("ul",[e("li",[t._v("修复通过空格可以选中被禁用的 Radio 的问题，#11303")])])]),e("li",[t._v("MessageBox\n"),e("ul",[e("li",[t._v("修复连续打开两个 MessageBox 时 "),e("code",[t._v("el-popup-parent--hidden")]),t._v(" 无法移除的问题，#11371")])])])]),e("h3",{attrs:{id:"2-3-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9"}},[t._v("¶")]),t._v(" 2.3.9")]),e("p",[e("em",[t._v("2018-05-18")])]),e("ul",[e("li",[t._v("修复当 TableColumn 的 "),e("code",[t._v("prop")]),t._v(" 属性指定的字段在数据源中不存在时，鼠标移入该列单元格会报错的问题，#11137")]),e("li",[t._v("弹出类组件的 "),e("code",[t._v("lockScroll")]),t._v(" 属性不再为父元素添加内联样式，而是添加相应类名，#11114")]),e("li",[t._v("修复 Progress 在 "),e("code",[t._v("status")]),t._v(" 为 exception 时图标不显示的问题，#11172")]),e("li",[t._v("修复可搜索的 Cascader 在输入关键词后，选项的 "),e("code",[t._v("disabled")]),t._v(" 属性失效的问题，#11185")]),e("li",[t._v("修复可展开的 Table 在展开某一行后更新数据源会造成该行无法收起的问题，#11186")]),e("li",[t._v("Tree 的 "),e("code",[t._v("setCurrentKey")]),t._v(" 方法支持传入 "),e("code",[t._v("null")]),t._v("，可取消当前高亮的节点，#11205")])]),e("h3",{attrs:{id:"2-3-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8"}},[t._v("¶")]),t._v(" 2.3.8")]),e("p",[e("em",[t._v("2018-05-11")])]),e("ul",[e("li",[t._v("修复 "),e("code",[t._v("type")]),t._v(" 为 dates 的 DatePicker 在选择非当前月的日期后，面板会跳转至当前月的问题，#10973")]),e("li",[t._v("修复可清空的只读 Input 仍会显示清空图标的问题，#10912")]),e("li",[t._v("修复范围选择的 DatePicker 在未改变值的情况下关闭下拉面板仍会触发 "),e("code",[t._v("change")]),t._v(" 事件的问题，#11017")]),e("li",[t._v("修复 Select 在有分组选项时不能正确通过键盘导航的问题，#11058")]),e("li",[t._v("新增 Select 的 "),e("code",[t._v("prefix")]),t._v(" 具名 slot，#11063")]),e("li",[t._v("新增 FormItem 的 "),e("code",[t._v("clearValidate")]),t._v(" 方法，#11076")]),e("li",[t._v("新增 Tree 的 "),e("code",[t._v("checkOnClickNode")]),t._v(" 属性，#11111")])]),e("h3",{attrs:{id:"2-3-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7"}},[t._v("¶")]),t._v(" 2.3.7")]),e("p",[e("em",[t._v("2018-04-29")])]),e("ul",[e("li",[t._v("修复 Table 在由于筛选而使原有的滚动条消失后表头各列宽度未及时更新的问题，#10834")]),e("li",[t._v("修复可清空的 Input 在初始值为 "),e("code",[t._v("null")]),t._v(" 时仍然显示清空图标的问题，#10912")]),e("li",[t._v("修复在通过代码改变 ColorPicker 的绑定值后错误地触发 "),e("code",[t._v("active-change")]),t._v(" 事件的问题，#10903（by @zhangbobell）")]),e("li",[t._v("修复可搜索的 Select 在备选项均被禁用时，通过键盘导航会造成无限循环的问题，#10945")])]),e("h3",{attrs:{id:"2-3-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6"}},[t._v("¶")]),t._v(" 2.3.6")]),e("p",[e("em",[t._v("2018-04-21")])]),e("ul",[e("li",[t._v("修复 Tree 的 "),e("code",[t._v("allow-drop")]),t._v(" 回调在使用 "),e("code",[t._v("type")]),t._v(" 参数后的错误行为，#10821")]),e("li",[t._v("修复可搜索的单选 Select 在 IE11 中无法输入搜索关键词的问题，#10822")]),e("li",[t._v("修复单选 Select 在使用鼠标选中某个选项后错误地触发 "),e("code",[t._v("blur")]),t._v(" 事件的问题，#10822")])]),e("h3",{attrs:{id:"2-3-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5"}},[t._v("¶")]),t._v(" 2.3.5")]),e("p",[e("em",[t._v("2018-04-20")])]),e("ul",[e("li",[t._v("修复 DatePicker 的 "),e("code",[t._v("type")]),t._v(" 为 week 时面板错误高亮的问题，#10712")]),e("li",[t._v("修复 InputNumber 初始值为 0 时输入框为空的问题，#10714")]),e("li",[t._v("新增 Select 的 "),e("code",[t._v("automatic-dropdown")]),t._v(" 属性，#10042（by @Seebiscuit）")]),e("li",[t._v("修复 "),e("code",[t._v("disabled")]),t._v(" 的 Rate 仍能通过键盘左右键改变组件值的问题，#10726（by @Richard-Choooou）")]),e("li",[t._v("现在 DatePicker 的 "),e("code",[t._v("type")]),t._v(" 属性可以接收 "),e("code",[t._v("'dates'")]),t._v("，用于选择多个日期，#10650（by @Mini256）")]),e("li",[t._v("新增 Pagination 的 "),e("code",[t._v("prev-click")]),t._v(" 和 "),e("code",[t._v("next-click")]),t._v(" 事件，#10755")]),e("li",[t._v("新增 Pagination 的 "),e("code",[t._v("pager-count")]),t._v(" 属性，#10493（by @chongjohn716）")]),e("li",[t._v("新增 "),e("code",[t._v("type")]),t._v(" 作为 Tree 的 "),e("code",[t._v("allow-drop")]),t._v(" 属性回调的第三个参数，#10792")]),e("li",[t._v("改用 ResizeObserver 对元素的尺寸变化进行监测，#10779")])]),e("h3",{attrs:{id:"2-3-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4"}},[t._v("¶")]),t._v(" 2.3.4")]),e("p",[e("em",[t._v("2018-04-12")])]),e("ul",[e("li",[t._v("删除 SubMenu 在 TypeScript 类型声明中重复的 "),e("code",[t._v("showTimeout")]),t._v(" 属性，#10566（by @kimond）")]),e("li",[t._v("现在 Transfer 数据项的渲染支持通过 scoped slot 自定义，#10577")]),e("li",[t._v("修复点击 Pagination 禁用的上一页、下一页按钮仍会触发 "),e("code",[t._v("current-change")]),t._v(" 事件的问题，#10628")]),e("li",[t._v("修复未绑定值的 Textarea 在 SSR 中会显示 "),e("code",[t._v("undefined")]),t._v(" 的问题，#10630")]),e("li",[t._v("修复 "),e("code",[t._v("type")]),t._v(" 为 border-card 的 Tabs 中被禁用标签项的样式，#10640")]),e("li",[t._v("新增 "),e("code",[t._v("$index")]),t._v(" 作为 Table 的 "),e("code",[t._v("formatter")]),t._v(" 属性回调的第四个参数，#10645")]),e("li",[t._v("修复 TypeScript 类型声明未导出 CheckboxButton 的问题，#10666")])]),e("h3",{attrs:{id:"2-3-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3"}},[t._v("¶")]),t._v(" 2.3.3")]),e("p",[e("em",[t._v("2018-04-04")])]),e("ul",[e("li",[t._v("新增 Card 的 "),e("code",[t._v("shadow")]),t._v(" 属性，#10418（by @YunYouJun）")]),e("li",[t._v("修复 Badge 在 "),e("code",[t._v("value")]),t._v(" 属性为 "),e("code",[t._v("0")]),t._v(" 时不显示上标的问题，#10470")]),e("li",[t._v("修复 Tree 节点拖拽相关的问题，#10474 #10494")]),e("li",[t._v("新增 Autocomplete 的 "),e("code",[t._v("placement")]),t._v(" 属性，#10475")]),e("li",[t._v("现在 "),e("code",[t._v("default-time")]),t._v(" 属性也可用于非范围选择的 DateTimePicker 了，#10321（by @RickMacTurk）")]),e("li",[t._v("修复 TabItem 在浏览器失焦和隐藏后出现蓝色边框的问题，#10503")]),e("li",[t._v("新增 SubMenu 的 "),e("code",[t._v("popper-append-to-body")]),t._v(" 属性，#10515")]),e("li",[t._v("现在非链接的 BreadcrumbItem 在 hover 时不再具有视觉反馈，#10551")]),e("li",[t._v("调整 InputNumber "),e("code",[t._v("change")]),t._v(" 事件的触发时机，使得在回调中能够取得最新的组件绑定值，#10553")])]),e("h3",{attrs:{id:"2-3-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2"}},[t._v("¶")]),t._v(" 2.3.2")]),e("p",[e("em",[t._v("2018-03-29")])]),e("ul",[e("li",[t._v("修复 Autocomplete 报错的问题，#10442")])]),e("h3",{attrs:{id:"2-3-1"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1"}},[t._v("¶")]),t._v(" 2.3.1")]),e("p",[e("em",[t._v("2018-03-29")])]),e("ul",[e("li",[t._v("修复 Input 的 "),e("code",[t._v("type")]),t._v(" 属性未传递至原生 input 元素的问题，#10415")]),e("li",[t._v("新增 Select 的 "),e("code",[t._v("blur")]),t._v(" 方法，#10416")])]),e("h3",{attrs:{id:"2-3-0-diamond"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamond"}},[t._v("¶")]),t._v(" 2.3.0 Diamond")]),e("p",[e("em",[t._v("2018-03-28")])]),e("h4",{attrs:{id:"xin-te-xing-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-14"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("现在 TableColumn 的 "),e("code",[t._v("formatter")]),t._v(" 属性可以是动态的，#10184（by @elfman）")]),e("li",[t._v("新增 "),e("code",[t._v("select-on-indeterminate")]),t._v(" 属性，#9924（by @syn-zeta）")])])]),e("li",[t._v("Menu\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("collapse-transition")]),t._v(" 属性，#8809（by @limichange）")])])]),e("li",[t._v("Input\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("select")]),t._v(" 方法，#10229")]),e("li",[t._v("新增 "),e("code",[t._v("blur")]),t._v(" 方法，#10356")])])]),e("li",[t._v("ColorPicker\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("predefine")]),t._v(" 属性，#10170（by @elfman）")])])]),e("li",[t._v("Tree\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("draggable")]),t._v("、"),e("code",[t._v("allow-drop")]),t._v(" 和 "),e("code",[t._v("allow-drag")]),t._v(" 属性，以及 "),e("code",[t._v("node-drag-start")]),t._v("、"),e("code",[t._v("node-drag-enter")]),t._v("、"),e("code",[t._v("node-drag-leave")]),t._v("、"),e("code",[t._v("node-drag-over")]),t._v("、"),e("code",[t._v("node-drag-end")]),t._v(" 和 "),e("code",[t._v("node-drop")]),t._v(" 事件，#9251 #10372（by @elfman）")])])]),e("li",[t._v("Form\n"),e("ul",[e("li",[e("code",[t._v("validate")]),t._v(" 方法新增第二个参数，包含未通过本次校验的表单项信息，#10279")]),e("li",[t._v("新增 "),e("code",[t._v("validate")]),t._v(" 事件，#10351")])])]),e("li",[t._v("Progress\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("color")]),t._v(" 属性，#10352（by @YunYouJun）")])])]),e("li",[t._v("Button\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("circle")]),t._v(" 属性，#10359（by @YunYouJun）")])])])]),e("h4",{attrs:{id:"xiu-fu-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-13"}},[t._v("¶")]),t._v(" 修复")]),e("ul",[e("li",[t._v("Form\n"),e("ul",[e("li",[t._v("修复嵌套复合型 Input 时，FormItem 标签与输入框未对齐的问题，#10189")])])]),e("li",[t._v("Menu\n"),e("ul",[e("li",[t._v("现在折叠状态的菜单项仅在传入 "),e("code",[t._v("title")]),t._v(" slot 时才显示 Tooltip，#10193（by @PanJiaChen）")])])]),e("li",[t._v("Pagination\n"),e("ul",[e("li",[t._v("修复 "),e("code",[t._v("current-change")]),t._v(" 在未发生用户交互时错误触发的问题，#10247")])])]),e("li",[t._v("DatePicker\n"),e("ul",[e("li",[t._v("现在时间日期选择器下拉面板中的值能够正确地从 "),e("code",[t._v("format")]),t._v(" 属性中获取对应格式了，#10174（by @remizovvv）")])])]),e("li",[t._v("Upload\n"),e("ul",[e("li",[t._v("现在拖拽上传会拦截不在 "),e("code",[t._v("accept")]),t._v(" 属性范围内的文件，#10278")])])])]),e("h3",{attrs:{id:"2-2-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2"}},[t._v("¶")]),t._v(" 2.2.2")]),e("p",[e("em",[t._v("2018-03-14")])]),e("ul",[e("li",[t._v("新增 Input 的 "),e("code",[t._v("clear")]),t._v(" 事件，#9988（by @blackmiaool）")]),e("li",[t._v("现在 ColorPicker 的手动输入支持 "),e("code",[t._v("hsl")]),t._v("、"),e("code",[t._v("hsv")]),t._v(" 和 "),e("code",[t._v("rgb")]),t._v(" 格式了，#9991")]),e("li",[t._v("修复 DatePicker 在清除初始值时不触发 "),e("code",[t._v("change")]),t._v(" 事件的问题，#9986")]),e("li",[t._v("现在 Rate 的图标类相关属性支持动态更新了，#10003")]),e("li",[t._v("修复含有固定列的 Table 在设置 "),e("code",[t._v("max-height")]),t._v(" 属性后有时不能及时更新布局高度的问题，#10034")]),e("li",[t._v("现在 DatePicker 的范围选择支持先点选结束日期，再点选开始日期了，#8156（by @earlymeme）")]),e("li",[t._v("新增 Pagination 的 "),e("code",[t._v("disabled")]),t._v(" 属性，#10006")]),e("li",[t._v("新增 Popover 的 "),e("code",[t._v("after-enter")]),t._v(" 和 "),e("code",[t._v("after-leave")]),t._v(" 事件，#10047")]),e("li",[t._v("修复重置表单后，用户第一次改变 Select 的值时不触发校验的问题，#10105")]),e("li",[t._v("修复 Table 的固定列在某些情况下宽度不正确的问题，#10130")]),e("li",[t._v("修复调用 MessageBox 未传入 "),e("code",[t._v("title")]),t._v(" 时，打开的 MessageBox 会继承上一个实例的 "),e("code",[t._v("title")]),t._v(" 属性的问题，#10126（by @Pochodaydayup）")]),e("li",[t._v("新增 Slider 的 "),e("code",[t._v("input-size")]),t._v(" 属性，#10154")]),e("li",[t._v("新增 Transfer 的 "),e("code",[t._v("left-check-change")]),t._v(" 和 "),e("code",[t._v("right-check-change")]),t._v(" 事件，#10156")])]),e("h3",{attrs:{id:"2-2-1"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1"}},[t._v("¶")]),t._v(" 2.2.1")]),e("p",[e("em",[t._v("2018-03-02")])]),e("ul",[e("li",[t._v("修复 Aside、Header 和 Footer 在某些布局中被压缩的问题，#9812")]),e("li",[t._v("修复设置了 "),e("code",[t._v("height")]),t._v(" 属性的 Table 在服务端渲染时无法加载的问题，#9876")]),e("li",[t._v("修复可展开的 Table 在展开某一行后高度未重新计算的问题，#9848")]),e("li",[t._v("修复在 DateTimePicker 中手动输入日期后不能正确触发 "),e("code",[t._v("change")]),t._v(" 事件的问题，#9913")]),e("li",[t._v("修复鼠标右键点击 Select 的输入框会展开选项的问题，#9894（by @openks）")]),e("li",[t._v("新增 Slider 的 "),e("code",[t._v("tooltip-class")]),t._v(" 属性，#9957")]),e("li",[t._v("现在的 Select 在选中选项后仍然处于 focus 状态，#9857（by @Seebiscuit）")]),e("li",[t._v("新增 Transfer 的 "),e("code",[t._v("target-order")]),t._v(" 属性，#9960")])]),e("h3",{attrs:{id:"2-2-0-graphite"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite"}},[t._v("¶")]),t._v(" 2.2.0 Graphite")]),e("p",[e("em",[t._v("2018-02-12")])]),e("h4",{attrs:{id:"xin-te-xing-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-15"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("Menu\n"),e("ul",[e("li",[t._v("SubMenu 新增 "),e("code",[t._v("popper-class")]),t._v(" 和 "),e("code",[t._v("disabled")]),t._v(" 属性，#9604 #9771")]),e("li",[t._v("现在水平模式下的 Menu 支持多级 SubMenu 了，#9741")])])]),e("li",[t._v("Tree\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("node-contextmenu")]),t._v(" 事件，#9678")]),e("li",[t._v("现在可以使用 scoped slot 自定义树节点的模板了，#9686")]),e("li",[t._v("新增 "),e("code",[t._v("getNode")]),t._v("、"),e("code",[t._v("remove")]),t._v("、"),e("code",[t._v("append")]),t._v("、"),e("code",[t._v("insertBefore")]),t._v("、"),e("code",[t._v("insertAfter")]),t._v("、"),e("code",[t._v("getCheckedKeys")]),t._v("、"),e("code",[t._v("getHalfCheckedNodes")]),t._v("、"),e("code",[t._v("getHalfCheckedKeys")]),t._v(" 方法和 "),e("code",[t._v("check")]),t._v(" 事件，#9718 #9730")])])]),e("li",[t._v("Transfer\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("clearQuery")]),t._v(" 方法，#9753")])])]),e("li",[t._v("Select\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("popper-append-to-body")]),t._v(" 属性，#9782")])])])]),e("h4",{attrs:{id:"xiu-fu-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-14"}},[t._v("¶")]),t._v(" 修复")]),e("ul",[e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("修复点击可展开行的展开图标会触发 "),e("code",[t._v("row-click")]),t._v(" 事件的问题，#9654")]),e("li",[t._v("修复某些情况下通过拖动改变列宽后，布局没有同步更新的问题，#9668")]),e("li",[t._v("修复合计行与固定列并存时的样式问题，#9667")])])]),e("li",[t._v("Container\n"),e("ul",[e("li",[t._v("修复布局组件在 IE11 中无法自动填充可用空间的问题，#9655")])])]),e("li",[t._v("Loading\n"),e("ul",[e("li",[t._v("修复在 "),e("code",[t._v("mounted")]),t._v(" 中修改 "),e("code",[t._v("v-loading")]),t._v(" 的值为 true 时不能正确显示 Loading 的问题，#9722")])])]),e("li",[t._v("Switch\n"),e("ul",[e("li",[t._v("修复点击时会触发两次原生 click 事件的问题，#9760")])])])]),e("h3",{attrs:{id:"2-1-0-charcoal"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal"}},[t._v("¶")]),t._v(" 2.1.0 Charcoal")]),e("p",[e("em",[t._v("2018-01-31")])]),e("h4",{attrs:{id:"xin-te-xing-16"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-16"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("Cascader\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("focus")]),t._v(" 和 "),e("code",[t._v("blur")]),t._v(" 事件，#9184（by @viewweiwu）")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[e("code",[t._v("filter-method")]),t._v(" 方法加入第三个参数 "),e("code",[t._v("column")]),t._v("，#9196（by @liyanlong）")])])]),e("li",[t._v("DatePicker\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("prefix-icon")]),t._v(" 和 "),e("code",[t._v("clear-icon")]),t._v(" 属性，#9237（by @AdamSGit）")]),e("li",[t._v("新增 "),e("code",[t._v("default-time")]),t._v(" 属性，#9094（by @nighca）")]),e("li",[e("code",[t._v("value-format")]),t._v(" 属性增加对 "),e("code",[t._v("timestamp")]),t._v(" 的支持，#9319（by @wacky6）")])])]),e("li",[t._v("InputNumber\n"),e("ul",[e("li",[t._v("组件绑定变量的值支持 "),e("code",[t._v("undefined")]),t._v("，#9361")])])]),e("li",[t._v("Select\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("auto-complete")]),t._v(" 属性，#9388")])])]),e("li",[t._v("Form\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("disabled")]),t._v(" 属性，#9529")]),e("li",[t._v("新增 "),e("code",[t._v("validateOnRuleChange")]),t._v(" 属性，#8141")])])]),e("li",[t._v("Notificaition\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("closeAll")]),t._v(" 方法，#9514")])])])]),e("h4",{attrs:{id:"xiu-fu-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-15"}},[t._v("¶")]),t._v(" 修复")]),e("ul",[e("li",[t._v("InputNumber\n"),e("ul",[e("li",[t._v("修复初始输入小数点时被重置的问题，#9116")])])]),e("li",[t._v("Dropdown\n"),e("ul",[e("li",[t._v("修复当页面仅有水平滚动条时，某些浏览器下拉菜单定位错误的问题，#9138（by @banzhuanmei）")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("修复带有固定列的 Table 在列数据变化后固定列的个数计算错误的问题，#9188（by @kolesoffac）")]),e("li",[t._v("修复多级表头最后一列的边框不能正确显示的问题，#9326")]),e("li",[t._v("修复在 Safari 浏览器中表头错位的问题，#9327")]),e("li",[t._v("修复带有展开行的表格在展开某一行后，当表格数据更新但 "),e("code",[t._v("row-key")]),t._v(" 值不变时，该行会自动收起的问题，#9462")]),e("li",[t._v("修复在一些情况下不必要的多次渲染问题，#9426")]),e("li",[t._v("修复动态改变 TableColumn 的 "),e("code",[t._v("width")]),t._v(" 属性时，其宽度计算错误的问题，#9426")])])]),e("li",[t._v("Loading\n"),e("ul",[e("li",[t._v("修复某些情况下 Loading 不能被正确隐藏的问题，#9313")])])]),e("li",[t._v("DatePicker\n"),e("ul",[e("li",[t._v("修复 "),e("code",[t._v("focus")]),t._v(" 方法在范围选择时无效的问题，#9437")]),e("li",[t._v("修复当目前时刻处于不可选择的范围内时，点击面板上的「此刻」按钮仍能选中目前时刻的问题，#9470（by @wacky6）")]),e("li",[t._v("修复当在月选择面板中选中天数较少的月份时，日期面板呈现下一个月的问题，#9577（by @wacky6）")])])]),e("li",[t._v("Steps\n"),e("ul",[e("li",[t._v("修复在 IE 11 中的样式问题，#9454")])])])]),e("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-5"}},[t._v("¶")]),t._v(" 非兼容性更新")]),e("ul",[e("li",[t._v("Menu\n"),e("ul",[e("li",[e("code",[t._v("collapse")]),t._v(" 状态下的弹出菜单现在会插入至 body 元素，修复其位于 Aside 内时弹出菜单不可见的问题，#9263")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("勾选多选表格的 checkbox 时不再同时触发 "),e("code",[t._v("row-click")]),t._v(" 事件，#9467")])])]),e("li",[t._v("Loading\n"),e("ul",[e("li",[t._v("非全屏 Loading 遮罩层的 "),e("code",[t._v("z-index")]),t._v(" 修改为 2000；全屏 Loading 遮罩层的 "),e("code",[t._v("z-index")]),t._v(" 值会随页面上的弹出组件动态更新，#9522")])])]),e("li",[t._v("Dropdown\n"),e("ul",[e("li",[e("code",[t._v("show-timeout")]),t._v(" 和 "),e("code",[t._v("hide-timeout")]),t._v(" 属性现在仅在 trigger 为 "),e("code",[t._v("hover")]),t._v(" 时生效，#9573")])])])]),e("h3",{attrs:{id:"2-0-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11"}},[t._v("¶")]),t._v(" 2.0.11")]),e("p",[e("em",[t._v("2018-01-08")])]),e("ul",[e("li",[t._v("修复 Input 的 "),e("code",[t._v("prepend")]),t._v(" 或 "),e("code",[t._v("append")]),t._v(" slot 中 Select 的边框颜色错误，#9089")]),e("li",[t._v("修复 Select 的 "),e("code",[t._v("remove-tag")]),t._v(" 事件参数与文档不符的问题，#9090")]),e("li",[t._v("新增 SubMenu 的 "),e("code",[t._v("show-timeout")]),t._v(" 和 "),e("code",[t._v("hide-timeout")]),t._v(" 属性，#8934（by @HugoLew）")]),e("li",[t._v("修复按需引入 Table 时 "),e("code",[t._v("show-overflow-tooltip")]),t._v(" 的 Tooltip 样式丢失的问题，#9130")]),e("li",[t._v("修复 Table 在执行 "),e("code",[t._v("clearSort")]),t._v(" 后点击对应列的排序图标无法正常排序的问题，#9100（by @zEmily）")]),e("li",[t._v("捷克语的 i18n 配置文件由 "),e("code",[t._v("cz")]),t._v(" 重命名为 "),e("code",[t._v("cs-CZ")]),t._v("，#9164")])]),e("h3",{attrs:{id:"2-0-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10"}},[t._v("¶")]),t._v(" 2.0.10")]),e("p",[e("em",[t._v("2017-12-29")])]),e("ul",[e("li",[t._v("修复了 Table 在固定列和合计行并存时的高度计算错误的问题，#9026")]),e("li",[t._v("修复了 Table 样式 SCSS 文件错误编译的问题，#9028")]),e("li",[t._v("现在 DatePicker 的 "),e("code",[t._v("change")]),t._v(" 事件只会在 "),e("code",[t._v("value")]),t._v(" 真正改变的时候触发，#9029（by @remizovvv）")]),e("li",[t._v("新增 Input 的 "),e("code",[t._v("tabindex")]),t._v(" 属性，#9041（by @dicklwm）")])]),e("h3",{attrs:{id:"2-0-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9"}},[t._v("¶")]),t._v(" 2.0.9🎄")]),e("p",[e("em",[t._v("2017-12-24")])]),e("ul",[e("li",[t._v("新增 Upload 的 "),e("code",[t._v("before-remove")]),t._v(" 钩子方法，#8788（by @firesh）")]),e("li",[t._v("修复 FormItem 的 "),e("code",[t._v("error")]),t._v(" 属性初始值无效的问题，#8840")]),e("li",[t._v("通过指令调用的 Loading 现在支持以 "),e("code",[t._v("element-loading-custom-class")]),t._v(" 属性的方式设置自定义类名，#8826（by @earlymeme）")]),e("li",[t._v("修复 CarouselItem 为异步获取时被隐藏的问题，#8921")]),e("li",[t._v("新增 Tree 的 "),e("code",[t._v("renderAfterExpand")]),t._v(" 属性，#8972")])]),e("h3",{attrs:{id:"2-0-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8"}},[t._v("¶")]),t._v(" 2.0.8")]),e("p",[e("em",[t._v("2017-12-12")])]),e("ul",[e("li",[t._v("新增西班牙语文档")]),e("li",[t._v("修复 "),e("code",[t._v("show-timeout")]),t._v(" 对点击触发的 Dropdown 无效的问题，#8734（by @presidenten）")]),e("li",[t._v("修复 Form 对于 "),e("code",[t._v("trigger")]),t._v(" 为 blur 的校验规则触发时机有误的问题，#8776")]),e("li",[t._v("修复 DatePicker 在范围选择时 blur 事件触发时机有误的问题，#8784")]),e("li",[t._v("TimePicker 的 "),e("code",[t._v("format")]),t._v(" 新增对 AM/PM 的支持，#8620（by @firesh）")])]),e("h3",{attrs:{id:"2-0-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7"}},[t._v("¶")]),t._v(" 2.0.7")]),e("p",[e("em",[t._v("2017-11-29")])]),e("ul",[e("li",[t._v("修复禁用文字按钮的样式问题，#8570")])]),e("h3",{attrs:{id:"2-0-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6"}},[t._v("¶")]),t._v(" 2.0.6")]),e("p",[e("em",[t._v("2017-11-29")])]),e("ul",[e("li",[t._v("修复 Table 排序图标的样式问题，#8405")]),e("li",[t._v("修复 "),e("code",[t._v("trigger")]),t._v(" 为 manual 的 Popover 的触发问题，#8467")]),e("li",[t._v("新增 Autocomplete 的 "),e("code",[t._v("prefix-icon")]),t._v(" 和 "),e("code",[t._v("suffix-icon")]),t._v(" 属性，#8446（by @liyanlong）")]),e("li",[t._v("新增 Cascader 的 "),e("code",[t._v("separator")]),t._v(" 属性，#8501")]),e("li",[t._v("新增 Input 的 "),e("code",[t._v("clearable")]),t._v(" 属性，#8509（by @lbogdan）")]),e("li",[t._v("新增 Pagination 的 "),e("code",[t._v("background")]),t._v(" 属性，#8553")])]),e("h3",{attrs:{id:"2-0-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5"}},[t._v("¶")]),t._v(" 2.0.5")]),e("p",[e("em",[t._v("2017-11-17")])]),e("ul",[e("li",[t._v("修复上个版本引入的 Popover、Tree、Breadcrumb、Cascader 的 bug，#8188 #8217 #8283")]),e("li",[t._v("修复 clickoutside 指令的内存泄露问题，#8168 #8225（by @badpunman @STLighter）")]),e("li",[t._v("修复默认尺寸的多选 Select 在清空选项后输入框高度不随之更新的问题，#8317（by @luciy）")]),e("li",[t._v("新增 Select 的 "),e("code",[t._v("collapse-tags")]),t._v(" 属性，用于在多选时以文字代替 Tag，避免组件高度的增大，#8190")]),e("li",[t._v("修复被隐藏的 Table 会造成 CPU 占用持续增加的问题，#8351")]),e("li",[t._v("开放 Table 的 "),e("code",[t._v("doLayout")]),t._v(" 方法，用于重新计算 Table 的布局，#8351")])]),e("h3",{attrs:{id:"2-0-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4"}},[t._v("¶")]),t._v(" 2.0.4")]),e("p",[e("em",[t._v("2017-11-10")])]),e("ul",[e("li",[t._v("提升 Cascader、Dropdown、Message、Notification、Popover、Tooltip、Tree 的可访问性")]),e("li",[t._v("修复当视口变窄时 Container 无法同步更新其宽度的问题，#8042")]),e("li",[t._v("修复 Tree 的 "),e("code",[t._v("updateKeyChildren")]),t._v(" 在删除子节点时的行为错误，#8100")]),e("li",[t._v("修复带有边框的 CheckboxButton 在 Form 中高度错误的问题，#8100")]),e("li",[t._v("修复 Menu 在解析自定义颜色时的错误，#8153（by @zhouyixiang）")])]),e("h3",{attrs:{id:"2-0-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3"}},[t._v("¶")]),t._v(" 2.0.3")]),e("p",[e("em",[t._v("2017-11-03")])]),e("ul",[e("li",[t._v("修复范围选择的 DatePicker "),e("code",[t._v("editable")]),t._v(" 和 "),e("code",[t._v("readonly")]),t._v(" 属性无法正常工作的问题，#7922")]),e("li",[t._v("修复嵌套的 Tabs 的样式错误，#7941")]),e("li",[t._v("修复纵向 Steps 中最后一个 Step 的样式错误，#7980")]),e("li",[t._v("修复 Pagination 的 "),e("code",[t._v("current-change")]),t._v(" 事件触发时机错误的问题，#7995")]),e("li",[t._v("修复由于 Menu 使用了未注册的 Tooltip 造成其在按需引入时报错的问题，#7995")])]),e("h3",{attrs:{id:"2-0-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2"}},[t._v("¶")]),t._v(" 2.0.2")]),e("p",[e("em",[t._v("2017-10-31")])]),e("ul",[e("li",[t._v("在 InputNumber 的加减按钮上单击鼠标右键不再触发值的改变，#7817")]),e("li",[t._v("Form 的 "),e("code",[t._v("validate")]),t._v(" 方法现在能够正确地在异步校验完成后执行回调了，#7774（by @Allenice）")]),e("li",[t._v("修复 DatePicker 的范围选择在内核为 Chromium 53-57 的浏览器中无法使用的问题，#7838")]),e("li",[t._v("修复 "),e("code",[t._v("list-type")]),t._v(" 为 picture-card 的 Upload 预览和删除图标丢失的问题，#7857")]),e("li",[t._v("新增 TableColumn 的 "),e("code",[t._v("sort-by")]),t._v(" 属性，#7828（by @wangfengming）")]),e("li",[t._v("修复周模式下的 DatePicker 在选择某年第一周可能会显示为前一年第一周的问题，#7860（by @hh23485）")]),e("li",[t._v("修复垂直模式的 Steps 中图标宽度的样式错误，#7891")]),e("li",[t._v("增大了 Tree 中展开箭头的点击热区，#7891")])]),e("h3",{attrs:{id:"2-0-1"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1"}},[t._v("¶")]),t._v(" 2.0.1")]),e("p",[e("em",[t._v("2017-10-28")])]),e("ul",[e("li",[t._v("修复 RadioButton 和 CheckboxButton 的样式问题，#7793")]),e("li",[t._v("修复 TimePicker 在某些情况下无法滚动的问题，#7811")]),e("li",[t._v("修复部分组件在按需引入时样式不完整的问题，#7811")])]),e("h3",{attrs:{id:"2-0-0-carbon"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon"}},[t._v("¶")]),t._v(" 2.0.0 Carbon")]),e("p",[e("em",[t._v("2017-10-27")])]),e("h4",{attrs:{id:"xin-te-xing-17"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-17"}},[t._v("¶")]),t._v(" 新特性")]),e("ul",[e("li",[t._v("综合\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("theme-chalk")]),t._v(" 主题")]),e("li",[t._v("增强以下组件的可访问性：Alert、AutoComplete、Breadcrumb、Button、Checkbox、Collapse、Input、InputNumber、Menu、Progress、Radio、Rate、Slider、Switch 和 Upload")]),e("li",[t._v("新增布局组件 Container、Header、Aside、Main 和 Footer")]),e("li",[t._v("新增 TypeScript 类型声明")]),e("li",[t._v("重绘了全部图标，并新增了部分图标")]),e("li",[t._v("新增了一系列基于断点的工具类，用于当视口尺寸满足一定条件时隐藏元素")]),e("li",[t._v("新增全局配置组件尺寸的功能。在引入 Element 时，配置 "),e("code",[t._v("size")]),t._v(" 字段可以改变所有组件的默认尺寸")])])]),e("li",[t._v("Button\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("round")]),t._v(" 属性，用于圆角按钮 #6643")])])]),e("li",[t._v("TimeSelect\n"),e("ul",[e("li",[t._v("可以用 "),e("code",[t._v("Up")]),t._v("、"),e("code",[t._v("Down")]),t._v(" 导航，用 "),e("code",[t._v("Enter")]),t._v(" 选中时间 #6023")])])]),e("li",[t._v("TimePicker\n"),e("ul",[e("li",[t._v("可以用方向键导航，用 "),e("code",[t._v("Enter")]),t._v(" 选中时间 #6050")]),e("li",[t._v("新增 "),e("code",[t._v("start-placeholder")]),t._v(" 和 "),e("code",[t._v("end-placeholder")]),t._v("，用于设置范围选择时两个输入框的占位符 #7169")]),e("li",[t._v("新增 "),e("code",[t._v("arrow-control")]),t._v(" 属性，提供另一种交互形式，#7438")])])]),e("li",[t._v("Tree\n"),e("ul",[e("li",[t._v("子节点在首次被展开之前不进行渲染 #6257")]),e("li",[t._v("新增 "),e("code",[t._v("check-descendants")]),t._v(" 属性，设置 "),e("code",[t._v("lazy")]),t._v(" 模式下勾选节点时，是否完全展开整个子树 #6235")])])]),e("li",[t._v("Tag\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("size")]),t._v(" 属性 #7203")])])]),e("li",[t._v("Datepicker\n"),e("ul",[e("li",[t._v("type 为 "),e("code",[t._v("datetimerange")]),t._v(" 时可以使用 "),e("code",[t._v("timeFormat")]),t._v(" 格式化时间选择器 #6052")]),e("li",[t._v("新增 "),e("code",[t._v("start-placeholder")]),t._v(" 和 "),e("code",[t._v("end-placeholder")]),t._v("，用于设置范围选择时两个输入框的占位符 #7169")]),e("li",[t._v("新增 "),e("code",[t._v("value-format")]),t._v(" 属性，支持对绑定值的格式进行自定义，#7367")]),e("li",[t._v("新增 "),e("code",[t._v("unlink-panels")]),t._v(" 属性，用于在选择日期范围时取消两个日期面板之间的联动")])])]),e("li",[t._v("MessageBox\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("closeOnHashChange")]),t._v(" 属性 #6043")]),e("li",[t._v("新增 "),e("code",[t._v("center")]),t._v(" 属性，提供居中布局 #7029")]),e("li",[t._v("新增 "),e("code",[t._v("roundButton")]),t._v(" 属性，使得内部按钮为圆角按钮 #7029")]),e("li",[t._v("新增 "),e("code",[t._v("dangerouslyUseHTMLString")]),t._v(" 属性，使得 "),e("code",[t._v("message")]),t._v(" 支持传入 HTML 字符串"),e("sup",[t._v("*")]),t._v(" #6043")]),e("li",[t._v("新增 "),e("code",[t._v("inputType")]),t._v(" 属性，用户指定内部输入框的类型，#7651")])])]),e("li",[t._v("Dialog\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("width")]),t._v("、"),e("code",[t._v("fullscreen")]),t._v("、"),e("code",[t._v("append-to-body")]),t._v(" 属性，支持嵌套使用")]),e("li",[t._v("新增 "),e("code",[t._v("center")]),t._v(" 属性，提供居中布局 #7042")]),e("li",[t._v("新增 "),e("code",[t._v("focus-after-closed")]),t._v("、"),e("code",[t._v("focus-after-open")]),t._v("属性，支持无障碍访问 #6511")])])]),e("li",[t._v("ColorPicker\n"),e("ul",[e("li",[t._v("增加手动输入色值的支持 #6167")]),e("li",[t._v("新增 "),e("code",[t._v("size")]),t._v(" 属性，用于控制组件的大小 #7026")]),e("li",[t._v("新增 "),e("code",[t._v("disabled")]),t._v(" 属性，用于禁用组件 #7026")]),e("li",[t._v("新增 "),e("code",[t._v("popper-class")]),t._v(" 属性，#7351")])])]),e("li",[t._v("Message\n"),e("ul",[e("li",[t._v("图标部分使用 icon 代替图片，从而支持通过 CSS 修改图标背景色 #6207")]),e("li",[t._v("新增 "),e("code",[t._v("dangerouslyUseHTMLString")]),t._v(" 属性，使得 "),e("code",[t._v("message")]),t._v(" 属性支持传入 HTML 字符串"),e("sup",[t._v("*")]),t._v(" #6207")]),e("li",[t._v("新增 "),e("code",[t._v("center")]),t._v(" 属性，提供居中布局 #6875")])])]),e("li",[t._v("Notification\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("position")]),t._v(" 属性，用于配置 Notification 出现的位置 #6231")]),e("li",[t._v("新增 "),e("code",[t._v("dangerouslyUseHTMLString")]),t._v(" 属性，使得 "),e("code",[t._v("message")]),t._v(" 属性支持传入 HTML 字符串"),e("sup",[t._v("*")]),t._v(" #6231")]),e("li",[t._v("新增 "),e("code",[t._v("showClose")]),t._v(" 属性，用于隐藏关闭按钮 #6402")])])]),e("li",[t._v("Rate\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("show-score")]),t._v(" 属性，控制是否在右侧显示当前分数 #6295")])])]),e("li",[t._v("Tabs\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("tab-position")]),t._v(" 属性，控制选项面板内容显示的上、下、左、右四个方向 #6096")])])]),e("li",[t._v("Radio\n"),e("ul",[e("li",[t._v("增加 "),e("code",[t._v("border")]),t._v(" 属性和 "),e("code",[t._v("size")]),t._v(" 属性 #6690")])])]),e("li",[t._v("Checkbox\n"),e("ul",[e("li",[t._v("增加 "),e("code",[t._v("border")]),t._v(" 属性和 "),e("code",[t._v("size")]),t._v(" 属性 #6690")])])]),e("li",[t._v("Alert\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("center")]),t._v(" 属性，提供居中布局 #6876")])])]),e("li",[t._v("Menu\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("background-color")]),t._v("、"),e("code",[t._v("text-color")]),t._v(" 和 "),e("code",[t._v("active-text-color")]),t._v(" 属性，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色 #7064")]),e("li",[t._v("新增 "),e("code",[t._v("open")]),t._v(" 和 "),e("code",[t._v("close")]),t._v(" 方法，支持手动打开和关闭 SubMenu，#7412")])])]),e("li",[t._v("Form\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("inline-message")]),t._v(" 属性，设置后校验信息会以行内样式显示 #7032")]),e("li",[t._v("新增 "),e("code",[t._v("status-icon")]),t._v(" 属性，用于在输入框中显示校验结果反馈图标 #7032")]),e("li",[t._v("Form 和 FormItem 新增 "),e("code",[t._v("size")]),t._v(" 属性，用于控制表单内组件的尺寸，#7428")]),e("li",[e("code",[t._v("validate")]),t._v(" 方法在不传入 callback 的情况下返回 promise，#7405")]),e("li",[t._v("新增 "),e("code",[t._v("clearValidate")]),t._v(" 方法，用于清空所有表单项的验证信息，#7623")])])]),e("li",[t._v("Input\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("suffix")]),t._v("、"),e("code",[t._v("prefix")]),t._v(" 的 slot，以及 "),e("code",[t._v("suffixIcon")]),t._v("、"),e("code",[t._v("prefixIcon")]),t._v(" 属性，用于给输入框内部增加前置和后置内容 #7032")])])]),e("li",[t._v("Breadcrumb\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("separator-class")]),t._v(" 属性，可使用图标作为分隔符 #7203")])])]),e("li",[t._v("Steps\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("simple")]),t._v(" 属性，用于开启简洁风格的步骤条 #7274")])])]),e("li",[t._v("Pagination\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("prev-text")]),t._v(" 和 "),e("code",[t._v("next-text")]),t._v(" 属性，用于自定义上一页和下一页的文本 #7005")])])]),e("li",[t._v("Loading\n"),e("ul",[e("li",[t._v("配置对象新增 "),e("code",[t._v("spinner")]),t._v(" 和 "),e("code",[t._v("background")]),t._v(" 字段，支持自定义加载图标和背景色，#7390")])])]),e("li",[t._v("Autocomplete\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("debounce")]),t._v(" 属性，#7413")])])]),e("li",[t._v("Upload\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("limit")]),t._v(" 和 "),e("code",[t._v("on-exceed")]),t._v(" 属性，支持对上传文件的个数进行限制，#7405")])])]),e("li",[t._v("DateTimePicker\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("time-arrow-control")]),t._v(" 属性，用于开启时间选择器的 "),e("code",[t._v("arrow-control")]),t._v("，#7438")])])]),e("li",[t._v("Layout\n"),e("ul",[e("li",[t._v("新增断点 "),e("code",[t._v("xl")]),t._v("，适用于宽度大于 1920px 的视口")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("span-method")]),t._v(" 属性，用于合并行或列")]),e("li",[t._v("新增 "),e("code",[t._v("clearSort")]),t._v(" 方法，用于清空排序状态")]),e("li",[t._v("新增 "),e("code",[t._v("clearFilter")]),t._v(" 方法，用于清空过滤状态")]),e("li",[t._v("对于可展开行，当该行展开时会获得一个 "),e("code",[t._v(".expanded")]),t._v(" 类名，方便自定义样式")]),e("li",[t._v("新增 "),e("code",[t._v("size")]),t._v(" 属性，用于控制表格尺寸")]),e("li",[t._v("新增 "),e("code",[t._v("toggleRowExpansion")]),t._v(" 方法，用于手动展开或关闭行")]),e("li",[t._v("新增 "),e("code",[t._v("cell-class-name")]),t._v(" 属性，用于指定单元格的类名")]),e("li",[t._v("新增 "),e("code",[t._v("cell-style")]),t._v(" 属性，用于指定单元格的样式")]),e("li",[t._v("新增 "),e("code",[t._v("header-row-class-name")]),t._v(" 属性，用于指定表头行的类名")]),e("li",[t._v("新增 "),e("code",[t._v("header-row-style")]),t._v(" 属性，用于指定表头行的样式")]),e("li",[t._v("新增 "),e("code",[t._v("header-cell-class-name")]),t._v(" 属性，用于指定表头单元格的类名")]),e("li",[t._v("新增 "),e("code",[t._v("header-cell-style")]),t._v(" 属性，用于指定表头单元格的样式")]),e("li",[t._v("TableColumn 的 "),e("code",[t._v("prop")]),t._v(" 属性支持 "),e("code",[t._v("object[key]")]),t._v(" 格式")]),e("li",[t._v("TableColumn 新增 "),e("code",[t._v("index")]),t._v(" 属性，用于自定义索引值")])])]),e("li",[t._v("Select\n"),e("ul",[e("li",[t._v("新增 "),e("code",[t._v("reserve-keyword")]),t._v(" 属性，用于在选择某个选项后保留当前的搜索关键词")])])])]),e("h4",{attrs:{id:"xiu-fu-16"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-16"}},[t._v("¶")]),t._v(" 修复")]),e("ul",[e("li",[t._v("DatePicker\n"),e("ul",[e("li",[t._v("选择周数时，"),e("code",[t._v("v-model")]),t._v(" 结果返回该周第二天的问题 #6038")]),e("li",[t._v("在 "),e("code",[t._v("daterange")]),t._v(" 类型中，第一次的输入会被清空的问题 #6021")])])]),e("li",[t._v("DateTimePicker\n"),e("ul",[e("li",[t._v("和 TimePicker 相互影响的问题 #6090")]),e("li",[t._v("选择时间小时和秒可超出限制的问题 #6076")])])]),e("li",[t._v("TimePicker\n"),e("ul",[e("li",[t._v("失去焦点时无法正确改变 "),e("code",[t._v("v-model")]),t._v(" 值的问题 #6023")])])]),e("li",[t._v("Dialog\n"),e("ul",[e("li",[t._v("当含有下拉框时，下拉框的打开和关闭会造成文字虚晃的问题 #6088")])])]),e("li",[t._v("Select\n"),e("ul",[e("li",[t._v("提升性能，修复组件销毁时可能导致 Vue dev-tool 卡死的问题 #6151")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("修复 Table 在父元素从 "),e("code",[t._v("display: none")]),t._v(" 变成其他状态时会隐藏的问题")]),e("li",[t._v("修复 Table 在父元素为 "),e("code",[t._v("display: flex")]),t._v(" 时可能出现的宽度逐渐变大的问题")]),e("li",[t._v("修复 "),e("code",[t._v("append")]),t._v(" 具名 slot 和固定列并存时，动态获取表格数据会导致固定列消失的问题")]),e("li",[t._v("修复 "),e("code",[t._v("expand-row-keys")]),t._v(" 属性初始化无效的问题")]),e("li",[t._v("修复 "),e("code",[t._v("data")]),t._v(" 改变时过滤条件失效的问题")]),e("li",[t._v("修复多级表头时固定列隐藏情况计算错误的问题")]),e("li",[t._v("修复 "),e("code",[t._v("max-height")]),t._v(" 变更后无法恢复的问题")]),e("li",[t._v("修复一些样式上的计算错误")])])])]),e("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-6"}},[t._v("¶")]),t._v(" 非兼容性更新")]),e("ul",[e("li",[t._v("综合\n"),e("ul",[e("li",[t._v("移除 "),e("code",[t._v("theme-default")])]),e("li",[t._v("最低兼容 Vue 2.5.2 和 IE 10")]),e("li",[t._v("表单组件的 "),e("code",[t._v("change")]),t._v(" 事件和 Pagination 的 "),e("code",[t._v("current-change")]),t._v(" 事件现在仅响应用户交互")]),e("li",[t._v("Button 和表单组件的 "),e("code",[t._v("size")]),t._v(" 属性现在可接受 "),e("code",[t._v("medium")]),t._v("、"),e("code",[t._v("small")]),t._v(" 和 "),e("code",[t._v("mini")])]),e("li",[t._v("为了方便使用第三方图标，Button 的 "),e("code",[t._v("icon")]),t._v(" 属性、Input 的 "),e("code",[t._v("prefix-icon")]),t._v(" 和 "),e("code",[t._v("suffix-icon")]),t._v(" 属性、Steps 的 "),e("code",[t._v("icon")]),t._v(" 属性现在需要传入完整的图标类名")])])]),e("li",[t._v("Dialog\n"),e("ul",[e("li",[t._v("移除 "),e("code",[t._v("size")]),t._v(" 属性。现在 Dialog 的尺寸由 "),e("code",[t._v("width")]),t._v(" 和 "),e("code",[t._v("fullscreen")]),t._v(" 控制")]),e("li",[t._v("移除通过 "),e("code",[t._v("v-model")]),t._v(" 控制 Dialog 显示和隐藏的功能")])])]),e("li",[t._v("Rate\n"),e("ul",[e("li",[e("code",[t._v("text-template")]),t._v(" 属性更名为 "),e("code",[t._v("score-template")])])])]),e("li",[t._v("Dropdown\n"),e("ul",[e("li",[e("code",[t._v("menu-align")]),t._v(" 属性变更为 "),e("code",[t._v("placement")]),t._v("，增加更多方位属性")])])]),e("li",[t._v("Transfer\n"),e("ul",[e("li",[e("code",[t._v("footer-format")]),t._v(" 属性更名为 "),e("code",[t._v("format")])])])]),e("li",[t._v("Switch\n"),e("ul",[e("li",[t._v("由于 "),e("code",[t._v("on-*")]),t._v(" 属性在 JSX 中会被识别为事件，导致 Switch 所有 "),e("code",[t._v("on-*")]),t._v(" 属性在 JSX 中无法正常工作，所以 "),e("code",[t._v("on-*")]),t._v(" 属性更名为 "),e("code",[t._v("active-*")]),t._v("，对应地，"),e("code",[t._v("off-*")]),t._v(" 属性更名为 "),e("code",[t._v("inactive-*")]),t._v("。受到影响的属性有："),e("code",[t._v("on-icon-class")]),t._v("、"),e("code",[t._v("off-icon-class")]),t._v("、"),e("code",[t._v("on-text")]),t._v("、"),e("code",[t._v("off-text")]),t._v("、"),e("code",[t._v("on-color")]),t._v("、"),e("code",[t._v("off-color")]),t._v("、"),e("code",[t._v("on-value")]),t._v("、"),e("code",[t._v("off-value")])]),e("li",[e("code",[t._v("active-text")]),t._v(" 和 "),e("code",[t._v("inactive-text")]),t._v(" 属性不再有默认值")])])]),e("li",[t._v("Tag\n"),e("ul",[e("li",[e("code",[t._v("type")]),t._v(" 属性现在支持 "),e("code",[t._v("success")]),t._v("、"),e("code",[t._v("info")]),t._v("、"),e("code",[t._v("warning")]),t._v(" 和 "),e("code",[t._v("danger")]),t._v(" 四个值")])])]),e("li",[t._v("Menu\n"),e("ul",[e("li",[t._v("移除 "),e("code",[t._v("theme")]),t._v(" 属性。现在通过 "),e("code",[t._v("background-color")]),t._v("、"),e("code",[t._v("text-color")]),t._v(" 和 "),e("code",[t._v("active-text-color")]),t._v(" 属性进行颜色的自定义")])])]),e("li",[t._v("Input\n"),e("ul",[e("li",[t._v("移除 "),e("code",[t._v("icon")]),t._v(" 属性。现在通过 "),e("code",[t._v("suffix-icon")]),t._v(" 属性或者 "),e("code",[t._v("suffix")]),t._v(" 具名 slot 来加入尾部图标")]),e("li",[t._v("移除 "),e("code",[t._v("on-icon-click")]),t._v(" 属性和 "),e("code",[t._v("click")]),t._v(" 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标")]),e("li",[e("code",[t._v("change")]),t._v(" 事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 input 元素一致。如果需要实时响应用户的输入，可以使用 "),e("code",[t._v("input")]),t._v(" 事件")])])]),e("li",[t._v("Autocomplete\n"),e("ul",[e("li",[t._v("移除 "),e("code",[t._v("custom-item")]),t._v(" 属性。现在通过 "),e("code",[t._v("scoped slot")]),t._v(" 自定义输入建议列表项的内容")]),e("li",[t._v("移除 "),e("code",[t._v("props")]),t._v(" 属性，现在使用 "),e("code",[t._v("value-key")]),t._v(" 属性指定输入建议对象中用于显示的键名")])])]),e("li",[t._v("Steps\n"),e("ul",[e("li",[t._v("移除 "),e("code",[t._v("center")]),t._v(" 属性")]),e("li",[t._v("现在步骤条将默认充满父容器")])])]),e("li",[t._v("DatePicker\n"),e("ul",[e("li",[e("code",[t._v("change")]),t._v(" 事件参数现在为组件的绑定值，格式由 "),e("code",[t._v("value-format")]),t._v(" 控制")])])]),e("li",[t._v("Table\n"),e("ul",[e("li",[t._v("移除通过 "),e("code",[t._v("inline-template")]),t._v(" 自定义列模板的功能")]),e("li",[e("code",[t._v("sort-method")]),t._v(" 现在和 "),e("code",[t._v("Array.sort")]),t._v(" 保持一致的逻辑，要求返回一个数字")]),e("li",[t._v("将 "),e("code",[t._v("append")]),t._v(" slot 移至 "),e("code",[t._v("tbody")]),t._v(" 元素以外，以保证其只被渲染一次")]),e("li",[e("code",[t._v("expand")]),t._v(" 事件更名为 "),e("code",[t._v("expand-change")]),t._v("，以保证 API 的命名一致性")]),e("li",[e("code",[t._v("row-class-name")]),t._v(" 和 "),e("code",[t._v("row-style")]),t._v(" 的函数参数改为对象，以保证 API 的一致性")])])])]),e("h2",{attrs:{id:""}},[e("a",{staticClass:"header-anchor",attrs:{href:"#"}},[t._v("¶")])]),e("p",[e("i",[e("sup",[t._v("*")]),t._v(" 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),e("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[t._v("XSS 攻击")]),t._v("。因此请在 "),e("code",[t._v("dangerouslyUseHTMLString")]),t._v(" 打开的情况下，确保 "),e("code",[t._v("message")]),t._v(" 的内容是可信的，"),e("strong",[t._v("永远不要")]),t._v("将用户提交的内容赋值给 "),e("code",[t._v("message")]),t._v(" 属性。")])])])}],!1,null,null,null).exports},data:function(){return{count:3}},mounted:function(){var t=this.$refs.changeLog,e=t.$el.children;(r=e[1].querySelector("a"))&&r.remove();for(var n=e[1].textContent.trim(),a='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+n+'" target="_blank">'+n+"</a></h3>",i=e.length,s=2;s<i;s++){var r,l=e[s];(r=e[s].querySelector("a"))&&"header-anchor"===r.getAttribute("class")&&r.remove(),"H3"!==l.tagName?a+=e[s].outerHTML:a+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(n=e[s].textContent.trim())+'" target="_blank">'+n+"</a></h3>"}a=(a=a.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=a+"</li>",t.$el.remove()}},i=(n(1016),Object(a.a)(i,function(){var t=this.$createElement,t=this._self._c||t;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("tis-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));e.default=i.exports},1078:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-breadcrumb-tree",{attrs:{data:this.data},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"}]}]}]}},methods:{handleNodeClick:function(t,e){console.log("data:",t),console.log("node:",e)}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("p",[t._v("面包屑+树形结构组件")]),t._m(2),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<tis-breadcrumb-tree :data=\"data\" @node-click=\"handleNodeClick\"></tis-breadcrumb-tree>\n\n<script>\nexport 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        };\n    },\n    methods: {\n      handleNodeClick(data, node) {\n        console.log('data:', data);\n        console.log('node:', node);\n      }\n    }\n}\n<\/script>\n")])])])],2)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"breadcrumbtree-mian-bao-xie-shu-xing-zu-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumbtree-mian-bao-xie-shu-xing-zu-jian"}},[this._v("¶")]),this._v(" BreadcrumbTree 面包屑树形组件")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])}],!1,null,null,null);e.default=a.exports},1079:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell",{attrs:{"is-link":"",title:"基础用法"},on:{click:function(t){e.show=!0}}}),e._v(" "),t("m-action-sheet",{attrs:{actions:e.actions},on:{select:e.onSelect},model:{value:e.show,callback:function(t){e.show=t},expression:"show"}})],1)},staticRenderFns:[]},{data:function(){return{show:!1,actions:[{name:"选项一"},{name:"选项二"},{name:"选项三"}]}},methods:{onSelect:function(t){this.show=!1}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell",{attrs:{"is-link":"",title:"展示取消按钮"},on:{click:function(t){e.show=!0}}}),e._v(" "),t("m-action-sheet",{attrs:{actions:e.actions,"cancel-text":"取消","close-on-click-action":""},on:{cancel:e.onCancel},model:{value:e.show,callback:function(t){e.show=t},expression:"show"}})],1)},staticRenderFns:[]},{data:function(){return{show:!1,actions:[{name:"选项一"},{name:"选项二"},{name:"选项三"}]}},methods:{onCancel:function(){}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell",{attrs:{"is-link":"",title:"展示描述信息"},on:{click:function(t){e.show=!0}}}),e._v(" "),t("m-action-sheet",{attrs:{actions:e.actions,"cancel-text":"取消",description:"这是一段描述信息","close-on-click-action":""},model:{value:e.show,callback:function(t){e.show=t},expression:"show"}})],1)},staticRenderFns:[]},{data:function(){return{show:!1,actions:[{name:"选项一"},{name:"选项二"},{name:"选项三",subname:"描述信息"}]}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell",{attrs:{"is-link":"",title:"选项状态"},on:{click:function(t){e.show=!0}}}),e._v(" "),t("m-action-sheet",{attrs:{actions:e.actions,"cancel-text":"取消","close-on-click-action":""},model:{value:e.show,callback:function(t){e.show=t},expression:"show"}})],1)},staticRenderFns:[]},{data:function(){return{show:!1,actions:[{name:"着色选项",color:"#ee0a24"},{name:"禁用选项",disabled:!0},{name:"加载选项",loading:!0}]}}}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell",{attrs:{"is-link":"",title:"自定义面板"},on:{click:function(t){e.show=!0}}}),e._v(" "),t("m-action-sheet",{attrs:{title:"标题"},model:{value:e.show,callback:function(t){e.show=t},expression:"show"}},[t("div",{staticClass:"content"},[e._v("内容")])])],1)},staticRenderFns:[]},{data:function(){return{show:!1}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("p",[t._v("底部弹起的模态面板，包含与当前情境相关的多个选项。")]),t._m(2),t._m(3),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell is-link title="基础用法" @click="show = true" />\n<m-action-sheet v-model="show" :actions="actions" @select="onSelect" />\n\n<script>\nexport default {\n  data() {\n    return {\n      show: false,\n      actions: [{ name: \'选项一\' }, { name: \'选项二\' }, { name: \'选项三\' }],\n    };\n  },\n  methods: {\n    onSelect(item) {\n      // 默认情况下点击选项时不会自动收起\n      // 可以通过 close-on-click-action 属性开启自动收起\n      this.show = false;\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(4),t._m(5),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell is-link title="展示取消按钮" @click="show = true" />\n<m-action-sheet\n  v-model="show"\n  :actions="actions"\n  cancel-text="取消"\n  close-on-click-action\n  @cancel="onCancel"\n/>\n\n<script>\nexport default {\n  data() {\n    return {\n      show: false,\n      actions: [{ name: \'选项一\' }, { name: \'选项二\' }, { name: \'选项三\' }],\n    };\n  },\n  methods: {\n    onCancel() {\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(6),t._m(7),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell is-link title="展示描述信息" @click="show = true" />\n<m-action-sheet\n  v-model="show"\n  :actions="actions"\n  cancel-text="取消"\n  description="这是一段描述信息"\n  close-on-click-action\n/>\n\n<script>\nexport default {\n  data() {\n    return {\n      show: false,\n      actions: [\n        { name: \'选项一\' },\n        { name: \'选项二\' },\n        { name: \'选项三\', subname: \'描述信息\' },\n      ],\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(8),t._m(9),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell is-link title="选项状态" @click="show = true" />\n<m-action-sheet\n  v-model="show"\n  :actions="actions"\n  cancel-text="取消"\n  close-on-click-action\n/>\n\n<script>\nexport default {\n  data() {\n    return {\n      show: false,\n      actions: [\n        { name: \'着色选项\', color: \'#ee0a24\' },\n        { name: \'禁用选项\', disabled: true },\n        { name: \'加载选项\', loading: true },\n      ],\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(10),t._m(11),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell is-link title="自定义面板" @click="show = true" />\n<m-action-sheet v-model="show" title="标题">\n  <div class="content">内容</div>\n</m-action-sheet>\n\n<script>\nexport default {\n  data() {\n    return {\n      show: false\n    };\n  },\n};\n<\/script>\n\n<style>\n  .content {\n    padding: 16px 16px 160px;\n  }\n</style>\n')])])])],2),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"actionsheet-dong-zuo-mian-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#actionsheet-dong-zuo-mian-ban"}},[this._v("¶")]),this._v(" ActionSheet 动作面板")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("动作面板通过 "),e("code",[t._v("actions")]),t._v(" 属性来定义选项，"),e("code",[t._v("actions")]),t._v(" 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象格式见文档下方表格。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhan-shi-qu-xiao-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhan-shi-qu-xiao-an-niu"}},[this._v("¶")]),this._v(" 展示取消按钮")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("设置 "),e("code",[t._v("cancel-text")]),t._v(" 属性后，会在底部展示取消按钮，点击后关闭当前面板并触发 "),e("code",[t._v("cancel")]),t._v(" 事件。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhan-shi-miao-shu-xin-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhan-shi-miao-shu-xin-xi"}},[this._v("¶")]),this._v(" 展示描述信息")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("description")]),t._v(" 可以在菜单顶部显示描述信息，通过选项的 "),e("code",[t._v("subname")]),t._v(" 属性可以在选项文字的右侧展示描述信息。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xuan-xiang-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-xiang-zhuang-tai"}},[this._v("¶")]),this._v(" 选项状态")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("可以通过 "),e("code",[t._v("loading")]),t._v(" 和 "),e("code",[t._v("disabled")]),t._v(" 将选项设置为加载状态或禁用状态，或者通过"),e("code",[t._v("color")]),t._v("设置选项的颜色")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-mian-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mian-ban"}},[this._v("¶")]),this._v(" 自定义面板")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过插槽可以自定义面板的展示内容，同时可以使用"),e("code",[t._v("title")]),t._v("属性展示标题栏")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("v-model (value)")]),e("td",[t._v("是否显示动作面板")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("actions")]),e("td",[t._v("面板选项列表")]),e("td",[e("em",[t._v("Action[]")])]),e("td",[e("code",[t._v("[]")])])]),e("tr",[e("td",[t._v("title")]),e("td",[t._v("顶部标题")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("cancel-text")]),e("td",[t._v("取消按钮文字")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("description")]),e("td",[t._v("选项上方的描述信息")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("closeable "),e("code",[t._v("v2.10.5")])]),e("td",[t._v("是否显示关闭图标")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("close-icon")]),e("td",[t._v("关闭"),e("a",{attrs:{href:"#/zh-CN/icon"}},[t._v("图标名称")]),t._v("或图片链接")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("cross")])])]),e("tr",[e("td",[t._v("duration")]),e("td",[t._v("动画时长，单位秒")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("0.3")])])]),e("tr",[e("td",[t._v("round")]),e("td",[t._v("是否显示圆角")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("overlay")]),e("td",[t._v("是否显示遮罩层")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("lock-scroll")]),e("td",[t._v("是否锁定背景滚动")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("lazy-render")]),e("td",[t._v("是否在显示弹层时才渲染节点")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("close-on-popstate "),e("code",[t._v("v2.5.3")])]),e("td",[t._v("是否在页面回退时自动关闭")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("close-on-click-action")]),e("td",[t._v("是否在点击选项后关闭")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("close-on-click-overlay")]),e("td",[t._v("是否在点击遮罩层后关闭")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("safe-area-inset-bottom")]),e("td",[t._v("是否开启"),e("a",{attrs:{href:"#/zh-CN/admced-usage#di-bu-an-quan-qu-gua-pei"}},[t._v("底部安全区适配")])]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("get-container")]),e("td",[t._v("指定挂载的节点，"),e("a",{attrs:{href:"#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi"}},[t._v("用法示例")])]),e("td",[e("em",[t._v("string | () => Element")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"action-shu-ju-jie-gou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#action-shu-ju-jie-gou"}},[this._v("¶")]),this._v(" Action 数据结构")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[t("code",[this._v("actions")]),this._v(" 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("键名")]),e("th",[t._v("说明")]),e("th",[t._v("类型")])])]),e("tbody",[e("tr",[e("td",[t._v("name")]),e("td",[t._v("标题")]),e("td",[e("em",[t._v("string")])])]),e("tr",[e("td",[t._v("subname")]),e("td",[t._v("二级标题")]),e("td",[e("em",[t._v("string")])])]),e("tr",[e("td",[t._v("color")]),e("td",[t._v("选项文字颜色")]),e("td",[e("em",[t._v("string")])])]),e("tr",[e("td",[t._v("className")]),e("td",[t._v("为对应列添加额外的 class")]),e("td",[e("em",[t._v("any")])])]),e("tr",[e("td",[t._v("loading")]),e("td",[t._v("是否为加载状态")]),e("td",[e("em",[t._v("boolean")])])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否为禁用状态")]),e("td",[e("em",[t._v("boolean")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("select")]),e("td",[t._v("点击选项时触发，禁用或加载状态下不会触发")]),e("td",[e("em",[t._v("action: Action, index: number")])])]),e("tr",[e("td",[t._v("cancel")]),e("td",[t._v("点击取消按钮时触发")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("open")]),e("td",[t._v("打开面板时触发")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("close")]),e("td",[t._v("关闭面板时触发")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("opened")]),e("td",[t._v("打开面板且动画结束后触发")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("closed")]),e("td",[t._v("关闭面板且动画结束后触发")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("click-overlay")]),e("td",[t._v("点击遮罩层时触发")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("default")]),e("td",[t._v("自定义面板的展示内容")])]),e("tr",[e("td",[t._v("description "),e("code",[t._v("v2.10.4")])]),e("td",[t._v("自定义描述文案")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),e("a",{attrs:{href:"#/zh-CN/theme"}},[t._v("主题定制")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@action-sheet-max-height")]),e("td",[e("code",[t._v("80%")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-header-height")]),e("td",[e("code",[t._v("48px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-header-font-size")]),e("td",[e("code",[t._v("@font-size-lg")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-description-color")]),e("td",[e("code",[t._v("@gray-6")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-description-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-description-line-height")]),e("td",[e("code",[t._v("@line-height-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-item-background")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-item-font-size")]),e("td",[e("code",[t._v("@font-size-lg")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-item-line-height")]),e("td",[e("code",[t._v("@line-height-lg")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-item-text-color")]),e("td",[e("code",[t._v("@text-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-item-disabled-text-color")]),e("td",[e("code",[t._v("@gray-5")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-subname-color")]),e("td",[e("code",[t._v("@gray-6")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-subname-font-size")]),e("td",[e("code",[t._v("@font-size-sm")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-subname-line-height")]),e("td",[e("code",[t._v("@line-height-sm")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-close-icon-size")]),e("td",[e("code",[t._v("22px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-close-icon-color")]),e("td",[e("code",[t._v("@gray-5")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-close-icon-active-color")]),e("td",[e("code",[t._v("@gray-6")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-close-icon-padding")]),e("td",[e("code",[t._v("0 @padding-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-cancel-text-color")]),e("td",[e("code",[t._v("@gray-7")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-cancel-padding-top")]),e("td",[e("code",[t._v("@padding-xs")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-cancel-padding-color")]),e("td",[e("code",[t._v("@background-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@action-sheet-loading-icon-size")]),e("td",[e("code",[t._v("22px")])]),e("td",[t._v("-")])])])])}],!1,null,null,null);e.default=a.exports},1080:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("m-button",{attrs:{type:"primary"}},[t._v("主要按钮")]),t._v(" "),e("m-button",{attrs:{type:"info"}},[t._v("信息按钮")]),t._v(" "),e("m-button",{attrs:{type:"default"}},[t._v("默认按钮")]),t._v(" "),e("m-button",{attrs:{type:"warning"}},[t._v("警告按钮")]),t._v(" "),e("m-button",{attrs:{type:"danger"}},[t._v("危险按钮")])],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("m-button",{attrs:{plain:"",type:"primary"}},[t._v("朴素按钮")]),t._v(" "),e("m-button",{attrs:{plain:"",type:"info"}},[t._v("朴素按钮")])],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("m-button",{attrs:{plain:"",hairline:"",type:"primary"}},[t._v("细边框按钮")]),t._v(" "),e("m-button",{attrs:{plain:"",hairline:"",type:"info"}},[t._v("细边框按钮")])],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("m-button",{attrs:{disabled:"",type:"primary"}},[t._v("禁用状态")]),t._v(" "),e("m-button",{attrs:{disabled:"",type:"info"}},[t._v("禁用状态")])],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-button",{attrs:{loading:"",type:"primary"}}),this._v(" "),t("m-button",{attrs:{loading:"",type:"primary","loading-type":"spinner"}}),this._v(" "),t("m-button",{attrs:{loading:"",type:"info","loading-text":"加载中..."}})],1)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("m-button",{attrs:{square:"",type:"primary"}},[t._v("方形按钮")]),t._v(" "),e("m-button",{attrs:{round:"",type:"info"}},[t._v("圆形按钮")])],1)},staticRenderFns:[]},{}),"element-demo6":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("m-button",{attrs:{icon:"plus",type:"primary"}}),t._v(" "),e("m-button",{attrs:{icon:"plus",type:"primary"}},[t._v("按钮")]),t._v(" "),e("m-button",{attrs:{icon:"https://img.yzcdn.cn/vant/user-active.png",type:"info"}},[t._v("\n  按钮\n")])],1)},staticRenderFns:[]},{}),"element-demo7":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("m-button",{attrs:{type:"primary",size:"large"}},[t._v("大号按钮")]),t._v(" "),e("m-button",{attrs:{type:"primary",size:"normal"}},[t._v("普通按钮")]),t._v(" "),e("m-button",{attrs:{type:"primary",size:"small"}},[t._v("小型按钮")]),t._v(" "),e("m-button",{attrs:{type:"primary",size:"mini"}},[t._v("迷你按钮")])],1)},staticRenderFns:[]},{}),"element-demo8":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-button",{attrs:{type:"primary",block:""}},[this._v("块级元素")])],1)},staticRenderFns:[]},{}),"element-demo9":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("m-button",{attrs:{type:"primary",url:"/vant/mobile.html"}},[t._v("URL 跳转")]),t._v(" "),e("m-button",{attrs:{type:"primary",to:"index"}},[t._v("路由跳转")])],1)},staticRenderFns:[]},{}),"element-demo10":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("m-button",{attrs:{color:"#7232dd"}},[t._v("单色按钮")]),t._v(" "),e("m-button",{attrs:{color:"#7232dd",plain:""}},[t._v("单色按钮")]),t._v(" "),e("m-button",{attrs:{color:"linear-gradient(to right, #ff6034, #ee0a24)"}},[t._v("\n  渐变色按钮\n")])],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("p",[t._v("按钮用于触发一个操作，如提交表单。")]),t._m(2),t._m(3),t._m(4),t._m(5),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-button type="primary">主要按钮</m-button>\n<m-button type="info">信息按钮</m-button>\n<m-button type="default">默认按钮</m-button>\n<m-button type="warning">警告按钮</m-button>\n<m-button type="danger">危险按钮</m-button>\n')])])])],2),t._m(6),t._m(7),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-button plain type="primary">朴素按钮</m-button>\n<m-button plain type="info">朴素按钮</m-button>\n')])])])],2),t._m(8),t._m(9),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-button plain hairline type="primary">细边框按钮</m-button>\n<m-button plain hairline type="info">细边框按钮</m-button>\n')])])])],2),t._m(10),t._m(11),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-button disabled type="primary">禁用状态</m-button>\n<m-button disabled type="info">禁用状态</m-button>\n')])])])],2),t._m(12),t._m(13),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-button loading type="primary" />\n<m-button loading type="primary" loading-type="spinner" />\n<m-button loading type="info" loading-text="加载中..." />\n')])])])],2),t._m(14),t._m(15),e("demo-block",[e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-button square type="primary">方形按钮</m-button>\n<m-button round type="info">圆形按钮</m-button>\n')])])])],2),t._m(16),t._m(17),e("demo-block",[e("template",{slot:"source"},[e("element-demo6")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-button icon="plus" type="primary" />\n<m-button icon="plus" type="primary">按钮</m-button>\n<m-button icon="https://img.yzcdn.cn/vant/user-active.png" type="info">\n  按钮\n</m-button>\n')])])])],2),t._m(18),t._m(19),e("demo-block",[e("template",{slot:"source"},[e("element-demo7")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-button type="primary" size="large">大号按钮</m-button>\n<m-button type="primary" size="normal">普通按钮</m-button>\n<m-button type="primary" size="small">小型按钮</m-button>\n<m-button type="primary" size="mini">迷你按钮</m-button>\n')])])])],2),t._m(20),t._m(21),e("demo-block",[e("template",{slot:"source"},[e("element-demo8")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-button type="primary" block>块级元素</m-button>\n')])])])],2),t._m(22),t._m(23),e("demo-block",[e("template",{slot:"source"},[e("element-demo9")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-button type="primary" url="/vant/mobile.html">URL 跳转</m-button>\n<m-button type="primary" to="index">路由跳转</m-button>\n')])])])],2),t._m(24),t._m(25),e("demo-block",[e("template",{slot:"source"},[e("element-demo10")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-button color="#7232dd">单色按钮</m-button>\n<m-button color="#7232dd" plain>单色按钮</m-button>\n<m-button color="linear-gradient(to right, #ff6034, #ee0a24)">\n  渐变色按钮\n</m-button>\n')])])])],2),t._m(26),t._m(27),t._m(28),t._m(29),t._m(30),t._m(31),t._m(32),t._m(33),t._m(34),t._m(35)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"button-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-an-niu"}},[this._v("¶")]),this._v(" Button 按钮")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yin-ru"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru"}},[this._v("¶")]),this._v(" 引入")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dai-ma-yan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ma-yan-shi"}},[this._v("¶")]),this._v(" 代码演示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"an-niu-lei-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-lei-xing"}},[this._v("¶")]),this._v(" 按钮类型")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("按钮支持 "),e("code",[t._v("default")]),t._v("、"),e("code",[t._v("primary")]),t._v("、"),e("code",[t._v("info")]),t._v("、"),e("code",[t._v("warning")]),t._v("、"),e("code",[t._v("danger")]),t._v(" 五种类型，默认为 "),e("code",[t._v("default")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"po-su-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#po-su-an-niu"}},[this._v("¶")]),this._v(" 朴素按钮")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("plain")]),t._v(" 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xi-bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xi-bian-kuang"}},[this._v("¶")]),this._v(" 细边框")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("设置 "),e("code",[t._v("hairline")]),t._v(" 属性可以展示 0.5px 的细边框。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("disabled")]),t._v(" 属性来禁用按钮，禁用状态下按钮不可点击。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jia-zai-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-zhuang-tai"}},[this._v("¶")]),this._v(" 加载状态")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("loading")]),t._v(" 属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过 "),e("code",[t._v("loading-text")]),t._v(" 设置加载状态下的文字。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"an-niu-xing-zhuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-xing-zhuang"}},[this._v("¶")]),this._v(" 按钮形状")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("square")]),t._v(" 设置方形按钮，通过 "),e("code",[t._v("round")]),t._v(" 设置圆形按钮。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"tu-biao-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-an-niu"}},[this._v("¶")]),this._v(" 图标按钮")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("icon")]),t._v(" 属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"an-niu-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-chi-cun"}},[this._v("¶")]),this._v(" 按钮尺寸")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("支持 "),e("code",[t._v("large")]),t._v("、"),e("code",[t._v("normal")]),t._v("、"),e("code",[t._v("small")]),t._v("、"),e("code",[t._v("mini")]),t._v(" 四种尺寸，默认为 "),e("code",[t._v("normal")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"kuai-ji-yuan-su"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#kuai-ji-yuan-su"}},[this._v("¶")]),this._v(" 块级元素")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("按钮在默认情况下为行内块级元素，通过 "),e("code",[t._v("block")]),t._v(" 属性可以将按钮的元素类型设置为块级元素。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ye-mian-dao-hang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ye-mian-dao-hang"}},[this._v("¶")]),this._v(" 页面导航")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("可以通过 "),e("code",[t._v("url")]),t._v(" 属性进行 URL 跳转，或通过 "),e("code",[t._v("to")]),t._v(" 属性进行路由跳转。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-yan-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-yan-se"}},[this._v("¶")]),this._v(" 自定义颜色")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("color")]),t._v(" 属性可以自定义按钮的颜色。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("type")]),e("td",[t._v("类型，可选值为 "),e("code",[t._v("primary")]),e("code",[t._v("info")]),e("code",[t._v("warning")]),e("code",[t._v("danger")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("default")])])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("尺寸，可选值为 "),e("code",[t._v("large")]),e("code",[t._v("small")]),e("code",[t._v("mini")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("normal")])])]),e("tr",[e("td",[t._v("text")]),e("td",[t._v("按钮文字")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("color")]),e("td",[t._v("按钮颜色，支持传入 "),e("code",[t._v("linear-gradient")]),t._v(" 渐变色")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("icon")]),e("td",[t._v("左侧"),e("a",{attrs:{href:"#/zh-CN/icon"}},[t._v("图标名称")]),t._v("或图片链接")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("icon-prefix "),e("code",[t._v("v2.6.0")])]),e("td",[t._v("图标类名前缀，同 Icon 组件的 "),e("a",{attrs:{href:"#/zh-CN/icon#props"}},[t._v("class-prefix 属性")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("van-icon")])])]),e("tr",[e("td",[t._v("icon-position "),e("code",[t._v("v2.10.7")])]),e("td",[t._v("图标展示位置，可选值为 "),e("code",[t._v("right")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("left")])])]),e("tr",[e("td",[t._v("tag")]),e("td",[t._v("按钮根节点的 HTML 标签")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("button")])])]),e("tr",[e("td",[t._v("native-type")]),e("td",[t._v("原生 button 标签的 type 属性")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("block")]),e("td",[t._v("是否为块级元素")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("plain")]),e("td",[t._v("是否为朴素按钮")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("square")]),e("td",[t._v("是否为方形按钮")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("round")]),e("td",[t._v("是否为圆形按钮")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用按钮")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("hairline")]),e("td",[t._v("是否使用 0.5px 边框")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("loading")]),e("td",[t._v("是否显示为加载状态")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("loading-text")]),e("td",[t._v("加载状态提示文字")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("loading-type")]),e("td",[e("a",{attrs:{href:"#/zh-CN/loading"}},[t._v("加载图标类型")]),t._v("，可选值为 "),e("code",[t._v("spinner")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("circular")])])]),e("tr",[e("td",[t._v("loading-size")]),e("td",[t._v("加载图标大小")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("20px")])])]),e("tr",[e("td",[t._v("url")]),e("td",[t._v("点击后跳转的链接地址")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("to")]),e("td",[t._v("点击后跳转的目标路由对象，同 vue-router 的 "),e("a",{attrs:{href:"https://router.vuejs.org/zh/api/#to"}},[t._v("to 属性")])]),e("td",[e("em",[t._v("string | object")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("replace")]),e("td",[t._v("是否在跳转时替换当前页面历史")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("click")]),e("td",[t._v("点击按钮，且按钮状态不为加载或禁用时触发")]),e("td",[e("em",[t._v("event: Event")])])]),e("tr",[e("td",[t._v("touchstart")]),e("td",[t._v("开始触摸按钮时触发")]),e("td",[e("em",[t._v("event: TouchEvent")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("default")]),e("td",[t._v("按钮内容")])]),e("tr",[e("td",[t._v("loading "),e("code",[t._v("v2.10.1")])]),e("td",[t._v("自定义加载图标")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),e("a",{attrs:{href:"#/zh-CN/theme"}},[t._v("主题定制")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@button-mini-height")]),e("td",[e("code",[t._v("24px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-mini-font-size")]),e("td",[e("code",[t._v("@font-size-xs")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-small-height")]),e("td",[e("code",[t._v("32px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-small-font-size")]),e("td",[e("code",[t._v("@font-size-sm")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-normal-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-large-height")]),e("td",[e("code",[t._v("50px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-default-height")]),e("td",[e("code",[t._v("44px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-default-line-height")]),e("td",[e("code",[t._v("1.2")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-default-font-size")]),e("td",[e("code",[t._v("@font-size-lg")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-default-color")]),e("td",[e("code",[t._v("@text-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-default-background-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-default-border-color")]),e("td",[e("code",[t._v("@border-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-primary-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-primary-background-color")]),e("td",[e("code",[t._v("@green")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-primary-border-color")]),e("td",[e("code",[t._v("@green")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-info-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-info-background-color")]),e("td",[e("code",[t._v("@blue")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-info-border-color")]),e("td",[e("code",[t._v("@blue")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-danger-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-danger-background-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-danger-border-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-warning-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-warning-background-color")]),e("td",[e("code",[t._v("@orange")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-warning-border-color")]),e("td",[e("code",[t._v("@orange")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-border-width")]),e("td",[e("code",[t._v("@border-width-base")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-border-radius")]),e("td",[e("code",[t._v("@border-radius-sm")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-round-border-radius")]),e("td",[e("code",[t._v("@border-radius-max")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-plain-background-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@button-disabled-opacity")]),e("td",[e("code",[t._v("@disabled-opacity")])]),e("td",[t._v("-")])])])])}],!1,null,null,null);e.default=a.exports},1081:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[[e("tis-table",{directives:[{name:"loading",rawName:"v-loading",value:t.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:t.tableData}},[e("tis-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),t._v(" "),e("tis-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),t._v(" "),e("tis-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}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("加载数据时显示动效。")]),t._m(1),e("p",[t._v("在表格等容器中加载数据时显示。")]),e("demo-block",[e("div",[e("p",[t._v("Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令"),e("code",[t._v("v-loading")]),t._v("，只需要绑定"),e("code",[t._v("Boolean")]),t._v("即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加"),e("code",[t._v("body")]),t._v("修饰符，可以使遮罩插入至 DOM 中的 body 上。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-table\n    v-loading="loading"\n    :data="tableData"\n    style="width: 100%">\n    <tis-table-column\n      prop="date"\n      label="日期"\n      width="180">\n    </tis-table-column>\n    <tis-table-column\n      prop="name"\n      label="姓名"\n      width="180">\n    </tis-table-column>\n    <tis-table-column\n      prop="address"\n      label="地址">\n    </tis-table-column>\n  </tis-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),t._m(2),e("p",[t._v("Loading 还可以以服务的方式调用。引入 Loading 服务：")]),t._m(3),e("p",[t._v("在需要调用时：")]),t._m(4),t._m(5),t._m(6),e("p",[t._v("需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：")]),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"loading-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-jia-zai"}},[this._v("¶")]),this._v(" Loading 加载")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"qu-yu-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qu-yu-jia-zai"}},[this._v("¶")]),this._v(" 区域加载")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fu-wu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-wu"}},[this._v("¶")]),this._v(" 服务")])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Loading } from 'element-ui';\n")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("Loading.service(options);\n")])])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("其中 "),e("code",[t._v("options")]),t._v(" 参数为 Loading 的配置项，具体见下表。"),e("code",[t._v("LoadingService")]),t._v(" 会返回一个 Loading 实例，可通过调用该实例的 "),e("code",[t._v("close")]),t._v(" 方法来关闭它：")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;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 t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("此时调用它们中任意一个的 "),e("code",[t._v("close")]),t._v(" 方法都能关闭这个全屏 Loading。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 "),e("code",[t._v("$loading")]),t._v("，它的调用方式为："),e("code",[t._v("this.$loading(options)")]),t._v("，同样会返回一个 Loading 实例。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options"}},[this._v("¶")]),this._v(" Options")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("target")]),e("td",[t._v("Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 "),e("code",[t._v("document.querySelector")]),t._v("以获取到对应 DOM 节点")]),e("td",[t._v("object/string")]),e("td",[t._v("—")]),e("td",[t._v("document.body")])]),e("tr",[e("td",[t._v("body")]),e("td",[t._v("同 "),e("code",[t._v("v-loading")]),t._v(" 指令中的 "),e("code",[t._v("body")]),t._v(" 修饰符")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("fullscreen")]),e("td",[t._v("同 "),e("code",[t._v("v-loading")]),t._v(" 指令中的 "),e("code",[t._v("fullscreen")]),t._v(" 修饰符")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("lock")]),e("td",[t._v("同 "),e("code",[t._v("v-loading")]),t._v(" 指令中的 "),e("code",[t._v("lock")]),t._v(" 修饰符")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("text")]),e("td",[t._v("显示在加载图标下方的加载文案")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("spinner")]),e("td",[t._v("自定义加载图标类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("background")]),e("td",[t._v("遮罩背景色")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("customClass")]),e("td",[t._v("Loading 的自定义类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])}],!1,null,null,null);e.default=a.exports},1082:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell",{attrs:{title:"选择单个日期",value:e.date},on:{click:function(t){e.show=!0}}}),e._v(" "),t("m-calendar",{on:{confirm:e.onConfirm},model:{value:e.show,callback:function(t){e.show=t},expression:"show"}})],1)},staticRenderFns:[]},{data:function(){return{date:"",show:!1}},methods:{formatDate:function(t){return t.getMonth()+1+"/"+t.getDate()},onConfirm:function(t){this.show=!1,this.date=this.formatDate(t)}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell",{attrs:{title:"选择多个日期",value:e.text},on:{click:function(t){e.show=!0}}}),e._v(" "),t("m-calendar",{attrs:{type:"multiple"},on:{confirm:e.onConfirm},model:{value:e.show,callback:function(t){e.show=t},expression:"show"}})],1)},staticRenderFns:[]},{data:function(){return{text:"",show:!1}},methods:{onConfirm:function(t){this.show=!1,this.text="选择了 "+t.length+" 个日期"}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell",{attrs:{title:"选择日期区间",value:e.date},on:{click:function(t){e.show=!0}}}),e._v(" "),t("m-calendar",{attrs:{type:"range"},on:{confirm:e.onConfirm},model:{value:e.show,callback:function(t){e.show=t},expression:"show"}})],1)},staticRenderFns:[]},{data:function(){return{date:"",show:!1}},methods:{formatDate:function(t){return t.getMonth()+1+"/"+t.getDate()},onConfirm:function(t){var e=t[0],t=t[1];this.show=!1,this.date=this.formatDate(e)+" - "+this.formatDate(t)}}}),"element-demo3":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-calendar",{style:{height:"500px"},attrs:{title:"日历",poppable:!1,"show-confirm":!1}})],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("p",[t._v("日历组件用于选择日期或日期区间，2.4 版本开始支持此组件。")]),t._m(2),t._m(3),t._m(4),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell title="选择单个日期" :value="date" @click="show = true" />\n<m-calendar v-model="show" @confirm="onConfirm" />\n\n<script>\nexport default {\n  data() {\n    return {\n      date: \'\',\n      show: false,\n    };\n  },\n  methods: {\n    formatDate(date) {\n      return `${date.getMonth() + 1}/${date.getDate()}`;\n    },\n    onConfirm(date) {\n      this.show = false;\n      this.date = this.formatDate(date);\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(5),t._m(6),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell title="选择多个日期" :value="text" @click="show = true" />\n<m-calendar v-model="show" type="multiple" @confirm="onConfirm" />\n\n<script>\nexport default {\n  data() {\n    return {\n      text: \'\',\n      show: false,\n    };\n  },\n  methods: {\n    onConfirm(date) {\n      this.show = false;\n      this.text = `选择了 ${date.length} 个日期`;\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(7),t._m(8),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell title="选择日期区间" :value="date" @click="show = true" />\n<m-calendar v-model="show" type="range" @confirm="onConfirm" />\n\n<script>\nexport default {\n  data() {\n    return {\n      date: \'\',\n      show: false,\n    };\n  },\n  methods: {\n    formatDate(date) {\n      return `${date.getMonth() + 1}/${date.getDate()}`;\n    },\n    onConfirm(date) {\n      const [start, end] = date;\n      this.show = false;\n      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(9),t._m(10),t._m(11),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-calendar\n  title="日历"\n  :poppable="false"\n  :show-confirm="false"\n  :style="{ height: \'500px\' }"\n/>\n')])])])],2),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26),t._m(27),t._m(28),t._m(29),t._m(30),t._m(31),t._m(32),t._m(33),t._m(34),t._m(35),t._m(36),t._m(37),t._m(38),t._m(39),t._m(40)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"calendar-ri-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#calendar-ri-li"}},[this._v("¶")]),this._v(" Calendar 日历")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dai-ma-yan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ma-yan-shi"}},[this._v("¶")]),this._v(" 代码演示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xuan-ze-dan-ge-ri-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-dan-ge-ri-qi"}},[this._v("¶")]),this._v(" 选择单个日期")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发 "),e("code",[t._v("confirm")]),t._v(" 事件。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xuan-ze-duo-ge-ri-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-duo-ge-ri-qi"}},[this._v("¶")]),this._v(" 选择多个日期")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("设置 "),e("code",[t._v("type")]),t._v(" 为 "),e("code",[t._v("multiple")]),t._v(" 后可以选择多个日期，此时 "),e("code",[t._v("confirm")]),t._v(" 事件返回的 date 为数组结构，数组包含若干个选中的日期。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xuan-ze-ri-qi-qu-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri-qi-qu-jian"}},[this._v("¶")]),this._v(" 选择日期区间")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("设置 "),e("code",[t._v("type")]),t._v(" 为 "),e("code",[t._v("range")]),t._v(" 后可以选择日期区间，此时 "),e("code",[t._v("confirm")]),t._v(" 事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("Tips: 默认情况下，日期区间的起止时间不能为同一天，可以通过设置 allow-same-day 属性来允许选择同一天。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ping-pu-zhan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ping-pu-zhan-shi"}},[this._v("¶")]),this._v(" 平铺展示")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("将 "),e("code",[t._v("poppable")]),t._v(" 设置为 "),e("code",[t._v("false")]),t._v("，日历会直接展示在页面内，而不是以弹层的形式出现。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("type "),e("code",[t._v("v2.5.4")])]),e("td",[t._v("选择类型:"),e("br"),e("code",[t._v("single")]),t._v("表示选择单个日期，"),e("br"),e("code",[t._v("multiple")]),t._v("表示选择多个日期，"),e("br"),e("code",[t._v("range")]),t._v("表示选择日期区间")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("single")])])]),e("tr",[e("td",[t._v("title")]),e("td",[t._v("日历标题")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("日期选择")])])]),e("tr",[e("td",[t._v("color")]),e("td",[t._v("主题色，对底部按钮和选中日期生效")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("#ee0a24")])])]),e("tr",[e("td",[t._v("min-date")]),e("td",[t._v("可选择的最小日期")]),e("td",[e("em",[t._v("Date")])]),e("td",[t._v("当前日期")])]),e("tr",[e("td",[t._v("max-date")]),e("td",[t._v("可选择的最大日期")]),e("td",[e("em",[t._v("Date")])]),e("td",[t._v("当前日期的六个月后")])]),e("tr",[e("td",[t._v("default-date")]),e("td",[t._v("默认选中的日期，"),e("code",[t._v("type")]),t._v(" 为 "),e("code",[t._v("multiple")]),t._v(" 或 "),e("code",[t._v("range")]),t._v(" 时为数组，传入 "),e("code",[t._v("null")]),t._v(" 表示默认不选择")]),e("td",[e("em",[t._v("Date | Date[] | null")])]),e("td",[t._v("今天")])]),e("tr",[e("td",[t._v("row-height")]),e("td",[t._v("日期行高")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("64")])])]),e("tr",[e("td",[t._v("formatter")]),e("td",[t._v("日期格式化函数")]),e("td",[e("em",[t._v("(day: Day) => Day")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("poppable")]),e("td",[t._v("是否以弹层的形式展示日历")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("lazy-render "),e("code",[t._v("v2.8.1")])]),e("td",[t._v("是否只渲染可视区域的内容")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("show-mark")]),e("td",[t._v("是否显示月份背景水印")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("show-title "),e("code",[t._v("v2.5.5")])]),e("td",[t._v("是否展示日历标题")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("show-subtitle "),e("code",[t._v("v2.5.5")])]),e("td",[t._v("是否展示日历副标题（年月）")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("show-confirm")]),e("td",[t._v("是否展示确认按钮")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("readonly "),e("code",[t._v("v2.10.5")])]),e("td",[t._v("是否为只读状态，只读状态下不能选择日期")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("confirm-text")]),e("td",[t._v("确认按钮的文字")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("确定")])])]),e("tr",[e("td",[t._v("confirm-disabled-text")]),e("td",[t._v("确认按钮处于禁用状态时的文字")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("确定")])])]),e("tr",[e("td",[t._v("first-day-of-week "),e("code",[t._v("v2.9.2")])]),e("td",[t._v("设置周起始日")]),e("td",[e("em",[t._v("0-6")])]),e("td",[e("code",[t._v("0")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"poppable-props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#poppable-props"}},[this._v("¶")]),this._v(" Poppable Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("当 Canlendar 的 "),e("code",[t._v("poppable")]),t._v(" 为 "),e("code",[t._v("true")]),t._v(" 时，支持以下 props:")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("v-model")]),e("td",[t._v("是否显示日历弹窗")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("position")]),e("td",[t._v("弹出位置，可选值为 "),e("code",[t._v("top")]),e("code",[t._v("right")]),e("code",[t._v("left")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("bottom")])])]),e("tr",[e("td",[t._v("round")]),e("td",[t._v("是否显示圆角弹窗")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("close-on-popstate "),e("code",[t._v("v2.4.4")])]),e("td",[t._v("是否在页面回退时自动关闭")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("close-on-click-overlay")]),e("td",[t._v("是否在点击遮罩层后关闭")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("safe-area-inset-bottom")]),e("td",[t._v("是否开启"),e("a",{attrs:{href:"#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei"}},[t._v("底部安全区适配")])]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("get-container "),e("code",[t._v("v2.4.4")])]),e("td",[t._v("指定挂载的节点，"),e("a",{attrs:{href:"#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi"}},[t._v("用法示例")])]),e("td",[e("em",[t._v("string | () => Element")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"range-props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#range-props"}},[this._v("¶")]),this._v(" Range Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("当 Canlendar 的 "),e("code",[t._v("type")]),t._v(" 为 "),e("code",[t._v("range")]),t._v(" 时，支持以下 props:")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("max-range "),e("code",[t._v("v2.4.3")])]),e("td",[t._v("日期区间最多可选天数")]),e("td",[e("em",[t._v("number | string")])]),e("td",[t._v("无限制")])]),e("tr",[e("td",[t._v("range-prompt "),e("code",[t._v("v2.4.3")])]),e("td",[t._v("范围选择超过最多可选天数时的提示文案")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("选择天数不能超过 xx 天")])])]),e("tr",[e("td",[t._v("allow-same-day "),e("code",[t._v("v2.5.6")])]),e("td",[t._v("是否允许日期范围的起止时间为同一天")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"multiple-props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#multiple-props"}},[this._v("¶")]),this._v(" Multiple Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("当 Canlendar 的 "),e("code",[t._v("type")]),t._v(" 为 "),e("code",[t._v("multiple")]),t._v(" 时，支持以下 props:")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("max-range "),e("code",[t._v("v2.7.2")])]),e("td",[t._v("日期最多可选天数")]),e("td",[e("em",[t._v("number | string")])]),e("td",[t._v("无限制")])]),e("tr",[e("td",[t._v("range-prompt "),e("code",[t._v("v2.4.3")])]),e("td",[t._v("选择超过最多可选天数时的提示文案")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("选择天数不能超过 xx 天")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"day-shu-ju-jie-gou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#day-shu-ju-jie-gou"}},[this._v("¶")]),this._v(" Day 数据结构")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("日历中的每个日期都对应一个 Day 对象，通过"),e("code",[t._v("formatter")]),t._v("属性可以自定义 Day 对象的内容")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("键名")]),e("th",[t._v("说明")]),e("th",[t._v("类型")])])]),e("tbody",[e("tr",[e("td",[t._v("date")]),e("td",[t._v("日期对应的 Date 对象")]),e("td",[e("em",[t._v("Date")])])]),e("tr",[e("td",[t._v("type")]),e("td",[t._v("日期类型，可选值为"),e("code",[t._v("selected")]),t._v("、"),e("code",[t._v("start")]),t._v("、"),e("code",[t._v("middle")]),t._v("、"),e("code",[t._v("end")]),t._v("、"),e("code",[t._v("disabled")])]),e("td",[e("em",[t._v("string")])])]),e("tr",[e("td",[t._v("text")]),e("td",[t._v("中间显示的文字")]),e("td",[e("em",[t._v("string")])])]),e("tr",[e("td",[t._v("topInfo")]),e("td",[t._v("上方的提示信息")]),e("td",[e("em",[t._v("string")])])]),e("tr",[e("td",[t._v("bottomInfo")]),e("td",[t._v("下方的提示信息")]),e("td",[e("em",[t._v("string")])])]),e("tr",[e("td",[t._v("className")]),e("td",[t._v("额外类名")]),e("td",[e("em",[t._v("string")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("select")]),e("td",[t._v("点击并选中任意日期时触发")]),e("td",[e("em",[t._v("value: Date | Date[]")])])]),e("tr",[e("td",[t._v("confirm")]),e("td",[t._v("日期选择完成后触发，若"),e("code",[t._v("show-confirm")]),t._v("为"),e("code",[t._v("true")]),t._v("，则点击确认按钮后触发")]),e("td",[e("em",[t._v("value: Date | Date[]")])])]),e("tr",[e("td",[t._v("open "),e("code",[t._v("v2.5.2")])]),e("td",[t._v("打开弹出层时触发")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("close "),e("code",[t._v("v2.5.2")])]),e("td",[t._v("关闭弹出层时触发")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("opened "),e("code",[t._v("v2.5.2")])]),e("td",[t._v("打开弹出层且动画结束后触发")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("closed "),e("code",[t._v("v2.5.2")])]),e("td",[t._v("关闭弹出层且动画结束后触发")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("unselect "),e("code",[t._v("v2.7.2")])]),e("td",[t._v("当日历组件的 "),e("code",[t._v("type")]),t._v(" 为 "),e("code",[t._v("multiple")]),t._v(" 时，取消选中日期时触发")]),e("td",[e("em",[t._v("value: Date")])])]),e("tr",[e("td",[t._v("month-show "),e("code",[t._v("v2.8.2")])]),e("td",[t._v("当某个月份进入可视区域时触发")]),e("td",[e("em",[t._v("{ date: Date, title: string }")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("title")]),e("td",[t._v("自定义标题")])]),e("tr",[e("td",[t._v("footer")]),e("td",[t._v("自定义底部区域内容")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa"}},[this._v("¶")]),this._v(" 方法")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 ref 可以获取到 Calendar 实例并调用实例方法，详见"),e("a",{attrs:{href:"#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa"}},[t._v("组件实例方法")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")]),e("th",[t._v("返回值")])])]),e("tbody",[e("tr",[e("td",[t._v("reset")]),e("td",[t._v("重置选中的日期到默认值")]),e("td",[t._v("-")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("scrollToDate "),e("code",[t._v("v2.12.2")])]),e("td",[t._v("滚动到某个日期")]),e("td",[e("em",[t._v("date: Date")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),e("a",{attrs:{href:"#/zh-CN/theme"}},[t._v("主题定制")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@calendar-background-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-popup-height")]),e("td",[e("code",[t._v("80%")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-header-box-shadow")]),e("td",[e("code",[t._v("0 2px 10px rgba(125, 126, 128, 0.16)")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-header-title-height")]),e("td",[e("code",[t._v("44px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-header-title-font-size")]),e("td",[e("code",[t._v("@font-size-lg")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-header-subtitle-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-weekdays-height")]),e("td",[e("code",[t._v("30px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-weekdays-font-size")]),e("td",[e("code",[t._v("@font-size-sm")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-month-title-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-month-mark-color")]),e("td",[e("code",[t._v("fade(@gray-2, 80%)")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-month-mark-font-size")]),e("td",[e("code",[t._v("160px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-day-height")]),e("td",[e("code",[t._v("64px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-day-font-size")]),e("td",[e("code",[t._v("@font-size-lg")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-range-edge-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-range-edge-background-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-range-middle-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-range-middle-background-opacity")]),e("td",[e("code",[t._v("0.1")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-selected-day-size")]),e("td",[e("code",[t._v("54px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-selected-day-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-info-font-size")]),e("td",[e("code",[t._v("@font-size-xs")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-info-line-height")]),e("td",[e("code",[t._v("@line-height-xs")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-selected-day-background-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-day-disabled-color")]),e("td",[e("code",[t._v("@gray-5")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-confirm-button-height")]),e("td",[e("code",[t._v("36px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@calendar-confirm-button-margin")]),e("td",[e("code",[t._v("7px 0")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"chang-jian-wen-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-wen-ti"}},[this._v("¶")]),this._v(" 常见问题")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zai-ios-xi-tong-shang-chu-shi-hua-zu-jian-shi-bai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zai-ios-xi-tong-shang-chu-shi-hua-zu-jian-shi-bai"}},[this._v("¶")]),this._v(" 在 iOS 系统上初始化组件失败？")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("如果你遇到了在 iOS 上无法渲染组件的问题，请确认在创建 Date 对象时没有使用"),e("code",[t._v("new Date('2020-01-01')")]),t._v("这样的写法，iOS 不支持以中划线分隔的日期格式，正确写法是"),e("code",[t._v("new Date('2020/01/01')")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("对此问题的详细解释："),e("a",{attrs:{href:"https://stackoverflow.com/questions/13363673/javascript-date-is-invalid-on-ios"}},[t._v("stackoverflow")]),t._v("。")])}],!1,null,null,null);e.default=a.exports},1083:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("div",[e("tis-link",{attrs:{href:"https://element.eleme.io",target:"_blank"}},[t._v("默认链接")]),t._v(" "),e("tis-link",{attrs:{type:"primary"}},[t._v("主要链接")]),t._v(" "),e("tis-link",{attrs:{type:"danger"}},[t._v("危险链接")]),t._v(" "),e("tis-link",{attrs:{type:"info"}},[t._v("信息链接")])],1)])},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("div",[e("tis-link",{attrs:{disabled:""}},[t._v("默认链接")]),t._v(" "),e("tis-link",{attrs:{type:"primary",disabled:""}},[t._v("主要链接")]),t._v(" "),e("tis-link",{attrs:{type:"danger",disabled:""}},[t._v("危险链接")]),t._v(" "),e("tis-link",{attrs:{type:"info",disabled:""}},[t._v("信息链接")])],1)])},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("文字超链接")]),t._m(1),e("p",[t._v("基础的文字链接用法。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<div>\n  <tis-link href="https://element.eleme.io" target="_blank">默认链接</tis-link>\n  <tis-link type="primary">主要链接</tis-link>\n  <tis-link type="danger">危险链接</tis-link>\n  <tis-link type="info">信息链接</tis-link>\n</div>\n')])])])],2),t._m(2),e("p",[t._v("文字链接不可用状态。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<div>\n  <tis-link disabled>默认链接</tis-link>\n  <tis-link type="primary" disabled>主要链接</tis-link>\n  <tis-link type="danger" disabled>危险链接</tis-link>\n  <tis-link type="info" disabled>信息链接</tis-link>\n</div>\n')])])])],2),t._m(3),t._m(4)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"link-wen-zi-lian-jie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#link-wen-zi-lian-jie"}},[this._v("¶")]),this._v(" Link 文字链接")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("type")]),e("td",[t._v("类型")]),e("td",[t._v("string")]),e("td",[t._v("primary / success / warning / danger / info")]),e("td",[t._v("default")])]),e("tr",[e("td",[t._v("underline")]),e("td",[t._v("是否下划线")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用状态")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("href")]),e("td",[t._v("原生 href 属性")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("icon")]),e("td",[t._v("图标类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("-")])])])])}],!1,null,null,null);e.default=a.exports},1084:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-row",[e("tis-col",{attrs:{span:24}},[e("div",{staticClass:"grid-content bg-purple-dark"},[t._v("24(100%)")])])],1),t._v(" "),e("tis-row",[e("tis-col",{attrs:{span:12}},[e("div",{staticClass:"grid-content bg-purple"},[t._v("12(50%)")])]),t._v(" "),e("tis-col",{attrs:{span:12}},[e("div",{staticClass:"grid-content bg-purple-light"},[t._v("12(50%)")])])],1),t._v(" "),e("tis-row",[e("tis-col",{attrs:{span:8}},[e("div",{staticClass:"grid-content bg-purple"},[t._v("8(33.33%)")])]),t._v(" "),e("tis-col",{attrs:{span:8}},[e("div",{staticClass:"grid-content bg-purple-light"},[t._v("8(33.33%)")])]),t._v(" "),e("tis-col",{attrs:{span:8}},[e("div",{staticClass:"grid-content bg-purple"},[t._v("8(33.33%)")])])],1),t._v(" "),e("tis-row",[e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple"},[t._v("6(25%)")])]),t._v(" "),e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple-light"},[t._v("6(25%)")])]),t._v(" "),e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple"},[t._v("6(25%)")])]),t._v(" "),e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple-light"},[t._v("6(25%)")])])],1),t._v(" "),e("tis-row",[e("tis-col",{attrs:{span:4}},[e("div",{staticClass:"grid-content bg-purple"},[t._v("4(16.66%)")])]),t._v(" "),e("tis-col",{attrs:{span:4}},[e("div",{staticClass:"grid-content bg-purple-light"},[t._v("4(16.66%)")])]),t._v(" "),e("tis-col",{attrs:{span:4}},[e("div",{staticClass:"grid-content bg-purple"},[t._v("4(16.66%)")])]),t._v(" "),e("tis-col",{attrs:{span:4}},[e("div",{staticClass:"grid-content bg-purple-light"},[t._v("4(16.66%)")])]),t._v(" "),e("tis-col",{attrs:{span:4}},[e("div",{staticClass:"grid-content bg-purple"},[t._v("4(16.66%)")])]),t._v(" "),e("tis-col",{attrs:{span:4}},[e("div",{staticClass:"grid-content bg-purple-light"},[t._v("4(16.66%)")])])],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-row",{attrs:{gutter:20}},[e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple"})]),t._v(" "),e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple"})]),t._v(" "),e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple"})]),t._v(" "),e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-row",{attrs:{gutter:20}},[e("tis-col",{attrs:{span:16}},[e("div",{staticClass:"grid-content bg-purple"})]),t._v(" "),e("tis-col",{attrs:{span:8}},[e("div",{staticClass:"grid-content bg-purple"})])],1),t._v(" "),e("tis-row",{attrs:{gutter:20}},[e("tis-col",{attrs:{span:8}},[e("div",{staticClass:"grid-content bg-purple"})]),t._v(" "),e("tis-col",{attrs:{span:8}},[e("div",{staticClass:"grid-content bg-purple"})]),t._v(" "),e("tis-col",{attrs:{span:4}},[e("div",{staticClass:"grid-content bg-purple"})]),t._v(" "),e("tis-col",{attrs:{span:4}},[e("div",{staticClass:"grid-content bg-purple"})])],1),t._v(" "),e("tis-row",{attrs:{gutter:20}},[e("tis-col",{attrs:{span:4}},[e("div",{staticClass:"grid-content bg-purple"})]),t._v(" "),e("tis-col",{attrs:{span:16}},[e("div",{staticClass:"grid-content bg-purple"})]),t._v(" "),e("tis-col",{attrs:{span:4}},[e("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-row",{staticClass:"row-bg",attrs:{type:"flex"}},[e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple"})]),t._v(" "),e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple-light"})]),t._v(" "),e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple"})])],1),t._v(" "),e("tis-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple"})]),t._v(" "),e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple-light"})]),t._v(" "),e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple"})])],1),t._v(" "),e("tis-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple"})]),t._v(" "),e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple-light"})]),t._v(" "),e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple"})])],1),t._v(" "),e("tis-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple"})]),t._v(" "),e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple-light"})]),t._v(" "),e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple"})])],1),t._v(" "),e("tis-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple"})]),t._v(" "),e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple-light"})]),t._v(" "),e("tis-col",{attrs:{span:6}},[e("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-row",{attrs:{gutter:10}},[e("tis-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[e("div",{staticClass:"grid-content bg-purple"})]),t._v(" "),e("tis-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[e("div",{staticClass:"grid-content bg-purple-light"})]),t._v(" "),e("tis-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[e("div",{staticClass:"grid-content bg-purple"})]),t._v(" "),e("tis-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[e("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("通过基础的 24 分栏，迅速简便地创建布局。")]),e("p",[t._v("整体的设计理念是，即将一行（row）划分成24份，业务可以根据自己的需要自定一行的布局，整体布局会是自适应的")]),t._m(1),t._m(2),e("p",[t._v("使用单一分栏创建基础的栅格布局。")]),e("demo-block",[e("div",[e("p",[t._v("通过 row 和 col 组件，并通过 col 组件的 "),e("code",[t._v("span")]),t._v(" 属性我们就可以自由地组合布局。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-row>\n  <tis-col :span="24"><div class="grid-content bg-purple-dark">24(100%)</div></tis-col>\n</tis-row>\n<tis-row>\n  <tis-col :span="12"><div class="grid-content bg-purple">12(50%)</div></tis-col>\n  <tis-col :span="12"><div class="grid-content bg-purple-light">12(50%)</div></tis-col>\n</tis-row>\n<tis-row>\n  <tis-col :span="8"><div class="grid-content bg-purple">8(33.33%)</div></tis-col>\n  <tis-col :span="8"><div class="grid-content bg-purple-light">8(33.33%)</div></tis-col>\n  <tis-col :span="8"><div class="grid-content bg-purple">8(33.33%)</div></tis-col>\n</tis-row>\n<tis-row>\n  <tis-col :span="6"><div class="grid-content bg-purple">6(25%)</div></tis-col>\n  <tis-col :span="6"><div class="grid-content bg-purple-light">6(25%)</div></tis-col>\n  <tis-col :span="6"><div class="grid-content bg-purple">6(25%)</div></tis-col>\n  <tis-col :span="6"><div class="grid-content bg-purple-light">6(25%)</div></tis-col>\n</tis-row>\n<tis-row>\n  <tis-col :span="4"><div class="grid-content bg-purple">4(16.66%)</div></tis-col>\n  <tis-col :span="4"><div class="grid-content bg-purple-light">4(16.66%)</div></tis-col>\n  <tis-col :span="4"><div class="grid-content bg-purple">4(16.66%)</div></tis-col>\n  <tis-col :span="4"><div class="grid-content bg-purple-light">4(16.66%)</div></tis-col>\n  <tis-col :span="4"><div class="grid-content bg-purple">4(16.66%)</div></tis-col>\n  <tis-col :span="4"><div class="grid-content bg-purple-light">4(16.66%)</div></tis-col>\n</tis-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    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),t._m(3),e("p",[t._v("分栏之间存在间隔。")]),e("demo-block",[e("div",[e("p",[t._v("Row 组件 提供 "),e("code",[t._v("gutter")]),t._v(" 属性来指定每一栏之间的间隔，默认间隔为 0。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-row :gutter="20">\n  <tis-col :span="6"><div class="grid-content bg-purple"></div></tis-col>\n  <tis-col :span="6"><div class="grid-content bg-purple"></div></tis-col>\n  <tis-col :span="6"><div class="grid-content bg-purple"></div></tis-col>\n  <tis-col :span="6"><div class="grid-content bg-purple"></div></tis-col>\n</tis-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),t._m(4),e("p",[t._v("通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-row :gutter="20">\n  <tis-col :span="16"><div class="grid-content bg-purple"></div></tis-col>\n  <tis-col :span="8"><div class="grid-content bg-purple"></div></tis-col>\n</tis-row>\n<tis-row :gutter="20">\n  <tis-col :span="8"><div class="grid-content bg-purple"></div></tis-col>\n  <tis-col :span="8"><div class="grid-content bg-purple"></div></tis-col>\n  <tis-col :span="4"><div class="grid-content bg-purple"></div></tis-col>\n  <tis-col :span="4"><div class="grid-content bg-purple"></div></tis-col>\n</tis-row>\n<tis-row :gutter="20">\n  <tis-col :span="4"><div class="grid-content bg-purple"></div></tis-col>\n  <tis-col :span="16"><div class="grid-content bg-purple"></div></tis-col>\n  <tis-col :span="4"><div class="grid-content bg-purple"></div></tis-col>\n</tis-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),t._m(5),t._m(6),e("demo-block",[e("div",[e("p",[t._v("将 "),e("code",[t._v("type")]),t._v(" 属性赋值为 'flex'，可以启用 flex 布局，并可通过 "),e("code",[t._v("justify")]),t._v(" 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-row type="flex" class="row-bg">\n  <tis-col :span="6"><div class="grid-content bg-purple"></div></tis-col>\n  <tis-col :span="6"><div class="grid-content bg-purple-light"></div></tis-col>\n  <tis-col :span="6"><div class="grid-content bg-purple"></div></tis-col>\n</tis-row>\n<tis-row type="flex" class="row-bg" justify="center">\n  <tis-col :span="6"><div class="grid-content bg-purple"></div></tis-col>\n  <tis-col :span="6"><div class="grid-content bg-purple-light"></div></tis-col>\n  <tis-col :span="6"><div class="grid-content bg-purple"></div></tis-col>\n</tis-row>\n<tis-row type="flex" class="row-bg" justify="end">\n  <tis-col :span="6"><div class="grid-content bg-purple"></div></tis-col>\n  <tis-col :span="6"><div class="grid-content bg-purple-light"></div></tis-col>\n  <tis-col :span="6"><div class="grid-content bg-purple"></div></tis-col>\n</tis-row>\n<tis-row type="flex" class="row-bg" justify="space-between">\n  <tis-col :span="6"><div class="grid-content bg-purple"></div></tis-col>\n  <tis-col :span="6"><div class="grid-content bg-purple-light"></div></tis-col>\n  <tis-col :span="6"><div class="grid-content bg-purple"></div></tis-col>\n</tis-row>\n<tis-row type="flex" class="row-bg" justify="space-around">\n  <tis-col :span="6"><div class="grid-content bg-purple"></div></tis-col>\n  <tis-col :span="6"><div class="grid-content bg-purple-light"></div></tis-col>\n  <tis-col :span="6"><div class="grid-content bg-purple"></div></tis-col>\n</tis-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),t._m(7),t._m(8),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-row :gutter="10">\n  <tis-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></tis-col>\n  <tis-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></tis-col>\n  <tis-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></tis-col>\n  <tis-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></tis-col>\n</tis-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),t._m(9),e("p",[t._v("Tis 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：")]),t._m(10),e("p",[t._v("包含的类名及其含义为：")]),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"layout-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout-bu-ju"}},[this._v("¶")]),this._v(" Layout 布局")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过"),e("code",[t._v("<tis-row>")]),t._v("组件定一行，通过"),e("code",[t._v("<tis-col>")]),t._v("组件来定义每一列，col组件又需要通过"),e("code",[t._v("span")]),t._v("属性来进行24列空间的划分，最终达到宽度自适应的效果，详细示例可以见下面的代码演示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-bu-ju"}},[this._v("¶")]),this._v(" 基础布局")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fen-lan-jian-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-jian-ge"}},[this._v("¶")]),this._v(" 分栏间隔")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"hun-he-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hun-he-bu-ju"}},[this._v("¶")]),this._v(" 混合布局")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dui-qi-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi"}},[this._v("¶")]),this._v(" 对齐方式")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("flex")]),t._v(" 布局来对分栏进行灵活的对齐。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xiang-ying-shi-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiang-ying-shi-bu-ju"}},[this._v("¶")]),this._v(" 响应式布局")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸："),e("code",[t._v("xs")]),t._v("、"),e("code",[t._v("sm")]),t._v("、"),e("code",[t._v("md")]),t._v("、"),e("code",[t._v("lg")]),t._v(" 和 "),e("code",[t._v("xl")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 基于断点的隐藏类")])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import 'tis-ui/lib/theme-chalk/display.css';\n")])])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("ul",[e("li",[e("code",[t._v("hidden-xs-only")]),t._v(" - 当视口在 "),e("code",[t._v("xs")]),t._v(" 尺寸时隐藏")]),e("li",[e("code",[t._v("hidden-sm-only")]),t._v(" - 当视口在 "),e("code",[t._v("sm")]),t._v(" 尺寸时隐藏")]),e("li",[e("code",[t._v("hidden-sm-and-down")]),t._v(" - 当视口在 "),e("code",[t._v("sm")]),t._v(" 及以下尺寸时隐藏")]),e("li",[e("code",[t._v("hidden-sm-and-up")]),t._v(" - 当视口在 "),e("code",[t._v("sm")]),t._v(" 及以上尺寸时隐藏")]),e("li",[e("code",[t._v("hidden-md-only")]),t._v(" - 当视口在 "),e("code",[t._v("md")]),t._v(" 尺寸时隐藏")]),e("li",[e("code",[t._v("hidden-md-and-down")]),t._v(" - 当视口在 "),e("code",[t._v("md")]),t._v(" 及以下尺寸时隐藏")]),e("li",[e("code",[t._v("hidden-md-and-up")]),t._v(" - 当视口在 "),e("code",[t._v("md")]),t._v(" 及以上尺寸时隐藏")]),e("li",[e("code",[t._v("hidden-lg-only")]),t._v(" - 当视口在 "),e("code",[t._v("lg")]),t._v(" 尺寸时隐藏")]),e("li",[e("code",[t._v("hidden-lg-and-down")]),t._v(" - 当视口在 "),e("code",[t._v("lg")]),t._v(" 及以下尺寸时隐藏")]),e("li",[e("code",[t._v("hidden-lg-and-up")]),t._v(" - 当视口在 "),e("code",[t._v("lg")]),t._v(" 及以上尺寸时隐藏")]),e("li",[e("code",[t._v("hidden-xl-only")]),t._v(" - 当视口在 "),e("code",[t._v("xl")]),t._v(" 尺寸时隐藏")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"row-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes"}},[this._v("¶")]),this._v(" Row Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("gutter")]),e("td",[t._v("栅格间隔")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("type")]),e("td",[t._v("布局模式，可选 flex，现代浏览器下有效")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("justify")]),e("td",[t._v("flex 布局下的水平排列方式")]),e("td",[t._v("string")]),e("td",[t._v("start/end/center/space-around/space-between")]),e("td",[t._v("start")])]),e("tr",[e("td",[t._v("align")]),e("td",[t._v("flex 布局下的垂直排列方式")]),e("td",[t._v("string")]),e("td",[t._v("top/middle/bottom")]),e("td",[t._v("top")])]),e("tr",[e("td",[t._v("tag")]),e("td",[t._v("自定义元素标签")]),e("td",[t._v("string")]),e("td",[t._v("*")]),e("td",[t._v("div")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"col-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes"}},[this._v("¶")]),this._v(" Col Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("span")]),e("td",[t._v("栅格占据的列数")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("24")])]),e("tr",[e("td",[t._v("offset")]),e("td",[t._v("栅格左侧的间隔格数")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("push")]),e("td",[t._v("栅格向右移动格数")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("pull")]),e("td",[t._v("栅格向左移动格数")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("xs")]),e("td",[e("code",[t._v("<768px")]),t._v(" 响应式栅格数或者栅格属性对象")]),e("td",[t._v("number/object (例如： {span: 4, offset: 4})")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("sm")]),e("td",[e("code",[t._v("≥768px")]),t._v(" 响应式栅格数或者栅格属性对象")]),e("td",[t._v("number/object (例如： {span: 4, offset: 4})")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("md")]),e("td",[e("code",[t._v("≥992px")]),t._v(" 响应式栅格数或者栅格属性对象")]),e("td",[t._v("number/object (例如： {span: 4, offset: 4})")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("lg")]),e("td",[e("code",[t._v("≥1200px")]),t._v(" 响应式栅格数或者栅格属性对象")]),e("td",[t._v("number/object (例如： {span: 4, offset: 4})")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("xl")]),e("td",[e("code",[t._v("≥1920px")]),t._v(" 响应式栅格数或者栅格属性对象")]),e("td",[t._v("number/object (例如： {span: 4, offset: 4})")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("tag")]),e("td",[t._v("自定义元素标签")]),e("td",[t._v("string")]),e("td",[t._v("*")]),e("td",[t._v("div")])])])])}],!1,null,null,null);e.default=a.exports},1085:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{"is-link":"",readonly:"",label:"地区",placeholder:"请选择所在地区"},on:{click:function(t){e.show=!0}},model:{value:e.fieldValue,callback:function(t){e.fieldValue=t},expression:"fieldValue"}}),e._v(" "),t("m-popup",{attrs:{round:"",position:"bottom"},model:{value:e.show,callback:function(t){e.show=t},expression:"show"}},[t("m-cascader",{attrs:{title:"请选择所在地区",options:e.options},on:{close:function(t){e.show=!1},finish:e.onFinish},model:{value:e.cascaderValue,callback:function(t){e.cascaderValue=t},expression:"cascaderValue"}})],1)],1)},staticRenderFns:[]},{data:function(){return{show:!1,fieldValue:"",cascaderValue:"",options:[{text:"浙江省",value:"330000",children:[{text:"杭州市",value:"330100"}]},{text:"江苏省",value:"320000",children:[{text:"南京市",value:"320100"}]}]}},methods:{onFinish:function(t){t=t.selectedOptions;this.show=!1,this.fieldValue=t.map(function(t){return t.text}).join("/")}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{"is-link":"",readonly:"",label:"地区",placeholder:"请选择所在地区"},on:{click:function(t){e.show=!0}},model:{value:e.fieldValue,callback:function(t){e.fieldValue=t},expression:"fieldValue"}}),e._v(" "),t("m-popup",{attrs:{round:"",position:"bottom"},model:{value:e.show,callback:function(t){e.show=t},expression:"show"}},[t("m-cascader",{attrs:{title:"请选择所在地区",options:e.options},on:{close:function(t){e.show=!1},change:e.onChange,finish:e.onFinish},model:{value:e.cascaderValue,callback:function(t){e.cascaderValue=t},expression:"cascaderValue"}})],1)],1)},staticRenderFns:[]},{data:function(){return{show:!1,fieldValue:"",cascaderValue:"",options:[{text:"浙江省",value:"330000",children:[]}]}},methods:{onChange:function(t){var e=this;t.value===this.options[0].value&&setTimeout(function(){e.options[0].children=[{text:"杭州市",value:"330100"},{text:"宁波市",value:"330200"}]},500)},onFinish:function(t){t=t.selectedOptions;this.show=!1,this.fieldValue=t.map(function(t){return t.text}).join("/")}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("p",[t._v("级联选择框，用于多层级数据的选择，典型场景为省市区选择，2.12 版本开始支持此组件。")]),t._m(2),t._m(3),e("p",[t._v("级联选择组件可以搭配 Field 和 Popup 组件使用，示例如下：")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<m-field\n  v-model=\"fieldValue\"\n  is-link\n  readonly\n  label=\"地区\"\n  placeholder=\"请选择所在地区\"\n  @click=\"show = true\"\n/>\n<m-popup v-model=\"show\" round position=\"bottom\">\n  <m-cascader\n    v-model=\"cascaderValue\"\n    title=\"请选择所在地区\"\n    :options=\"options\"\n    @close=\"show = false\"\n    @finish=\"onFinish\"\n  />\n</m-popup>\n\n<script>\nexport default {\n  data() {\n    return {\n      show: false,\n      fieldValue: '',\n      cascaderValue: '',\n      // 选项列表，children 代表子选项，支持多级嵌套\n      options: [\n        {\n          text: '浙江省',\n          value: '330000',\n          children: [{ text: '杭州市', value: '330100' }],\n        },\n        {\n          text: '江苏省',\n          value: '320000',\n          children: [{ text: '南京市', value: '320100' }],\n        },\n      ],\n    };\n  },\n  methods: {\n    // 全部选项选择完毕后，会触发 finish 事件\n    onFinish({ selectedOptions }) {\n      this.show = false;\n      this.fieldValue = selectedOptions.map((option) => option.text).join('/');\n    },\n  },\n};\n<\/script>\n")])])])],2),t._m(4),t._m(5),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field\n  v-model="fieldValue"\n  is-link\n  readonly\n  label="地区"\n  placeholder="请选择所在地区"\n  @click="show = true"\n/>\n<m-popup v-model="show" round position="bottom">\n  <m-cascader\n    v-model="cascaderValue"\n    title="请选择所在地区"\n    :options="options"\n    @close="show = false"\n    @change="onChange"\n    @finish="onFinish"\n  />\n</m-popup>\n\n<script>\nexport default {\n  data() {\n    return {\n      show: false,\n      fieldValue: \'\',\n      cascaderValue: \'\',\n      options: [\n        {\n          text: \'浙江省\',\n          value: \'330000\',\n          children: [],\n        },\n      ],\n    };\n  },\n  methods: {\n    onChange({ value }) {\n      if (value === this.options[0].value) {\n        setTimeout(() => {\n          this.options[0].children = [\n            { text: \'杭州市\', value: \'330100\' },\n            { text: \'宁波市\', value: \'330200\' },\n          ];\n        }, 500);\n      }\n    },\n    onFinish({ selectedOptions }) {\n      this.show = false;\n      this.fieldValue = selectedOptions.map((option) => option.text).join(\'/\');\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"cascader-ji-lian-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-ji-lian-xuan-ze"}},[this._v("¶")]),this._v(" Cascader 级联选择")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dai-ma-yan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ma-yan-shi"}},[this._v("¶")]),this._v(" 代码演示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yi-bu-jia-zai-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yi-bu-jia-zai-xuan-xiang"}},[this._v("¶")]),this._v(" 异步加载选项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("可以监听 "),e("code",[t._v("change")]),t._v(" 事件并动态设置 "),e("code",[t._v("options")]),t._v("，实现异步加载选项。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("title")]),e("td",[t._v("顶部标题")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("value")]),e("td",[t._v("选中项的值")]),e("td",[e("em",[t._v("string | number")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("options")]),e("td",[t._v("可选项数据源")]),e("td",[e("em",[t._v("Option[]")])]),e("td",[e("code",[t._v("[]")])])]),e("tr",[e("td",[t._v("placeholder")]),e("td",[t._v("未选中时的提示文案")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("请选择")])])]),e("tr",[e("td",[t._v("active-color")]),e("td",[t._v("选中状态的高亮颜色")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("#ee0a24")])])]),e("tr",[e("td",[t._v("closeable")]),e("td",[t._v("是否显示关闭图标")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("change")]),e("td",[t._v("选中项变化时触发")]),e("td",[e("code",[t._v("{ value, selectedOptions, tabIndex }")])])]),e("tr",[e("td",[t._v("finish")]),e("td",[t._v("全部选项选择完成后触发")]),e("td",[e("code",[t._v("{ value, selectedOptions, tabIndex }")])])]),e("tr",[e("td",[t._v("close")]),e("td",[t._v("点击关闭图标时触发")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("title")]),e("td",[t._v("自定义顶部标题")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),e("a",{attrs:{href:"#/zh-CN/theme"}},[t._v("主题定制")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@cascader-header-height")]),e("td",[e("code",[t._v("48px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cascader-title-font-size")]),e("td",[e("code",[t._v("@font-size-lg")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cascader-title-line-height")]),e("td",[e("code",[t._v("20px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cascader-close-icon-size")]),e("td",[e("code",[t._v("22px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cascader-close-icon-color")]),e("td",[e("code",[t._v("@gray-5")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cascader-close-icon-active-color")]),e("td",[e("code",[t._v("@gray-6")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cascader-selected-icon-size")]),e("td",[e("code",[t._v("18px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cascader-tabs-height")]),e("td",[e("code",[t._v("48px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cascader-active-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cascader-options-height")]),e("td",[e("code",[t._v("384px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cascader-tab-color")]),e("td",[e("code",[t._v("@text-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cascader-unselected-tab-color")]),e("td",[e("code",[t._v("@gray-6")])]),e("td",[t._v("-")])])])])}],!1,null,null,null);e.default=a.exports},1086:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-input",{attrs:{placeholder:"请输入内容"},model:{value:e.input,callback:function(t){e.input=t},expression:"input"}})],1)},staticRenderFns:[]},{data:function(){return{input:""}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-input",{attrs:{placeholder:"请输入内容",disabled:!0},model:{value:e.input,callback:function(t){e.input=t},expression:"input"}})],1)},staticRenderFns:[]},{data:function(){return{input:""}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-input",{attrs:{placeholder:"请输入内容",clearable:""},model:{value:e.input,callback:function(t){e.input=t},expression:"input"}})],1)},staticRenderFns:[]},{data:function(){return{input:""}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-input",{attrs:{placeholder:"请输入密码","show-password":""},model:{value:e.input,callback:function(t){e.input=t},expression:"input"}})],1)},staticRenderFns:[]},{data:function(){return{input:""}}}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("div",{staticClass:"demo-input-suffix"},[e._v("\n  属性方式：\n  "),t("tis-input",{attrs:{placeholder:"请输入内容","prefix-icon":"el-icon-search"},model:{value:e.input2,callback:function(t){e.input2=t},expression:"input2"}})],1),e._v(" "),t("div",{staticClass:"demo-input-suffix"},[e._v("\n  slot 方式：\n  "),t("tis-input",{attrs:{placeholder:"请输入内容"},model:{value:e.input4,callback:function(t){e.input4=t},expression:"input4"}},[t("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 e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-input",{attrs:{type:"textarea",rows:2,placeholder:"请输入内容"},model:{value:e.textarea,callback:function(t){e.textarea=t},expression:"textarea"}}),e._v(" "),t("div",{staticStyle:{margin:"20px 0"}}),e._v(" "),t("div",{staticClass:"sub-title",staticStyle:{color:"#fff",margin:"20px 0"}},[e._v("可自适应文本高度的文本域")]),e._v(" "),t("tis-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"请输入内容"},model:{value:e.textarea2,callback:function(t){e.textarea2=t},expression:"textarea2"}})],1)},staticRenderFns:[]},{data:function(){return{textarea:"",textarea2:""}}}),"element-demo6":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("div",[t("tis-input",{attrs:{placeholder:"请输入内容"},model:{value:e.input1,callback:function(t){e.input1=t},expression:"input1"}},[t("template",{slot:"prepend"},[e._v("Http://")])],2)],1),e._v(" "),t("div",{staticStyle:{"margin-top":"15px"}},[t("tis-input",{attrs:{placeholder:"请输入内容"},model:{value:e.input2,callback:function(t){e.input2=t},expression:"input2"}},[t("template",{slot:"append"},[e._v(".com")])],2)],1),e._v(" "),t("div",{staticStyle:{"margin-top":"15px"}},[t("tis-input",{staticClass:"input-with-select",attrs:{placeholder:"请输入内容"},model:{value:e.input3,callback:function(t){e.input3=t},expression:"input3"}},[t("tis-select",{attrs:{slot:"prepend",placeholder:"请选择"},slot:"prepend",model:{value:e.select,callback:function(t){e.select=t},expression:"select"}},[t("tis-option",{attrs:{label:"餐厅名",value:"1"}}),e._v(" "),t("tis-option",{attrs:{label:"订单号",value:"2"}}),e._v(" "),t("tis-option",{attrs:{label:"用户电话",value:"3"}})],1),e._v(" "),t("tis-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]},{data:function(){return{input1:"",input2:"",input3:"",select:""}}}),"element-demo7":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-input",{attrs:{type:"text",placeholder:"请输入内容",maxlength:"10","show-word-limit":""},model:{value:e.text,callback:function(t){e.text=t},expression:"text"}}),e._v(" "),t("div",{staticStyle:{margin:"20px 0"}}),e._v(" "),t("tis-input",{attrs:{type:"textarea",placeholder:"请输入内容",maxlength:"30","show-word-limit":""},model:{value:e.textarea,callback:function(t){e.textarea=t},expression:"textarea"}})],1)},staticRenderFns:[]},{data:function(){return{text:"",textarea:""}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("通过鼠标或键盘输入字符")]),t._m(1),t._m(2),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-input v-model="input" placeholder="请输入内容"></tis-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),t._m(3),e("demo-block",[e("div",[e("p",[t._v("通过 "),e("code",[t._v("disabled")]),t._v(" 属性指定是否禁用 input 组件")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-input\n  placeholder="请输入内容"\n  v-model="input"\n  :disabled="true">\n</tis-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),t._m(4),e("demo-block",[e("div",[e("p",[t._v("使用"),e("code",[t._v("clearable")]),t._v("属性即可得到一个可清空的输入框")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-input\n  placeholder="请输入内容"\n  v-model="input"\n  clearable>\n</tis-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),t._m(5),e("demo-block",[e("div",[e("p",[t._v("使用"),e("code",[t._v("show-password")]),t._v("属性即可得到一个可切换显示隐藏的密码框")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-input placeholder="请输入密码" v-model="input" show-password></tis-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),t._m(6),e("p",[t._v("带有图标标记输入类型")]),e("demo-block",[e("div",[e("p",[t._v("可以通过 "),e("code",[t._v("prefix-icon")]),t._v(" 和 "),e("code",[t._v("suffix-icon")]),t._v(" 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。")])]),e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="demo-input-suffix">\n  属性方式：\n  <tis-input\n    placeholder="请输入内容"\n    prefix-icon="el-icon-search"\n    v-model="input2">\n  </tis-input>\n</div>\n<div class="demo-input-suffix">\n  slot 方式：\n  <tis-input\n    placeholder="请输入内容"\n    v-model="input4">\n    <i slot="prefix" class="el-input__icon el-icon-search"></i>\n  </tis-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),t._m(7),t._m(8),e("demo-block",[e("div",[e("p",[t._v("文本域高度可通过 "),e("code",[t._v("rows")]),t._v(" 属性控制")])]),e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-input\n  type="textarea"\n  :rows="2"\n  placeholder="请输入内容"\n  v-model="textarea">\n</tis-input>\n<div style="margin: 20px 0;"></div>\n<div class="sub-title" style="color: #fff;margin: 20px 0;">可自适应文本高度的文本域</div>\n<tis-input\n  type="textarea"\n  :autosize="{ minRows: 2, maxRows: 4}"\n  placeholder="请输入内容"\n  v-model="textarea2">\n</tis-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: \'\',\n      textarea2: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),t._m(9),e("p",[t._v("可前置或后置元素，一般为标签或按钮")]),e("demo-block",[e("div",[e("p",[t._v("可通过 slot 来指定在 input 中前置或者后置内容。")])]),e("template",{slot:"source"},[e("element-demo6")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<div>\n  <tis-input placeholder="请输入内容" v-model="input1">\n    <template slot="prepend">Http://</template>\n  </tis-input>\n</div>\n<div style="margin-top: 15px;">\n  <tis-input placeholder="请输入内容" v-model="input2">\n    <template slot="append">.com</template>\n  </tis-input>\n</div>\n<div style="margin-top: 15px;">\n  <tis-input placeholder="请输入内容" v-model="input3" class="input-with-select">\n    <tis-select v-model="select" slot="prepend" placeholder="请选择">\n      <tis-option label="餐厅名" value="1"></tis-option>\n      <tis-option label="订单号" value="2"></tis-option>\n      <tis-option label="用户电话" value="3"></tis-option>\n    </tis-select>\n    <tis-button slot="append" icon="el-icon-search"></tis-button>\n  </tis-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),t._m(10),e("demo-block",[e("div",[e("p",[e("code",[t._v("maxlength")]),t._v(" 和 "),e("code",[t._v("minlength")]),t._v(" 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 "),e("code",[t._v("text")]),t._v(" 或 "),e("code",[t._v("textarea")]),t._v(" 的输入框，在使用 "),e("code",[t._v("maxlength")]),t._v(" 属性限制最大输入长度的同时，可通过设置 "),e("code",[t._v("show-word-limit")]),t._v(" 属性来展示字数统计。")])]),e("template",{slot:"source"},[e("element-demo7")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-input\n  type="text"\n  placeholder="请输入内容"\n  v-model="text"\n  maxlength="10"\n  show-word-limit\n>\n</tis-input>\n<div style="margin: 20px 0;"></div>\n<tis-input\n  type="textarea"\n  placeholder="请输入内容"\n  v-model="textarea"\n  maxlength="30"\n  show-word-limit\n>\n</tis-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      text: \'\',\n      textarea: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26),t._m(27),t._m(28)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"input-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-shu-ru-kuang"}},[this._v("¶")]),this._v(" Input 输入框")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",{staticClass:"warning"},[e("p",[t._v("Input 为受控组件，它"),e("strong",[t._v("总会显示 Vue 绑定值")]),t._v("。")]),e("p",[t._v("通常情况下，应当处理 "),e("code",[t._v("input")]),t._v(" 事件，并更新组件的绑定值（或使用"),e("code",[t._v("v-model")]),t._v("）。否则，输入框内显示的值将不会改变。")]),e("p",[t._v("不支持 "),e("code",[t._v("v-model")]),t._v(" 修饰符。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ke-qing-kong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong"}},[this._v("¶")]),this._v(" 可清空")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"mi-ma-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mi-ma-kuang"}},[this._v("¶")]),this._v(" 密码框")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dai-sou-suo-icon-de-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-sou-suo-icon-de-shu-ru-kuang"}},[this._v("¶")]),this._v(" 带搜索icon的输入框")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"wen-ben-yu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-ben-yu"}},[this._v("¶")]),this._v(" 文本域")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("用于输入多行文本信息，通过将 "),e("code",[t._v("type")]),t._v(" 属性的值指定为 textarea。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fu-he-xing-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-he-xing-shu-ru-kuang"}},[this._v("¶")]),this._v(" 复合型输入框")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shu-ru-chang-du-xian-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-ru-chang-du-xian-zhi"}},[this._v("¶")]),this._v(" 输入长度限制")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"input-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes"}},[this._v("¶")]),this._v(" Input Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("type")]),e("td",[t._v("类型")]),e("td",[t._v("string")]),e("td",[t._v("text，textarea 和其他 "),e("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types"}},[t._v("原生 input 的 type 值")])]),e("td",[t._v("text")])]),e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值")]),e("td",[t._v("string / number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("maxlength")]),e("td",[t._v("原生属性，最大输入长度")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("minlength")]),e("td",[t._v("原生属性，最小输入长度")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("show-word-limit")]),e("td",[t._v("是否显示输入字数统计，只在 "),e("code",[t._v('type = "text"')]),t._v(" 或 "),e("code",[t._v('type = "textarea"')]),t._v(" 时有效")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("placeholder")]),e("td",[t._v("输入框占位文本")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("clearable")]),e("td",[t._v("是否可清空")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("show-password")]),e("td",[t._v("是否显示切换密码图标")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("输入框尺寸，只在 "),e("code",[t._v('type!="textarea"')]),t._v(" 时有效")]),e("td",[t._v("string")]),e("td",[t._v("medium / small / mini")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("prefix-icon")]),e("td",[t._v("输入框头部图标")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("suffix-icon")]),e("td",[t._v("输入框尾部图标")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("rows")]),e("td",[t._v("输入框行数，只对 "),e("code",[t._v('type="textarea"')]),t._v(" 有效")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("2")])]),e("tr",[e("td",[t._v("autosize")]),e("td",[t._v("自适应内容高度，只对 "),e("code",[t._v('type="textarea"')]),t._v(" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }")]),e("td",[t._v("boolean / object")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("autocomplete")]),e("td",[t._v("原生属性，自动补全")]),e("td",[t._v("string")]),e("td",[t._v("on, off")]),e("td",[t._v("off")])]),e("tr",[e("td",[t._v("auto-complete")]),e("td",[t._v("下个主版本弃用")]),e("td",[t._v("string")]),e("td",[t._v("on, off")]),e("td",[t._v("off")])]),e("tr",[e("td",[t._v("name")]),e("td",[t._v("原生属性")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("readonly")]),e("td",[t._v("原生属性，是否只读")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("max")]),e("td",[t._v("原生属性，设置最大值")]),e("td",[t._v("—")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("min")]),e("td",[t._v("原生属性，设置最小值")]),e("td",[t._v("—")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("step")]),e("td",[t._v("原生属性，设置输入字段的合法数字间隔")]),e("td",[t._v("—")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("resize")]),e("td",[t._v("控制是否能被用户缩放")]),e("td",[t._v("string")]),e("td",[t._v("none, both, horizontal, vertical")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("autofocus")]),e("td",[t._v("原生属性，自动获取焦点")]),e("td",[t._v("boolean")]),e("td",[t._v("true, false")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("form")]),e("td",[t._v("原生属性")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("输入框关联的label文字")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("tabindex")]),e("td",[t._v("输入框的tabindex")]),e("td",[t._v("string")]),e("td",[t._v("-")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("validate-event")]),e("td",[t._v("输入时是否触发表单的校验")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("true")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"input-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-slots"}},[this._v("¶")]),this._v(" Input Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("name")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("prefix")]),e("td",[t._v("输入框头部内容，只对 "),e("code",[t._v('type="text"')]),t._v(" 有效")])]),e("tr",[e("td",[t._v("suffix")]),e("td",[t._v("输入框尾部内容，只对 "),e("code",[t._v('type="text"')]),t._v(" 有效")])]),e("tr",[e("td",[t._v("prepend")]),e("td",[t._v("输入框前置内容，只对 "),e("code",[t._v('type="text"')]),t._v(" 有效")])]),e("tr",[e("td",[t._v("append")]),e("td",[t._v("输入框后置内容，只对 "),e("code",[t._v('type="text"')]),t._v(" 有效")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"input-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-events"}},[this._v("¶")]),this._v(" Input Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("blur")]),e("td",[t._v("在 Input 失去焦点时触发")]),e("td",[t._v("(event: Event)")])]),e("tr",[e("td",[t._v("focus")]),e("td",[t._v("在 Input 获得焦点时触发")]),e("td",[t._v("(event: Event)")])]),e("tr",[e("td",[t._v("change")]),e("td",[t._v("仅在输入框失去焦点或用户按下回车时触发")]),e("td",[t._v("(value: string | number)")])]),e("tr",[e("td",[t._v("input")]),e("td",[t._v("在 Input 值改变时触发")]),e("td",[t._v("(value: string | number)")])]),e("tr",[e("td",[t._v("clear")]),e("td",[t._v("在点击由 "),e("code",[t._v("clearable")]),t._v(" 属性生成的清空按钮时触发")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"input-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-methods"}},[this._v("¶")]),this._v(" Input Methods")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("focus")]),e("td",[t._v("使 input 获取焦点")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("blur")]),e("td",[t._v("使 input 失去焦点")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("select")]),e("td",[t._v("选中 input 中的文字")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"autocomplete-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes"}},[this._v("¶")]),this._v(" Autocomplete Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("placeholder")]),e("td",[t._v("输入框占位文本")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("value-key")]),e("td",[t._v("输入建议对象中用于显示的键名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("value")])]),e("tr",[e("td",[t._v("value")]),e("td",[t._v("必填值，输入绑定值")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("debounce")]),e("td",[t._v("获取输入建议的去抖延时")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("300")])]),e("tr",[e("td",[t._v("placement")]),e("td",[t._v("菜单弹出位置")]),e("td",[t._v("string")]),e("td",[t._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),e("td",[t._v("bottom-start")])]),e("tr",[e("td",[t._v("fetch-suggestions")]),e("td",[t._v("返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它")]),e("td",[t._v("Function(queryString, callback)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("popper-class")]),e("td",[t._v("Autocomplete 下拉列表的类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("trigger-on-focus")]),e("td",[t._v("是否在输入框 focus 时显示建议列表")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("name")]),e("td",[t._v("原生属性")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("select-when-unmatched")]),e("td",[t._v("在输入没有任何匹配建议的情况下，按下回车是否触发 "),e("code",[t._v("select")]),t._v(" 事件")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("输入框关联的label文字")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("prefix-icon")]),e("td",[t._v("输入框头部图标")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("suffix-icon")]),e("td",[t._v("输入框尾部图标")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("hide-loading")]),e("td",[t._v("是否隐藏远程加载时的加载图标")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("popper-append-to-body")]),e("td",[t._v("是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("highlight-first-item")]),e("td",[t._v("是否默认突出显示远程搜索建议中的第一项")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"autocomplete-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-slots"}},[this._v("¶")]),this._v(" Autocomplete Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("name")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("prefix")]),e("td",[t._v("输入框头部内容")])]),e("tr",[e("td",[t._v("suffix")]),e("td",[t._v("输入框尾部内容")])]),e("tr",[e("td",[t._v("prepend")]),e("td",[t._v("输入框前置内容")])]),e("tr",[e("td",[t._v("append")]),e("td",[t._v("输入框后置内容")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"autocomplete-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-scoped-slot"}},[this._v("¶")]),this._v(" Autocomplete Scoped Slot")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("name")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("—")]),e("td",[t._v("自定义输入建议，参数为 { item }")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"autocomplete-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events"}},[this._v("¶")]),this._v(" Autocomplete Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("select")]),e("td",[t._v("点击选中建议项时触发")]),e("td",[t._v("选中建议项")])]),e("tr",[e("td",[t._v("change")]),e("td",[t._v("在 Input 值改变时触发")]),e("td",[t._v("(value: string | number)")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"autocomplete-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-methods"}},[this._v("¶")]),this._v(" Autocomplete Methods")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("focus")]),e("td",[t._v("使 input 获取焦点")]),e("td",[t._v("-")])])])])}],!1,null,null,null);e.default=a.exports},1087:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-cell-group",[t("m-cell",{attrs:{title:"单元格",value:"内容"}}),this._v(" "),t("m-cell",{attrs:{title:"单元格",value:"内容",label:"描述信息"}})],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-cell",{attrs:{title:"单元格",value:"内容",size:"large"}}),this._v(" "),t("m-cell",{attrs:{title:"单元格",value:"内容",size:"large",label:"描述信息"}})],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-cell",{attrs:{title:"单元格",icon:"location-o"}})],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-cell",{attrs:{value:"内容"}})],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-cell",{attrs:{title:"单元格","is-link":""}}),this._v(" "),t("m-cell",{attrs:{title:"单元格","is-link":"",value:"内容"}}),this._v(" "),t("m-cell",{attrs:{title:"单元格","is-link":"","arrow-direction":"down",value:"内容"}})],1)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-cell",{attrs:{title:"URL 跳转","is-link":"",url:"/vant/mobile.html"}}),this._v(" "),t("m-cell",{attrs:{title:"路由跳转","is-link":"",to:"index"}})],1)},staticRenderFns:[]},{}),"element-demo6":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-cell-group",{attrs:{title:"分组1"}},[t("m-cell",{attrs:{title:"单元格",value:"内容"}})],1),this._v(" "),t("m-cell-group",{attrs:{title:"分组2"}},[t("m-cell",{attrs:{title:"单元格",value:"内容"}})],1)],1)},staticRenderFns:[]},{}),"element-demo7":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("m-cell",{attrs:{value:"内容","is-link":""}},[[e("span",{staticClass:"custom-title"},[t._v("单元格")]),t._v(" "),e("m-tag",{attrs:{type:"danger"}},[t._v("标签")])]],2),t._v(" "),e("m-cell",{attrs:{title:"单元格",icon:"shop-o"}},[[e("m-icon",{staticClass:"search-icon",attrs:{name:"search"}})]],2)],1)},staticRenderFns:[]},{}),"element-demo8":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-cell",{attrs:{center:"",title:"单元格",value:"内容",label:"描述信息"}})],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("p",[t._v("单元格为列表中的单个展示项。")]),t._m(2),t._m(3),t._m(4),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell-group>\n  <m-cell title="单元格" value="内容" />\n  <m-cell title="单元格" value="内容" label="描述信息" />\n</m-cell-group>\n')])])])],2),t._m(5),t._m(6),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell title="单元格" value="内容" size="large" />\n<m-cell title="单元格" value="内容" size="large" label="描述信息" />\n')])])])],2),t._m(7),t._m(8),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell title="单元格" icon="location-o" />\n')])])])],2),t._m(9),t._m(10),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell value="内容" />\n')])])])],2),t._m(11),t._m(12),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell title="单元格" is-link />\n<m-cell title="单元格" is-link value="内容" />\n<m-cell title="单元格" is-link arrow-direction="down" value="内容" />\n')])])])],2),t._m(13),t._m(14),e("demo-block",[e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell title="URL 跳转" is-link url="/vant/mobile.html" />\n<m-cell title="路由跳转" is-link to="index" />\n')])])])],2),t._m(15),t._m(16),e("demo-block",[e("template",{slot:"source"},[e("element-demo6")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell-group title="分组1">\n  <m-cell title="单元格" value="内容" />\n</m-cell-group>\n<m-cell-group title="分组2">\n  <m-cell title="单元格" value="内容" />\n</m-cell-group>\n')])])])],2),t._m(17),e("p",[t._v("如以上用法不能满足你的需求，可以使用插槽来自定义内容。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo7")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell value="内容" is-link>\n  \x3c!-- 使用 title 插槽来自定义标题 --\x3e\n  <template #title>\n    <span class="custom-title">单元格</span>\n    <m-tag type="danger">标签</m-tag>\n  </template>\n</m-cell>\n\n<m-cell title="单元格" icon="shop-o">\n  \x3c!-- 使用 right-icon 插槽来自定义右侧图标 --\x3e\n  <template #right-icon>\n    <m-icon name="search" class="search-icon" />\n  </template>\n</m-cell>\n\n<style>\n  .custom-title {\n    margin-right: 4px;\n    vertical-align: middle;\n  }\n\n  .search-icon {\n    font-size: 16px;\n    line-height: inherit;\n  }\n</style>\n')])])])],2),t._m(18),t._m(19),e("demo-block",[e("template",{slot:"source"},[e("element-demo8")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell center title="单元格" value="内容" label="描述信息" />\n')])])])],2),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26),t._m(27),t._m(28),t._m(29),t._m(30),t._m(31),t._m(32),t._m(33)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"cell-dan-yuan-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cell-dan-yuan-ge"}},[this._v("¶")]),this._v(" Cell 单元格")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dai-ma-yan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ma-yan-shi"}},[this._v("¶")]),this._v(" 代码演示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[e("code",[t._v("Cell")]),t._v(" 可以单独使用，也可以与 "),e("code",[t._v("CellGroup")]),t._v(" 搭配使用，"),e("code",[t._v("CellGroup")]),t._v(" 可以为 "),e("code",[t._v("Cell")]),t._v(" 提供上下外边框。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dan-yuan-ge-da-xiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-yuan-ge-da-xiao"}},[this._v("¶")]),this._v(" 单元格大小")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("size")]),t._v(" 属性可以控制单元格的大小。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhan-shi-tu-biao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhan-shi-tu-biao"}},[this._v("¶")]),this._v(" 展示图标")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("icon")]),t._v(" 属性在标题左侧展示图标。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhi-she-zhi-value"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-she-zhi-value"}},[this._v("¶")]),this._v(" 只设置 value")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("只设置 "),e("code",[t._v("value")]),t._v(" 时，内容会靠左对齐。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhan-shi-jian-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhan-shi-jian-tou"}},[this._v("¶")]),this._v(" 展示箭头")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("设置 "),e("code",[t._v("is-link")]),t._v(" 属性后会在单元格右侧显示箭头，并且可以通过 "),e("code",[t._v("arrow-direction")]),t._v(" 属性控制箭头方向。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ye-mian-dao-hang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ye-mian-dao-hang"}},[this._v("¶")]),this._v(" 页面导航")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("可以通过 "),e("code",[t._v("url")]),t._v(" 属性进行 URL 跳转，或通过 "),e("code",[t._v("to")]),t._v(" 属性进行路由跳转。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fen-zu-biao-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fen-zu-biao-ti"}},[this._v("¶")]),this._v(" 分组标题")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("CellGroup")]),t._v(" 的 "),e("code",[t._v("title")]),t._v(" 属性可以指定分组标题。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shi-yong-cha-cao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-cha-cao"}},[this._v("¶")]),this._v(" 使用插槽")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"chui-zhi-ju-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chui-zhi-ju-zhong"}},[this._v("¶")]),this._v(" 垂直居中")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("center")]),t._v(" 属性可以让 "),e("code",[t._v("Cell")]),t._v(" 的左右内容都垂直居中。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cellgroup-props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cellgroup-props"}},[this._v("¶")]),this._v(" CellGroup Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("title")]),e("td",[t._v("分组标题")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("-")])])]),e("tr",[e("td",[t._v("border")]),e("td",[t._v("是否显示外边框")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cell-props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cell-props"}},[this._v("¶")]),this._v(" Cell Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("title")]),e("td",[t._v("左侧标题")]),e("td",[e("em",[t._v("number | string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("value")]),e("td",[t._v("右侧内容")]),e("td",[e("em",[t._v("number | string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("标题下方的描述信息")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("单元格大小，可选值为 "),e("code",[t._v("large")])]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("icon")]),e("td",[t._v("左侧"),e("a",{attrs:{href:"#/zh-CN/icon"}},[t._v("图标名称")]),t._v("或图片链接")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("icon-prefix "),e("code",[t._v("v2.5.3")])]),e("td",[t._v("图标类名前缀，同 Icon 组件的 "),e("a",{attrs:{href:"#/zh-CN/icon#props"}},[t._v("class-prefix 属性")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("van-icon")])])]),e("tr",[e("td",[t._v("url")]),e("td",[t._v("点击后跳转的链接地址")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("to")]),e("td",[t._v("点击后跳转的目标路由对象，同 vue-router 的 "),e("a",{attrs:{href:"https://router.vuejs.org/zh/api/#to"}},[t._v("to 属性")])]),e("td",[e("em",[t._v("string | object")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("border")]),e("td",[t._v("是否显示内边框")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("replace")]),e("td",[t._v("是否在跳转时替换当前页面历史")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("clickable")]),e("td",[t._v("是否开启点击反馈")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("is-link")]),e("td",[t._v("是否展示右侧箭头并开启点击反馈")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("required")]),e("td",[t._v("是否显示表单必填星号")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("center")]),e("td",[t._v("是否使内容垂直居中")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("arrow-direction")]),e("td",[t._v("箭头方向，可选值为 "),e("code",[t._v("left")]),e("code",[t._v("up")]),e("code",[t._v("down")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("right")])])]),e("tr",[e("td",[t._v("title-style")]),e("td",[t._v("左侧标题额外样式")]),e("td",[e("em",[t._v("any")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("title-class")]),e("td",[t._v("左侧标题额外类名")]),e("td",[e("em",[t._v("any")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("value-class")]),e("td",[t._v("右侧内容额外类名")]),e("td",[e("em",[t._v("any")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("label-class")]),e("td",[t._v("描述信息额外类名")]),e("td",[e("em",[t._v("any")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cell-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cell-events"}},[this._v("¶")]),this._v(" Cell Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("click")]),e("td",[t._v("点击单元格时触发")]),e("td",[e("em",[t._v("event: Event")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cellgroup-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cellgroup-slots"}},[this._v("¶")]),this._v(" CellGroup Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("default")]),e("td",[t._v("默认插槽")])]),e("tr",[e("td",[t._v("title")]),e("td",[t._v("自定义分组标题")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cell-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cell-slots"}},[this._v("¶")]),this._v(" Cell Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("default")]),e("td",[t._v("自定义右侧 value 的内容")])]),e("tr",[e("td",[t._v("title")]),e("td",[t._v("自定义左侧 title 的内容")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("自定义标题下方 label 的内容")])]),e("tr",[e("td",[t._v("icon")]),e("td",[t._v("自定义左侧图标")])]),e("tr",[e("td",[t._v("right-icon")]),e("td",[t._v("自定义右侧按钮，默认为"),e("code",[t._v("arrow")])])]),e("tr",[e("td",[t._v("extra")]),e("td",[t._v("自定义单元格最右侧的额外内容")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),e("a",{attrs:{href:"#/zh-CN/theme"}},[t._v("主题定制")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@cell-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-line-height")]),e("td",[e("code",[t._v("24px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-vertical-padding")]),e("td",[e("code",[t._v("10px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-horizontal-padding")]),e("td",[e("code",[t._v("@padding-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-text-color")]),e("td",[e("code",[t._v("@text-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-background-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-border-color")]),e("td",[e("code",[t._v("@border-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-active-color")]),e("td",[e("code",[t._v("@active-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-required-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-label-color")]),e("td",[e("code",[t._v("@gray-6")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-label-font-size")]),e("td",[e("code",[t._v("@font-size-sm")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-label-line-height")]),e("td",[e("code",[t._v("@line-height-sm")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-label-margin-top")]),e("td",[e("code",[t._v("@padding-base")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-value-color")]),e("td",[e("code",[t._v("@gray-6")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-icon-size")]),e("td",[e("code",[t._v("16px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-right-icon-color")]),e("td",[e("code",[t._v("@gray-6")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-large-vertical-padding")]),e("td",[e("code",[t._v("@padding-sm")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-large-title-font-size")]),e("td",[e("code",[t._v("@font-size-lg")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-large-label-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-group-background-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-group-title-color")]),e("td",[e("code",[t._v("@gray-6")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-group-title-padding")]),e("td",[e("code",[t._v("@padding-md @padding-md @padding-xs")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-group-title-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@cell-group-title-line-height")]),e("td",[e("code",[t._v("16px")])]),e("td",[t._v("-")])])])])}],!1,null,null,null);e.default=a.exports},1088:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-input-number",{attrs:{min:1,max:10,label:"描述文字"},on:{change:e.handleChange},model:{value:e.num,callback:function(t){e.num=t},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:1}},methods:{handleChange:function(t){console.log(t)}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("仅允许输入标准的数字值，可定义范围")]),t._m(1),e("demo-block",[e("div",[e("p",[t._v("要使用它，只需要在"),e("code",[t._v("el-input-number")]),t._v("元素中使用"),e("code",[t._v("v-model")]),t._v("绑定变量即可，变量的初始值即为默认值。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></tis-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),t._m(2),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"inputnumber-ji-shu-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber-ji-shu-qi"}},[this._v("¶")]),this._v(" InputNumber 计数器")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("min")]),e("td",[t._v("设置计数器允许的最小值")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("-Infinity")])]),e("tr",[e("td",[t._v("max")]),e("td",[t._v("设置计数器允许的最大值")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("Infinity")])]),e("tr",[e("td",[t._v("step")]),e("td",[t._v("计数器步长")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("1")])]),e("tr",[e("td",[t._v("step-strictly")]),e("td",[t._v("是否只能输入 step 的倍数")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("precision")]),e("td",[t._v("数值精度")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("计数器尺寸")]),e("td",[t._v("string")]),e("td",[t._v("large, small")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用计数器")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("controls")]),e("td",[t._v("是否使用控制按钮")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("controls-position")]),e("td",[t._v("控制按钮位置")]),e("td",[t._v("string")]),e("td",[t._v("right")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("name")]),e("td",[t._v("原生属性")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("输入框关联的label文字")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("placeholder")]),e("td",[t._v("输入框默认 placeholder")]),e("td",[t._v("string")]),e("td",[t._v("-")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("change")]),e("td",[t._v("绑定值被改变时触发")]),e("td",[t._v("currentValue, oldValue")])]),e("tr",[e("td",[t._v("blur")]),e("td",[t._v("在组件 Input 失去焦点时触发")]),e("td",[t._v("(event: Event)")])]),e("tr",[e("td",[t._v("focus")]),e("td",[t._v("在组件 Input 获得焦点时触发")]),e("td",[t._v("(event: Event)")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[this._v("¶")]),this._v(" Methods")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("focus")]),e("td",[t._v("使 input 获取焦点")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("select")]),e("td",[t._v("选中 input 中的文字")]),e("td",[t._v("—")])])])])}],!1,null,null,null);e.default=a.exports},1089:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-checkbox",{model:{value:e.checked,callback:function(t){e.checked=t},expression:"checked"}},[e._v("复选框")])],1)},staticRenderFns:[]},{data:function(){return{checked:!0}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-checkbox",{attrs:{disabled:""},model:{value:e.checked,callback:function(t){e.checked=t},expression:"checked"}},[e._v("复选框")])],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-checkbox",{attrs:{shape:"square"},model:{value:e.checked,callback:function(t){e.checked=t},expression:"checked"}},[e._v("复选框")])],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-checkbox",{attrs:{"checked-color":"#ee0a24"},model:{value:e.checked,callback:function(t){e.checked=t},expression:"checked"}},[e._v("复选框")])],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-checkbox",{attrs:{"icon-size":"24px"},model:{value:e.checked,callback:function(t){e.checked=t},expression:"checked"}},[e._v("复选框")])],1)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-checkbox",{model:{value:e.checked,callback:function(t){e.checked=t},expression:"checked"}},[e._v("\n  自定义图标\n  "),[t("img",{staticClass:"img-icon",attrs:{src:e.props.checked?e.activeIcon:e.inactiveIcon}})]],2)],1)},staticRenderFns:[]},{data:function(){return{checked:!0,activeIcon:"https://img.yzcdn.cn/vant/user-active.png",inactiveIcon:"https://img.yzcdn.cn/vant/user-inactive.png"}}}),"element-demo6":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-checkbox",{attrs:{"label-disabled":""},model:{value:e.checked,callback:function(t){e.checked=t},expression:"checked"}},[e._v("复选框")])],1)},staticRenderFns:[]},{}),"element-demo7":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-checkbox-group",{model:{value:e.result,callback:function(t){e.result=t},expression:"result"}},[t("m-checkbox",{attrs:{name:"a"}},[e._v("复选框 a")]),e._v(" "),t("m-checkbox",{attrs:{name:"b"}},[e._v("复选框 b")])],1)],1)},staticRenderFns:[]},{data:function(){return{result:["a","b"]}}}),"element-demo8":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-checkbox-group",{attrs:{direction:"horizontal"},model:{value:e.result,callback:function(t){e.result=t},expression:"result"}},[t("m-checkbox",{attrs:{name:"a"}},[e._v("复选框 a")]),e._v(" "),t("m-checkbox",{attrs:{name:"b"}},[e._v("复选框 b")])],1)],1)},staticRenderFns:[]},{data:function(){return{result:[]}}}),"element-demo9":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-checkbox-group",{attrs:{max:2},model:{value:e.result,callback:function(t){e.result=t},expression:"result"}},[t("m-checkbox",{attrs:{name:"a"}},[e._v("复选框 a")]),e._v(" "),t("m-checkbox",{attrs:{name:"b"}},[e._v("复选框 b")]),e._v(" "),t("m-checkbox",{attrs:{name:"c"}},[e._v("复选框 c")])],1)],1)},staticRenderFns:[]},{}),"element-demo10":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-checkbox-group",{ref:"checkboxGroup",model:{value:e.result,callback:function(t){e.result=t},expression:"result"}},[t("m-checkbox",{attrs:{name:"a"}},[e._v("复选框 a")]),e._v(" "),t("m-checkbox",{attrs:{name:"b"}},[e._v("复选框 b")]),e._v(" "),t("m-checkbox",{attrs:{name:"c"}},[e._v("复选框 c")])],1),e._v(" "),t("m-button",{attrs:{type:"primary"},on:{click:e.checkAll}},[e._v("全选")]),e._v(" "),t("m-button",{attrs:{type:"info"},on:{click:e.toggleAll}},[e._v("反选")])],1)},staticRenderFns:[]},{data:function(){return{result:[]}},methods:{checkAll:function(){this.$refs.checkboxGroup.toggleAll(!0)},toggleAll:function(){this.$refs.checkboxGroup.toggleAll()}}}),"element-demo11":a({render:function(){var n=this,t=n.$createElement,a=n._self._c||t;return a("div",[a("m-checkbox-group",{model:{value:n.result,callback:function(t){n.result=t},expression:"result"}},[a("m-cell-group",n._l(n.list,function(t,e){return a("m-cell",{key:t,attrs:{clickable:"",title:"复选框 "+t},on:{click:function(t){n.toggle(e)}}},[[a("m-checkbox",{ref:"checkboxes",refInFor:!0,attrs:{name:t}})]],2)}),1)],1)],1)},staticRenderFns:[]},{data:function(){return{list:["a","b"],result:[]}},methods:{toggle:function(t){this.$refs.checkboxes[t].toggle()}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("p",[t._v("用于在选中和非选中状态之间进行切换。")]),t._m(2),t._m(3),t._m(4),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-checkbox v-model="checked">复选框</m-checkbox>\n<script>\nexport default {\n  data() {\n    return {\n      checked: true,\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(5),t._m(6),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-checkbox v-model="checked" disabled>复选框</m-checkbox>\n')])])])],2),t._m(7),t._m(8),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-checkbox v-model="checked" shape="square">复选框</m-checkbox>\n')])])])],2),t._m(9),t._m(10),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-checkbox v-model="checked" checked-color="#ee0a24">复选框</m-checkbox>\n')])])])],2),t._m(11),t._m(12),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-checkbox v-model="checked" icon-size="24px">复选框</m-checkbox>\n')])])])],2),t._m(13),t._m(14),e("demo-block",[e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-checkbox v-model="checked">\n  自定义图标\n  <template #icon="props">\n    <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n  </template>\n</m-checkbox>\n\n<style>\n  .img-icon {\n    height: 20px;\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      checked: true,\n      activeIcon: \'https://img.yzcdn.cn/vant/user-active.png\',\n      inactiveIcon: \'https://img.yzcdn.cn/vant/user-inactive.png\',\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(15),t._m(16),e("demo-block",[e("template",{slot:"source"},[e("element-demo6")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-checkbox v-model="checked" label-disabled>复选框</m-checkbox>\n')])])])],2),t._m(17),t._m(18),e("demo-block",[e("template",{slot:"source"},[e("element-demo7")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-checkbox-group v-model="result">\n  <m-checkbox name="a">复选框 a</m-checkbox>\n  <m-checkbox name="b">复选框 b</m-checkbox>\n</m-checkbox-group>\n\n<script>\nexport default {\n  data() {\n    return {\n      result: [\'a\', \'b\'],\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(19),t._m(20),e("demo-block",[e("template",{slot:"source"},[e("element-demo8")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-checkbox-group v-model="result" direction="horizontal">\n  <m-checkbox name="a">复选框 a</m-checkbox>\n  <m-checkbox name="b">复选框 b</m-checkbox>\n</m-checkbox-group>\n<script>\nexport default {\n  data() {\n    return {\n      result: [],\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(21),t._m(22),e("demo-block",[e("template",{slot:"source"},[e("element-demo9")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-checkbox-group v-model="result" :max="2">\n  <m-checkbox name="a">复选框 a</m-checkbox>\n  <m-checkbox name="b">复选框 b</m-checkbox>\n  <m-checkbox name="c">复选框 c</m-checkbox>\n</m-checkbox-group>\n')])])])],2),t._m(23),t._m(24),e("demo-block",[e("template",{slot:"source"},[e("element-demo10")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-checkbox-group v-model="result" ref="checkboxGroup">\n  <m-checkbox name="a">复选框 a</m-checkbox>\n  <m-checkbox name="b">复选框 b</m-checkbox>\n  <m-checkbox name="c">复选框 c</m-checkbox>\n</m-checkbox-group>\n\n<m-button type="primary" @click="checkAll">全选</m-button>\n<m-button type="info" @click="toggleAll">反选</m-button>\n\n<script>\nexport default {\n  data() {\n    return {\n      result: [],\n    };\n  },\n  methods: {\n    checkAll() {\n      this.$refs.checkboxGroup.toggleAll(true);\n    },\n    toggleAll() {\n      this.$refs.checkboxGroup.toggleAll();\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(25),t._m(26),e("demo-block",[e("template",{slot:"source"},[e("element-demo11")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-checkbox-group v-model="result">\n  <m-cell-group>\n    <m-cell\n      v-for="(item, index) in list"\n      clickable\n      :key="item"\n      :title="`复选框 ${item}`"\n      @click="toggle(index)"\n    >\n      <template #right-icon>\n        <m-checkbox :name="item" ref="checkboxes" />\n      </template>\n    </m-cell>\n  </m-cell-group>\n</m-checkbox-group>\n\n<script>\nexport default {\n  data() {\n    return {\n      list: [\'a\', \'b\'],\n      result: [],\n    };\n  },\n  methods: {\n    toggle(index) {\n      this.$refs.checkboxes[index].toggle();\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(27),t._m(28),t._m(29),t._m(30),t._m(31),t._m(32),t._m(33),t._m(34),t._m(35),t._m(36),t._m(37),t._m(38),t._m(39),t._m(40),t._m(41),t._m(42),t._m(43),t._m(44),t._m(45),t._m(46),t._m(47),t._m(48)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"checkbox-fu-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-fu-xuan-kuang"}},[this._v("¶")]),this._v(" Checkbox 复选框")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dai-ma-yan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ma-yan-shi"}},[this._v("¶")]),this._v(" 代码演示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("v-model")]),t._v(" 绑定复选框的勾选状态。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过设置 "),e("code",[t._v("disabled")]),t._v(" 属性可以禁用复选框。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-xing-zhuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-xing-zhuang"}},[this._v("¶")]),this._v(" 自定义形状")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("将 "),e("code",[t._v("shape")]),t._v(" 属性设置为 "),e("code",[t._v("square")]),t._v("，复选框的形状会变成方形。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-yan-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-yan-se"}},[this._v("¶")]),this._v(" 自定义颜色")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("checked-color")]),t._v(" 属性设置选中状态的图标颜色。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-da-xiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-da-xiao"}},[this._v("¶")]),this._v(" 自定义大小")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("icon-size")]),t._v(" 属性可以自定义图标的大小。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-tu-biao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-tu-biao"}},[this._v("¶")]),this._v(" 自定义图标")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("icon")]),t._v(" 插槽自定义图标，可以通过 "),e("code",[t._v("slotProps")]),t._v(" 判断是否为选中状态.")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jin-yong-wen-ben-dian-ji"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-wen-ben-dian-ji"}},[this._v("¶")]),this._v(" 禁用文本点击")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("设置 "),e("code",[t._v("label-disabled")]),t._v(" 属性后，点击图标以外的内容不会触发复选框切换。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fu-xuan-kuang-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-xuan-kuang-zu"}},[this._v("¶")]),this._v(" 复选框组")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("复选框可以与复选框组一起使用，复选框组通过 "),e("code",[t._v("v-model")]),t._v(" 数组绑定复选框的勾选状态。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shui-ping-pai-lie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shui-ping-pai-lie"}},[this._v("¶")]),this._v(" 水平排列")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("将 "),e("code",[t._v("direction")]),t._v(" 属性设置为 "),e("code",[t._v("horizontal")]),t._v(" 后，复选框组会变成水平排列。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xian-zhi-zui-da-ke-xuan-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-zhi-zui-da-ke-xuan-shu"}},[this._v("¶")]),this._v(" 限制最大可选数")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("max")]),t._v(" 属性可以限制复选框组的最大可选数。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"quan-xuan-yu-fan-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-xuan-yu-fan-xuan"}},[this._v("¶")]),this._v(" 全选与反选")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("CheckboxGroup")]),t._v(" 实例上的 "),e("code",[t._v("toggleAll")]),t._v(" 方法可以实现全选与反选。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"da-pei-dan-yuan-ge-zu-jian-shi-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#da-pei-dan-yuan-ge-zu-jian-shi-yong"}},[this._v("¶")]),this._v(" 搭配单元格组件使用")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("此时你需要再引入 "),e("code",[t._v("Cell")]),t._v(" 和 "),e("code",[t._v("CellGroup")]),t._v(" 组件，并通过 "),e("code",[t._v("Checkbox")]),t._v(" 实例上的 toggle 方法触发切换。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"checkbox-props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-props"}},[this._v("¶")]),this._v(" Checkbox Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("v-model (value)")]),e("td",[t._v("是否为选中状态")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("name")]),e("td",[t._v("标识符")]),e("td",[e("em",[t._v("any")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("shape")]),e("td",[t._v("形状，可选值为 "),e("code",[t._v("square")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("round")])])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用复选框")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("label-disabled")]),e("td",[t._v("是否禁用复选框文本点击")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("label-position")]),e("td",[t._v("文本位置，可选值为 "),e("code",[t._v("left")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("right")])])]),e("tr",[e("td",[t._v("icon-size")]),e("td",[t._v("图标大小，默认单位为 "),e("code",[t._v("px")])]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("20px")])])]),e("tr",[e("td",[t._v("checked-color")]),e("td",[t._v("选中状态颜色")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("#1989fa")])])]),e("tr",[e("td",[t._v("bind-group")]),e("td",[t._v("是否与复选框组绑定")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"checkboxgroup-props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkboxgroup-props"}},[this._v("¶")]),this._v(" CheckboxGroup Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("v-model (value)")]),e("td",[t._v("所有选中项的标识符")]),e("td",[e("em",[t._v("any[]")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用所有复选框")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("max")]),e("td",[t._v("最大可选数，"),e("code",[t._v("0")]),t._v("为无限制")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("0")])])]),e("tr",[e("td",[t._v("direction "),e("code",[t._v("v2.5.0")])]),e("td",[t._v("排列方向，可选值为 "),e("code",[t._v("horizontal")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("vertical")])])]),e("tr",[e("td",[t._v("icon-size")]),e("td",[t._v("所有复选框的图标大小，默认单位为 "),e("code",[t._v("px")])]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("20px")])])]),e("tr",[e("td",[t._v("checked-color")]),e("td",[t._v("所有复选框的选中状态颜色")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("#1989fa")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"checkbox-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events"}},[this._v("¶")]),this._v(" Checkbox Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("change")]),e("td",[t._v("当绑定值变化时触发的事件")]),e("td",[e("em",[t._v("checked: boolean")])])]),e("tr",[e("td",[t._v("click")]),e("td",[t._v("点击复选框时触发")]),e("td",[e("em",[t._v("event: Event")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"checkboxgroup-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkboxgroup-events"}},[this._v("¶")]),this._v(" CheckboxGroup Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("change")]),e("td",[t._v("当绑定值变化时触发的事件")]),e("td",[e("em",[t._v("names: any[]")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"checkbox-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-slots"}},[this._v("¶")]),this._v(" Checkbox Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("default")]),e("td",[t._v("自定义文本")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("icon")]),e("td",[t._v("自定义图标")]),e("td",[e("em",[t._v("checked: boolean")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"checkboxgroup-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkboxgroup-fang-fa"}},[this._v("¶")]),this._v(" CheckboxGroup 方法")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法，详见"),e("a",{attrs:{href:"#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa"}},[t._v("组件实例方法")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")]),e("th",[t._v("返回值")])])]),e("tbody",[e("tr",[e("td",[t._v("toggleAll")]),e("td",[t._v("切换所有复选框，传 "),e("code",[t._v("true")]),t._v(" 为选中，"),e("code",[t._v("false")]),t._v(" 为取消选中，不传参为取反")]),e("td",[e("em",[t._v("options?: boolean | object")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"toggleall-fang-fa-shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#toggleall-fang-fa-shi-li"}},[this._v("¶")]),this._v(" toggleAll 方法示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-js"},[this._v("const { checkboxGroup } = this.$refs;\n\n// 全部反选\ncheckboxGroup.toggleAll();\n// 全部选中\ncheckboxGroup.toggleAll(true);\n// 全部取消\ncheckboxGroup.toggleAll(false);\n\n// 全部反选，并跳过禁用的复选框\ncheckboxGroup.toggleAll({\n  skipDisabled: true,\n});\n// 全部选中，并跳过禁用的复选框\ncheckboxGroup.toggleAll({\n  checked: true,\n  skipDisabled: true,\n});\n")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"checkbox-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-fang-fa"}},[this._v("¶")]),this._v(" Checkbox 方法")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见"),e("a",{attrs:{href:"#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa"}},[t._v("组件实例方法")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")]),e("th",[t._v("返回值")])])]),e("tbody",[e("tr",[e("td",[t._v("toggle")]),e("td",[t._v("切换选中状态，传 "),e("code",[t._v("true")]),t._v(" 为选中，"),e("code",[t._v("false")]),t._v(" 为取消选中，不传参为取反")]),e("td",[e("em",[t._v("checked?: boolean")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),e("a",{attrs:{href:"#/zh-CN/theme"}},[t._v("主题定制")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@checkbox-size")]),e("td",[e("code",[t._v("20px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@checkbox-border-color")]),e("td",[e("code",[t._v("@gray-5")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@checkbox-transition-duration")]),e("td",[e("code",[t._v("@animation-duration-fast")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@checkbox-label-margin")]),e("td",[e("code",[t._v("@padding-xs")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@checkbox-label-color")]),e("td",[e("code",[t._v("@text-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@checkbox-checked-icon-color")]),e("td",[e("code",[t._v("@blue")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@checkbox-disabled-icon-color")]),e("td",[e("code",[t._v("@gray-5")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@checkbox-disabled-label-color")]),e("td",[e("code",[t._v("@gray-5")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@checkbox-disabled-background-color")]),e("td",[e("code",[t._v("@border-color")])]),e("td",[t._v("-")])])])])}],!1,null,null,null);e.default=a.exports},1090:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("ul",{directives:[{name:"infinite-scroll",rawName:"v-infinite-scroll",value:e.load,expression:"load"}],staticClass:"infinite-list",staticStyle:{overflow:"auto"}},e._l(e.count,function(t){return n("li",{staticClass:"infinite-list-item"},[e._v(e._s(t))])}),0)]],2)},staticRenderFns:[]},{data:function(){return{count:0}},methods:{load:function(){this.count+=2}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",{staticClass:"infinite-list-wrapper",staticStyle:{overflow:"auto"}},[n("ul",{directives:[{name:"infinite-scroll",rawName:"v-infinite-scroll",value:e.load,expression:"load"}],staticClass:"list",attrs:{"infinite-scroll-disabled":"disabled"}},e._l(e.count,function(t){return n("li",{staticClass:"list-item"},[e._v(e._s(t))])}),0),e._v(" "),e.loading?n("p",[e._v("加载中...")]):e._e(),e._v(" "),e.noMore?n("p",[e._v("没有更多了")]):e._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 t=this;this.loading=!0,setTimeout(function(){t.count+=2,t.loading=!1},2e3)}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("滚动至底部时，加载更多数据。")]),t._m(1),t._m(2),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._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),t._m(3),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._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),t._m(4),t._m(5)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"infinitescroll-wu-xian-gun-dong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#infinitescroll-wu-xian-gun-dong"}},[this._v("¶")]),this._v(" InfiniteScroll 无限滚动")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("在要实现滚动加载的列表上上添加"),e("code",[t._v("v-infinite-scroll")]),t._v("，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jin-yong-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-jia-zai"}},[this._v("¶")]),this._v(" 禁用加载")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("infinite-scroll-disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("infinite-scroll-delay")]),e("td",[t._v("节流时延，单位为ms")]),e("td",[t._v("number")]),e("td",[t._v("-")]),e("td",[t._v("200")])]),e("tr",[e("td",[t._v("infinite-scroll-distance")]),e("td",[t._v("触发加载的距离阈值，单位为px")]),e("td",[t._v("number")]),e("td",[t._v("-")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("infinite-scroll-immediate")]),e("td",[t._v("是否立即执行加载方法，以防初始状态下内容无法撑满容器。")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("true")])])])])}],!1,null,null,null);e.default=a.exports},1091:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-datetime-picker",{attrs:{type:"date",title:"选择年月日","min-date":e.minDate,"max-date":e.maxDate},model:{value:e.currentDate,callback:function(t){e.currentDate=t},expression:"currentDate"}})],1)},staticRenderFns:[]},{data:function(){return{minDate:new Date(2020,0,1),maxDate:new Date(2025,10,1),currentDate:new Date}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-datetime-picker",{attrs:{type:"year-month",title:"选择年月","min-date":e.minDate,"max-date":e.maxDate,formatter:e.formatter},model:{value:e.currentDate,callback:function(t){e.currentDate=t},expression:"currentDate"}})],1)},staticRenderFns:[]},{data:function(){return{minDate:new Date(2020,0,1),maxDate:new Date(2025,10,1),currentDate:new Date}},methods:{formatter:function(t,e){return"year"===t?e+"年":"month"===t?e+"月":e}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-datetime-picker",{attrs:{type:"month-day",title:"选择月日","min-date":e.minDate,"max-date":e.maxDate,formatter:e.formatter},model:{value:e.currentDate,callback:function(t){e.currentDate=t},expression:"currentDate"}})],1)},staticRenderFns:[]},{data:function(){return{minDate:new Date(2020,0,1),maxDate:new Date(2025,10,1),currentDate:new Date}},methods:{formatter:function(t,e){return"month"===t?e+"月":"day"===t?e+"日":e}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-datetime-picker",{attrs:{type:"time",title:"选择时间","min-hour":10,"max-hour":20},model:{value:e.currentTime,callback:function(t){e.currentTime=t},expression:"currentTime"}})],1)},staticRenderFns:[]},{data:function(){return{currentTime:"12:00"}}}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-datetime-picker",{attrs:{type:"datetime",title:"选择完整时间","min-date":e.minDate,"max-date":e.maxDate},model:{value:e.currentDate,callback:function(t){e.currentDate=t},expression:"currentDate"}})],1)},staticRenderFns:[]},{data:function(){return{minDate:new Date(2020,0,1),maxDate:new Date(2025,10,1),currentDate:new Date}}}),"element-demo5":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-datetime-picker",{attrs:{type:"datehour",title:"选择年月日小时","min-date":e.minDate,"max-date":e.maxDate},model:{value:e.currentDate,callback:function(t){e.currentDate=t},expression:"currentDate"}})],1)},staticRenderFns:[]},{data:function(){return{minDate:new Date(2020,0,1),maxDate:new Date(2025,10,1),currentDate:new Date}}}),"element-demo6":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-datetime-picker",{attrs:{type:"time",filter:e.filter},model:{value:e.currentTime,callback:function(t){e.currentTime=t},expression:"currentTime"}})],1)},staticRenderFns:[]},{data:function(){return{currentTime:"12:00"}},methods:{filter:function(t,e){return"minute"===t?e.filter(function(t){return t%5==0}):e}}}),"element-demo7":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-datetime-picker",{attrs:{type:"date",title:"自定义列排序","columns-order":["month","day","year"],formatter:e.formatter},model:{value:e.currentDate,callback:function(t){e.currentDate=t},expression:"currentDate"}})],1)},staticRenderFns:[]},{data:function(){return{currentDate:new Date}},methods:{formatter:function(t,e){return"year"===t?e+"年":"month"===t?e+"月":"day"===t?e+"日":e}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),t._m(2),t._m(3),t._m(4),t._m(5),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-datetime-picker\n  v-model="currentDate"\n  type="date"\n  title="选择年月日"\n  :min-date="minDate"\n  :max-date="maxDate"\n/>\n<script>\nexport default {\n  data() {\n    return {\n      minDate: new Date(2020, 0, 1),\n      maxDate: new Date(2025, 10, 1),\n      currentDate: new Date(),\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(6),t._m(7),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-datetime-picker\n  v-model="currentDate"\n  type="year-month"\n  title="选择年月"\n  :min-date="minDate"\n  :max-date="maxDate"\n  :formatter="formatter"\n/>\n\n<script>\nexport default {\n  data() {\n    return {\n      minDate: new Date(2020, 0, 1),\n      maxDate: new Date(2025, 10, 1),\n      currentDate: new Date(),\n    };\n  },\n  methods: {\n    formatter(type, val) {\n      if (type === \'year\') {\n        return `${val}年`;\n      } else if (type === \'month\') {\n        return `${val}月`;\n      }\n      return val;\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(8),t._m(9),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-datetime-picker\n  v-model="currentDate"\n  type="month-day"\n  title="选择月日"\n  :min-date="minDate"\n  :max-date="maxDate"\n  :formatter="formatter"\n/>\n<script>\nexport default {\n  data() {\n    return {\n      minDate: new Date(2020, 0, 1),\n      maxDate: new Date(2025, 10, 1),\n      currentDate: new Date(),\n    };\n  },\n  methods: {\n    formatter(type, val) {\n      if (type === \'month\') {\n        return `${val}月`;\n      } else if (type === \'day\') {\n        return `${val}日`;\n      }\n      return val;\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(10),t._m(11),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-datetime-picker\n  v-model="currentTime"\n  type="time"\n  title="选择时间"\n  :min-hour="10"\n  :max-hour="20"\n/>\n<script>\nexport default {\n  data() {\n    return {\n      currentTime: \'12:00\',\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(12),t._m(13),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-datetime-picker\n  v-model="currentDate"\n  type="datetime"\n  title="选择完整时间"\n  :min-date="minDate"\n  :max-date="maxDate"\n/>\n<script>\nexport default {\n  data() {\n    return {\n      minDate: new Date(2020, 0, 1),\n      maxDate: new Date(2025, 10, 1),\n      currentDate: new Date(),\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(14),t._m(15),e("demo-block",[e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-datetime-picker\n  v-model="currentDate"\n  type="datehour"\n  title="选择年月日小时"\n  :min-date="minDate"\n  :max-date="maxDate"\n/>\n<script>\nexport default {\n  data() {\n    return {\n      minDate: new Date(2020, 0, 1),\n      maxDate: new Date(2025, 10, 1),\n      currentDate: new Date(),\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(16),t._m(17),e("demo-block",[e("template",{slot:"source"},[e("element-demo6")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-datetime-picker v-model="currentTime" type="time" :filter="filter" />\n<script>\nexport default {\n  data() {\n    return {\n      currentTime: \'12:00\',\n    };\n  },\n  methods: {\n    filter(type, options) {\n      if (type === \'minute\') {\n        return options.filter((option) => option % 5 === 0);\n      }\n      return options;\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(18),e("demo-block",[e("template",{slot:"source"},[e("element-demo7")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<m-datetime-picker\n  v-model=\"currentDate\"\n  type=\"date\"\n  title=\"自定义列排序\"\n  :columns-order=\"['month', 'day', 'year']\"\n  :formatter=\"formatter\"\n/>\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date(),\n    };\n  },\n  methods: {\n    formatter(type, val) {\n      if (type === 'year') {\n        return val + '年';\n      }\n      if (type === 'month') {\n        return val + '月';\n      }\n      if (type === 'day') {\n        return val + '日';\n      }\n      return val;\n    },\n  },\n};\n<\/script>\n")])])])],2),t._m(19),t._m(20),t._m(21),t._m(22),e("p",[t._v("当时间选择器类型为 date 或 datetime 时，支持以下 props:")]),t._m(23),t._m(24),e("p",[t._v("当时间选择器类型为 time 时，支持以下 props:")]),t._m(25),t._m(26),t._m(27),t._m(28),t._m(29),t._m(30),t._m(31),t._m(32),t._m(33),t._m(34),t._m(35),t._m(36),t._m(37),t._m(38),t._m(39),t._m(40),t._m(41),t._m(42),t._m(43)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"datetimepicker-shi-jian-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker-shi-jian-xuan-ze"}},[this._v("¶")]),this._v(" DatetimePicker 时间选择")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("时间选择器，支持日期、年月、时分等维度，通常与"),e("a",{attrs:{href:"#/zh-CN/popup"}},[t._v("弹出层")]),t._v("组件配合使用。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dai-ma-yan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ma-yan-shi"}},[this._v("¶")]),this._v(" 代码演示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xuan-ze-nian-yue-ri"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-nian-yue-ri"}},[this._v("¶")]),this._v(" 选择年月日")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("DatetimePicker 通过 type 属性来定义需要选择的时间类型，type 为 "),e("code",[t._v("date")]),t._v(" 表示选择年月日。通过 min-date 和 max-date 属性可以确定可选的时间范围。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xuan-ze-nian-yue"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-nian-yue"}},[this._v("¶")]),this._v(" 选择年月")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("将 type 设置为 "),e("code",[t._v("year-month")]),t._v(" 即可选择年份和月份。通过传入 "),e("code",[t._v("formatter")]),t._v(" 函数，可以对选项文字进行格式化处理。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xuan-ze-yue-ri"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-yue-ri"}},[this._v("¶")]),this._v(" 选择月日")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("将 type 设置为 "),e("code",[t._v("month-day")]),t._v(" 即可选择月份和日期（从 2.8.4 版本开始支持）。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xuan-ze-shi-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-shi-jian"}},[this._v("¶")]),this._v(" 选择时间")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("将 type 设置为 "),e("code",[t._v("time")]),t._v(" 即可选择时间（小时和分钟）。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xuan-ze-wan-zheng-shi-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-wan-zheng-shi-jian"}},[this._v("¶")]),this._v(" 选择完整时间")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("将 type 设置为 "),e("code",[t._v("datetime")]),t._v(" 即可选择完整时间，包括年月日和小时、分钟。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xuan-ze-nian-yue-ri-xiao-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-nian-yue-ri-xiao-shi"}},[this._v("¶")]),this._v(" 选择年月日小时")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("将 type 设置为 "),e("code",[t._v("datehour")]),t._v(" 即可选择日期和小时，包括年月日和小时（从 2.9.1 版本开始支持）。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xuan-xiang-guo-lu-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-xiang-guo-lu-qi"}},[this._v("¶")]),this._v(" 选项过滤器")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过传入 "),e("code",[t._v("filter")]),t._v(" 函数，可以对选项数组进行过滤，实现自定义时间间隔。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-lie-pai-xu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-lie-pai-xu"}},[this._v("¶")]),this._v(" 自定义列排序")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("type")]),e("td",[t._v("时间类型，可选值为 "),e("code",[t._v("date")]),e("code",[t._v("time")]),e("br"),e("code",[t._v("year-month")]),e("code",[t._v("month-day")]),e("code",[t._v("datehour")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("datetime")])])]),e("tr",[e("td",[t._v("title")]),e("td",[t._v("顶部栏标题")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("''")])])]),e("tr",[e("td",[t._v("confirm-button-text")]),e("td",[t._v("确认按钮文字")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("确认")])])]),e("tr",[e("td",[t._v("cancel-button-text")]),e("td",[t._v("取消按钮文字")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("取消")])])]),e("tr",[e("td",[t._v("show-toolbar")]),e("td",[t._v("是否显示顶部栏")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("loading")]),e("td",[t._v("是否显示加载状态")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("readonly "),e("code",[t._v("v2.10.5")])]),e("td",[t._v("是否为只读状态，只读状态下无法切换选项")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("filter")]),e("td",[t._v("选项过滤函数")]),e("td",[e("em",[t._v("(type, vals) => vals")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("formatter")]),e("td",[t._v("选项格式化函数")]),e("td",[e("em",[t._v("(type, val) => val")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("columns-order "),e("code",[t._v("v2.9.2")])]),e("td",[t._v("自定义列排序数组, 子项可选值为"),e("br"),e("code",[t._v("year")]),t._v("、"),e("code",[t._v("month")]),t._v("、"),e("code",[t._v("day")]),t._v("、"),e("code",[t._v("hour")]),t._v("、"),e("code",[t._v("minute")])]),e("td",[e("em",[t._v("string[]")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("item-height "),e("code",[t._v("v2.8.6")])]),e("td",[t._v("选项高度，支持 "),e("code",[t._v("px")]),e("code",[t._v("vw")]),e("code",[t._v("vh")]),e("code",[t._v("rem")]),t._v(" 单位，默认 "),e("code",[t._v("px")])]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("44")])])]),e("tr",[e("td",[t._v("visible-item-count")]),e("td",[t._v("可见的选项个数")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("6")])])]),e("tr",[e("td",[t._v("swipe-duration")]),e("td",[t._v("快速滑动时惯性滚动的时长，单位"),e("code",[t._v("ms")])]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("1000")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"datepicker-props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker-props"}},[this._v("¶")]),this._v(" DatePicker Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("min-date")]),e("td",[t._v("可选的最小时间，精确到分钟")]),e("td",[e("em",[t._v("Date")])]),e("td",[t._v("十年前")])]),e("tr",[e("td",[t._v("max-date")]),e("td",[t._v("可选的最大时间，精确到分钟")]),e("td",[e("em",[t._v("Date")])]),e("td",[t._v("十年后")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"timepicker-props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker-props"}},[this._v("¶")]),this._v(" TimePicker Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("min-hour")]),e("td",[t._v("可选的最小小时")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("0")])])]),e("tr",[e("td",[t._v("max-hour")]),e("td",[t._v("可选的最大小时")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("23")])])]),e("tr",[e("td",[t._v("min-minute")]),e("td",[t._v("可选的最小分钟")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("0")])])]),e("tr",[e("td",[t._v("max-minute")]),e("td",[t._v("可选的最大分钟")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("59")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("change")]),e("td",[t._v("当值变化时触发的事件")]),e("td",[t._v("picker: Picker 实例")])]),e("tr",[e("td",[t._v("confirm")]),e("td",[t._v("点击完成按钮时触发的事件")]),e("td",[t._v("value: 当前选中的时间")])]),e("tr",[e("td",[t._v("cancel")]),e("td",[t._v("点击取消按钮时触发的事件")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("default "),e("code",[t._v("v2.11.1")])]),e("td",[t._v("自定义整个顶部栏的内容")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("title "),e("code",[t._v("v2.11.1")])]),e("td",[t._v("自定义标题内容")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("confirm "),e("code",[t._v("v2.11.1")])]),e("td",[t._v("自定义确认按钮内容")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("cancel "),e("code",[t._v("v2.11.1")])]),e("td",[t._v("自定义取消按钮内容")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("option "),e("code",[t._v("v2.11.1")])]),e("td",[t._v("自定义选项内容")]),e("td",[e("em",[t._v("option: string | object")])])]),e("tr",[e("td",[t._v("columns-top "),e("code",[t._v("v2.11.1")])]),e("td",[t._v("自定义选项上方内容")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("columns-bottom "),e("code",[t._v("v2.11.1")])]),e("td",[t._v("自定义选项下方内容")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa"}},[this._v("¶")]),this._v(" 方法")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见"),e("a",{attrs:{href:"#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa"}},[t._v("组件实例方法")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")]),e("th",[t._v("返回值")])])]),e("tbody",[e("tr",[e("td",[t._v("getPicker "),e("code",[t._v("v2.5.3")])]),e("td",[t._v("获取 Picker 实例，用于调用 Picker 的"),e("a",{attrs:{href:"#/zh-CN/picker#fang-fa"}},[t._v("实例方法")])]),e("td",[t._v("-")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"chang-jian-wen-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-wen-ti"}},[this._v("¶")]),this._v(" 常见问题")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"she-zhi-min-date-huo-max-date-hou-chu-xian-ye-mian-qia-si-de-qing-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-min-date-huo-max-date-hou-chu-xian-ye-mian-qia-si-de-qing-kuang"}},[this._v("¶")]),this._v(" 设置 min-date 或 max-date 后出现页面卡死的情况？")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("请注意不要在模板中直接使用类似"),e("code",[t._v('min-date="new Date()"')]),t._v("的写法，这样会导致每次渲染组件时传入一个新的 Date 对象，而传入新的数据会触发下一次渲染，从而陷入死循环。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("正确的做法是将"),e("code",[t._v("min-date")]),t._v("作为一个数据定义在"),e("code",[t._v("data")]),t._v("函数中。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zai-ios-xi-tong-shang-chu-shi-hua-zu-jian-shi-bai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zai-ios-xi-tong-shang-chu-shi-hua-zu-jian-shi-bai"}},[this._v("¶")]),this._v(" 在 iOS 系统上初始化组件失败？")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("如果你遇到了在 iOS 上无法渲染组件的问题，请确认在创建 Date 对象时没有使用"),e("code",[t._v("new Date('2020-01-01')")]),t._v("这样的写法，iOS 不支持以中划线分隔的日期格式，正确写法是"),e("code",[t._v("new Date('2020/01/01')")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("对此问题的详细解释："),e("a",{attrs:{href:"https://stackoverflow.com/questions/13363673/javascript-date-is-invalid-on-ios"}},[t._v("stackoverflow")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zai-zhuo-mian-duan-wu-fa-cao-zuo-zu-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zai-zhuo-mian-duan-wu-fa-cao-zuo-zu-jian"}},[this._v("¶")]),this._v(" 在桌面端无法操作组件？")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("参见"),e("a",{attrs:{href:"#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei"}},[t._v("桌面端适配")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shi-fou-you-nian-fen-huo-yue-fen-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-fou-you-nian-fen-huo-yue-fen-xuan-ze-qi"}},[this._v("¶")]),this._v(" 是否有年份或月份选择器？")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("如果仅需要选择年份或者月份，建议直接使用 "),e("a",{attrs:{href:"#/zh-CN/picker"}},[t._v("Picker")]),t._v(" 组件。")])}],!1,null,null,null);e.default=a.exports},1092:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={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:"demo-image"},e._l(e.fits,function(t){return n("div",{key:t,staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v(e._s(t))]),e._v(" "),n("tis-image",{staticStyle:{width:"100px",height:"100px"},attrs:{src:e.url,fit:t}})],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 t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("div",{staticClass:"demo-image__placeholder"},[e("div",{staticClass:"block"},[e("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),e("tis-image",{attrs:{src:t.src}})],1),t._v(" "),e("div",{staticClass:"block"},[e("span",{staticClass:"demonstration"},[t._v("自定义")]),t._v(" "),e("tis-image",{attrs:{src:t.src}},[e("div",{staticClass:"image-slot",attrs:{slot:"placeholder"},slot:"placeholder"},[t._v("\n        加载中"),e("span",{staticClass:"dot"},[t._v("...")])])])],1)])])},staticRenderFns:[]},{data:function(){return{src:"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("div",{staticClass:"demo-image__error"},[e("div",{staticClass:"block"},[e("span",{staticClass:"demonstration"},[t._v("默认")]),t._v(" "),e("tis-image")],1),t._v(" "),e("div",{staticClass:"block"},[e("span",{staticClass:"demonstration"},[t._v("自定义")]),t._v(" "),e("tis-image",[e("div",{staticClass:"image-slot",attrs:{slot:"error"},slot:"error"},[e("i",{staticClass:"el-icon-picture-outline"})])])],1)])])},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("div",{staticClass:"demo-image__lazy"},this._l(this.urls,function(t){return e("tis-image",{key:t,attrs:{src:t,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 t=this.$createElement,t=this._self._c||t;return t("div",[t("div",{staticClass:"demo-image__preview"},[t("tis-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"]}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等")]),t._m(1),e("demo-block",[e("div",[e("p",[t._v("可通过"),e("code",[t._v("fit")]),t._v("确定图片如何适应到容器框，同原生 "),e("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"}},[t._v("object-fit")]),t._v("。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="demo-image">\n  <div class="block" v-for="fit in fits" :key="fit">\n    <span class="demonstration">{{ fit }}</span>\n    <tis-image\n      style="width: 100px; height: 100px"\n      :src="url"\n      :fit="fit"></tis-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),t._m(2),e("demo-block",[e("div",[e("p",[t._v("可通过"),e("code",[t._v("slot = placeholder")]),t._v("可自定义占位内容")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="demo-image__placeholder">\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <tis-image :src="src"></tis-image>\n  </div>\n  <div class="block">\n    <span class="demonstration">自定义</span>\n    <tis-image :src="src">\n      <div slot="placeholder" class="image-slot">\n        加载中<span class="dot">...</span>\n      </div>\n    </tis-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),t._m(3),e("demo-block",[e("div",[e("p",[t._v("可通过"),e("code",[t._v("slot = error")]),t._v("可自定义加载失败内容")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="demo-image__error">\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <tis-image></tis-image>\n  </div>\n  <div class="block">\n    <span class="demonstration">自定义</span>\n    <tis-image>\n      <div slot="error" class="image-slot">\n        <i class="el-icon-picture-outline"></i>\n      </div>\n    </tis-image>\n  </div>\n</div>\n')])])])],2),t._m(4),e("demo-block",[e("div",[e("p",[t._v("可通过"),e("code",[t._v("lazy")]),t._v("开启懒加载功能，当图片滚动到可视范围内才会加载。可通过"),e("code",[t._v("scroll-container")]),t._v("来设置滚动容器，若未定义，则为最近一个"),e("code",[t._v("overflow")]),t._v("值为"),e("code",[t._v("auto")]),t._v("或"),e("code",[t._v("scroll")]),t._v("的父元素。")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<div class=\"demo-image__lazy\">\n  <tis-image v-for=\"url in urls\" :key=\"url\" :src=\"url\" lazy></tis-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),t._m(5),e("demo-block",[e("div",[e("p",[t._v("可通过 "),e("code",[t._v("previewSrcList")]),t._v(" 开启预览大图的功能。")])]),e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="demo-image__preview">\n  <tis-image \n    style="width: 100px; height: 100px"\n    :src="url" \n    :preview-src-list="srcList">\n  </tis-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),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"image-tu-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#image-tu-pian"}},[this._v("¶")]),this._v(" Image 图片")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhan-wei-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhan-wei-nei-rong"}},[this._v("¶")]),this._v(" 占位内容")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jia-zai-shi-bai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-shi-bai"}},[this._v("¶")]),this._v(" 加载失败")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"lan-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lan-jia-zai"}},[this._v("¶")]),this._v(" 懒加载")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"da-tu-yu-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#da-tu-yu-lan"}},[this._v("¶")]),this._v(" 大图预览")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("src")]),e("td",[t._v("图片源，同原生")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("fit")]),e("td",[t._v("确定图片如何适应容器框，同原生 "),e("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"}},[t._v("object-fit")])]),e("td",[t._v("string")]),e("td",[t._v("fill / contain / cover / none / scale-down")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("alt")]),e("td",[t._v("原生 alt")]),e("td",[t._v("string")]),e("td",[t._v("-")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("referrer-policy")]),e("td",[t._v("原生 referrerPolicy")]),e("td",[t._v("string")]),e("td",[t._v("-")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("lazy")]),e("td",[t._v("是否开启懒加载")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("scroll-container")]),e("td",[t._v("开启懒加载后，监听 scroll 事件的容器")]),e("td",[t._v("string / HTMLElement")]),e("td",[t._v("—")]),e("td",[t._v("最近一个 overflow 值为 auto 或 scroll 的父元素")])]),e("tr",[e("td",[t._v("preview-src-list")]),e("td",[t._v("开启图片预览功能")]),e("td",[t._v("Array")]),e("td",[t._v("—")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("z-index")]),e("td",[t._v("设置图片预览的 z-index")]),e("td",[t._v("Number")]),e("td",[t._v("—")]),e("td",[t._v("2000")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("load")]),e("td",[t._v("图片加载成功触发")]),e("td",[t._v("(e: Event)")])]),e("tr",[e("td",[t._v("error")]),e("td",[t._v("图片加载失败触发")]),e("td",[t._v("(e: Error)")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("placeholder")]),e("td",[t._v("图片未加载的占位内容")])]),e("tr",[e("td",[t._v("error")]),e("td",[t._v("加载失败的内容")])])])])}],!1,null,null,null);e.default=a.exports},1093:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("i",{staticClass:"el-icon-edit"}),t._v(" "),e("i",{staticClass:"el-icon-share"}),t._v(" "),e("i",{staticClass:"el-icon-delete"}),t._v(" "),e("tis-button",{attrs:{type:"primary",icon:"el-icon-search"}},[t._v("搜索")])],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.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),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('<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<tis-button type="primary" icon="el-icon-search">搜索</tis-button>\n\n')])])])],2),e._m(3),n("ul",{staticClass:"icon-list"},e._l(e.$icon,function(t){return n("li",{key:t},[n("span",[n("i",{class:"el-icon-"+t}),n("span",{staticClass:"icon-name"},[e._v(e._s("el-icon-"+t))])])])}),0)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"icon-tu-biao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icon-tu-biao"}},[this._v("¶")]),this._v(" Icon 图标")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shi-yong-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-fang-fa"}},[this._v("¶")]),this._v(" 使用方法")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("直接通过设置类名为 "),e("code",[t._v("el-icon-iconName")]),t._v(" 来使用即可。例如：")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"gong-neng-xing-tu-biao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gong-neng-xing-tu-biao"}},[this._v("¶")]),this._v(" 功能型图标")])}],!1,null,null,null);e.default=a.exports},1094:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell-group",[t("m-field",{attrs:{label:"文本",placeholder:"请输入用户名"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)],1)},staticRenderFns:[]},{data:function(){return{value:""}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{label:"文本"},model:{value:e.text,callback:function(t){e.text=t},expression:"text"}}),e._v(" "),t("m-field",{attrs:{type:"tel",label:"手机号"},model:{value:e.tel,callback:function(t){e.tel=t},expression:"tel"}}),e._v(" "),t("m-field",{attrs:{type:"digit",label:"整数"},model:{value:e.digit,callback:function(t){e.digit=t},expression:"digit"}}),e._v(" "),t("m-field",{attrs:{type:"number",label:"数字"},model:{value:e.number,callback:function(t){e.number=t},expression:"number"}}),e._v(" "),t("m-field",{attrs:{type:"password",label:"密码"},model:{value:e.password,callback:function(t){e.password=t},expression:"password"}})],1)},staticRenderFns:[]},{data:function(){return{tel:"",text:"",digit:"",number:"",password:""}}}),"element-demo2":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-cell-group",[t("m-field",{attrs:{label:"文本",value:"输入框只读",readonly:""}}),this._v(" "),t("m-field",{attrs:{label:"文本",value:"输入框已禁用",disabled:""}})],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell-group",[t("m-field",{attrs:{label:"文本","left-icon":"smile-o","right-icon":"warning-o",placeholder:"显示图标"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}}),e._v(" "),t("m-field",{attrs:{clearable:"",label:"文本","left-icon":"music-o",placeholder:"显示清除图标"},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1)],1)},staticRenderFns:[]},{data:function(){return{value1:"",value2:"123"}}}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell-group",[t("m-field",{attrs:{error:"",required:"",label:"用户名",placeholder:"请输入用户名"},model:{value:e.username,callback:function(t){e.username=t},expression:"username"}}),e._v(" "),t("m-field",{attrs:{required:"",label:"手机号",placeholder:"请输入手机号","error-message":"手机号格式错误"},model:{value:e.phone,callback:function(t){e.phone=t},expression:"phone"}})],1)],1)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{center:"",clearable:"",label:"短信验证码",placeholder:"请输入短信验证码"},model:{value:e.sms,callback:function(t){e.sms=t},expression:"sms"}},[[t("m-button",{attrs:{size:"small",type:"primary"}},[e._v("发送验证码")])]],2)],1)},staticRenderFns:[]},{}),"element-demo6":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{label:"文本",formatter:e.formatter,placeholder:"在输入时执行格式化"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}}),e._v(" "),t("m-field",{attrs:{label:"文本",formatter:e.formatter,"format-trigger":"onBlur",placeholder:"在失焦时执行格式化"},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1)},staticRenderFns:[]},{data:function(){return{value1:"",value2:""}},methods:{formatter:function(t){return t.replace(/\d/g,"")}}}),"element-demo7":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{rows:"1",autosize:"",label:"留言",type:"textarea",placeholder:"请输入留言"},model:{value:e.message,callback:function(t){e.message=t},expression:"message"}})],1)},staticRenderFns:[]},{}),"element-demo8":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{rows:"2",autosize:"",label:"留言",type:"textarea",maxlength:"50",placeholder:"请输入留言","show-word-limit":""},model:{value:e.message,callback:function(t){e.message=t},expression:"message"}})],1)},staticRenderFns:[]},{}),"element-demo9":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{label:"文本",placeholder:"输入框内容右对齐","input-align":"right"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("p",[t._v("表单中的输入框组件。")]),t._m(2),t._m(3),t._m(4),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('\x3c!-- Field 是基于 Cell 实现的，可以使用 CellGroup 作为容器来提供外边框。 --\x3e\n<m-cell-group>\n  <m-field v-model="value" label="文本" placeholder="请输入用户名" />\n</m-cell-group>\n\n<script>\nexport default {\n  data() {\n    return {\n      value: \'\',\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(5),t._m(6),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('\x3c!-- 输入任意文本 --\x3e\n<m-field v-model="text" label="文本" />\n\x3c!-- 输入手机号，调起手机号键盘 --\x3e\n<m-field v-model="tel" type="tel" label="手机号" />\n\x3c!-- 允许输入正整数，调起纯数字键盘 --\x3e\n<m-field v-model="digit" type="digit" label="整数" />\n\x3c!-- 允许输入数字，调起带符号的纯数字键盘 --\x3e\n<m-field v-model="number" type="number" label="数字" />\n\x3c!-- 输入密码 --\x3e\n<m-field v-model="password" type="password" label="密码" />\n\n<script>\nexport default {\n  data() {\n    return {\n      tel: \'\',\n      text: \'\',\n      digit: \'\',\n      number: \'\',\n      password: \'\',\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(7),t._m(8),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell-group>\n  <m-field label="文本" value="输入框只读" readonly />\n  <m-field label="文本" value="输入框已禁用" disabled />\n</m-cell-group>\n')])])])],2),t._m(9),t._m(10),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell-group>\n  <m-field\n    v-model="value1"\n    label="文本"\n    left-icon="smile-o"\n    right-icon="warning-o"\n    placeholder="显示图标"\n  />\n  <m-field\n    v-model="value2"\n    clearable\n    label="文本"\n    left-icon="music-o"\n    placeholder="显示清除图标"\n  />\n</m-cell-group>\n\n<script>\nexport default {\n  data() {\n    return {\n      value1: \'\',\n      value2: \'123\',\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(11),t._m(12),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell-group>\n  <m-field\n    v-model="username"\n    error\n    required\n    label="用户名"\n    placeholder="请输入用户名"\n  />\n  <m-field\n    v-model="phone"\n    required\n    label="手机号"\n    placeholder="请输入手机号"\n    error-message="手机号格式错误"\n  />\n</m-cell-group>\n')])])])],2),t._m(13),e("p",[t._v("通过 button 插槽可以在输入框尾部插入按钮。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field\n  v-model="sms"\n  center\n  clearable\n  label="短信验证码"\n  placeholder="请输入短信验证码"\n>\n  <template #button>\n    <m-button size="small" type="primary">发送验证码</m-button>\n  </template>\n</m-field>\n')])])])],2),t._m(14),t._m(15),e("demo-block",[e("template",{slot:"source"},[e("element-demo6")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field\n  v-model="value1"\n  label="文本"\n  :formatter="formatter"\n  placeholder="在输入时执行格式化"\n/>\n<m-field\n  v-model="value2"\n  label="文本"\n  :formatter="formatter"\n  format-trigger="onBlur"\n  placeholder="在失焦时执行格式化"\n/>\n\n<script>\nexport default {\n  data() {\n    return {\n      value1: \'\',\n      value2: \'\',\n    };\n  },\n  methods: {\n    formatter(value) {\n      // 过滤输入的数字\n      return value.replace(/\\d/g, \'\');\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(16),t._m(17),e("demo-block",[e("template",{slot:"source"},[e("element-demo7")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field\n  v-model="message"\n  rows="1"\n  autosize\n  label="留言"\n  type="textarea"\n  placeholder="请输入留言"\n/>\n')])])])],2),t._m(18),t._m(19),e("demo-block",[e("template",{slot:"source"},[e("element-demo8")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field\n  v-model="message"\n  rows="2"\n  autosize\n  label="留言"\n  type="textarea"\n  maxlength="50"\n  placeholder="请输入留言"\n  show-word-limit\n/>\n')])])])],2),t._m(20),t._m(21),e("demo-block",[e("template",{slot:"source"},[e("element-demo9")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field\n  v-model="value"\n  label="文本"\n  placeholder="输入框内容右对齐"\n  input-align="right"\n/>\n')])])])],2),t._m(22),t._m(23),t._m(24),t._m(25),e("p",[t._v("除下列事件外，Field 默认支持 Input 标签所有的原生事件")]),t._m(26),t._m(27),t._m(28),t._m(29),t._m(30),t._m(31),t._m(32),t._m(33),t._m(34),t._m(35),t._m(36),t._m(37),t._m(38),t._m(39)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"field-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#field-shu-ru-kuang"}},[this._v("¶")]),this._v(" Field 输入框")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dai-ma-yan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ma-yan-shi"}},[this._v("¶")]),this._v(" 代码演示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("可以通过 "),e("code",[t._v("v-model")]),t._v(" 双向绑定输入框的值，通过 "),e("code",[t._v("placeholder")]),t._v(" 设置占位提示文字。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-lei-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-lei-xing"}},[this._v("¶")]),this._v(" 自定义类型")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("根据 "),e("code",[t._v("type")]),t._v(" 属性定义不同类型的输入框，默认值为 "),e("code",[t._v("text")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jin-yong-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-shu-ru-kuang"}},[this._v("¶")]),this._v(" 禁用输入框")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("readonly")]),t._v(" 将输入框设置为只读状态，通过 "),e("code",[t._v("disabled")]),t._v(" 将输入框设置为禁用状态。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xian-shi-tu-biao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-shi-tu-biao"}},[this._v("¶")]),this._v(" 显示图标")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("left-icon")]),t._v(" 和 "),e("code",[t._v("right-icon")]),t._v(" 配置输入框两侧的图标，通过设置 "),e("code",[t._v("clearable")]),t._v(" 在输入过程中展示清除图标。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cuo-wu-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cuo-wu-ti-shi"}},[this._v("¶")]),this._v(" 错误提示")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("设置 "),e("code",[t._v("required")]),t._v(" 属性表示这是一个必填项，可以配合 "),e("code",[t._v("error")]),t._v(" 或 "),e("code",[t._v("error-message")]),t._v(" 属性显示对应的错误提示。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cha-ru-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cha-ru-an-niu"}},[this._v("¶")]),this._v(" 插入按钮")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ge-shi-hua-shu-ru-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ge-shi-hua-shu-ru-nei-rong"}},[this._v("¶")]),this._v(" 格式化输入内容")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("formatter")]),t._v(" 属性可以对输入的内容进行格式化，通过 "),e("code",[t._v("format-trigger")]),t._v(" 属性可以指定执行格式化的时机，默认在输入时进行格式化。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"gao-du-zi-gua-ying"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gao-du-zi-gua-ying"}},[this._v("¶")]),this._v(" 高度自适应")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("对于 textarea，可以通过 "),e("code",[t._v("autosize")]),t._v(" 属性设置高度自适应。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xian-shi-zi-shu-tong-ji"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-shi-zi-shu-tong-ji"}},[this._v("¶")]),this._v(" 显示字数统计")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("设置 "),e("code",[t._v("maxlength")]),t._v(" 和 "),e("code",[t._v("show-word-limit")]),t._v(" 属性后会在底部显示字数统计。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shu-ru-kuang-nei-rong-dui-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-ru-kuang-nei-rong-dui-qi"}},[this._v("¶")]),this._v(" 输入框内容对齐")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("input-align")]),t._v(" 属性可以设置输入框内容的对齐方式，可选值为 "),e("code",[t._v("center")]),t._v("、"),e("code",[t._v("right")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("v-model (value)")]),e("td",[t._v("当前输入的值")]),e("td",[e("em",[t._v("number | string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("输入框左侧文本")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("name "),e("code",[t._v("v2.5.0")])]),e("td",[t._v("名称，提交表单的标识符")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("type")]),e("td",[t._v("输入框类型, 可选值为 "),e("code",[t._v("tel")]),e("code",[t._v("digit")]),e("br"),e("code",[t._v("number")]),e("code",[t._v("textarea")]),e("code",[t._v("password")]),t._v(" 等")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("text")])])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("大小，可选值为 "),e("code",[t._v("large")])]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("maxlength")]),e("td",[t._v("输入的最大字符数")]),e("td",[e("em",[t._v("number | string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("placeholder")]),e("td",[t._v("输入框占位提示文字")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("border")]),e("td",[t._v("是否显示内边框")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用输入框")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("readonly")]),e("td",[t._v("是否只读")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("colon "),e("code",[t._v("v2.7.2")])]),e("td",[t._v("是否在 label 后面添加冒号")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("required")]),e("td",[t._v("是否显示表单必填星号")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("center")]),e("td",[t._v("是否使内容垂直居中")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("clearable")]),e("td",[t._v("是否启用清除图标，点击清除图标后会清空输入框")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("clear-trigger "),e("code",[t._v("v2.9.1")])]),e("td",[t._v("显示清除图标的时机，"),e("code",[t._v("always")]),t._v(" 表示输入框不为空时展示，"),e("br"),e("code",[t._v("focus")]),t._v(" 表示输入框聚焦且不为空时展示")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("focus")])])]),e("tr",[e("td",[t._v("clickable")]),e("td",[t._v("是否开启点击反馈")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("is-link")]),e("td",[t._v("是否展示右侧箭头并开启点击反馈")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("autofocus")]),e("td",[t._v("是否自动聚焦，iOS 系统不支持该属性")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("show-word-limit")]),e("td",[t._v("是否显示字数统计，需要设置"),e("code",[t._v("maxlength")]),t._v("属性")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("error")]),e("td",[t._v("是否将输入内容标红")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("error-message")]),e("td",[t._v("底部错误提示文案，为空时不展示")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("formatter "),e("code",[t._v("v2.4.2")])]),e("td",[t._v("输入内容格式化函数")]),e("td",[e("em",[t._v("Function")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("format-trigger "),e("code",[t._v("v2.8.7")])]),e("td",[t._v("格式化函数触发的时机，可选值为 "),e("code",[t._v("onBlur")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("onChange")])])]),e("tr",[e("td",[t._v("arrow-direction")]),e("td",[t._v("箭头方向，可选值为 "),e("code",[t._v("left")]),e("code",[t._v("up")]),e("code",[t._v("down")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("right")])])]),e("tr",[e("td",[t._v("label-class")]),e("td",[t._v("左侧文本额外类名")]),e("td",[e("em",[t._v("any")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("label-width")]),e("td",[t._v("左侧文本宽度，默认单位为"),e("code",[t._v("px")])]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("6.2em")])])]),e("tr",[e("td",[t._v("label-align")]),e("td",[t._v("左侧文本对齐方式，可选值为 "),e("code",[t._v("center")]),e("code",[t._v("right")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("left")])])]),e("tr",[e("td",[t._v("input-align")]),e("td",[t._v("输入框对齐方式，可选值为 "),e("code",[t._v("center")]),e("code",[t._v("right")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("left")])])]),e("tr",[e("td",[t._v("error-message-align")]),e("td",[t._v("错误提示文案对齐方式，可选值为 "),e("code",[t._v("center")]),e("code",[t._v("right")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("left")])])]),e("tr",[e("td",[t._v("autosize")]),e("td",[t._v("是否自适应内容高度，只对 textarea 有效，"),e("br"),t._v("可传入对象,如 { maxHeight: 100, minHeight: 50 }，"),e("br"),t._v("单位为"),e("code",[t._v("px")])]),e("td",[e("em",[t._v("boolean | object")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("left-icon")]),e("td",[t._v("左侧"),e("a",{attrs:{href:"#/zh-CN/icon"}},[t._v("图标名称")]),t._v("或图片链接")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("right-icon")]),e("td",[t._v("右侧"),e("a",{attrs:{href:"#/zh-CN/icon"}},[t._v("图标名称")]),t._v("或图片链接")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("icon-prefix "),e("code",[t._v("v2.5.3")])]),e("td",[t._v("图标类名前缀，同 Icon 组件的 "),e("a",{attrs:{href:"#/zh-CN/icon#props"}},[t._v("class-prefix 属性")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("m-icon")])])]),e("tr",[e("td",[t._v("rules "),e("code",[t._v("v2.5.0")])]),e("td",[t._v("表单校验规则，详见 "),e("a",{attrs:{href:"#/zh-CN/form#rule-shu-ju-jie-gou"}},[t._v("Form 组件")])]),e("td",[e("em",[t._v("Rule[]")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("input")]),e("td",[t._v("输入框内容变化时触发")]),e("td",[e("em",[t._v("value: string (当前输入的值)")])])]),e("tr",[e("td",[t._v("focus")]),e("td",[t._v("输入框获得焦点时触发")]),e("td",[e("em",[t._v("event: Event")])])]),e("tr",[e("td",[t._v("blur")]),e("td",[t._v("输入框失去焦点时触发")]),e("td",[e("em",[t._v("event: Event")])])]),e("tr",[e("td",[t._v("clear")]),e("td",[t._v("点击清除按钮时触发")]),e("td",[e("em",[t._v("event: Event")])])]),e("tr",[e("td",[t._v("click")]),e("td",[t._v("点击 Field 时触发")]),e("td",[e("em",[t._v("event: Event")])])]),e("tr",[e("td",[t._v("click-input "),e("code",[t._v("v2.8.1")])]),e("td",[t._v("点击输入区域时触发")]),e("td",[e("em",[t._v("event: Event")])])]),e("tr",[e("td",[t._v("click-left-icon")]),e("td",[t._v("点击左侧图标时触发")]),e("td",[e("em",[t._v("event: Event")])])]),e("tr",[e("td",[t._v("click-right-icon")]),e("td",[t._v("点击右侧图标时触发")]),e("td",[e("em",[t._v("event: Event")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa"}},[this._v("¶")]),this._v(" 方法")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 ref 可以获取到 Field 实例并调用实例方法，详见"),e("a",{attrs:{href:"#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa"}},[t._v("组件实例方法")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")]),e("th",[t._v("返回值")])])]),e("tbody",[e("tr",[e("td",[t._v("focus")]),e("td",[t._v("获取输入框焦点")]),e("td",[t._v("-")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("blur")]),e("td",[t._v("取消输入框焦点")]),e("td",[t._v("-")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("label")]),e("td",[t._v("自定义输入框 label 标签")])]),e("tr",[e("td",[t._v("input")]),e("td",[t._v("自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效")])]),e("tr",[e("td",[t._v("left-icon")]),e("td",[t._v("自定义输入框头部图标")])]),e("tr",[e("td",[t._v("right-icon")]),e("td",[t._v("自定义输入框尾部图标")])]),e("tr",[e("td",[t._v("button")]),e("td",[t._v("自定义输入框尾部按钮")])]),e("tr",[e("td",[t._v("extra "),e("code",[t._v("v2.8.2")])]),e("td",[t._v("自定义输入框最右侧的额外内容")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),e("a",{attrs:{href:"#/zh-CN/theme"}},[t._v("主题定制")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@field-label-width")]),e("td",[e("code",[t._v("6.2em")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-label-color")]),e("td",[e("code",[t._v("@gray-7")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-label-margin-right")]),e("td",[e("code",[t._v("@padding-sm")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-input-text-color")]),e("td",[e("code",[t._v("@text-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-input-error-text-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-input-disabled-text-color")]),e("td",[e("code",[t._v("@gray-5")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-placeholder-text-color")]),e("td",[e("code",[t._v("@gray-5")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-icon-size")]),e("td",[e("code",[t._v("16px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-clear-icon-size")]),e("td",[e("code",[t._v("16px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-clear-icon-color")]),e("td",[e("code",[t._v("@gray-5")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-right-icon-color")]),e("td",[e("code",[t._v("@gray-6")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-error-message-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-error-message-text-color")]),e("td",[e("code",[t._v("12px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-text-area-min-height")]),e("td",[e("code",[t._v("60px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-word-limit-color")]),e("td",[e("code",[t._v("@gray-7")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-word-limit-font-size")]),e("td",[e("code",[t._v("@font-size-sm")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-word-limit-line-height")]),e("td",[e("code",[t._v("16px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@field-disabled-text-color")]),e("td",[e("code",[t._v("@gray-5")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"chang-jian-wen-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-wen-ti"}},[this._v("¶")]),this._v(" 常见问题")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"she-zhi-type-wei-number-hou-wei-shi-me-input-biao-qian-de-lei-xing-reng-wei-text"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-type-wei-number-hou-wei-shi-me-input-biao-qian-de-lei-xing-reng-wei-text"}},[this._v("¶")]),this._v(" 设置 type 为 number 后，为什么 input 标签的类型仍为 text?")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("HTML 原生的 "),e("code",[t._v('type="number"')]),t._v(" 属性在 iOS 和 Android 系统上都存在一定问题，比如 maxlength 属性不生效、无法获取到完整的输入内容等。因此设置 type 为 "),e("code",[t._v("number")]),t._v(" 时，Field 不会使用原生的 "),e("code",[t._v('type="number"')]),t._v(" 属性，而是用现代浏览器支持的 "),e("a",{attrs:{href:"https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/inputmode"}},[t._v("inputmode 属性")]),t._v("来控制输入键盘的类型。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zai-zhuo-mian-duan-dian-ji-qing-chu-an-niu-wu-xiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zai-zhuo-mian-duan-dian-ji-qing-chu-an-niu-wu-xiao"}},[this._v("¶")]),this._v(" 在桌面端点击清除按钮无效？")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("清除按钮监听是的移动端 Touch 事件，参见"),e("a",{attrs:{href:"#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei"}},[t._v("桌面端适配")]),t._v("。")])}],!1,null,null,null);e.default=a.exports},1095:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-form",{ref:"form",attrs:{model:e.form,"label-width":"80px"}},[t("tis-form-item",{attrs:{label:"活动名称"}},[t("tis-input",{model:{value:e.form.name,callback:function(t){e.$set(e.form,"name",t)},expression:"form.name"}})],1),e._v(" "),t("tis-form-item",{attrs:{label:"活动区域"}},[t("tis-select",{attrs:{placeholder:"请选择活动区域"},model:{value:e.form.region,callback:function(t){e.$set(e.form,"region",t)},expression:"form.region"}},[t("tis-option",{attrs:{label:"区域一",value:"shanghai"}}),e._v(" "),t("tis-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),e._v(" "),t("tis-form-item",{attrs:{label:"活动时间"}},[t("tis-col",{attrs:{span:11}},[t("tis-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:e.form.date1,callback:function(t){e.$set(e.form,"date1",t)},expression:"form.date1"}})],1),e._v(" "),t("tis-col",{staticClass:"line",attrs:{span:2}},[e._v("-")]),e._v(" "),t("tis-col",{attrs:{span:11}},[t("tis-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"选择时间"},model:{value:e.form.date2,callback:function(t){e.$set(e.form,"date2",t)},expression:"form.date2"}})],1)],1),e._v(" "),t("tis-form-item",{attrs:{label:"即时配送"}},[t("tis-switch",{model:{value:e.form.delivery,callback:function(t){e.$set(e.form,"delivery",t)},expression:"form.delivery"}})],1),e._v(" "),t("tis-form-item",{attrs:{label:"活动性质"}},[t("tis-checkbox-group",{model:{value:e.form.type,callback:function(t){e.$set(e.form,"type",t)},expression:"form.type"}},[t("tis-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),e._v(" "),t("tis-checkbox",{attrs:{label:"地推活动",name:"type"}}),e._v(" "),t("tis-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),e._v(" "),t("tis-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),e._v(" "),t("tis-form-item",{attrs:{label:"特殊资源"}},[t("tis-radio-group",{model:{value:e.form.resource,callback:function(t){e.$set(e.form,"resource",t)},expression:"form.resource"}},[t("tis-radio",{attrs:{label:"线上品牌商赞助"}}),e._v(" "),t("tis-radio",{attrs:{label:"线下场地免费"}})],1)],1),e._v(" "),t("tis-form-item",{attrs:{label:"活动形式"}},[t("tis-input",{attrs:{type:"textarea"},model:{value:e.form.desc,callback:function(t){e.$set(e.form,"desc",t)},expression:"form.desc"}})],1),e._v(" "),t("tis-form-item",[t("tis-button",{attrs:{type:"primary"},on:{click:e.onSubmit}},[e._v("立即创建")]),e._v(" "),t("tis-button",[e._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 e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:e.formInline}},[t("tis-form-item",{attrs:{label:"审批人"}},[t("tis-input",{attrs:{placeholder:"审批人"},model:{value:e.formInline.user,callback:function(t){e.$set(e.formInline,"user",t)},expression:"formInline.user"}})],1),e._v(" "),t("tis-form-item",{attrs:{label:"活动区域"}},[t("tis-select",{attrs:{placeholder:"活动区域"},model:{value:e.formInline.region,callback:function(t){e.$set(e.formInline,"region",t)},expression:"formInline.region"}},[t("tis-option",{attrs:{label:"区域一",value:"shanghai"}}),e._v(" "),t("tis-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),e._v(" "),t("tis-form-item",[t("tis-button",{attrs:{type:"primary"},on:{click:e.onSubmit}},[e._v("查询")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-radio-group",{attrs:{size:"small"},model:{value:e.labelPosition,callback:function(t){e.labelPosition=t},expression:"labelPosition"}},[t("tis-radio-button",{attrs:{label:"left"}},[e._v("左对齐")]),e._v(" "),t("tis-radio-button",{attrs:{label:"right"}},[e._v("右对齐")]),e._v(" "),t("tis-radio-button",{attrs:{label:"top"}},[e._v("顶部对齐")])],1),e._v(" "),t("div",{staticStyle:{margin:"20px"}}),e._v(" "),t("tis-form",{attrs:{"label-position":e.labelPosition,"label-width":"80px",model:e.formLabelAlign}},[t("tis-form-item",{attrs:{label:"名称"}},[t("tis-input",{model:{value:e.formLabelAlign.name,callback:function(t){e.$set(e.formLabelAlign,"name",t)},expression:"formLabelAlign.name"}})],1),e._v(" "),t("tis-form-item",{attrs:{label:"活动区域"}},[t("tis-input",{model:{value:e.formLabelAlign.region,callback:function(t){e.$set(e.formLabelAlign,"region",t)},expression:"formLabelAlign.region"}})],1),e._v(" "),t("tis-form-item",{attrs:{label:"活动形式"}},[t("tis-input",{model:{value:e.formLabelAlign.type,callback:function(t){e.$set(e.formLabelAlign,"type",t)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:e.ruleForm,rules:e.rules,"label-width":"100px"}},[t("tis-form-item",{attrs:{label:"活动名称",prop:"name"}},[t("tis-input",{model:{value:e.ruleForm.name,callback:function(t){e.$set(e.ruleForm,"name",t)},expression:"ruleForm.name"}})],1),e._v(" "),t("tis-form-item",{attrs:{label:"活动区域",prop:"region"}},[t("tis-select",{attrs:{placeholder:"请选择活动区域"},model:{value:e.ruleForm.region,callback:function(t){e.$set(e.ruleForm,"region",t)},expression:"ruleForm.region"}},[t("tis-option",{attrs:{label:"区域一",value:"shanghai"}}),e._v(" "),t("tis-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),e._v(" "),t("tis-form-item",{attrs:{label:"活动时间",required:""}},[t("tis-col",{attrs:{span:11}},[t("tis-form-item",{attrs:{prop:"date1"}},[t("tis-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:e.ruleForm.date1,callback:function(t){e.$set(e.ruleForm,"date1",t)},expression:"ruleForm.date1"}})],1)],1),e._v(" "),t("tis-col",{staticClass:"line",attrs:{span:2}},[e._v("-")]),e._v(" "),t("tis-col",{attrs:{span:11}},[t("tis-form-item",{attrs:{prop:"date2"}},[t("tis-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"选择时间"},model:{value:e.ruleForm.date2,callback:function(t){e.$set(e.ruleForm,"date2",t)},expression:"ruleForm.date2"}})],1)],1)],1),e._v(" "),t("tis-form-item",{attrs:{label:"即时配送",prop:"delivery"}},[t("tis-switch",{model:{value:e.ruleForm.delivery,callback:function(t){e.$set(e.ruleForm,"delivery",t)},expression:"ruleForm.delivery"}})],1),e._v(" "),t("tis-form-item",{attrs:{label:"活动性质",prop:"type"}},[t("tis-checkbox-group",{model:{value:e.ruleForm.type,callback:function(t){e.$set(e.ruleForm,"type",t)},expression:"ruleForm.type"}},[t("tis-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),e._v(" "),t("tis-checkbox",{attrs:{label:"地推活动",name:"type"}}),e._v(" "),t("tis-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),e._v(" "),t("tis-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),e._v(" "),t("tis-form-item",{attrs:{label:"特殊资源",prop:"resource"}},[t("tis-radio-group",{model:{value:e.ruleForm.resource,callback:function(t){e.$set(e.ruleForm,"resource",t)},expression:"ruleForm.resource"}},[t("tis-radio",{attrs:{label:"线上品牌商赞助"}}),e._v(" "),t("tis-radio",{attrs:{label:"线下场地免费"}})],1)],1),e._v(" "),t("tis-form-item",{attrs:{label:"活动形式",prop:"desc"}},[t("tis-input",{attrs:{type:"textarea"},model:{value:e.ruleForm.desc,callback:function(t){e.$set(e.ruleForm,"desc",t)},expression:"ruleForm.desc"}})],1),e._v(" "),t("tis-form-item",[t("tis-button",{attrs:{type:"primary"},on:{click:function(t){e.submitForm("ruleForm")}}},[e._v("立即创建")]),e._v(" "),t("tis-button",{on:{click:function(t){e.resetForm("ruleForm")}}},[e._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(t){this.$refs[t].validate(function(t){return t?void alert("submit!"):(console.log("error submit!!"),!1)})},resetForm:function(t){this.$refs[t].resetFields()}}}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:e.ruleForm,"status-icon":"",rules:e.rules,"label-width":"100px"}},[t("tis-form-item",{attrs:{label:"密码",prop:"pass"}},[t("tis-input",{attrs:{type:"password",autocomplete:"off"},model:{value:e.ruleForm.pass,callback:function(t){e.$set(e.ruleForm,"pass",t)},expression:"ruleForm.pass"}})],1),e._v(" "),t("tis-form-item",{attrs:{label:"确认密码",prop:"checkPass"}},[t("tis-input",{attrs:{type:"password",autocomplete:"off"},model:{value:e.ruleForm.checkPass,callback:function(t){e.$set(e.ruleForm,"checkPass",t)},expression:"ruleForm.checkPass"}})],1),e._v(" "),t("tis-form-item",{attrs:{label:"年龄",prop:"age"}},[t("tis-input",{model:{value:e.ruleForm.age,callback:function(t){e.$set(e.ruleForm,"age",e._n(t))},expression:"ruleForm.age"}})],1),e._v(" "),t("tis-form-item",[t("tis-button",{attrs:{type:"primary"},on:{click:function(t){e.submitForm("ruleForm")}}},[e._v("提交")]),e._v(" "),t("tis-button",{on:{click:function(t){e.resetForm("ruleForm")}}},[e._v("重置")])],1)],1)],1)},staticRenderFns:[]},{data:function(){var a=this;return{ruleForm:{pass:"",checkPass:"",age:""},rules:{pass:[{validator:function(t,e,n){""===e?n(new Error("请输入密码")):(""!==a.ruleForm.checkPass&&a.$refs.ruleForm.validateField("checkPass"),n())},trigger:"blur"}],checkPass:[{validator:function(t,e,n){""===e?n(new Error("请再次输入密码")):e!==a.ruleForm.pass?n(new Error("两次输入密码不一致!")):n()},trigger:"blur"}],age:[{validator:function(t,e,n){if(!e)return n(new Error("年龄不能为空"));setTimeout(function(){Number.isInteger(e)?e<18?n(new Error("必须年满18岁")):n():n(new Error("请输入数字值"))},1e3)},trigger:"blur"}]}}},methods:{submitForm:function(t){this.$refs[t].validate(function(t){return t?void alert("submit!"):(console.log("error submit!!"),!1)})},resetForm:function(t){this.$refs[t].resetFields()}}}),"element-demo5":a({render:function(){var n=this,t=n.$createElement,a=n._self._c||t;return a("div",[a("tis-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:n.dynamicValidateForm,"label-width":"100px"}},[a("tis-form-item",{attrs:{prop:"email",label:"邮箱",rules:[{required:!0,message:"请输入邮箱地址",trigger:"blur"},{type:"email",message:"请输入正确的邮箱地址",trigger:["blur","change"]}]}},[a("tis-input",{model:{value:n.dynamicValidateForm.email,callback:function(t){n.$set(n.dynamicValidateForm,"email",t)},expression:"dynamicValidateForm.email"}})],1),n._v(" "),n._l(n.dynamicValidateForm.domains,function(e,t){return a("tis-form-item",{key:e.key,attrs:{label:"域名"+t,prop:"domains."+t+".value",rules:{required:!0,message:"域名不能为空",trigger:"blur"}}},[a("tis-input",{model:{value:e.value,callback:function(t){n.$set(e,"value",t)},expression:"domain.value"}}),a("tis-button",{on:{click:function(t){t.preventDefault(),n.removeDomain(e)}}},[n._v("删除")])],1)}),n._v(" "),a("tis-form-item",[a("tis-button",{attrs:{type:"primary"},on:{click:function(t){n.submitForm("dynamicValidateForm")}}},[n._v("提交")]),n._v(" "),a("tis-button",{on:{click:n.addDomain}},[n._v("新增域名")]),n._v(" "),a("tis-button",{on:{click:function(t){n.resetForm("dynamicValidateForm")}}},[n._v("重置")])],1)],2)],1)},staticRenderFns:[]},{data:function(){return{dynamicValidateForm:{domains:[{value:""}],email:""}}},methods:{submitForm:function(t){this.$refs[t].validate(function(t){return t?void alert("submit!"):(console.log("error submit!!"),!1)})},resetForm:function(t){this.$refs[t].resetFields()},removeDomain:function(t){t=this.dynamicValidateForm.domains.indexOf(t);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({value:"",key:Date.now()})}}}),"element-demo6":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:e.numberValidateForm,"label-width":"100px"}},[t("tis-form-item",{attrs:{label:"年龄",prop:"age",rules:[{required:!0,message:"年龄不能为空"},{type:"number",message:"年龄必须为数字值"}]}},[t("tis-input",{attrs:{type:"age",autocomplete:"off"},model:{value:e.numberValidateForm.age,callback:function(t){e.$set(e.numberValidateForm,"age",e._n(t))},expression:"numberValidateForm.age"}})],1),e._v(" "),t("tis-form-item",[t("tis-button",{attrs:{type:"primary"},on:{click:function(t){e.submitForm("numberValidateForm")}}},[e._v("提交")]),e._v(" "),t("tis-button",{on:{click:function(t){e.resetForm("numberValidateForm")}}},[e._v("重置")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{numberValidateForm:{age:""}}},methods:{submitForm:function(t){this.$refs[t].validate(function(t){return t?void alert("submit!"):(console.log("error submit!!"),!1)})},resetForm:function(t){this.$refs[t].resetFields()}}}),"element-demo7":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-form",{ref:"form",attrs:{model:e.sizeForm,"label-width":"80px",size:"mini"}},[t("tis-form-item",{attrs:{label:"活动名称"}},[t("tis-input",{model:{value:e.sizeForm.name,callback:function(t){e.$set(e.sizeForm,"name",t)},expression:"sizeForm.name"}})],1),e._v(" "),t("tis-form-item",{attrs:{label:"活动区域"}},[t("tis-select",{attrs:{placeholder:"请选择活动区域"},model:{value:e.sizeForm.region,callback:function(t){e.$set(e.sizeForm,"region",t)},expression:"sizeForm.region"}},[t("tis-option",{attrs:{label:"区域一",value:"shanghai"}}),e._v(" "),t("tis-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),e._v(" "),t("tis-form-item",{attrs:{label:"活动时间"}},[t("tis-col",{attrs:{span:11}},[t("tis-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:e.sizeForm.date1,callback:function(t){e.$set(e.sizeForm,"date1",t)},expression:"sizeForm.date1"}})],1),e._v(" "),t("tis-col",{staticClass:"line",attrs:{span:2}},[e._v("-")]),e._v(" "),t("tis-col",{attrs:{span:11}},[t("tis-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"选择时间"},model:{value:e.sizeForm.date2,callback:function(t){e.$set(e.sizeForm,"date2",t)},expression:"sizeForm.date2"}})],1)],1),e._v(" "),t("tis-form-item",{attrs:{label:"活动性质"}},[t("tis-checkbox-group",{model:{value:e.sizeForm.type,callback:function(t){e.$set(e.sizeForm,"type",t)},expression:"sizeForm.type"}},[t("tis-checkbox-button",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),e._v(" "),t("tis-checkbox-button",{attrs:{label:"地推活动",name:"type"}}),e._v(" "),t("tis-checkbox-button",{attrs:{label:"线下主题活动",name:"type"}})],1)],1),e._v(" "),t("tis-form-item",{attrs:{label:"特殊资源"}},[t("tis-radio-group",{attrs:{size:"medium"},model:{value:e.sizeForm.resource,callback:function(t){e.$set(e.sizeForm,"resource",t)},expression:"sizeForm.resource"}},[t("tis-radio",{attrs:{border:"",label:"线上品牌商赞助"}}),e._v(" "),t("tis-radio",{attrs:{border:"",label:"线下场地免费"}})],1)],1),e._v(" "),t("tis-form-item",{attrs:{size:"large"}},[t("tis-button",{attrs:{type:"primary"},on:{click:e.onSubmit}},[e._v("立即创建")]),e._v(" "),t("tis-button",[e._v("取消")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据")]),t._m(1),e("p",[t._v("包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。")]),e("demo-block",[e("div",[e("p",[t._v("在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-form ref="form" :model="form" label-width="80px">\n  <tis-form-item label="活动名称">\n    <tis-input v-model="form.name"></tis-input>\n  </tis-form-item>\n  <tis-form-item label="活动区域">\n    <tis-select v-model="form.region" placeholder="请选择活动区域">\n      <tis-option label="区域一" value="shanghai"></tis-option>\n      <tis-option label="区域二" value="beijing"></tis-option>\n    </tis-select>\n  </tis-form-item>\n  <tis-form-item label="活动时间">\n    <tis-col :span="11">\n      <tis-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></tis-date-picker>\n    </tis-col>\n    <tis-col class="line" :span="2">-</tis-col>\n    <tis-col :span="11">\n      <tis-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></tis-time-picker>\n    </tis-col>\n  </tis-form-item>\n  <tis-form-item label="即时配送">\n    <tis-switch v-model="form.delivery"></tis-switch>\n  </tis-form-item>\n  <tis-form-item label="活动性质">\n    <tis-checkbox-group v-model="form.type">\n      <tis-checkbox label="美食/餐厅线上活动" name="type"></tis-checkbox>\n      <tis-checkbox label="地推活动" name="type"></tis-checkbox>\n      <tis-checkbox label="线下主题活动" name="type"></tis-checkbox>\n      <tis-checkbox label="单纯品牌曝光" name="type"></tis-checkbox>\n    </tis-checkbox-group>\n  </tis-form-item>\n  <tis-form-item label="特殊资源">\n    <tis-radio-group v-model="form.resource">\n      <tis-radio label="线上品牌商赞助"></tis-radio>\n      <tis-radio label="线下场地免费"></tis-radio>\n    </tis-radio-group>\n  </tis-form-item>\n  <tis-form-item label="活动形式">\n    <tis-input type="textarea" v-model="form.desc"></tis-input>\n  </tis-form-item>\n  <tis-form-item>\n    <tis-button type="primary" @click="onSubmit">立即创建</tis-button>\n    <tis-button>取消</tis-button>\n  </tis-form-item>\n</tis-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),t._m(2),t._m(3),e("p",[t._v("当垂直方向空间受限且表单较简单时，可以在一行内放置表单。")]),e("demo-block",[e("div",[e("p",[t._v("设置 "),e("code",[t._v("inline")]),t._v(" 属性可以让表单域变为行内的表单域")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-form :inline="true" :model="formInline" class="demo-form-inline">\n  <tis-form-item label="审批人">\n    <tis-input v-model="formInline.user" placeholder="审批人"></tis-input>\n  </tis-form-item>\n  <tis-form-item label="活动区域">\n    <tis-select v-model="formInline.region" placeholder="活动区域">\n      <tis-option label="区域一" value="shanghai"></tis-option>\n      <tis-option label="区域二" value="beijing"></tis-option>\n    </tis-select>\n  </tis-form-item>\n  <tis-form-item>\n    <tis-button type="primary" @click="onSubmit">查询</tis-button>\n  </tis-form-item>\n</tis-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),t._m(4),e("p",[t._v("根据具体目标和制约因素，选择最佳的标签对齐方式。")]),e("demo-block",[e("div",[e("p",[t._v("通过设置 "),e("code",[t._v("label-position")]),t._v(" 属性可以改变表单域标签的位置，可选值为 "),e("code",[t._v("top")]),t._v("、"),e("code",[t._v("left")]),t._v("，当设为 "),e("code",[t._v("top")]),t._v(" 时标签会置于表单域的顶部")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-radio-group v-model="labelPosition" size="small">\n  <tis-radio-button label="left">左对齐</tis-radio-button>\n  <tis-radio-button label="right">右对齐</tis-radio-button>\n  <tis-radio-button label="top">顶部对齐</tis-radio-button>\n</tis-radio-group>\n<div style="margin: 20px;"></div>\n<tis-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">\n  <tis-form-item label="名称">\n    <tis-input v-model="formLabelAlign.name"></tis-input>\n  </tis-form-item>\n  <tis-form-item label="活动区域">\n    <tis-input v-model="formLabelAlign.region"></tis-input>\n  </tis-form-item>\n  <tis-form-item label="活动形式">\n    <tis-input v-model="formLabelAlign.type"></tis-input>\n  </tis-form-item>\n</tis-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),t._m(5),e("p",[t._v("在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。")]),e("demo-block",[e("div",[e("p",[t._v("Form 组件提供了表单验证的功能，只需要通过 "),e("code",[t._v("rules")]),t._v(" 属性传入约定的验证规则，并将 Form-Item 的 "),e("code",[t._v("prop")]),t._v(" 属性设置为需校验的字段名即可。校验规则参见 "),e("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[t._v("async-validator")])])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">\n  <tis-form-item label="活动名称" prop="name">\n    <tis-input v-model="ruleForm.name"></tis-input>\n  </tis-form-item>\n  <tis-form-item label="活动区域" prop="region">\n    <tis-select v-model="ruleForm.region" placeholder="请选择活动区域">\n      <tis-option label="区域一" value="shanghai"></tis-option>\n      <tis-option label="区域二" value="beijing"></tis-option>\n    </tis-select>\n  </tis-form-item>\n  <tis-form-item label="活动时间" required>\n    <tis-col :span="11">\n      <tis-form-item prop="date1">\n        <tis-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></tis-date-picker>\n      </tis-form-item>\n    </tis-col>\n    <tis-col class="line" :span="2">-</tis-col>\n    <tis-col :span="11">\n      <tis-form-item prop="date2">\n        <tis-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></tis-time-picker>\n      </tis-form-item>\n    </tis-col>\n  </tis-form-item>\n  <tis-form-item label="即时配送" prop="delivery">\n    <tis-switch v-model="ruleForm.delivery"></tis-switch>\n  </tis-form-item>\n  <tis-form-item label="活动性质" prop="type">\n    <tis-checkbox-group v-model="ruleForm.type">\n      <tis-checkbox label="美食/餐厅线上活动" name="type"></tis-checkbox>\n      <tis-checkbox label="地推活动" name="type"></tis-checkbox>\n      <tis-checkbox label="线下主题活动" name="type"></tis-checkbox>\n      <tis-checkbox label="单纯品牌曝光" name="type"></tis-checkbox>\n    </tis-checkbox-group>\n  </tis-form-item>\n  <tis-form-item label="特殊资源" prop="resource">\n    <tis-radio-group v-model="ruleForm.resource">\n      <tis-radio label="线上品牌商赞助"></tis-radio>\n      <tis-radio label="线下场地免费"></tis-radio>\n    </tis-radio-group>\n  </tis-form-item>\n  <tis-form-item label="活动形式" prop="desc">\n    <tis-input type="textarea" v-model="ruleForm.desc"></tis-input>\n  </tis-form-item>\n  <tis-form-item>\n    <tis-button type="primary" @click="submitForm(\'ruleForm\')">立即创建</tis-button>\n    <tis-button @click="resetForm(\'ruleForm\')">重置</tis-button>\n  </tis-form-item>\n</tis-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),t._m(6),e("p",[t._v("这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。")]),e("demo-block",[e("div",[e("p",[t._v("本例还使用"),e("code",[t._v("status-icon")]),t._v("属性为输入框添加了表示校验结果的反馈图标。")])]),e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">\n  <tis-form-item label="密码" prop="pass">\n    <tis-input type="password" v-model="ruleForm.pass" autocomplete="off"></tis-input>\n  </tis-form-item>\n  <tis-form-item label="确认密码" prop="checkPass">\n    <tis-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></tis-input>\n  </tis-form-item>\n  <tis-form-item label="年龄" prop="age">\n    <tis-input v-model.number="ruleForm.age"></tis-input>\n  </tis-form-item>\n  <tis-form-item>\n    <tis-button type="primary" @click="submitForm(\'ruleForm\')">提交</tis-button>\n    <tis-button @click="resetForm(\'ruleForm\')">重置</tis-button>\n  </tis-form-item>\n</tis-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),t._m(7),t._m(8),e("demo-block",[e("div",[e("p",[t._v("除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则")])]),e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">\n  <tis-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    <tis-input v-model="dynamicValidateForm.email"></tis-input>\n  </tis-form-item>\n  <tis-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    <tis-input v-model="domain.value"></tis-input><tis-button @click.prevent="removeDomain(domain)">删除</tis-button>\n  </tis-form-item>\n  <tis-form-item>\n    <tis-button type="primary" @click="submitForm(\'dynamicValidateForm\')">提交</tis-button>\n    <tis-button @click="addDomain">新增域名</tis-button>\n    <tis-button @click="resetForm(\'dynamicValidateForm\')">重置</tis-button>\n  </tis-form-item>\n</tis-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),t._m(9),e("demo-block",[e("div",[e("p",[t._v("数字类型的验证需要在 "),e("code",[t._v("v-model")]),t._v(" 处加上 "),e("code",[t._v(".number")]),t._v(" 的修饰符，这是 "),e("code",[t._v("Vue")]),t._v(" 自身提供的用于将绑定值转化为 "),e("code",[t._v("number")]),t._v(" 类型的修饰符。")])]),e("template",{slot:"source"},[e("element-demo6")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n  <tis-form-item\n    label="年龄"\n    prop="age"\n    :rules="[\n      { required: true, message: \'年龄不能为空\'},\n      { type: \'number\', message: \'年龄必须为数字值\'}\n    ]"\n  >\n    <tis-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></tis-input>\n  </tis-form-item>\n  <tis-form-item>\n    <tis-button type="primary" @click="submitForm(\'numberValidateForm\')">提交</tis-button>\n    <tis-button @click="resetForm(\'numberValidateForm\')">重置</tis-button>\n  </tis-form-item>\n</tis-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),t._m(10),t._m(11),t._m(12),e("demo-block",[e("div",[e("p",[t._v("如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的"),e("code",[t._v("size")]),t._v("属性，直接为这个表单项或表单组件设置自己的"),e("code",[t._v("size")]),t._v("即可。")])]),e("template",{slot:"source"},[e("element-demo7")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-form ref="form" :model="sizeForm" label-width="80px" size="mini">\n  <tis-form-item label="活动名称">\n    <tis-input v-model="sizeForm.name"></tis-input>\n  </tis-form-item>\n  <tis-form-item label="活动区域">\n    <tis-select v-model="sizeForm.region" placeholder="请选择活动区域">\n      <tis-option label="区域一" value="shanghai"></tis-option>\n      <tis-option label="区域二" value="beijing"></tis-option>\n    </tis-select>\n  </tis-form-item>\n  <tis-form-item label="活动时间">\n    <tis-col :span="11">\n      <tis-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;"></tis-date-picker>\n    </tis-col>\n    <tis-col class="line" :span="2">-</tis-col>\n    <tis-col :span="11">\n      <tis-time-picker placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></tis-time-picker>\n    </tis-col>\n  </tis-form-item>\n  <tis-form-item label="活动性质">\n    <tis-checkbox-group v-model="sizeForm.type">\n      <tis-checkbox-button label="美食/餐厅线上活动" name="type"></tis-checkbox-button>\n      <tis-checkbox-button label="地推活动" name="type"></tis-checkbox-button>\n      <tis-checkbox-button label="线下主题活动" name="type"></tis-checkbox-button>\n    </tis-checkbox-group>\n  </tis-form-item>\n  <tis-form-item label="特殊资源">\n    <tis-radio-group v-model="sizeForm.resource" size="medium">\n      <tis-radio border label="线上品牌商赞助"></tis-radio>\n      <tis-radio border label="线下场地免费"></tis-radio>\n    </tis-radio-group>\n  </tis-form-item>\n  <tis-form-item size="large">\n    <tis-button type="primary" @click="onSubmit">立即创建</tis-button>\n    <tis-button>取消</tis-button>\n  </tis-form-item>\n</tis-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),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"form-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-biao-dan"}},[this._v("¶")]),this._v(" Form 表单")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dian-xing-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dian-xing-biao-dan"}},[this._v("¶")]),this._v(" 典型表单")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",{staticClass:"tip"},[e("p",[t._v("W3C 标准中有如下"),e("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[t._v("规定")]),t._v("：")]),e("blockquote",[e("p",[e("i",[t._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.")])])]),e("p",[t._v("即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 "),e("code",[t._v("<tis-form>")]),t._v(" 标签上添加 "),e("code",[t._v("@submit.native.prevent")]),t._v("。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xing-nei-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xing-nei-biao-dan"}},[this._v("¶")]),this._v(" 行内表单")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dui-qi-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi"}},[this._v("¶")]),this._v(" 对齐方式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"biao-dan-yan-zheng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-yan-zheng"}},[this._v("¶")]),this._v(" 表单验证")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 自定义校验规则")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",{staticClass:"tip"},[e("p",[t._v("自定义校验 callback 必须被调用。 更多高级用法可参考 "),e("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[t._v("async-validator")]),t._v("。")])])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 动态增减表单项")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shu-zi-lei-xing-yan-zheng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-zi-lei-xing-yan-zheng"}},[this._v("¶")]),this._v(" 数字类型验证")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",{staticClass:"tip"},[e("p",[t._v("嵌套在 "),e("code",[t._v("el-form-item")]),t._v(" 中的 "),e("code",[t._v("el-form-item")]),t._v(" 标签宽度默认为零，不会继承 "),e("code",[t._v("el-form")]),t._v(" 的 "),e("code",[t._v("label-width")]),t._v("。如果需要可以为其单独设置 "),e("code",[t._v("label-width")]),t._v(" 属性。")])])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 表单内组件尺寸控制")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过设置 Form 上的 "),e("code",[t._v("size")]),t._v(" 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"form-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes"}},[this._v("¶")]),this._v(" Form Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("model")]),e("td",[t._v("表单数据对象")]),e("td",[t._v("object")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("rules")]),e("td",[t._v("表单验证规则")]),e("td",[t._v("object")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("inline")]),e("td",[t._v("行内表单模式")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("label-position")]),e("td",[t._v("表单域标签的位置，如果值为 left 或者 right 时，则需要设置 "),e("code",[t._v("label-width")])]),e("td",[t._v("string")]),e("td",[t._v("right/left/top")]),e("td",[t._v("right")])]),e("tr",[e("td",[t._v("label-width")]),e("td",[t._v("表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 "),e("code",[t._v("auto")]),t._v("。")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("label-suffix")]),e("td",[t._v("表单域标签的后缀")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("hide-required-asterisk")]),e("td",[t._v("是否显示必填字段的标签旁边的红色星号")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("show-message")]),e("td",[t._v("是否显示校验错误信息")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("inline-message")]),e("td",[t._v("是否以行内形式展示校验信息")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("status-icon")]),e("td",[t._v("是否在输入框中显示校验结果反馈图标")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("validate-on-rule-change")]),e("td",[t._v("是否在 "),e("code",[t._v("rules")]),t._v(" 属性改变后立即触发一次验证")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("用于控制该表单内组件的尺寸")]),e("td",[t._v("string")]),e("td",[t._v("medium / small / mini")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"form-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-methods"}},[this._v("¶")]),this._v(" Form Methods")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("validate")]),e("td",[t._v("对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise")]),e("td",[t._v("Function(callback: Function(boolean, object))")])]),e("tr",[e("td",[t._v("validateField")]),e("td",[t._v("对部分表单字段进行校验的方法")]),e("td",[t._v("Function(props: array | string, callback: Function(errorMessage: string))")])]),e("tr",[e("td",[t._v("resetFields")]),e("td",[t._v("对整个表单进行重置，将所有字段值重置为初始值并移除校验结果")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("clearValidate")]),e("td",[t._v("移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果")]),e("td",[t._v("Function(props: array | string)")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"form-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-events"}},[this._v("¶")]),this._v(" Form Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("validate")]),e("td",[t._v("任一表单项被校验后触发")]),e("td",[t._v("被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"form-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes"}},[this._v("¶")]),this._v(" Form-Item Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("prop")]),e("td",[t._v("表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的")]),e("td",[t._v("string")]),e("td",[t._v("传入 Form 组件的 "),e("code",[t._v("model")]),t._v(" 中的字段")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("标签文本")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("label-width")]),e("td",[t._v("表单域标签的的宽度，例如 '50px'。支持 "),e("code",[t._v("auto")]),t._v("。")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("required")]),e("td",[t._v("是否必填，如不设置，则会根据校验规则自动生成")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("rules")]),e("td",[t._v("表单验证规则")]),e("td",[t._v("object")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("error")]),e("td",[t._v("表单域验证错误信息, 设置该值会使表单验证状态变为"),e("code",[t._v("error")]),t._v("，并显示该错误信息")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("show-message")]),e("td",[t._v("是否显示校验错误信息")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("inline-message")]),e("td",[t._v("以行内形式展示校验信息")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("用于控制该表单域下组件的尺寸")]),e("td",[t._v("string")]),e("td",[t._v("medium / small / mini")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"form-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-slot"}},[this._v("¶")]),this._v(" Form-Item Slot")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("name")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("—")]),e("td",[t._v("Form Item 的内容")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("标签文本的内容")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"form-item-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-scoped-slot"}},[this._v("¶")]),this._v(" Form-Item Scoped Slot")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("name")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("error")]),e("td",[t._v("自定义表单校验信息的显示方式，参数为 { error }")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"form-item-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-item-methods"}},[this._v("¶")]),this._v(" Form-Item Methods")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("resetField")]),e("td",[t._v("对该表单项进行重置，将其值重置为初始值并移除校验结果")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("clearValidate")]),e("td",[t._v("移除该表单项的校验结果")]),e("td",[t._v("-")])])])])}],!1,null,null,null);e.default=a.exports},1096:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-form",{on:{submit:e.onSubmit}},[t("m-field",{attrs:{name:"用户名",label:"用户名",placeholder:"用户名",rules:[{required:!0,message:"请填写用户名"}]},model:{value:e.username,callback:function(t){e.username=t},expression:"username"}}),e._v(" "),t("m-field",{attrs:{type:"password",name:"密码",label:"密码",placeholder:"密码",rules:[{required:!0,message:"请填写密码"}]},model:{value:e.password,callback:function(t){e.password=t},expression:"password"}}),e._v(" "),t("div",{staticStyle:{margin:"16px"}},[t("m-button",{attrs:{round:"",block:"",type:"info","native-type":"submit"}},[e._v("提交")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{username:"",password:""}},methods:{onSubmit:function(t){console.log("submit",t)}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-form",{attrs:{"validate-first":""},on:{failed:e.onFailed}},[t("m-field",{attrs:{name:"pattern",placeholder:"正则校验",rules:[{pattern:e.pattern,message:"请输入正确内容"}]},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}}),e._v(" "),t("m-field",{attrs:{name:"validator",placeholder:"函数校验",rules:[{validator:e.validator,message:"请输入正确内容"}]},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}}),e._v(" "),t("m-field",{attrs:{name:"asyncValidator",placeholder:"异步函数校验",rules:[{validator:e.asyncValidator,message:"请输入正确内容"}]},model:{value:e.value3,callback:function(t){e.value3=t},expression:"value3"}}),e._v(" "),t("div",{staticStyle:{margin:"16px"}},[t("m-button",{attrs:{round:"",block:"",type:"info","native-type":"submit"}},[e._v("提交")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{value1:"",value2:"",value3:"",pattern:/\d{6}/}},methods:{validator:function(t){return/1\d{10}/.test(t)},asyncValidator:function(e){return new Promise(function(t){setTimeout(function(){t(/\d{6}/.test(e))},1e3)})},onFailed:function(t){console.log("failed",t)}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{name:"switch",label:"开关"}},[[t("m-switch",{attrs:{size:"20"},model:{value:e.switchChecked,callback:function(t){e.switchChecked=t},expression:"switchChecked"}})]],2)],1)},staticRenderFns:[]},{data:function(){return{switchChecked:!1}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{name:"checkbox",label:"复选框"}},[[t("m-checkbox",{attrs:{shape:"square"},model:{value:e.checkbox,callback:function(t){e.checkbox=t},expression:"checkbox"}})]],2),e._v(" "),t("m-field",{attrs:{name:"checkboxGroup",label:"复选框组"}},[[t("m-checkbox-group",{attrs:{direction:"horizontal"},model:{value:e.checkboxGroup,callback:function(t){e.checkboxGroup=t},expression:"checkboxGroup"}},[t("m-checkbox",{attrs:{name:"1",shape:"square"}},[e._v("复选框 1")]),e._v(" "),t("m-checkbox",{attrs:{name:"2",shape:"square"}},[e._v("复选框 2")])],1)]],2)],1)},staticRenderFns:[]},{data:function(){return{checkbox:!1,checkboxGroup:[]}}}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{name:"radio",label:"单选框"}},[[t("m-radio-group",{attrs:{direction:"horizontal"},model:{value:e.radio,callback:function(t){e.radio=t},expression:"radio"}},[t("m-radio",{attrs:{name:"1"}},[e._v("单选框 1")]),e._v(" "),t("m-radio",{attrs:{name:"2"}},[e._v("单选框 2")])],1)]],2)],1)},staticRenderFns:[]},{data:function(){return{radio:"1"}}}),"element-demo5":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{name:"stepper",label:"步进器"}},[[t("m-stepper",{model:{value:e.stepper,callback:function(t){e.stepper=t},expression:"stepper"}})]],2)],1)},staticRenderFns:[]},{data:function(){return{stepper:1}}}),"element-demo6":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{name:"rate",label:"评分"}},[[t("m-rate",{model:{value:e.rate,callback:function(t){e.rate=t},expression:"rate"}})]],2)],1)},staticRenderFns:[]},{data:function(){return{rate:3}}}),"element-demo7":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{name:"slider",label:"滑块"}},[[t("m-slider",{model:{value:e.slider,callback:function(t){e.slider=t},expression:"slider"}})]],2)],1)},staticRenderFns:[]},{data:function(){return{slider:50}}}),"element-demo8":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{name:"uploader",label:"文件上传"}},[[t("m-uploader",{model:{value:e.uploader,callback:function(t){e.uploader=t},expression:"uploader"}})]],2)],1)},staticRenderFns:[]},{data:function(){return{uploader:[{url:"https://img.yzcdn.cn/mt/leaf.jpg"}]}}}),"element-demo9":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{readonly:"",clickable:"",name:"picker",value:e.value,label:"选择器",placeholder:"点击选择城市"},on:{click:function(t){e.showPicker=!0}}}),e._v(" "),t("m-popup",{attrs:{position:"bottom"},model:{value:e.showPicker,callback:function(t){e.showPicker=t},expression:"showPicker"}},[t("m-picker",{attrs:{"show-toolbar":"",columns:e.columns},on:{confirm:e.onConfirm,cancel:function(t){e.showPicker=!1}}})],1)],1)},staticRenderFns:[]},{data:function(){return{value:"",columns:["杭州","宁波","温州","嘉兴","湖州"],showPicker:!1}},methods:{onConfirm:function(t){this.value=t,this.showPicker=!1}}}),"element-demo10":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{readonly:"",clickable:"",name:"datetimePicker",value:e.value,label:"时间选择",placeholder:"点击选择时间"},on:{click:function(t){e.showPicker=!0}}}),e._v(" "),t("m-popup",{attrs:{position:"bottom"},model:{value:e.showPicker,callback:function(t){e.showPicker=t},expression:"showPicker"}},[t("m-datetime-picker",{attrs:{type:"time"},on:{confirm:e.onConfirm,cancel:function(t){e.showPicker=!1}}})],1)],1)},staticRenderFns:[]},{data:function(){return{value:"",showPicker:!1}},methods:{onConfirm:function(t){this.value=t,this.showPicker=!1}}}),"element-demo11":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{readonly:"",clickable:"",name:"area",value:e.value,label:"地区选择",placeholder:"点击选择省市区"},on:{click:function(t){e.showArea=!0}}}),e._v(" "),t("m-popup",{attrs:{position:"bottom"},model:{value:e.showArea,callback:function(t){e.showArea=t},expression:"showArea"}},[t("m-area",{attrs:{"area-list":e.areaList},on:{confirm:e.onConfirm,cancel:function(t){e.showArea=!1}}})],1)],1)},staticRenderFns:[]},{data:function(){return{value:"",showArea:!1,areaList:{}}},methods:{onConfirm:function(t){this.value=t.filter(function(t){return!!t}).map(function(t){return t.name}).join("/"),this.showArea=!1}}}),"element-demo12":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{readonly:"",clickable:"",name:"calendar",value:e.value,label:"日历",placeholder:"点击选择日期"},on:{click:function(t){e.showCalendar=!0}}}),e._v(" "),t("m-calendar",{on:{confirm:e.onConfirm},model:{value:e.showCalendar,callback:function(t){e.showCalendar=t},expression:"showCalendar"}})],1)},staticRenderFns:[]},{data:function(){return{value:"",showCalendar:!1}},methods:{onConfirm:function(t){this.value=t.getMonth()+1+"/"+t.getDate(),this.showCalendar=!1}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("p",[t._v("用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型，2.5 版本开始支持此组件。")]),t._m(2),t._m(3),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-form @submit="onSubmit">\n  <m-field\n    v-model="username"\n    name="用户名"\n    label="用户名"\n    placeholder="用户名"\n    :rules="[{ required: true, message: \'请填写用户名\' }]"\n  />\n  <m-field\n    v-model="password"\n    type="password"\n    name="密码"\n    label="密码"\n    placeholder="密码"\n    :rules="[{ required: true, message: \'请填写密码\' }]"\n  />\n  <div style="margin: 16px;">\n    <m-button round block type="info" native-type="submit">提交</m-button>\n  </div>\n</m-form>\n\n<script>\nexport default {\n  data() {\n    return {\n      username: \'\',\n      password: \'\',\n    };\n  },\n  methods: {\n    onSubmit(values) {\n      console.log(\'submit\', values);\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(4),t._m(5),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-form validate-first @failed="onFailed">\n  \x3c!-- 通过 pattern 进行正则校验 --\x3e\n  <m-field\n    v-model="value1"\n    name="pattern"\n    placeholder="正则校验"\n    :rules="[{ pattern, message: \'请输入正确内容\' }]"\n  />\n  \x3c!-- 通过 validator 进行函数校验 --\x3e\n  <m-field\n    v-model="value2"\n    name="validator"\n    placeholder="函数校验"\n    :rules="[{ validator, message: \'请输入正确内容\' }]"\n  />\n  \x3c!-- 通过 validator 进行异步函数校验 --\x3e\n  <m-field\n    v-model="value3"\n    name="asyncValidator"\n    placeholder="异步函数校验"\n    :rules="[{ validator: asyncValidator, message: \'请输入正确内容\' }]"\n  />\n  <div style="margin: 16px;">\n    <m-button round block type="info" native-type="submit">提交</m-button>\n  </div>\n</m-form>\n\n<script>\nexport default {\n  data() {\n    return {\n      value1: \'\',\n      value2: \'\',\n      value3: \'\',\n      pattern: /\\d{6}/,\n    };\n  },\n  methods: {\n    // 校验函数返回 true 表示校验通过，false 表示不通过\n    validator(val) {\n      return /1\\d{10}/.test(val);\n    },\n    // 异步校验函数返回 Promise\n    asyncValidator(val) {\n      return new Promise((resolve) => {\n\n        setTimeout(() => {\n          resolve(/\\d{6}/.test(val));\n        }, 1000);\n      });\n    },\n    onFailed(errorInfo) {\n      console.log(\'failed\', errorInfo);\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(6),t._m(7),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field name="switch" label="开关">\n  <template #input>\n    <m-switch v-model="switchChecked" size="20" />\n  </template>\n</m-field>\n\n<script>\nexport default {\n  data() {\n    return {\n      switchChecked: false,\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(8),t._m(9),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field name="checkbox" label="复选框">\n  <template #input>\n    <m-checkbox v-model="checkbox" shape="square" />\n  </template>\n</m-field>\n<m-field name="checkboxGroup" label="复选框组">\n  <template #input>\n    <m-checkbox-group v-model="checkboxGroup" direction="horizontal">\n      <m-checkbox name="1" shape="square">复选框 1</m-checkbox>\n      <m-checkbox name="2" shape="square">复选框 2</m-checkbox>\n    </m-checkbox-group>\n  </template>\n</m-field>\n\n<script>\nexport default {\n  data() {\n    return {\n      checkbox: false,\n      checkboxGroup: [],\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(10),t._m(11),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field name="radio" label="单选框">\n  <template #input>\n    <m-radio-group v-model="radio" direction="horizontal">\n      <m-radio name="1">单选框 1</m-radio>\n      <m-radio name="2">单选框 2</m-radio>\n    </m-radio-group>\n  </template>\n</m-field>\n\n<script>\nexport default {\n  data() {\n    return {\n      radio: \'1\',\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(12),t._m(13),e("demo-block",[e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field name="stepper" label="步进器">\n  <template #input>\n    <m-stepper v-model="stepper" />\n  </template>\n</m-field>\n\n<script>\nexport default {\n  data() {\n    return {\n      stepper: 1,\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(14),t._m(15),e("demo-block",[e("template",{slot:"source"},[e("element-demo6")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field name="rate" label="评分">\n  <template #input>\n    <m-rate v-model="rate" />\n  </template>\n</m-field>\n\n<script>\nexport default {\n  data() {\n    return {\n      rate: 3,\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(16),t._m(17),e("demo-block",[e("template",{slot:"source"},[e("element-demo7")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field name="slider" label="滑块">\n  <template #input>\n    <m-slider v-model="slider" />\n  </template>\n</m-field>\n\n<script>\nexport default {\n  data() {\n    return {\n      slider: 50,\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(18),t._m(19),e("demo-block",[e("template",{slot:"source"},[e("element-demo8")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field name="uploader" label="文件上传">\n  <template #input>\n    <m-uploader v-model="uploader" />\n  </template>\n</m-field>\n\n<script>\nexport default {\n  data() {\n    return {\n      uploader: [{ url: \'https://img.yzcdn.cn/mt/leaf.jpg\' }],\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(20),t._m(21),e("demo-block",[e("template",{slot:"source"},[e("element-demo9")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field\n  readonly\n  clickable\n  name="picker"\n  :value="value"\n  label="选择器"\n  placeholder="点击选择城市"\n  @click="showPicker = true"\n/>\n<m-popup v-model="showPicker" position="bottom">\n  <m-picker\n    show-toolbar\n    :columns="columns"\n    @confirm="onConfirm"\n    @cancel="showPicker = false"\n  />\n</m-popup>\n\n<script>\nexport default {\n  data() {\n    return {\n      value: \'\',\n      columns: [\'杭州\', \'宁波\', \'温州\', \'嘉兴\', \'湖州\'],\n      showPicker: false,\n    };\n  },\n  methods: {\n    onConfirm(value) {\n      this.value = value;\n      this.showPicker = false;\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(22),t._m(23),e("demo-block",[e("template",{slot:"source"},[e("element-demo10")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field\n  readonly\n  clickable\n  name="datetimePicker"\n  :value="value"\n  label="时间选择"\n  placeholder="点击选择时间"\n  @click="showPicker = true"\n/>\n<m-popup v-model="showPicker" position="bottom">\n  <m-datetime-picker\n    type="time"\n    @confirm="onConfirm"\n    @cancel="showPicker = false"\n  />\n</m-popup>\n\n<script>\nexport default {\n  data() {\n    return {\n      value: \'\',\n      showPicker: false,\n    };\n  },\n  methods: {\n    onConfirm(time) {\n      this.value = time;\n      this.showPicker = false;\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(24),t._m(25),e("demo-block",[e("template",{slot:"source"},[e("element-demo11")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field\n  readonly\n  clickable\n  name="area"\n  :value="value"\n  label="地区选择"\n  placeholder="点击选择省市区"\n  @click="showArea = true"\n/>\n<m-popup v-model="showArea" position="bottom">\n  <m-area\n    :area-list="areaList"\n    @confirm="onConfirm"\n    @cancel="showArea = false"\n  />\n</m-popup>\n\n<script>\nexport default {\n  data() {\n    return {\n      value: \'\',\n      showArea: false,\n      areaList: {}, // 数据格式见 Area 组件文档\n    };\n  },\n  methods: {\n    onConfirm(values) {\n      this.value = values\n        .filter((item) => !!item)\n        .map((item) => item.name)\n        .join(\'/\');\n      this.showArea = false;\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(26),t._m(27),e("demo-block",[e("template",{slot:"source"},[e("element-demo12")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field\n  readonly\n  clickable\n  name="calendar"\n  :value="value"\n  label="日历"\n  placeholder="点击选择日期"\n  @click="showCalendar = true"\n/>\n<m-calendar v-model="showCalendar" @confirm="onConfirm" />\n\n<script>\nexport default {\n  data() {\n    return {\n      value: \'\',\n      showCalendar: false,\n    };\n  },\n  methods: {\n    onConfirm(date) {\n      this.value = `${date.getMonth() + 1}/${date.getDate()}`;\n      this.showCalendar = false;\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(28),t._m(29),t._m(30),t._m(31),t._m(32),t._m(33),t._m(34),t._m(35),t._m(36),t._m(37),t._m(38),t._m(39),t._m(40),t._m(41),t._m(42),t._m(43),t._m(44),t._m(45),t._m(46),t._m(47),t._m(48),t._m(49)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"form-biao-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form-biao-dan"}},[this._v("¶")]),this._v(" Form 表单")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("在表单中，每个 "),e("a",{attrs:{href:"#/zh-CN/field"}},[t._v("Field 组件")]),t._v(" 代表一个表单项，使用 Field 的 "),e("code",[t._v("rules")]),t._v(" 属性定义校验规则。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xiao-yan-gui-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-yan-gui-ze"}},[this._v("¶")]),this._v(" 校验规则")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("rules")]),t._v(" 定义表单校验规则，可用字段见"),e("a",{attrs:{href:"#/zh-CN/form#rule-shu-ju-jie-gou"}},[t._v("下方表格")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"biao-dan-xiang-lei-xing-kai-guan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-xiang-lei-xing-kai-guan"}},[this._v("¶")]),this._v(" 表单项类型 - 开关")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("在表单中使用 "),e("a",{attrs:{href:"#/zh-CN/switch"}},[t._v("Switch 组件")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"biao-dan-xiang-lei-xing-fu-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-xiang-lei-xing-fu-xuan-kuang"}},[this._v("¶")]),this._v(" 表单项类型 - 复选框")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("在表单中使用 "),e("a",{attrs:{href:"#/zh-CN/checkbox"}},[t._v("Checkbox 组件")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"biao-dan-xiang-lei-xing-dan-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-xiang-lei-xing-dan-xuan-kuang"}},[this._v("¶")]),this._v(" 表单项类型 - 单选框")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("在表单中使用 "),e("a",{attrs:{href:"#/zh-CN/radio"}},[t._v("Radio 组件")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"biao-dan-xiang-lei-xing-bu-jin-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-xiang-lei-xing-bu-jin-qi"}},[this._v("¶")]),this._v(" 表单项类型 - 步进器")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("在表单中使用 "),e("a",{attrs:{href:"#/zh-CN/stepper"}},[t._v("Stepper 组件")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"biao-dan-xiang-lei-xing-ping-fen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-xiang-lei-xing-ping-fen"}},[this._v("¶")]),this._v(" 表单项类型 - 评分")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("在表单中使用 "),e("a",{attrs:{href:"#/zh-CN/rate"}},[t._v("Rate 组件")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"biao-dan-xiang-lei-xing-hua-kuai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-xiang-lei-xing-hua-kuai"}},[this._v("¶")]),this._v(" 表单项类型 - 滑块")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("在表单中使用 "),e("a",{attrs:{href:"#/zh-CN/slider"}},[t._v("Slider 组件")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"biao-dan-xiang-lei-xing-wen-jian-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-xiang-lei-xing-wen-jian-shang-chuan"}},[this._v("¶")]),this._v(" 表单项类型 - 文件上传")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("在表单中使用 "),e("a",{attrs:{href:"#/zh-CN/uploader"}},[t._v("Uploader 组件")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"biao-dan-xiang-lei-xing-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-xiang-lei-xing-xuan-ze-qi"}},[this._v("¶")]),this._v(" 表单项类型 - 选择器")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("在表单中使用 "),e("a",{attrs:{href:"#/zh-CN/picker"}},[t._v("Picker 组件")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"biao-dan-xiang-lei-xing-shi-jian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-xiang-lei-xing-shi-jian-xuan-ze-qi"}},[this._v("¶")]),this._v(" 表单项类型 - 时间选择器")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("在表单中使用 "),e("a",{attrs:{href:"#/zh-CN/datetime-picker"}},[t._v("DatetimePicker 组件")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"biao-dan-xiang-lei-xing-sheng-shi-qu-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-xiang-lei-xing-sheng-shi-qu-xuan-ze-qi"}},[this._v("¶")]),this._v(" 表单项类型 - 省市区选择器")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("在表单中使用 "),e("a",{attrs:{href:"#/zh-CN/area"}},[t._v("Area 组件")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"biao-dan-xiang-lei-xing-ri-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-xiang-lei-xing-ri-li"}},[this._v("¶")]),this._v(" 表单项类型 - 日历")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("在表单中使用 "),e("a",{attrs:{href:"#/zh-CN/calendar"}},[t._v("Calendar 组件")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("label-width")]),e("td",[t._v("表单项 label 宽度，默认单位为"),e("code",[t._v("px")])]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("6.2em")])])]),e("tr",[e("td",[t._v("label-align")]),e("td",[t._v("\b 表单项 label 对齐方式，可选值为 "),e("code",[t._v("center")]),e("code",[t._v("right")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("left")])])]),e("tr",[e("td",[t._v("input-align")]),e("td",[t._v("输入框对齐方式，可选值为 "),e("code",[t._v("center")]),e("code",[t._v("right")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("left")])])]),e("tr",[e("td",[t._v("error-message-align")]),e("td",[t._v("错误提示文案对齐方式，可选值为 "),e("code",[t._v("center")]),e("code",[t._v("right")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("left")])])]),e("tr",[e("td",[t._v("validate-trigger "),e("code",[t._v("v2.5.2")])]),e("td",[t._v("表单校验触发时机，可选值为 "),e("code",[t._v("onChange")]),t._v("、"),e("code",[t._v("onSubmit")]),t._v("，详见下表")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("onBlur")])])]),e("tr",[e("td",[t._v("colon")]),e("td",[t._v("是否在 label 后面添加冒号")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("disabled "),e("code",[t._v("v2.12.2")])]),e("td",[t._v("是否禁用表单中的所有输入框")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("readonly "),e("code",[t._v("v2.12.2")])]),e("td",[t._v("是否将表单中的所有输入框设置为只读")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("validate-first")]),e("td",[t._v("是否在某一项校验不通过时停止校验")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("scroll-to-error "),e("code",[t._v("v2.5.2")])]),e("td",[t._v("是否在提交表单且校验不通过时滚动至错误的表单项")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("show-error "),e("code",[t._v("v2.6.0")])]),e("td",[t._v("是否在校验不通过时标红输入框")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("show-error-message "),e("code",[t._v("v2.5.8")])]),e("td",[t._v("是否在校验不通过时在输入框下方展示错误提示")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("submit-on-enter "),e("code",[t._v("v2.8.3")])]),e("td",[t._v("是否在按下回车键时提交表单")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("表单项的 API 参见："),t("a",{attrs:{href:"#/zh-CN/field#api"}},[this._v("Field 组件")])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"rule-shu-ju-jie-gou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rule-shu-ju-jie-gou"}},[this._v("¶")]),this._v(" Rule 数据结构")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("使用 Field 的"),e("code",[t._v("rules")]),t._v("属性可以定义校验规则，可选属性如下:")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("键名")]),e("th",[t._v("说明")]),e("th",[t._v("类型")])])]),e("tbody",[e("tr",[e("td",[t._v("required")]),e("td",[t._v("是否为必选字段")]),e("td",[e("em",[t._v("boolean")])])]),e("tr",[e("td",[t._v("message "),e("code",[t._v("v2.5.3")])]),e("td",[t._v("错误提示文案")]),e("td",[e("em",[t._v("string | (value, rule) => string")])])]),e("tr",[e("td",[t._v("validator "),e("code",[t._v("v2.5.3")])]),e("td",[t._v("通过函数进行校验")]),e("td",[e("em",[t._v("(value, rule) => boolean | Promise")])])]),e("tr",[e("td",[t._v("pattern "),e("code",[t._v("v2.5.3")])]),e("td",[t._v("通过正则表达式进行校验")]),e("td",[e("em",[t._v("RegExp")])])]),e("tr",[e("td",[t._v("trigger "),e("code",[t._v("v2.5.2")])]),e("td",[t._v("本项规则的触发时机，可选值为 "),e("code",[t._v("onChange")]),t._v("、"),e("code",[t._v("onBlur")])]),e("td",[e("em",[t._v("string")])])]),e("tr",[e("td",[t._v("formatter "),e("code",[t._v("v2.5.3")])]),e("td",[t._v("格式化函数，将表单项的值转换后进行校验")]),e("td",[e("em",[t._v("(value, rule) => any")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"validate-trigger-ke-xuan-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validate-trigger-ke-xuan-zhi"}},[this._v("¶")]),this._v(" validate-trigger \b 可选值")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("validate-trigger")]),t._v(" 属性可以自定义表单校验的触发时机。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("onSubmit")]),e("td",[t._v("仅在提交表单时触发校验")])]),e("tr",[e("td",[t._v("onBlur")]),e("td",[t._v("在提交表单和输入框失焦时触发校验")])]),e("tr",[e("td",[t._v("onChange")]),e("td",[t._v("在提交表单和输入框内容变化时触发校验")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("submit")]),e("td",[t._v("提交表单且验证通过后触发")]),e("td",[e("em",[t._v("values: object")])])]),e("tr",[e("td",[t._v("failed")]),e("td",[t._v("提交表单且验证不通过后触发")]),e("td",[e("em",[t._v("errorInfo: { values: object, errors: object[] }")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa"}},[this._v("¶")]),this._v(" 方法")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 ref 可以获取到 Form 实例并调用实例方法，详见"),e("a",{attrs:{href:"#/zh-CN/admced-usage#zu-jian-shi-li-fang-fa"}},[t._v("组件实例方法")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")]),e("th",[t._v("返回值")])])]),e("tbody",[e("tr",[e("td",[t._v("submit")]),e("td",[t._v("提交表单，与点击提交按钮的效果等价")]),e("td",[t._v("-")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("validate")]),e("td",[t._v("验证表单，支持传入 "),e("code",[t._v("name")]),t._v(" 来验证单个或部分表单项")]),e("td",[e("em",[t._v("name?: string | string[]")])]),e("td",[e("em",[t._v("Promise")])])]),e("tr",[e("td",[t._v("resetValidation")]),e("td",[t._v("重置表单项的验证提示，支持传入 "),e("code",[t._v("name")]),t._v(" 来重置单个或部分表单项")]),e("td",[e("em",[t._v("name?: string | string[]")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("scrollToField "),e("code",[t._v("v2.8.3")])]),e("td",[t._v("滚动到对应表单项的位置，默认滚动到顶部，第二个参数传 false 可滚动至底部")]),e("td",[e("em",[t._v("name: string, alignToTop: boolean")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("default")]),e("td",[t._v("表单内容")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"chang-jian-wen-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-wen-ti"}},[this._v("¶")]),this._v(" 常见问题")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dian-ji-biao-dan-zhong-de-pu-tong-an-niu-wei-shi-me-hui-hong-fa-biao-dan-ti-jiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dian-ji-biao-dan-zhong-de-pu-tong-an-niu-wei-shi-me-hui-hong-fa-biao-dan-ti-jiao"}},[this._v("¶")]),this._v(" 点击表单中的普通按钮为什么会触发表单提交？")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("在表单中，除了提交按钮外，可能还有一些其他的功能性按钮，如发送验证码按钮。在使用这些按钮时，要注意将"),e("code",[t._v("native-type")]),t._v("设置为"),e("code",[t._v("button")]),t._v("，否则会触发表单提交。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-html"},[this._v('<m-button native-type="button">发送验证码</m-button>\n')])])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("这个问题的原因是浏览器中 button 标签 type 属性的默认值为"),e("code",[t._v("submit")]),t._v("，导致触发表单提交。我们会在下个大版本中将 type 的默认值调整为"),e("code",[t._v("button")]),t._v("来避免这个问题。\nF")])}],!1,null,null,null);e.default=a.exports},1097:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-dropdown",[e("span",{staticClass:"el-dropdown-link"},[t._v("\n    下拉菜单"),e("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t._v(" "),e("tis-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[e("tis-dropdown-item",[t._v("黄金糕")]),t._v(" "),e("tis-dropdown-item",[t._v("狮子头")]),t._v(" "),e("tis-dropdown-item",[t._v("螺蛳粉")]),t._v(" "),e("tis-dropdown-item",{attrs:{disabled:""}},[t._v("双皮奶")]),t._v(" "),e("tis-dropdown-item",{attrs:{divided:""}},[t._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-dropdown",[e("tis-button",{attrs:{type:"primary"}},[t._v("\n    更多菜单"),e("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t._v(" "),e("tis-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[e("tis-dropdown-item",[t._v("黄金糕")]),t._v(" "),e("tis-dropdown-item",[t._v("狮子头")]),t._v(" "),e("tis-dropdown-item",[t._v("螺蛳粉")]),t._v(" "),e("tis-dropdown-item",[t._v("双皮奶")]),t._v(" "),e("tis-dropdown-item",[t._v("蚵仔煎")])],1)],1),t._v(" "),e("tis-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:t.handleClick}},[t._v("\n  更多菜单\n  "),e("tis-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[e("tis-dropdown-item",[t._v("黄金糕")]),t._v(" "),e("tis-dropdown-item",[t._v("狮子头")]),t._v(" "),e("tis-dropdown-item",[t._v("螺蛳粉")]),t._v(" "),e("tis-dropdown-item",[t._v("双皮奶")]),t._v(" "),e("tis-dropdown-item",[t._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]},{methods:{handleClick:function(){alert("button click")}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-row",{staticClass:"block-col-2"},[e("tis-col",{attrs:{span:12}},[e("span",{staticClass:"demonstration"},[t._v("click 激活")]),t._v(" "),e("tis-dropdown",{attrs:{trigger:"click"}},[e("span",{staticClass:"el-dropdown-link"},[t._v("\n        下拉菜单"),e("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t._v(" "),e("tis-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[e("tis-dropdown-item",{attrs:{icon:"el-icon-plus"}},[t._v("黄金糕")]),t._v(" "),e("tis-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[t._v("狮子头")]),t._v(" "),e("tis-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[t._v("螺蛳粉")]),t._v(" "),e("tis-dropdown-item",{attrs:{icon:"el-icon-check"}},[t._v("双皮奶")]),t._v(" "),e("tis-dropdown-item",{attrs:{icon:"el-icon-circle-check"}},[t._v("蚵仔煎")])],1)],1)],1)],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-dropdown",{attrs:{"hide-on-click":!1}},[e("span",{staticClass:"el-dropdown-link"},[t._v("\n    下拉菜单"),e("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t._v(" "),e("tis-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[e("tis-dropdown-item",[t._v("黄金糕")]),t._v(" "),e("tis-dropdown-item",[t._v("狮子头")]),t._v(" "),e("tis-dropdown-item",[t._v("螺蛳粉")]),t._v(" "),e("tis-dropdown-item",{attrs:{disabled:""}},[t._v("双皮奶")]),t._v(" "),e("tis-dropdown-item",{attrs:{divided:""}},[t._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-dropdown",{on:{command:t.handleCommand}},[e("span",{staticClass:"el-dropdown-link"},[t._v("\n    下拉菜单"),e("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),t._v(" "),e("tis-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[e("tis-dropdown-item",{attrs:{command:"a"}},[t._v("黄金糕")]),t._v(" "),e("tis-dropdown-item",{attrs:{command:"b"}},[t._v("狮子头")]),t._v(" "),e("tis-dropdown-item",{attrs:{command:"c"}},[t._v("螺蛳粉")]),t._v(" "),e("tis-dropdown-item",{attrs:{command:"d",disabled:""}},[t._v("双皮奶")]),t._v(" "),e("tis-dropdown-item",{attrs:{command:"e",divided:""}},[t._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]},{methods:{handleCommand:function(t){this.$message("click on item "+t)}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-dropdown",{attrs:{"split-button":"",type:"primary"}},[t._v("\n  默认尺寸\n  "),e("tis-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[e("tis-dropdown-item",[t._v("黄金糕")]),t._v(" "),e("tis-dropdown-item",[t._v("狮子头")]),t._v(" "),e("tis-dropdown-item",[t._v("螺蛳粉")]),t._v(" "),e("tis-dropdown-item",[t._v("双皮奶")]),t._v(" "),e("tis-dropdown-item",[t._v("蚵仔煎")])],1)],1),t._v(" "),e("tis-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[t._v("\n  中等尺寸\n  "),e("tis-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[e("tis-dropdown-item",[t._v("黄金糕")]),t._v(" "),e("tis-dropdown-item",[t._v("狮子头")]),t._v(" "),e("tis-dropdown-item",[t._v("螺蛳粉")]),t._v(" "),e("tis-dropdown-item",[t._v("双皮奶")]),t._v(" "),e("tis-dropdown-item",[t._v("蚵仔煎")])],1)],1),t._v(" "),e("tis-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[t._v("\n  小型尺寸\n  "),e("tis-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[e("tis-dropdown-item",[t._v("黄金糕")]),t._v(" "),e("tis-dropdown-item",[t._v("狮子头")]),t._v(" "),e("tis-dropdown-item",[t._v("螺蛳粉")]),t._v(" "),e("tis-dropdown-item",[t._v("双皮奶")]),t._v(" "),e("tis-dropdown-item",[t._v("蚵仔煎")])],1)],1)],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("将动作或菜单折叠到下拉菜单中。")]),t._m(1),e("p",[t._v("移动到下拉菜单上，展开更多操作。")]),e("demo-block",[e("div",[e("p",[t._v("通过组件"),e("code",[t._v("slot")]),t._v("来设置下拉触发的元素以及需要通过具名"),e("code",[t._v("slot")]),t._v("为"),e("code",[t._v("dropdown")]),t._v(" 来设置下拉菜单。默认情况下，下拉按钮只要"),e("code",[t._v("hover")]),t._v("即可，无需点击也会显示下拉菜单。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-dropdown>\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <tis-dropdown-menu slot="dropdown">\n    <tis-dropdown-item>黄金糕</tis-dropdown-item>\n    <tis-dropdown-item>狮子头</tis-dropdown-item>\n    <tis-dropdown-item>螺蛳粉</tis-dropdown-item>\n    <tis-dropdown-item disabled>双皮奶</tis-dropdown-item>\n    <tis-dropdown-item divided>蚵仔煎</tis-dropdown-item>\n  </tis-dropdown-menu>\n</tis-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),t._m(2),e("p",[t._v("可使用按钮触发下拉菜单。")]),e("demo-block",[e("div",[e("p",[t._v("设置"),e("code",[t._v("split-button")]),t._v("属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为"),e("code",[t._v("true")]),t._v("即可。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-dropdown>\n  <tis-button type="primary">\n    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </tis-button>\n  <tis-dropdown-menu slot="dropdown">\n    <tis-dropdown-item>黄金糕</tis-dropdown-item>\n    <tis-dropdown-item>狮子头</tis-dropdown-item>\n    <tis-dropdown-item>螺蛳粉</tis-dropdown-item>\n    <tis-dropdown-item>双皮奶</tis-dropdown-item>\n    <tis-dropdown-item>蚵仔煎</tis-dropdown-item>\n  </tis-dropdown-menu>\n</tis-dropdown>\n<tis-dropdown split-button type="primary" @click="handleClick">\n  更多菜单\n  <tis-dropdown-menu slot="dropdown">\n    <tis-dropdown-item>黄金糕</tis-dropdown-item>\n    <tis-dropdown-item>狮子头</tis-dropdown-item>\n    <tis-dropdown-item>螺蛳粉</tis-dropdown-item>\n    <tis-dropdown-item>双皮奶</tis-dropdown-item>\n    <tis-dropdown-item>蚵仔煎</tis-dropdown-item>\n  </tis-dropdown-menu>\n</tis-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),t._m(3),e("p",[t._v("可以配置 click 激活或者 hover 激活。")]),e("demo-block",[e("div",[e("p",[t._v("在"),e("code",[t._v("trigger")]),t._v("属性设置为"),e("code",[t._v("click")]),t._v("即可。")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-row class="block-col-2">\n  <tis-col :span="12">\n    <span class="demonstration">click 激活</span>\n    <tis-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <tis-dropdown-menu slot="dropdown">\n        <tis-dropdown-item icon="el-icon-plus">黄金糕</tis-dropdown-item>\n        <tis-dropdown-item icon="el-icon-circle-plus">狮子头</tis-dropdown-item>\n        <tis-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</tis-dropdown-item>\n        <tis-dropdown-item icon="el-icon-check">双皮奶</tis-dropdown-item>\n        <tis-dropdown-item icon="el-icon-circle-check">蚵仔煎</tis-dropdown-item>\n      </tis-dropdown-menu>\n    </tis-dropdown>\n  </tis-col>\n</tis-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),t._m(4),t._m(5),e("demo-block",[e("div",[e("p",[t._v("下拉菜单默认在点击菜单项后会被隐藏，将"),e("code",[t._v("hide-on-click")]),t._v("属性默认为"),e("code",[t._v("false")]),t._v("可以关闭此功能。")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-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  <tis-dropdown-menu slot="dropdown">\n    <tis-dropdown-item>黄金糕</tis-dropdown-item>\n    <tis-dropdown-item>狮子头</tis-dropdown-item>\n    <tis-dropdown-item>螺蛳粉</tis-dropdown-item>\n    <tis-dropdown-item disabled>双皮奶</tis-dropdown-item>\n    <tis-dropdown-item divided>蚵仔煎</tis-dropdown-item>\n  </tis-dropdown-menu>\n</tis-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),t._m(6),e("p",[t._v("点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <tis-dropdown-menu slot="dropdown">\n    <tis-dropdown-item command="a">黄金糕</tis-dropdown-item>\n    <tis-dropdown-item command="b">狮子头</tis-dropdown-item>\n    <tis-dropdown-item command="c">螺蛳粉</tis-dropdown-item>\n    <tis-dropdown-item command="d" disabled>双皮奶</tis-dropdown-item>\n    <tis-dropdown-item command="e" divided>蚵仔煎</tis-dropdown-item>\n  </tis-dropdown-menu>\n</tis-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),t._m(7),e("p",[t._v("Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。")]),e("demo-block",[e("div",[e("p",[t._v("额外的尺寸："),e("code",[t._v("medium")]),t._v("、"),e("code",[t._v("small")]),t._v("、"),e("code",[t._v("mini")]),t._v("，通过设置"),e("code",[t._v("size")]),t._v("属性来配置它们。")])]),e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-dropdown split-button type="primary">\n  默认尺寸\n  <tis-dropdown-menu slot="dropdown">\n    <tis-dropdown-item>黄金糕</tis-dropdown-item>\n    <tis-dropdown-item>狮子头</tis-dropdown-item>\n    <tis-dropdown-item>螺蛳粉</tis-dropdown-item>\n    <tis-dropdown-item>双皮奶</tis-dropdown-item>\n    <tis-dropdown-item>蚵仔煎</tis-dropdown-item>\n  </tis-dropdown-menu>\n</tis-dropdown>\n\n<tis-dropdown size="medium" split-button type="primary">\n  中等尺寸\n  <tis-dropdown-menu slot="dropdown">\n    <tis-dropdown-item>黄金糕</tis-dropdown-item>\n    <tis-dropdown-item>狮子头</tis-dropdown-item>\n    <tis-dropdown-item>螺蛳粉</tis-dropdown-item>\n    <tis-dropdown-item>双皮奶</tis-dropdown-item>\n    <tis-dropdown-item>蚵仔煎</tis-dropdown-item>\n  </tis-dropdown-menu>\n</tis-dropdown>\n\n<tis-dropdown size="small" split-button type="primary">\n  小型尺寸\n  <tis-dropdown-menu slot="dropdown">\n    <tis-dropdown-item>黄金糕</tis-dropdown-item>\n    <tis-dropdown-item>狮子头</tis-dropdown-item>\n    <tis-dropdown-item>螺蛳粉</tis-dropdown-item>\n    <tis-dropdown-item>双皮奶</tis-dropdown-item>\n    <tis-dropdown-item>蚵仔煎</tis-dropdown-item>\n  </tis-dropdown-menu>\n</tis-dropdown>\n')])])])],2),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dropdown-xia-la-cai-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-xia-la-cai-dan"}},[this._v("¶")]),this._v(" Dropdown 下拉菜单")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"hong-fa-dui-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-dui-xiang"}},[this._v("¶")]),this._v(" 触发对象")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"hong-fa-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-fang-shi"}},[this._v("¶")]),this._v(" 触发方式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cai-dan-yin-cang-fang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cai-dan-yin-cang-fang-shi"}},[this._v("¶")]),this._v(" 菜单隐藏方式")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("可以"),e("code",[t._v("hide-on-click")]),t._v("属性来配置。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhi-ling-shi-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-ling-shi-jian"}},[this._v("¶")]),this._v(" 指令事件")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dropdown-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes"}},[this._v("¶")]),this._v(" Dropdown Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("type")]),e("td",[t._v("菜单按钮类型，同 Button 组件(只在"),e("code",[t._v("split-button")]),t._v("为 true 的情况下有效)")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("菜单尺寸，在"),e("code",[t._v("split-button")]),t._v("为 true 的情况下也对触发按钮生效")]),e("td",[t._v("string")]),e("td",[t._v("medium / small / mini")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("split-button")]),e("td",[t._v("下拉触发元素呈现为按钮组")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("placement")]),e("td",[t._v("菜单弹出位置")]),e("td",[t._v("string")]),e("td",[t._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),e("td",[t._v("bottom-end")])]),e("tr",[e("td",[t._v("trigger")]),e("td",[t._v("触发下拉的行为")]),e("td",[t._v("string")]),e("td",[t._v("hover, click")]),e("td",[t._v("hover")])]),e("tr",[e("td",[t._v("hide-on-click")]),e("td",[t._v("是否在点击菜单项后隐藏菜单")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("show-timeout")]),e("td",[t._v("展开下拉菜单的延时（仅在 trigger 为 hover 时有效）")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("250")])]),e("tr",[e("td",[t._v("hide-timeout")]),e("td",[t._v("收起下拉菜单的延时（仅在 trigger 为 hover 时有效）")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("150")])]),e("tr",[e("td",[t._v("tabindex")]),e("td",[t._v("Dropdown 组件的 "),e("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"}},[t._v("tabindex")])]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("0")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("Name")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("—")]),e("td",[t._v("触发下拉列表显示的元素。 注意： 必须是一个元素或者或者组件")])]),e("tr",[e("td",[t._v("dropdown")]),e("td",[t._v("下拉列表，通常是 "),e("code",[t._v("<tis-dropdown-menu>")]),t._v(" 组件")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dropdown-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events"}},[this._v("¶")]),this._v(" Dropdown Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("click")]),e("td",[e("code",[t._v("split-button")]),t._v(" 为 true 时，点击左侧按钮的回调")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("command")]),e("td",[t._v("点击菜单项触发的事件回调")]),e("td",[t._v("dropdown-item 的指令")])]),e("tr",[e("td",[t._v("visible-change")]),e("td",[t._v("下拉框出现/隐藏时触发")]),e("td",[t._v("出现则为 true，隐藏则为 false")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes"}},[this._v("¶")]),this._v(" Dropdown Menu Item Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("command")]),e("td",[t._v("指令")]),e("td",[t._v("string/number/object")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("divided")]),e("td",[t._v("显示分割线")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("icon")]),e("td",[t._v("图标类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])}],!1,null,null,null);e.default=a.exports},1098:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("m-grid",[e("m-grid-item",{attrs:{icon:"photo-o",text:"文字"}}),t._v(" "),e("m-grid-item",{attrs:{icon:"photo-o",text:"文字"}}),t._v(" "),e("m-grid-item",{attrs:{icon:"photo-o",text:"文字"}}),t._v(" "),e("m-grid-item",{attrs:{icon:"photo-o",text:"文字"}})],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("m-grid",{attrs:{"column-num":3}},this._l(6,function(t){return e("m-grid-item",{key:t,attrs:{icon:"photo-o",text:"文字"}})}),1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-grid",{attrs:{border:!1,"column-num":3}},[t("m-grid-item",[t("m-image",{attrs:{src:"https://img.yzcdn.cn/mt/apple-1.jpg"}})],1),this._v(" "),t("m-grid-item",[t("m-image",{attrs:{src:"https://img.yzcdn.cn/mt/apple-2.jpg"}})],1),this._v(" "),t("m-grid-item",[t("m-image",{attrs:{src:"https://img.yzcdn.cn/mt/apple-3.jpg"}})],1)],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("m-grid",{attrs:{square:""}},this._l(8,function(t){return e("m-grid-item",{key:t,attrs:{icon:"photo-o",text:"文字"}})}),1)],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("m-grid",{attrs:{gutter:10}},this._l(8,function(t){return e("m-grid-item",{key:t,attrs:{icon:"photo-o",text:"文字"}})}),1)],1)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-grid",{attrs:{direction:"horizontal","column-num":2}},[t("m-grid-item",{attrs:{icon:"photo-o",text:"文字"}}),this._v(" "),t("m-grid-item",{attrs:{icon:"photo-o",text:"文字"}}),this._v(" "),t("m-grid-item",{attrs:{icon:"photo-o",text:"文字"}})],1)],1)},staticRenderFns:[]},{}),"element-demo6":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-grid",{attrs:{clickable:"","column-num":2}},[t("m-grid-item",{attrs:{icon:"home-o",text:"路由跳转",to:"/"}}),this._v(" "),t("m-grid-item",{attrs:{icon:"search",text:"URL 跳转",url:"/mt/mobile.html"}})],1)],1)},staticRenderFns:[]},{}),"element-demo7":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-grid",{attrs:{"column-num":2}},[t("m-grid-item",{attrs:{icon:"home-o",text:"文字",dot:""}}),this._v(" "),t("m-grid-item",{attrs:{icon:"search",text:"文字",badge:"99+"}})],1)],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("p",[t._v("宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。")]),t._m(2),t._m(3),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-grid>\n  <m-grid-item icon="photo-o" text="文字" />\n  <m-grid-item icon="photo-o" text="文字" />\n  <m-grid-item icon="photo-o" text="文字" />\n  <m-grid-item icon="photo-o" text="文字" />\n</m-grid>\n')])])])],2),t._m(4),t._m(5),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-grid :column-num="3">\n  <m-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />\n</m-grid>\n')])])])],2),t._m(6),e("p",[t._v("通过插槽可以自定义格子展示的内容。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-grid :border="false" :column-num="3">\n  <m-grid-item>\n    <m-image src="https://img.yzcdn.cn/mt/apple-1.jpg" />\n  </m-grid-item>\n  <m-grid-item>\n    <m-image src="https://img.yzcdn.cn/mt/apple-2.jpg" />\n  </m-grid-item>\n  <m-grid-item>\n    <m-image src="https://img.yzcdn.cn/mt/apple-3.jpg" />\n  </m-grid-item>\n</m-grid>\n')])])])],2),t._m(7),t._m(8),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-grid square>\n  <m-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />\n</m-grid>\n')])])])],2),t._m(9),t._m(10),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-grid :gutter="10">\n  <m-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />\n</m-grid>\n')])])])],2),t._m(11),t._m(12),e("demo-block",[e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-grid direction="horizontal" :column-num="2">\n  <m-grid-item icon="photo-o" text="文字" />\n  <m-grid-item icon="photo-o" text="文字" />\n  <m-grid-item icon="photo-o" text="文字" />\n</m-grid>\n')])])])],2),t._m(13),t._m(14),e("demo-block",[e("template",{slot:"source"},[e("element-demo6")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-grid clickable :column-num="2">\n  <m-grid-item icon="home-o" text="路由跳转" to="/" />\n  <m-grid-item icon="search" text="URL 跳转" url="/mt/mobile.html" />\n</m-grid>\n')])])])],2),t._m(15),t._m(16),e("demo-block",[e("template",{slot:"source"},[e("element-demo7")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-grid :column-num="2">\n  <m-grid-item icon="home-o" text="文字" dot />\n  <m-grid-item icon="search" text="文字" badge="99+" />\n</m-grid>\n')])])])],2),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26),t._m(27),t._m(28)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"grid-gong-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grid-gong-ge"}},[this._v("¶")]),this._v(" Grid 宫格")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("icon")]),t._v(" 属性设置格子内的图标，"),e("code",[t._v("text")]),t._v(" 属性设置文字内容。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-lie-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-lie-shu"}},[this._v("¶")]),this._v(" 自定义列数")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("默认一行展示四个格子，可以通过 "),e("code",[t._v("column-num")]),t._v(" 自定义列数。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zheng-fang-xing-ge-zi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zheng-fang-xing-ge-zi"}},[this._v("¶")]),this._v(" 正方形格子")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("设置 "),e("code",[t._v("square")]),t._v(" 属性后，格子的高度会和宽度保持一致。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ge-zi-jian-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ge-zi-jian-ju"}},[this._v("¶")]),this._v(" 格子间距")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("gutter")]),t._v(" 属性设置格子之间的距离。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"nei-rong-heng-pai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nei-rong-heng-pai"}},[this._v("¶")]),this._v(" 内容横排")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("将 "),e("code",[t._v("direction")]),t._v(" 属性设置为 "),e("code",[t._v("horizontal")]),t._v("，可以让宫格的内容呈横向排列。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ye-mian-dao-hang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ye-mian-dao-hang"}},[this._v("¶")]),this._v(" 页面导航")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 "),e("code",[t._v("to")]),t._v(" 属性设置 "),e("code",[t._v("vue-router")]),t._v(" 跳转链接，通过 "),e("code",[t._v("url")]),t._v(" 属性设置 URL 跳转链接。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"hui-biao-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hui-biao-ti-shi"}},[this._v("¶")]),this._v(" 徽标提示")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("设置 "),e("code",[t._v("dot")]),t._v(" 属性后，会在图标右上角展示一个小红点。设置 "),e("code",[t._v("badge")]),t._v(" 属性后，会在图标右上角展示相应的徽标。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"grid-props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grid-props"}},[this._v("¶")]),this._v(" Grid Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("column-num")]),e("td",[t._v("列数")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("4")])])]),e("tr",[e("td",[t._v("icon-size")]),e("td",[t._v("图标大小，默认单位为"),e("code",[t._v("px")])]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("28px")])])]),e("tr",[e("td",[t._v("gutter")]),e("td",[t._v("格子之间的间距，默认单位为"),e("code",[t._v("px")])]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("0")])])]),e("tr",[e("td",[t._v("border")]),e("td",[t._v("是否显示边框")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("center")]),e("td",[t._v("是否将格子内容居中显示")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("square")]),e("td",[t._v("是否将格子固定为正方形")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("clickable")]),e("td",[t._v("是否开启格子点击反馈")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("direction "),e("code",[t._v("v2.8.2")])]),e("td",[t._v("格子内容排列的方向，可选值为 "),e("code",[t._v("horizontal")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("vertical")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"griditem-props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#griditem-props"}},[this._v("¶")]),this._v(" GridItem Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("text")]),e("td",[t._v("文字")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("icon")]),e("td",[e("a",{attrs:{href:"#/zh-CN/icon"}},[t._v("图标名称")]),t._v("或图片链接")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("icon-prefix "),e("code",[t._v("v2.5.3")])]),e("td",[t._v("图标类名前缀，同 Icon 组件的 "),e("a",{attrs:{href:"#/zh-CN/icon#props"}},[t._v("class-prefix 属性")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("m-icon")])])]),e("tr",[e("td",[t._v("dot")]),e("td",[t._v("是否显示图标右上角小红点")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("badge "),e("code",[t._v("v2.5.6")])]),e("td",[t._v("图标右上角徽标的内容")]),e("td",[e("em",[t._v("number | string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("info "),e("code",[t._v("2.2.1")])]),e("td",[t._v("图标右上角徽标的内容（已废弃，请使用 badge 属性）")]),e("td",[e("em",[t._v("number | string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("url")]),e("td",[t._v("点击后跳转的链接地址")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("to")]),e("td",[t._v("点击后跳转的目标路由对象，同 vue-router 的 "),e("a",{attrs:{href:"https://router.vuejs.org/zh/api/#to"}},[t._v("to 属性")])]),e("td",[e("em",[t._v("string | object")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("replace")]),e("td",[t._v("是否在跳转时替换当前页面历史")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"griditem-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#griditem-events"}},[this._v("¶")]),this._v(" GridItem Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("click")]),e("td",[t._v("点击格子时触发")]),e("td",[e("em",[t._v("event: Event")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"griditem-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#griditem-slots"}},[this._v("¶")]),this._v(" GridItem Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("default")]),e("td",[t._v("自定义宫格的所有内容")])]),e("tr",[e("td",[t._v("icon")]),e("td",[t._v("自定义图标")])]),e("tr",[e("td",[t._v("text")]),e("td",[t._v("自定义文字")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),e("a",{attrs:{href:"#/zh-CN/theme"}},[t._v("主题定制")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@grid-item-content-padding")]),e("td",[e("code",[t._v("@padding-md @padding-xs")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@grid-item-content-background-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@grid-item-content-active-color")]),e("td",[e("code",[t._v("@active-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@grid-item-icon-size")]),e("td",[e("code",[t._v("28px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@grid-item-text-color")]),e("td",[e("code",[t._v("@gray-7")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@grid-item-text-font-size")]),e("td",[e("code",[t._v("@font-size-sm")])]),e("td",[t._v("-")])])])])}],!1,null,null,null);e.default=a.exports},1099:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-radio-group",{model:{value:e.direction,callback:function(t){e.direction=t},expression:"direction"}},[t("tis-radio",{attrs:{label:"rtl"}},[e._v("从右往左开")])],1),e._v(" "),t("tis-button",{staticStyle:{"margin-left":"16px"},attrs:{type:"primary"},on:{click:function(t){e.drawer=!0}}},[e._v("\n  点我打开\n")]),e._v(" "),t("tis-drawer",{attrs:{title:"我是标题",visible:e.drawer,direction:e.direction,"before-close":e.handleClose},on:{"update:visible":function(t){e.drawer=t}}},[t("span",[e._v("我来啦!")])])],1)},staticRenderFns:[]},{data:function(){return{drawer:!1,direction:"rtl"}},methods:{handleClose:function(e){this.$confirm("确认关闭？").then(function(t){e()}).catch(function(t){})}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),t._m(2),e("p",[t._v("呼出一个临时的侧边栏, 可以从多个方向呼出")]),e("demo-block",[e("div",[e("p",[t._v("需要设置 "),e("code",[t._v("visible")]),t._v(" 属性，它的"),e("strong",[t._v("类型")]),t._v("是 "),e("code",[t._v("boolean")]),t._v(",当为 "),e("strong",[t._v("true")]),t._v(" 时显示 Drawer。Drawer 分为两个部分："),e("code",[t._v("title")]),t._v(" 和 "),e("code",[t._v("body")]),t._v("，"),e("code",[t._v("title")]),t._v(" 需要具名为 "),e("strong",[t._v("title")]),t._v(" 的 "),e("code",[t._v("slot")]),t._v(", 也可以通过 "),e("code",[t._v("title")]),t._v(" 属性来定义，默认值为空。需要注意的是, Drawer 默认是从右往左打开, 当然可以设置对应的 "),e("code",[t._v("direction")]),t._v(", 详细请参考 "),e("code",[t._v("direction")]),t._v(" 用法 最后，本例还展示了 "),e("code",[t._v("before-close")]),t._v(" 的用法")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-radio-group v-model="direction">\n  <tis-radio label="rtl">从右往左开</tis-radio>\n</tis-radio-group>\n\n<tis-button @click="drawer = true" type="primary" style="margin-left: 16px;">\n  点我打开\n</tis-button>\n\n<tis-drawer\n  title="我是标题"\n  :visible.sync="drawer"\n  :direction="direction"\n  :before-close="handleClose">\n  <span>我来啦!</span>\n</tis-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),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"drawer-chou-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drawer-chou-ti"}},[this._v("¶")]),this._v(" Drawer 抽屉")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("有些时候, "),e("code",[t._v("Dialog")]),t._v(" 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, "),e("code",[t._v("Drawer")]),t._v(" 拥有和 "),e("code",[t._v("Dialog")]),t._v(" 几乎相同的 API, 在 UI 上带来不一样的体验.")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"drawer-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drawer-attributes"}},[this._v("¶")]),this._v(" Drawer Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("append-to-body")]),e("td",[t._v("Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("before-close")]),e("td",[t._v("关闭前的回调，会暂停 Drawer 的关闭")]),e("td",[t._v("function(done)，done 用于关闭 Drawer")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("close-on-press-escape")]),e("td",[t._v("是否可以通过按下 ESC 关闭 Drawer")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("custom-class")]),e("td",[t._v("Drawer 的自定义类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("destroy-on-close")]),e("td",[t._v("控制是否在关闭 Drawer 之后将子元素全部销毁")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("modal")]),e("td",[t._v("是否需要遮罩层")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("modal-append-to-body")]),e("td",[t._v("遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("direction")]),e("td",[t._v("Drawer 打开的方向")]),e("td",[t._v("Direction")]),e("td",[t._v("rtl / ltr / ttb / btt")]),e("td",[t._v("rtl")])]),e("tr",[e("td",[t._v("show-close")]),e("td",[t._v("是否显示关闭按钮")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("Drawer 窗体的大小, 当使用 "),e("code",[t._v("number")]),t._v(" 类型时, 以像素为单位, 当使用 "),e("code",[t._v("string")]),t._v(" 类型时, 请传入 'x%', 否则便会以 "),e("code",[t._v("number")]),t._v(" 类型解释")]),e("td",[t._v("number / string")]),e("td",[t._v("-")]),e("td",[t._v("'30%'")])]),e("tr",[e("td",[t._v("title")]),e("td",[t._v("Drawer 的标题，也可通过具名 slot （见下表）传入")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("visible")]),e("td",[t._v("是否显示 Drawer，支持 .sync 修饰符")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("wrapperClosable")]),e("td",[t._v("点击遮罩层是否可以关闭 Drawer")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("withHeader")]),e("td",[t._v("控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("true")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"drawer-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drawer-slot"}},[this._v("¶")]),this._v(" Drawer Slot")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("name")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("—")]),e("td",[t._v("Drawer 的内容")])]),e("tr",[e("td",[t._v("title")]),e("td",[t._v("Drawer 标题区的内容")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"drawer-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drawer-methods"}},[this._v("¶")]),this._v(" Drawer Methods")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("name")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("closeDrawer")]),e("td",[t._v("用于关闭 Drawer, 该方法会调用传入的 "),e("code",[t._v("before-close")]),t._v(" 方法")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"drawer-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drawer-events"}},[this._v("¶")]),this._v(" Drawer Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("open")]),e("td",[t._v("Drawer 打开的回调")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("opened")]),e("td",[t._v("Drawer 打开动画结束时的回调")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("close")]),e("td",[t._v("Drawer 关闭的回调")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("closed")]),e("td",[t._v("Drawer 关闭动画结束时的回调")]),e("td",[t._v("—")])])])])}],!1,null,null,null);e.default=a.exports},1100:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[[e("div",[e("span",[t._v("青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪")]),t._v(" "),e("tis-divider"),t._v(" "),e("span",[t._v("少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉")])],1)]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[[e("div",[e("span",[t._v("头上一片晴天，心中一个想念")]),t._v(" "),e("tis-divider",{attrs:{"content-position":"left"}},[t._v("少年包青天")]),t._v(" "),e("span",[t._v("饿了别叫妈, 叫饿了么")]),t._v(" "),e("tis-divider",[e("i",{staticClass:"el-icon-mobile-phone"})]),t._v(" "),e("span",[t._v("为了无法计算的价值")]),t._v(" "),e("tis-divider",{attrs:{"content-position":"right"}},[t._v("阿里云")])],1)]],2)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[[e("div",[e("span",[t._v("雨纷纷")]),t._v(" "),e("tis-divider",{attrs:{direction:"vertical"}}),t._v(" "),e("span",[t._v("旧故里")]),t._v(" "),e("tis-divider",{attrs:{direction:"vertical"}}),t._v(" "),e("span",[t._v("草木深")])],1)]],2)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("区隔内容的分割线。")]),t._m(1),e("p",[t._v("对不同章节的文本段落进行分割。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <div>\n    <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>\n    <tis-divider></tis-divider>\n    <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>\n  </div>\n</template>\n")])])])],2),t._m(2),e("p",[t._v("可以在分割线上自定义文案内容。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <div>\n    <span>头上一片晴天，心中一个想念</span>\n    <tis-divider content-position="left">少年包青天</tis-divider>\n    <span>饿了别叫妈, 叫饿了么</span>\n    <tis-divider><i class="el-icon-mobile-phone"></i></tis-divider>\n    <span>为了无法计算的价值</span>\n    <tis-divider content-position="right">阿里云</tis-divider>\n  </div>\n</template>\n')])])])],2),t._m(3),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <div>\n    <span>雨纷纷</span>\n    <tis-divider direction="vertical"></tis-divider>\n    <span>旧故里</span>\n    <tis-divider direction="vertical"></tis-divider>\n    <span>草木深</span>\n  </div>\n</template>\n')])])])],2),t._m(4),t._m(5)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"divider-fen-ge-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#divider-fen-ge-xian"}},[this._v("¶")]),this._v(" Divider 分割线")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"she-zhi-wen-an"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-wen-an"}},[this._v("¶")]),this._v(" 设置文案")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"chui-zhi-fen-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chui-zhi-fen-ge"}},[this._v("¶")]),this._v(" 垂直分割")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"divider-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#divider-attributes"}},[this._v("¶")]),this._v(" Divider Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("direction")]),e("td",[t._v("设置分割线方向")]),e("td",[t._v("string")]),e("td",[t._v("horizontal / vertical")]),e("td",[t._v("horizontal")])]),e("tr",[e("td",[t._v("content-position")]),e("td",[t._v("设置分割线文案的位置")]),e("td",[t._v("string")]),e("td",[t._v("left / right / center")]),e("td",[t._v("center")])])])])}],!1,null,null,null);e.default=a.exports},1101:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("m-index-bar",[e("m-index-anchor",{attrs:{index:"A"}}),t._v(" "),e("m-cell",{attrs:{title:"文本"}}),t._v(" "),e("m-cell",{attrs:{title:"文本"}}),t._v(" "),e("m-cell",{attrs:{title:"文本"}}),t._v(" "),e("m-index-anchor",{attrs:{index:"B"}}),t._v(" "),e("m-cell",{attrs:{title:"文本"}}),t._v(" "),e("m-cell",{attrs:{title:"文本"}}),t._v(" "),e("m-cell",{attrs:{title:"文本"}}),t._v("\n\n  ...\n")],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("m-index-bar",{attrs:{"index-list":t.indexList}},[e("m-index-anchor",{attrs:{index:"1"}},[t._v("标题1")]),t._v(" "),e("m-cell",{attrs:{title:"文本"}}),t._v(" "),e("m-cell",{attrs:{title:"文本"}}),t._v(" "),e("m-cell",{attrs:{title:"文本"}}),t._v(" "),e("m-index-anchor",{attrs:{index:"2"}},[t._v("标题2")]),t._v(" "),e("m-cell",{attrs:{title:"文本"}}),t._v(" "),e("m-cell",{attrs:{title:"文本"}}),t._v(" "),e("m-cell",{attrs:{title:"文本"}}),t._v("\n\n  ...\n")],1)],1)},staticRenderFns:[]},{data:function(){return{indexList:[1,2,3,4,5,6,7,8,9,10]}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),t._m(2),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-index-bar>\n  <m-index-anchor index="A" />\n  <m-cell title="文本" />\n  <m-cell title="文本" />\n  <m-cell title="文本" />\n\n  <m-index-anchor index="B" />\n  <m-cell title="文本" />\n  <m-cell title="文本" />\n  <m-cell title="文本" />\n\n  ...\n</m-index-bar>\n')])])])],2),t._m(3),t._m(4),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-index-bar :index-list="indexList">\n  <m-index-anchor index="1">标题1</m-index-anchor>\n  <m-cell title="文本" />\n  <m-cell title="文本" />\n  <m-cell title="文本" />\n\n  <m-index-anchor index="2">标题2</m-index-anchor>\n  <m-cell title="文本" />\n  <m-cell title="文本" />\n  <m-cell title="文本" />\n\n  ...\n</m-index-bar>\n\n<script>\nexport default {\n  data() {\n    return {\n      indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"indexbar-suo-yin-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indexbar-suo-yin-lan"}},[this._v("¶")]),this._v(" IndexBar 索引栏")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("点击索引栏时，会自动跳转到对应的 "),e("code",[t._v("IndexAnchor")]),t._v(" 锚点位置。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-suo-yin-lie-biao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-suo-yin-lie-biao"}},[this._v("¶")]),this._v(" 自定义索引列表")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("可以通过 "),e("code",[t._v("index-list")]),t._v(" 属性自定义展示的索引字符列表。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"indexbar-props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indexbar-props"}},[this._v("¶")]),this._v(" IndexBar Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("index-list")]),e("td",[t._v("索引字符列表")]),e("td",[e("em",[t._v("string[] | number[]")])]),e("td",[e("code",[t._v("A-Z")])])]),e("tr",[e("td",[t._v("z-index")]),e("td",[t._v("z-index 层级")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("1")])])]),e("tr",[e("td",[t._v("sticky")]),e("td",[t._v("是否开启锚点自动吸顶")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("sticky-offset-top")]),e("td",[t._v("锚点自动吸顶时与顶部的距离")]),e("td",[e("em",[t._v("number")])]),e("td",[e("code",[t._v("0")])])]),e("tr",[e("td",[t._v("highlight-color")]),e("td",[t._v("索引字符高亮颜色")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("#ee0a24")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"indexanchor-props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indexanchor-props"}},[this._v("¶")]),this._v(" IndexAnchor Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("index")]),e("td",[t._v("索引字符")]),e("td",[e("em",[t._v("number | string")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"indexbar-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indexbar-events"}},[this._v("¶")]),this._v(" IndexBar Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("select")]),e("td",[t._v("点击索引栏的字符时触发")]),e("td",[e("em",[t._v("index: number | string")])])]),e("tr",[e("td",[t._v("change "),e("code",[t._v("v2.10.10")])]),e("td",[t._v("当前高亮的索引字符变化时触发")]),e("td",[e("em",[t._v("index: number | string")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"indexanchor-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indexanchor-slots"}},[this._v("¶")]),this._v(" IndexAnchor Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("default")]),e("td",[t._v("锚点位置显示内容，默认为索引字符")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"indexbar-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indexbar-fang-fa"}},[this._v("¶")]),this._v(" IndexBar 方法")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("通过 ref 可以获取到 IndexBar 实例并调用实例方法，详见"),e("a",{attrs:{href:"#/zh-CN/admced-usage#zu-jian-shi-li-fang-fa"}},[t._v("组件实例方法")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")]),e("th",[t._v("返回值")])])]),e("tbody",[e("tr",[e("td",[t._v("scrollTo "),e("code",[t._v("v2.12.2")])]),e("td",[t._v("滚动到指定锚点")]),e("td",[e("em",[t._v("index: number | string")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),e("a",{attrs:{href:"#/zh-CN/theme"}},[t._v("主题定制")]),t._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@index-bar-sidebar-z-index")]),e("td",[e("code",[t._v("2")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-bar-index-font-size")]),e("td",[e("code",[t._v("@font-size-xs")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-bar-index-line-height")]),e("td",[e("code",[t._v("@line-height-xs")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-bar-index-active-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-z-index")]),e("td",[e("code",[t._v("1")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-padding")]),e("td",[e("code",[t._v("0 @padding-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-text-color")]),e("td",[e("code",[t._v("@text-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-font-weight")]),e("td",[e("code",[t._v("@font-weight-bold")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-line-height")]),e("td",[e("code",[t._v("32px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-background-color")]),e("td",[e("code",[t._v("transparent")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-sticky-text-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-sticky-background-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])])])])}],!1,null,null,null);e.default=a.exports},1102:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-button",{attrs:{type:"text"},on:{click:function(t){e.dialogVisible=!0}}},[e._v("点击打开 Dialog")]),e._v(" "),t("tis-dialog",{attrs:{title:"提示",visible:e.dialogVisible,width:"30%","before-close":e.handleClose},on:{"update:visible":function(t){e.dialogVisible=t}}},[t("span",[e._v("这是一段信息")]),e._v(" "),t("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[t("tis-button",{on:{click:function(t){e.dialogVisible=!1}}},[e._v("取 消")]),e._v(" "),t("tis-button",{attrs:{type:"primary"},on:{click:function(t){e.dialogVisible=!1}}},[e._v("确 定")])],1)])],1)},staticRenderFns:[]},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(e){this.$confirm("确认关闭？").then(function(t){e()}).catch(function(t){})}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-button",{attrs:{type:"text"},on:{click:function(t){e.dialogTableVisible=!0}}},[e._v("打开嵌套表格的 Dialog")]),e._v(" "),t("tis-dialog",{attrs:{title:"收货地址",visible:e.dialogTableVisible},on:{"update:visible":function(t){e.dialogTableVisible=t}}},[t("tis-table",{attrs:{data:e.gridData}},[t("tis-table-column",{attrs:{property:"date",label:"日期",width:"150"}}),e._v(" "),t("tis-table-column",{attrs:{property:"name",label:"姓名",width:"200"}}),e._v(" "),t("tis-table-column",{attrs:{property:"address",label:"地址"}})],1)],1),e._v(" "),t("tis-button",{attrs:{type:"text"},on:{click:function(t){e.dialogFormVisible=!0}}},[e._v("打开嵌套表单的 Dialog")]),e._v(" "),t("tis-dialog",{attrs:{title:"收货地址",visible:e.dialogFormVisible},on:{"update:visible":function(t){e.dialogFormVisible=t}}},[t("tis-form",{attrs:{model:e.form}},[t("tis-form-item",{attrs:{label:"活动名称","label-width":e.formLabelWidth}},[t("tis-input",{attrs:{autocomplete:"off"},model:{value:e.form.name,callback:function(t){e.$set(e.form,"name",t)},expression:"form.name"}})],1),e._v(" "),t("tis-form-item",{attrs:{label:"活动区域","label-width":e.formLabelWidth}},[t("tis-select",{attrs:{placeholder:"请选择活动区域"},model:{value:e.form.region,callback:function(t){e.$set(e.form,"region",t)},expression:"form.region"}},[t("tis-option",{attrs:{label:"区域一",value:"shanghai"}}),e._v(" "),t("tis-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1)],1),e._v(" "),t("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[t("tis-button",{on:{click:function(t){e.dialogFormVisible=!1}}},[e._v("取 消")]),e._v(" "),t("tis-button",{attrs:{type:"primary"},on:{click:function(t){e.dialogFormVisible=!1}}},[e._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 e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-button",{attrs:{type:"text"},on:{click:function(t){e.outerVisible=!0}}},[e._v("点击打开外层 Dialog")]),e._v(" "),t("tis-dialog",{attrs:{title:"外层 Dialog",visible:e.outerVisible},on:{"update:visible":function(t){e.outerVisible=t}}},[t("tis-dialog",{attrs:{width:"30%",title:"内层 Dialog",visible:e.innerVisible,"append-to-body":""},on:{"update:visible":function(t){e.innerVisible=t}}}),e._v(" "),t("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[t("tis-button",{on:{click:function(t){e.outerVisible=!1}}},[e._v("取 消")]),e._v(" "),t("tis-button",{attrs:{type:"primary"},on:{click:function(t){e.innerVisible=!0}}},[e._v("打开内层 Dialog")])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{outerVisible:!1,innerVisible:!1}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-button",{attrs:{type:"text"},on:{click:function(t){e.centerDialogVisible=!0}}},[e._v("点击打开 Dialog")]),e._v(" "),t("tis-dialog",{attrs:{title:"提示",visible:e.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(t){e.centerDialogVisible=t}}},[t("span",[e._v("需要注意的是内容是默认不居中的")]),e._v(" "),t("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[t("tis-button",{on:{click:function(t){e.centerDialogVisible=!1}}},[e._v("取 消")]),e._v(" "),t("tis-button",{attrs:{type:"primary"},on:{click:function(t){e.centerDialogVisible=!1}}},[e._v("确 定")])],1)])],1)},staticRenderFns:[]},{data:function(){return{centerDialogVisible:!1}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("在保留当前页面状态的情况下，告知用户并承载相关操作。")]),t._m(1),e("p",[t._v("Dialog 弹出一个对话框，适合需要定制性更大的场景。")]),e("demo-block",[e("div",[e("p",[t._v("需要设置"),e("code",[t._v("visible")]),t._v("属性，它接收"),e("code",[t._v("Boolean")]),t._v("，当为"),e("code",[t._v("true")]),t._v("时显示 Dialog。Dialog 分为两个部分："),e("code",[t._v("body")]),t._v("和"),e("code",[t._v("footer")]),t._v("，"),e("code",[t._v("footer")]),t._v("需要具名为"),e("code",[t._v("footer")]),t._v("的"),e("code",[t._v("slot")]),t._v("。"),e("code",[t._v("title")]),t._v("属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了"),e("code",[t._v("before-close")]),t._v("的用法。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-button type="text" @click="dialogVisible = true">点击打开 Dialog</tis-button>\n\n<tis-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    <tis-button @click="dialogVisible = false">取 消</tis-button>\n    <tis-button type="primary" @click="dialogVisible = false">确 定</tis-button>\n  </span>\n</tis-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),t._m(2),t._m(3),e("p",[t._v("Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('\x3c!-- Table --\x3e\n<tis-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</tis-button>\n\n<tis-dialog title="收货地址" :visible.sync="dialogTableVisible">\n  <tis-table :data="gridData">\n    <tis-table-column property="date" label="日期" width="150"></tis-table-column>\n    <tis-table-column property="name" label="姓名" width="200"></tis-table-column>\n    <tis-table-column property="address" label="地址"></tis-table-column>\n  </tis-table>\n</tis-dialog>\n\n\x3c!-- Form --\x3e\n<tis-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</tis-button>\n\n<tis-dialog title="收货地址" :visible.sync="dialogFormVisible">\n  <tis-form :model="form">\n    <tis-form-item label="活动名称" :label-width="formLabelWidth">\n      <tis-input v-model="form.name" autocomplete="off"></tis-input>\n    </tis-form-item>\n    <tis-form-item label="活动区域" :label-width="formLabelWidth">\n      <tis-select v-model="form.region" placeholder="请选择活动区域">\n        <tis-option label="区域一" value="shanghai"></tis-option>\n        <tis-option label="区域二" value="beijing"></tis-option>\n      </tis-select>\n    </tis-form-item>\n  </tis-form>\n  <div slot="footer" class="dialog-footer">\n    <tis-button @click="dialogFormVisible = false">取 消</tis-button>\n    <tis-button type="primary" @click="dialogFormVisible = false">确 定</tis-button>\n  </div>\n</tis-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),t._m(4),t._m(5),e("demo-block",[e("div",[e("p",[t._v("正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了"),e("code",[t._v("append-to-body")]),t._v("属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-button type="text" @click="outerVisible = true">点击打开外层 Dialog</tis-button>\n  \n  <tis-dialog title="外层 Dialog" :visible.sync="outerVisible">\n    <tis-dialog\n      width="30%"\n      title="内层 Dialog"\n      :visible.sync="innerVisible"\n      append-to-body>\n    </tis-dialog>\n    <div slot="footer" class="dialog-footer">\n      <tis-button @click="outerVisible = false">取 消</tis-button>\n      <tis-button type="primary" @click="innerVisible = true">打开内层 Dialog</tis-button>\n    </div>\n  </tis-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),t._m(6),e("p",[t._v("标题和底部可水平居中")]),e("demo-block",[e("div",[e("p",[t._v("将"),e("code",[t._v("center")]),t._v("设置为"),e("code",[t._v("true")]),t._v("即可使标题和底部居中。"),e("code",[t._v("center")]),t._v("仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</tis-button>\n\n<tis-dialog\n  title="提示"\n  :visible.sync="centerDialogVisible"\n  width="30%"\n  center>\n  <span>需要注意的是内容是默认不居中的</span>\n  <span slot="footer" class="dialog-footer">\n    <tis-button @click="centerDialogVisible = false">取 消</tis-button>\n    <tis-button type="primary" @click="centerDialogVisible = false">确 定</tis-button>\n  </span>\n</tis-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dialog-dui-hua-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog-dui-hua-kuang"}},[this._v("¶")]),this._v(" Dialog 对话框")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("div",{staticClass:"tip"},[t("p",[t("code",[this._v("before-close")]),this._v(" 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 "),t("code",[this._v("footer")]),this._v(" 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 "),t("code",[this._v("before-close")]),this._v(" 的相关逻辑。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"qian-tao-de-dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-de-dialog"}},[this._v("¶")]),this._v(" 嵌套的 Dialog")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 "),t("code",[this._v("append-to-body")]),this._v(" 属性。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ju-zhong-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ju-zhong-bu-ju"}},[this._v("¶")]),this._v(" 居中布局")])},function(){var t=this.$createElement,t=this._self._c||t;return t("div",{staticClass:"tip"},[t("p",[this._v("Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 "),t("code",[this._v("ref")]),this._v(" 获取相应组件，请在 "),t("code",[this._v("open")]),this._v(" 事件回调中进行。")])])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",{staticClass:"tip"},[e("p",[t._v("如果 "),e("code",[t._v("visible")]),t._v(" 属性绑定的变量位于 Vuex 的 store 内，那么 "),e("code",[t._v(".sync")]),t._v(" 不会正常工作。此时需要去除 "),e("code",[t._v(".sync")]),t._v(" 修饰符，同时监听 Dialog 的 "),e("code",[t._v("open")]),t._v(" 和 "),e("code",[t._v("close")]),t._v(" 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 "),e("code",[t._v("visible")]),t._v(" 属性绑定的变量的值。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("visible")]),e("td",[t._v("是否显示 Dialog，支持 .sync 修饰符")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("title")]),e("td",[t._v("Dialog 的标题，也可通过具名 slot （见下表）传入")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("width")]),e("td",[t._v("Dialog 的宽度")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("50%")])]),e("tr",[e("td",[t._v("fullscreen")]),e("td",[t._v("是否为全屏 Dialog")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("top")]),e("td",[t._v("Dialog CSS 中的 margin-top 值")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("15vh")])]),e("tr",[e("td",[t._v("modal")]),e("td",[t._v("是否需要遮罩层")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("modal-append-to-body")]),e("td",[t._v("遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("append-to-body")]),e("td",[t._v("Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("lock-scroll")]),e("td",[t._v("是否在 Dialog 出现时将 body 滚动锁定")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("custom-class")]),e("td",[t._v("Dialog 的自定义类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("close-on-click-modal")]),e("td",[t._v("是否可以通过点击 modal 关闭 Dialog")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("close-on-press-escape")]),e("td",[t._v("是否可以通过按下 ESC 关闭 Dialog")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("show-close")]),e("td",[t._v("是否显示关闭按钮")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("before-close")]),e("td",[t._v("关闭前的回调，会暂停 Dialog 的关闭")]),e("td",[t._v("function(done)，done 用于关闭 Dialog")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("center")]),e("td",[t._v("是否对头部和底部采用居中布局")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("destroy-on-close")]),e("td",[t._v("关闭时销毁 Dialog 中的元素")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[this._v("¶")]),this._v(" Slot")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("name")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("—")]),e("td",[t._v("Dialog 的内容")])]),e("tr",[e("td",[t._v("title")]),e("td",[t._v("Dialog 标题区的内容")])]),e("tr",[e("td",[t._v("footer")]),e("td",[t._v("Dialog 按钮操作区的内容")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("open")]),e("td",[t._v("Dialog 打开的回调")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("opened")]),e("td",[t._v("Dialog 打开动画结束时的回调")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("close")]),e("td",[t._v("Dialog 关闭的回调")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("closed")]),e("td",[t._v("Dialog 关闭动画结束时的回调")]),e("td",[t._v("—")])])])])}],!1,null,null,null);e.default=a.exports},1105:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-notice-bar",{attrs:{"left-icon":"volume-o",text:"在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"}})],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-notice-bar",{attrs:{scrollable:"",text:"技术是开发它的人的共同灵魂。"}}),this._v(" "),t("m-notice-bar",{attrs:{scrollable:!1,text:"在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"}})],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-notice-bar",{attrs:{wrapable:"",scrollable:!1,text:"在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"}})],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-notice-bar",{attrs:{mode:"closeable"}},[this._v("技术是开发它的人的共同灵魂。")]),this._v(" "),t("m-notice-bar",{attrs:{mode:"link"}},[this._v("技术是开发它的人的共同灵魂。")])],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-notice-bar",{attrs:{color:"#1989fa",background:"#ecf9ff","left-icon":"info-o"}},[this._v("\n  技术是开发它的人的共同灵魂。\n")])],1)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-notice-bar",{attrs:{"left-icon":"volume-o",scrollable:!1}},[t("m-swipe",{staticClass:"notice-swipe",attrs:{vertical:"",autoplay:3e3,"show-indicators":!1}},[t("m-swipe-item",[this._v("内容 1")]),this._v(" "),t("m-swipe-item",[this._v("内容 2")]),this._v(" "),t("m-swipe-item",[this._v("内容 3")])],1)],1)],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("p",[t._v("用于循环播放展示一组消息通知。")]),t._m(2),t._m(3),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-notice-bar\n  left-icon="volume-o"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n')])])])],2),t._m(4),t._m(5),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('\x3c!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 --\x3e\n<m-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />\n\n\x3c!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 --\x3e\n<m-notice-bar\n  :scrollable="false"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n')])])])],2),t._m(6),t._m(7),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-notice-bar\n  wrapable\n  :scrollable="false"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n')])])])],2),t._m(8),t._m(9),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('\x3c!-- closeable 模式，在右侧显示关闭按钮 --\x3e\n<m-notice-bar mode="closeable">技术是开发它的人的共同灵魂。</m-notice-bar>\n\n\x3c!-- link 模式，在右侧显示链接箭头 --\x3e\n<m-notice-bar mode="link">技术是开发它的人的共同灵魂。</m-notice-bar>\n')])])])],2),t._m(10),t._m(11),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">\n  技术是开发它的人的共同灵魂。\n</m-notice-bar>\n')])])])],2),t._m(12),e("p",[t._v("搭配 NoticeBar 和 Swipe 组件可以实现垂直滚动的效果。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-notice-bar left-icon="volume-o" :scrollable="false">\n  <m-swipe\n    vertical\n    class="notice-swipe"\n    :autoplay="3000"\n    :show-indicators="false"\n  >\n    <m-swipe-item>内容 1</m-swipe-item>\n    <m-swipe-item>内容 2</m-swipe-item>\n    <m-swipe-item>内容 3</m-swipe-item>\n  </m-swipe>\n</m-notice-bar>\n\n<style>\n  .notice-swipe {\n    height: 40px;\n    line-height: 40px;\n  }\n</style>\n')])])])],2),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"noticebar-tong-zhi-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#noticebar-tong-zhi-lan"}},[this._v("¶")]),this._v(" NoticeBar 通知栏")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("text")]),this._v(" 属性设置通知栏的内容，通过 "),t("code",[this._v("left-icon")]),this._v(" 属性设置通知栏左侧的图标。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"gun-dong-bo-fang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gun-dong-bo-fang"}},[this._v("¶")]),this._v(" 滚动播放")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通知栏的内容长度溢出时会自动开启滚动播放，通过 "),t("code",[this._v("scrollable")]),this._v(" 属性可以控制该行为。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"duo-xing-zhan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xing-zhan-shi"}},[this._v("¶")]),this._v(" 多行展示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("文字较长时，可以通过设置 "),t("code",[this._v("wrapable")]),this._v(" 属性来开启多行展示。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"tong-zhi-lan-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tong-zhi-lan-mo-shi"}},[this._v("¶")]),this._v(" 通知栏模式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通知栏支持 "),t("code",[this._v("closeable")]),this._v(" 和 "),t("code",[this._v("link")]),this._v(" 两种模式。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-yang-shi"}},[this._v("¶")]),this._v(" 自定义样式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("color")]),this._v(" 属性设置文本颜色，通过 "),t("code",[this._v("background")]),this._v(" 属性设置背景色。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"chui-zhi-gun-dong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chui-zhi-gun-dong"}},[this._v("¶")]),this._v(" 垂直滚动")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("mode")]),e("td",[t._v("通知栏模式，可选值为 "),e("code",[t._v("closeable")]),e("code",[t._v("link")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("''")])])]),e("tr",[e("td",[t._v("text")]),e("td",[t._v("通知文本内容")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("''")])])]),e("tr",[e("td",[t._v("color")]),e("td",[t._v("通知文本颜色")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("#f60")])])]),e("tr",[e("td",[t._v("background")]),e("td",[t._v("滚动条背景")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("#fff7cc")])])]),e("tr",[e("td",[t._v("left-icon")]),e("td",[t._v("左侧"),e("a",{attrs:{href:"#/zh-CN/icon"}},[t._v("图标名称")]),t._v("或图片链接")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("delay")]),e("td",[t._v("动画延迟时间 (s)")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("1")])])]),e("tr",[e("td",[t._v("speed")]),e("td",[t._v("滚动速率 (px/s)")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("50")])])]),e("tr",[e("td",[t._v("scrollable")]),e("td",[t._v("是否开启滚动播放，内容长度溢出时默认开启")]),e("td",[e("em",[t._v("boolean")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("wrapable")]),e("td",[t._v("是否开启文本换行，只在禁用滚动时生效")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("click")]),e("td",[t._v("点击通知栏时触发")]),e("td",[e("em",[t._v("event: Event")])])]),e("tr",[e("td",[t._v("close")]),e("td",[t._v("关闭通知栏时触发")]),e("td",[e("em",[t._v("event: Event")])])]),e("tr",[e("td",[t._v("replay "),e("code",[t._v("v2.6.2")])]),e("td",[t._v("每当滚动栏重新开始滚动时触发")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("内容")])])]),e("tbody",[e("tr",[e("td",[t._v("default")]),e("td",[t._v("通知文本内容")])]),e("tr",[e("td",[t._v("left-icon")]),e("td",[t._v("自定义左侧图标")])]),e("tr",[e("td",[t._v("right-icon")]),e("td",[t._v("自定义右侧图标")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),t("a",{attrs:{href:"#/zh-CN/theme"}},[this._v("主题定制")]),this._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@notice-bar-height")]),e("td",[e("code",[t._v("40px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@notice-bar-padding")]),e("td",[e("code",[t._v("0 @padding-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@notice-bar-wrapable-padding")]),e("td",[e("code",[t._v("@padding-xs @padding-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@notice-bar-text-color")]),e("td",[e("code",[t._v("@orange-dark")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@notice-bar-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@notice-bar-line-height")]),e("td",[e("code",[t._v("24px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@notice-bar-background-color")]),e("td",[e("code",[t._v("@orange-light")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@notice-bar-icon-size")]),e("td",[e("code",[t._v("16px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@notice-bar-icon-min-width")]),e("td",[e("code",[t._v("24px")])]),e("td",[t._v("-")])])])])}],!1,null,null,null);e.default=a.exports},1125:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{shortcuts:[{text:"今天",onClick:function(t){t.$emit("pick",new Date)}},{text:"昨天",onClick:function(t){var e=new Date;e.setTime(e.getTime()-864e5),t.$emit("pick",e)}},{text:"一周前",onClick:function(t){var e=new Date;e.setTime(e.getTime()-6048e5),t.$emit("pick",e)}}]},value1:"",value2:"",value3:""}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-date-picker",{attrs:{type:"datetimerange","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{shortcuts:[{text:"最近一周",onClick:function(t){var e=new Date,n=new Date;n.setTime(n.getTime()-6048e5),t.$emit("pick",[n,e])}},{text:"最近一个月",onClick:function(t){var e=new Date,n=new Date;n.setTime(n.getTime()-2592e6),t.$emit("pick",[n,e])}},{text:"最近三个月",onClick:function(t){var e=new Date,n=new Date;n.setTime(n.getTime()-7776e6),t.$emit("pick",[n,e])}}]},value1:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value2:""}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-date-picker",{attrs:{type:"datetimerange","start-placeholder":"开始日期","end-placeholder":"结束日期","default-time":["12:00:00"]},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})]],2)},staticRenderFns:[]},{data:function(){return{value1:"",value2:""}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("在同一个选择器里选择日期和时间")]),t._m(1),t._m(2),e("demo-block",[e("div",[e("p",[t._v("通过设置"),e("code",[t._v("type")]),t._v("属性为"),e("code",[t._v("datetime")]),t._v("，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-date-picker\n    v-model=\"value1\"\n    type=\"datetime\"\n    placeholder=\"选择日期时间\">\n  </tis-date-picker>\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),t._m(3),e("demo-block",[e("div",[e("p",[t._v("设置"),e("code",[t._v("type")]),t._v("为"),e("code",[t._v("datetimerange")]),t._v("即可选择日期和时间范围")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-date-picker\n    v-model=\"value1\"\n    type=\"datetimerange\"\n    range-separator=\"至\"\n    start-placeholder=\"开始日期\"\n    end-placeholder=\"结束日期\">\n  </tis-date-picker>\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),t._m(4),e("demo-block",[e("div",[e("p",[t._v("使用"),e("code",[t._v("datetimerange")]),t._v("进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的"),e("code",[t._v("00:00:00")]),t._v("作为起始与结束的时刻；通过选项"),e("code",[t._v("default-time")]),t._v("可以控制选中起始与结束日期时所使用的具体时刻。"),e("code",[t._v("default-time")]),t._v("接受一个数组，数组每项值为字符串，形如"),e("code",[t._v("12:00:00")]),t._v("，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-date-picker\n    v-model="value1"\n    type="datetimerange"\n    start-placeholder="开始日期"\n    end-placeholder="结束日期"\n    :default-time="[\'12:00:00\']">\n  </tis-date-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: \'\',\n        value2: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16)],1)},[function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" DateTimePicker 日期时间选择器")])},function(){var t=this.$createElement,t=this._self._c||t;return t("div",{staticClass:"tip"},[t("p",[this._v("DateTimePicker 由 DatePicker 和 TimePicker 派生，"),t("code",[this._v("Picker Options")]),this._v(" 或者其他选项可以参照 DatePicker 和 TimePicker。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ri-qi-he-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-dian"}},[this._v("¶")]),this._v(" 日期和时间点")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 日期和时间范围")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 默认的起始与结束时刻")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值")]),e("td",[t._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("readonly")]),e("td",[t._v("完全只读")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("editable")]),e("td",[t._v("文本框可输入")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("clearable")]),e("td",[t._v("是否显示清除按钮")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("输入框尺寸")]),e("td",[t._v("string")]),e("td",[t._v("large, small, mini")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("placeholder")]),e("td",[t._v("非范围选择时的占位内容")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("start-placeholder")]),e("td",[t._v("范围选择时开始日期的占位内容")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("end-placeholder")]),e("td",[t._v("范围选择时结束日期的占位内容")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("time-arrow-control")]),e("td",[t._v("是否使用箭头进行时间选择")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("type")]),e("td",[t._v("显示类型")]),e("td",[t._v("string")]),e("td",[t._v("year/month/date/week/ datetime/datetimerange/daterange")]),e("td",[t._v("date")])]),e("tr",[e("td",[t._v("format")]),e("td",[t._v("显示在输入框中的格式")]),e("td",[t._v("string")]),e("td",[t._v("见"),e("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[t._v("日期格式")])]),e("td",[t._v("yyyy-MM-dd HH:mm:ss")])]),e("tr",[e("td",[t._v("align")]),e("td",[t._v("对齐方式")]),e("td",[t._v("string")]),e("td",[t._v("left, center, right")]),e("td",[t._v("left")])]),e("tr",[e("td",[t._v("popper-class")]),e("td",[t._v("DateTimePicker 下拉框的类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("picker-options")]),e("td",[t._v("当前时间日期选择器特有的选项参考下表")]),e("td",[t._v("object")]),e("td",[t._v("—")]),e("td",[t._v("{}")])]),e("tr",[e("td",[t._v("range-separator")]),e("td",[t._v("选择范围时的分隔符")]),e("td",[t._v("string")]),e("td",[t._v("-")]),e("td",[t._v("'-'")])]),e("tr",[e("td",[t._v("default-value")]),e("td",[t._v("可选，选择器打开时默认显示的时间")]),e("td",[t._v("Date")]),e("td",[t._v("可被"),e("code",[t._v("new Date()")]),t._v("解析")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("default-time")]),e("td",[t._v("选中日期后的默认具体时刻")]),e("td",[t._v("非范围选择时：string / 范围选择时：string[]")]),e("td",[t._v("非范围选择时：形如"),e("code",[t._v("12:00:00")]),t._v("的字符串；范围选择时：数组，长度为 2，每项值为字符串，形如"),e("code",[t._v("12:00:00")]),t._v("，第一项指定开始日期的时刻，第二项指定结束日期的时刻。不指定会使用时刻 "),e("code",[t._v("00:00:00")])]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("value-format")]),e("td",[t._v("可选，绑定值的格式。不指定则绑定值为 Date 对象")]),e("td",[t._v("string")]),e("td",[t._v("见"),e("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[t._v("日期格式")])]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("name")]),e("td",[t._v("原生属性")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("unlink-panels")]),e("td",[t._v("在范围选择器里取消两个日期面板之间的联动")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("prefix-icon")]),e("td",[t._v("自定义头部图标的类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("el-icon-date")])]),e("tr",[e("td",[t._v("clear-icon")]),e("td",[t._v("自定义清空图标的类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("el-icon-circle-close")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("shortcuts")]),e("td",[t._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),e("td",[t._v("Object[]")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabledDate")]),e("td",[t._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),e("td",[t._v("Function")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("cellClassName")]),e("td",[t._v("设置日期的 className")]),e("td",[t._v("Function(Date)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("firstDayOfWeek")]),e("td",[t._v("周起始日")]),e("td",[t._v("Number")]),e("td",[t._v("1 到 7")]),e("td",[t._v("7")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts"}},[this._v("¶")]),this._v(" Shortcuts")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("text")]),e("td",[t._v("标题文本")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("onClick")]),e("td",[t._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())")]),e("td",[t._v("function")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("Event Name")]),e("th",[t._v("Description")]),e("th",[t._v("Parameters")])])]),e("tbody",[e("tr",[e("td",[t._v("change")]),e("td",[t._v("用户确认选定的值时触发")]),e("td",[t._v("组件绑定值。格式与绑定值一致，可受 "),e("code",[t._v("value-format")]),t._v(" 控制")])]),e("tr",[e("td",[t._v("blur")]),e("td",[t._v("当 input 失去焦点时触发")]),e("td",[t._v("组件实例")])]),e("tr",[e("td",[t._v("focus")]),e("td",[t._v("当 input 获得焦点时触发")]),e("td",[t._v("组件实例")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[this._v("¶")]),this._v(" Methods")])},function(){var t=this.$createElement,t=this._self._c||t;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("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this.$createElement,t=this._self._c||t;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("range-separator")]),t("td",[this._v("自定义分隔符")])])])])}],!1,null,null,null);e.default=a.exports},1132:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-button",{attrs:{type:"primary",text:"组件调用"},on:{click:e.showNotify}}),e._v(" "),t("m-notify",{attrs:{type:"success"},model:{value:e.show,callback:function(t){e.show=t},expression:"show"}},[t("m-icon",{staticStyle:{"margin-right":"4px"},attrs:{name:"bell"}}),e._v(" "),t("span",[e._v("通知内容")])],1)],1)},staticRenderFns:[]},{data:function(){return{show:!1}},methods:{showNotify:function(){var t=this;this.show=!0,setTimeout(function(){t.show=!1},2e3)}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("p",[t._v("在页面顶部展示消息提示，支持函数调用和组件调用两种方式。")]),t._m(2),e("p",[t._v("Notify 是一个函数，调用后会直接在页面中弹出相应的消息提示。")]),t._m(3),t._m(4),e("p",[t._v("通过组件调用 Notify 时，可以通过下面的方式进行注册（从 2.8.5 版本开始支持）：")]),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),e("p",[t._v("自定义消息通知的颜色和展示时长。")]),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),e("p",[t._v("如果需要在 Notify 内嵌入组件或其他自定义内容，可以使用组件调用的方式。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-button type="primary" text="组件调用" @click="showNotify" />\n<m-notify v-model="show" type="success">\n  <m-icon name="bell" style="margin-right: 4px;" />\n  <span>通知内容</span>\n</m-notify>\n\n<script>\nexport default {\n  data() {\n    return {\n      show: false,\n    };\n  },\n  methods: {\n    showNotify() {\n      this.show = true;\n      setTimeout(() => {\n        this.show = false;\n      }, 2000);\n    },\n  },\n};\n<\/script>\n')])])]),e("h2",{attrs:{id:"api"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[t._v("¶")]),t._v(" API")]),e("h3",{attrs:{id:"fang-fa"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa"}},[t._v("¶")]),t._v(" 方法")]),e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")]),e("th",[t._v("返回值")])])]),e("tbody",[e("tr",[e("td",[t._v("Notify")]),e("td",[t._v("展示提示")]),e("td",[e("code",[t._v("options | message")])]),e("td",[t._v("notify 实例")])]),e("tr",[e("td",[t._v("Notify.clear")]),e("td",[t._v("关闭提示")]),e("td",[t._v("-")]),e("td",[e("code",[t._v("void")])])]),e("tr",[e("td",[t._v("Notify.setDefaultOptions")]),e("td",[t._v("修改默认配置，对所有 Notify 生效")]),e("td",[e("code",[t._v("options")])]),e("td",[e("code",[t._v("void")])])]),e("tr",[e("td",[t._v("Notify.resetDefaultOptions")]),e("td",[t._v("重置默认配置，对所有 Notify 生效")]),e("td",[t._v("-")]),e("td",[e("code",[t._v("void")])])])])]),e("h3",{attrs:{id:"options"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#options"}},[t._v("¶")]),t._v(" Options")]),e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("type")]),e("td",[t._v("类型，可选值为 "),e("code",[t._v("primary")]),e("code",[t._v("success")]),e("code",[t._v("warning")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("danger")])])]),e("tr",[e("td",[t._v("message")]),e("td",[t._v("展示文案，支持通过"),e("code",[t._v("\\n")]),t._v("换行")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("duration")]),e("td",[t._v("展示时长(ms)，值为 0 时，notify 不会消失")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("3000")])])]),e("tr",[e("td",[t._v("color")]),e("td",[t._v("字体颜色")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("white")])])]),e("tr",[e("td",[t._v("background")]),e("td",[t._v("背景颜色")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("className")]),e("td",[t._v("自定义类名")]),e("td",[e("em",[t._v("any")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("onClick")]),e("td",[t._v("点击时的回调函数")]),e("td",[e("em",[t._v("Function")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("onOpened")]),e("td",[t._v("完全展示后的回调函数")]),e("td",[e("em",[t._v("Function")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("onClose")]),e("td",[t._v("关闭时的回调函数")]),e("td",[e("em",[t._v("Function")])]),e("td",[t._v("-")])])])]),e("h3",{attrs:{id:"yang-shi-bian-liang"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[t._v("¶")]),t._v(" 样式变量")]),e("p",[t._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),e("a",{attrs:{href:"#/zh-CN/theme"}},[t._v("主题定制")]),t._v("。")]),e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@notify-text-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@notify-padding")]),e("td",[e("code",[t._v("@padding-xs @padding-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@notify-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@notify-line-height")]),e("td",[e("code",[t._v("@line-height-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@notify-primary-background-color")]),e("td",[e("code",[t._v("@blue")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@notify-success-background-color")]),e("td",[e("code",[t._v("@green")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@notify-danger-background-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@notify-warning-background-color")]),e("td",[e("code",[t._v("@orange")])]),e("td",[t._v("-")])])])])],2)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"notify-xiao-xi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notify-xiao-xi-ti-shi"}},[this._v("¶")]),this._v(" Notify 消息提示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"han-shu-diao-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#han-shu-diao-yong"}},[this._v("¶")]),this._v(" 函数调用")])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import { Notify } from 'mt';\n\nNotify('通知内容');\n")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zu-jian-diao-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zu-jian-diao-yong"}},[this._v("¶")]),this._v(" 组件调用")])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import Vue from 'vue';\nimport { Notify } from 'mt';\n\n// 全局注册\nVue.use(Notify);\n\n// 局部注册\nexport default {\n  components: {\n    [Notify.Component.name]: Notify.Component,\n  },\n};\n")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dai-ma-yan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ma-yan-shi"}},[this._v("¶")]),this._v(" 代码演示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-js"},[this._v("Notify('通知内容');\n")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"tong-zhi-lei-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tong-zhi-lei-xing"}},[this._v("¶")]),this._v(" 通知类型")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("支持 "),e("code",[t._v("primary")]),t._v("、"),e("code",[t._v("success")]),t._v("、"),e("code",[t._v("warning")]),t._v("、"),e("code",[t._v("danger")]),t._v(" 四种通知类型，默认为 "),e("code",[t._v("danger")]),t._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-js"},[this._v("// 主要通知\nNotify({ type: 'primary', message: '通知内容' });\n\n// 成功通知\nNotify({ type: 'success', message: '通知内容' });\n\n// 危险通知\nNotify({ type: 'danger', message: '通知内容' });\n\n// 警告通知\nNotify({ type: 'warning', message: '通知内容' });\n")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-tong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-tong-zhi"}},[this._v("¶")]),this._v(" 自定义通知")])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-js"},[this._v("Notify({\n  message: '自定义颜色',\n  color: '#ad0000',\n  background: '#ffe1e1',\n});\n\nNotify({\n  message: '自定义时长',\n  duration: 1000,\n});\n")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"quan-ju-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa"}},[this._v("¶")]),this._v(" 全局方法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 "),t("code",[this._v("$notify")]),this._v(" 方法，便于在组件内调用。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-js"},[this._v("export default {\n  mounted() {\n    this.$notify('提示文案');\n  },\n};\n")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zu-jian-diao-yong-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zu-jian-diao-yong-2"}},[this._v("¶")]),this._v(" 组件调用")])}],!1,null,null,null);e.default=a.exports},1141:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-date-picker",{attrs:{type:"date",placeholder:"选择日期"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{disabledDate:function(t){return t.getTime()>Date.now()},shortcuts:[{text:"今天",onClick:function(t){t.$emit("pick",new Date)}},{text:"昨天",onClick:function(t){var e=new Date;e.setTime(e.getTime()-864e5),t.$emit("pick",e)}},{text:"一周前",onClick:function(t){var e=new Date;e.setTime(e.getTime()-6048e5),t.$emit("pick",e)}}]},value1:"",value2:""}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[e._v("默认")]),e._v(" "),t("tis-date-picker",{attrs:{type:"daterange","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{shortcuts:[{text:"最近一周",onClick:function(t){var e=new Date,n=new Date;n.setTime(n.getTime()-6048e5),t.$emit("pick",[n,e])}},{text:"最近一个月",onClick:function(t){var e=new Date,n=new Date;n.setTime(n.getTime()-2592e6),t.$emit("pick",[n,e])}},{text:"最近三个月",onClick:function(t){var e=new Date,n=new Date;n.setTime(n.getTime()-7776e6),t.$emit("pick",[n,e])}}]},value1:"",value2:""}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[e._v("默认为 Date 对象")]),e._v(" "),t("div",{staticClass:"demonstration"},[e._v("值："+e._s(e.value1))]),e._v(" "),t("tis-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[e._v("使用 value-format")]),e._v(" "),t("div",{staticClass:"demonstration"},[e._v("值："+e._s(e.value2))]),e._v(" "),t("tis-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日","value-format":"yyyy-MM-dd"},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1),e._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[e._v("时间戳")]),e._v(" "),t("div",{staticClass:"demonstration"},[e._v("值："+e._s(e.value3))]),e._v(" "),t("tis-date-picker",{attrs:{type:"date",placeholder:"选择日期",format:"yyyy 年 MM 月 dd 日","value-format":"timestamp"},model:{value:e.value3,callback:function(t){e.value3=t},expression:"value3"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:"",value2:"",value3:""}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("div",{staticClass:"block"},[t("p",[e._v("组件值："+e._s(e.value))]),e._v(" "),t("tis-date-picker",{attrs:{type:"daterange","start-placeholder":"开始日期","end-placeholder":"结束日期","default-time":["00:00:00","23:59:59"]},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:""}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("用于选择或输入日期")]),t._m(1),e("p",[t._v("以「日」为基本单位，基础的日期选择控件")]),e("demo-block",[e("div",[e("p",[t._v("基本单位由"),e("code",[t._v("type")]),t._v("属性指定。快捷选项需配置"),e("code",[t._v("picker-options")]),t._v("对象中的"),e("code",[t._v("shortcuts")]),t._v("，禁用日期通过 "),e("code",[t._v("disabledDate")]),t._v(" 设置，传入函数")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-date-picker\n    v-model=\"value1\"\n    type=\"date\"\n    placeholder=\"选择日期\">\n  </tis-date-picker>\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),t._m(2),e("p",[t._v("可在一个选择器中便捷地选择一个时间范围")]),e("demo-block",[e("div",[e("p",[t._v("在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用"),e("code",[t._v("unlink-panels")]),t._v("属性解除联动。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">默认</span>\n    <tis-date-picker\n      v-model=\"value1\"\n      type=\"daterange\"\n      range-separator=\"至\"\n      start-placeholder=\"开始日期\"\n      end-placeholder=\"结束日期\">\n    </tis-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),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <div class="block">\n    <span class="demonstration">默认为 Date 对象</span>\n    <div class="demonstration">值：{{ value1 }}</div>\n    <tis-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="选择日期"\n      format="yyyy 年 MM 月 dd 日">\n    </tis-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">使用 value-format</span>\n    <div class="demonstration">值：{{ value2 }}</div>\n    <tis-date-picker\n      v-model="value2"\n      type="date"\n      placeholder="选择日期"\n      format="yyyy 年 MM 月 dd 日"\n      value-format="yyyy-MM-dd">\n    </tis-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">时间戳</span>\n    <div class="demonstration">值：{{ value3 }}</div>\n    <tis-date-picker\n      v-model="value3"\n      type="date"\n      placeholder="选择日期"\n      format="yyyy 年 MM 月 dd 日"\n      value-format="timestamp">\n    </tis-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),t._m(8),e("p",[t._v("在选择日期范围时，指定起始日期和结束日期的默认时刻。")]),e("demo-block",[e("div",[e("p",[t._v("选择日期范围时，默认情况下，起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过"),e("code",[t._v("default-time")]),t._v("可以分别指定二者的具体时刻。"),e("code",[t._v("default-time")]),t._v("接受一个数组，其中的值为形如"),e("code",[t._v("12:00:00")]),t._v("的字符串，第一个值控制起始日期的时刻，第二个值控制结束日期的时刻。")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <div class="block">\n    <p>组件值：{{ value }}</p>\n    <tis-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    </tis-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),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"datepicker-ri-qi-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker-ri-qi-xuan-ze-qi"}},[this._v("¶")]),this._v(" DatePicker 日期选择器")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xuan-ze-ri"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri"}},[this._v("¶")]),this._v(" 选择日")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xuan-ze-ri-qi-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri-qi-fan-wei"}},[this._v("¶")]),this._v(" 选择日期范围")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ri-qi-ge-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-ge-shi"}},[this._v("¶")]),this._v(" 日期格式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("使用"),t("code",[this._v("format")]),this._v("指定输入框的格式；使用"),t("code",[this._v("value-format")]),this._v("指定绑定值的格式。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("默认情况下，组件接受并返回"),t("code",[this._v("Date")]),this._v("对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：")])},function(){var t=this.$createElement,t=this._self._c||t;return t("div",{staticClass:"warning"},[t("p",[this._v("请注意大小写")])])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("格式")]),e("th",[t._v("含义")]),e("th",[t._v("备注")]),e("th",[t._v("举例")])])]),e("tbody",[e("tr",[e("td",[e("code",[t._v("yyyy")])]),e("td",[t._v("年")]),e("td"),e("td",[t._v("2017")])]),e("tr",[e("td",[e("code",[t._v("M")])]),e("td",[t._v("月")]),e("td",[t._v("不补0")]),e("td",[t._v("1")])]),e("tr",[e("td",[e("code",[t._v("MM")])]),e("td",[t._v("月")]),e("td"),e("td",[t._v("01")])]),e("tr",[e("td",[e("code",[t._v("W")])]),e("td",[t._v("周")]),e("td",[t._v("仅周选择器的 "),e("code",[t._v("format")]),t._v(" 可用；不补0")]),e("td",[t._v("1")])]),e("tr",[e("td",[e("code",[t._v("WW")])]),e("td",[t._v("周")]),e("td",[t._v("仅周选择器的 "),e("code",[t._v("format")]),t._v(" 可用")]),e("td",[t._v("01")])]),e("tr",[e("td",[e("code",[t._v("d")])]),e("td",[t._v("日")]),e("td",[t._v("不补0")]),e("td",[t._v("2")])]),e("tr",[e("td",[e("code",[t._v("dd")])]),e("td",[t._v("日")]),e("td"),e("td",[t._v("02")])]),e("tr",[e("td",[e("code",[t._v("H")])]),e("td",[t._v("小时")]),e("td",[t._v("24小时制；不补0")]),e("td",[t._v("3")])]),e("tr",[e("td",[e("code",[t._v("HH")])]),e("td",[t._v("小时")]),e("td",[t._v("24小时制")]),e("td",[t._v("03")])]),e("tr",[e("td",[e("code",[t._v("h")])]),e("td",[t._v("小时")]),e("td",[t._v("12小时制，须和 "),e("code",[t._v("A")]),t._v(" 或 "),e("code",[t._v("a")]),t._v(" 使用；不补0")]),e("td",[t._v("3")])]),e("tr",[e("td",[e("code",[t._v("hh")])]),e("td",[t._v("小时")]),e("td",[t._v("12小时制，须和 "),e("code",[t._v("A")]),t._v(" 或 "),e("code",[t._v("a")]),t._v(" 使用")]),e("td",[t._v("03")])]),e("tr",[e("td",[e("code",[t._v("m")])]),e("td",[t._v("分钟")]),e("td",[t._v("不补0")]),e("td",[t._v("4")])]),e("tr",[e("td",[e("code",[t._v("mm")])]),e("td",[t._v("分钟")]),e("td"),e("td",[t._v("04")])]),e("tr",[e("td",[e("code",[t._v("s")])]),e("td",[t._v("秒")]),e("td",[t._v("不补0")]),e("td",[t._v("5")])]),e("tr",[e("td",[e("code",[t._v("ss")])]),e("td",[t._v("秒")]),e("td"),e("td",[t._v("05")])]),e("tr",[e("td",[e("code",[t._v("A")])]),e("td",[t._v("AM/PM")]),e("td",[t._v("仅 "),e("code",[t._v("format")]),t._v(" 可用，大写")]),e("td",[t._v("AM")])]),e("tr",[e("td",[e("code",[t._v("a")])]),e("td",[t._v("am/pm")]),e("td",[t._v("仅 "),e("code",[t._v("format")]),t._v(" 可用，小写")]),e("td",[t._v("am")])]),e("tr",[e("td",[e("code",[t._v("timestamp")])]),e("td",[t._v("JS时间戳")]),e("td",[t._v("仅 "),e("code",[t._v("value-format")]),t._v(" 可用；组件绑定值为"),e("code",[t._v("number")]),t._v("类型")]),e("td",[t._v("1483326245000")])]),e("tr",[e("td",[e("code",[t._v("[MM]")])]),e("td",[t._v("不需要格式化字符")]),e("td",[t._v("使用方括号标识不需要格式化的字符 (如  [A] [MM])")]),e("td",[t._v("MM")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"mo-ren-xian-shi-ri-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-xian-shi-ri-qi"}},[this._v("¶")]),this._v(" 默认显示日期")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值")]),e("td",[t._v("date(DatePicker) / array(DateRangePicker)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("readonly")]),e("td",[t._v("完全只读")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("editable")]),e("td",[t._v("文本框可输入")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("clearable")]),e("td",[t._v("是否显示清除按钮")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("输入框尺寸")]),e("td",[t._v("string")]),e("td",[t._v("large, small, mini")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("placeholder")]),e("td",[t._v("非范围选择时的占位内容")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("start-placeholder")]),e("td",[t._v("范围选择时开始日期的占位内容")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("end-placeholder")]),e("td",[t._v("范围选择时结束日期的占位内容")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("type")]),e("td",[t._v("显示类型")]),e("td",[t._v("string")]),e("td",[t._v("year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange")]),e("td",[t._v("date")])]),e("tr",[e("td",[t._v("format")]),e("td",[t._v("显示在输入框中的格式")]),e("td",[t._v("string")]),e("td",[t._v("见"),e("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[t._v("日期格式")])]),e("td",[t._v("yyyy-MM-dd")])]),e("tr",[e("td",[t._v("align")]),e("td",[t._v("对齐方式")]),e("td",[t._v("string")]),e("td",[t._v("left, center, right")]),e("td",[t._v("left")])]),e("tr",[e("td",[t._v("popper-class")]),e("td",[t._v("DatePicker 下拉框的类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("picker-options")]),e("td",[t._v("当前时间日期选择器特有的选项参考下表")]),e("td",[t._v("object")]),e("td",[t._v("—")]),e("td",[t._v("{}")])]),e("tr",[e("td",[t._v("range-separator")]),e("td",[t._v("选择范围时的分隔符")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("'-'")])]),e("tr",[e("td",[t._v("default-value")]),e("td",[t._v("可选，选择器打开时默认显示的时间")]),e("td",[t._v("Date")]),e("td",[t._v("可被"),e("code",[t._v("new Date()")]),t._v("解析")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("default-time")]),e("td",[t._v("范围选择时选中日期所使用的当日内具体时刻")]),e("td",[t._v("string[]")]),e("td",[t._v("数组，长度为 2，每项值为字符串，形如"),e("code",[t._v("12:00:00")]),t._v("，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 "),e("code",[t._v("00:00:00")])]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("value-format")]),e("td",[t._v("可选，绑定值的格式。不指定则绑定值为 Date 对象")]),e("td",[t._v("string")]),e("td",[t._v("见"),e("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[t._v("日期格式")])]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("name")]),e("td",[t._v("原生属性")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("unlink-panels")]),e("td",[t._v("在范围选择器里取消两个日期面板之间的联动")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("prefix-icon")]),e("td",[t._v("自定义头部图标的类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("el-icon-date")])]),e("tr",[e("td",[t._v("clear-icon")]),e("td",[t._v("自定义清空图标的类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("el-icon-circle-close")])]),e("tr",[e("td",[t._v("validate-event")]),e("td",[t._v("输入时是否触发表单的校验")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("true")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-options"}},[this._v("¶")]),this._v(" Picker Options")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("shortcuts")]),e("td",[t._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),e("td",[t._v("Object[]")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabledDate")]),e("td",[t._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),e("td",[t._v("Function")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("cellClassName")]),e("td",[t._v("设置日期的 className")]),e("td",[t._v("Function(Date)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("firstDayOfWeek")]),e("td",[t._v("周起始日")]),e("td",[t._v("Number")]),e("td",[t._v("1 到 7")]),e("td",[t._v("7")])]),e("tr",[e("td",[t._v("onPick")]),e("td",[t._v("选中日期后会执行的回调，只有当 "),e("code",[t._v("daterange")]),t._v(" 或 "),e("code",[t._v("datetimerange")]),t._v(" 才生效")]),e("td",[t._v("Function({ maxDate, minDate })")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shortcuts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts"}},[this._v("¶")]),this._v(" Shortcuts")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("text")]),e("td",[t._v("标题文本")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("onClick")]),e("td",[t._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())")]),e("td",[t._v("function")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("change")]),e("td",[t._v("用户确认选定的值时触发")]),e("td",[t._v("组件绑定值。格式与绑定值一致，可受 "),e("code",[t._v("value-format")]),t._v(" 控制")])]),e("tr",[e("td",[t._v("blur")]),e("td",[t._v("当 input 失去焦点时触发")]),e("td",[t._v("组件实例")])]),e("tr",[e("td",[t._v("focus")]),e("td",[t._v("当 input 获得焦点时触发")]),e("td",[t._v("组件实例")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[this._v("¶")]),this._v(" Methods")])},function(){var t=this.$createElement,t=this._self._c||t;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);e.default=a.exports},1181:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell",{on:{click:e.showKeyboard}},[e._v("弹出默认键盘")]),e._v(" "),t("m-number-keyboard",{attrs:{show:e.show},on:{blur:function(t){e.show=!1},input:e.onInput,delete:e.onDelete}})],1)},staticRenderFns:[]},{data:function(){return{show:!1}},methods:{onInput:function(t){},onDelete:function(){},showKeyboard:function(){this.show=!this.show}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell",{on:{click:e.showKeyboard}},[e._v("弹出custom键盘")]),e._v(" "),t("m-number-keyboard",{attrs:{show:e.show,theme:"custom","extra-key":".","close-button-text":"完成"},on:{blur:function(t){e.show=!1},input:e.onInput,delete:e.onDelete}})],1)},staticRenderFns:[]},{data:function(){return{show:!1}},methods:{onInput:function(t){},onDelete:function(){},showKeyboard:function(){this.show=!this.show}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell",{attrs:{plain:"",type:"primary"},on:{click:e.showKeyboard}},[e._v("\n  弹出身份证号键盘\n")]),e._v(" "),t("m-number-keyboard",{attrs:{show:e.show,"extra-key":"X","close-button-text":"完成"},on:{blur:function(t){e.show=!1},input:e.onInput,delete:e.onDelete}})],1)},staticRenderFns:[]},{data:function(){return{show:!1}},methods:{onInput:function(t){},onDelete:function(){},showKeyboard:function(){this.show=!this.show}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell",{attrs:{plain:"",type:"info"},on:{click:e.showKeyboard}},[e._v("\n  弹出带标题的键盘\n")]),e._v(" "),t("m-number-keyboard",{attrs:{show:e.show,title:"键盘标题","extra-key":".","close-button-text":"完成"},on:{blur:function(t){e.show=!1},input:e.onInput,delete:e.onDelete}})],1)},staticRenderFns:[]},{data:function(){return{show:!1}},methods:{onInput:function(t){},onDelete:function(){},showKeyboard:function(){this.show=!this.show}}}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell",{attrs:{plain:"",type:"primary"},on:{click:e.showKeyboard}},[e._v("\n  弹出配置多个按键的键盘\n")]),e._v(" "),t("m-number-keyboard",{attrs:{show:e.show,"extra-key":["00","."],"close-button-text":"完成"},on:{blur:function(t){e.show=!1},input:e.onInput,delete:e.onDelete}})],1)},staticRenderFns:[]},{data:function(){return{show:!1}},methods:{onInput:function(t){},onDelete:function(){},showKeyboard:function(){this.show=!this.show}}}),"element-demo5":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-cell",{on:{click:e.showKeyboard}},[e._v("\n  弹出配置随机数字的键盘\n")]),e._v(" "),t("m-number-keyboard",{attrs:{show:e.show,"random-key-order":""},on:{blur:function(t){e.show=!1},input:e.onInput,delete:e.onDelete}})],1)},staticRenderFns:[]},{data:function(){return{show:!1}},methods:{onInput:function(t){},onDelete:function(){},showKeyboard:function(){this.show=!this.show}}}),"element-demo6":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{readonly:"",clickable:"",value:e.value},on:{click:e.showKeyboard}}),e._v(" "),t("m-number-keyboard",{attrs:{show:e.show,maxlength:6},on:{blur:function(t){e.show=!1}},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{show:!1,value:""}},methods:{onInput:function(t){},onDelete:function(){},showKeyboard:function(){this.show=!this.show}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),t._m(2),t._m(3),t._m(4),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell @click="showKeyboard">弹出默认键盘</m-cell>\n<m-number-keyboard\n  :show="show"\n  @blur="show = false"\n  @input="onInput"\n  @delete="onDelete"\n/>\n\n<script>\n\nexport default {\n  data() {\n    return {\n      show: false,\n    };\n  },\n  methods: {\n    onInput(value) {\n    },\n    onDelete() {\n    },\n    showKeyboard() {\n      this.show = !this.show;\n    }\n  },\n};\n<\/script>\n')])])])],2),t._m(5),t._m(6),t._m(7),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell @click="showKeyboard">弹出custom键盘</m-cell>\n<m-number-keyboard\n  :show="show"\n  theme="custom"\n  extra-key="."\n  close-button-text="完成"\n  @blur="show = false"\n  @input="onInput"\n  @delete="onDelete"\n/>\n\n<script>\n\nexport default {\n  data() {\n    return {\n      show: false,\n    };\n  },\n  methods: {\n    onInput(value) {\n    },\n    onDelete() {\n    },\n    showKeyboard() {\n      this.show = !this.show;\n    }\n  },\n};\n<\/script>\n')])])])],2),t._m(8),t._m(9),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell plain type="primary" @click="showKeyboard">\n  弹出身份证号键盘\n</m-cell>\n<m-number-keyboard\n  :show="show"\n  extra-key="X"\n  close-button-text="完成"\n  @blur="show = false"\n  @input="onInput"\n  @delete="onDelete"\n/>\n\n<script>\nexport default {\n  data() {\n    return {\n      show: false,\n    };\n  },\n  methods: {\n    onInput(value) {\n    },\n    onDelete() {\n    },\n    showKeyboard() {\n      this.show = !this.show;\n    }\n  },\n};\n<\/script>\n')])])])],2),t._m(10),t._m(11),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell plain type="info" @click="showKeyboard">\n  弹出带标题的键盘\n</m-cell>\n<m-number-keyboard\n  :show="show"\n  title="键盘标题"\n  extra-key="."\n  close-button-text="完成"\n  @blur="show = false"\n  @input="onInput"\n  @delete="onDelete"\n/>\n\n<script>\nexport default {\n  data() {\n    return {\n      show: false,\n    };\n  },\n  methods: {\n    onInput(value) {\n    },\n    onDelete() {\n    },\n    showKeyboard() {\n      this.show = !this.show;\n    }\n  },\n};\n<\/script>\n')])])])],2),t._m(12),t._m(13),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell plain type="primary" @click="showKeyboard">\n  弹出配置多个按键的键盘\n</m-cell>\n<m-number-keyboard\n  :show="show"\n  :extra-key="[\'00\', \'.\']"\n  close-button-text="完成"\n  @blur="show = false"\n  @input="onInput"\n  @delete="onDelete"\n/>\n\n<script>\nexport default {\n  data() {\n    return {\n      show: false,\n    };\n  },\n  methods: {\n    onInput(value) {\n    },\n    onDelete() {\n    },\n    showKeyboard() {\n      this.show = !this.show;\n    }\n  },\n};\n<\/script>\n')])])])],2),t._m(14),t._m(15),e("demo-block",[e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-cell @click="showKeyboard">\n  弹出配置随机数字的键盘\n</m-cell>\n<m-number-keyboard\n  :show="show"\n  random-key-order\n  @blur="show = false"\n  @input="onInput"\n  @delete="onDelete"\n/>\n\n<script>\nexport default {\n  data() {\n    return {\n      show: false,\n    };\n  },\n  methods: {\n    onInput(value) {\n    },\n    onDelete() {\n    },\n    showKeyboard() {\n      this.show = !this.show;\n    }\n  },\n};\n<\/script>\n')])])])],2),t._m(16),t._m(17),e("demo-block",[e("template",{slot:"source"},[e("element-demo6")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-field\n  readonly\n  clickable\n  :value="value"\n  @click="showKeyboard"\n/>\n<m-number-keyboard\n  v-model="value"\n  :show="show"\n  :maxlength="6"\n  @blur="show = false"\n/>\n\n<script>\nexport default {\n  data() {\n    return {\n      show: false,\n      value: \'\',\n    };\n  },\n  methods: {\n    onInput(value) {\n    },\n    onDelete() {\n    },\n    showKeyboard() {\n      this.show = !this.show;\n    }\n  },\n};\n<\/script>\n')])])])],2),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26),t._m(27),t._m(28),t._m(29),t._m(30)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"numberkeyboard-shu-zi-jian-pan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#numberkeyboard-shu-zi-jian-pan"}},[this._v("¶")]),this._v(" NumberKeyboard 数字键盘")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("虚拟数字键盘，可以配合"),t("a",{attrs:{href:"#/zh-CN/password-input"}},[this._v("密码输入框组件")]),this._v("或自定义的输入框组件使用。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"mo-ren-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-yang-shi"}},[this._v("¶")]),this._v(" 默认样式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("数字键盘提供了 "),t("code",[this._v("input")]),this._v("、"),t("code",[this._v("delete")]),this._v("、"),t("code",[this._v("blur")]),this._v(" 事件，分别对应输入内容、删除内容和失去焦点的动作。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("点击键盘以外的区域时，键盘会自动收起，通过阻止元素上的 touchstart 事件冒泡可以避免键盘收起。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dai-you-ce-lan-de-jian-pan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-ce-lan-de-jian-pan"}},[this._v("¶")]),this._v(" 带右侧栏的键盘")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("将 theme 属性设置为 "),t("code",[this._v("custom")]),this._v(" 来展示键盘的右侧栏，常用于输入金额的场景。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shen-fen-zheng-hao-jian-pan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shen-fen-zheng-hao-jian-pan"}},[this._v("¶")]),this._v(" 身份证号键盘")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("extra-key")]),this._v(" 属性可以设置左下角按键内容，比如需要输入身份证号时，可以将 "),t("code",[this._v("extra-key")]),this._v(" 设置为 "),t("code",[this._v("X")]),this._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jian-pan-biao-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jian-pan-biao-ti"}},[this._v("¶")]),this._v(" 键盘标题")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("title")]),this._v(" 属性可以设置键盘标题。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"pei-zhi-duo-ge-an-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pei-zhi-duo-ge-an-jian"}},[this._v("¶")]),this._v(" 配置多个按键")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("当 theme 为 "),t("code",[this._v("custom")]),this._v(" 时，支持以数组的形式配置两个 "),t("code",[this._v("extra-key")]),this._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"sui-ji-shu-zi-jian-pan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sui-ji-shu-zi-jian-pan"}},[this._v("¶")]),this._v(" 随机数字键盘")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("random-key-order")]),this._v(" 属性可以随机排序数字键盘，常用于安全等级较高的场景。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shuang-xiang-bang-ding"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shuang-xiang-bang-ding"}},[this._v("¶")]),this._v(" 双向绑定")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("可以通过 "),t("code",[this._v("v-model")]),this._v(" 绑定键盘当前输入值。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("v-model (value)")]),e("td",[t._v("当前输入值")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("show")]),e("td",[t._v("是否显示键盘")]),e("td",[e("em",[t._v("boolean")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("title")]),e("td",[t._v("键盘标题")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("theme")]),e("td",[t._v("样式风格，可选值为 "),e("code",[t._v("custom")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("default")])])]),e("tr",[e("td",[t._v("maxlength")]),e("td",[t._v("输入值最大长度")]),e("td",[e("em",[t._v("number | string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("transition")]),e("td",[t._v("是否开启过场动画")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("z-index")]),e("td",[t._v("键盘 z-index 层级")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("100")])])]),e("tr",[e("td",[t._v("extra-key "),e("code",[t._v("v2.8.2")])]),e("td",[t._v("底部额外按键的内容")]),e("td",[e("em",[t._v("string | string[]")])]),e("td",[e("code",[t._v("''")])])]),e("tr",[e("td",[t._v("close-button-text")]),e("td",[t._v("关闭按钮文字，空则不展示")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("delete-button-text")]),e("td",[t._v("删除按钮文字，空则展示删除图标")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("close-button-loading "),e("code",[t._v("v2.7.0")])]),e("td",[t._v("是否将关闭按钮设置为加载中状态，仅在 "),e("code",[t._v('theme="custom"')]),t._v(" 时有效")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("show-delete-key "),e("code",[t._v("v2.5.9")])]),e("td",[t._v("是否展示删除图标")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("hide-on-click-outside")]),e("td",[t._v("点击外部时是否收起键盘")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("get-container "),e("code",[t._v("v2.10.0")])]),e("td",[t._v("指定挂载的节点，"),e("a",{attrs:{href:"#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi"}},[t._v("用法示例")])]),e("td",[e("em",[t._v("string | () => Element")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("safe-area-inset-bottom")]),e("td",[t._v("是否开启"),e("a",{attrs:{href:"#/zh-CN/admced-usage#di-bu-an-quan-qu-gua-pei"}},[t._v("底部安全区适配")])]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("random-key-order "),e("code",[t._v("v2.12.2")])]),e("td",[t._v("是否将通过随机顺序展示按键")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("input")]),e("td",[t._v("点击按键时触发")]),e("td",[t._v("key: 按键内容")])]),e("tr",[e("td",[t._v("delete")]),e("td",[t._v("点击删除键时触发")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("close")]),e("td",[t._v("点击关闭按钮时触发")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("blur")]),e("td",[t._v("点击关闭按钮或非键盘区域时触发")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("show")]),e("td",[t._v("键盘完全弹出时触发")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("hide")]),e("td",[t._v("键盘完全收起时触发")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("delete")]),e("td",[t._v("自定义删除按键内容")])]),e("tr",[e("td",[t._v("extra-key")]),e("td",[t._v("自定义左下角按键内容")])]),e("tr",[e("td",[t._v("title-left")]),e("td",[t._v("自定义标题栏左侧内容")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),t("a",{attrs:{href:"#/zh-CN/theme"}},[this._v("主题定制")]),this._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@number-keyboard-background-color")]),e("td",[e("code",[t._v("@gray-2")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-key-height")]),e("td",[e("code",[t._v("48px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-key-font-size")]),e("td",[e("code",[t._v("28px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-key-active-color")]),e("td",[e("code",[t._v("@gray-3")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-delete-font-size")]),e("td",[e("code",[t._v("@font-size-lg")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-title-color")]),e("td",[e("code",[t._v("@gray-7")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-title-height")]),e("td",[e("code",[t._v("34px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-title-font-size")]),e("td",[e("code",[t._v("@font-size-lg")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-close-padding")]),e("td",[e("code",[t._v("0 @padding-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-close-color")]),e("td",[e("code",[t._v("@text-link-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-close-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-button-text-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-button-background-color")]),e("td",[e("code",[t._v("@blue")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-cursor-color")]),e("td",[e("code",[t._v("@text-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-cursor-width")]),e("td",[e("code",[t._v("1px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-cursor-height")]),e("td",[e("code",[t._v("40%")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-cursor-animation-duration")]),e("td",[e("code",[t._v("1s")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@number-keyboard-z-index")]),e("td",[e("code",[t._v("100")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"chang-jian-wen-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-wen-ti"}},[this._v("¶")]),this._v(" 常见问题")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zai-zhuo-mian-duan-wu-fa-cao-zuo-zu-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zai-zhuo-mian-duan-wu-fa-cao-zuo-zu-jian"}},[this._v("¶")]),this._v(" 在桌面端无法操作组件？")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("参见"),t("a",{attrs:{href:"#/zh-CN/admced-usage#zhuo-mian-duan-gua-pei"}},[this._v("桌面端适配")]),this._v("。")])}],!1,null,null,null);e.default=a.exports},1189:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-container",[e("tis-header",[t._v("Header")]),t._v(" "),e("tis-main",[t._v("Main")])],1),t._v(" "),e("tis-container",[e("tis-header",[t._v("Header")]),t._v(" "),e("tis-main",[t._v("Main")]),t._v(" "),e("tis-footer",[t._v("Footer")])],1),t._v(" "),e("tis-container",[e("tis-aside",{attrs:{width:"200px"}},[t._v("Aside")]),t._v(" "),e("tis-main",[t._v("Main")])],1),t._v(" "),e("tis-container",[e("tis-header",[t._v("Header")]),t._v(" "),e("tis-container",[e("tis-aside",{attrs:{width:"200px"}},[t._v("Aside")]),t._v(" "),e("tis-main",[t._v("Main")])],1)],1),t._v(" "),e("tis-container",[e("tis-header",[t._v("Header")]),t._v(" "),e("tis-container",[e("tis-aside",{attrs:{width:"200px"}},[t._v("Aside")]),t._v(" "),e("tis-container",[e("tis-main",[t._v("Main")]),t._v(" "),e("tis-footer",[t._v("Footer")])],1)],1)],1),t._v(" "),e("tis-container",[e("tis-aside",{attrs:{width:"200px"}},[t._v("Aside")]),t._v(" "),e("tis-container",[e("tis-header",[t._v("Header")]),t._v(" "),e("tis-main",[t._v("Main")])],1)],1),t._v(" "),e("tis-container",[e("tis-aside",{attrs:{width:"200px"}},[t._v("Aside")]),t._v(" "),e("tis-container",[e("tis-header",[t._v("Header")]),t._v(" "),e("tis-main",[t._v("Main")]),t._v(" "),e("tis-footer",[t._v("Footer")])],1)],1)],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("用于布局的容器组件，方便快速搭建页面的基本结构：")]),t._m(1),t._m(2),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-container>\n  <tis-header>Header</tis-header>\n  <tis-main>Main</tis-main>\n</tis-container>\n\n<tis-container>\n  <tis-header>Header</tis-header>\n  <tis-main>Main</tis-main>\n  <tis-footer>Footer</tis-footer>\n</tis-container>\n\n<tis-container>\n  <tis-aside width="200px">Aside</tis-aside>\n  <tis-main>Main</tis-main>\n</tis-container>\n\n<tis-container>\n  <tis-header>Header</tis-header>\n  <tis-container>\n    <tis-aside width="200px">Aside</tis-aside>\n    <tis-main>Main</tis-main>\n  </tis-container>\n</tis-container>\n\n<tis-container>\n  <tis-header>Header</tis-header>\n  <tis-container>\n    <tis-aside width="200px">Aside</tis-aside>\n    <tis-container>\n      <tis-main>Main</tis-main>\n      <tis-footer>Footer</tis-footer>\n    </tis-container>\n  </tis-container>\n</tis-container>\n\n<tis-container>\n  <tis-aside width="200px">Aside</tis-aside>\n  <tis-container>\n    <tis-header>Header</tis-header>\n    <tis-main>Main</tis-main>\n  </tis-container>\n</tis-container>\n\n<tis-container>\n  <tis-aside width="200px">Aside</tis-aside>\n  <tis-container>\n    <tis-header>Header</tis-header>\n    <tis-main>Main</tis-main>\n    <tis-footer>Footer</tis-footer>\n  </tis-container>\n</tis-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),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"container-bu-ju-rong-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container-bu-ju-rong-qi"}},[this._v("¶")]),this._v(" Container 布局容器")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[t("code",[this._v("<tis-container>")]),this._v("：外层容器。当子元素中包含 "),t("code",[this._v("<tis-header>")]),this._v(" 或 "),t("code",[this._v("<tis-footer>")]),this._v(" 时，全部子元素会垂直上下排列，否则会水平左右排列。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[t("code",[this._v("<tis-header>")]),this._v("：顶栏容器。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[t("code",[this._v("<tis-aside>")]),this._v("：侧边栏容器。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[t("code",[this._v("<tis-main>")]),this._v("：主要区域容器。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[t("code",[this._v("<tis-footer>")]),this._v("：底栏容器。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("div",{staticClass:"tip"},[t("p",[this._v("以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，"),t("code",[this._v("<tis-container>")]),this._v(" 的子元素只能是后四者，后四者的父元素也只能是 "),t("code",[this._v("<tis-container>")]),this._v("。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"chang-jian-ye-mian-bu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-ye-mian-bu-ju"}},[this._v("¶")]),this._v(" 常见页面布局")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"container-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container-attributes"}},[this._v("¶")]),this._v(" Container Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("direction")]),e("td",[t._v("子元素的排列方向")]),e("td",[t._v("string")]),e("td",[t._v("horizontal / vertical")]),e("td",[t._v("子元素中有 "),e("code",[t._v("el-header")]),t._v(" 或 "),e("code",[t._v("el-footer")]),t._v(" 时为 vertical，否则为 horizontal")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"header-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#header-attributes"}},[this._v("¶")]),this._v(" Header Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("height")]),e("td",[t._v("顶栏高度")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("60px")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"aside-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#aside-attributes"}},[this._v("¶")]),this._v(" Aside Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("width")]),e("td",[t._v("侧边栏宽度")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("300px")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"footer-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#footer-attributes"}},[this._v("¶")]),this._v(" Footer Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("height")]),e("td",[t._v("底栏高度")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("60px")])])])])}],!1,null,null,null);e.default=a.exports},1195:function(t,e,n){"use strict";n.r(e);var a=n(46),i=n(936),s=n(47),r={primary:"$--color-primary",success:"$--color-success",warning:"$--color-warning",danger:"$--color-danger",info:"$--color-info",white:"$--color-white",black:"$--color-black",textPrimary:"$--color-text-primary",textRegular:"$--color-text-regular",textSecondary:"$--color-text-secondary",textPlaceholder:"$--color-text-placeholder",borderBase:"$--border-color-base",borderLight:"$--border-color-light",borderLighter:"$--border-color-lighter",borderExtraLight:"$--border-color-extra-light"},l={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(s.d,this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(t,e){return Object(i.a)(t,e)},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(e){var n=this;Object.keys(l).forEach(function(t){e[r[t]]?n[t]=e[r[t]]:n[t]=l[t]})}}}},n=n(0),o=Object(n.a)(o,function(){var n=this,t=n.$createElement,a=n._self._c||t;return a("section",{staticClass:"content element-doc"},[n._m(0),a("p",[n._v("Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。")]),n._m(1),a("p",[n._v("Element 主要品牌颜色是鲜艳、友好的蓝色。")]),a("tis-row",{attrs:{gutter:12}},[a("tis-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(t,e){return a("div",{key:e,staticClass:"bg-blue-sub-item",style:{background:n.tintColor(n.primary,(e+1)/10)}})}),0)])])],1),n._m(2),a("p",[n._v("除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。")]),a("tis-row",{attrs:{gutter:12}},[a("tis-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(t,e){return a("div",{key:e,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.success,(e+8)/10)}})}),0)])]),a("tis-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(t,e){return a("div",{key:e,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.warning,(e+8)/10)}})}),0)])]),a("tis-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(t,e){return a("div",{key:e,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.danger,(e+8)/10)}})}),0)])]),a("tis-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(t,e){return a("div",{key:e,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.info,(e+8)/10)}})}),0)])])],1),n._m(3),a("p",[n._v("中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。")]),a("tis-row",{attrs:{gutter:12}},[a("tis-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("tis-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("tis-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 t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"color-se-cai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#color-se-cai"}},[this._v("¶")]),this._v(" Color 色彩")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhu-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-se"}},[this._v("¶")]),this._v(" 主色")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fu-zhu-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-se"}},[this._v("¶")]),this._v(" 辅助色")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhong-xing-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhong-xing-se"}},[this._v("¶")]),this._v(" 中性色")])}],!1,null,null,null);e.default=o.exports},1208:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-password-input",{attrs:{value:e.value},on:{click:e.show,focus:function(t){e.showKeyboard=!0}}}),e._v(" "),t("m-number-keyboard",{attrs:{show:e.showKeyboard},on:{blur:function(t){e.showKeyboard=!1}},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:"123",showKeyboard:!1}},methods:{show:function(){this.showKeyboard=!0}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-password-input",{attrs:{value:e.value,length:4,focused:e.showKeyboard},on:{focus:function(t){e.showKeyboard=!0}}})],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-password-input",{attrs:{value:e.value,gutter:10,focused:e.showKeyboard},on:{focus:function(t){e.showKeyboard=!0}}})],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-password-input",{attrs:{value:e.value,mask:!1,focused:e.showKeyboard},on:{focus:function(t){e.showKeyboard=!0}}})],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-password-input",{attrs:{value:e.value,info:"密码为 6 位数字","error-info":e.errorInfo,focused:e.showKeyboard},on:{focus:function(t){e.showKeyboard=!0}}}),e._v(" "),t("m-number-keyboard",{attrs:{show:e.showKeyboard},on:{blur:function(t){e.showKeyboard=!1}},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:"123",errorInfo:"",showKeyboard:!1}},watch:{value:function(t){6===t.length&&"123456"!==t?this.errorInfo="密码错误":this.errorInfo=""}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),t._m(2),t._m(3),t._m(4),e("p",[t._v("搭配数字键盘组件来实现密码输入功能。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-password-input\n  :value="value"\n  @click="show"\n  @focus="showKeyboard = true"\n/>\n<m-number-keyboard\n  v-model="value"\n  :show="showKeyboard"\n  @blur="showKeyboard = false"\n/>\n\n<script>\nexport default {\n  data() {\n    return {\n      value: \'123\',\n      showKeyboard: false,\n    };\n  },\n  methods: {\n    show() {\n      this.showKeyboard = true;\n    }\n  }\n};\n<\/script>\n')])])])],2),t._m(5),t._m(6),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-password-input\n  :value="value"\n  :length="4"\n  :focused="showKeyboard"\n  @focus="showKeyboard = true"\n/>\n')])])])],2),t._m(7),t._m(8),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-password-input\n  :value="value"\n  :gutter="10"\n  :focused="showKeyboard"\n  @focus="showKeyboard = true"\n/>\n')])])])],2),t._m(9),t._m(10),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-password-input\n  :value="value"\n  :mask="false"\n  :focused="showKeyboard"\n  @focus="showKeyboard = true"\n/>\n')])])])],2),t._m(11),t._m(12),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-password-input\n  :value="value"\n  info="密码为 6 位数字"\n  :error-info="errorInfo"\n  :focused="showKeyboard"\n  @focus="showKeyboard = true"\n/>\n<m-number-keyboard\n  v-model="value"\n  :show="showKeyboard"\n  @blur="showKeyboard = false"\n/>\n\n<script>\nexport default {\n  data() {\n    return {\n      value: \'123\',\n      errorInfo: \'\',\n      showKeyboard: false,\n    };\n  },\n  watch: {\n    value(value) {\n      if (value.length === 6 && value !== \'123456\') {\n        this.errorInfo = \'密码错误\';\n      } else {\n        this.errorInfo = \'\';\n      }\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"passwordinput-mi-ma-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#passwordinput-mi-ma-shu-ru-kuang"}},[this._v("¶")]),this._v(" PasswordInput 密码输入框")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与"),t("a",{attrs:{href:"#/zh-CN/number-keyboard"}},[this._v("数字键盘")]),this._v("组件配合使用。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dai-ma-yan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ma-yan-shi"}},[this._v("¶")]),this._v(" 代码演示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-chang-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-chang-du"}},[this._v("¶")]),this._v(" 自定义长度")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("length")]),this._v(" 属性来设置密码长度。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ge-zi-jian-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ge-zi-jian-ju"}},[this._v("¶")]),this._v(" 格子间距")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("gutter")]),this._v(" 属性来设置格子之间的间距。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ming-wen-zhan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ming-wen-zhan-shi"}},[this._v("¶")]),this._v(" 明文展示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("将 "),t("code",[this._v("mask")]),this._v(" 设置为 "),t("code",[this._v("false")]),this._v(" 可以明文展示输入的内容，适用于短信验证码等场景。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ti-shi-xin-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ti-shi-xin-xi"}},[this._v("¶")]),this._v(" 提示信息")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("info")]),this._v(" 属性设置提示信息，通过 "),t("code",[this._v("error-info")]),this._v(" 属性设置错误提示，例如当输入六位时提示密码错误。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value")]),e("td",[t._v("密码值")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("''")])])]),e("tr",[e("td",[t._v("info")]),e("td",[t._v("输入框下方文字提示")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("error-info")]),e("td",[t._v("输入框下方错误提示")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("length")]),e("td",[t._v("密码最大长度")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("6")])])]),e("tr",[e("td",[t._v("gutter")]),e("td",[t._v("输入框格子之间的间距，如 "),e("code",[t._v("20px")]),e("code",[t._v("2em")]),t._v("，默认单位为"),e("code",[t._v("px")])]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("0")])])]),e("tr",[e("td",[t._v("mask")]),e("td",[t._v("是否隐藏密码内容")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("focused")]),e("td",[t._v("是否已聚焦，聚焦时会显示光标")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this.$createElement,t=this._self._c||t;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("输入框聚焦时触发")]),t("td",[this._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),t("a",{attrs:{href:"#/zh-CN/theme"}},[this._v("主题定制")]),this._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@password-input-height")]),e("td",[e("code",[t._v("50px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@password-input-margin")]),e("td",[e("code",[t._v("0 @padding-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@password-input-font-size")]),e("td",[e("code",[t._v("20px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@password-input-border-radius")]),e("td",[e("code",[t._v("6px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@password-input-background-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@password-input-info-color")]),e("td",[e("code",[t._v("@gray-6")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@password-input-info-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@password-input-error-info-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@password-input-dot-size")]),e("td",[e("code",[t._v("10px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@password-input-dot-color")]),e("td",[e("code",[t._v("@black")])]),e("td",[t._v("-")])])])])}],!1,null,null,null);e.default=a.exports},1218:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("span",{staticClass:"demonstration"},[e._v("有默认值")]),e._v(" "),t("tis-color-picker",{model:{value:e.color1,callback:function(t){e.color1=t},expression:"color1"}})],1)},staticRenderFns:[]},{data:function(){return{color1:"#409EFF",color2:null}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("用于颜色选择，支持多种格式。")]),t._m(1),e("demo-block",[e("div",[e("p",[t._v("使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<span class="demonstration">有默认值</span>\n<tis-color-picker v-model="color1"></tis-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: \'#409EFF\',\n        color2: null\n      }\n    }\n  };\n<\/script>\n')])])])],2),t._m(2),t._m(3),t._m(4),t._m(5)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"colorpicker-yan-se-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker-yan-se-xuan-ze-qi"}},[this._v("¶")]),this._v(" ColorPicker 颜色选择器")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("尺寸")]),e("td",[t._v("string")]),e("td",[t._v("medium / small / mini")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("show-alpha")]),e("td",[t._v("是否支持透明度选择")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("color-format")]),e("td",[t._v("写入 v-model 的颜色的格式")]),e("td",[t._v("string")]),e("td",[t._v("hsl / hsv / hex / rgb")]),e("td",[t._v("hex（show-alpha 为 false）/ rgb（show-alpha 为 true）")])]),e("tr",[e("td",[t._v("popper-class")]),e("td",[t._v("ColorPicker 下拉框的类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("predefine")]),e("td",[t._v("预定义颜色")]),e("td",[t._v("array")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("change")]),e("td",[t._v("当绑定值变化时触发")]),e("td",[t._v("当前值")])]),e("tr",[e("td",[t._v("active-change")]),e("td",[t._v("面板中当前显示的颜色发生改变时触发")]),e("td",[t._v("当前显示的颜色值")])])])])}],!1,null,null,null);e.default=a.exports},1237:function(t,e,n){"use strict";n.r(e);var a=n(46),i=n(416),s=n(60),r=n.n(s),s={data:function(){return{lang:"zh-CN",navsData:i,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null}},watch:{"$route.path":function(){var t=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){t.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){var t,n;/changelog/g.test(location.href)||(t=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),n=location.href.split("#").splice(0,2).join("#"),[].slice.call(t).forEach(function(t){var e=t.getAttribute("href");t.href=n+e}))},goAnchor:function(){var t,e,n=this;1<location.href.match(/#/g).length&&(!(t=location.href.match(/#[^#]+$/g))||(e=document.querySelector(t[0]))&&setTimeout(function(t){n.componentScrollBox.scrollTop=e.offsetTop},50))},handleScroll:function(){var t=this.componentScrollBox.scrollTop;this.showHeader!==this.scrollTop>t&&(this.showHeader=this.scrollTop>t),0===t&&(this.showHeader=!0),this.navFaded||a.a.$emit("fadeNav"),this.scrollTop=t}},computed:{showBackToTop:function(){return!this.$route.path.match(/backtop/)}},created:function(){var e=this;a.a.$on("navFade",function(t){e.navFaded=t})},mounted:function(){this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=r()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(n,a,t){var i=this;t(),setTimeout(function(){var t=n.path,e=a.path;t===e&&n.hash&&i.goAnchor(),t!==e&&(document.documentElement.scrollTop=document.body.scrollTop=0,i.renderAnchorHref())},100)}},n=(n(1017),n(0)),s=Object(n.a)(s,function(){var t=this.$createElement,t=this._self._c||t;return t("tis-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[t("div",{staticClass:"page-container page-component"},[t("tis-scrollbar",{staticClass:"page-component__nav"},[t("side-nav",{attrs:{data:this.navsData[this.lang],base:"/"+this.lang+"/mobile"}})],1),t("div",{staticClass:"page-component__content"},[t("router-view",{staticClass:"content"}),t("footer-nav")],1),this.showBackToTop?t("tis-backtop",{attrs:{target:".page-component__scroll .el-scrollbar__wrap",right:100,bottom:150}}):this._e()],1)])},[],!1,null,null,null);e.default=s.exports},1239:function(t,e,n){"use strict";n.r(e);var a=n(46),i=n(139),s=n(60),r=n.n(s),s={data:function(){return{lang:this.$route.meta.lang,navsData:i,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null}},watch:{"$route.path":function(){var t=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){t.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){var t,n;/changelog/g.test(location.href)||(t=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),n=location.href.split("#").splice(0,2).join("#"),[].slice.call(t).forEach(function(t){var e=t.getAttribute("href");t.href=n+e}))},goAnchor:function(){var t,e,n=this;1<location.href.match(/#/g).length&&(!(t=location.href.match(/#[^#]+$/g))||(e=document.querySelector(t[0]))&&setTimeout(function(t){n.componentScrollBox.scrollTop=e.offsetTop},50))},handleScroll:function(){var t=this.componentScrollBox.scrollTop;this.showHeader!==this.scrollTop>t&&(this.showHeader=this.scrollTop>t),0===t&&(this.showHeader=!0),this.navFaded||a.a.$emit("fadeNav"),this.scrollTop=t}},computed:{showBackToTop:function(){return!this.$route.path.match(/backtop/)}},created:function(){var e=this;a.a.$on("navFade",function(t){e.navFaded=t})},mounted:function(){this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=r()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(n,a,t){var i=this;t(),setTimeout(function(){var t=n.path,e=a.path;t===e&&n.hash&&i.goAnchor(),t!==e&&(document.documentElement.scrollTop=document.body.scrollTop=0,i.renderAnchorHref())},100)}},n=(n(1018),n(0)),s=Object(n.a)(s,function(){var t=this.$createElement,t=this._self._c||t;return t("tis-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[t("div",{staticClass:"page-container page-component"},[t("tis-scrollbar",{staticClass:"page-component__nav"},[t("side-nav",{attrs:{data:this.navsData[this.lang],base:"/"+this.lang+"/component"}})],1),t("div",{staticClass:"page-component__content"},[t("router-view",{staticClass:"content"}),t("footer-nav")],1),this.showBackToTop?t("tis-backtop",{attrs:{target:".page-component__scroll .el-scrollbar__wrap",right:100,bottom:150}}):this._e()],1)])},[],!1,null,null,null);e.default=s.exports},1240:function(t,e,n){"use strict";n.r(e);var a,i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},i={name:"component-doc",components:{"element-demo0":i({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-picker",{attrs:{title:"标题","show-toolbar":"",columns:this.columns},on:{confirm:this.onConfirm,cancel:this.onCancel,change:this.onChange}})],1)},staticRenderFns:[]},{data:function(){return{columns:["杭州","宁波","温州","绍兴","湖州","嘉兴","金华","衢州"]}},methods:{onConfirm:function(t,e){},onChange:function(t,e,n){},onCancel:function(){}}}),"element-demo1":i({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-picker",{attrs:{"show-toolbar":"",title:"标题",columns:this.columns,"default-index":2}})],1)},staticRenderFns:[]},{data:function(){return{columns:["杭州","宁波","温州","绍兴","湖州","嘉兴","金华","衢州"]}}}),"element-demo2":i({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-picker",{attrs:{"show-toolbar":"",title:"标题",columns:this.columns}})],1)},staticRenderFns:[]},{data:function(){return{columns:[{values:["周一","周二","周三","周四","周五"],defaultIndex:2},{values:["上午","下午","晚上"],defaultIndex:1}]}}}),"element-demo3":i({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-picker",{attrs:{"show-toolbar":"",title:"标题",columns:this.columns}})],1)},staticRenderFns:[]},{data:function(){return{columns:[{text:"浙江",children:[{text:"杭州",children:[{text:"西湖区"},{text:"余杭区"}]},{text:"温州",children:[{text:"鹿城区"},{text:"瓯海区"}]}]},{text:"福建",children:[{text:"福州",children:[{text:"鼓楼区"},{text:"台江区"}]},{text:"厦门",children:[{text:"思明区"},{text:"海沧区"}]}]}]}}}),"element-demo4":i({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-picker",{attrs:{"show-toolbar":"",columns:this.columns}})],1)},staticRenderFns:[]},{data:function(){return{columns:[{text:"杭州",disabled:!0},{text:"宁波"},{text:"温州"}]}}}),"element-demo5":(a={"浙江":["杭州","宁波","温州","嘉兴","湖州"],"福建":["福州","厦门","莆田","三明","泉州"]},i({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-picker",{attrs:{"show-toolbar":"",columns:this.columns},on:{change:this.onChange}})],1)},staticRenderFns:[]},{data:function(){return{columns:[{values:Object.keys(a)},{values:a["浙江"]}]}},methods:{onChange:function(t,e){t.setColumnValues(1,a[e[0]])}}})),"element-demo6":i({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-picker",{attrs:{"show-toolbar":"",columns:this.columns,loading:this.loading}})],1)},staticRenderFns:[]},{data:function(){return{columns:[],loading:!0}},created:function(){var t=this;setTimeout(function(){t.loading=!1,t.columns=["选项"]},1e3)}}),"element-demo7":i({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-field",{attrs:{readonly:"",clickable:"",label:"城市",value:e.value,placeholder:"选择城市"},on:{click:function(t){e.showPicker=!0}}}),e._v(" "),t("m-popup",{attrs:{round:"",position:"bottom"},model:{value:e.showPicker,callback:function(t){e.showPicker=t},expression:"showPicker"}},[t("m-picker",{attrs:{"show-toolbar":"",columns:e.columns},on:{cancel:function(t){e.showPicker=!1},confirm:e.onConfirm}})],1)],1)},staticRenderFns:[]},{data:function(){return{value:"",showPicker:!1,columns:["杭州","宁波","温州","绍兴","湖州","嘉兴","金华","衢州"]}},methods:{onConfirm:function(t){this.value=t,this.showPicker=!1}}})}},n=n(0),i=Object(n.a)(i,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),t._m(2),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<m-picker\n  title=\"标题\"\n  show-toolbar\n  :columns=\"columns\"\n  @confirm=\"onConfirm\"\n  @cancel=\"onCancel\"\n  @change=\"onChange\"\n/>\n\n<script>\nexport default {\n  data() {\n    return {\n      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],\n    };\n  },\n  methods: {\n    onConfirm(value, index) {\n    },\n    onChange(picker, value, index) {\n    },\n    onCancel() {\n    },\n  },\n};\n<\/script>\n")])])])],2),t._m(9),t._m(10),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<m-picker show-toolbar title=\"标题\" :columns=\"columns\" :default-index=\"2\" />\n\n<script>\nexport default {\n  data() {\n    return {\n      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],\n    };\n  },\n};\n<\/script>\n")])])])],2),t._m(11),t._m(12),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<m-picker show-toolbar title=\"标题\" :columns=\"columns\" />\n\n<script>\nexport default {\n  data() {\n    return {\n      columns: [\n        // 第一列\n        {\n          values: ['周一', '周二', '周三', '周四', '周五'],\n          defaultIndex: 2,\n        },\n        // 第二列\n        {\n          values: ['上午', '下午', '晚上'],\n          defaultIndex: 1,\n        },\n      ],\n    };\n  },\n};\n<\/script>\n")])])])],2),t._m(13),t._m(14),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<m-picker show-toolbar title=\"标题\" :columns=\"columns\" />\n\n<script>\nexport default {\n  data() {\n    return {\n      columns: [\n        {\n          text: '浙江',\n          children: [\n            {\n              text: '杭州',\n              children: [{ text: '西湖区' }, { text: '余杭区' }],\n            },\n            {\n              text: '温州',\n              children: [{ text: '鹿城区' }, { text: '瓯海区' }],\n            },\n          ],\n        },\n        {\n          text: '福建',\n          children: [\n            {\n              text: '福州',\n              children: [{ text: '鼓楼区' }, { text: '台江区' }],\n            },\n            {\n              text: '厦门',\n              children: [{ text: '思明区' }, { text: '海沧区' }],\n            },\n          ],\n        },\n      ],\n    };\n  },\n};\n<\/script>\n")])])])],2),t._m(15),t._m(16),t._m(17),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<m-picker show-toolbar :columns=\"columns\" />\n\n<script>\nexport default {\n  data() {\n    return {\n      columns: [\n        { text: '杭州', disabled: true },\n        { text: '宁波' },\n        { text: '温州' },\n      ],\n    };\n  },\n};\n<\/script>\n")])])])],2),t._m(18),t._m(19),e("demo-block",[e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<m-picker show-toolbar :columns=\"columns\" @change=\"onChange\" />\n\n<script>\nconst cities = {\n  浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  福建: ['福州', '厦门', '莆田', '三明', '泉州'],\n};\n\nexport default {\n  data() {\n    return {\n      columns: [{ values: Object.keys(cities) }, { values: cities['浙江'] }],\n    };\n  },\n  methods: {\n    onChange(picker, values) {\n      picker.setColumnValues(1, cities[values[0]]);\n    },\n  },\n};\n<\/script>\n")])])])],2),t._m(20),t._m(21),e("demo-block",[e("template",{slot:"source"},[e("element-demo6")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-picker show-toolbar :columns="columns" :loading="loading" />\n\n<script>\nexport default {\n  data() {\n    return {\n      columns: [],\n      loading: true,\n    };\n  },\n  created() {\n    setTimeout(() => {\n      this.loading = false;\n      this.columns = [\'选项\'];\n    }, 1000);\n  },\n};\n<\/script>\n')])])])],2),t._m(22),e("p",[t._v("在实际场景中，Picker 通常作为用于辅助表单填写，可以搭配 Popup 和 Field 实现该效果。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo7")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<m-field\n  readonly\n  clickable\n  label=\"城市\"\n  :value=\"value\"\n  placeholder=\"选择城市\"\n  @click=\"showPicker = true\"\n/>\n<m-popup v-model=\"showPicker\" round position=\"bottom\">\n  <m-picker\n    show-toolbar\n    :columns=\"columns\"\n    @cancel=\"showPicker = false\"\n    @confirm=\"onConfirm\"\n  />\n</m-popup>\n\n<script>\nexport default {\n  data() {\n    return {\n      value: '',\n      showPicker: false,\n      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],\n    };\n  },\n  methods: {\n    onConfirm(value) {\n      this.value = value;\n      this.showPicker = false;\n    },\n  },\n};\n<\/script>\n")])])])],2),t._m(23),t._m(24),t._m(25),t._m(26),e("p",[t._v("当选择器有多列时，事件回调参数会返回数组")]),t._m(27),t._m(28),t._m(29),t._m(30),t._m(31),t._m(32),t._m(33),t._m(34),t._m(35),t._m(36),t._m(37),t._m(38),t._m(39),t._m(40),t._m(41)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"picker-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picker-xuan-ze-qi"}},[this._v("¶")]),this._v(" Picker 选择器")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("提供多个选项集合供用户选择，支持单列选择和多列级联，通常与"),t("a",{attrs:{href:"#/zh-CN/popup"}},[this._v("弹出层")]),this._v("组件配合使用。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dai-ma-yan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ma-yan-shi"}},[this._v("¶")]),this._v(" 代码演示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"xuan-xiang-pei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-xiang-pei-zhi"}},[this._v("¶")]),this._v(" 选项配置")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("Picker 组件通过 "),t("code",[this._v("columns")]),this._v(" 属性配置选项数据，"),t("code",[this._v("columns")]),this._v(" 是一个包含字符串或对象的数组。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"ding-bu-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-bu-lan"}},[this._v("¶")]),this._v(" 顶部栏")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("设置 "),t("code",[this._v("show-toolbar")]),this._v(" 属性后会展示顶部操作栏，顶部栏包含标题、确认按钮和取消按钮，点击确认按钮触发 "),t("code",[this._v("confirm")]),this._v(" 事件，点击取消按钮触发 "),t("code",[this._v("cancel")]),this._v(" 事件。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"mo-ren-xuan-zhong-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-xuan-zhong-xiang"}},[this._v("¶")]),this._v(" 默认选中项")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("单列选择时，可以通过 "),t("code",[this._v("default-index")]),this._v(" 属性设置初始选中项的索引。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"duo-lie-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-lie-xuan-ze"}},[this._v("¶")]),this._v(" 多列选择")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[t("code",[this._v("columns")]),this._v(" 属性可以通过对象数组的形式配置多列选择，对象中可以配置选项数据、初始选中项等，详细格式见"),t("a",{attrs:{href:"#/zh-CN/picker#column-shu-ju-jie-gou"}},[this._v("下方表格")]),this._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-lian-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-lian-xuan-ze"}},[this._v("¶")]),this._v(" 级联选择")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("使用 "),t("code",[this._v("columns")]),this._v(" 的 "),t("code",[this._v("children")]),this._v(" 字段可以实现选项级联的效果（从 2.4.5 版本开始支持）。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("级联选择的数据嵌套深度需要保持一致，如果部分选项没有子选项，可以使用空字符串进行占位")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jin-yong-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-xuan-xiang"}},[this._v("¶")]),this._v(" 禁用选项")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("选项可以为对象结构，通过设置 "),t("code",[this._v("disabled")]),this._v(" 来禁用该选项。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dong-tai-she-zhi-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-she-zhi-xuan-xiang"}},[this._v("¶")]),this._v(" 动态设置选项")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 Picker 上的实例方法可以更灵活地控制选择器，比如使用 "),t("code",[this._v("setColumnValues")]),this._v(" 方法实现多列联动。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jia-zai-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-zhuang-tai"}},[this._v("¶")]),this._v(" 加载状态")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("若选择器数据是异步获取的，可以通过 "),t("code",[this._v("loading")]),this._v(" 属性显示加载提示。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"da-pei-dan-chu-ceng-shi-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#da-pei-dan-chu-ceng-shi-yong"}},[this._v("¶")]),this._v(" 搭配弹出层使用")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("columns")]),e("td",[t._v("对象数组，配置每一列显示的数据")]),e("td",[e("em",[t._v("Column[]")])]),e("td",[e("code",[t._v("[]")])])]),e("tr",[e("td",[t._v("title")]),e("td",[t._v("顶部栏标题")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("confirm-button-text")]),e("td",[t._v("确认按钮文字")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("确认")])])]),e("tr",[e("td",[t._v("cancel-button-text")]),e("td",[t._v("取消按钮文字")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("取消")])])]),e("tr",[e("td",[t._v("value-key")]),e("td",[t._v("选项对象中，选项文字对应的键名")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("text")])])]),e("tr",[e("td",[t._v("toolbar-position")]),e("td",[t._v("顶部栏位置，可选值为"),e("code",[t._v("bottom")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("top")])])]),e("tr",[e("td",[t._v("loading")]),e("td",[t._v("是否显示加载状态")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("readonly "),e("code",[t._v("v2.10.5")])]),e("td",[t._v("是否为只读状态，只读状态下无法切换选项")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("show-toolbar")]),e("td",[t._v("是否显示顶部栏")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("allow-html")]),e("td",[t._v("是否允许选项内容中渲染 HTML")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("default-index")]),e("td",[t._v("单列选择时，默认选中项的索引")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("0")])])]),e("tr",[e("td",[t._v("item-height "),e("code",[t._v("v2.8.6")])]),e("td",[t._v("选项高度，支持 "),e("code",[t._v("px")]),e("code",[t._v("vw")]),e("code",[t._v("vh")]),e("code",[t._v("rem")]),t._v(" 单位，默认 "),e("code",[t._v("px")])]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("44")])])]),e("tr",[e("td",[t._v("visible-item-count")]),e("td",[t._v("可见的选项个数")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("6")])])]),e("tr",[e("td",[t._v("swipe-duration")]),e("td",[t._v("快速滑动时惯性滚动的时长，单位 "),e("code",[t._v("ms")])]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("1000")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("confirm")]),e("td",[t._v("点击完成按钮时触发")]),e("td",[t._v("单列：选中值，选中值对应的索引"),e("br"),t._v("多列：所有列选中值，所有列选中值对应的索引")])]),e("tr",[e("td",[t._v("cancel")]),e("td",[t._v("点击取消按钮时触发")]),e("td",[t._v("单列：选中值，选中值对应的索引"),e("br"),t._v("多列：所有列选中值，所有列选中值对应的索引")])]),e("tr",[e("td",[t._v("change")]),e("td",[t._v("选项改变时触发")]),e("td",[t._v("单列：Picker 实例，选中值，选中值对应的索引"),e("br"),t._v("多列：Picker 实例，所有列选中值，当前列对应的索引")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("default")]),e("td",[t._v("自定义整个顶部栏的内容")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("title")]),e("td",[t._v("自定义标题内容")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("confirm "),e("code",[t._v("v2.10.11")])]),e("td",[t._v("自定义确认按钮内容")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("cancel "),e("code",[t._v("v2.10.11")])]),e("td",[t._v("自定义取消按钮内容")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("option "),e("code",[t._v("v2.10.11")])]),e("td",[t._v("自定义选项内容")]),e("td",[e("em",[t._v("option: string | object")])])]),e("tr",[e("td",[t._v("columns-top")]),e("td",[t._v("自定义选项上方内容")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("columns-bottom")]),e("td",[t._v("自定义选项下方内容")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"column-shu-ju-jie-gou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#column-shu-ju-jie-gou"}},[this._v("¶")]),this._v(" Column 数据结构")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("当传入多列数据时，"),t("code",[this._v("columns")]),this._v(" 为一个对象数组，数组中的每一个对象配置每一列，每一列有以下 "),t("code",[this._v("key")]),this._v(":")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("键名")]),e("th",[t._v("说明")]),e("th",[t._v("类型")])])]),e("tbody",[e("tr",[e("td",[t._v("values")]),e("td",[t._v("列中对应的备选值")]),e("td",[e("em",[t._v("string[]")])])]),e("tr",[e("td",[t._v("defaultIndex")]),e("td",[t._v("初始选中项的索引，默认为 0")]),e("td",[e("em",[t._v("number")])])]),e("tr",[e("td",[t._v("className")]),e("td",[t._v("为对应列添加额外的类名")]),e("td",[e("em",[t._v("any")])])]),e("tr",[e("td",[t._v("children "),e("code",[t._v("v2.4.5")])]),e("td",[t._v("级联选项")]),e("td",[e("em",[t._v("Column")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa"}},[this._v("¶")]),this._v(" 方法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 ref 可以获取到 Picker 实例并调用实例方法，详见"),t("a",{attrs:{href:"#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa"}},[this._v("组件实例方法")]),this._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")]),e("th",[t._v("返回值")])])]),e("tbody",[e("tr",[e("td",[t._v("getValues")]),e("td",[t._v("获取所有列选中的值")]),e("td",[t._v("-")]),e("td",[t._v("values")])]),e("tr",[e("td",[t._v("setValues")]),e("td",[t._v("设置所有列选中的值")]),e("td",[t._v("values")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("getIndexes")]),e("td",[t._v("获取所有列选中值对应的索引")]),e("td",[t._v("-")]),e("td",[t._v("indexes")])]),e("tr",[e("td",[t._v("setIndexes")]),e("td",[t._v("设置所有列选中值对应的索引")]),e("td",[t._v("indexes")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("getColumnValue")]),e("td",[t._v("获取对应列选中的值")]),e("td",[t._v("columnIndex")]),e("td",[t._v("value")])]),e("tr",[e("td",[t._v("setColumnValue")]),e("td",[t._v("设置对应列选中的值")]),e("td",[t._v("columnIndex, value")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("getColumnIndex")]),e("td",[t._v("获取对应列选中项的索引")]),e("td",[t._v("columnIndex")]),e("td",[t._v("optionIndex")])]),e("tr",[e("td",[t._v("setColumnIndex")]),e("td",[t._v("设置对应列选中项的索引")]),e("td",[t._v("columnIndex, optionIndex")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("getColumnValues")]),e("td",[t._v("获取对应列中所有选项")]),e("td",[t._v("columnIndex")]),e("td",[t._v("values")])]),e("tr",[e("td",[t._v("setColumnValues")]),e("td",[t._v("设置对应列中所有选项")]),e("td",[t._v("columnIndex, values")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("confirm "),e("code",[t._v("v2.4.0")])]),e("td",[t._v("停止惯性滚动并触发 confirm 事件")]),e("td",[t._v("-")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),t("a",{attrs:{href:"#/zh-CN/theme"}},[this._v("主题定制")]),this._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@picker-background-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@picker-toolbar-height")]),e("td",[e("code",[t._v("44px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@picker-title-font-size")]),e("td",[e("code",[t._v("@font-size-lg")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@picker-title-line-height")]),e("td",[e("code",[t._v("@line-height-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@picker-action-padding")]),e("td",[e("code",[t._v("0 @padding-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@picker-action-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@picker-confirm-action-color")]),e("td",[e("code",[t._v("@text-link-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@picker-cancel-action-color")]),e("td",[e("code",[t._v("@gray-6")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@picker-option-font-size")]),e("td",[e("code",[t._v("@font-size-lg")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@picker-option-text-color")]),e("td",[e("code",[t._v("@black")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@picker-option-disabled-opacity")]),e("td",[e("code",[t._v("0.3")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@picker-loading-icon-color")]),e("td",[e("code",[t._v("@blue")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@picker-loading-mask-color")]),e("td",[e("code",[t._v("rgba(255, 255, 255, 0.9)")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"chang-jian-wen-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-wen-ti"}},[this._v("¶")]),this._v(" 常见问题")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zai-zhuo-mian-duan-wu-fa-cao-zuo-zu-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zai-zhuo-mian-duan-wu-fa-cao-zuo-zu-jian"}},[this._v("¶")]),this._v(" 在桌面端无法操作组件？")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("参见"),t("a",{attrs:{href:"#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei"}},[this._v("桌面端适配")]),this._v("。")])}],!1,null,null,null);e.default=i.exports},1242:function(t,e,n){"use strict";n.r(e);var a={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"设计原则"},{path:"/nav",name:"导航"}]}}},n=(n(1020),n(0)),a=Object(n.a)(a,function(){var t=this.$createElement,t=this._self._c||t;return t("div",{staticClass:"page-container page-guide"},[t("tis-row",[t("tis-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("tis-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);e.default=a.exports},1243:function(t,e,n){"use strict";n.r(e);var a=[function(){var t=this.$createElement,t=this._self._c||t;return t("div",{staticClass:"sub-banner"},[t("div",{staticClass:"sub-banner-content"},[t("div",{staticClass:"sub-banner-content-item"},[t("div",{staticClass:"item-left"},[t("img",{attrs:{src:n(941),alt:""}})]),t("div",{staticClass:"item-right"},[t("div",{staticClass:"item-right-h"},[this._v("渲染内核2.0")]),t("div",{staticClass:"item-right-c"},[this._v("全新的渲染内核，更快、更安全的渲染")])])]),t("div",{staticClass:"sub-banner-content-item"},[t("div",{staticClass:"item-left"},[t("img",{attrs:{src:n(942),alt:""}})]),t("div",{staticClass:"item-right"},[t("div",{staticClass:"item-right-h"},[this._v("TIS组件库")]),t("div",{staticClass:"item-right-c"},[this._v("实用、强大的基于Vue的基础组件")])])]),t("div",{staticClass:"sub-banner-content-item"},[t("div",{staticClass:"item-left"},[t("img",{attrs:{src:n(943),alt:""}})]),t("div",{staticClass:"item-right"},[t("div",{staticClass:"item-right-h"},[this._v("丰富的文档")]),t("div",{staticClass:"item-right-c"},[this._v("全面、详细的开发文档")])])])])])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",{staticClass:"cards main-content"},[e("div",{staticClass:"main-content-box"},[e("h1",[t._v("TIS DESIGN")]),e("div",{staticClass:"main-content-box-cards"},[e("div",{staticClass:"cards-left"},[e("div",{staticClass:"tis-design-1 tis-design-box"},[e("p",[t._v("适配三端（PC、平板、移动设备）的组件库")])])]),e("div",{staticClass:"cards-right"},[e("div",{staticClass:"tis-design-2 tis-design-box"},[e("p",[t._v("规范化、自适应的基于栅格的弹性布局")])]),e("div",{staticClass:"tis-design-3 tis-design-box"},[e("p",[t._v("高效简洁的人机交互机制")])])])])]),e("div",{staticClass:"advantage-box"},[e("h1",[t._v("方案优势")]),e("div",{staticClass:"advantage-box-content"},[e("div",{staticClass:"advantage-item"},[e("img",{attrs:{src:n(944),alt:""}}),e("div",{staticClass:"advantage-item-txt"},[e("div",{staticClass:"item-h"},[t._v("丰富灵活的组件库和开发文档")]),e("div",{staticClass:"item-c"},[t._v("开发者可以通过一站式丰富的文档和灵活的组件库快速开发轻步应用和组件")])])]),e("div",{staticClass:"advantage-item"},[e("img",{attrs:{src:n(945),alt:""}}),e("div",{staticClass:"advantage-item-txt"},[e("div",{staticClass:"item-h"},[t._v("全新设计风格和交互")]),e("div",{staticClass:"item-c"},[t._v("全新的设计风格和高效简洁的交互机制，基于栅格的自适应布局")])])]),e("div",{staticClass:"advantage-item"},[e("img",{attrs:{src:n(946),alt:""}}),e("div",{staticClass:"advantage-item-txt"},[e("div",{staticClass:"item-h"},[t._v("与军事化场景的深度结合")]),e("div",{staticClass:"item-c"},[t._v("为军事化场景量身打造的一站式开发平台，内置诸多军事化元素")])])])])])])}],i=n(60),s=n.n(i),r={created:function(){var e=this;this.throttledHandleScroll=s()(10,!0,function(t){e.handleScroll(t)})},methods:{handleScroll:function(t){var e=this.$refs.indexMainImg,n=e.getBoundingClientRect(),e=e.clientHeight+55,n=2*(180-n.top);this.mainImgOffset=n=e<(n=n<0?0:n)?e:n},linkToDetail:function(){this.$router.push("/zh-CN/main-layout/quickstart")}},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=(n(1021),n(0)),a=Object(i.a)(r,function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("轻步一站式开发平台")]),t("p",[this._v("给轻步开发者打造的开发平台，提供完善的开发文档和灵活的组件")]),t("button",{staticClass:"link-to-detail",on:{click:this.linkToDetail}},[this._v("了解详情")])]),this._m(0)]),this._m(1)])},a,!1,null,"e3ec515a",null);e.default=a.exports},1245:function(t,e,n){"use strict";n.r(e);var a={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(t){document.body.style.overflow=t?"hidden":""}},methods:{enlarge:function(t,e){var n=e.target,a={},i=document;a.left=(i.body.scrollWidth-t)/2,a.top=100,this.imgUrl=n.src,this.imgBound=n.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=e.clientX+"px "+e.clientY+"px",this.imgStyle.width=t+"px",this.showDialog=!0}}},i=(n(1022),n(0)),a=Object(i.a)(a,function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("h2",[e._v("导航")]),e._m(0),e._m(1),t("div",{staticClass:"block"},[t("h3",[e._v("侧栏导航")]),t("tis-row",{attrs:{gutter:20}},[t("tis-col",{attrs:{span:9}},[t("p",[e._v("可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。")])]),t("tis-col",{staticClass:"nav-demos",attrs:{span:15}},[t("img",{attrs:{src:n(947),alt:"一级类目"},on:{click:function(t){e.enlarge(846,t)}}}),t("h5",[e._v("一级类目")]),t("p",[e._v("适用于结构简单的网站：只有一级页面时，不需要使用面包屑。")]),t("img",{attrs:{src:n(948),alt:"二级类目"},on:{click:function(t){e.enlarge(846,t)}}}),t("h5",[e._v("二级类目")]),t("p",[e._v("侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。")]),t("img",{attrs:{src:n(949),alt:"三级类目"},on:{click:function(t){e.enlarge(846,t)}}}),t("h5",[e._v("三级类目")]),t("p",[e._v("适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。")])])],1)],1),t("div",{staticClass:"block"},[t("h3",[e._v("顶部导航")]),t("tis-row",[t("tis-col",{attrs:{span:10}},[t("p",[e._v("顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。")])]),t("tis-col",{staticClass:"nav-demos",attrs:{span:14}},[t("img",{attrs:{src:n(950),alt:""},on:{click:function(t){e.enlarge(846,t)}}}),t("p",[e._v("适用于导航较少，页面篇幅较长的网站。")])])],1)],1),t("transition",{attrs:{name:"fade"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){e.showDialog=!1}}})]),t("transition",{attrs:{name:"zoom"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:e.imgWrapStyle,on:{click:function(t){e.showDialog=!1}}},[t("div",{staticClass:"imgWrap",style:e.imgStyle},[t("img",{attrs:{src:e.imgUrl,alt:""}})])])])],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("div",{staticClass:"block"},[t("p",[this._v("导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("div",{staticClass:"block"},[t("h3",[this._v("选择合适的导航")]),t("p",[this._v("选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。")])])}],!1,null,"06b326d5",null);e.default=a.exports},1247:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-collapse",{attrs:{accordion:""},model:{value:e.activeName,callback:function(t){e.activeName=t},expression:"activeName"}},[t("tis-collapse-item",{attrs:{title:"一致性 Consistency",name:"1"}},[t("div",[e._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),e._v(" "),t("div",[e._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),e._v(" "),t("tis-collapse-item",{attrs:{title:"反馈 Feedback",name:"2"}},[t("div",[e._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),e._v(" "),t("div",[e._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),e._v(" "),t("tis-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[t("div",[e._v("简化流程：设计简洁直观的操作流程；")]),e._v(" "),t("div",[e._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),e._v(" "),t("div",[e._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),e._v(" "),t("tis-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[t("div",[e._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),e._v(" "),t("div",[e._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1)},staticRenderFns:[]},{data:function(){return{activeName:"1"}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("通过折叠面板收纳内容区域")]),t._m(1),e("p",[t._v("每次只能展开一个面板")]),e("demo-block",[e("div",[e("p",[t._v("通过 "),e("code",[t._v("accordion")]),t._v(" 属性来设置是否以手风琴模式显示。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-collapse v-model="activeName" accordion>\n  <tis-collapse-item title="一致性 Consistency" name="1">\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </tis-collapse-item>\n  <tis-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </tis-collapse-item>\n  <tis-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </tis-collapse-item>\n  <tis-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </tis-collapse-item>\n</tis-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),t._m(2),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"collapse-zhe-die-mian-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhe-die-mian-ban"}},[this._v("¶")]),this._v(" Collapse 折叠面板")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shou-feng-qin-xiao-guo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-xiao-guo"}},[this._v("¶")]),this._v(" 手风琴效果")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"collapse-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes"}},[this._v("¶")]),this._v(" Collapse Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("当前激活的面板(如果是手风琴模式，绑定值类型需要为"),e("code",[t._v("string")]),t._v("，否则为"),e("code",[t._v("array")]),t._v(")")]),e("td",[t._v("string / array")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("accordion")]),e("td",[t._v("是否手风琴模式")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"collapse-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events"}},[this._v("¶")]),this._v(" Collapse Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("change")]),e("td",[t._v("当前激活面板改变时触发(如果是手风琴模式，参数 "),e("code",[t._v("activeNames")]),t._v(" 类型为"),e("code",[t._v("string")]),t._v("，否则为"),e("code",[t._v("array")]),t._v(")")]),e("td",[t._v("(activeNames: array / string)")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"collapse-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes"}},[this._v("¶")]),this._v(" Collapse Item Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("name")]),e("td",[t._v("唯一标志符")]),e("td",[t._v("string/number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("title")]),e("td",[t._v("面板标题")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])}],!1,null,null,null);e.default=a.exports},1248:function(t,e,n){"use strict";n.r(e);var a,i,s,r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},r={name:"component-doc",components:{"element-demo0":r({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-checkbox",{model:{value:e.checked,callback:function(t){e.checked=t},expression:"checked"}},[e._v("备选项")])]],2)},staticRenderFns:[]},{data:function(){return{checked:!0}}}),"element-demo1":r({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-checkbox",{attrs:{disabled:""},model:{value:e.checked1,callback:function(t){e.checked1=t},expression:"checked1"}},[e._v("备选项1")]),e._v(" "),t("tis-checkbox",{attrs:{disabled:""},model:{value:e.checked2,callback:function(t){e.checked2=t},expression:"checked2"}},[e._v("备选项")])]],2)},staticRenderFns:[]},{data:function(){return{checked1:!1,checked2:!0}}}),"element-demo2":r({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-checkbox-group",{model:{value:e.checkList,callback:function(t){e.checkList=t},expression:"checkList"}},[t("tis-checkbox",{attrs:{label:"复选框 A"}}),e._v(" "),t("tis-checkbox",{attrs:{label:"复选框 B"}}),e._v(" "),t("tis-checkbox",{attrs:{label:"复选框 C"}}),e._v(" "),t("tis-checkbox",{attrs:{label:"禁用",disabled:""}}),e._v(" "),t("tis-checkbox",{attrs:{label:"选中且禁用",disabled:""}})],1)]],2)},staticRenderFns:[]},{data:function(){return{checkList:["选中且禁用","复选框 A"]}}}),"element-demo3":(s=["上海","北京","广州","深圳"],r({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("tis-checkbox",{attrs:{indeterminate:e.isIndeterminate},on:{change:e.handleCheckAllChange},model:{value:e.checkAll,callback:function(t){e.checkAll=t},expression:"checkAll"}},[e._v("全选")]),e._v(" "),n("div",{staticStyle:{margin:"15px 0"}}),e._v(" "),n("tis-checkbox-group",{on:{change:e.handleCheckedCitiesChange},model:{value:e.checkedCities,callback:function(t){e.checkedCities=t},expression:"checkedCities"}},e._l(e.cities,function(t){return n("tis-checkbox",{key:t,attrs:{label:t}},[e._v(e._s(t))])}),1)]],2)},staticRenderFns:[]},{data:function(){return{checkAll:!1,checkedCities:["上海","北京"],cities:s,isIndeterminate:!0}},methods:{handleCheckAllChange:function(t){this.checkedCities=t?s:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(t){t=t.length;this.checkAll=t===this.cities.length,this.isIndeterminate=0<t&&t<this.cities.length}}})),"element-demo4":(i=["上海","北京","广州","深圳"],r({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("tis-checkbox-group",{attrs:{min:1,max:2},model:{value:e.checkedCities,callback:function(t){e.checkedCities=t},expression:"checkedCities"}},e._l(e.cities,function(t){return n("tis-checkbox",{key:t,attrs:{label:t}},[e._v(e._s(t))])}),1)]],2)},staticRenderFns:[]},{data:function(){return{checkedCities:["上海","北京"],cities:i}}})),"element-demo5":(a=["上海","北京","广州","深圳"],r({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",{staticStyle:{"margin-top":"20px"}},[n("tis-checkbox-group",{attrs:{size:"medium"},model:{value:e.checkboxGroup2,callback:function(t){e.checkboxGroup2=t},expression:"checkboxGroup2"}},e._l(e.cities,function(t){return n("tis-checkbox-button",{key:t,attrs:{label:t}},[e._v(e._s(t))])}),1)],1)]],2)},staticRenderFns:[]},{data:function(){return{checkboxGroup1:["上海"],checkboxGroup2:["上海"],checkboxGroup3:["上海"],checkboxGroup4:["上海"],cities:a}}}))}},n=n(0),r=Object(n.a)(r,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("一组备选项中进行多选")]),t._m(1),e("p",[t._v("单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。")]),e("demo-block",[e("div",[e("p",[t._v("在"),e("code",[t._v("tis-checkbox")]),t._v("元素中定义"),e("code",[t._v("v-model")]),t._v("绑定变量，单一的"),e("code",[t._v("checkbox")]),t._v("中，默认绑定变量的值会是"),e("code",[t._v("Boolean")]),t._v("，选中为"),e("code",[t._v("true")]),t._v("。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  \x3c!-- `checked` 为 true 或 false --\x3e\n  <tis-checkbox v-model="checked">备选项</tis-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),t._m(2),e("p",[t._v("多选框不可用状态。")]),e("demo-block",[e("div",[e("p",[t._v("设置"),e("code",[t._v("disabled")]),t._v("属性即可。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-checkbox v-model="checked1" disabled>备选项1</tis-checkbox>\n  <tis-checkbox v-model="checked2" disabled>备选项</tis-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),t._m(3),e("p",[t._v("适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。")]),e("demo-block",[e("div",[e("p",[e("code",[t._v("checkbox-group")]),t._v("元素能把多个 checkbox 管理为一组，只需要在 Group 中使用"),e("code",[t._v("v-model")]),t._v("绑定"),e("code",[t._v("Array")]),t._v("类型的变量即可。 "),e("code",[t._v("tis-checkbox")]),t._v(" 的 "),e("code",[t._v("label")]),t._v("属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。"),e("code",[t._v("label")]),t._v("与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-checkbox-group v-model="checkList">\n    <tis-checkbox label="复选框 A"></tis-checkbox>\n    <tis-checkbox label="复选框 B"></tis-checkbox>\n    <tis-checkbox label="复选框 C"></tis-checkbox>\n    <tis-checkbox label="禁用" disabled></tis-checkbox>\n    <tis-checkbox label="选中且禁用" disabled></tis-checkbox>\n  </tis-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: [\'选中且禁用\',\'复选框 A\']\n      };\n    }\n  };\n<\/script>\n')])])])],2),t._m(4),t._m(5),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</tis-checkbox>\n  <div style="margin: 15px 0;"></div>\n  <tis-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n    <tis-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</tis-checkbox>\n  </tis-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),t._m(6),t._m(7),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-checkbox-group \n    v-model=\"checkedCities\"\n    :min=\"1\"\n    :max=\"2\">\n    <tis-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</tis-checkbox>\n  </tis-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),t._m(8),e("p",[t._v("按钮样式的多选组合。")]),e("demo-block",[e("div",[e("p",[t._v("只需要把"),e("code",[t._v("tis-checkbox")]),t._v("元素替换为"),e("code",[t._v("tis-checkbox-button")]),t._v("元素即可。此外，Tis 还提供了"),e("code",[t._v("size")]),t._v("属性。")])]),e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <div style=\"margin-top: 20px\">\n    <tis-checkbox-group v-model=\"checkboxGroup2\" size=\"medium\">\n      <tis-checkbox-button v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</tis-checkbox-button>\n    </tis-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),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"checkbox-duo-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-duo-xuan-kuang"}},[this._v("¶")]),this._v(" Checkbox 多选框")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"duo-xuan-kuang-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan-kuang-zu"}},[this._v("¶")]),this._v(" 多选框组")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"indeterminate-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate-zhuang-tai"}},[this._v("¶")]),this._v(" indeterminate 状态")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[t("code",[this._v("indeterminate")]),this._v(" 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 可选项目数量的限制")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("使用 "),t("code",[this._v("min")]),this._v(" 和 "),t("code",[this._v("max")]),this._v(" 属性能够限制可以被勾选的项目的数量。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"an-niu-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi"}},[this._v("¶")]),this._v(" 按钮样式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"checkbox-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes"}},[this._v("¶")]),this._v(" Checkbox Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值")]),e("td",[t._v("string / number / boolean")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("选中状态的值（只有在"),e("code",[t._v("checkbox-group")]),t._v("或者绑定对象类型为"),e("code",[t._v("array")]),t._v("时有效）")]),e("td",[t._v("string / number / boolean")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("true-label")]),e("td",[t._v("选中时的值")]),e("td",[t._v("string / number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("false-label")]),e("td",[t._v("没有选中时的值")]),e("td",[t._v("string / number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("border")]),e("td",[t._v("是否显示边框")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("Checkbox 的尺寸，仅在 border 为真时有效")]),e("td",[t._v("string")]),e("td",[t._v("medium / small / mini")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("name")]),e("td",[t._v("原生 name 属性")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("checked")]),e("td",[t._v("当前是否勾选")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("indeterminate")]),e("td",[t._v("设置 indeterminate 状态，只负责样式控制")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"checkbox-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-events"}},[this._v("¶")]),this._v(" Checkbox Events")])},function(){var t=this.$createElement,t=this._self._c||t;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("更新后的值")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"checkbox-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes"}},[this._v("¶")]),this._v(" Checkbox-group Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值")]),e("td",[t._v("array")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效")]),e("td",[t._v("string")]),e("td",[t._v("medium / small / mini")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("min")]),e("td",[t._v("可被勾选的 checkbox 的最小数量")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("max")]),e("td",[t._v("可被勾选的 checkbox 的最大数量")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("text-color")]),e("td",[t._v("按钮形式的 Checkbox 激活时的文本颜色")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("#ffffff")])]),e("tr",[e("td",[t._v("fill")]),e("td",[t._v("按钮形式的 Checkbox 激活时的填充色和边框色")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("#409EFF")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"checkbox-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events"}},[this._v("¶")]),this._v(" Checkbox-group Events")])},function(){var t=this.$createElement,t=this._self._c||t;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("更新后的值")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"checkbox-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-button-attributes"}},[this._v("¶")]),this._v(" Checkbox-button Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("label")]),e("td",[t._v("选中状态的值（只有在"),e("code",[t._v("checkbox-group")]),t._v("或者绑定对象类型为"),e("code",[t._v("array")]),t._v("时有效）")]),e("td",[t._v("string / number / boolean")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("true-label")]),e("td",[t._v("选中时的值")]),e("td",[t._v("string / number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("false-label")]),e("td",[t._v("没有选中时的值")]),e("td",[t._v("string / number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("name")]),e("td",[t._v("原生 name 属性")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("checked")]),e("td",[t._v("当前是否勾选")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])])])])}],!1,null,null,null);e.default=r.exports},1249:function(t,e,n){"use strict";n.r(e);var a=n(46),i=n(961),s=n(964),r=n(962),l=n(183),o=n(140),d=n(47),c=n(60),v=n.n(c),_=n(295),s={components:{ThemeConfigurator:i.a,BasicTokensPreview:r.a,ComponentsPreview:s.a},data:function(){return{previewConfig:{},themeConfig:{},userTheme:[],editorTop:0,editorHeight:1e3,isFixed:!1}},computed:{isOfficial:function(){return"official"===this.previewConfig.type}},created:function(){var e=this;this.throttledHandleScroll=v()(10,!0,function(t){e.handleScroll(t)})},methods:{navBack:function(){this.$router.go(-1),this.$nextTick(function(){window.scrollTo(0,0)})},getNewUserThemeName:function(t){for(var e=1,n=void 0;n=t+"-"+e,0!==this.userTheme.filter(function(t){return t.name===n}).length;)e+=1;return n},onUserConfigUpdate:function(t){var e=JSON.stringify(t),n=this.previewConfig,t=n.type,a=n.name;if(this.isOfficial){if(8<=this.userTheme.length)return void this.$message.error(Object(_.c)("max-user-theme"));n=this.getNewUserThemeName(a);return this.previewConfig.name=n,this.previewConfig.type="user",this.userTheme.push({update:Date.now(),name:n,theme:e}),void Object(l.d)(this.userTheme)}"user"===t&&(this.userTheme.forEach(function(t){t.name===a&&(t.update=Date.now(),t.theme=e)}),Object(l.d)(this.userTheme))},handleScroll:function(){var t=this.$refs.themePreview.getBoundingClientRect(),e=t.top,n=t.bottom,t=this.editorHeight+30+20;e<0?(this.isFixed=!0,this.editorTop=n<t?30-t+n:30):(this.isFixed=!1,this.editorTop=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(l.b)();var t=Object(l.a)(),e=this.$route.params.refer;t&&e?(this.previewConfig=t,(t=Object(o.a)(t.theme))&&(this.themeConfig=t,a.a.$emit(d.a,t))):this.$alert(Object(_.c)("no-preview-config"),Object(_.c)("notice"),{confirmButtonText:Object(_.c)("confirm"),callback:function(t){var e=n.$route.path.replace("/preview","");n.$router.replace(e)}})}},n=(n(1039),n(0)),s=Object(n.a)(s,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",{ref:"themePreview",staticClass:"page-container page-theme-preview"},[e("section",{staticClass:"display"},[e("tis-button",{attrs:{type:"text",icon:"el-icon-back"},on:{click:t.navBack}},[t._v("\n      返回\n    ")]),e("h3",[t._v(t._s(t.previewConfig.name))]),e("basic-tokens-preview"),e("components-preview")],1),e("aside",{staticClass:"side"},[e("section",{staticClass:"editor",class:{fixed:t.isFixed},style:{top:t.editorTop+"px",height:t.editorHeight+"px"}},[e("theme-configurator",{attrs:{isOfficial:t.isOfficial,themeConfig:t.themeConfig,previewConfig:t.previewConfig,onUserConfigUpdate:t.onUserConfigUpdate}})],1)])])},[],!1,null,null,null);e.default=s.exports},1264:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-pull-refresh",{on:{refresh:e.onRefresh},model:{value:e.isLoading,callback:function(t){e.isLoading=t},expression:"isLoading"}},[t("p",[e._v("刷新次数: "+e._s(e.count))])])],1)},staticRenderFns:[]},{data:function(){return{count:0,isLoading:!1}},methods:{onRefresh:function(){var t=this;setTimeout(function(){t.isLoading=!1,t.count++},1e3)}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-pull-refresh",{attrs:{"success-text":"刷新成功"},on:{refresh:e.onRefresh},model:{value:e.isLoading,callback:function(t){e.isLoading=t},expression:"isLoading"}},[t("p",[e._v("刷新次数: "+e._s(e.count))])])],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-pull-refresh",{attrs:{"head-height":80},on:{refresh:e.onRefresh},model:{value:e.isLoading,callback:function(t){e.isLoading=t},expression:"isLoading"}},[[t("img",{staticClass:"doge",style:{transform:"scale("+e.props.distance/80+")"},attrs:{src:"https://img.yzcdn.cn/mt/doge.png"}})],e._v(" "),[t("img",{staticClass:"doge",attrs:{src:"https://img.yzcdn.cn/mt/doge.png"}})],e._v(" "),[t("img",{staticClass:"doge",attrs:{src:"https://img.yzcdn.cn/mt/doge-fire.jpg"}})],e._v(" "),t("p",[e._v("刷新次数: "+e._s(e.count))])],2)],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("p",[t._v("用于提供下拉刷新的交互操作。")]),t._m(2),t._m(3),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-pull-refresh v-model="isLoading" @refresh="onRefresh">\n  <p>刷新次数: {{ count }}</p>\n</m-pull-refresh>\n\n<script>\n\nexport default {\n  data() {\n    return {\n      count: 0,\n      isLoading: false,\n    };\n  },\n  methods: {\n    onRefresh() {\n      setTimeout(() => {\n        this.isLoading = false;\n        this.count++;\n      }, 1000);\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(4),t._m(5),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-pull-refresh\n  v-model="isLoading"\n  success-text="刷新成功"\n  @refresh="onRefresh"\n>\n  <p>刷新次数: {{ count }}</p>\n</m-pull-refresh>\n')])])])],2),t._m(6),e("p",[t._v("通过插槽可以自定义下拉刷新过程中的提示内容。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">\n  \x3c!-- 下拉提示，通过 scale 实现一个缩放效果 --\x3e\n  <template #pulling="props">\n    <img\n      class="doge"\n      src="https://img.yzcdn.cn/mt/doge.png"\n      :style="{ transform: `scale(${props.distance / 80})` }"\n    />\n  </template>\n\n  \x3c!-- 释放提示 --\x3e\n  <template #loosing>\n    <img class="doge" src="https://img.yzcdn.cn/mt/doge.png" />\n  </template>\n\n  \x3c!-- 加载提示 --\x3e\n  <template #loading>\n    <img class="doge" src="https://img.yzcdn.cn/mt/doge-fire.jpg" />\n  </template>\n  <p>刷新次数: {{ count }}</p>\n</m-pull-refresh>\n\n<style>\n  .doge {\n    width: 140px;\n    height: 72px;\n    margin-top: 8px;\n    border-radius: 4px;\n  }\n</style>\n')])])])],2),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),e("p",[t._v("默认情况下，下拉区域的高度是和内容高度保持一致的，如果需要让下拉区域始终为全屏，可以给 PullRefresh 设置一个与屏幕大小相等的最小高度：")]),t._m(19)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"pullrefresh-xia-la-shua-xin"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pullrefresh-xia-la-shua-xin"}},[this._v("¶")]),this._v(" PullRefresh 下拉刷新")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("下拉刷新时会触发 "),t("code",[this._v("refresh")]),this._v(" 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 "),t("code",[this._v("v-model")]),this._v(" 设置为 "),t("code",[this._v("false")]),this._v("，表示加载完成。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cheng-gong-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cheng-gong-ti-shi"}},[this._v("¶")]),this._v(" 成功提示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("success-text")]),this._v(" 可以设置刷新成功后的顶部提示文案。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-ti-shi"}},[this._v("¶")]),this._v(" 自定义提示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("v-model")]),e("td",[t._v("是否处于加载中状态")]),e("td",[e("em",[t._v("boolean")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("pulling-text")]),e("td",[t._v("下拉过程提示文案")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("下拉即可刷新...")])])]),e("tr",[e("td",[t._v("loosing-text")]),e("td",[t._v("释放过程提示文案")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("释放即可刷新...")])])]),e("tr",[e("td",[t._v("loading-text")]),e("td",[t._v("加载过程提示文案")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("加载中...")])])]),e("tr",[e("td",[t._v("success-text")]),e("td",[t._v("刷新成功提示文案")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("success-duration")]),e("td",[t._v("刷新成功提示展示时长(ms)")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("500")])])]),e("tr",[e("td",[t._v("animation-duration")]),e("td",[t._v("动画时长")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("300")])])]),e("tr",[e("td",[t._v("head-height "),e("code",[t._v("v2.4.2")])]),e("td",[t._v("顶部内容高度")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("50")])])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用下拉刷新")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this.$createElement,t=this._self._c||t;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("refresh")]),t("td",[this._v("下拉刷新时触发")]),t("td",[this._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("default")]),e("td",[t._v("自定义内容")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("normal")]),e("td",[t._v("非下拉状态时顶部内容")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("pulling")]),e("td",[t._v("下拉过程中顶部内容")]),e("td",[t._v("{ distance: 当前下拉距离 }")])]),e("tr",[e("td",[t._v("loosing")]),e("td",[t._v("释放过程中顶部内容")]),e("td",[t._v("{ distance: 当前下拉距离 }")])]),e("tr",[e("td",[t._v("loading")]),e("td",[t._v("加载过程中顶部内容")]),e("td",[t._v("{ distance: 当前下拉距离 }")])]),e("tr",[e("td",[t._v("success")]),e("td",[t._v("刷新成功提示内容")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),t("a",{attrs:{href:"#/zh-CN/theme"}},[this._v("主题定制")]),this._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@pull-refresh-head-height")]),e("td",[e("code",[t._v("50px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@pull-refresh-head-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@pull-refresh-head-text-color")]),e("td",[e("code",[t._v("@gray-6")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"chang-jian-wen-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-wen-ti"}},[this._v("¶")]),this._v(" 常见问题")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"pullreresh-de-nei-rong-wei-tian-man-ping-mu-shi-zhi-you-yi-bu-fen-qu-yu-ke-yi-xia-la"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pullreresh-de-nei-rong-wei-tian-man-ping-mu-shi-zhi-you-yi-bu-fen-qu-yu-ke-yi-xia-la"}},[this._v("¶")]),this._v(" PullReresh 的内容未填满屏幕时，只有一部分区域可以下拉？")])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-html"},[this._v('<m-pull-refresh style="min-height: 100vh;" />\n')])])}],!1,null,null,null);e.default=a.exports},1270:function(t,e,n){"use strict";n.r(e);var a,i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},i={name:"component-doc",components:{"element-demo0":i({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-cascader",{attrs:{options:e.options},on:{change:e.handleChange},model:{value:e.value,callback:function(t){e.value=t},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(t){console.log(t)}}}),"element-demo1":i({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-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-demo2":i({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-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-demo3":i({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("div",{staticClass:"block"},[e("span",{staticClass:"demonstration"},[t._v("默认显示所有Tag")]),t._v(" "),e("tis-cascader",{attrs:{options:t.options,props:t.props,clearable:""}})],1),t._v(" "),e("div",{staticClass:"block"},[e("span",{staticClass:"demonstration"},[t._v("折叠展示Tag")]),t._v(" "),e("tis-cascader",{attrs:{options:t.options,props:t.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-demo4":i({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("单选选择任意一级选项")]),this._v(" "),t("tis-cascader",{attrs:{options:this.options,props:{checkStrictly:!0},clearable:""}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("多选选择任意一级选项")]),this._v(" "),t("tis-cascader",{attrs:{options:this.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-demo5":(a=0,i({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-cascader",{attrs:{props:this.props}})],1)},staticRenderFns:[]},{data:function(){return{props:{lazy:!0,lazyLoad:function(t,e){var n=t.level;setTimeout(function(){var t=Array.from({length:n+1}).map(function(t){return{value:++a,label:"选项"+a,leaf:2<=n}});e(t)},1e3)}}}}})),"element-demo6":i({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("单选可搜索")]),this._v(" "),t("tis-cascader",{attrs:{placeholder:"试试搜索：指南",options:this.options,filterable:""}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("多选可搜索")]),this._v(" "),t("tis-cascader",{attrs:{placeholder:"试试搜索：指南",options:this.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-demo7":i({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-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:"组件交互文档"}]}]}}})}},n=n(0),i=Object(n.a)(i,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。")]),t._m(1),e("p",[t._v("有两种触发子菜单的方式")]),e("demo-block",[e("div",[e("p",[t._v("只需为 Cascader 的"),e("code",[t._v("options")]),t._v("属性指定选项数组即可渲染出一个级联选择器。通过"),e("code",[t._v("props.expandTrigger")]),t._v("可以定义展开子级菜单的触发方式。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<tis-cascader\n  v-model=\"value\"\n  :options=\"options\"\n  @change=\"handleChange\">\n</tis-cascader>\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),t._m(2),t._m(3),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<tis-cascader :options=\"options\" clearable></tis-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),t._m(4),e("p",[t._v("可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。")]),e("demo-block",[e("div",[e("p",[t._v("属性"),e("code",[t._v("show-all-levels")]),t._v("定义了是否显示完整的路径，将其赋值为"),e("code",[t._v("false")]),t._v("则仅显示最后一级")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<tis-cascader :options=\"options\" :show-all-levels=\"false\"></tis-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),t._m(5),t._m(6),e("demo-block",[e("div",[e("p",[t._v("在开启多选模式后，默认情况下会展示所有已选中的选项的Tag，你可以使用"),e("code",[t._v("collapse-tags")]),t._v("来折叠Tag")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<div class=\"block\">\n  <span class=\"demonstration\">默认显示所有Tag</span>\n  <tis-cascader\n    :options=\"options\"\n    :props=\"props\"\n    clearable></tis-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">折叠展示Tag</span>\n  <tis-cascader\n    :options=\"options\"\n    :props=\"props\"\n    collapse-tags\n    clearable></tis-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),t._m(7),e("p",[t._v("在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。")]),e("demo-block",[e("div",[e("p",[t._v("可通过 "),e("code",[t._v("props.checkStrictly = true")]),t._v(" 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。")])]),e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<div class=\"block\">\n  <span class=\"demonstration\">单选选择任意一级选项</span>\n  <tis-cascader\n    :options=\"options\"\n    :props=\"{ checkStrictly: true }\"\n    clearable></tis-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">多选选择任意一级选项</span>\n  <tis-cascader\n    :options=\"options\"\n    :props=\"{ multiple: true, checkStrictly: true }\"\n    clearable></tis-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),t._m(8),e("p",[t._v("当选中某一级时，动态加载该级下的选项。")]),e("demo-block",[e("div",[e("p",[t._v("通过"),e("code",[t._v("lazy")]),t._v("开启动态加载，并通过"),e("code",[t._v("lazyload")]),t._v("来设置加载数据源的方法。"),e("code",[t._v("lazyload")]),t._v("方法有两个参数，第一个参数"),e("code",[t._v("node")]),t._v("为当前点击的节点，第二个"),e("code",[t._v("resolve")]),t._v("为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为"),e("code",[t._v("leaf")]),t._v("，可通过"),e("code",[t._v("props.leaf")]),t._v("修改)，否则会简单的以有无子节点来判断是否为叶子节点。")])]),e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-cascader :props="props"></tis-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),t._m(9),e("p",[t._v("可以快捷地搜索选项并选择。")]),e("demo-block",[e("div",[e("p",[t._v("将"),e("code",[t._v("filterable")]),t._v("赋值为"),e("code",[t._v("true")]),t._v("即可打开搜索功能，默认会匹配节点的"),e("code",[t._v("label")]),t._v("或所有父节点的"),e("code",[t._v("label")]),t._v("(由"),e("code",[t._v("show-all-levels")]),t._v("决定)中包含输入值的选项。你也可以用"),e("code",[t._v("filter-method")]),t._v("自定义搜索逻辑，接受一个函数，第一个参数是节点"),e("code",[t._v("node")]),t._v("，第二个参数是搜索关键词"),e("code",[t._v("keyword")]),t._v("，通过返回布尔值表示是否命中。")])]),e("template",{slot:"source"},[e("element-demo6")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<div class=\"block\">\n  <span class=\"demonstration\">单选可搜索</span>\n  <tis-cascader\n    placeholder=\"试试搜索：指南\"\n    :options=\"options\"\n    filterable></tis-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">多选可搜索</span>\n  <tis-cascader\n    placeholder=\"试试搜索：指南\"\n    :options=\"options\"\n    :props=\"{ multiple: true }\"\n    filterable></tis-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),t._m(10),e("p",[t._v("级联面板是级联选择器的核心组件，与级联选择器一样，有单选、多选、动态加载等多种功能。")]),e("demo-block",[e("div",[e("p",[t._v("和级联选择器一样，通过"),e("code",[t._v("options")]),t._v("来指定选项，也可通过"),e("code",[t._v("props")]),t._v("来设置多选、动态加载等功能，具体详情见下方API表格。")])]),e("template",{slot:"source"},[e("element-demo7")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<tis-cascader-panel :options=\"options\"></tis-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),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26),t._m(27),t._m(28)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"cascader-ji-lian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-ji-lian-xuan-ze-qi"}},[this._v("¶")]),this._v(" Cascader 级联选择器")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ke-qing-kong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong"}},[this._v("¶")]),this._v(" 可清空")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("clearable")]),this._v(" 设置输入框可清空")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 仅显示最后一级")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan"}},[this._v("¶")]),this._v(" 多选")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("可通过 "),t("code",[this._v("props.multiple = true")]),this._v(" 来开启多选模式")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 选择任意一级选项")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dong-tai-jia-zai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-jia-zai"}},[this._v("¶")]),this._v(" 动态加载")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-lian-mian-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-lian-mian-ban"}},[this._v("¶")]),this._v(" 级联面板")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cascader-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-attributes"}},[this._v("¶")]),this._v(" Cascader Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("选中项绑定值")]),e("td",[t._v("-")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("options")]),e("td",[t._v("可选项数据源，键名可通过 "),e("code",[t._v("Props")]),t._v(" 属性配置")]),e("td",[t._v("array")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("props")]),e("td",[t._v("配置选项，具体见下表")]),e("td",[t._v("object")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("尺寸")]),e("td",[t._v("string")]),e("td",[t._v("medium / small / mini")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("placeholder")]),e("td",[t._v("输入框占位文本")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("请选择")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("clearable")]),e("td",[t._v("是否支持清空选项")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("show-all-levels")]),e("td",[t._v("输入框中是否显示选中值的完整路径")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("collapse-tags")]),e("td",[t._v("多选模式下是否折叠Tag")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("separator")]),e("td",[t._v("选项分隔符")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("斜杠' / '")])]),e("tr",[e("td",[t._v("filterable")]),e("td",[t._v("是否可搜索选项")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("filter-method")]),e("td",[t._v("自定义搜索逻辑，第一个参数是节点"),e("code",[t._v("node")]),t._v("，第二个参数是搜索关键词"),e("code",[t._v("keyword")]),t._v("，通过返回布尔值表示是否命中")]),e("td",[t._v("function(node, keyword)")]),e("td",[t._v("-")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("debounce")]),e("td",[t._v("搜索关键词输入的去抖延迟，毫秒")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("300")])]),e("tr",[e("td",[t._v("before-filter")]),e("td",[t._v("筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选")]),e("td",[t._v("function(value)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("popper-class")]),e("td",[t._v("自定义浮层类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cascader-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-events"}},[this._v("¶")]),this._v(" Cascader Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("change")]),e("td",[t._v("当选中节点变化时触发")]),e("td",[t._v("选中节点的值")])]),e("tr",[e("td",[t._v("expand-change")]),e("td",[t._v("当展开节点发生变化时触发")]),e("td",[t._v("各父级选项值组成的数组")])]),e("tr",[e("td",[t._v("blur")]),e("td",[t._v("当失去焦点时触发")]),e("td",[t._v("(event: Event)")])]),e("tr",[e("td",[t._v("focus")]),e("td",[t._v("当获得焦点时触发")]),e("td",[t._v("(event: Event)")])]),e("tr",[e("td",[t._v("visible-change")]),e("td",[t._v("下拉框出现/隐藏时触发")]),e("td",[t._v("出现则为 true，隐藏则为 false")])]),e("tr",[e("td",[t._v("remove-tag")]),e("td",[t._v("在多选模式下，移除Tag时触发")]),e("td",[t._v("移除的Tag对应的节点的值")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cascader-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-methods"}},[this._v("¶")]),this._v(" Cascader Methods")])},function(){var t=this.$createElement,t=this._self._c||t;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("getCheckedNodes")]),t("td",[this._v("获取选中的节点")]),t("td",[this._v("(leafOnly) 是否只是叶子节点，默认值为 "),t("code",[this._v("false")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cascader-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-slots"}},[this._v("¶")]),this._v(" Cascader Slots")])},function(){var t=this.$createElement,t=this._self._c||t;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("自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据")])]),t("tr",[t("td",[this._v("empty")]),t("td",[this._v("无匹配选项时的内容")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cascaderpanel-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascaderpanel-attributes"}},[this._v("¶")]),this._v(" CascaderPanel Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("选中项绑定值")]),e("td",[t._v("-")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("options")]),e("td",[t._v("可选项数据源，键名可通过 "),e("code",[t._v("Props")]),t._v(" 属性配置")]),e("td",[t._v("array")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("props")]),e("td",[t._v("配置选项，具体见下表")]),e("td",[t._v("object")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cascaderpanel-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascaderpanel-events"}},[this._v("¶")]),this._v(" CascaderPanel Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("change")]),e("td",[t._v("当选中节点变化时触发")]),e("td",[t._v("选中节点的值")])]),e("tr",[e("td",[t._v("expand-change")]),e("td",[t._v("当展开节点发生变化时触发")]),e("td",[t._v("各父级选项值组成的数组")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cascaderpanel-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascaderpanel-methods"}},[this._v("¶")]),this._v(" CascaderPanel Methods")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("getCheckedNodes")]),e("td",[t._v("获取选中的节点数组")]),e("td",[t._v("(leafOnly) 是否只是叶子节点，默认值为 "),e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("clearCheckedNodes")]),e("td",[t._v("清空选中的节点")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"cascaderpanel-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascaderpanel-slots"}},[this._v("¶")]),this._v(" CascaderPanel Slots")])},function(){var t=this.$createElement,t=this._self._c||t;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("自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("expandTrigger")]),e("td",[t._v("次级菜单的展开方式")]),e("td",[t._v("string")]),e("td",[t._v("click / hover")]),e("td",[t._v("'click'")])]),e("tr",[e("td",[t._v("multiple")]),e("td",[t._v("是否多选")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("checkStrictly")]),e("td",[t._v("是否严格的遵守父子节点不互相关联")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("emitPath")]),e("td",[t._v("在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("lazy")]),e("td",[t._v("是否动态加载子节点，需与 lazyLoad 方法结合使用")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("lazyLoad")]),e("td",[t._v("加载动态数据的方法，仅在 lazy 为 true 时有效")]),e("td",[t._v("function(node, resolve)，"),e("code",[t._v("node")]),t._v("为当前点击的节点，"),e("code",[t._v("resolve")]),t._v("为数据加载完成的回调(必须调用)")]),e("td",[t._v("-")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("value")]),e("td",[t._v("指定选项的值为选项对象的某个属性值")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("'value'")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("指定选项标签为选项对象的某个属性值")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("'label'")])]),e("tr",[e("td",[t._v("children")]),e("td",[t._v("指定选项的子选项为选项对象的某个属性值")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("'children'")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("指定选项的禁用为选项对象的某个属性值")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("'disabled'")])]),e("tr",[e("td",[t._v("leaf")]),e("td",[t._v("指定选项的叶子节点的标志位为选项对象的某个属性值")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("'leaf'")])])])])}],!1,null,null,null);e.default=i.exports},1278:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-search",{attrs:{placeholder:"请输入搜索关键词"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:""}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("form",{attrs:{action:"/"}},[t("m-search",{attrs:{"show-action":"",placeholder:"请输入搜索关键词"},on:{search:e.onSearch,cancel:e.onCancel},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)])},staticRenderFns:[]},{data:function(){return{value:""}},methods:{onSearch:function(t){console.log("输出内容：",t)},onCancel:function(){console.log("取消")}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-search",{attrs:{placeholder:"请输入搜索关键词","input-align":"center"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-search",{attrs:{disabled:"",placeholder:"请输入搜索关键词"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-search",{attrs:{shape:"round",background:"#4fc08d",placeholder:"请输入搜索关键词"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-search",{attrs:{"show-action":"",label:"地址",placeholder:"请输入搜索关键词"},on:{search:e.onSearch},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},[[t("div",{on:{click:e.onSearch}},[e._v("搜索")])]],2)],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("p",[t._v("用于搜索场景的输入框组件。")]),t._m(2),t._m(3),t._m(4),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-search v-model="value" placeholder="请输入搜索关键词" />\n\n<script>\nexport default {\n  data() {\n    return {\n      value: \'\',\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(5),t._m(6),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<form action="/">\n  <m-search\n    v-model="value"\n    show-action\n    placeholder="请输入搜索关键词"\n    @search="onSearch"\n    @cancel="onCancel"\n  />\n</form>\n\n<script>\nexport default {\n  data() {\n    return {\n      value: \'\',\n    };\n  },\n  methods: {\n    onSearch(val) {\n      console.log(\'输出内容：\', val);\n    },\n    onCancel() {\n      console.log(\'取消\');\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(7),t._m(8),t._m(9),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-search\n  v-model="value"\n  placeholder="请输入搜索关键词"\n  input-align="center"\n/>\n')])])])],2),t._m(10),t._m(11),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-search v-model="value" disabled placeholder="请输入搜索关键词" />\n')])])])],2),t._m(12),t._m(13),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-search\n  v-model="value"\n  shape="round"\n  background="#4fc08d"\n  placeholder="请输入搜索关键词"\n/>\n')])])])],2),t._m(14),t._m(15),e("demo-block",[e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-search\n  v-model="value"\n  show-action\n  label="地址"\n  placeholder="请输入搜索关键词"\n  @search="onSearch"\n>\n  <template #action>\n    <div @click="onSearch">搜索</div>\n  </template>\n</m-search>\n')])])])],2),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26),t._m(27),t._m(28)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"search-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#search-sou-suo"}},[this._v("¶")]),this._v(" Search 搜索")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dai-ma-yan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ma-yan-shi"}},[this._v("¶")]),this._v(" 代码演示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[t("code",[this._v("v-model")]),this._v(" 用于控制搜索框中的文字，"),t("code",[this._v("background")]),this._v(" 可以自定义搜索框外部背景色。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shi-jian-jian-ting"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-jian-jian-ting"}},[this._v("¶")]),this._v(" 事件监听")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("Search 组件提供了 "),e("code",[t._v("search")]),t._v(" 和 "),e("code",[t._v("cancel")]),t._v(" 事件，"),e("code",[t._v("search")]),t._v(" 事件在点击键盘上的搜索/回车按钮后触发，"),e("code",[t._v("cancel")]),t._v(" 事件在点击搜索框右侧取消按钮时触发。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("Tips: 在 m-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"sou-suo-kuang-nei-rong-dui-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sou-suo-kuang-nei-rong-dui-qi"}},[this._v("¶")]),this._v(" 搜索框内容对齐")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("input-align")]),this._v(" 属性设置搜索框内容的对齐方式，可选值为 "),t("code",[this._v("center")]),this._v("、"),t("code",[this._v("right")]),this._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jin-yong-sou-suo-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-sou-suo-kuang"}},[this._v("¶")]),this._v(" 禁用搜索框")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("disabled")]),this._v(" 属性禁用搜索框。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-bei-jing-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-bei-jing-se"}},[this._v("¶")]),this._v(" 自定义背景色")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("background")]),this._v(" 属性可以设置搜索框外部的背景色，通过 "),t("code",[this._v("shape")]),this._v(" 属性设置搜索框的形状，可选值为 "),t("code",[this._v("round")]),this._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-an-niu"}},[this._v("¶")]),this._v(" 自定义按钮")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("使用 "),t("code",[this._v("action")]),this._v(" 插槽可以自定义右侧按钮的内容。使用插槽后，"),t("code",[this._v("cancel")]),this._v(" 事件将不再触发。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("label")]),e("td",[t._v("搜索框左侧文本")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("shape")]),e("td",[t._v("搜索框形状，可选值为 "),e("code",[t._v("round")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("square")])])]),e("tr",[e("td",[t._v("background")]),e("td",[t._v("搜索框外部背景色")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("#f2f2f2")])])]),e("tr",[e("td",[t._v("maxlength")]),e("td",[t._v("输入的最大字符数")]),e("td",[e("em",[t._v("number | string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("placeholder")]),e("td",[t._v("占位提示文字")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("clearable")]),e("td",[t._v("是否启用清除图标，点击清除图标后会清空输入框")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("clear-trigger "),e("code",[t._v("v2.9.1")])]),e("td",[t._v("显示清除图标的时机，"),e("code",[t._v("always")]),t._v(" 表示输入框不为空时展示，"),e("br"),e("code",[t._v("focus")]),t._v(" 表示输入框聚焦且不为空时展示")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("focus")])])]),e("tr",[e("td",[t._v("autofocus")]),e("td",[t._v("是否自动聚焦，iOS 系统不支持该属性")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("show-action")]),e("td",[t._v("是否在搜索框右侧显示取消按钮")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("action-text")]),e("td",[t._v("取消按钮文字")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("取消")])])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用输入框")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("readonly")]),e("td",[t._v("是否将输入框设为只读")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("error")]),e("td",[t._v("是否将输入内容标红")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("input-align")]),e("td",[t._v("输入框内容对齐方式，可选值为 "),e("code",[t._v("center")]),e("code",[t._v("right")])]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("left")])])]),e("tr",[e("td",[t._v("left-icon")]),e("td",[t._v("输入框左侧"),e("a",{attrs:{href:"#/zh-CN/icon"}},[t._v("图标名称")]),t._v("或图片链接")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("search")])])]),e("tr",[e("td",[t._v("right-icon")]),e("td",[t._v("输入框右侧"),e("a",{attrs:{href:"#/zh-CN/icon"}},[t._v("图标名称")]),t._v("或图片链接")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("search")]),e("td",[t._v("确定搜索时触发")]),e("td",[e("em",[t._v("value: string (当前输入的值)")])])]),e("tr",[e("td",[t._v("input")]),e("td",[t._v("输入框内容变化时触发")]),e("td",[e("em",[t._v("value: string (当前输入的值)")])])]),e("tr",[e("td",[t._v("focus")]),e("td",[t._v("输入框获得焦点时触发")]),e("td",[e("em",[t._v("event: Event")])])]),e("tr",[e("td",[t._v("blur")]),e("td",[t._v("输入框失去焦点时触发")]),e("td",[e("em",[t._v("event: Event")])])]),e("tr",[e("td",[t._v("clear")]),e("td",[t._v("点击清除按钮后触发")]),e("td",[e("em",[t._v("event: Event")])])]),e("tr",[e("td",[t._v("cancel")]),e("td",[t._v("点击取消按钮时触发")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("left")]),e("td",[t._v("自定义左侧内容（搜索框外）")])]),e("tr",[e("td",[t._v("action")]),e("td",[t._v("自定义右侧内容（搜索框外），设置"),e("code",[t._v("show-action")]),t._v("属性后展示")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("自定义左侧文本（搜索框内）")])]),e("tr",[e("td",[t._v("left-icon")]),e("td",[t._v("自定义左侧图标（搜索框内）")])]),e("tr",[e("td",[t._v("right-icon")]),e("td",[t._v("自定义右侧图标（搜索框内）")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),t("a",{attrs:{href:"#/zh-CN/theme"}},[this._v("主题定制")]),this._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@search-padding")]),e("td",[e("code",[t._v("10px @padding-sm")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@search-background-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@search-content-background-color")]),e("td",[e("code",[t._v("@gray-1")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@search-input-height")]),e("td",[e("code",[t._v("34px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@search-label-padding")]),e("td",[e("code",[t._v("0 5px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@search-label-color")]),e("td",[e("code",[t._v("@text-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@search-label-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@search-left-icon-color")]),e("td",[e("code",[t._v("@gray-6")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@search-action-padding")]),e("td",[e("code",[t._v("0 @padding-xs")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@search-action-text-color")]),e("td",[e("code",[t._v("@text-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@search-action-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"chang-jian-wen-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-wen-ti"}},[this._v("¶")]),this._v(" 常见问题")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zai-zhuo-mian-duan-dian-ji-qing-chu-an-niu-wu-xiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zai-zhuo-mian-duan-dian-ji-qing-chu-an-niu-wu-xiao"}},[this._v("¶")]),this._v(" 在桌面端点击清除按钮无效？")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("清除按钮监听是的移动端 Touch 事件，参见"),t("a",{attrs:{href:"#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei"}},[this._v("桌面端适配")]),this._v("。")])}],!1,null,null,null);e.default=a.exports},1288:function(t,e,n){"use strict";n.r(e);var a=n(963),i=n(953),s=n(183),r=n(295),a={components:{ThemeCard:a.a},mounted:function(){this.userTheme=Object(s.b)(),Array.isArray(this.userTheme)||(this.userTheme=[],Object(s.d)(this.userTheme)),this.$nextTick(function(){window.scrollTo(0,0)})},data:function(){return{userTheme:[],maxUserTheme:8,copyDialogVisible:!1,copyForm:{},copyFormRule:{name:[{validator:this.validateCopyName,trigger:"blur"}]}}},computed:{officialTheme:function(){return this.padEmpeyTheme(i.b.concat(this.$isEle?i.a:[]))},userThemeCount:function(){return this.userTheme.length},showUserUpload:function(){return this.userThemeCount<8},displayUserTheme:function(){return this.padEmpeyTheme(this.userTheme,this.showUserUpload?1:0)}},methods:{getActionDisplayName:function(t){return Object(r.c)(t)},validateCopyName:function(t,e,n){e?0<this.filterUserThemeByName(e).length?n(new Error(this.getActionDisplayName("duplicate-them-name"))):n():n(new Error(this.getActionDisplayName("require-them-name")))},filterUserThemeByName:function(e){var n=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];return this.userTheme.filter(function(t){return n?t.name===e:t.name!==e})},padEmpeyTheme:function(t){if(!t.length)return[];var e=4-(t.length+(1<arguments.length&&void 0!==arguments[1]?arguments[1]:0))%4;return e<4?t.concat(Array(e).fill({})):t},onAction:function(t,e){var n=this;switch(t){case"copy":this.openCopyForm(e.theme);break;case"upload":this.openCopyForm(e);break;case"rename":this.openRenameForm(e.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(e.name)}).catch(function(){});break;default:return}},deleteUserThemeByName:function(t){this.userTheme=this.filterUserThemeByName(t,!1),this.saveToLocal()},openRenameForm:function(t){this.copyForm.oldname=t,this.copyDialogVisible=!0},openCopyForm:function(t){8<=this.userTheme.length?this.$message.error(this.getActionDisplayName("max-user-theme")):(this.copyForm.theme=t,this.copyDialogVisible=!0)},closeCopyForm:function(){var t=this;this.copyDialogVisible=!1,this.$nextTick(function(){t.copyForm={}})},copyToUser:function(){var i=this;this.$refs.copyForm.validate(function(t){var e,n,a;t&&(t=(e=i.copyForm).theme,n=e.name,a=e.oldname,t?i.userTheme.push({update:Date.now(),name:n,theme:t}):i.userTheme.forEach(function(t){t.name===a&&(t.update=Date.now(),t.name=n)}),i.saveToLocal(),i.closeCopyForm())})},saveToLocal:function(){Object(s.d)(this.userTheme)}}},n=(n(1046),n(0)),a=Object(n.a)(a,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"page-container page-theme"},[n("section",{staticClass:"theme-section"},[n("h2",[e._v("官方主题")]),n("ul",e._l(e.officialTheme,function(t){return n("li",{key:t.name,staticClass:"theme-card"},[n("theme-card",{attrs:{type:"official",config:t},on:{action:e.onAction}})],1)}),0)]),n("section",{staticClass:"theme-section second-section"},[n("h2",[e._v("我的主题 ("+e._s(e.userThemeCount)+"/"+e._s(e.maxUserTheme)+")")]),n("ul",[e.showUserUpload?n("li",{staticClass:"theme-card"},[n("theme-card",{attrs:{type:"upload",config:{name:"upload"}},on:{action:e.onAction}})],1):e._e(),e._l(e.displayUserTheme,function(t){return n("li",{key:t.name,staticClass:"theme-card"},[n("theme-card",{attrs:{type:"user",config:t},on:{action:e.onAction}})],1)})],2)]),n("tis-dialog",{attrs:{visible:e.copyDialogVisible},on:{"update:visible":function(t){e.copyDialogVisible=t}}},[n("tis-form",{ref:"copyForm",attrs:{model:e.copyForm,rules:e.copyFormRule}},[n("tis-form-item",{attrs:{label:"主题名称",prop:"name"}},[n("tis-input",{model:{value:e.copyForm.name,callback:function(t){e.$set(e.copyForm,"name",t)},expression:"copyForm.name"}})],1)],1),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("tis-button",{on:{click:e.closeCopyForm}},[e._v(e._s(e.getActionDisplayName("cancel")))]),n("tis-button",{attrs:{type:"primary"},on:{click:e.copyToUser}},[e._v(e._s(e.getActionDisplayName("confirm")))])],1)],1)],1)},[],!1,null,null,null);e.default=a.exports},1295:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("默认 Hover 指示器触发")]),e._v(" "),n("tis-carousel",{attrs:{height:"150px"}},e._l(4,function(t){return n("tis-carousel-item",{key:t},[n("h3",{staticClass:"small"},[e._v(e._s(t))])])}),1)],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Click 指示器触发")]),e._v(" "),n("tis-carousel",{attrs:{trigger:"click",height:"150px"}},e._l(4,function(t){return n("tis-carousel-item",{key:t},[n("h3",{staticClass:"small"},[e._v(e._s(t))])])}),1)],1)]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("tis-carousel",{attrs:{"indicator-position":"outside"}},e._l(4,function(t){return n("tis-carousel-item",{key:t},[n("h3",[e._v(e._s(t))])])}),1)]],2)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("tis-carousel",{attrs:{interval:5e3,arrow:"always"}},e._l(4,function(t){return n("tis-carousel-item",{key:t},[n("h3",[e._v(e._s(t))])])}),1)]],2)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("tis-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},e._l(6,function(t){return n("tis-carousel-item",{key:t},[n("h3",{staticClass:"medium"},[e._v(e._s(t))])])}),1)]],2)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("tis-carousel",{attrs:{height:"200px",direction:"vertical",autoplay:!1}},e._l(3,function(t){return n("tis-carousel-item",{key:t},[n("h3",{staticClass:"medium"},[e._v(e._s(t))])])}),1)]],2)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("在有限空间内，循环播放同一类型的图片、文字等内容")]),t._m(1),e("p",[t._v("适用广泛的基础用法")]),e("demo-block",[e("div",[e("p",[t._v("结合使用"),e("code",[t._v("tis-carousel")]),t._v("和"),e("code",[t._v("tis-carousel-item")]),t._v("标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在"),e("code",[t._v("tis-carousel-item")]),t._v("标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置"),e("code",[t._v("trigger")]),t._v("属性为"),e("code",[t._v("click")]),t._v("，可以达到点击触发的效果。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <div class="block">\n    <span class="demonstration">默认 Hover 指示器触发</span>\n    <tis-carousel height="150px">\n      <tis-carousel-item v-for="item in 4" :key="item">\n        <h3 class="small">{{ item }}</h3>\n      </tis-carousel-item>\n    </tis-carousel>\n  </div>\n  <div class="block">\n    <span class="demonstration">Click 指示器触发</span>\n    <tis-carousel trigger="click" height="150px">\n      <tis-carousel-item v-for="item in 4" :key="item">\n        <h3 class="small">{{ item }}</h3>\n      </tis-carousel-item>\n    </tis-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: #FFD64A;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n     background-color: #FFD64A;\n  }\n</style>\n')])])])],2),t._m(2),e("p",[t._v("可以将指示器的显示位置设置在容器外部")]),e("demo-block",[e("div",[e("p",[e("code",[t._v("indicator-position")]),t._v("属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为"),e("code",[t._v("outside")]),t._v("则会显示在外部；设置为"),e("code",[t._v("none")]),t._v("则不会显示指示器。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-carousel indicator-position="outside">\n    <tis-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </tis-carousel-item>\n  </tis-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),t._m(3),e("p",[t._v("可以设置切换箭头的显示时机")]),e("demo-block",[e("div",[e("p",[e("code",[t._v("arrow")]),t._v("属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将"),e("code",[t._v("arrow")]),t._v("设置为"),e("code",[t._v("always")]),t._v("，则会一直显示；设置为"),e("code",[t._v("never")]),t._v("，则会一直隐藏。")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-carousel :interval="5000" arrow="always">\n    <tis-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </tis-carousel-item>\n  </tis-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),t._m(4),e("p",[t._v("当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格")]),e("demo-block",[e("div",[e("p",[t._v("将"),e("code",[t._v("type")]),t._v("属性设置为"),e("code",[t._v("card")]),t._v("即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-carousel :interval="4000" type="card" height="200px">\n    <tis-carousel-item v-for="item in 6" :key="item">\n      <h3 class="medium">{{ item }}</h3>\n    </tis-carousel-item>\n  </tis-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),t._m(5),t._m(6),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-carousel height="200px" direction="vertical" :autoplay="false">\n    <tis-carousel-item v-for="item in 3" :key="item">\n      <h3 class="medium">{{ item }}</h3>\n    </tis-carousel-item>\n  </tis-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),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"carousel-zou-ma-deng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-zou-ma-deng"}},[this._v("¶")]),this._v(" Carousel 走马灯")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhi-shi-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-shi-qi"}},[this._v("¶")]),this._v(" 指示器")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"qie-huan-jian-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qie-huan-jian-tou"}},[this._v("¶")]),this._v(" 切换箭头")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"qia-pian-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua"}},[this._v("¶")]),this._v(" 卡片化")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fang-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-xiang"}},[this._v("¶")]),this._v(" 方向")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("默认情况下，"),e("code",[t._v("direction")]),t._v(" 为 "),e("code",[t._v("horizontal")]),t._v("。通过设置 "),e("code",[t._v("direction")]),t._v(" 为 "),e("code",[t._v("vertical")]),t._v(" 来让走马灯在垂直方向上显示。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"carousel-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes"}},[this._v("¶")]),this._v(" Carousel Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("height")]),e("td",[t._v("走马灯的高度")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("initial-index")]),e("td",[t._v("初始状态激活的幻灯片的索引，从 0 开始")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("trigger")]),e("td",[t._v("指示器的触发方式")]),e("td",[t._v("string")]),e("td",[t._v("click")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("autoplay")]),e("td",[t._v("是否自动切换")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("interval")]),e("td",[t._v("自动切换的时间间隔，单位为毫秒")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("3000")])]),e("tr",[e("td",[t._v("indicator-position")]),e("td",[t._v("指示器的位置")]),e("td",[t._v("string")]),e("td",[t._v("outside/none")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("arrow")]),e("td",[t._v("切换箭头的显示时机")]),e("td",[t._v("string")]),e("td",[t._v("always/hover/never")]),e("td",[t._v("hover")])]),e("tr",[e("td",[t._v("type")]),e("td",[t._v("走马灯的类型")]),e("td",[t._v("string")]),e("td",[t._v("card")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("loop")]),e("td",[t._v("是否循环显示")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("direction")]),e("td",[t._v("走马灯展示的方向")]),e("td",[t._v("string")]),e("td",[t._v("horizontal/vertical")]),e("td",[t._v("horizontal")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"carousel-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events"}},[this._v("¶")]),this._v(" Carousel Events")])},function(){var t=this.$createElement,t=this._self._c||t;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("目前激活的幻灯片的索引，原幻灯片的索引")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"carousel-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods"}},[this._v("¶")]),this._v(" Carousel Methods")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("setActiveItem")]),e("td",[t._v("手动切换幻灯片")]),e("td",[t._v("需要切换的幻灯片的索引，从 0 开始；或相应 "),e("code",[t._v("el-carousel-item")]),t._v(" 的 "),e("code",[t._v("name")]),t._v(" 属性值")])]),e("tr",[e("td",[t._v("prev")]),e("td",[t._v("切换至上一张幻灯片")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("next")]),e("td",[t._v("切换至下一张幻灯片")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"carousel-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes"}},[this._v("¶")]),this._v(" Carousel-Item Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("name")]),e("td",[t._v("幻灯片的名字，可用作 "),e("code",[t._v("setActiveItem")]),t._v(" 的参数")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("该幻灯片所对应指示器的文本")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])}],!1,null,null,null);e.default=a.exports},1301:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":t.handlePreview,"on-remove":t.handleRemove,"before-remove":t.beforeRemove,multiple:"",limit:3,"on-exceed":t.handleExceed,"file-list":t.fileList}},[e("tis-button",{attrs:{size:"small",type:"primary"}},[t._v("点击上传")]),t._v(" "),e("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[t._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(t,e){console.log(t,e)},handlePreview:function(t){console.log(t)},handleExceed:function(t,e){this.$message.warning("当前限制选择 3 个文件，本次选择了 "+t.length+" 个文件，共选择了 "+(t.length+e.length)+" 个文件")},beforeRemove:function(t,e){return this.$confirm("确定移除 "+t.name+"？")}}}),"element-demo1":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-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(t,e){this.imageUrl=URL.createObjectURL(e.raw)},beforeAvatarUpload:function(t){var e="image/jpeg"===t.type,t=t.size/1024/1024<2;return e||this.$message.error("上传头像图片只能是 JPG 格式!"),t||this.$message.error("上传头像图片大小不能超过 2MB!"),e&&t}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":e.handlePictureCardPreview,"on-remove":e.handleRemove}},[t("i",{staticClass:"el-icon-plus"})]),e._v(" "),t("tis-dialog",{attrs:{visible:e.dialogVisible},on:{"update:visible":function(t){e.dialogVisible=t}}},[t("img",{attrs:{width:"100%",src:e.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]},{data:function(){return{dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(t,e){console.log(t,e)},handlePictureCardPreview:function(t){this.dialogImageUrl=t.url,this.dialogVisible=!0}}}),"element-demo3":a({render:function(){var n=this,t=n.$createElement,a=n._self._c||t;return a("div",[a("tis-upload",{attrs:{action:"#","list-type":"picture-card","auto-upload":!1},scopedSlots:n._u([{key:"file",fn:function(t){var e=t.file;return a("div",{},[a("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:e.url,alt:""}}),n._v(" "),a("span",{staticClass:"el-upload-list__item-actions"},[a("span",{staticClass:"el-upload-list__item-preview",on:{click:function(t){n.handlePictureCardPreview(e)}}},[a("i",{staticClass:"el-icon-zoom-in"})]),n._v(" "),n.disabled?n._e():a("span",{staticClass:"el-upload-list__item-delete",on:{click:function(t){n.handleDownload(e)}}},[a("i",{staticClass:"el-icon-download"})]),n._v(" "),n.disabled?n._e():a("span",{staticClass:"el-upload-list__item-delete",on:{click:function(t){n.handleRemove(e)}}},[a("i",{staticClass:"el-icon-delete"})])])])}}])},[a("i",{staticClass:"el-icon-plus",attrs:{slot:"default"},slot:"default"})]),n._v(" "),a("tis-dialog",{attrs:{visible:n.dialogVisible},on:{"update:visible":function(t){n.dialogVisible=t}}},[a("img",{attrs:{width:"100%",src:n.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]},{data:function(){return{dialogImageUrl:"",dialogVisible:!1,disabled:!1}},methods:{handleRemove:function(t){console.log(t)},handlePictureCardPreview:function(t){this.dialogImageUrl=t.url,this.dialogVisible=!0},handleDownload:function(t){console.log(t)}}}),"element-demo4":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-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("tis-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(t,e){console.log(t,e)},handlePreview:function(t){console.log(t)}}}),"element-demo5":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":this.handleChange,"file-list":this.fileList}},[t("tis-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(t,e){this.fileList=e.slice(-3)}}}),"element-demo6":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-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 t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":t.handlePreview,"on-remove":t.handleRemove,"file-list":t.fileList,"auto-upload":!1}},[e("tis-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[t._v("选取文件")]),t._v(" "),e("tis-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:t.submitUpload}},[t._v("上传到服务器")]),t._v(" "),e("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[t._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(t,e){console.log(t,e)},handlePreview:function(t){console.log(t)}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("通过点击或者拖拽上传文件")]),t._m(1),e("demo-block",[e("div",[e("p",[t._v("通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置"),e("code",[t._v("limit")]),t._v("和"),e("code",[t._v("on-exceed")]),t._v("来限制上传文件的个数和定义超出限制时的行为。可通过设置"),e("code",[t._v("before-remove")]),t._v("来阻止文件移除操作。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-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  <tis-button size="small" type="primary">点击上传</tis-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</tis-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),t._m(2),t._m(3),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-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</tis-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),t._m(4),t._m(5),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-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</tis-upload>\n<tis-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt="">\n</tis-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),t._m(6),t._m(7),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-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</tis-upload>\n<tis-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt="">\n</tis-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),t._m(8),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-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  <tis-button size="small" type="primary">点击上传</tis-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</tis-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),t._m(9),t._m(10),e("demo-block",[e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-change="handleChange"\n  :file-list="fileList">\n  <tis-button size="small" type="primary">点击上传</tis-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</tis-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),t._m(11),e("demo-block",[e("template",{slot:"source"},[e("element-demo6")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-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</tis-upload>\n')])])])],2),t._m(12),e("demo-block",[e("template",{slot:"source"},[e("element-demo7")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-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  <tis-button slot="trigger" size="small" type="primary">选取文件</tis-button>\n  <tis-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</tis-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</tis-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),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"upload-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload-shang-chuan"}},[this._v("¶")]),this._v(" Upload 上传")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dian-ji-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dian-ji-shang-chuan"}},[this._v("¶")]),this._v(" 点击上传")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yong-hu-tou-xiang-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yong-hu-tou-xiang-shang-chuan"}},[this._v("¶")]),this._v(" 用户头像上传")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("使用 "),t("code",[this._v("before-upload")]),this._v(" 限制用户上传的图片格式和大小。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhao-pian-qiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhao-pian-qiang"}},[this._v("¶")]),this._v(" 照片墙")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("使用 "),t("code",[this._v("list-type")]),this._v(" 属性来设置文件列表的样式。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"wen-jian-suo-lue-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-jian-suo-lue-tu"}},[this._v("¶")]),this._v(" 文件缩略图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("使用 "),t("code",[this._v("scoped-slot")]),this._v(" 去设置缩略图模版。")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 图片列表缩略图")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 上传文件列表控制")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("on-change")]),this._v(" 钩子函数来对列表进行控制")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"tuo-zhuai-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tuo-zhuai-shang-chuan"}},[this._v("¶")]),this._v(" 拖拽上传")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shou-dong-shang-chuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shou-dong-shang-chuan"}},[this._v("¶")]),this._v(" 手动上传")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attribute"}},[this._v("¶")]),this._v(" Attribute")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("action")]),e("td",[t._v("必选参数，上传的地址")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("headers")]),e("td",[t._v("设置上传的请求头部")]),e("td",[t._v("object")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("multiple")]),e("td",[t._v("是否支持多选文件")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("data")]),e("td",[t._v("上传时附带的额外参数")]),e("td",[t._v("object")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("name")]),e("td",[t._v("上传的文件字段名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("file")])]),e("tr",[e("td",[t._v("with-credentials")]),e("td",[t._v("支持发送 cookie 凭证信息")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("show-file-list")]),e("td",[t._v("是否显示已上传文件列表")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("drag")]),e("td",[t._v("是否启用拖拽上传")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("accept")]),e("td",[t._v("接受上传的"),e("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[t._v("文件类型")]),t._v("（thumbnail-mode 模式下此参数无效）")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("on-preview")]),e("td",[t._v("点击文件列表中已上传的文件时的钩子")]),e("td",[t._v("function(file)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("on-remove")]),e("td",[t._v("文件列表移除文件时的钩子")]),e("td",[t._v("function(file, fileList)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("on-success")]),e("td",[t._v("文件上传成功时的钩子")]),e("td",[t._v("function(response, file, fileList)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("on-error")]),e("td",[t._v("文件上传失败时的钩子")]),e("td",[t._v("function(err, file, fileList)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("on-progress")]),e("td",[t._v("文件上传时的钩子")]),e("td",[t._v("function(event, file, fileList)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("on-change")]),e("td",[t._v("文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用")]),e("td",[t._v("function(file, fileList)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("before-upload")]),e("td",[t._v("上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。")]),e("td",[t._v("function(file)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("before-remove")]),e("td",[t._v("删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。")]),e("td",[t._v("function(file, fileList)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("list-type")]),e("td",[t._v("文件列表的类型")]),e("td",[t._v("string")]),e("td",[t._v("text/picture/picture-card")]),e("td",[t._v("text")])]),e("tr",[e("td",[t._v("auto-upload")]),e("td",[t._v("是否在选取文件后立即进行上传")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("file-list")]),e("td",[t._v("上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),e("td",[t._v("array")]),e("td",[t._v("—")]),e("td",[t._v("[]")])]),e("tr",[e("td",[t._v("http-request")]),e("td",[t._v("覆盖默认的上传行为，可以自定义上传的实现")]),e("td",[t._v("function")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("limit")]),e("td",[t._v("最大允许上传个数")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("on-exceed")]),e("td",[t._v("文件超出个数限制时的钩子")]),e("td",[t._v("function(files, fileList)")]),e("td",[t._v("—")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[this._v("¶")]),this._v(" Slot")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[this._v("¶")]),this._v(" Methods")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("clearFiles")]),e("td",[t._v("清空已上传的文件列表（该方法不支持在 before-upload 中调用）")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("abort")]),e("td",[t._v("取消上传请求")]),e("td",[t._v("（ file: fileList 中的 file 对象 ）")])]),e("tr",[e("td",[t._v("submit")]),e("td",[t._v("手动上传文件列表")]),e("td",[t._v("—")])])])])}],!1,null,null,null);e.default=a.exports},1302:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("tis-card",{staticClass:"box-card"},[n("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[n("span",[e._v("卡片名称")]),e._v(" "),n("tis-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[e._v("操作按钮")])],1),e._v(" "),e._l(4,function(t){return n("div",{key:t,staticClass:"text item"},[e._v("\n    "+e._s("列表内容 "+t)+"\n  ")])})],2)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("tis-card",{staticClass:"box-card"},e._l(4,function(t){return n("div",{key:t,staticClass:"text item"},[e._v("\n    "+e._s("列表内容 "+t)+"\n  ")])}),0)],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("将信息聚合在卡片容器中展示。")]),t._m(1),e("p",[t._v("包含标题，内容和操作。")]),e("demo-block",[e("div",[e("p",[t._v("Card 组件包括"),e("code",[t._v("header")]),t._v("和"),e("code",[t._v("body")]),t._v("部分，"),e("code",[t._v("header")]),t._v("部分需要有显式具名 slot 分发，同时也是可选的。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-card class="box-card">\n  <div slot="header" class="clearfix">\n    <span>卡片名称</span>\n    <tis-button style="float: right; padding: 3px 0" type="text">操作按钮</tis-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'列表内容 \' + o }}\n  </div>\n</tis-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),t._m(2),e("p",[t._v("卡片可以只有内容区域。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-card class="box-card">\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'列表内容 \' + o }}\n  </div>\n</tis-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),t._m(3),t._m(4)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"card-qia-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-qia-pian"}},[this._v("¶")]),this._v(" Card 卡片")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jian-dan-qia-pian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jian-dan-qia-pian"}},[this._v("¶")]),this._v(" 简单卡片")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("header")]),e("td",[t._v("设置 header，也可以通过 "),e("code",[t._v("slot#header")]),t._v(" 传入 DOM")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("body-style")]),e("td",[t._v("设置 body 的样式")]),e("td",[t._v("object")]),e("td",[t._v("—")]),e("td",[t._v("{ padding: '20px' }")])]),e("tr",[e("td",[t._v("shadow")]),e("td",[t._v("设置阴影显示时机")]),e("td",[t._v("string")]),e("td",[t._v("always / hover / never")]),e("td",[t._v("always")])])])])}],!1,null,null,null);e.default=a.exports},1303:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-sidebar",{model:{value:e.activeKey,callback:function(t){e.activeKey=t},expression:"activeKey"}},[t("m-sidebar-item",{attrs:{title:"标签名称"}}),e._v(" "),t("m-sidebar-item",{attrs:{title:"标签名称"}}),e._v(" "),t("m-sidebar-item",{attrs:{title:"标签名称"}})],1)],1)},staticRenderFns:[]},{data:function(){return{activeKey:0}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-sidebar",{model:{value:e.activeKey,callback:function(t){e.activeKey=t},expression:"activeKey"}},[t("m-sidebar-item",{attrs:{title:"标签名称",dot:""}}),e._v(" "),t("m-sidebar-item",{attrs:{title:"标签名称",badge:"5"}}),e._v(" "),t("m-sidebar-item",{attrs:{title:"标签名称",badge:"99+"}})],1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-sidebar",{model:{value:e.activeKey,callback:function(t){e.activeKey=t},expression:"activeKey"}},[t("m-sidebar-item",{attrs:{title:"标签名称"}}),e._v(" "),t("m-sidebar-item",{attrs:{title:"标签名称",disabled:""}}),e._v(" "),t("m-sidebar-item",{attrs:{title:"标签名称"}})],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-sidebar",{on:{change:e.onChange},model:{value:e.activeKey,callback:function(t){e.activeKey=t},expression:"activeKey"}},[t("m-sidebar-item",{attrs:{title:"标签名1"}}),e._v(" "),t("m-sidebar-item",{attrs:{title:"标签名2"}}),e._v(" "),t("m-sidebar-item",{attrs:{title:"标签名3"}})],1)],1)},staticRenderFns:[]},{data:function(){return{activeKey:0}},methods:{onChange:function(t){}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),t._m(2),t._m(3),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-sidebar v-model="activeKey">\n  <m-sidebar-item title="标签名称" />\n  <m-sidebar-item title="标签名称" />\n  <m-sidebar-item title="标签名称" />\n</m-sidebar>\n\n<script>\nexport default {\n  data() {\n    return {\n      activeKey: 0,\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(4),t._m(5),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-sidebar v-model="activeKey">\n  <m-sidebar-item title="标签名称" dot />\n  <m-sidebar-item title="标签名称" badge="5" />\n  <m-sidebar-item title="标签名称" badge="99+" />\n</m-sidebar>\n')])])])],2),t._m(6),t._m(7),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-sidebar v-model="activeKey">\n  <m-sidebar-item title="标签名称" />\n  <m-sidebar-item title="标签名称" disabled />\n  <m-sidebar-item title="标签名称" />\n</m-sidebar>\n')])])])],2),t._m(8),t._m(9),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-sidebar v-model="activeKey" @change="onChange">\n  <m-sidebar-item title="标签名1" />\n  <m-sidebar-item title="标签名2" />\n  <m-sidebar-item title="标签名3" />\n</m-sidebar>\n\n<script>\n\nexport default {\n  data() {\n    return {\n      activeKey: 0,\n    };\n  },\n  methods: {\n    onChange(index) {\n    },\n  },\n};\n<\/script>\n')])])])],2),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"sidebar-ce-bian-dao-hang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sidebar-ce-bian-dao-hang"}},[this._v("¶")]),this._v(" Sidebar 侧边导航")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dai-ma-yan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ma-yan-shi"}},[this._v("¶")]),this._v(" 代码演示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("v-model")]),this._v(" 绑定当前选中项的索引。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"hui-biao-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hui-biao-ti-shi"}},[this._v("¶")]),this._v(" 徽标提示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("设置 "),t("code",[this._v("dot")]),this._v(" 属性后，会在右上角展示一个小红点；设置 "),t("code",[this._v("badge")]),this._v(" 属性后，会在右上角展示相应的徽标。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jin-yong-xuan-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-xuan-xiang"}},[this._v("¶")]),this._v(" 禁用选项")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("disabled")]),this._v(" 属性禁用选项。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jian-ting-qie-huan-shi-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jian-ting-qie-huan-shi-jian"}},[this._v("¶")]),this._v(" 监听切换事件")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("设置 "),t("code",[this._v("change")]),this._v(" 方法来监听切换导航项时的事件。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"sidebar-props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sidebar-props"}},[this._v("¶")]),this._v(" Sidebar Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("v-model")]),e("td",[t._v("当前导航项的索引")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("0")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"sidebar-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sidebar-events"}},[this._v("¶")]),this._v(" Sidebar Events")])},function(){var t=this.$createElement,t=this._self._c||t;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("index: 当前导航项的索引")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"sidebaritem-props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sidebaritem-props"}},[this._v("¶")]),this._v(" SidebarItem Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("title")]),e("td",[t._v("内容")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("''")])])]),e("tr",[e("td",[t._v("dot")]),e("td",[t._v("是否显示右上角小红点")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("badge "),e("code",[t._v("v2.5.6")])]),e("td",[t._v("图标右上角徽标的内容")]),e("td",[e("em",[t._v("number | string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("info")]),e("td",[t._v("图标右上角徽标的内容（已废弃，请使用 badge 属性）")]),e("td",[e("em",[t._v("number | string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用该项")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("url")]),e("td",[t._v("点击后跳转的链接地址")]),e("td",[e("em",[t._v("string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("to")]),e("td",[t._v("点击后跳转的目标路由对象，同 vue-router 的 "),e("a",{attrs:{href:"https://router.vuejs.org/zh/api/#to"}},[t._v("to 属性")])]),e("td",[e("em",[t._v("string | object")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("replace")]),e("td",[t._v("是否在跳转时替换当前页面历史")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"sidebaritem-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sidebaritem-events"}},[this._v("¶")]),this._v(" SidebarItem Events")])},function(){var t=this.$createElement,t=this._self._c||t;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("click")]),t("td",[this._v("点击时触发")]),t("td",[this._v("index: 当前导航项的索引")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"sidebaritem-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sidebaritem-slots"}},[this._v("¶")]),this._v(" SidebarItem Slots")])},function(){var t=this.$createElement,t=this._self._c||t;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("title "),t("code",[this._v("v2.10.8")])]),t("td",[this._v("自定义标题")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),t("a",{attrs:{href:"#/zh-CN/theme"}},[this._v("主题定制")]),this._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@sidebar-width")]),e("td",[e("code",[t._v("80px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@sidebar-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@sidebar-line-height")]),e("td",[e("code",[t._v("@line-height-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@sidebar-text-color")]),e("td",[e("code",[t._v("@text-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@sidebar-disabled-text-color")]),e("td",[e("code",[t._v("@gray-5")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@sidebar-padding")]),e("td",[e("code",[t._v("20px @padding-sm")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@sidebar-active-color")]),e("td",[e("code",[t._v("@active-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@sidebar-background-color")]),e("td",[e("code",[t._v("@background-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@sidebar-selected-font-weight")]),e("td",[e("code",[t._v("@font-weight-bold")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@sidebar-selected-text-color")]),e("td",[e("code",[t._v("@text-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@sidebar-selected-border-width")]),e("td",[e("code",[t._v("4px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@sidebar-selected-border-height")]),e("td",[e("code",[t._v("16px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@sidebar-selected-border-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@sidebar-selected-background-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])])])])}],!1,null,null,null);e.default=a.exports},1305:function(t,e,n){"use strict";n.r(e);var a,i=[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"typography-zi-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#typography-zi-ti"}},[this._v("¶")]),this._v(" Typography 字体")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ti"}},[this._v("¶")]),this._v(" 字体")])},function(){var t=this.$createElement,t=this._self._c||t;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:n(954),alt:""}}),t("img",{attrs:{src:n(955),alt:""}}),t("img",{attrs:{src:n(956),alt:""}}),t("img",{attrs:{src:n(957),alt:""}}),t("img",{attrs:{src:n(958),alt:""}}),t("img",{attrs:{src:n(959),alt:""}})])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-hao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-hao"}},[this._v("¶")]),this._v(" 字号")])},function(){var t=this.$createElement,t=this._self._c||t;return t("tr",[t("td",[this._v("层级")]),t("td",[this._v("字体大小")]),t("td",{staticClass:"color-dark-light"},[this._v("举例")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xing-gao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xing-gao"}},[this._v("¶")]),this._v(" 行高")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("img",{staticClass:"lineH-left",attrs:{src:n(960)}}),e("ul",{staticClass:"lineH-right"},[e("li",[t._v("line-height:1 "),e("span",[t._v("无行高")])]),e("li",[t._v("line-height:1.3 "),e("span",[t._v("紧凑")])]),e("li",[t._v("line-height:1.5 "),e("span",[t._v("常规")])]),e("li",[t._v("line-height:1.7 "),e("span",[t._v("宽松")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"font-family-dai-ma"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family-dai-ma"}},[this._v("¶")]),this._v(" Font-family 代码")])},function(){var t=this.$createElement,t=this._self._c||t;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')])])}],s=n(46),r=n(47),l=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],o={font_size_extra_large:"20px",font_size_large:"18px",font_size_medium:"16px",font_size_base:"14px",font_size_small:"13px",font_size_extra_small:"12px"};function d(t,e){return a.apply(this,arguments)}var c={created:function(){s.a.$on(r.d,this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:(a=function(t,e){return tintColor(t,e)},d.toString=function(){return a.toString()},d),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;l.forEach(function(t){var e=t.replace("$--","").replace(/-/g,"_");n[t]?a[e]=n[t]:a[e]=o[e]})}}}},v=n(0),i=Object(v.a)(c,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。")]),t._m(1),t._m(2),t._m(3),e("table",{staticClass:"demo-typo-size"},[e("tbody",[t._m(4),e("tr",{style:{fontSize:t.font_size_extra_small}},[e("td",[t._v("辅助文字")]),e("td",{staticClass:"color-dark-light"},[t._v(t._s(t.font_size_extra_small)+" Extra Small")]),e("td",[t._v("用 Element 快速搭建页面")])]),e("tr",{style:{fontSize:t.font_size_small}},[e("td",[t._v("正文（小）")]),e("td",{staticClass:"color-dark-light"},[t._v(t._s(t.font_size_small)+" Small")]),e("td",[t._v("用 Element 快速搭建页面")])]),e("tr",{style:{fontSize:t.font_size_base}},[e("td",[t._v("正文")]),e("td",{staticClass:"color-dark-light"},[t._v(t._s(t.font_size_base)+" Base")]),e("td",[t._v("用 Element 快速搭建页面")])]),e("tr",{style:{fontSize:t.font_size_medium}},[e("td",[t._v("小标题")]),e("td",{staticClass:"color-dark-light"},[t._v(t._s(t.font_size_medium)+" Medium")]),e("td",[t._v("用 Element 快速搭建页面")])]),e("tr",{style:{fontSize:t.font_size_large}},[e("td",[t._v("标题")]),e("td",{staticClass:"color-dark-light"},[t._v(t._s(t.font_size_large)+" large")]),e("td",[t._v("用 Element 快速搭建页面")])]),e("tr",{style:{fontSize:t.font_size_extra_large}},[e("td",[t._v("主标题")]),e("td",{staticClass:"color-dark-light"},[t._v(t._s(t.font_size_extra_large)+" Extra large")]),e("td",[t._v("用 Element 快速搭建页面")])])])]),t._m(5),t._m(6),t._m(7),t._m(8)])},i,!1,null,null,null);e.default=i.exports},1307:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-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(t){console.log(t)}}}),"element-demo1":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-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(t,e,n){console.log(t,e,n)},handleNodeClick:function(t){console.log(t)},loadNode:function(t,e){var n,a=this;return 0===t.level?e([{name:"region1"},{name:"region2"}]):3<t.level?e([]):(n="region1"===t.data.name||"region2"!==t.data.name&&.5<Math.random(),void setTimeout(function(){var t=n?[{name:"zone"+a.count++},{name:"zone"+a.count++}]:[];e(t)},500))}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("用清晰的层级结构展示信息，可展开或折叠。")]),t._m(1),e("p",[t._v("基础的树形结构展示。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<tis-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></tis-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),t._m(2),e("p",[t._v("适用于需要选择层级时使用。")]),e("demo-block",[e("div",[e("p",[t._v("本例还展示了动态加载节点数据的方法。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<tis-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</tis-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),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"tree-shu-xing-kong-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree-shu-xing-kong-jian"}},[this._v("¶")]),this._v(" Tree 树形控件")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ke-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-ze"}},[this._v("¶")]),this._v(" 可选择")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("data")]),e("td",[t._v("展示数据")]),e("td",[t._v("array")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("empty-text")]),e("td",[t._v("内容为空的时候展示的文本")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("node-key")]),e("td",[t._v("每个树节点用来作为唯一标识的属性，整棵树应该是唯一的")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("props")]),e("td",[t._v("配置选项，具体看下表")]),e("td",[t._v("object")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("render-after-expand")]),e("td",[t._v("是否在第一次展开某个树节点后才渲染其子节点")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("load")]),e("td",[t._v("加载子树数据的方法，仅当 lazy 属性为true 时生效")]),e("td",[t._v("function(node, resolve)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("render-content")]),e("td",[t._v("树节点的内容区的渲染 Function")]),e("td",[t._v("Function(h, { node, data, store }")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("highlight-current")]),e("td",[t._v("是否高亮当前选中节点，默认值是 false。")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("default-expand-all")]),e("td",[t._v("是否默认展开所有节点")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("expand-on-click-node")]),e("td",[t._v("是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("check-on-click-node")]),e("td",[t._v("是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("auto-expand-parent")]),e("td",[t._v("展开子节点的时候是否自动展开父节点")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("default-expanded-keys")]),e("td",[t._v("默认展开的节点的 key 的数组")]),e("td",[t._v("array")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("show-checkbox")]),e("td",[t._v("节点是否可被选择")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("check-strictly")]),e("td",[t._v("在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("default-checked-keys")]),e("td",[t._v("默认勾选的节点的 key 的数组")]),e("td",[t._v("array")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("current-node-key")]),e("td",[t._v("当前选中的节点")]),e("td",[t._v("string, number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("filter-node-method")]),e("td",[t._v("对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏")]),e("td",[t._v("Function(value, data, node)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("accordion")]),e("td",[t._v("是否每次只打开一个同级树节点展开")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("indent")]),e("td",[t._v("相邻级节点间的水平缩进，单位为像素")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("16")])]),e("tr",[e("td",[t._v("icon-class")]),e("td",[t._v("自定义树节点的图标")]),e("td",[t._v("string")]),e("td",[t._v("-")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("lazy")]),e("td",[t._v("是否懒加载子节点，需与 load 方法结合使用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("draggable")]),e("td",[t._v("是否开启拖拽节点功能")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("allow-drag")]),e("td",[t._v("判断节点能否被拖拽")]),e("td",[t._v("Function(node)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("allow-drop")]),e("td",[t._v("拖拽时判定目标节点能否被放置。"),e("code",[t._v("type")]),t._v(" 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后")]),e("td",[t._v("Function(draggingNode, dropNode, type)")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("label")]),e("td",[t._v("指定节点标签为节点对象的某个属性值")]),e("td",[t._v("string, function(data, node)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("children")]),e("td",[t._v("指定子树为节点对象的某个属性值")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("指定节点选择框是否禁用为节点对象的某个属性值")]),e("td",[t._v("boolean, function(data, node)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("isLeaf")]),e("td",[t._v("指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效")]),e("td",[t._v("boolean, function(data, node)")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa"}},[this._v("¶")]),this._v(" 方法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[t("code",[this._v("Tree")]),this._v(" 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。\n"),t("code",[this._v("Tree")]),this._v(" 拥有如下方法：")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("filter")]),e("td",[t._v("对树节点进行筛选操作")]),e("td",[t._v("接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数")])]),e("tr",[e("td",[t._v("updateKeyChildren")]),e("td",[t._v("通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性")]),e("td",[t._v("(key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组")])]),e("tr",[e("td",[t._v("getCheckedNodes")]),e("td",[t._v("若节点可被选择（即 "),e("code",[t._v("show-checkbox")]),t._v(" 为 "),e("code",[t._v("true")]),t._v("），则返回目前被选中的节点所组成的数组")]),e("td",[t._v("(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 "),e("code",[t._v("false")]),t._v(" 2. 是否包含半选节点，默认值为 "),e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("setCheckedNodes")]),e("td",[t._v("设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),e("td",[t._v("(nodes) 接收勾选节点数据的数组")])]),e("tr",[e("td",[t._v("getCheckedKeys")]),e("td",[t._v("若节点可被选择（即 "),e("code",[t._v("show-checkbox")]),t._v(" 为 "),e("code",[t._v("true")]),t._v("），则返回目前被选中的节点的 key 所组成的数组")]),e("td",[t._v("(leafOnly) 接收一个 boolean 类型的参数，若为 "),e("code",[t._v("true")]),t._v(" 则仅返回被选中的叶子节点的 keys，默认值为 "),e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("setCheckedKeys")]),e("td",[t._v("通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),e("td",[t._v("(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 "),e("code",[t._v("true")]),t._v(" 则仅设置叶子节点的选中状态，默认值为 "),e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("setChecked")]),e("td",[t._v("通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性")]),e("td",[t._v("(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中  3. boolean 类型，是否设置子节点 ，默认为 false")])]),e("tr",[e("td",[t._v("getHalfCheckedNodes")]),e("td",[t._v("若节点可被选择（即 "),e("code",[t._v("show-checkbox")]),t._v(" 为 "),e("code",[t._v("true")]),t._v("），则返回目前半选中的节点所组成的数组")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("getHalfCheckedKeys")]),e("td",[t._v("若节点可被选择（即 "),e("code",[t._v("show-checkbox")]),t._v(" 为 "),e("code",[t._v("true")]),t._v("），则返回目前半选中的节点的 key 所组成的数组")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("getCurrentKey")]),e("td",[t._v("获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("getCurrentNode")]),e("td",[t._v("获取当前被选中节点的 data，若没有节点被选中则返回 null")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("setCurrentKey")]),e("td",[t._v("通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性")]),e("td",[t._v("(key) 待被选节点的 key，若为 null 则取消当前高亮的节点")])]),e("tr",[e("td",[t._v("setCurrentNode")]),e("td",[t._v("通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性")]),e("td",[t._v("(node) 待被选节点的 node")])]),e("tr",[e("td",[t._v("getNode")]),e("td",[t._v("根据 data 或者 key 拿到 Tree 组件中的 node")]),e("td",[t._v("(data) 要获得 node 的 key 或者 data")])]),e("tr",[e("td",[t._v("remove")]),e("td",[t._v("删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性")]),e("td",[t._v("(data) 要删除的节点的 data 或者 node")])]),e("tr",[e("td",[t._v("append")]),e("td",[t._v("为 Tree 中的一个节点追加一个子节点")]),e("td",[t._v("(data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node")])]),e("tr",[e("td",[t._v("insertBefore")]),e("td",[t._v("为 Tree 的一个节点的前面增加一个节点")]),e("td",[t._v("(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node")])]),e("tr",[e("td",[t._v("insertAfter")]),e("td",[t._v("为 Tree 的一个节点的后面增加一个节点")]),e("td",[t._v("(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("node-click")]),e("td",[t._v("节点被点击时的回调")]),e("td",[t._v("共三个参数，依次为：传递给 "),e("code",[t._v("data")]),t._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),e("tr",[e("td",[t._v("node-contextmenu")]),e("td",[t._v("当某一节点被鼠标右键点击时会触发该事件")]),e("td",[t._v("共四个参数，依次为：event、传递给 "),e("code",[t._v("data")]),t._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),e("tr",[e("td",[t._v("check-change")]),e("td",[t._v("节点选中状态发生变化时的回调")]),e("td",[t._v("共三个参数，依次为：传递给 "),e("code",[t._v("data")]),t._v(" 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点")])]),e("tr",[e("td",[t._v("check")]),e("td",[t._v("当复选框被点击的时候触发")]),e("td",[t._v("共两个参数，依次为：传递给 "),e("code",[t._v("data")]),t._v(" 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性")])]),e("tr",[e("td",[t._v("current-change")]),e("td",[t._v("当前选中节点变化时触发的事件")]),e("td",[t._v("共两个参数，依次为：当前节点的数据，当前节点的 Node 对象")])]),e("tr",[e("td",[t._v("node-expand")]),e("td",[t._v("节点被展开时触发的事件")]),e("td",[t._v("共三个参数，依次为：传递给 "),e("code",[t._v("data")]),t._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身")])]),e("tr",[e("td",[t._v("node-collapse")]),e("td",[t._v("节点被关闭时触发的事件")]),e("td",[t._v("共三个参数，依次为：传递给 "),e("code",[t._v("data")]),t._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身")])]),e("tr",[e("td",[t._v("node-drag-start")]),e("td",[t._v("节点开始拖拽时触发的事件")]),e("td",[t._v("共两个参数，依次为：被拖拽节点对应的 Node、event")])]),e("tr",[e("td",[t._v("node-drag-enter")]),e("td",[t._v("拖拽进入其他节点时触发的事件")]),e("td",[t._v("共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event")])]),e("tr",[e("td",[t._v("node-drag-leave")]),e("td",[t._v("拖拽离开某个节点时触发的事件")]),e("td",[t._v("共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event")])]),e("tr",[e("td",[t._v("node-drag-over")]),e("td",[t._v("在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）")]),e("td",[t._v("共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event")])]),e("tr",[e("td",[t._v("node-drag-end")]),e("td",[t._v("拖拽结束时（可能未成功）触发的事件")]),e("td",[t._v("共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event")])]),e("tr",[e("td",[t._v("node-drop")]),e("td",[t._v("拖拽成功完成时触发的事件")]),e("td",[t._v("共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var t=this.$createElement,t=this._self._c||t;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);e.default=a.exports},1308:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("div",[t("tis-button",{on:{click:function(t){e.show=!e.show}}},[e._v("Click Me")]),e._v(" "),t("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[t("transition",{attrs:{name:"el-fade-in-linear"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.show,expression:"show"}],staticClass:"transition-box"},[e._v(".el-fade-in-linear")])]),e._v(" "),t("transition",{attrs:{name:"el-fade-in"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.show,expression:"show"}],staticClass:"transition-box"},[e._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{show:!0}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("div",[t("tis-button",{on:{click:function(t){e.show2=!e.show2}}},[e._v("Click Me")]),e._v(" "),t("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[t("transition",{attrs:{name:"el-zoom-in-center"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.show2,expression:"show2"}],staticClass:"transition-box"},[e._v(".el-zoom-in-center")])]),e._v(" "),t("transition",{attrs:{name:"el-zoom-in-top"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.show2,expression:"show2"}],staticClass:"transition-box"},[e._v(".el-zoom-in-top")])]),e._v(" "),t("transition",{attrs:{name:"el-zoom-in-bottom"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.show2,expression:"show2"}],staticClass:"transition-box"},[e._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{show2:!0}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("div",[t("tis-button",{on:{click:function(t){e.show3=!e.show3}}},[e._v("Click Me")]),e._v(" "),t("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[t("tis-collapse-transition",[t("div",{directives:[{name:"show",rawName:"v-show",value:e.show3,expression:"show3"}]},[t("div",{staticClass:"transition-box"},[e._v("el-collapse-transition")]),e._v(" "),t("div",{staticClass:"transition-box"},[e._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{show3:!0}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),t._m(2),e("demo-block",[e("div",[e("p",[t._v("提供 "),e("code",[t._v("el-fade-in-linear")]),t._v(" 和 "),e("code",[t._v("el-fade-in")]),t._v(" 两种效果。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <div>\n    <tis-button @click="show = !show">Click Me</tis-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),t._m(3),e("demo-block",[e("div",[e("p",[t._v("提供 "),e("code",[t._v("el-zoom-in-center")]),t._v("，"),e("code",[t._v("el-zoom-in-top")]),t._v(" 和 "),e("code",[t._v("el-zoom-in-bottom")]),t._v(" 三种效果。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <div>\n    <tis-button @click="show2 = !show2">Click Me</tis-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),t._m(4),t._m(5),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <div>\n    <tis-button @click="show3 = !show3">Click Me</tis-button>\n\n    <div style="margin-top: 20px; height: 200px;">\n      <tis-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      </tis-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),t._m(6),t._m(7)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"nei-zhi-guo-du-dong-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nei-zhi-guo-du-dong-hua"}},[this._v("¶")]),this._v(" 内置过渡动画")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("Element 内应用在部分组件的过渡动画，你也可以直接使用。在使用之前请阅读 "),t("a",{attrs:{href:"https://cn.vuejs.org/v2/api/#transition"}},[this._v("transition 组件文档")]),this._v(" 。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fade-dan-ru-dan-chu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade-dan-ru-dan-chu"}},[this._v("¶")]),this._v(" fade 淡入淡出")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zoom-suo-fang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom-suo-fang"}},[this._v("¶")]),this._v(" zoom 缩放")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"collapse-zhan-kai-zhe-die"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhan-kai-zhe-die"}},[this._v("¶")]),this._v(" collapse 展开折叠")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("使用 "),t("code",[this._v("el-collapse-transition")]),this._v(" 组件实现折叠展开效果。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"an-xu-yin-ru"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru"}},[this._v("¶")]),this._v(" 按需引入")])},function(){var t=this.$createElement,t=this._self._c||t;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);e.default=a.exports},1310:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-transfer",{attrs:{data:e.data},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})]],2)},staticRenderFns:[]},{data:function(){return{data:function(){for(var t=[],e=1;e<=15;e++)t.push({key:e,label:"备选项 "+e,disabled:e%4==0});return t}(),value:[1,4]}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-transfer",{attrs:{filterable:"","filter-method":e.filterMethod,"filter-placeholder":"请输入城市拼音",data:e.data},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})]],2)},staticRenderFns:[]},{data:function(){var n,a;return{data:(n=[],a=["shanghai","beijing","guangzhou","shenzhen","nanjing","xian","chengdu"],["上海","北京","广州","深圳","南京","西安","成都"].forEach(function(t,e){n.push({label:t,key:e,pinyin:a[e]})}),n),value:[],filterMethod:function(t,e){return-1<e.pinyin.indexOf(t)}}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("demo-block",[e("div",[e("p",[t._v("Transfer 的数据通过 "),e("code",[t._v("data")]),t._v(" 属性传入。数据需要是一个对象数组，每个对象有以下属性："),e("code",[t._v("key")]),t._v(" 为数据的唯一性标识，"),e("code",[t._v("label")]),t._v(" 为显示文本，"),e("code",[t._v("disabled")]),t._v(" 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 "),e("code",[t._v("v-model")]),t._v(" 的变量，值为数据项的 "),e("code",[t._v("key")]),t._v(" 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 "),e("code",[t._v("v-model")]),t._v(" 绑定的变量赋予一个初始值。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-transfer v-model="value" :data="data"></tis-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),t._m(2),e("p",[t._v("在数据很多的情况下，可以对数据进行搜索和过滤。")]),e("demo-block",[e("div",[e("p",[t._v("设置 "),e("code",[t._v("filterable")]),t._v(" 为 "),e("code",[t._v("true")]),t._v(" 即可开启搜索模式。默认情况下，若数据项的 "),e("code",[t._v("label")]),t._v(" 属性包含搜索关键字，则会在搜索结果中显示。你也可以使用 "),e("code",[t._v("filter-method")]),t._v(" 定义自己的搜索逻辑。"),e("code",[t._v("filter-method")]),t._v(" 接收一个方法，当搜索关键字变化时，会将当前的关键字和每个数据项传给该方法。若方法返回 "),e("code",[t._v("true")]),t._v("，则会在搜索结果中显示对应的数据项。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"请输入城市拼音\"\n    v-model=\"value\"\n    :data=\"data\">\n  </tis-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),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"transfer-chuan-suo-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer-chuan-suo-kuang"}},[this._v("¶")]),this._v(" Transfer 穿梭框")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值")]),e("td",[t._v("array")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("data")]),e("td",[t._v("Transfer 的数据源")]),e("td",[t._v("array[{ key, label, disabled }]")]),e("td",[t._v("—")]),e("td",[t._v("[ ]")])]),e("tr",[e("td",[t._v("filterable")]),e("td",[t._v("是否可搜索")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("filter-placeholder")]),e("td",[t._v("搜索框占位符")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("请输入搜索内容")])]),e("tr",[e("td",[t._v("filter-method")]),e("td",[t._v("自定义搜索方法")]),e("td",[t._v("function")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("target-order")]),e("td",[t._v("右侧列表元素的排序策略：若为 "),e("code",[t._v("original")]),t._v("，则保持与数据源相同的顺序；若为 "),e("code",[t._v("push")]),t._v("，则新加入的元素排在最后；若为 "),e("code",[t._v("unshift")]),t._v("，则新加入的元素排在最前")]),e("td",[t._v("string")]),e("td",[t._v("original / push / unshift")]),e("td",[t._v("original")])]),e("tr",[e("td",[t._v("titles")]),e("td",[t._v("自定义列表标题")]),e("td",[t._v("array")]),e("td",[t._v("—")]),e("td",[t._v("['列表 1', '列表 2']")])]),e("tr",[e("td",[t._v("button-texts")]),e("td",[t._v("自定义按钮文案")]),e("td",[t._v("array")]),e("td",[t._v("—")]),e("td",[t._v("[ ]")])]),e("tr",[e("td",[t._v("render-content")]),e("td",[t._v("自定义数据项渲染函数")]),e("td",[t._v("function(h, option)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("format")]),e("td",[t._v("列表顶部勾选状态文案")]),e("td",[t._v("object{noChecked, hasChecked}")]),e("td",[t._v("—")]),e("td",[t._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),e("tr",[e("td",[t._v("props")]),e("td",[t._v("数据源的字段别名")]),e("td",[t._v("object{key, label, disabled}")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("left-default-checked")]),e("td",[t._v("初始状态下左侧列表的已勾选项的 key 数组")]),e("td",[t._v("array")]),e("td",[t._v("—")]),e("td",[t._v("[ ]")])]),e("tr",[e("td",[t._v("right-default-checked")]),e("td",[t._v("初始状态下右侧列表的已勾选项的 key 数组")]),e("td",[t._v("array")]),e("td",[t._v("—")]),e("td",[t._v("[ ]")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[this._v("¶")]),this._v(" Slot")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slot"}},[this._v("¶")]),this._v(" Scoped Slot")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[this._v("¶")]),this._v(" Methods")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("change")]),e("td",[t._v("右侧列表元素变化时触发")]),e("td",[t._v("当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组")])]),e("tr",[e("td",[t._v("left-check-change")]),e("td",[t._v("左侧列表元素被用户选中 / 取消选中时触发")]),e("td",[t._v("当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组")])]),e("tr",[e("td",[t._v("right-check-change")]),e("td",[t._v("右侧列表元素被用户选中 / 取消选中时触发")]),e("td",[t._v("当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组")])])])])}],!1,null,null,null);e.default=a.exports},1311:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-calendar",{model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:new Date}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("tis-calendar",{scopedSlots:e._u([{key:"dateCell",fn:function(t){t.date;t=t.data;return[n("p",{class:t.isSelected?"is-selected":""},[e._v("\n      "+e._s(t.day.split("-").slice(1).join("-"))+" "+e._s(t.isSelected?"✔️":"")+"\n    ")])]}}])})],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-calendar",{attrs:{range:["2019-03-04","2019-03-24"]}})],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("显示日期")]),t._m(1),e("demo-block",[e("div",[e("p",[t._v("设置 "),e("code",[t._v("value")]),t._v(" 来指定当前显示的月份。如果 "),e("code",[t._v("value")]),t._v(" 未指定，则显示当月。"),e("code",[t._v("value")]),t._v(" 支持 "),e("code",[t._v("v-model")]),t._v(" 双向绑定。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-calendar v-model="value">\n</tis-calendar>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: new Date()\n      }\n    }\n  }\n<\/script>\n')])])])],2),t._m(2),e("demo-block",[e("div",[e("p",[t._v("通过设置名为 "),e("code",[t._v("dateCell")]),t._v(" 的 "),e("code",[t._v("scoped-slot")]),t._v(" 来自定义日历单元格中显示的内容。在 "),e("code",[t._v("scoped-slot")]),t._v(" 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。详情解释参考下方的 API 文档。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<tis-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</tis-calendar>\n<style>\n  .is-selected {\n    color: #1989FA;\n  }\n</style>\n")])])])],2),t._m(3),e("demo-block",[e("div",[e("p",[t._v("设置 "),e("code",[t._v("range")]),t._v(" 属性指定日历的显示范围。开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月。")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<tis-calendar :range=\"['2019-03-04', '2019-03-24']\">\n</tis-calendar>\n")])])])],2),t._m(4),t._m(5),t._m(6),t._m(7)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"calendar-calendar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#calendar-calendar"}},[this._v("¶")]),this._v(" Calendar calendar")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-ben"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben"}},[this._v("¶")]),this._v(" 基本")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-fan-wei"}},[this._v("¶")]),this._v(" 自定义范围")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值")]),e("td",[t._v("Date/string/number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("range")]),e("td",[t._v("时间范围，包括开始时间与结束时间。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。")]),e("td",[t._v("Array")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("first-day-of-week")]),e("td",[t._v("周起始日")]),e("td",[t._v("Number")]),e("td",[t._v("1 到 7")]),e("td",[t._v("1")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"datecell-scoped-slot-can-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datecell-scoped-slot-can-shu"}},[this._v("¶")]),this._v(" dateCell scoped slot 参数")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("date")]),e("td",[t._v("单元格代表的日期")]),e("td",[t._v("Date")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("data")]),e("td",[t._v("{ type, isSelected, day}，"),e("code",[t._v("type")]),t._v(" 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；"),e("code",[t._v("isSelected")]),t._v(" 标明该日期是否被选中；"),e("code",[t._v("day")]),t._v(" 是格式化的日期，格式为 yyyy-MM-dd")]),e("td",[t._v("Object")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])}],!1,null,null,null);e.default=a.exports},1313:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("div",{staticClass:"box"},[e("div",{staticClass:"top"},[e("tis-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left 提示文字",placement:"top-start"}},[e("tis-button",[t._v("上左")])],1),t._v(" "),e("tis-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center 提示文字",placement:"top"}},[e("tis-button",[t._v("上边")])],1),t._v(" "),e("tis-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right 提示文字",placement:"top-end"}},[e("tis-button",[t._v("上右")])],1)],1),t._v(" "),e("div",{staticClass:"left"},[e("tis-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top 提示文字",placement:"left-start"}},[e("tis-button",[t._v("左上")])],1),t._v(" "),e("tis-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center 提示文字",placement:"left"}},[e("tis-button",[t._v("左边")])],1),t._v(" "),e("tis-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom 提示文字",placement:"left-end"}},[e("tis-button",[t._v("左下")])],1)],1),t._v(" "),e("div",{staticClass:"right"},[e("tis-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top 提示文字",placement:"right-start"}},[e("tis-button",[t._v("右上")])],1),t._v(" "),e("tis-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center 提示文字",placement:"right"}},[e("tis-button",[t._v("右边")])],1),t._v(" "),e("tis-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom 提示文字",placement:"right-end"}},[e("tis-button",[t._v("右下")])],1)],1),t._v(" "),e("div",{staticClass:"bottom"},[e("tis-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left 提示文字",placement:"bottom-start"}},[e("tis-button",[t._v("下左")])],1),t._v(" "),e("tis-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center 提示文字",placement:"bottom"}},[e("tis-button",[t._v("下边")])],1),t._v(" "),e("tis-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right 提示文字",placement:"bottom-end"}},[e("tis-button",[t._v("下右")])],1)],1)])])},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-tooltip",{attrs:{content:"Top center",placement:"top"}},[t("tis-button",[this._v("Dark")])],1),this._v(" "),t("tis-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[t("tis-button",[this._v("Light")])],1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-tooltip",{attrs:{placement:"top"}},[t("div",{attrs:{slot:"content"},slot:"content"},[this._v("多行信息"),t("br"),this._v("第二行信息")]),this._v(" "),t("tis-button",[this._v("Top center")])],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-tooltip",{attrs:{disabled:e.disabled,content:"点击关闭 tooltip 功能",placement:"bottom",effect:"light"}},[t("tis-button",{on:{click:function(t){e.disabled=!e.disabled}}},[e._v("点击"+e._s(e.disabled?"开启":"关闭")+" tooltip 功能")])],1)]],2)},staticRenderFns:[]},{data:function(){return{disabled:!1}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("常用于展示鼠标 hover 时的提示信息。")]),t._m(1),e("p",[t._v("在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。")]),e("demo-block",[e("div",[e("p",[t._v("使用"),e("code",[t._v("content")]),t._v("属性来决定"),e("code",[t._v("hover")]),t._v("时的提示信息。由"),e("code",[t._v("placement")]),t._v("属性决定展示效果："),e("code",[t._v("placement")]),t._v("属性值为："),e("code",[t._v("方向-对齐位置")]),t._v("；四个方向："),e("code",[t._v("top")]),t._v("、"),e("code",[t._v("left")]),t._v("、"),e("code",[t._v("right")]),t._v("、"),e("code",[t._v("bottom")]),t._v("；三种对齐位置："),e("code",[t._v("start")]),t._v(", "),e("code",[t._v("end")]),t._v("，默认为空。如"),e("code",[t._v('placement="left-end"')]),t._v("，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="box">\n  <div class="top">\n    <tis-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">\n      <tis-button>上左</tis-button>\n    </tis-tooltip>\n    <tis-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">\n      <tis-button>上边</tis-button>\n    </tis-tooltip>\n    <tis-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">\n      <tis-button>上右</tis-button>\n    </tis-tooltip>\n  </div>\n  <div class="left">\n    <tis-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">\n      <tis-button>左上</tis-button>\n    </tis-tooltip>\n    <tis-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">\n      <tis-button>左边</tis-button>\n    </tis-tooltip>\n    <tis-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">\n      <tis-button>左下</tis-button>\n    </tis-tooltip>\n  </div>\n\n  <div class="right">\n    <tis-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">\n      <tis-button>右上</tis-button>\n    </tis-tooltip>\n    <tis-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">\n      <tis-button>右边</tis-button>\n    </tis-tooltip>\n    <tis-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">\n      <tis-button>右下</tis-button>\n    </tis-tooltip>\n  </div>\n  <div class="bottom">\n    <tis-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">\n      <tis-button>下左</tis-button>\n    </tis-tooltip>\n    <tis-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">\n      <tis-button>下边</tis-button>\n    </tis-tooltip>\n    <tis-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">\n      <tis-button>下右</tis-button>\n    </tis-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),t._m(2),t._m(3),e("demo-block",[e("div",[e("p",[t._v("通过设置"),e("code",[t._v("effect")]),t._v("属性来改变主题，默认为"),e("code",[t._v("dark")]),t._v("。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-tooltip content="Top center" placement="top">\n  <tis-button>Dark</tis-button>\n</tis-tooltip>\n<tis-tooltip content="Bottom center" placement="bottom" effect="light">\n  <tis-button>Light</tis-button>\n</tis-tooltip>\n')])])])],2),t._m(4),e("p",[t._v("展示多行文本或者是设置文本内容的格式")]),e("demo-block",[e("div",[e("p",[t._v("用具名 slot 分发"),e("code",[t._v("content")]),t._v("，替代"),e("code",[t._v("tooltip")]),t._v("中的"),e("code",[t._v("content")]),t._v("属性。")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-tooltip placement="top">\n  <div slot="content">多行信息<br/>第二行信息</div>\n  <tis-button>Top center</tis-button>\n</tis-tooltip>\n')])])])],2),t._m(5),e("p",[t._v("除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：")]),t._m(6),t._m(7),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">\n    <tis-button @click="disabled = !disabled">点击{{disabled ? \'开启\' : \'关闭\'}} tooltip 功能</tis-button>\n  </tis-tooltip>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),t._m(8),t._m(9),t._m(10)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"tooltip-wen-zi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-wen-zi-ti-shi"}},[this._v("¶")]),this._v(" Tooltip 文字提示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhu-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti"}},[this._v("¶")]),this._v(" 主题")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("Tooltip 组件提供了两个不同的主题："),t("code",[this._v("dark")]),this._v("和"),t("code",[this._v("light")]),this._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"geng-duo-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#geng-duo-content"}},[this._v("¶")]),this._v(" 更多 Content")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"gao-ji-kuo-zhan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gao-ji-kuo-zhan"}},[this._v("¶")]),this._v(" 高级扩展")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[e("code",[t._v("transition")]),t._v(" 属性可以定制显隐的动画效果，默认为"),e("code",[t._v("fade-in-linear")]),t._v("。\n如果需要关闭 "),e("code",[t._v("tooltip")]),t._v(" 功能，"),e("code",[t._v("disabled")]),t._v(" 属性可以满足这个需求，它接受一个"),e("code",[t._v("Boolean")]),t._v("，设置为"),e("code",[t._v("true")]),t._v("即可。")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this,e=t.$createElement,e=t._self._c||e;return e("div",{staticClass:"tip"},[e("p",[t._v("tooltip 内不支持 "),e("code",[t._v("router-link")]),t._v(" 组件，请使用 "),e("code",[t._v("vm.$router.push")]),t._v(" 代替。")]),e("p",[t._v("tooltip 内不支持 disabled form 元素，参考"),e("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[t._v("MDN")]),t._v("，请在 disabled form 元素外层添加一层包裹元素。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("effect")]),e("td",[t._v("默认提供的主题")]),e("td",[t._v("String")]),e("td",[t._v("dark/light")]),e("td",[t._v("dark")])]),e("tr",[e("td",[t._v("content")]),e("td",[t._v("显示的内容，也可以通过 "),e("code",[t._v("slot#content")]),t._v(" 传入 DOM")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("placement")]),e("td",[t._v("Tooltip 的出现位置")]),e("td",[t._v("String")]),e("td",[t._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),e("td",[t._v("bottom")])]),e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("状态是否可见")]),e("td",[t._v("Boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("Tooltip 是否可用")]),e("td",[t._v("Boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("offset")]),e("td",[t._v("出现位置的偏移量")]),e("td",[t._v("Number")]),e("td",[t._v("—")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("transition")]),e("td",[t._v("定义渐变动画")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("el-fade-in-linear")])]),e("tr",[e("td",[t._v("visible-arrow")]),e("td",[t._v("是否显示 Tooltip 箭头，更多参数可见"),e("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[t._v("Vue-popper")])]),e("td",[t._v("Boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("popper-options")]),e("td",[e("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[t._v("popper.js")]),t._v(" 的参数")]),e("td",[t._v("Object")]),e("td",[t._v("参考 "),e("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[t._v("popper.js")]),t._v(" 文档")]),e("td",[t._v("{ boundariesElement: 'body', gpuAcceleration: false }")])]),e("tr",[e("td",[t._v("open-delay")]),e("td",[t._v("延迟出现，单位毫秒")]),e("td",[t._v("Number")]),e("td",[t._v("—")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("manual")]),e("td",[t._v("手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效")]),e("td",[t._v("Boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("popper-class")]),e("td",[t._v("为 Tooltip 的 popper 添加类名")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("enterable")]),e("td",[t._v("鼠标是否可进入到 tooltip 中")]),e("td",[t._v("Boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("hide-after")]),e("td",[t._v("Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("tabindex")]),e("td",[t._v("Tooltip 组件的 "),e("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"}},[t._v("tabindex")])]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("0")])])])])}],!1,null,null,null);e.default=a.exports},1315:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var n=this,t=n.$createElement,a=n._self._c||t;return a("div",[a("div",{staticClass:"block"},[a("div",{staticClass:"radio"},[n._v("\n    排序：\n    "),a("tis-radio-group",{model:{value:n.reverse,callback:function(t){n.reverse=t},expression:"reverse"}},[a("tis-radio",{attrs:{label:!0}},[n._v("倒序")]),n._v(" "),a("tis-radio",{attrs:{label:!1}},[n._v("正序")])],1)],1),n._v(" "),a("tis-timeline",{attrs:{reverse:n.reverse}},n._l(n.activities,function(t,e){return a("tis-timeline-item",{key:e,attrs:{timestamp:t.timestamp}},[n._v("\n      "+n._s(t.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,t=n.$createElement,a=n._self._c||t;return a("div",[a("div",{staticClass:"block"},[a("tis-timeline",n._l(n.activities,function(t,e){return a("tis-timeline-item",{key:e,attrs:{icon:t.icon,type:t.type,color:t.color,size:t.size,timestamp:t.timestamp}},[n._v("\n      "+n._s(t.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 t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("div",{staticClass:"block"},[e("tis-timeline",[e("tis-timeline-item",{attrs:{timestamp:"2018/4/12",placement:"top"}},[e("tis-card",[e("h4",[t._v("更新 Github 模板")]),t._v(" "),e("p",[t._v("王小虎 提交于 2018/4/12 20:46")])])],1),t._v(" "),e("tis-timeline-item",{attrs:{timestamp:"2018/4/3",placement:"top"}},[e("tis-card",[e("h4",[t._v("更新 Github 模板")]),t._v(" "),e("p",[t._v("王小虎 提交于 2018/4/3 20:46")])])],1),t._v(" "),e("tis-timeline-item",{attrs:{timestamp:"2018/4/2",placement:"top"}},[e("tis-card",[e("h4",[t._v("更新 Github 模板")]),t._v(" "),e("p",[t._v("王小虎 提交于 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("可视化地呈现时间流信息。")]),t._m(1),e("p",[t._v("Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="block">\n  <div class="radio">\n    排序：\n    <tis-radio-group v-model="reverse">\n      <tis-radio :label="true">倒序</tis-radio>\n      <tis-radio :label="false">正序</tis-radio>\n    </tis-radio-group>\n  </div>\n\n  <tis-timeline :reverse="reverse">\n    <tis-timeline-item\n      v-for="(activity, index) in activities"\n      :key="index"\n      :timestamp="activity.timestamp">\n      {{activity.content}}\n    </tis-timeline-item>\n  </tis-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),t._m(2),e("p",[t._v("可根据实际场景⾃定义节点尺⼨、颜⾊，或直接使⽤图标。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<div class=\"block\">\n  <tis-timeline>\n    <tis-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    </tis-timeline-item>\n  </tis-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),t._m(3),e("p",[t._v("当内容在垂直⽅向上过⾼时，可将时间戳置于内容之上。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="block">\n  <tis-timeline>\n    <tis-timeline-item timestamp="2018/4/12" placement="top">\n      <tis-card>\n        <h4>更新 Github 模板</h4>\n        <p>王小虎 提交于 2018/4/12 20:46</p>\n      </tis-card>\n    </tis-timeline-item>\n    <tis-timeline-item timestamp="2018/4/3" placement="top">\n      <tis-card>\n        <h4>更新 Github 模板</h4>\n        <p>王小虎 提交于 2018/4/3 20:46</p>\n      </tis-card>\n    </tis-timeline-item>\n    <tis-timeline-item timestamp="2018/4/2" placement="top">\n      <tis-card>\n        <h4>更新 Github 模板</h4>\n        <p>王小虎 提交于 2018/4/2 20:46</p>\n      </tis-card>\n    </tis-timeline-item>\n  </tis-timeline>\n</div>\n')])])])],2),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"timeline-shi-jian-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-shi-jian-xian"}},[this._v("¶")]),this._v(" Timeline 时间线")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ding-yi-jie-dian-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-yi-jie-dian-yang-shi"}},[this._v("¶")]),this._v(" ⾃定义节点样式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ding-yi-shi-jian-chuo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-yi-shi-jian-chuo"}},[this._v("¶")]),this._v(" ⾃定义时间戳")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"timeline-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-attributes"}},[this._v("¶")]),this._v(" Timeline Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("reverse")]),e("td",[t._v("指定节点排序方向，默认为正序")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"timeline-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-attributes"}},[this._v("¶")]),this._v(" Timeline-item Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("timestamp")]),e("td",[t._v("时间戳")]),e("td",[t._v("string")]),e("td",[t._v("-")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("hide-timestamp")]),e("td",[t._v("是否隐藏时间戳")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("placement")]),e("td",[t._v("时间戳位置")]),e("td",[t._v("string")]),e("td",[t._v("top / bottom")]),e("td",[t._v("bottom")])]),e("tr",[e("td",[t._v("type")]),e("td",[t._v("节点类型")]),e("td",[t._v("string")]),e("td",[t._v("primary / success / warning / danger / info")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("color")]),e("td",[t._v("节点颜色")]),e("td",[t._v("string")]),e("td",[t._v("hsl / hsv / hex / rgb")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("节点尺寸")]),e("td",[t._v("string")]),e("td",[t._v("normal / large")]),e("td",[t._v("normal")])]),e("tr",[e("td",[t._v("icon")]),e("td",[t._v("节点图标")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"timeline-item-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline-item-slot"}},[this._v("¶")]),this._v(" Timeline-Item Slot")])},function(){var t=this.$createElement,t=this._self._c||t;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);e.default=a.exports},1317:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-swipe-cell",[t("template",{slot:"left"},[t("m-button",{attrs:{square:"",type:"primary",text:"选择"}})],1),this._v(" "),t("m-cell",{attrs:{border:!1,title:"单元格",value:"内容"}}),this._v(" "),t("template",{slot:"right"},[t("m-button",{attrs:{square:"",type:"danger",text:"删除"}}),this._v(" "),t("m-button",{attrs:{square:"",type:"primary",text:"收藏"}})],1)],2)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-swipe-cell",[t("m-card",{staticClass:"goods-card",attrs:{num:"2",price:"2.00",desc:"描述信息",title:"商品标题",thumb:"https://img.yzcdn.cn/mt/cat.jpeg"}}),this._v(" "),t("template",{slot:"right"},[t("m-button",{staticClass:"delete-button",attrs:{square:"",text:"删除",type:"danger"}})],1)],2)],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("p",[t._v("可以左右滑动来展示操作按钮的单元格组件。")]),t._m(2),t._m(3),t._m(4),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-swipe-cell>\n  <template slot="left">\n    <m-button square type="primary" text="选择" />\n  </template>\n  <m-cell :border="false" title="单元格" value="内容" />\n  <template slot="right">\n    <m-button square type="danger" text="删除" />\n    <m-button square type="primary" text="收藏" />\n  </template>\n</m-swipe-cell>\n')])])])],2),t._m(5),t._m(6),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-swipe-cell>\n  <m-card\n    num="2"\n    price="2.00"\n    desc="描述信息"\n    title="商品标题"\n    class="goods-card"\n    thumb="https://img.yzcdn.cn/mt/cat.jpeg"\n  />\n  <template slot="right">\n    <m-button square text="删除" type="danger" class="delete-button" />\n  </template>\n</m-swipe-cell>\n\n<style>\n  .goods-card {\n    margin: 0;\n    background-color: @white;\n  }\n\n  .delete-button {\n    height: 100%;\n  }\n</style>\n')])])])],2),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),e("p",[t._v("beforeClose 的第一个参数为对象，对象中包含以下属性：")]),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"swipecell-hua-dong-dan-yuan-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#swipecell-hua-dong-dan-yuan-ge"}},[this._v("¶")]),this._v(" SwipeCell 滑动单元格")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dai-ma-yan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ma-yan-shi"}},[this._v("¶")]),this._v(" 代码演示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[t("code",[this._v("SwipeCell")]),this._v(" 组件提供了 "),t("code",[this._v("left")]),this._v(" 和 "),t("code",[this._v("right")]),this._v(" 两个插槽，用于定义两侧滑动区域的内容。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong"}},[this._v("¶")]),this._v(" 自定义内容")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[t("code",[this._v("SwipeCell")]),this._v(" 可以嵌套任意内容，比如嵌套一个商品卡片。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("name")]),e("td",[t._v("标识符，可以在事件参数中获取到")]),e("td",[e("em",[t._v("number | string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("left-width")]),e("td",[t._v("指定左侧滑动区域宽度，单位为"),e("code",[t._v("px")])]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("auto")])])]),e("tr",[e("td",[t._v("right-width")]),e("td",[t._v("指定右侧滑动区域宽度，单位为"),e("code",[t._v("px")])]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("auto")])])]),e("tr",[e("td",[t._v("before-close "),e("code",[t._v("v2.3.0")])]),e("td",[t._v("关闭前的回调函数")]),e("td",[e("em",[t._v("Function")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用滑动")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("stop-propagation")]),e("td",[t._v("是否阻止滑动事件冒泡")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("default")]),e("td",[t._v("自定义显示内容")])]),e("tr",[e("td",[t._v("left")]),e("td",[t._v("左侧滑动内容")])]),e("tr",[e("td",[t._v("right")]),e("td",[t._v("右侧滑动内容")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("click")]),e("td",[t._v("点击时触发")]),e("td",[t._v("关闭时的点击位置 ("),e("code",[t._v("left")]),e("code",[t._v("right")]),e("code",[t._v("cell")]),e("code",[t._v("outside")]),t._v(")")])]),e("tr",[e("td",[t._v("open")]),e("td",[t._v("打开时触发")]),e("td",[t._v("{ position: 'left' | 'right' , name: string }")])]),e("tr",[e("td",[t._v("close")]),e("td",[t._v("关闭时触发")]),e("td",[t._v("{ position: string , name: string }")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"beforeclose-can-shu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#beforeclose-can-shu"}},[this._v("¶")]),this._v(" beforeClose 参数")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数名")]),e("th",[t._v("说明")]),e("th",[t._v("类型")])])]),e("tbody",[e("tr",[e("td",[t._v("name")]),e("td",[t._v("标识符")]),e("td",[e("em",[t._v("string")])])]),e("tr",[e("td",[t._v("position")]),e("td",[t._v("关闭时的点击位置 ("),e("code",[t._v("left")]),e("code",[t._v("right")]),e("code",[t._v("cell")]),e("code",[t._v("outside")]),t._v(")")]),e("td",[e("em",[t._v("string")])])]),e("tr",[e("td",[t._v("instance")]),e("td",[t._v("SwipeCell 实例，用于调用实例方法")]),e("td",[e("em",[t._v("SwipeCell")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa"}},[this._v("¶")]),this._v(" 方法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 ref 可以获取到 SwipeCell 实例并调用实例方法，详见"),t("a",{attrs:{href:"#/zh-CN/admced-usage#zu-jian-shi-li-fang-fa"}},[this._v("组件实例方法")]),this._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")]),e("th",[t._v("返回值")])])]),e("tbody",[e("tr",[e("td",[t._v("open")]),e("td",[t._v("打开单元格侧边栏")]),e("td",[t._v("position: "),e("code",[t._v("left \\| right")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("close")]),e("td",[t._v("收起单元格侧边栏")]),e("td",[t._v("-")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),t("a",{attrs:{href:"#/zh-CN/theme"}},[this._v("主题定制")]),this._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@switch-cell-padding-top")]),e("td",[e("code",[t._v("@cell-vertical-padding - 1px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@switch-cell-padding-bottom")]),e("td",[e("code",[t._v("@cell-vertical-padding - 1px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@switch-cell-large-padding-top")]),e("td",[e("code",[t._v("@cell-large-vertical-padding - 1px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@switch-cell-large-padding-bottom")]),e("td",[e("code",[t._v("@cell-large-vertical-padding - 1px")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"chang-jian-wen-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-wen-ti"}},[this._v("¶")]),this._v(" 常见问题")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zai-zhuo-mian-duan-wu-fa-cao-zuo-zu-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zai-zhuo-mian-duan-wu-fa-cao-zuo-zu-jian"}},[this._v("¶")]),this._v(" 在桌面端无法操作组件？")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("参见"),t("a",{attrs:{href:"#/zh-CN/admced-usage#zhuo-mian-duan-gua-pei"}},[this._v("桌面端适配")]),this._v("。")])}],!1,null,null,null);e.default=a.exports},1318:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"任意时间点"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})]],2)},staticRenderFns:[]},{data:function(){return{value1:new Date(2016,9,10,18,40),value2:new Date(2016,9,10,18,40)}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-time-picker",{attrs:{"is-range":"","range-separator":"至","start-placeholder":"开始时间","end-placeholder":"结束时间",placeholder:"选择时间范围"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})]],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)]}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("用于选择或输入日期")]),t._m(1),e("p",[t._v("可以选择任意时间")]),e("demo-block",[e("div",[e("p",[t._v("使用 el-time-picker 标签，通过"),e("code",[t._v("selectableRange")]),t._v("限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开"),e("code",[t._v("arrow-control")]),t._v("属性则通过界面上的箭头进行选择。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-time-picker\n    v-model="value1"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="任意时间点">\n  </tis-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),t._m(2),e("p",[t._v("可选择任意的时间范围")]),e("demo-block",[e("div",[e("p",[t._v("添加"),e("code",[t._v("is-range")]),t._v("属性即可选择时间范围，同样支持"),e("code",[t._v("arrow-control")]),t._v("属性。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-time-picker\n    is-range\n    v-model="value1"\n    range-separator="至"\n    start-placeholder="开始时间"\n    end-placeholder="结束时间"\n    placeholder="选择时间范围">\n  </tis-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),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"timepicker-shi-jian-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker-shi-jian-xuan-ze-qi"}},[this._v("¶")]),this._v(" TimePicker 时间选择器")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ren-yi-shi-jian-dian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-dian"}},[this._v("¶")]),this._v(" 任意时间点")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ren-yi-shi-jian-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-fan-wei"}},[this._v("¶")]),this._v(" 任意时间范围")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值")]),e("td",[t._v("date(TimePicker) / string(TimeSelect)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("readonly")]),e("td",[t._v("完全只读")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("editable")]),e("td",[t._v("文本框可输入")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("clearable")]),e("td",[t._v("是否显示清除按钮")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("输入框尺寸")]),e("td",[t._v("string")]),e("td",[t._v("medium / small / mini")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("placeholder")]),e("td",[t._v("非范围选择时的占位内容")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("start-placeholder")]),e("td",[t._v("范围选择时开始日期的占位内容")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("end-placeholder")]),e("td",[t._v("范围选择时开始日期的占位内容")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("is-range")]),e("td",[t._v("是否为时间范围选择，仅对"),e("code",[t._v("<tis-time-picker>")]),t._v("有效")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("arrow-control")]),e("td",[t._v("是否使用箭头进行时间选择，仅对"),e("code",[t._v("<tis-time-picker>")]),t._v("有效")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("align")]),e("td",[t._v("对齐方式")]),e("td",[t._v("string")]),e("td",[t._v("left / center / right")]),e("td",[t._v("left")])]),e("tr",[e("td",[t._v("popper-class")]),e("td",[t._v("TimePicker 下拉框的类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("picker-options")]),e("td",[t._v("当前时间日期选择器特有的选项参考下表")]),e("td",[t._v("object")]),e("td",[t._v("—")]),e("td",[t._v("{}")])]),e("tr",[e("td",[t._v("range-separator")]),e("td",[t._v("选择范围时的分隔符")]),e("td",[t._v("string")]),e("td",[t._v("-")]),e("td",[t._v("'-'")])]),e("tr",[e("td",[t._v("value-format")]),e("td",[t._v("可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象")]),e("td",[t._v("string")]),e("td",[t._v("见"),e("a",{attrs:{href:"#/zh-CN/component/date-picker#ri-qi-ge-shi"}},[t._v("日期格式")])]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("default-value")]),e("td",[t._v("可选，选择器打开时默认显示的时间")]),e("td",[t._v("Date(TimePicker) / string(TimeSelect)")]),e("td",[t._v("可被"),e("code",[t._v("new Date()")]),t._v("解析(TimePicker) / 可选值(TimeSelect)")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("name")]),e("td",[t._v("原生属性")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("prefix-icon")]),e("td",[t._v("自定义头部图标的类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("el-icon-time")])]),e("tr",[e("td",[t._v("clear-icon")]),e("td",[t._v("自定义清空图标的类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("el-icon-circle-close")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"time-select-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options"}},[this._v("¶")]),this._v(" Time Select Options")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("start")]),e("td",[t._v("开始时间")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("09:00")])]),e("tr",[e("td",[t._v("end")]),e("td",[t._v("结束时间")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("18:00")])]),e("tr",[e("td",[t._v("step")]),e("td",[t._v("间隔时间")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("00:30")])]),e("tr",[e("td",[t._v("minTime")]),e("td",[t._v("最小时间，小于该时间的时间段将被禁用")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("00:00")])]),e("tr",[e("td",[t._v("maxTime")]),e("td",[t._v("最大时间，大于该时间的时间段将被禁用")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"time-picker-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options"}},[this._v("¶")]),this._v(" Time Picker Options")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("selectableRange")]),e("td",[t._v("可选时间段，例如"),e("code",[t._v("'18:30:00 - 20:30:00'")]),t._v("或者传入数组"),e("code",[t._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),e("td",[t._v("string / array")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("format")]),e("td",[t._v("时间格式化(TimePicker)")]),e("td",[t._v("string")]),e("td",[t._v("小时："),e("code",[t._v("HH")]),t._v("，分："),e("code",[t._v("mm")]),t._v("，秒："),e("code",[t._v("ss")]),t._v("，AM/PM "),e("code",[t._v("A")])]),e("td",[t._v("'HH:mm:ss'")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("change")]),e("td",[t._v("用户确认选定的值时触发")]),e("td",[t._v("组件绑定值")])]),e("tr",[e("td",[t._v("blur")]),e("td",[t._v("当 input 失去焦点时触发")]),e("td",[t._v("组件实例")])]),e("tr",[e("td",[t._v("focus")]),e("td",[t._v("当 input 获得焦点时触发")]),e("td",[t._v("组件实例")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[this._v("¶")]),this._v(" Methods")])},function(){var t=this.$createElement,t=this._self._c||t;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);e.default=a.exports},1319:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-swipe",{staticClass:"my-swipe",attrs:{autoplay:3e3,"indicator-color":"white"}},[t("m-swipe-item",[this._v("1")]),this._v(" "),t("m-swipe-item",[this._v("2")]),this._v(" "),t("m-swipe-item",[this._v("3")]),this._v(" "),t("m-swipe-item",[this._v("4")])],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("m-swipe",{staticClass:"my-swipe",on:{change:t.onChange}},[e("m-swipe-item",[t._v("1")]),t._v(" "),e("m-swipe-item",[t._v("2")]),t._v(" "),e("m-swipe-item",[t._v("3")]),t._v(" "),e("m-swipe-item",[t._v("4")])],1)],1)},staticRenderFns:[]},{methods:{onChange:function(t){console.log("当前 Swipe 索引："+t)}}}),"element-demo2":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-swipe",{staticClass:"my-swipe",staticStyle:{height:"200px"},attrs:{vertical:""}},[t("m-swipe-item",[this._v("1")]),this._v(" "),t("m-swipe-item",[this._v("2")]),this._v(" "),t("m-swipe-item",[this._v("3")]),this._v(" "),t("m-swipe-item",[this._v("4")])],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("m-swipe",{staticClass:"my-swipe",attrs:{loop:!1,width:300}},[t("m-swipe-item",[this._v("1")]),this._v(" "),t("m-swipe-item",[this._v("2")]),this._v(" "),t("m-swipe-item",[this._v("3")]),this._v(" "),t("m-swipe-item",[this._v("4")])],1)],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("p",[t._v("用于循环播放一组图片或内容。")]),t._m(2),t._m(3),t._m(4),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-swipe class="my-swipe" :autoplay="3000" indicator-color="white">\n  <m-swipe-item>1</m-swipe-item>\n  <m-swipe-item>2</m-swipe-item>\n  <m-swipe-item>3</m-swipe-item>\n  <m-swipe-item>4</m-swipe-item>\n</m-swipe>\n\n<style>\n  .my-swipe .van-swipe-item {\n    color: #fff;\n    font-size: 20px;\n    line-height: 150px;\n    text-align: center;\n    background-color: #FFD64A;\n  }\n</style>\n')])])])],2),t._m(5),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<m-swipe class=\"my-swipe\" @change=\"onChange\">\n  <m-swipe-item>1</m-swipe-item>\n  <m-swipe-item>2</m-swipe-item>\n  <m-swipe-item>3</m-swipe-item>\n  <m-swipe-item>4</m-swipe-item>\n</m-swipe>\n\n<script>\n// import { Toast } from 'vant';\nexport default {\n  methods: {\n    onChange(index) {\n      // Toast('当前 Swipe 索引：' + index);\n      console.log('当前 Swipe 索引：' + index);\n    },\n  },\n};\n<\/script>\n")])])])],2),t._m(6),t._m(7),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-swipe class="my-swipe" style="height: 200px;" vertical>\n  <m-swipe-item>1</m-swipe-item>\n  <m-swipe-item>2</m-swipe-item>\n  <m-swipe-item>3</m-swipe-item>\n  <m-swipe-item>4</m-swipe-item>\n</m-swipe>\n')])])])],2),t._m(8),t._m(9),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-swipe class="my-swipe" :loop="false" :width="300">\n  <m-swipe-item>1</m-swipe-item>\n  <m-swipe-item>2</m-swipe-item>\n  <m-swipe-item>3</m-swipe-item>\n  <m-swipe-item>4</m-swipe-item>\n</m-swipe>\n')])])])],2),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26),t._m(27),t._m(28),t._m(29),t._m(30),e("p",[t._v("将 Swipe 组件的 stop-propagation 属性设置为 false 即可避免该问题。")]),t._m(31),t._m(32),t._m(33),t._m(34),t._m(35),e("p",[t._v("Swipe 组件在挂载时，会获取自身的宽度，并计算出轮播图的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法正确计算位置。")]),t._m(36),t._m(37),t._m(38),e("p",[t._v("方法二，调用组件的 resize 方法来主动触发重绘：")]),t._m(39),t._m(40)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"swipe-lun-bo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#swipe-lun-bo"}},[this._v("¶")]),this._v(" Swipe 轮播")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jie-shao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-shao"}},[this._v("¶")]),this._v(" 介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dai-ma-yan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ma-yan-shi"}},[this._v("¶")]),this._v(" 代码演示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("每个 SwipeItem 代表一张轮播卡片，可以通过 "),t("code",[this._v("autoplay")]),this._v(" 属性设置自动轮播的间隔。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jian-ting-change-shi-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jian-ting-change-shi-jian"}},[this._v("¶")]),this._v(" 监听 change 事件")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zong-xiang-gun-dong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zong-xiang-gun-dong"}},[this._v("¶")]),this._v(" 纵向滚动")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("设置 "),t("code",[this._v("vertical")]),this._v(" 属性后滑块会纵向排列，此时需要指定滑块容器的高度。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-hua-kuai-da-xiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-hua-kuai-da-xiao"}},[this._v("¶")]),this._v(" 自定义滑块大小")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("滑块默认宽度为 "),t("code",[this._v("100%")]),this._v("，可以通过 "),t("code",[this._v("width")]),this._v(" 属性设置单个滑块的宽度。纵向滚动模式下，可以通过 "),t("code",[this._v("height")]),this._v(" 属性设置单个滑块的高度。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("目前不支持在循环滚动模式下自定义滑块大小，因此需要将 loop 设置为 false。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"swipe-props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#swipe-props"}},[this._v("¶")]),this._v(" Swipe Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("autoplay")]),e("td",[t._v("自动轮播间隔，单位为 ms")]),e("td",[e("em",[t._v("number | string")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("duration")]),e("td",[t._v("动画时长，单位为 ms")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("500")])])]),e("tr",[e("td",[t._v("initial-swipe")]),e("td",[t._v("初始位置索引值")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("0")])])]),e("tr",[e("td",[t._v("width")]),e("td",[t._v("滑块宽度，单位为"),e("code",[t._v("px")])]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("auto")])])]),e("tr",[e("td",[t._v("height")]),e("td",[t._v("滑块高度，单位为"),e("code",[t._v("px")])]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("auto")])])]),e("tr",[e("td",[t._v("loop")]),e("td",[t._v("是否开启循环播放")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("show-indicators")]),e("td",[t._v("是否显示指示器")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("vertical")]),e("td",[t._v("是否为纵向滚动")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("touchable")]),e("td",[t._v("是否可以通过手势滑动")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("stop-propagation")]),e("td",[t._v("是否阻止滑动事件冒泡")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("lazy-render "),e("code",[t._v("v2.5.8")])]),e("td",[t._v("是否延迟渲染未展示的轮播")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("indicator-color")]),e("td",[t._v("指示器颜色")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("#1989fa")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"swipe-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#swipe-events"}},[this._v("¶")]),this._v(" Swipe Events")])},function(){var t=this.$createElement,t=this._self._c||t;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("index, 当前页的索引")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"swipeitem-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#swipeitem-events"}},[this._v("¶")]),this._v(" SwipeItem Events")])},function(){var t=this.$createElement,t=this._self._c||t;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("click")]),t("td",[this._v("点击时触发")]),t("td",[t("em",[this._v("event: Event")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"swipe-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#swipe-fang-fa"}},[this._v("¶")]),this._v(" Swipe 方法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 ref 可以获取到 Swipe 实例并调用实例方法，详见"),t("a",{attrs:{href:"#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa"}},[this._v("组件实例方法")]),this._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")]),e("th",[t._v("返回值")])])]),e("tbody",[e("tr",[e("td",[t._v("prev "),e("code",[t._v("v2.4.2")])]),e("td",[t._v("切换到上一轮播")]),e("td",[t._v("-")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("next "),e("code",[t._v("v2.4.2")])]),e("td",[t._v("切换到下一轮播")]),e("td",[t._v("-")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("swipeTo")]),e("td",[t._v("切换到指定位置")]),e("td",[t._v("index: number, options: Options")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("resize")]),e("td",[t._v("外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘")]),e("td",[t._v("-")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"swipeto-options-ge-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#swipeto-options-ge-shi"}},[this._v("¶")]),this._v(" swipeTo Options 格式")])},function(){var t=this.$createElement,t=this._self._c||t;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("immediate")]),t("td",[this._v("是否跳过动画")]),t("td",[t("em",[this._v("boolean")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"swipe-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#swipe-slots"}},[this._v("¶")]),this._v(" Swipe Slots")])},function(){var t=this.$createElement,t=this._self._c||t;return t("table",[t("thead",[t("tr",[t("th",[this._v("名称")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("default")]),t("td",[this._v("轮播内容")])]),t("tr",[t("td",[this._v("indicator")]),t("td",[this._v("自定义指示器")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),t("a",{attrs:{href:"#/zh-CN/theme"}},[this._v("主题定制")]),this._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@swipe-indicator-size")]),e("td",[e("code",[t._v("6px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@swipe-indicator-margin")]),e("td",[e("code",[t._v("@padding-sm")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@swipe-indicator-active-opacity")]),e("td",[e("code",[t._v("1")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@swipe-indicator-inactive-opacity")]),e("td",[e("code",[t._v("0.3")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@swipe-indicator-active-background-color")]),e("td",[e("code",[t._v("@blue")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@swipe-indicator-inactive-background-color")]),e("td",[e("code",[t._v("@border-color")])]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"chang-jian-wen-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chang-jian-wen-ti"}},[this._v("¶")]),this._v(" 常见问题")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"hua-dong-lun-bo-shi-wei-shi-me-hong-fa-liao-click-shi-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hua-dong-lun-bo-shi-wei-shi-me-hong-fa-liao-click-shi-jian"}},[this._v("¶")]),this._v(" 滑动轮播时为什么触发了 click 事件？")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("这种情况通常是由于项目中引入了"),t("code",[this._v("fastclick")]),this._v("库导致的。"),t("code",[this._v("fastclick")]),this._v("的原理是通过 Touch 事件模拟出 click 事件，而 Swipe 内部默认会阻止 touchmove 事件冒泡，干扰了 fastclick 的判断，导致出现这个问题。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zai-zhuo-mian-duan-wu-fa-cao-zuo-zu-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zai-zhuo-mian-duan-wu-fa-cao-zuo-zu-jian"}},[this._v("¶")]),this._v(" 在桌面端无法操作组件？")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("参见"),t("a",{attrs:{href:"#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei"}},[this._v("桌面端适配")]),this._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"swipe-zu-jian-gong-neng-tai-shao-wu-fa-shi-xian-fu-za-xiao-guo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#swipe-zu-jian-gong-neng-tai-shao-wu-fa-shi-xian-fu-za-xiao-guo"}},[this._v("¶")]),this._v(" Swipe 组件功能太少，无法实现复杂效果？")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("Vant 中的 Swipe 组件是比较轻量的，因此功能也比较基础。如果需要更复杂的轮播效果，推荐使用社区里一些优质的轮播库，比如 "),t("a",{attrs:{href:"https://github.com/surmon-china/vue-awesome-swiper"}},[this._v("vue-awesome-swiper")]),this._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zu-jian-cong-yin-cang-zhuang-tai-qie-huan-dao-xian-shi-zhuang-tai-shi-wu-fa-zheng-que-xuan-ran"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zu-jian-cong-yin-cang-zhuang-tai-qie-huan-dao-xian-shi-zhuang-tai-shi-wu-fa-zheng-que-xuan-ran"}},[this._v("¶")]),this._v(" 组件从隐藏状态切换到显示状态时，无法正确渲染？")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"jie-jue-fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jie-jue-fang-fa"}},[this._v("¶")]),this._v(" 解决方法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("方法一，如果是使用 "),t("code",[this._v("v-show")]),this._v(" 来控制组件展示的，则替换为 "),t("code",[this._v("v-if")]),this._v(" 即可解决此问题：")])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-html"},[this._v('\x3c!-- Before --\x3e\n<m-swipe v-show="show" />\n\x3c!-- After --\x3e\n<m-swipe v-if="show" />\n')])])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-html"},[this._v('<m-swipe v-show="show" ref="swipe" />\n')])])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-js"},[this._v("this.$refs.swipe.resize();\n")])])}],!1,null,null,null);e.default=a.exports},1321:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("h2",{staticStyle:{"margin-bottom":"25px"}},[e._v("修改主题变量")]),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-button",{attrs:{type:"primary"},on:{click:e.clickFunc}},[e._v("切换主题")])],1),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-col",{attrs:{span:8}},[n("h3",[e._v("描边")]),e._v(" "),n("tis-select",{attrs:{placeholder:"描边"},model:{value:e.borderValue,callback:function(t){e.borderValue=t},expression:"borderValue"}},e._l(e.borderOpts,function(t){return n("tis-option",{key:t.value,attrs:{label:t.label,value:t.value}})}),1)],1),e._v(" "),n("tis-col",{attrs:{span:8}},[n("h3",[e._v("背景色")]),e._v(" "),n("tis-select",{attrs:{placeholder:"背景色"},model:{value:e.bgValue,callback:function(t){e.bgValue=t},expression:"bgValue"}},e._l(e.bgOpts,function(t){return n("tis-option",{key:t.value,attrs:{label:t.label,value:t.value}})}),1)],1),e._v(" "),n("tis-col",{attrs:{span:8}},[n("h3",[e._v("直角/圆角")]),e._v(" "),n("tis-select",{attrs:{placeholder:"直角/圆角"},model:{value:e.radiusValue,callback:function(t){e.radiusValue=t},expression:"radiusValue"}},e._l(e.radiusOpts,function(t){return n("tis-option",{key:t.value,attrs:{label:t.label,value:t.value}})}),1)],1)],1),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-col",{attrs:{span:8}},[n("h3",[e._v("字体")]),e._v(" "),n("tis-select",{attrs:{placeholder:"字体"},model:{value:e.fontValue,callback:function(t){e.fontValue=t},expression:"fontValue"}},e._l(e.fontOpts,function(t){return n("tis-option",{key:t.value,attrs:{label:t.label,value:t.value}})}),1)],1),e._v(" "),n("tis-col",{attrs:{span:8}},[n("h3",[e._v("icon")]),e._v(" "),n("tis-select",{attrs:{placeholder:"icon"},model:{value:e.iconValue,callback:function(t){e.iconValue=t},expression:"iconValue"}},e._l(e.iconOpts,function(t){return n("tis-option",{key:t.value,attrs:{label:t.label,value:t.value}})}),1)],1),e._v(" "),n("tis-col",{attrs:{span:8}},[n("h3",[e._v("颜色")]),e._v(" "),n("tis-select",{attrs:{placeholder:"颜色"},model:{value:e.colorValue,callback:function(t){e.colorValue=t},expression:"colorValue"}},e._l(e.colorOpts,function(t){return n("tis-option",{key:t.value,attrs:{label:t.label,value:t.value}})}),1)],1)],1),e._v(" "),n("tis-row",{directives:[{name:"show",rawName:"v-show",value:e.finish,expression:"finish"}]},[n("p",[e._v("样式表下载访问地址："),n("tis-link",{attrs:{href:e.cssFile,target:"_blank",type:"primary"}},[e._v(e._s(e.cssFile))])],1)])]],2)},staticRenderFns:[]},{data:function(){return{borderOpts:[{value:"none",label:"无描边"},{value:"1px",label:"1倍描边（默认）"},{value:"2px",label:"2倍描边"}],borderValue:"1px",bgOpts:[{value:"rgba(255, 255, 255, 1)",label:"无透明度"},{value:"rgba(255, 255, 255, 0.15)",label:"15%不透明度（默认）"},{value:"rgba(255, 255, 255, 0.3)",label:"30%不透明度"},{value:"rgba(255, 255, 255, 0.5)",label:"50%不透明度"}],bgValue:"rgba(255, 255, 255, 0.15)",radiusOpts:[{value:"0px",label:"直角（默认）"},{value:"4px",label:"圆角 4px"},{value:"8px",label:"圆角 8px"},{value:"30px",label:"圆角 30px"}],radiusValue:"0px",fontOpts:[{value:1,label:"系统默认字体（默认）"}],fontValue:1,iconOpts:[{value:1,label:"默认icon"}],iconValue:1,colorOpts:[{value:"#92D9FF",label:"蓝色 #92D9FF"},{value:"#F1CD30",label:"黄色 #F1CD30（默认）"}],colorValue:"#F1CD30",cssFile:"",finish:!1}},mounted:function(){console.log("mounted");var t=document.getElementsByClassName("demo-block-control")[0];console.log("blockControl:",t),t.style.display="none",document.getElementsByClassName("meta")[0].style.display="none"},methods:{clickFunc:function(){var e=this;console.log("开始请求变量"),console.log("this",this.$loading),this.finish=!1;var t={color:this.colorValue,icon:this.iconValue,font:this.fontValue,radius:this.radiusValue,background:this.bgValue,border:this.borderValue};this.$loading();fetch("http://tis.inscloudtech.com:9101/build",{method:"POST",body:JSON.stringify(t),headers:{"Content-Type":"application/json"}}).then(function(t){return t.json()}).then(function(t){console.log("成功",t),1e3!==t.code?e.$message.error("切换失败"):(t=t.data.css_file,document.getElementById("tisTheme").setAttribute("href",t),e.cssFile=t)}).catch(function(t){console.log("失败",t),e.$message.error("请求失败")}).finally(function(){setTimeout(function(){e.finish=!0,e.$loading().close()},1500)})}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("h2",{staticStyle:{"margin-bottom":"25px"}},[e._v("部分组件效果示例")]),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-button",{attrs:{type:"primary"}},[e._v("主要按钮")]),e._v(" "),n("tis-button",{attrs:{type:"info"}},[e._v("信息按钮")]),e._v(" "),n("tis-button",{attrs:{type:"danger"}},[e._v("危险按钮")])],1),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-link",{attrs:{href:"https://element.eleme.io",target:"_blank"}},[e._v("默认链接")]),e._v(" "),n("tis-link",{attrs:{type:"primary"}},[e._v("主要链接")]),e._v(" "),n("tis-link",{attrs:{type:"danger"}},[e._v("危险链接")]),e._v(" "),n("tis-link",{attrs:{type:"info"}},[e._v("信息链接")])],1),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-radio",{attrs:{label:"1"},model:{value:e.radio,callback:function(t){e.radio=t},expression:"radio"}},[e._v("选项1")]),e._v(" "),n("tis-radio",{attrs:{label:"2"},model:{value:e.radio,callback:function(t){e.radio=t},expression:"radio"}},[e._v("选项2")])],1),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-checkbox",{model:{value:e.checked,callback:function(t){e.checked=t},expression:"checked"}},[e._v("备选项")])],1),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-input",{attrs:{placeholder:"请输入内容"},model:{value:e.input,callback:function(t){e.input=t},expression:"input"}})],1),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-input-number",{attrs:{min:1,max:10,label:"描述文字"},model:{value:e.num,callback:function(t){e.num=t},expression:"num"}})],1),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-select",{attrs:{placeholder:"请选择"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},e._l(e.options,function(t){return n("tis-option",{key:t.value,attrs:{label:t.label,value:t.value}})}),1)],1),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"任意时间点"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-tag",[e._v("标签一")]),e._v(" "),n("tis-tag",{attrs:{type:"info"}},[e._v("标签三")]),e._v(" "),n("tis-tag",{attrs:{type:"danger"}},[e._v("标签五")])],1),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-alert",{attrs:{title:"成功提示的文案",type:"success"}})],1),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-alert",{attrs:{title:"消息提示的文案",type:"info"}})],1),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-alert",{attrs:{title:"错误提示的文案",type:"error"}})],1),e._v(" "),n("tis-row",{staticClass:"theme-row"},[n("tis-steps",{attrs:{active:1,simple:""}},[n("tis-step",{attrs:{title:"步骤 1",icon:"el-icon-edit"}}),e._v(" "),n("tis-step",{attrs:{title:"步骤 2",icon:"el-icon-upload"}}),e._v(" "),n("tis-step",{attrs:{title:"步骤 3",icon:"el-icon-picture"}})],1)],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{radio:"1",checked:!0,input:"",num:1,options:[{value:"选项1",label:"苹果"},{value:"选项2",label:"香蕉"},{value:"选项3",label:"椰子"},{value:"选项4",label:"凤梨"},{value:"选项5",label:"山竹"}],value:"",value1:new Date(2016,9,10,18,40),value2:new Date(2016,9,10,18,40)}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this.$createElement,t=this._self._c||t;return t("section",{staticClass:"content element-doc"},[this._m(0),t("p",[this._v("TIS-UI主题定制操作页面")]),t("demo-block",[t("template",{slot:"source"},[t("element-demo0")],1),t("template",{slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"html"}},[this._v("<template>\n    <h2 style=\"margin-bottom: 25px;\">修改主题变量</h2>\n    <tis-row class=\"theme-row\">\n      <tis-button @click=\"clickFunc\" type=\"primary\">切换主题</tis-button>\n    </tis-row>\n\n    <tis-row class=\"theme-row\">\n      <tis-col :span=\"8\">\n        <h3>描边</h3>\n        <tis-select v-model=\"borderValue\" placeholder=\"描边\">\n          <tis-option\n            v-for=\"item in borderOpts\"\n            :key=\"item.value\"\n            :label=\"item.label\"\n            :value=\"item.value\">\n          </tis-option>\n        </tis-select>\n      </tis-col>\n      <tis-col :span=\"8\">\n        <h3>背景色</h3>\n        <tis-select v-model=\"bgValue\" placeholder=\"背景色\">\n          <tis-option\n            v-for=\"item in bgOpts\"\n            :key=\"item.value\"\n            :label=\"item.label\"\n            :value=\"item.value\">\n          </tis-option>\n        </tis-select>\n      </tis-col>\n      <tis-col :span=\"8\">\n        <h3>直角/圆角</h3>\n        <tis-select v-model=\"radiusValue\" placeholder=\"直角/圆角\">\n          <tis-option\n            v-for=\"item in radiusOpts\"\n            :key=\"item.value\"\n            :label=\"item.label\"\n            :value=\"item.value\">\n          </tis-option>\n        </tis-select>\n      </tis-col>\n    </tis-row>\n\n    <tis-row class=\"theme-row\">\n      <tis-col :span=\"8\">\n        <h3>字体</h3>\n        <tis-select v-model=\"fontValue\" placeholder=\"字体\">\n          <tis-option\n            v-for=\"item in fontOpts\"\n            :key=\"item.value\"\n            :label=\"item.label\"\n            :value=\"item.value\">\n          </tis-option>\n        </tis-select>\n      </tis-col>\n      <tis-col :span=\"8\">\n        <h3>icon</h3>\n        <tis-select v-model=\"iconValue\" placeholder=\"icon\">\n          <tis-option\n            v-for=\"item in iconOpts\"\n            :key=\"item.value\"\n            :label=\"item.label\"\n            :value=\"item.value\">\n          </tis-option>\n        </tis-select>\n      </tis-col>\n      <tis-col :span=\"8\">\n        <h3>颜色</h3>\n        <tis-select v-model=\"colorValue\" placeholder=\"颜色\">\n          <tis-option\n            v-for=\"item in colorOpts\"\n            :key=\"item.value\"\n            :label=\"item.label\"\n            :value=\"item.value\">\n          </tis-option>\n        </tis-select>\n      </tis-col>\n    </tis-row>\n    <tis-row v-show=\"finish\">\n      <p>样式表下载访问地址：<tis-link :href=\"cssFile\" target=\"_blank\" type=\"primary\">{{ cssFile }}</tis-link></p>\n    </tis-row>\n</template>\n\n<script>\n  export default {\n    data: () => {\n      return {\n        borderOpts: [\n          { value: 'none', label: '无描边' },\n          { value: '1px', label: '1倍描边（默认）' },\n          { value: '2px', label: '2倍描边' }\n        ],\n        borderValue: '1px',\n        bgOpts: [\n          { value: 'rgba(255, 255, 255, 1)', label: '无透明度' },\n          { value: 'rgba(255, 255, 255, 0.15)', label: '15%不透明度（默认）' },\n          { value: 'rgba(255, 255, 255, 0.3)', label: '30%不透明度' },\n          {value: 'rgba(255, 255, 255, 0.5)', label: '50%不透明度' }\n        ],\n        bgValue: 'rgba(255, 255, 255, 0.15)',\n        radiusOpts: [\n          { value: '0px', label: '直角（默认）' },\n          { value: '4px', label: '圆角 4px' },\n          { value: '8px', label: '圆角 8px' },\n          { value: '30px', label: '圆角 30px'}\n        ],\n        radiusValue: '0px',\n        fontOpts: [\n          { value: 1, label: '系统默认字体（默认）' }\n        ],\n        fontValue: 1,\n        iconOpts: [\n          { value: 1, label: '默认icon' }\n        ],\n        iconValue: 1,\n        colorOpts: [\n          { value: '#92D9FF', label: '蓝色 #92D9FF' },\n          { value: '#F1CD30', label: '黄色 #F1CD30（默认）' }\n        ],\n        colorValue: '#F1CD30',\n        cssFile: '',\n        finish: false\n      };\n    },\n    mounted: () => {\n      console.log('mounted');\n      const blockControl = document.getElementsByClassName('demo-block-control')[0];\n      console.log('blockControl:', blockControl);\n      blockControl.style.display = 'none';\n\n      const meta = document.getElementsByClassName('meta')[0];\n      meta.style.display = 'none';\n\n      // const demoBlock = document.getElementsByClassName('demo-block')[0];\n      // demoBlock.style.border = 'none';\n    },\n    methods: {\n      clickFunc() {\n        console.log('开始请求变量');\n        console.log('this', this.$loading);\n        this.finish = false;\n\n        const params = {\n          color: this.colorValue,\n          icon: this.iconValue,\n          font: this.fontValue,\n          radius: this.radiusValue,\n          background: this.bgValue,\n          border: this.borderValue\n        };\n\n        this.$loading();\n        const api = 'http://tis.inscloudtech.com:9101';\n        fetch(api + '/build', {\n          method: 'POST',\n          body: JSON.stringify(params),\n          headers: {\n            'Content-Type': 'application/json'\n          }\n        }).then(res => res.json()).then(data => {\n          console.log('成功', data);\n          if (data.code !== 1000) {\n            this.$message.error('切换失败');\n          } else {\n            const { css_file } = data.data;\n            const themeDom = document.getElementById('tisTheme');\n            themeDom.setAttribute('href', css_file);\n            this.cssFile = css_file;\n\n          }\n        }).catch(error => {\n          console.log('失败', error);\n          this.$message.error('请求失败');\n        }).finally(() => {\n          setTimeout(() => {\n            this.finish = true;\n            this.$loading().close();\n          }, 1500);\n        })\n      }\n    }\n  }\n<\/script>\n")])])])],2),t("demo-block",[t("template",{slot:"source"},[t("element-demo1")],1),t("template",{slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"html"}},[this._v('<template>\n  <div>\n    <h2 style="margin-bottom: 25px;">部分组件效果示例</h2>\n    <tis-row class="theme-row">\n      <tis-button type="primary">主要按钮</tis-button>\n      <tis-button type="info">信息按钮</tis-button>\n      <tis-button type="danger">危险按钮</tis-button>\n    </tis-row>\n\n    <tis-row class="theme-row">\n      <tis-link href="https://element.eleme.io" target="_blank">默认链接</tis-link>\n      <tis-link type="primary">主要链接</tis-link>\n      <tis-link type="danger">危险链接</tis-link>\n      <tis-link type="info">信息链接</tis-link>\n    </tis-row>\n\n    <tis-row class="theme-row">\n      <tis-radio v-model="radio" label="1">选项1</tis-radio>\n      <tis-radio v-model="radio" label="2">选项2</tis-radio>\n    </tis-row>\n\n    <tis-row class="theme-row">\n      <tis-checkbox v-model="checked">备选项</tis-checkbox>\n    </tis-row>\n\n    <tis-row class="theme-row">\n      <tis-input v-model="input" placeholder="请输入内容"></tis-input>\n    </tis-row>\n\n    <tis-row class="theme-row">\n      <tis-input-number v-model="num" :min="1" :max="10" label="描述文字"></tis-input-number>\n    </tis-row>\n\n    <tis-row class="theme-row">\n      <tis-select v-model="value" placeholder="请选择">\n        <tis-option\n          v-for="item in options"\n          :key="item.value"\n          :label="item.label"\n          :value="item.value">\n        </tis-option>\n      </tis-select>\n    </tis-row>\n\n    <tis-row class="theme-row">\n      <tis-time-picker\n        v-model="value1"\n        :picker-options="{\n          selectableRange: \'18:30:00 - 20:30:00\'\n        }"\n        placeholder="任意时间点">\n      </tis-time-picker>\n    </tis-row>\n\n    <tis-row class="theme-row">\n      <tis-tag>标签一</tis-tag>\n      <tis-tag type="info">标签三</tis-tag>\n      <tis-tag type="danger">标签五</tis-tag>\n    </tis-row>\n\n    <tis-row class="theme-row">\n      <tis-pagination\n        background\n        layout="prev, pager, next"\n        :total="1000">\n      </tis-pagination>\n    </tis-row>\n\n    <tis-row class="theme-row">\n      <tis-alert\n        title="成功提示的文案"\n        type="success">\n      </tis-alert>\n    </tis-row>\n\n    <tis-row class="theme-row">\n      <tis-alert\n        title="消息提示的文案"\n        type="info">\n      </tis-alert>\n    </tis-row>\n\n    <tis-row class="theme-row">\n      <tis-alert\n        title="错误提示的文案"\n        type="error">\n      </tis-alert>\n    </tis-row>\n\n    <tis-row class="theme-row">\n      <tis-steps :active="1" simple>\n        <tis-step title="步骤 1" icon="el-icon-edit"></tis-step>\n        <tis-step title="步骤 2" icon="el-icon-upload"></tis-step>\n        <tis-step title="步骤 3" icon="el-icon-picture"></tis-step>\n      </tis-steps>\n    </tis-row>\n  </div>\n</template>\n<script>\n  export default {\n    data: () => {\n      return {\n        radio: \'1\',\n        checked: true,\n        input: \'\',\n        num: 1,\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        value1: new Date(2016, 9, 10, 18, 40),\n        value2: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n<\/script>\n\n')])])])],2)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"zhu-ti-ding-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti-ding-zhi"}},[this._v("¶")]),this._v(" 主题定制")])}],!1,null,null,null);e.default=a.exports},1323:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-tag",[this._v("标签一")]),this._v(" "),t("tis-tag",{attrs:{type:"info"}},[this._v("标签三")]),this._v(" "),t("tis-tag",{attrs:{type:"danger"}},[this._v("标签五")])],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",e._l(e.tags,function(t){return n("tis-tag",{key:t.name,attrs:{closable:"",type:t.type}},[e._v("\n  "+e._s(t.name)+"\n")])}),1)},staticRenderFns:[]},{data:function(){return{tags:[{name:"标签一",type:""},{name:"标签三",type:"info"},{name:"标签五",type:"danger"}]}}}),"element-demo2":a({render:function(){var n=this,t=n.$createElement,a=n._self._c||t;return a("div",[n._l(n.dynamicTags,function(e){return a("tis-tag",{key:e,attrs:{closable:"","disable-transitions":!1},on:{close:function(t){n.handleClose(e)}}},[n._v("\n  "+n._s(e)+"\n")])}),n._v(" "),n.inputVisible?a("tis-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"small"},on:{blur:n.handleInputConfirm},nativeOn:{keyup:function(t){return"button"in t||!n._k(t.keyCode,"enter",13,t.key,"Enter")?n.handleInputConfirm(t):null}},model:{value:n.inputValue,callback:function(t){n.inputValue=t},expression:"inputValue"}}):a("tis-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(t){this.dynamicTags.splice(this.dynamicTags.indexOf(t),1)},showInput:function(){var e=this;this.inputVisible=!0,this.$nextTick(function(t){e.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var t=this.inputValue;t&&this.dynamicTags.push(t),this.inputVisible=!1,this.inputValue=""}}}),"element-demo3":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-tag",{attrs:{closable:""}},[this._v("默认标签")]),this._v(" "),t("tis-tag",{attrs:{size:"medium",closable:""}},[this._v("中等标签")]),this._v(" "),t("tis-tag",{attrs:{size:"small",closable:""}},[this._v("小型标签")])],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"tag-group"},[n("span",{staticClass:"tag-group__title"},[e._v("Dark")]),e._v(" "),e._l(e.items,function(t){return n("tis-tag",{key:t.label,attrs:{type:t.type,effect:"dark"}},[e._v("\n    "+e._s(t.label)+"\n  ")])})],2),e._v(" "),n("div",{staticClass:"tag-group"},[n("span",{staticClass:"tag-group__title"},[e._v("Plain")]),e._v(" "),e._l(e.items,function(t){return n("tis-tag",{key:t.label,attrs:{type:t.type,effect:"plain"}},[e._v("\n    "+e._s(t.label)+"\n  ")])})],2)])},staticRenderFns:[]},{data:function(){return{items:[{type:"",label:"标签一"},{type:"info",label:"标签三"},{type:"danger",label:"标签四"}]}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("用于标记和选择。")]),t._m(1),e("demo-block",[e("div",[e("p",[t._v("由"),e("code",[t._v("type")]),t._v("属性来选择tag的类型，也可以通过"),e("code",[t._v("color")]),t._v("属性来自定义背景色。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-tag>标签一</tis-tag>\n<tis-tag type="info">标签三</tis-tag>\n<tis-tag type="danger">标签五</tis-tag>\n')])])])],2),t._m(2),e("demo-block",[e("div",[e("p",[t._v("设置"),e("code",[t._v("closable")]),t._v("属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置"),e("code",[t._v("disable-transitions")]),t._v("属性，它接受一个"),e("code",[t._v("Boolean")]),t._v("，true 为关闭。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<tis-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</tis-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: '标签一', type: '' },\n          { name: '标签三', type: 'info' },\n          { name: '标签五', type: 'danger' }\n        ]\n      };\n    }\n  }\n<\/script>\n")])])])],2),t._m(3),t._m(4),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-tag\n  :key="tag"\n  v-for="tag in dynamicTags"\n  closable\n  :disable-transitions="false"\n  @close="handleClose(tag)">\n  {{tag}}\n</tis-tag>\n<tis-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</tis-input>\n<tis-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</tis-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),t._m(5),e("p",[t._v("Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),e("demo-block",[e("div",[e("p",[t._v("额外的尺寸："),e("code",[t._v("medium")]),t._v("、"),e("code",[t._v("small")]),t._v("、"),e("code",[t._v("mini")]),t._v("，通过设置"),e("code",[t._v("size")]),t._v("属性来配置它们。")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-tag closable>默认标签</tis-tag>\n<tis-tag size="medium" closable>中等标签</tis-tag>\n<tis-tag size="small" closable>小型标签</tis-tag>\n')])])])],2),t._m(6),t._m(7),e("demo-block",[e("div",[e("p",[t._v("通过设置"),e("code",[t._v("effect")]),t._v("属性来改变主题，默认为 "),e("code",[t._v("light")])])]),e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="tag-group">\n  <span class="tag-group__title">Dark</span>\n  <tis-tag\n    v-for="item in items"\n    :key="item.label"\n    :type="item.type"\n    effect="dark">\n    {{ item.label }}\n  </tis-tag>\n</div>\n<div class="tag-group">\n  <span class="tag-group__title">Plain</span>\n  <tis-tag\n    v-for="item in items"\n    :key="item.label"\n    :type="item.type"\n    effect="plain">\n    {{ item.label }}\n  </tis-tag>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        items: [\n          { type: \'\', label: \'标签一\' },\n          { type: \'info\', label: \'标签三\' },\n          { type: \'danger\', label: \'标签四\' }\n        ]\n      }\n    }\n  }\n<\/script>\n')])])])],2),t._m(8),t._m(9),t._m(10),t._m(11)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"tag-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag-biao-qian"}},[this._v("¶")]),this._v(" Tag 标签")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ke-yi-chu-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-yi-chu-biao-qian"}},[this._v("¶")]),this._v(" 可移除标签")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dong-tai-bian-ji-biao-qian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-bian-ji-biao-qian"}},[this._v("¶")]),this._v(" 动态编辑标签")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("动态编辑标签可以通过点击标签关闭按钮后触发的 "),t("code",[this._v("close")]),this._v(" 事件来实现")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"bu-tong-zhu-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-zhu-ti"}},[this._v("¶")]),this._v(" 不同主题")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("type")]),e("td",[t._v("类型")]),e("td",[t._v("string")]),e("td",[t._v("success/info/warning/danger")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("closable")]),e("td",[t._v("是否可关闭")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("disable-transitions")]),e("td",[t._v("是否禁用渐变动画")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("hit")]),e("td",[t._v("是否有边框描边")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("color")]),e("td",[t._v("背景色")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("尺寸")]),e("td",[t._v("string")]),e("td",[t._v("medium / small / mini")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("effect")]),e("td",[t._v("主题")]),e("td",[t._v("string")]),e("td",[t._v("dark / light / plain")]),e("td",[t._v("light")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("click")]),e("td",[t._v("点击 Tag 时触发的事件")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("close")]),e("td",[t._v("关闭 Tag 时触发的事件")]),e("td",[t._v("—")])])])])}],!1,null,null,null);e.default=a.exports},1324:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-tabs",{on:{"tab-click":e.handleClick},model:{value:e.activeName,callback:function(t){e.activeName=t},expression:"activeName"}},[t("tis-tab-pane",{attrs:{label:"用户管理",name:"first"}},[e._v("用户管理")]),e._v(" "),t("tis-tab-pane",{attrs:{label:"配置管理",name:"second"}},[e._v("配置管理")]),e._v(" "),t("tis-tab-pane",{attrs:{label:"角色管理",name:"third"}},[e._v("角色管理")]),e._v(" "),t("tis-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[e._v("定时任务补偿")])],1)]],2)},staticRenderFns:[]},{data:function(){return{activeName:"second"}},methods:{handleClick:function(t,e){console.log(t,e)}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-tabs",{attrs:{type:"card"},on:{"tab-click":e.handleClick},model:{value:e.activeName,callback:function(t){e.activeName=t},expression:"activeName"}},[t("tis-tab-pane",{attrs:{label:"用户管理",name:"first"}},[e._v("用户管理")]),e._v(" "),t("tis-tab-pane",{attrs:{label:"配置管理",name:"second"}},[e._v("配置管理")]),e._v(" "),t("tis-tab-pane",{attrs:{label:"角色管理",name:"third"}},[e._v("角色管理")]),e._v(" "),t("tis-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[e._v("定时任务补偿")])],1)]],2)},staticRenderFns:[]},{data:function(){return{activeName:"first"}},methods:{handleClick:function(t,e){console.log(t,e)}}}),"element-demo2":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-tabs",{attrs:{type:"border-card"}},[t("tis-tab-pane",{attrs:{label:"用户管理"}},[this._v("用户管理")]),this._v(" "),t("tis-tab-pane",{attrs:{label:"配置管理"}},[this._v("配置管理")]),this._v(" "),t("tis-tab-pane",{attrs:{label:"角色管理"}},[this._v("角色管理")]),this._v(" "),t("tis-tab-pane",{attrs:{label:"定时任务补偿"}},[this._v("定时任务补偿")])],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var n=this,t=n.$createElement,a=n._self._c||t;return a("div",[a("tis-tabs",{attrs:{type:"card",editable:""},on:{edit:n.handleTabsEdit},model:{value:n.editableTabsValue,callback:function(t){n.editableTabsValue=t},expression:"editableTabsValue"}},n._l(n.editableTabs,function(t,e){return a("tis-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[n._v("\n    "+n._s(t.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(n,t){var e,a,i;"add"===t&&(e=++this.tabIndex+"",this.editableTabs.push({title:"New Tab",name:e,content:"New Tab content"}),this.editableTabsValue=e),"remove"===t&&(a=this.editableTabs,(i=this.editableTabsValue)===n&&a.forEach(function(t,e){t.name!==n||(e=a[e+1]||a[e-1])&&(i=e.name)}),this.editableTabsValue=i,this.editableTabs=a.filter(function(t){return t.name!==n}))}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("分隔内容上有关联但属于不同类别的数据集合。")]),t._m(1),e("p",[t._v("基础的、简洁的标签页。")]),e("demo-block",[e("div",[e("p",[t._v("Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 "),e("code",[t._v("value")]),t._v(" 属性来指定当前选中的标签页。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-tabs v-model="activeName" @tab-click="handleClick">\n    <tis-tab-pane label="用户管理" name="first">用户管理</tis-tab-pane>\n    <tis-tab-pane label="配置管理" name="second">配置管理</tis-tab-pane>\n    <tis-tab-pane label="角色管理" name="third">角色管理</tis-tab-pane>\n    <tis-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</tis-tab-pane>\n  </tis-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),t._m(2),e("p",[t._v("选项卡样式的标签页。")]),e("demo-block",[e("div",[e("p",[t._v("只需要设置 "),e("code",[t._v("type")]),t._v(" 属性为 "),e("code",[t._v("card")]),t._v(" 就可以使选项卡改变为标签风格。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-tabs v-model="activeName" type="card" @tab-click="handleClick">\n    <tis-tab-pane label="用户管理" name="first">用户管理</tis-tab-pane>\n    <tis-tab-pane label="配置管理" name="second">配置管理</tis-tab-pane>\n    <tis-tab-pane label="角色管理" name="third">角色管理</tis-tab-pane>\n    <tis-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</tis-tab-pane>\n  </tis-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),t._m(3),e("p",[t._v("卡片化的标签页。")]),e("demo-block",[e("div",[e("p",[t._v("将"),e("code",[t._v("type")]),t._v("设置为"),e("code",[t._v("border-card")]),t._v("。")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-tabs type="border-card">\n  <tis-tab-pane label="用户管理">用户管理</tis-tab-pane>\n  <tis-tab-pane label="配置管理">配置管理</tis-tab-pane>\n  <tis-tab-pane label="角色管理">角色管理</tis-tab-pane>\n  <tis-tab-pane label="定时任务补偿">定时任务补偿</tis-tab-pane>\n</tis-tabs>\n')])])])],2),t._m(4),e("p",[t._v("增减标签页按钮只能在选项卡样式的标签页下使用")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<tis-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <tis-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  </tis-tab-pane>\n</tis-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),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"tabs-biao-qian-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-biao-qian-ye"}},[this._v("¶")]),this._v(" Tabs 标签页")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xuan-xiang-qia-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xuan-xiang-qia-yang-shi"}},[this._v("¶")]),this._v(" 选项卡样式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"qia-pian-hua"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua"}},[this._v("¶")]),this._v(" 卡片化")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 动态增减标签页")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"tabs-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes"}},[this._v("¶")]),this._v(" Tabs Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值，选中选项卡的 name")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("第一个选项卡的 name")])]),e("tr",[e("td",[t._v("type")]),e("td",[t._v("风格类型")]),e("td",[t._v("string")]),e("td",[t._v("card/border-card")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("closable")]),e("td",[t._v("标签是否可关闭")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("addable")]),e("td",[t._v("标签是否可增加")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("editable")]),e("td",[t._v("标签是否同时可增加和关闭")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("tab-position")]),e("td",[t._v("选项卡所在位置")]),e("td",[t._v("string")]),e("td",[t._v("top/right/bottom/left")]),e("td",[t._v("top")])]),e("tr",[e("td",[t._v("stretch")]),e("td",[t._v("标签的宽度是否自撑开")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("before-leave")]),e("td",[t._v("切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。")]),e("td",[t._v("Function(activeName, oldActiveName)")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"tabs-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events"}},[this._v("¶")]),this._v(" Tabs Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("tab-click")]),e("td",[t._v("tab 被选中时触发")]),e("td",[t._v("被选中的标签 tab 实例")])]),e("tr",[e("td",[t._v("tab-remove")]),e("td",[t._v("点击 tab 移除按钮后触发")]),e("td",[t._v("被删除的标签的 name")])]),e("tr",[e("td",[t._v("tab-add")]),e("td",[t._v("点击 tabs 的新增按钮后触发")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("edit")]),e("td",[t._v("点击 tabs 的新增按钮或 tab 被关闭后触发")]),e("td",[t._v("(targetName, action)")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"tab-pane-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes"}},[this._v("¶")]),this._v(" Tab-pane Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("label")]),e("td",[t._v("选项卡标题")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("name")]),e("td",[t._v("与选项卡绑定值 value 对应的标识符，表示选项卡别名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'")])]),e("tr",[e("td",[t._v("closable")]),e("td",[t._v("标签是否可关闭")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("lazy")]),e("td",[t._v("标签是否延迟渲染")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])])])])}],!1,null,null,null);e.default=a.exports},1326:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("tis-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),this._v(" "),t("tis-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),this._v(" "),t("tis-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 t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,stripe:""}},[t("tis-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),this._v(" "),t("tis-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),this._v(" "),t("tis-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 t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,border:""}},[t("tis-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),this._v(" "),t("tis-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),this._v(" "),t("tis-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 t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,height:"250",border:""}},[t("tis-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),this._v(" "),t("tis-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),this._v(" "),t("tis-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-demo4":a({render:function(){var n=this,t=n.$createElement,a=n._self._c||t;return a("div",[[a("tis-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData,border:""}},[a("tis-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),n._v(" "),a("tis-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),n._v(" "),a("tis-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),n._v(" "),a("tis-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),n._v(" "),a("tis-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),n._v(" "),a("tis-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),n._v(" "),a("tis-table-column",{attrs:{fixed:"right",label:"操作",width:"100"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("tis-button",{attrs:{type:"text",size:"small"},on:{click:function(t){n.handleClick(e.row)}}},[n._v("查看")]),n._v(" "),a("tis-button",{attrs:{type:"text",size:"small"}},[n._v("编辑")])]}}])})],1)]],2)},staticRenderFns:[]},{methods:{handleClick:function(t){console.log(t)}},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-demo5":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,height:"250"}},[t("tis-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),this._v(" "),t("tis-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),this._v(" "),t("tis-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),this._v(" "),t("tis-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),this._v(" "),t("tis-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),this._v(" "),t("tis-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-demo6":a({render:function(){var n=this,t=n.$createElement,a=n._self._c||t;return a("div",[[a("tis-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData,"max-height":"250"}},[a("tis-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),n._v(" "),a("tis-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),n._v(" "),a("tis-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),n._v(" "),a("tis-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),n._v(" "),a("tis-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),n._v(" "),a("tis-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),n._v(" "),a("tis-table-column",{attrs:{fixed:"right",label:"操作",width:"120"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("tis-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(t){t.preventDefault(),n.deleteRow(e.$index,n.tableData)}}},[n._v("\n          移除\n        ")])]}}])})],1)]],2)},staticRenderFns:[]},{methods:{deleteRow:function(t,e){e.splice(t,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-demo7":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:e.tableData,"highlight-current-row":""},on:{"current-change":e.handleCurrentChange}},[t("tis-table-column",{attrs:{type:"index",width:"50"}}),e._v(" "),t("tis-table-column",{attrs:{property:"date",label:"日期",width:"120"}}),e._v(" "),t("tis-table-column",{attrs:{property:"name",label:"姓名",width:"120"}}),e._v(" "),t("tis-table-column",{attrs:{property:"address",label:"地址"}})],1),e._v(" "),t("div",{staticStyle:{"margin-top":"20px"}},[t("tis-button",{on:{click:function(t){e.setCurrent(e.tableData[1])}}},[e._v("选中第二行")]),e._v(" "),t("tis-button",{on:{click:function(t){e.setCurrent()}}},[e._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(t){this.$refs.singleTable.setCurrentRow(t)},handleCurrentChange:function(t){this.currentRow=t}}}),"element-demo8":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:e.tableData,"tooltip-effect":"dark"},on:{"selection-change":e.handleSelectionChange}},[t("tis-table-column",{attrs:{type:"selection",width:"55"}}),e._v(" "),t("tis-table-column",{attrs:{label:"日期",width:"120"},scopedSlots:e._u([{key:"default",fn:function(t){return[e._v(e._s(t.row.date))]}}])}),e._v(" "),t("tis-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),e._v(" "),t("tis-table-column",{attrs:{prop:"address",label:"地址","show-overflow-tooltip":""}})],1),e._v(" "),t("div",{staticStyle:{"margin-top":"20px"}},[t("tis-button",{on:{click:function(t){e.toggleSelection([e.tableData[1],e.tableData[2]])}}},[e._v("切换第二、第三行的选中状态")]),e._v(" "),t("tis-button",{on:{click:function(t){e.toggleSelection()}}},[e._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(t){var e=this;t?t.forEach(function(t){e.$refs.multipleTable.toggleRowSelection(t)}):this.$refs.multipleTable.clearSelection()},handleSelectionChange:function(t){this.multipleSelection=t}}}),"element-demo9":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,"default-sort":{prop:"date",order:"descending"}}},[t("tis-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),this._v(" "),t("tis-table-column",{attrs:{prop:"name",label:"姓名",sortable:"",width:"180"}}),this._v(" "),t("tis-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(t,e){return t.address}}}),"element-demo10":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("tis-button",{on:{click:e.resetDateFilter}},[e._v("清除日期过滤器")]),e._v(" "),n("tis-button",{on:{click:e.clearFilter}},[e._v("清除所有过滤器")]),e._v(" "),n("tis-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("tis-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":e.filterHandler}}),e._v(" "),n("tis-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),e._v(" "),n("tis-table-column",{attrs:{prop:"address",label:"地址",formatter:e.formatter}}),e._v(" "),n("tis-table-column",{attrs:{prop:"tag",label:"标签",width:"100",filters:[{text:"家",value:"家"},{text:"公司",value:"公司"}],"filter-method":e.filterTag,"filter-placement":"bottom-end"},scopedSlots:e._u([{key:"default",fn:function(t){return[n("tis-tag",{attrs:{type:"家"===t.row.tag?"primary":"success","disable-transitions":""}},[e._v(e._s(t.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(t,e){return t.address},filterTag:function(t,e){return e.tag===t},filterHandler:function(t,e,n){return e[n.property]===t}}}),"element-demo11":a({render:function(){var n=this,t=n.$createElement,a=n._self._c||t;return a("div",[[a("tis-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData}},[a("tis-table-column",{attrs:{label:"日期",width:"180"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("i",{staticClass:"el-icon-time"}),n._v(" "),a("span",{staticStyle:{"margin-left":"10px"}},[n._v(n._s(t.row.date))])]}}])}),n._v(" "),a("tis-table-column",{attrs:{label:"姓名",width:"180"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("tis-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[n._v("姓名: "+n._s(t.row.name))]),n._v(" "),a("p",[n._v("住址: "+n._s(t.row.address))]),n._v(" "),a("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[a("tis-tag",{attrs:{size:"medium"}},[n._v(n._s(t.row.name))])],1)])]}}])}),n._v(" "),a("tis-table-column",{attrs:{label:"操作"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("tis-button",{attrs:{size:"mini"},on:{click:function(t){n.handleEdit(e.$index,e.row)}}},[n._v("编辑")]),n._v(" "),a("tis-button",{attrs:{size:"mini",type:"danger"},on:{click:function(t){n.handleDelete(e.$index,e.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(t,e){console.log(t,e)},handleDelete:function(t,e){console.log(t,e)}}}),"element-demo12":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("tis-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData}},[n("tis-table-column",{attrs:{type:"expand"},scopedSlots:e._u([{key:"default",fn:function(t){return[n("tis-form",{staticClass:"demo-table-expand",attrs:{"label-position":"left",inline:""}},[n("tis-form-item",{attrs:{label:"商品名称"}},[n("span",[e._v(e._s(t.row.name))])]),e._v(" "),n("tis-form-item",{attrs:{label:"所属店铺"}},[n("span",[e._v(e._s(t.row.shop))])]),e._v(" "),n("tis-form-item",{attrs:{label:"商品 ID"}},[n("span",[e._v(e._s(t.row.id))])]),e._v(" "),n("tis-form-item",{attrs:{label:"店铺 ID"}},[n("span",[e._v(e._s(t.row.shopId))])]),e._v(" "),n("tis-form-item",{attrs:{label:"商品分类"}},[n("span",[e._v(e._s(t.row.category))])]),e._v(" "),n("tis-form-item",{attrs:{label:"店铺地址"}},[n("span",[e._v(e._s(t.row.address))])]),e._v(" "),n("tis-form-item",{attrs:{label:"商品描述"}},[n("span",[e._v(e._s(t.row.desc))])])],1)]}}])}),e._v(" "),n("tis-table-column",{attrs:{label:"商品 ID",prop:"id"}}),e._v(" "),n("tis-table-column",{attrs:{label:"商品名称",prop:"name"}}),e._v(" "),n("tis-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-demo13":a({render:function(){var n=this,t=n.$createElement,a=n._self._c||t;return a("div",[[a("tis-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData.filter(function(t){return!n.search||t.name.toLowerCase().includes(n.search.toLowerCase())})}},[a("tis-table-column",{attrs:{label:"Date",prop:"date"}}),n._v(" "),a("tis-table-column",{attrs:{label:"Name",prop:"name"}}),n._v(" "),a("tis-table-column",{attrs:{align:"right"},scopedSlots:n._u([{key:"header",fn:function(t){return[a("tis-input",{attrs:{size:"mini",placeholder:"输入关键字搜索"},model:{value:n.search,callback:function(t){n.search=t},expression:"search"}})]}},{key:"default",fn:function(e){return[a("tis-button",{attrs:{size:"mini"},on:{click:function(t){n.handleEdit(e.$index,e.row)}}},[n._v("Edit")]),n._v(" "),a("tis-button",{attrs:{size:"mini",type:"danger"},on:{click:function(t){n.handleDelete(e.$index,e.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(t,e){console.log(t,e)},handleDelete:function(t,e){console.log(t,e)}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。")]),t._m(1),e("p",[t._v("基础的表格展示用法。")]),e("demo-block",[e("div",[e("p",[t._v("当"),e("code",[t._v("el-table")]),t._v("元素中注入"),e("code",[t._v("data")]),t._v("对象数组后，在"),e("code",[t._v("el-table-column")]),t._v("中用"),e("code",[t._v("prop")]),t._v("属性来对应对象中的键名即可填入数据，用"),e("code",[t._v("label")]),t._v("属性来定义表格的列名。可以使用"),e("code",[t._v("width")]),t._v("属性来定义列宽。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("  <template>\n    <tis-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <tis-table-column\n        prop=\"date\"\n        label=\"日期\"\n        width=\"180\">\n      </tis-table-column>\n      <tis-table-column\n        prop=\"name\"\n        label=\"姓名\"\n        width=\"180\">\n      </tis-table-column>\n      <tis-table-column\n        prop=\"address\"\n        label=\"地址\">\n      </tis-table-column>\n    </tis-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),t._m(2),e("p",[t._v("使用带斑马纹的表格，可以更容易区分出不同行的数据。")]),e("demo-block",[e("div",[e("p",[e("code",[t._v("stripe")]),t._v("属性可以创建带斑马纹的表格。它接受一个"),e("code",[t._v("Boolean")]),t._v("，默认为"),e("code",[t._v("false")]),t._v("，设置为"),e("code",[t._v("true")]),t._v("即为启用。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <tis-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </tis-table-column>\n  </tis-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),t._m(3),e("demo-block",[e("div",[e("p",[t._v("默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用"),e("code",[t._v("border")]),t._v("属性，它接受一个"),e("code",[t._v("Boolean")]),t._v("，设置为"),e("code",[t._v("true")]),t._v("即可启用。")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <tis-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </tis-table-column>\n  </tis-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),t._m(4),e("p",[t._v("纵向内容过多时，可选择固定表头。")]),e("demo-block",[e("div",[e("p",[t._v("只要在"),e("code",[t._v("el-table")]),t._v("元素中定义了"),e("code",[t._v("height")]),t._v("属性，即可实现固定表头的表格，而不需要额外的代码。")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-table\n    :data=\"tableData\"\n    height=\"250\"\n    border\n    style=\"width: 100%\">\n    <tis-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </tis-table-column>\n  </tis-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),t._m(5),e("p",[t._v("横向内容过多时，可选择固定列。")]),e("demo-block",[e("div",[e("p",[t._v("固定列需要使用"),e("code",[t._v("fixed")]),t._v("属性，它接受 Boolean 值或者"),e("code",[t._v("left")]),e("code",[t._v("right")]),t._v("，表示左边固定还是右边固定。")])]),e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-table\n    :data="tableData"\n    border\n    style="width: 100%">\n    <tis-table-column\n      fixed\n      prop="date"\n      label="日期"\n      width="150">\n    </tis-table-column>\n    <tis-table-column\n      prop="name"\n      label="姓名"\n      width="120">\n    </tis-table-column>\n    <tis-table-column\n      prop="province"\n      label="省份"\n      width="120">\n    </tis-table-column>\n    <tis-table-column\n      prop="city"\n      label="市区"\n      width="120">\n    </tis-table-column>\n    <tis-table-column\n      prop="address"\n      label="地址"\n      width="300">\n    </tis-table-column>\n    <tis-table-column\n      prop="zip"\n      label="邮编"\n      width="120">\n    </tis-table-column>\n    <tis-table-column\n      fixed="right"\n      label="操作"\n      width="100">\n      <template slot-scope="scope">\n        <tis-button @click="handleClick(scope.row)" type="text" size="small">查看</tis-button>\n        <tis-button type="text" size="small">编辑</tis-button>\n      </template>\n    </tis-table-column>\n  </tis-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),t._m(6),e("p",[t._v("横纵内容过多时，可选择固定列和表头。")]),e("demo-block",[e("div",[e("p",[t._v("固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。")])]),e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <tis-table-column\n      fixed\n      prop=\"date\"\n      label=\"日期\"\n      width=\"150\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"province\"\n      label=\"省份\"\n      width=\"120\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"city\"\n      label=\"市区\"\n      width=\"120\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"address\"\n      label=\"地址\"\n      width=\"300\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"zip\"\n      label=\"邮编\"\n      width=\"120\">\n    </tis-table-column>\n  </tis-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),t._m(7),e("p",[t._v("当数据量动态变化时，可以为 Table 设置一个最大高度。")]),e("demo-block",[e("div",[e("p",[t._v("通过设置"),e("code",[t._v("max-height")]),t._v("属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。")])]),e("template",{slot:"source"},[e("element-demo6")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <tis-table-column\n      fixed\n      prop=\"date\"\n      label=\"日期\"\n      width=\"150\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"province\"\n      label=\"省份\"\n      width=\"120\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"city\"\n      label=\"市区\"\n      width=\"120\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"address\"\n      label=\"地址\"\n      width=\"300\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"zip\"\n      label=\"邮编\"\n      width=\"120\">\n    </tis-table-column>\n    <tis-table-column\n      fixed=\"right\"\n      label=\"操作\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <tis-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          移除\n        </tis-button>\n      </template>\n    </tis-table-column>\n  </tis-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),t._m(8),e("p",[t._v("选择单行数据时使用色块表示。")]),e("demo-block",[e("div",[e("p",[t._v("Table 组件提供了单选的支持，只需要配置"),e("code",[t._v("highlight-current-row")]),t._v("属性即可实现单选。之后由"),e("code",[t._v("current-change")]),t._v("事件来管理选中时触发的事件，它会传入"),e("code",[t._v("currentRow")]),t._v("，"),e("code",[t._v("oldCurrentRow")]),t._v("。如果需要显示索引，可以增加一列"),e("code",[t._v("el-table-column")]),t._v("，设置"),e("code",[t._v("type")]),t._v("属性为"),e("code",[t._v("index")]),t._v("即可显示从 1 开始的索引号。")])]),e("template",{slot:"source"},[e("element-demo7")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-table\n    ref="singleTable"\n    :data="tableData"\n    highlight-current-row\n    @current-change="handleCurrentChange"\n    style="width: 100%">\n    <tis-table-column\n      type="index"\n      width="50">\n    </tis-table-column>\n    <tis-table-column\n      property="date"\n      label="日期"\n      width="120">\n    </tis-table-column>\n    <tis-table-column\n      property="name"\n      label="姓名"\n      width="120">\n    </tis-table-column>\n    <tis-table-column\n      property="address"\n      label="地址">\n    </tis-table-column>\n  </tis-table>\n  <div style="margin-top: 20px">\n    <tis-button @click="setCurrent(tableData[1])">选中第二行</tis-button>\n    <tis-button @click="setCurrent()">取消选择</tis-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),t._m(9),e("p",[t._v("选择多行数据时使用 Checkbox。")]),e("demo-block",[e("div",[e("p",[t._v("实现多选非常简单: 手动添加一个"),e("code",[t._v("el-table-column")]),t._v("，设"),e("code",[t._v("type")]),t._v("属性为"),e("code",[t._v("selection")]),t._v("即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用"),e("code",[t._v("show-overflow-tooltip")]),t._v("属性，它接受一个"),e("code",[t._v("Boolean")]),t._v("，为"),e("code",[t._v("true")]),t._v("时多余的内容会在 hover 时以 tooltip 的形式显示出来。")])]),e("template",{slot:"source"},[e("element-demo8")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    tooltip-effect=\"dark\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <tis-table-column\n      type=\"selection\"\n      width=\"55\">\n    </tis-table-column>\n    <tis-table-column\n      label=\"日期\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </tis-table-column>\n    <tis-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"address\"\n      label=\"地址\"\n      show-overflow-tooltip>\n    </tis-table-column>\n  </tis-table>\n  <div style=\"margin-top: 20px\">\n    <tis-button @click=\"toggleSelection([tableData[1], tableData[2]])\">切换第二、第三行的选中状态</tis-button>\n    <tis-button @click=\"toggleSelection()\">取消选择</tis-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),t._m(10),e("p",[t._v("对表格进行排序，可快速查找或对比数据。")]),e("demo-block",[e("div",[e("p",[t._v("在列中设置"),e("code",[t._v("sortable")]),t._v("属性即可实现以该列为基准的排序，接受一个"),e("code",[t._v("Boolean")]),t._v("，默认为"),e("code",[t._v("false")]),t._v("。可以通过 Table 的"),e("code",[t._v("default-sort")]),t._v("属性设置默认的排序列和排序顺序。可以使用"),e("code",[t._v("sort-method")]),t._v("或者"),e("code",[t._v("sort-by")]),t._v("使用自定义的排序规则。如果需要后端排序，需将"),e("code",[t._v("sortable")]),t._v("设置为"),e("code",[t._v("custom")]),t._v("，同时在 Table 上监听"),e("code",[t._v("sort-change")]),t._v("事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了"),e("code",[t._v("formatter")]),t._v("属性，它用于格式化指定列的值，接受一个"),e("code",[t._v("Function")]),t._v("，会传入两个参数："),e("code",[t._v("row")]),t._v("和"),e("code",[t._v("column")]),t._v("，可以根据自己的需求进行处理。")])]),e("template",{slot:"source"},[e("element-demo9")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    >\n    <tis-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      sortable\n      width=\"180\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"address\"\n      label=\"地址\"\n      :formatter=\"formatter\">\n    </tis-table-column>\n  </tis-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),t._m(11),e("p",[t._v("对表格进行筛选，可快速查找到自己想看的数据。")]),e("demo-block",[e("div",[e("p",[t._v("在列中设置"),e("code",[t._v("filters")]),e("code",[t._v("filter-method")]),t._v("属性即可开启该列的筛选，filters 是一个数组，"),e("code",[t._v("filter-method")]),t._v("是一个方法，它用于决定某些数据是否显示，会传入三个参数："),e("code",[t._v("value")]),t._v(", "),e("code",[t._v("row")]),t._v(" 和 "),e("code",[t._v("column")]),t._v("。")])]),e("template",{slot:"source"},[e("element-demo10")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-button @click=\"resetDateFilter\">清除日期过滤器</tis-button>\n  <tis-button @click=\"clearFilter\">清除所有过滤器</tis-button>\n  <tis-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <tis-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    </tis-table-column>\n    <tis-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </tis-table-column>\n    <tis-table-column\n      prop=\"address\"\n      label=\"地址\"\n      :formatter=\"formatter\">\n    </tis-table-column>\n    <tis-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        <tis-tag\n          :type=\"scope.row.tag === '家' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</tis-tag>\n      </template>\n    </tis-table-column>\n  </tis-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),t._m(12),e("p",[t._v("自定义列的显示内容，可组合其他组件使用。")]),e("demo-block",[e("div",[e("p",[t._v("通过 "),e("code",[t._v("Scoped slot")]),t._v(" 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。")])]),e("template",{slot:"source"},[e("element-demo11")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-table\n    :data="tableData"\n    style="width: 100%">\n    <tis-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    </tis-table-column>\n    <tis-table-column\n      label="姓名"\n      width="180">\n      <template slot-scope="scope">\n        <tis-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            <tis-tag size="medium">{{ scope.row.name }}</tis-tag>\n          </div>\n        </tis-popover>\n      </template>\n    </tis-table-column>\n    <tis-table-column label="操作">\n      <template slot-scope="scope">\n        <tis-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">编辑</tis-button>\n        <tis-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">删除</tis-button>\n      </template>\n    </tis-table-column>\n  </tis-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),t._m(13),e("p",[t._v("当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。")]),e("demo-block",[e("div",[e("p",[t._v('通过设置 type="expand" 和 '),e("code",[t._v("Scoped slot")]),t._v(" 可以开启展开行功能，"),e("code",[t._v("el-table-column")]),t._v(" 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 "),e("code",[t._v("Scoped slot")]),t._v(" 相同。")])]),e("template",{slot:"source"},[e("element-demo12")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <tis-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <tis-form label-position=\"left\" inline class=\"demo-table-expand\">\n          <tis-form-item label=\"商品名称\">\n            <span>{{ props.row.name }}</span>\n          </tis-form-item>\n          <tis-form-item label=\"所属店铺\">\n            <span>{{ props.row.shop }}</span>\n          </tis-form-item>\n          <tis-form-item label=\"商品 ID\">\n            <span>{{ props.row.id }}</span>\n          </tis-form-item>\n          <tis-form-item label=\"店铺 ID\">\n            <span>{{ props.row.shopId }}</span>\n          </tis-form-item>\n          <tis-form-item label=\"商品分类\">\n            <span>{{ props.row.category }}</span>\n          </tis-form-item>\n          <tis-form-item label=\"店铺地址\">\n            <span>{{ props.row.address }}</span>\n          </tis-form-item>\n          <tis-form-item label=\"商品描述\">\n            <span>{{ props.row.desc }}</span>\n          </tis-form-item>\n        </tis-form>\n      </template>\n    </tis-table-column>\n    <tis-table-column\n      label=\"商品 ID\"\n      prop=\"id\">\n    </tis-table-column>\n    <tis-table-column\n      label=\"商品名称\"\n      prop=\"name\">\n    </tis-table-column>\n    <tis-table-column\n      label=\"描述\"\n      prop=\"desc\">\n    </tis-table-column>\n  </tis-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),t._m(14),e("p",[t._v("表头支持自定义。")]),e("demo-block",[e("div",[e("p",[t._v("通过设置 "),e("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"}},[t._v("Scoped slot")]),t._v(" 来自定义表头。")])]),e("template",{slot:"source"},[e("element-demo13")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-table\n    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"\n    style="width: 100%">\n    <tis-table-column\n      label="Date"\n      prop="date">\n    </tis-table-column>\n    <tis-table-column\n      label="Name"\n      prop="name">\n    </tis-table-column>\n    <tis-table-column\n      align="right">\n      <template slot="header" slot-scope="scope">\n        <tis-input\n          v-model="search"\n          size="mini"\n          placeholder="输入关键字搜索"/>\n      </template>\n      <template slot-scope="scope">\n        <tis-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Edit</tis-button>\n        <tis-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Delete</tis-button>\n      </template>\n    </tis-table-column>\n  </tis-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),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"table-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-biao-ge"}},[this._v("¶")]),this._v(" Table 表格")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-biao-ge"}},[this._v("¶")]),this._v(" 基础表格")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dai-ban-ma-wen-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ban-ma-wen-biao-ge"}},[this._v("¶")]),this._v(" 带斑马纹表格")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dai-bian-kuang-biao-ge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-bian-kuang-biao-ge"}},[this._v("¶")]),this._v(" 带边框表格")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"gu-ding-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-biao-tou"}},[this._v("¶")]),this._v(" 固定表头")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"gu-ding-lie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie"}},[this._v("¶")]),this._v(" 固定列")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"gu-ding-lie-he-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie-he-biao-tou"}},[this._v("¶")]),this._v(" 固定列和表头")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"liu-ti-gao-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#liu-ti-gao-du"}},[this._v("¶")]),this._v(" 流体高度")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dan-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan"}},[this._v("¶")]),this._v(" 单选")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan"}},[this._v("¶")]),this._v(" 多选")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"pai-xu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pai-xu"}},[this._v("¶")]),this._v(" 排序")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shai-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shai-xuan"}},[this._v("¶")]),this._v(" 筛选")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-lie-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-lie-mo-ban"}},[this._v("¶")]),this._v(" 自定义列模板")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhan-kai-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhan-kai-xing"}},[this._v("¶")]),this._v(" 展开行")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-biao-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-tou"}},[this._v("¶")]),this._v(" 自定义表头")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"table-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes"}},[this._v("¶")]),this._v(" Table Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("data")]),e("td",[t._v("显示的数据")]),e("td",[t._v("array")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("height")]),e("td",[t._v("Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。")]),e("td",[t._v("string/number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("max-height")]),e("td",[t._v("Table 的最大高度。合法的值为数字或者单位为 px 的高度。")]),e("td",[t._v("string/number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("stripe")]),e("td",[t._v("是否为斑马纹 table")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("border")]),e("td",[t._v("是否带有纵向边框")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("Table 的尺寸")]),e("td",[t._v("string")]),e("td",[t._v("medium / small / mini")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("fit")]),e("td",[t._v("列的宽度是否自撑开")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("show-header")]),e("td",[t._v("是否显示表头")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("highlight-current-row")]),e("td",[t._v("是否要高亮当前行")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("current-row-key")]),e("td",[t._v("当前行的 key，只写属性")]),e("td",[t._v("String,Number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("row-class-name")]),e("td",[t._v("行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。")]),e("td",[t._v("Function({row, rowIndex})/String")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("row-style")]),e("td",[t._v("行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。")]),e("td",[t._v("Function({row, rowIndex})/Object")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("cell-class-name")]),e("td",[t._v("单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。")]),e("td",[t._v("Function({row, column, rowIndex, columnIndex})/String")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("cell-style")]),e("td",[t._v("单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。")]),e("td",[t._v("Function({row, column, rowIndex, columnIndex})/Object")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("header-row-class-name")]),e("td",[t._v("表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。")]),e("td",[t._v("Function({row, rowIndex})/String")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("header-row-style")]),e("td",[t._v("表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。")]),e("td",[t._v("Function({row, rowIndex})/Object")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("header-cell-class-name")]),e("td",[t._v("表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。")]),e("td",[t._v("Function({row, column, rowIndex, columnIndex})/String")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("header-cell-style")]),e("td",[t._v("表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。")]),e("td",[t._v("Function({row, column, rowIndex, columnIndex})/Object")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("row-key")]),e("td",[t._v("行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问："),e("code",[t._v("user.info.id")]),t._v("，但不支持 "),e("code",[t._v("user.info[0].id")]),t._v("，此种情况请使用 "),e("code",[t._v("Function")]),t._v("。")]),e("td",[t._v("Function(row)/String")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("empty-text")]),e("td",[t._v("空数据时显示的文本内容，也可以通过 "),e("code",[t._v('slot="empty"')]),t._v(" 设置")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("暂无数据")])]),e("tr",[e("td",[t._v("default-expand-all")]),e("td",[t._v("是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效")]),e("td",[t._v("Boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("expand-row-keys")]),e("td",[t._v("可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。")]),e("td",[t._v("Array")]),e("td",[t._v("—")]),e("td")]),e("tr",[e("td",[t._v("default-sort")]),e("td",[t._v("默认的排序列的 prop 和顺序。它的"),e("code",[t._v("prop")]),t._v("属性指定默认的排序的列，"),e("code",[t._v("order")]),t._v("指定默认排序的顺序")]),e("td",[t._v("Object")]),e("td",[e("code",[t._v("order")]),t._v(": ascending, descending")]),e("td",[t._v("如果只指定了"),e("code",[t._v("prop")]),t._v(", 没有指定"),e("code",[t._v("order")]),t._v(", 则默认顺序是ascending")])]),e("tr",[e("td",[t._v("tooltip-effect")]),e("td",[t._v("tooltip "),e("code",[t._v("effect")]),t._v(" 属性")]),e("td",[t._v("String")]),e("td",[t._v("dark/light")]),e("td")]),e("tr",[e("td",[t._v("show-summary")]),e("td",[t._v("是否在表尾显示合计行")]),e("td",[t._v("Boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("sum-text")]),e("td",[t._v("合计行第一列的文本")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("合计")])]),e("tr",[e("td",[t._v("summary-method")]),e("td",[t._v("自定义的合计计算方法")]),e("td",[t._v("Function({ columns, data })")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("span-method")]),e("td",[t._v("合并行或列的计算方法")]),e("td",[t._v("Function({ row, column, rowIndex, columnIndex })")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("select-on-indeterminate")]),e("td",[t._v("在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行")]),e("td",[t._v("Boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("indent")]),e("td",[t._v("展示树形数据时，树节点的缩进")]),e("td",[t._v("Number")]),e("td",[t._v("—")]),e("td",[t._v("16")])]),e("tr",[e("td",[t._v("lazy")]),e("td",[t._v("是否懒加载子节点数据")]),e("td",[t._v("Boolean")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("load")]),e("td",[t._v("加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息")]),e("td",[t._v("Function(row, treeNode, resolve)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("tree-props")]),e("td",[t._v("渲染嵌套数据的配置选项")]),e("td",[t._v("Object")]),e("td",[t._v("—")]),e("td",[t._v("{ hasChildren: 'hasChildren', children: 'children' }")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"table-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-events"}},[this._v("¶")]),this._v(" Table Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("select")]),e("td",[t._v("当用户手动勾选数据行的 Checkbox 时触发的事件")]),e("td",[t._v("selection, row")])]),e("tr",[e("td",[t._v("select-all")]),e("td",[t._v("当用户手动勾选全选 Checkbox 时触发的事件")]),e("td",[t._v("selection")])]),e("tr",[e("td",[t._v("selection-change")]),e("td",[t._v("当选择项发生变化时会触发该事件")]),e("td",[t._v("selection")])]),e("tr",[e("td",[t._v("cell-mouse-enter")]),e("td",[t._v("当单元格 hover 进入时会触发该事件")]),e("td",[t._v("row, column, cell, event")])]),e("tr",[e("td",[t._v("cell-mouse-leave")]),e("td",[t._v("当单元格 hover 退出时会触发该事件")]),e("td",[t._v("row, column, cell, event")])]),e("tr",[e("td",[t._v("cell-click")]),e("td",[t._v("当某个单元格被点击时会触发该事件")]),e("td",[t._v("row, column, cell, event")])]),e("tr",[e("td",[t._v("cell-dblclick")]),e("td",[t._v("当某个单元格被双击击时会触发该事件")]),e("td",[t._v("row, column, cell, event")])]),e("tr",[e("td",[t._v("row-click")]),e("td",[t._v("当某一行被点击时会触发该事件")]),e("td",[t._v("row, column, event")])]),e("tr",[e("td",[t._v("row-contextmenu")]),e("td",[t._v("当某一行被鼠标右键点击时会触发该事件")]),e("td",[t._v("row, column, event")])]),e("tr",[e("td",[t._v("row-dblclick")]),e("td",[t._v("当某一行被双击时会触发该事件")]),e("td",[t._v("row, column, event")])]),e("tr",[e("td",[t._v("header-click")]),e("td",[t._v("当某一列的表头被点击时会触发该事件")]),e("td",[t._v("column, event")])]),e("tr",[e("td",[t._v("header-contextmenu")]),e("td",[t._v("当某一列的表头被鼠标右键点击时触发该事件")]),e("td",[t._v("column, event")])]),e("tr",[e("td",[t._v("sort-change")]),e("td",[t._v("当表格的排序条件发生变化的时候会触发该事件")]),e("td",[t._v("{ column, prop, order }")])]),e("tr",[e("td",[t._v("filter-change")]),e("td",[t._v("当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。")]),e("td",[t._v("filters")])]),e("tr",[e("td",[t._v("current-change")]),e("td",[t._v("当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性")]),e("td",[t._v("currentRow, oldCurrentRow")])]),e("tr",[e("td",[t._v("header-dragend")]),e("td",[t._v("当拖动表头改变了列的宽度的时候会触发该事件")]),e("td",[t._v("newWidth, oldWidth, column, event")])]),e("tr",[e("td",[t._v("expand-change")]),e("td",[t._v("当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）")]),e("td",[t._v("row, (expandedRows | expanded)")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"table-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-methods"}},[this._v("¶")]),this._v(" Table Methods")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("clearSelection")]),e("td",[t._v("用于多选表格，清空用户的选择")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("toggleRowSelection")]),e("td",[t._v("用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）")]),e("td",[t._v("row, selected")])]),e("tr",[e("td",[t._v("toggleAllSelection")]),e("td",[t._v("用于多选表格，切换所有行的选中状态")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("toggleRowExpansion")]),e("td",[t._v("用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）")]),e("td",[t._v("row, expanded")])]),e("tr",[e("td",[t._v("setCurrentRow")]),e("td",[t._v("用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。")]),e("td",[t._v("row")])]),e("tr",[e("td",[t._v("clearSort")]),e("td",[t._v("用于清空排序条件，数据会恢复成未排序的状态")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("clearFilter")]),e("td",[t._v("不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件")]),e("td",[t._v("columnKey")])]),e("tr",[e("td",[t._v("doLayout")]),e("td",[t._v("对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("sort")]),e("td",[t._v("手动对 Table 进行排序。参数"),e("code",[t._v("prop")]),t._v("属性指定排序列，"),e("code",[t._v("order")]),t._v("指定排序顺序。")]),e("td",[t._v("prop: string, order: string")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"table-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-slot"}},[this._v("¶")]),this._v(" Table Slot")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"table-column-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes"}},[this._v("¶")]),this._v(" Table-column Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("type")]),e("td",[t._v("对应列的类型。如果设置了 "),e("code",[t._v("selection")]),t._v(" 则显示多选框；如果设置了 "),e("code",[t._v("index")]),t._v(" 则显示该行的索引（从 1 开始计算）；如果设置了 "),e("code",[t._v("expand")]),t._v(" 则显示为一个可展开的按钮")]),e("td",[t._v("string")]),e("td",[t._v("selection/index/expand")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("index")]),e("td",[t._v("如果设置了 "),e("code",[t._v("type=index")]),t._v("，可以通过传递 "),e("code",[t._v("index")]),t._v(" 属性来自定义索引")]),e("td",[t._v("number, Function(index)")]),e("td",[t._v("-")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("column-key")]),e("td",[t._v("column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("显示的标题")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("prop")]),e("td",[t._v("对应列内容的字段名，也可以使用 property 属性")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("width")]),e("td",[t._v("对应列的宽度")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("min-width")]),e("td",[t._v("对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("fixed")]),e("td",[t._v("列是否固定在左侧或者右侧，true 表示固定在左侧")]),e("td",[t._v("string, boolean")]),e("td",[t._v("true, left, right")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("render-header")]),e("td",[t._v("列标题 Label 区域渲染使用的 Function")]),e("td",[t._v("Function(h, { column, $index })")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("sortable")]),e("td",[t._v("对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件")]),e("td",[t._v("boolean, string")]),e("td",[t._v("true, false, 'custom'")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("sort-method")]),e("td",[t._v("对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致")]),e("td",[t._v("Function(a, b)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("sort-by")]),e("td",[t._v("指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推")]),e("td",[t._v("String/Array/Function(row, index)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("sort-orders")]),e("td",[t._v("数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序")]),e("td",[t._v("array")]),e("td",[t._v("数组中的元素需为以下三者之一："),e("code",[t._v("ascending")]),t._v(" 表示升序，"),e("code",[t._v("descending")]),t._v(" 表示降序，"),e("code",[t._v("null")]),t._v(" 表示还原为原始顺序")]),e("td",[t._v("['ascending', 'descending', null]")])]),e("tr",[e("td",[t._v("resizable")]),e("td",[t._v("对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("formatter")]),e("td",[t._v("用来格式化内容")]),e("td",[t._v("Function(row, column, cellValue, index)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("show-overflow-tooltip")]),e("td",[t._v("当内容过长被隐藏时显示 tooltip")]),e("td",[t._v("Boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("align")]),e("td",[t._v("对齐方式")]),e("td",[t._v("String")]),e("td",[t._v("left/center/right")]),e("td",[t._v("left")])]),e("tr",[e("td",[t._v("header-align")]),e("td",[t._v("表头对齐方式，若不设置该项，则使用表格的对齐方式")]),e("td",[t._v("String")]),e("td",[t._v("left/center/right")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("class-name")]),e("td",[t._v("列的 className")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("label-class-name")]),e("td",[t._v("当前列标题的自定义类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("selectable")]),e("td",[t._v("仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选")]),e("td",[t._v("Function(row, index)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("reserve-selection")]),e("td",[t._v("仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 "),e("code",[t._v("row-key")]),t._v("）")]),e("td",[t._v("Boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("filters")]),e("td",[t._v("数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。")]),e("td",[t._v("Array[{ text, value }]")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("filter-placement")]),e("td",[t._v("过滤弹出框的定位")]),e("td",[t._v("String")]),e("td",[t._v("与 Tooltip 的 "),e("code",[t._v("placement")]),t._v(" 属性相同")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("filter-multiple")]),e("td",[t._v("数据过滤的选项是否多选")]),e("td",[t._v("Boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("filter-method")]),e("td",[t._v("数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。")]),e("td",[t._v("Function(value, row, column)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("filtered-value")]),e("td",[t._v("选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。")]),e("td",[t._v("Array")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"table-column-scoped-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-column-scoped-slot"}},[this._v("¶")]),this._v(" Table-column Scoped Slot")])},function(){var t=this.$createElement,t=this._self._c||t;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);e.default=a.exports},1327:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-tree-select",{attrs:{items:e.items,"active-id":e.activeId,"main-active-index":e.activeIndex},on:{"update:activeId":function(t){e.activeId=t},"update:mainActiveIndex":function(t){e.activeIndex=t}}})],1)},staticRenderFns:[]},{data:function(){return{items:[{text:"所有城市",badge:3,dot:!0,className:"my-class",children:[{text:"温州",id:1},{text:"杭州",id:2}]}]}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("m-tree-select",{attrs:{items:e.items,"active-id":e.activeIds,"main-active-index":e.activeIndex},on:{"update:activeId":function(t){e.activeIds=t},"update:mainActiveIndex":function(t){e.activeIndex=t}}})],1)},staticRenderFns:[]},{data:function(){return{items:items,activeIds:[1,2],activeIndex:0}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),t._m(2),t._m(3),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<m-tree-select\n  :items=\"items\"\n  :active-id.sync=\"activeId\"\n  :main-active-index.sync=\"activeIndex\"\n/>\n\n<script>\nexport default {\n  data() {\n    return {\n      items:[\n        {\n          // 导航名称\n          text: '所有城市',\n          // \b导航名称右上角徽标，2.5.6 版本开始支持\n          badge: 3,\n          // 是否在导航名称右上角显示小红点\n          dot: true,\n          // 导航节点额外类名\n          className: 'my-class',\n          // 该导航下所有的可选项\n          children: [\n            {\n              // 名称\n              text: '温州',\n              // id，作为匹配选中状态的标识符\n              id: 1\n            },\n            {\n              text: '杭州',\n              id: 2,\n            },\n          ],\n        },\n      ]\n    };\n  },\n};\n<\/script>\n")])])])],2),t._m(4),t._m(5),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<m-tree-select\n  :items="items"\n  :active-id.sync="activeIds"\n  :main-active-index.sync="activeIndex"\n/>\n\n<script>\nexport default {\n  data() {\n    return {\n      items,\n      activeIds: [1, 2],\n      activeIndex: 0,\n    };\n  },\n};\n<\/script>\n')])])])],2),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"treeselect-fen-lei-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#treeselect-fen-lei-xuan-ze"}},[this._v("¶")]),this._v(" TreeSelect 分类选择")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"dai-ma-yan-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-ma-yan-shi"}},[this._v("¶")]),this._v(" 代码演示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dan-xuan-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan-mo-shi"}},[this._v("¶")]),this._v(" 单选模式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[t("code",[this._v("item")]),this._v(" 为分类显示所需的数据，数据格式见下方示例。"),t("code",[this._v("main-active-index")]),this._v(" 表示左侧高亮选项的索引，"),t("code",[this._v("active-id")]),this._v(" 表示右侧高亮选项的 id。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"duo-xuan-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan-mo-shi"}},[this._v("¶")]),this._v(" 多选模式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[t("code",[this._v("active-id")]),this._v(" 为数组格式时，可以选中多个右侧选项。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"api"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("¶")]),this._v(" Props")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("items")]),e("td",[t._v("分类显示所需的数据")]),e("td",[e("em",[t._v("Item[]")])]),e("td",[e("code",[t._v("[]")])])]),e("tr",[e("td",[t._v("height")]),e("td",[t._v("高度，默认单位为"),e("code",[t._v("px")])]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("300")])])]),e("tr",[e("td",[t._v("main-active-index")]),e("td",[t._v("左侧选中项的索引")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("0")])])]),e("tr",[e("td",[t._v("active-id")]),e("td",[t._v("右侧选中项的 id，支持传入数组")]),e("td",[e("em",[t._v("number | string |"),e("br"),t._v("(number | string)[]")])]),e("td",[e("code",[t._v("0")])])]),e("tr",[e("td",[t._v("max")]),e("td",[t._v("右侧项最大选中个数")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("Infinity")])])]),e("tr",[e("td",[t._v("selected-icon "),e("code",[t._v("v2.9.0")])]),e("td",[t._v("自定义右侧栏选中状态的图标")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("success")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("click-nav")]),e("td",[t._v("点击左侧导航时触发")]),e("td",[t._v("index：被点击的导航的索引")])]),e("tr",[e("td",[t._v("click-item")]),e("td",[t._v("点击右侧选择项时触发")]),e("td",[t._v("data: 该点击项的数据")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this.$createElement,t=this._self._c||t;return t("table",[t("thead",[t("tr",[t("th",[this._v("名称")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("content")]),t("td",[this._v("自定义右侧区域内容")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"item-shu-ju-jie-gou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#item-shu-ju-jie-gou"}},[this._v("¶")]),this._v(" Item 数据结构")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[t("code",[this._v("items")]),this._v(" 整体为一个数组，数组内包含一系列描述分类的对象，每个分类里，"),t("code",[this._v("text")]),this._v("表示当前分类的名称，"),t("code",[this._v("children")]),this._v("表示分类里的可选项。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yang-shi-bian-liang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[this._v("¶")]),this._v(" 样式变量")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),t("a",{attrs:{href:"#/zh-CN/theme"}},[this._v("主题定制")]),this._v("。")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@tree-select-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@tree-select-nav-background-color")]),e("td",[e("code",[t._v("@background-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@tree-select-content-background-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@tree-select-nav-item-padding")]),e("td",[e("code",[t._v("14px @padding-sm")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@tree-select-item-height")]),e("td",[e("code",[t._v("48px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@tree-select-item-active-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@tree-select-item-disabled-color")]),e("td",[e("code",[t._v("@gray-5")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@tree-select-item-selected-size")]),e("td",[e("code",[t._v("16px")])]),e("td",[t._v("-")])])])])}],!1,null,null,null);e.default=a.exports},1329:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:!0}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("表示两种相互对立的状态间的切换，多用于触发「开/关」。")]),t._m(1),e("demo-block",[e("div",[e("p",[t._v("绑定"),e("code",[t._v("v-model")]),t._v("到一个"),e("code",[t._v("Boolean")]),t._v("类型的变量。可以使用"),e("code",[t._v("active-color")]),t._v("属性与"),e("code",[t._v("inactive-color")]),t._v("属性来设置开关的背景色。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-switch\n  v-model="value"\n  active-color="#13ce66"\n  inactive-color="#ff4949">\n</tis-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),t._m(2),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"switch-kai-guan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch-kai-guan"}},[this._v("¶")]),this._v(" Switch 开关")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值")]),e("td",[t._v("boolean / string / number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("width")]),e("td",[t._v("switch 的宽度（像素）")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("40")])]),e("tr",[e("td",[t._v("active-icon-class")]),e("td",[t._v("switch 打开时所显示图标的类名，设置此项会忽略 "),e("code",[t._v("active-text")])]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("inactive-icon-class")]),e("td",[t._v("switch 关闭时所显示图标的类名，设置此项会忽略 "),e("code",[t._v("inactive-text")])]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("active-text")]),e("td",[t._v("switch 打开时的文字描述")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("inactive-text")]),e("td",[t._v("switch 关闭时的文字描述")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("active-value")]),e("td",[t._v("switch 打开时的值")]),e("td",[t._v("boolean / string / number")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("inactive-value")]),e("td",[t._v("switch 关闭时的值")]),e("td",[t._v("boolean / string / number")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("active-color")]),e("td",[t._v("switch 打开时的背景色")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("#409EFF")])]),e("tr",[e("td",[t._v("inactive-color")]),e("td",[t._v("switch 关闭时的背景色")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("#C0CCDA")])]),e("tr",[e("td",[t._v("name")]),e("td",[t._v("switch 对应的 name 属性")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("validate-event")]),e("td",[t._v("改变 switch 状态时是否触发表单的校验")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("true")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[this._v("¶")]),this._v(" Methods")])},function(){var t=this.$createElement,t=this._self._c||t;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);e.default=a.exports},1332:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-steps",{attrs:{active:1,simple:""}},[t("tis-step",{attrs:{title:"步骤 1",icon:"el-icon-edit"}}),this._v(" "),t("tis-step",{attrs:{title:"步骤 2",icon:"el-icon-upload"}}),this._v(" "),t("tis-step",{attrs:{title:"步骤 3",icon:"el-icon-picture"}})],1),this._v(" "),t("tis-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[t("tis-step",{attrs:{title:"步骤 1"}}),this._v(" "),t("tis-step",{attrs:{title:"步骤 2"}}),this._v(" "),t("tis-step",{attrs:{title:"步骤 3"}})],1)],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。")]),t._m(1),t._m(2),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('\n<tis-steps :active="1" simple>\n  <tis-step title="步骤 1" icon="el-icon-edit"></tis-step>\n  <tis-step title="步骤 2" icon="el-icon-upload"></tis-step>\n  <tis-step title="步骤 3" icon="el-icon-picture"></tis-step>\n</tis-steps>\n\n<tis-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n  <tis-step title="步骤 1" ></tis-step>\n  <tis-step title="步骤 2" ></tis-step>\n  <tis-step title="步骤 3" ></tis-step>\n</tis-steps>\n')])])])],2),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"steps-bu-zou-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-bu-zou-tiao"}},[this._v("¶")]),this._v(" Steps 步骤条")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 简洁风格的步骤条")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("p",[t._v("设置 "),e("code",[t._v("simple")]),t._v(" 可应用简洁风格，该条件下 "),e("code",[t._v("align-center")]),t._v(" / "),e("code",[t._v("description")]),t._v(" / "),e("code",[t._v("direction")]),t._v(" / "),e("code",[t._v("space")]),t._v(" 都将失效。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"steps-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes"}},[this._v("¶")]),this._v(" Steps Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("space")]),e("td",[t._v("每个 step 的间距，不填写将自适应间距。支持百分比。")]),e("td",[t._v("number / string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("direction")]),e("td",[t._v("显示方向")]),e("td",[t._v("string")]),e("td",[t._v("vertical/horizontal")]),e("td",[t._v("horizontal")])]),e("tr",[e("td",[t._v("active")]),e("td",[t._v("设置当前激活步骤")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("process-status")]),e("td",[t._v("设置当前步骤的状态")]),e("td",[t._v("string")]),e("td",[t._v("wait / process / finish / error / success")]),e("td",[t._v("process")])]),e("tr",[e("td",[t._v("finish-status")]),e("td",[t._v("设置结束步骤的状态")]),e("td",[t._v("string")]),e("td",[t._v("wait / process / finish / error / success")]),e("td",[t._v("finish")])]),e("tr",[e("td",[t._v("align-center")]),e("td",[t._v("进行居中对齐")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("simple")]),e("td",[t._v("是否应用简洁风格")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("false")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"step-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes"}},[this._v("¶")]),this._v(" Step Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("title")]),e("td",[t._v("标题")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("description")]),e("td",[t._v("描述性文字")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("icon")]),e("td",[t._v("图标")]),e("td",[t._v("传入 icon 的 class 全名来自定义 icon，也支持 slot 方式写入")]),e("td",[t._v("string")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("status")]),e("td",[t._v("设置当前步骤的状态，不设置则根据 steps 确定状态")]),e("td",[t._v("wait / process / finish / error / success")]),e("td",[t._v("-")]),e("td")])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"step-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-slot"}},[this._v("¶")]),this._v(" Step Slot")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("name")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("icon")]),e("td",[t._v("自定义图标")])]),e("tr",[e("td",[t._v("title")]),e("td",[t._v("自定义标题")])]),e("tr",[e("td",[t._v("description")]),e("td",[t._v("自定义描述性文字")])])])])}],!1,null,null,null);e.default=a.exports},1333:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-ring",{attrs:{data:this.chartData}})]],2)},staticRenderFns:[]},{data:function(){return{chartData:{columns:["日期","访问用户"],rows:[{"日期":"1/1","访问用户":1393},{"日期":"1/2","访问用户":3530},{"日期":"1/3","访问用户":2923},{"日期":"1/4","访问用户":1723},{"日期":"1/5","访问用户":3792},{"日期":"1/6","访问用户":4593}]}}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this.$createElement,t=this._self._c||t;return t("section",{staticClass:"content element-doc"},[this._m(0),this._m(1),t("demo-block",[t("template",{slot:"source"},[t("element-demo0")],1),t("template",{slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"html"}},[this._v("<template>\n  <ve-ring :data=\"chartData\"></ve-ring>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['日期', '访问用户'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393 },\n            { '日期': '1/2', '访问用户': 3530 },\n            { '日期': '1/3', '访问用户': 2923 },\n            { '日期': '1/4', '访问用户': 1723 },\n            { '日期': '1/5', '访问用户': 3792 },\n            { '日期': '1/6', '访问用户': 4593 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),this._m(2),this._m(3)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"huan-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#huan-tu"}},[this._v("¶")]),this._v(" 环图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("string")]),e("td",[t._v("默认columns第一项为维度")])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("string")]),e("td",[t._v("默认columns第二项为指标")])]),e("tr",[e("td",[t._v("dataType")]),e("td",[t._v("数据类型")]),e("td",[t._v("string")]),e("td",[t._v("可选值: KMB, normal, percent")])]),e("tr",[e("td",[t._v("legendLimit")]),e("td",[t._v("legend显示数量限制")]),e("td",[t._v("number")]),e("td",[t._v("legend数量过多会导致环图样式错误，限制legend最大值并且当超过此值时，隐藏legend可以解决这个问题")])]),e("tr",[e("td",[t._v("selectedMode")]),e("td",[t._v("选中模式")]),e("td",[t._v("string")]),e("td",[t._v("可选值：single, multiple，默认为false")])]),e("tr",[e("td",[t._v("hoverAnimation")]),e("td",[t._v("是否开启 hover 在扇区上的放大动画效果")]),e("td",[t._v("boolean")]),e("td",[t._v("默认值为true")])]),e("tr",[e("td",[t._v("radius")]),e("td",[t._v("环图外半径与内半径")]),e("td",[t._v("array")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("offsetY")]),e("td",[t._v("纵向偏移量")]),e("td",[t._v("number")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("digit")]),e("td",[t._v("设置数据类型为percent时保留的位数")]),e("td",[t._v("number")]),e("td",[t._v("默认为2")])]),e("tr",[e("td",[t._v("roseType")]),e("td",[t._v("显示为南丁格尔玫瑰图")]),e("td",[t._v("string")]),e("td",[t._v("默认不展示为南丁格尔玫瑰图，可设置为"),e("code",[t._v("'radius', 'area'")])])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("环图图形上的文本标签")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-pie.label"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("labelLine")]),e("td",[t._v("标签的视觉引导线样式")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-pie.labelLine"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("itemStyle")]),e("td",[t._v("图形样式")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-pie.itemStyle"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("limitShowNum")]),e("td",[t._v("设置超过此数字时使用‘其他’代替")]),e("td",[t._v("number")]),e("td",[t._v("此时数据会按照由大到小顺序显示")])])])])}],!1,null,null,null);e.default=a.exports},1334:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-menu",{staticClass:"el-menu-demo",attrs:{"default-active":t.activeIndex,mode:"horizontal"},on:{select:t.handleSelect}},[e("tis-menu-item",{attrs:{index:"1"}},[t._v("处理中心")]),t._v(" "),e("tis-submenu",{attrs:{index:"2"}},[e("template",{slot:"title"},[t._v("我的工作台")]),t._v(" "),e("tis-menu-item",{attrs:{index:"2-1"}},[t._v("选项1")]),t._v(" "),e("tis-menu-item",{attrs:{index:"2-2"}},[t._v("选项2")]),t._v(" "),e("tis-menu-item",{attrs:{index:"2-3"}},[t._v("选项3")]),t._v(" "),e("tis-submenu",{attrs:{index:"2-4"}},[e("template",{slot:"title"},[t._v("选项4")]),t._v(" "),e("tis-menu-item",{attrs:{index:"2-4-1"}},[t._v("选项1")]),t._v(" "),e("tis-menu-item",{attrs:{index:"2-4-2"}},[t._v("选项2")]),t._v(" "),e("tis-menu-item",{attrs:{index:"2-4-3"}},[t._v("选项3")])],2)],2),t._v(" "),e("tis-menu-item",{attrs:{index:"3",disabled:""}},[t._v("消息中心")]),t._v(" "),e("tis-menu-item",{attrs:{index:"4"}},[e("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[t._v("订单管理")])])],1),t._v(" "),e("div",{staticClass:"line"}),t._v(" "),e("tis-menu",{staticClass:"el-menu-demo",attrs:{"default-active":t.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:t.handleSelect}},[e("tis-menu-item",{attrs:{index:"1"}},[t._v("处理中心")]),t._v(" "),e("tis-submenu",{attrs:{index:"2"}},[e("template",{slot:"title"},[t._v("我的工作台")]),t._v(" "),e("tis-menu-item",{attrs:{index:"2-1"}},[t._v("选项1")]),t._v(" "),e("tis-menu-item",{attrs:{index:"2-2"}},[t._v("选项2")]),t._v(" "),e("tis-menu-item",{attrs:{index:"2-3"}},[t._v("选项3")]),t._v(" "),e("tis-submenu",{attrs:{index:"2-4"}},[e("template",{slot:"title"},[t._v("选项4")]),t._v(" "),e("tis-menu-item",{attrs:{index:"2-4-1"}},[t._v("选项1")]),t._v(" "),e("tis-menu-item",{attrs:{index:"2-4-2"}},[t._v("选项2")]),t._v(" "),e("tis-menu-item",{attrs:{index:"2-4-3"}},[t._v("选项3")])],2)],2),t._v(" "),e("tis-menu-item",{attrs:{index:"3",disabled:""}},[t._v("消息中心")]),t._v(" "),e("tis-menu-item",{attrs:{index:"4"}},[e("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[t._v("订单管理")])])],1)],1)},staticRenderFns:[]},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(t,e){console.log(t,e)}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-row",{staticClass:"tac"},[e("tis-col",{attrs:{span:12}},[e("h5",[t._v("默认颜色")]),t._v(" "),e("tis-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:t.handleOpen,close:t.handleClose}},[e("tis-submenu",{attrs:{index:"1"}},[e("template",{slot:"title"},[e("i",{staticClass:"el-icon-location"}),t._v(" "),e("span",[t._v("导航一")])]),t._v(" "),e("tis-menu-item-group",[e("template",{slot:"title"},[t._v("分组一")]),t._v(" "),e("tis-menu-item",{attrs:{index:"1-1"}},[t._v("选项1")]),t._v(" "),e("tis-menu-item",{attrs:{index:"1-2"}},[t._v("选项2")])],2),t._v(" "),e("tis-menu-item-group",{attrs:{title:"分组2"}},[e("tis-menu-item",{attrs:{index:"1-3"}},[t._v("选项3")])],1),t._v(" "),e("tis-submenu",{attrs:{index:"1-4"}},[e("template",{slot:"title"},[t._v("选项4")]),t._v(" "),e("tis-menu-item",{attrs:{index:"1-4-1"}},[t._v("选项1")])],2)],2),t._v(" "),e("tis-menu-item",{attrs:{index:"2"}},[e("i",{staticClass:"el-icon-menu"}),t._v(" "),e("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航二")])]),t._v(" "),e("tis-menu-item",{attrs:{index:"3",disabled:""}},[e("i",{staticClass:"el-icon-document"}),t._v(" "),e("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航三")])]),t._v(" "),e("tis-menu-item",{attrs:{index:"4"}},[e("i",{staticClass:"el-icon-setting"}),t._v(" "),e("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航四")])])],1)],1),t._v(" "),e("tis-col",{attrs:{span:12}},[e("h5",[t._v("自定义颜色")]),t._v(" "),e("tis-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:t.handleOpen,close:t.handleClose}},[e("tis-submenu",{attrs:{index:"1"}},[e("template",{slot:"title"},[e("i",{staticClass:"el-icon-location"}),t._v(" "),e("span",[t._v("导航一")])]),t._v(" "),e("tis-menu-item-group",[e("template",{slot:"title"},[t._v("分组一")]),t._v(" "),e("tis-menu-item",{attrs:{index:"1-1"}},[t._v("选项1")]),t._v(" "),e("tis-menu-item",{attrs:{index:"1-2"}},[t._v("选项2")])],2),t._v(" "),e("tis-menu-item-group",{attrs:{title:"分组2"}},[e("tis-menu-item",{attrs:{index:"1-3"}},[t._v("选项3")])],1),t._v(" "),e("tis-submenu",{attrs:{index:"1-4"}},[e("template",{slot:"title"},[t._v("选项4")]),t._v(" "),e("tis-menu-item",{attrs:{index:"1-4-1"}},[t._v("选项1")])],2)],2),t._v(" "),e("tis-menu-item",{attrs:{index:"2"}},[e("i",{staticClass:"el-icon-menu"}),t._v(" "),e("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航二")])]),t._v(" "),e("tis-menu-item",{attrs:{index:"3",disabled:""}},[e("i",{staticClass:"el-icon-document"}),t._v(" "),e("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航三")])]),t._v(" "),e("tis-menu-item",{attrs:{index:"4"}},[e("i",{staticClass:"el-icon-setting"}),t._v(" "),e("span",{attrs:{slot:"title"},slot:"title"},[t._v("导航四")])])],1)],1)],1)],1)},staticRenderFns:[]},{methods:{handleOpen:function(t,e){console.log(t,e)},handleClose:function(t,e){console.log(t,e)}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:e.isCollapse,callback:function(t){e.isCollapse=t},expression:"isCollapse"}},[t("tis-radio-button",{attrs:{label:!1}},[e._v("展开")]),e._v(" "),t("tis-radio-button",{attrs:{label:!0}},[e._v("收起")])],1),e._v(" "),t("tis-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"1-4-1",collapse:e.isCollapse},on:{open:e.handleOpen,close:e.handleClose}},[t("tis-submenu",{attrs:{index:"1"}},[t("template",{slot:"title"},[t("i",{staticClass:"el-icon-location"}),e._v(" "),t("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航一")])]),e._v(" "),t("tis-menu-item-group",[t("span",{attrs:{slot:"title"},slot:"title"},[e._v("分组一")]),e._v(" "),t("tis-menu-item",{attrs:{index:"1-1"}},[e._v("选项1")]),e._v(" "),t("tis-menu-item",{attrs:{index:"1-2"}},[e._v("选项2")])],1),e._v(" "),t("tis-menu-item-group",{attrs:{title:"分组2"}},[t("tis-menu-item",{attrs:{index:"1-3"}},[e._v("选项3")])],1),e._v(" "),t("tis-submenu",{attrs:{index:"1-4"}},[t("span",{attrs:{slot:"title"},slot:"title"},[e._v("选项4")]),e._v(" "),t("tis-menu-item",{attrs:{index:"1-4-1"}},[e._v("选项1")])],1)],2),e._v(" "),t("tis-menu-item",{attrs:{index:"2"}},[t("i",{staticClass:"el-icon-menu"}),e._v(" "),t("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航二")])]),e._v(" "),t("tis-menu-item",{attrs:{index:"3",disabled:""}},[t("i",{staticClass:"el-icon-document"}),e._v(" "),t("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航三")])]),e._v(" "),t("tis-menu-item",{attrs:{index:"4"}},[t("i",{staticClass:"el-icon-setting"}),e._v(" "),t("span",{attrs:{slot:"title"},slot:"title"},[e._v("导航四")])])],1)],1)},staticRenderFns:[]},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(t,e){console.log(t,e)},handleClose:function(t,e){console.log(t,e)}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("为网站提供导航功能的菜单。")]),t._m(1),e("p",[t._v("适用广泛的基础用法。")]),e("demo-block",[e("div",[e("p",[t._v("导航菜单默认为垂直模式，通过"),e("code",[t._v("mode")]),t._v("属性可以使导航菜单变更为水平模式。另外，在菜单中通过"),e("code",[t._v("submenu")]),t._v("组件可以生成二级菜单。Menu 还提供了"),e("code",[t._v("background-color")]),t._v("、"),e("code",[t._v("text-color")]),t._v("和"),e("code",[t._v("active-text-color")]),t._v("，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n  <tis-menu-item index="1">处理中心</tis-menu-item>\n  <tis-submenu index="2">\n    <template slot="title">我的工作台</template>\n    <tis-menu-item index="2-1">选项1</tis-menu-item>\n    <tis-menu-item index="2-2">选项2</tis-menu-item>\n    <tis-menu-item index="2-3">选项3</tis-menu-item>\n    <tis-submenu index="2-4">\n      <template slot="title">选项4</template>\n      <tis-menu-item index="2-4-1">选项1</tis-menu-item>\n      <tis-menu-item index="2-4-2">选项2</tis-menu-item>\n      <tis-menu-item index="2-4-3">选项3</tis-menu-item>\n    </tis-submenu>\n  </tis-submenu>\n  <tis-menu-item index="3" disabled>消息中心</tis-menu-item>\n  <tis-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></tis-menu-item>\n</tis-menu>\n<div class="line"></div>\n<tis-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  <tis-menu-item index="1">处理中心</tis-menu-item>\n  <tis-submenu index="2">\n    <template slot="title">我的工作台</template>\n    <tis-menu-item index="2-1">选项1</tis-menu-item>\n    <tis-menu-item index="2-2">选项2</tis-menu-item>\n    <tis-menu-item index="2-3">选项3</tis-menu-item>\n    <tis-submenu index="2-4">\n      <template slot="title">选项4</template>\n      <tis-menu-item index="2-4-1">选项1</tis-menu-item>\n      <tis-menu-item index="2-4-2">选项2</tis-menu-item>\n      <tis-menu-item index="2-4-3">选项3</tis-menu-item>\n    </tis-submenu>\n  </tis-submenu>\n  <tis-menu-item index="3" disabled>消息中心</tis-menu-item>\n  <tis-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></tis-menu-item>\n</tis-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),t._m(2),e("p",[t._v("垂直菜单，可内嵌子菜单。")]),e("demo-block",[e("div",[e("p",[t._v("通过"),e("code",[t._v("el-menu-item-group")]),t._v("组件可以实现菜单进行分组，分组名可以通过"),e("code",[t._v("title")]),t._v("属性直接设定，也可以通过具名 slot 来设定。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-row class="tac">\n  <tis-col :span="12">\n    <h5>默认颜色</h5>\n    <tis-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose">\n      <tis-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>导航一</span>\n        </template>\n        <tis-menu-item-group>\n          <template slot="title">分组一</template>\n          <tis-menu-item index="1-1">选项1</tis-menu-item>\n          <tis-menu-item index="1-2">选项2</tis-menu-item>\n        </tis-menu-item-group>\n        <tis-menu-item-group title="分组2">\n          <tis-menu-item index="1-3">选项3</tis-menu-item>\n        </tis-menu-item-group>\n        <tis-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <tis-menu-item index="1-4-1">选项1</tis-menu-item>\n        </tis-submenu>\n      </tis-submenu>\n      <tis-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span slot="title">导航二</span>\n      </tis-menu-item>\n      <tis-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span slot="title">导航三</span>\n      </tis-menu-item>\n      <tis-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span slot="title">导航四</span>\n      </tis-menu-item>\n    </tis-menu>\n  </tis-col>\n  <tis-col :span="12">\n    <h5>自定义颜色</h5>\n    <tis-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      <tis-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>导航一</span>\n        </template>\n        <tis-menu-item-group>\n          <template slot="title">分组一</template>\n          <tis-menu-item index="1-1">选项1</tis-menu-item>\n          <tis-menu-item index="1-2">选项2</tis-menu-item>\n        </tis-menu-item-group>\n        <tis-menu-item-group title="分组2">\n          <tis-menu-item index="1-3">选项3</tis-menu-item>\n        </tis-menu-item-group>\n        <tis-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <tis-menu-item index="1-4-1">选项1</tis-menu-item>\n        </tis-submenu>\n      </tis-submenu>\n      <tis-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span slot="title">导航二</span>\n      </tis-menu-item>\n      <tis-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span slot="title">导航三</span>\n      </tis-menu-item>\n      <tis-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span slot="title">导航四</span>\n      </tis-menu-item>\n    </tis-menu>\n  </tis-col>\n</tis-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),t._m(3),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n  <tis-radio-button :label="false">展开</tis-radio-button>\n  <tis-radio-button :label="true">收起</tis-radio-button>\n</tis-radio-group>\n<tis-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n  <tis-submenu index="1">\n    <template slot="title">\n      <i class="el-icon-location"></i>\n      <span slot="title">导航一</span>\n    </template>\n    <tis-menu-item-group>\n      <span slot="title">分组一</span>\n      <tis-menu-item index="1-1">选项1</tis-menu-item>\n      <tis-menu-item index="1-2">选项2</tis-menu-item>\n    </tis-menu-item-group>\n    <tis-menu-item-group title="分组2">\n      <tis-menu-item index="1-3">选项3</tis-menu-item>\n    </tis-menu-item-group>\n    <tis-submenu index="1-4">\n      <span slot="title">选项4</span>\n      <tis-menu-item index="1-4-1">选项1</tis-menu-item>\n    </tis-submenu>\n  </tis-submenu>\n  <tis-menu-item index="2">\n    <i class="el-icon-menu"></i>\n    <span slot="title">导航二</span>\n  </tis-menu-item>\n  <tis-menu-item index="3" disabled>\n    <i class="el-icon-document"></i>\n    <span slot="title">导航三</span>\n  </tis-menu-item>\n  <tis-menu-item index="4">\n    <i class="el-icon-setting"></i>\n    <span slot="title">导航四</span>\n  </tis-menu-item>\n</tis-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),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"navmenu-dao-hang-cai-dan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu-dao-hang-cai-dan"}},[this._v("¶")]),this._v(" NavMenu 导航菜单")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ding-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ding-lan"}},[this._v("¶")]),this._v(" 顶栏")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ce-lan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ce-lan"}},[this._v("¶")]),this._v(" 侧栏")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhe-die"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhe-die"}},[this._v("¶")]),this._v(" 折叠")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"menu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute"}},[this._v("¶")]),this._v(" Menu Attribute")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("mode")]),e("td",[t._v("模式")]),e("td",[t._v("string")]),e("td",[t._v("horizontal / vertical")]),e("td",[t._v("vertical")])]),e("tr",[e("td",[t._v("collapse")]),e("td",[t._v("是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("background-color")]),e("td",[t._v("菜单的背景色（仅支持 hex 格式）")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("#ffffff")])]),e("tr",[e("td",[t._v("text-color")]),e("td",[t._v("菜单的文字颜色（仅支持 hex 格式）")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("#303133")])]),e("tr",[e("td",[t._v("active-text-color")]),e("td",[t._v("当前激活菜单的文字颜色（仅支持 hex 格式）")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("#409EFF")])]),e("tr",[e("td",[t._v("default-active")]),e("td",[t._v("当前激活菜单的 index")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("default-openeds")]),e("td",[t._v("当前打开的 sub-menu 的 index 的数组")]),e("td",[t._v("Array")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("unique-opened")]),e("td",[t._v("是否只保持一个子菜单的展开")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("menu-trigger")]),e("td",[t._v("子菜单打开的触发方式(只在 mode 为 horizontal 时有效)")]),e("td",[t._v("string")]),e("td",[t._v("hover / click")]),e("td",[t._v("hover")])]),e("tr",[e("td",[t._v("router")]),e("td",[t._v("是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("collapse-transition")]),e("td",[t._v("是否开启折叠动画")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"menu-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-methods"}},[this._v("¶")]),this._v(" Menu Methods")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名称")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("open")]),e("td",[t._v("展开指定的 sub-menu")]),e("td",[t._v("index: 需要打开的 sub-menu 的 index")])]),e("tr",[e("td",[t._v("close")]),e("td",[t._v("收起指定的 sub-menu")]),e("td",[t._v("index: 需要收起的 sub-menu 的 index")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"menu-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-events"}},[this._v("¶")]),this._v(" Menu Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("select")]),e("td",[t._v("菜单激活回调")]),e("td",[t._v("index: 选中菜单项的 index, indexPath: 选中菜单项的 index path")])]),e("tr",[e("td",[t._v("open")]),e("td",[t._v("sub-menu 展开的回调")]),e("td",[t._v("index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path")])]),e("tr",[e("td",[t._v("close")]),e("td",[t._v("sub-menu 收起的回调")]),e("td",[t._v("index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"submenu-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute"}},[this._v("¶")]),this._v(" SubMenu Attribute")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("index")]),e("td",[t._v("唯一标志")]),e("td",[t._v("string/null")]),e("td",[t._v("—")]),e("td",[t._v("null")])]),e("tr",[e("td",[t._v("popper-class")]),e("td",[t._v("弹出菜单的自定义类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("show-timeout")]),e("td",[t._v("展开 sub-menu 的延时")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("300")])]),e("tr",[e("td",[t._v("hide-timeout")]),e("td",[t._v("收起 sub-menu 的延时")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("300")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("popper-append-to-body")]),e("td",[t._v("是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("一级子菜单：true / 非一级子菜单：false")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"menu-item-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute"}},[this._v("¶")]),this._v(" Menu-Item Attribute")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("index")]),e("td",[t._v("唯一标志")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("route")]),e("td",[t._v("Vue Router 路径对象")]),e("td",[t._v("Object")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"menu-group-attribute"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute"}},[this._v("¶")]),this._v(" Menu-Group Attribute")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("title")]),e("td",[t._v("分组标题")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])}],!1,null,null,null);e.default=a.exports},1335:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[e._v("默认")]),e._v(" "),t("tis-slider",{model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[e._v("自定义初始值")]),e._v(" "),t("tis-slider",{model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1),e._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[e._v("隐藏 Tooltip")]),e._v(" "),t("tis-slider",{attrs:{"show-tooltip":!1},model:{value:e.value3,callback:function(t){e.value3=t},expression:"value3"}})],1),e._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[e._v("格式化 Tooltip")]),e._v(" "),t("tis-slider",{attrs:{"format-tooltip":e.formatTooltip},model:{value:e.value4,callback:function(t){e.value4=t},expression:"value4"}})],1),e._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[e._v("禁用")]),e._v(" "),t("tis-slider",{attrs:{disabled:""},model:{value:e.value5,callback:function(t){e.value5=t},expression:"value5"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(t){return t/100}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[e._v("不显示间断点")]),e._v(" "),t("tis-slider",{attrs:{step:10},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[e._v("显示间断点")]),e._v(" "),t("tis-slider",{attrs:{step:10,"show-stops":""},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:0,value2:0}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("div",{staticClass:"block"},[t("tis-slider",{attrs:{"show-input":""},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:0}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("div",{staticClass:"block"},[t("tis-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:[4,8]}}}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("div",{staticClass:"block"},[t("tis-slider",{attrs:{vertical:"",height:"200px"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:0}}}),"element-demo5":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("div",{staticClass:"block"},[t("tis-slider",{attrs:{range:"",marks:e.marks},model:{value:e.value,callback:function(t){e.value=t},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%")}}}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("通过拖动滑块在一个固定区间内进行选择")]),t._m(1),e("p",[t._v("在拖动滑块时，显示当前值")]),e("demo-block",[e("div",[e("p",[t._v("通过设置绑定值自定义滑块的初始值")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <tis-slider v-model="value1"></tis-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">自定义初始值</span>\n    <tis-slider v-model="value2"></tis-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">隐藏 Tooltip</span>\n    <tis-slider v-model="value3" :show-tooltip="false"></tis-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">格式化 Tooltip</span>\n    <tis-slider v-model="value4" :format-tooltip="formatTooltip"></tis-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">禁用</span>\n    <tis-slider v-model="value5" disabled></tis-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),t._m(2),e("p",[t._v("选项可以是离散的")]),e("demo-block",[e("div",[e("p",[t._v("改变"),e("code",[t._v("step")]),t._v("的值可以改变步长，通过设置"),e("code",[t._v("show-stops")]),t._v("属性可以显示间断点")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <div class="block">\n    <span class="demonstration">不显示间断点</span>\n    <tis-slider\n      v-model="value1"\n      :step="10">\n    </tis-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">显示间断点</span>\n    <tis-slider\n      v-model="value2"\n      :step="10"\n      show-stops>\n    </tis-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),t._m(3),e("p",[t._v("通过输入框设置精确数值")]),e("demo-block",[e("div",[e("p",[t._v("设置"),e("code",[t._v("show-input")]),t._v("属性会在右侧显示一个输入框")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <div class="block">\n    <tis-slider\n      v-model="value"\n      show-input>\n    </tis-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),t._m(4),e("p",[t._v("支持选择某一数值范围")]),e("demo-block",[e("div",[e("p",[t._v("设置"),e("code",[t._v("range")]),t._v("即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <div class="block">\n    <tis-slider\n      v-model="value"\n      range\n      show-stops\n      :max="10">\n    </tis-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),t._m(5),e("demo-block",[e("div",[e("p",[t._v("设置"),e("code",[t._v("vertical")]),t._v("可使 Slider 变成竖向模式，此时必须设置高度"),e("code",[t._v("height")]),t._v("属性")])]),e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <div class="block">\n    <tis-slider\n      v-model="value"\n      vertical\n      height="200px">\n    </tis-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),t._m(6),e("demo-block",[e("div",[e("p",[t._v("设置 "),e("code",[t._v("marks")]),t._v(" 属性可以展示标记")])]),e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <div class=\"block\">\n    <tis-slider\n      v-model=\"value\"\n      range\n      :marks=\"marks\">\n    </tis-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),t._m(7),t._m(8),t._m(9),t._m(10)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"slider-hua-kuai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-hua-kuai"}},[this._v("¶")]),this._v(" Slider 滑块")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"chi-san-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chi-san-zhi"}},[this._v("¶")]),this._v(" 离散值")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dai-you-shu-ru-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-shu-ru-kuang"}},[this._v("¶")]),this._v(" 带有输入框")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fan-wei-xuan-ze"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fan-wei-xuan-ze"}},[this._v("¶")]),this._v(" 范围选择")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shu-xiang-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-xiang-mo-shi"}},[this._v("¶")]),this._v(" 竖向模式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhan-shi-biao-ji"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhan-shi-biao-ji"}},[this._v("¶")]),this._v(" 展示标记")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("min")]),e("td",[t._v("最小值")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("max")]),e("td",[t._v("最大值")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("100")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("step")]),e("td",[t._v("步长")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("1")])]),e("tr",[e("td",[t._v("show-input")]),e("td",[t._v("是否显示输入框，仅在非范围选择时有效")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("show-input-controls")]),e("td",[t._v("在显示输入框的情况下，是否显示输入框的控制按钮")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("input-size")]),e("td",[t._v("输入框的尺寸")]),e("td",[t._v("string")]),e("td",[t._v("large / medium / small / mini")]),e("td",[t._v("small")])]),e("tr",[e("td",[t._v("show-stops")]),e("td",[t._v("是否显示间断点")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("show-tooltip")]),e("td",[t._v("是否显示 tooltip")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("format-tooltip")]),e("td",[t._v("格式化 tooltip message")]),e("td",[t._v("function(value)")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("range")]),e("td",[t._v("是否为范围选择")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("vertical")]),e("td",[t._v("是否竖向模式")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("height")]),e("td",[t._v("Slider 高度，竖向模式时必填")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("屏幕阅读器标签")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("debounce")]),e("td",[t._v("输入时的去抖延迟，毫秒，仅在"),e("code",[t._v("show-input")]),t._v("等于true时有效")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("300")])]),e("tr",[e("td",[t._v("tooltip-class")]),e("td",[t._v("tooltip 的自定义类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("marks")]),e("td",[t._v("标记， key 的类型必须为 number 且取值在闭区间 "),e("code",[t._v("[min, max]")]),t._v(" 内，每个标记可以单独设置样式")]),e("td",[t._v("object")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("change")]),e("td",[t._v("值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）")]),e("td",[t._v("改变后的值")])]),e("tr",[e("td",[t._v("input")]),e("td",[t._v("数据改变时触发（使用鼠标拖曳时，活动过程实时触发）")]),e("td",[t._v("改变后的值")])])])])}],!1,null,null,null);e.default=a.exports},1338:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("tis-select",{attrs:{placeholder:"请选择"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},e._l(e.options,function(t){return n("tis-option",{key:t.value,attrs:{label:t.label,value:t.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 e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("tis-select",{attrs:{disabled:"",placeholder:"请选择"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},e._l(e.options,function(t){return n("tis-option",{key:t.value,attrs:{label:t.label,value:t.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-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("tis-select",{attrs:{clearable:"",placeholder:"请选择"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},e._l(e.options,function(t){return n("tis-option",{key:t.value,attrs:{label:t.label,value:t.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 e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("tis-select",{attrs:{multiple:"",placeholder:"请选择"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}},e._l(e.options,function(t){return n("tis-option",{key:t.value,attrs:{label:t.label,value:t.value}})}),1),e._v(" "),n("tis-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"请选择"},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}},e._l(e.options,function(t){return n("tis-option",{key:t.value,attrs:{label:t.label,value:t.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-demo4":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("tis-select",{attrs:{placeholder:"请选择"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},e._l(e.cities,function(t){return n("tis-option",{key:t.value,attrs:{label:t.label,value:t.value}},[n("span",{staticStyle:{float:"left"}},[e._v(e._s(t.label))]),e._v(" "),n("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[e._v(e._s(t.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-demo5":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("tis-select",{attrs:{filterable:"",placeholder:"请选择"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},e._l(e.options,function(t){return n("tis-option",{key:t.value,attrs:{label:t.label,value:t.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],value:""}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("当选项过多时，使用下拉菜单展示并选择内容。")]),t._m(1),e("p",[t._v("适用广泛的基础单选")]),e("demo-block",[e("div",[e("p",[e("code",[t._v("v-model")]),t._v("的值为当前被选中的"),e("code",[t._v("el-option")]),t._v("的 value 属性值")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-select v-model=\"value\" placeholder=\"请选择\">\n    <tis-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </tis-option>\n  </tis-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),t._m(2),e("p",[t._v("选择器不可用状态")]),e("demo-block",[e("div",[e("p",[t._v("为"),e("code",[t._v("el-select")]),t._v("设置"),e("code",[t._v("disabled")]),t._v("属性，则整个选择器不可用")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-select v-model=\"value\" disabled placeholder=\"请选择\">\n    <tis-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </tis-option>\n  </tis-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),t._m(3),e("p",[t._v("包含清空按钮，可将选择器清空为初始状态")]),e("demo-block",[e("div",[e("p",[t._v("为"),e("code",[t._v("el-select")]),t._v("设置"),e("code",[t._v("clearable")]),t._v("属性，则可将选择器清空。需要注意的是，"),e("code",[t._v("clearable")]),t._v("属性仅适用于单选。")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-select v-model=\"value\" clearable placeholder=\"请选择\">\n    <tis-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </tis-option>\n  </tis-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),t._m(4),e("p",[t._v("适用性较广的基础多选，用 Tag 展示已选项")]),e("demo-block",[e("div",[e("p",[t._v("为"),e("code",[t._v("el-select")]),t._v("设置"),e("code",[t._v("multiple")]),t._v("属性即可启用多选，此时"),e("code",[t._v("v-model")]),t._v("的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置"),e("code",[t._v("collapse-tags")]),t._v("属性将它们合并为一段文字。")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-select v-model="value1" multiple placeholder="请选择">\n    <tis-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </tis-option>\n  </tis-select>\n\n  <tis-select\n    v-model="value2"\n    multiple\n    collapse-tags\n    style="margin-left: 20px;"\n    placeholder="请选择">\n    <tis-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </tis-option>\n  </tis-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),t._m(5),e("p",[t._v("可以自定义备选项")]),e("demo-block",[e("div",[e("p",[t._v("将自定义的 HTML 模板插入"),e("code",[t._v("el-option")]),t._v("的 slot 中即可。")])]),e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-select v-model=\"value\" placeholder=\"请选择\">\n    <tis-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    </tis-option>\n  </tis-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),t._m(6),e("p",[t._v("可以利用搜索功能快速查找选项")]),e("demo-block",[e("div",[e("p",[t._v("为"),e("code",[t._v("el-select")]),t._v("添加"),e("code",[t._v("filterable")]),t._v("属性即可启用搜索功能。默认情况下，Select 会找出所有"),e("code",[t._v("label")]),t._v("属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个"),e("code",[t._v("filter-method")]),t._v("来实现。"),e("code",[t._v("filter-method")]),t._v("为一个"),e("code",[t._v("Function")]),t._v("，它会在输入值发生变化时调用，参数为当前输入值。")])]),e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-select v-model=\"value\" filterable placeholder=\"请选择\">\n    <tis-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </tis-option>\n  </tis-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),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"select-xuan-ze-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-xuan-ze-qi"}},[this._v("¶")]),this._v(" Select 选择器")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ke-qing-kong-dan-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong-dan-xuan"}},[this._v("¶")]),this._v(" 可清空单选")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-duo-xuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-duo-xuan"}},[this._v("¶")]),this._v(" 基础多选")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban"}},[this._v("¶")]),this._v(" 自定义模板")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ke-sou-suo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo"}},[this._v("¶")]),this._v(" 可搜索")])},function(){var t=this.$createElement,t=this._self._c||t;return t("div",{staticClass:"tip"},[t("p",[this._v("如果 Select 的绑定值为对象类型，请务必指定 "),t("code",[this._v("value-key")]),this._v(" 作为它的唯一性标识。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"select-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes"}},[this._v("¶")]),this._v(" Select Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值")]),e("td",[t._v("boolean / string / number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("multiple")]),e("td",[t._v("是否多选")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("value-key")]),e("td",[t._v("作为 value 唯一标识的键名，绑定值为对象类型时必填")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("value")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("输入框尺寸")]),e("td",[t._v("string")]),e("td",[t._v("medium/small/mini")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("clearable")]),e("td",[t._v("是否可以清空选项")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("collapse-tags")]),e("td",[t._v("多选时是否将选中值按文字的形式展示")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("multiple-limit")]),e("td",[t._v("多选时用户最多可以选择的项目数，为 0 则不限制")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("name")]),e("td",[t._v("select input 的 name 属性")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("autocomplete")]),e("td",[t._v("select input 的 autocomplete 属性")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("off")])]),e("tr",[e("td",[t._v("auto-complete")]),e("td",[t._v("下个主版本弃用")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("off")])]),e("tr",[e("td",[t._v("placeholder")]),e("td",[t._v("占位符")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("请选择")])]),e("tr",[e("td",[t._v("filterable")]),e("td",[t._v("是否可搜索")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("allow-create")]),e("td",[t._v("是否允许用户创建新条目，需配合 "),e("code",[t._v("filterable")]),t._v(" 使用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("filter-method")]),e("td",[t._v("自定义搜索方法")]),e("td",[t._v("function")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("remote")]),e("td",[t._v("是否为远程搜索")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("remote-method")]),e("td",[t._v("远程搜索方法")]),e("td",[t._v("function")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("loading")]),e("td",[t._v("是否正在从远程获取数据")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("loading-text")]),e("td",[t._v("远程加载时显示的文字")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("加载中")])]),e("tr",[e("td",[t._v("no-match-text")]),e("td",[t._v("搜索条件无匹配时显示的文字，也可以使用"),e("code",[t._v('slot="empty"')]),t._v("设置")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("无匹配数据")])]),e("tr",[e("td",[t._v("no-data-text")]),e("td",[t._v("选项为空时显示的文字，也可以使用"),e("code",[t._v('slot="empty"')]),t._v("设置")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("无数据")])]),e("tr",[e("td",[t._v("popper-class")]),e("td",[t._v("Select 下拉框的类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("reserve-keyword")]),e("td",[t._v("多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("default-first-option")]),e("td",[t._v("在输入框按下回车，选择第一个匹配项。需配合 "),e("code",[t._v("filterable")]),t._v(" 或 "),e("code",[t._v("remote")]),t._v(" 使用")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("popper-append-to-body")]),e("td",[t._v("是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("automatic-dropdown")]),e("td",[t._v("对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单")]),e("td",[t._v("boolean")]),e("td",[t._v("-")]),e("td",[t._v("false")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"select-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-events"}},[this._v("¶")]),this._v(" Select Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("change")]),e("td",[t._v("选中值发生变化时触发")]),e("td",[t._v("目前的选中值")])]),e("tr",[e("td",[t._v("visible-change")]),e("td",[t._v("下拉框出现/隐藏时触发")]),e("td",[t._v("出现则为 true，隐藏则为 false")])]),e("tr",[e("td",[t._v("remove-tag")]),e("td",[t._v("多选模式下移除tag时触发")]),e("td",[t._v("移除的tag值")])]),e("tr",[e("td",[t._v("clear")]),e("td",[t._v("可清空的单选模式下用户点击清空按钮时触发")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("blur")]),e("td",[t._v("当 input 失去焦点时触发")]),e("td",[t._v("(event: Event)")])]),e("tr",[e("td",[t._v("focus")]),e("td",[t._v("当 input 获得焦点时触发")]),e("td",[t._v("(event: Event)")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"select-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-slots"}},[this._v("¶")]),this._v(" Select Slots")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("name")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("—")]),e("td",[t._v("Option 组件列表")])]),e("tr",[e("td",[t._v("prefix")]),e("td",[t._v("Select 组件头部内容")])]),e("tr",[e("td",[t._v("empty")]),e("td",[t._v("无选项时的列表")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"option-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes"}},[this._v("¶")]),this._v(" Option Group Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("label")]),e("td",[t._v("分组的组名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否将该分组下所有选项置为禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"option-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes"}},[this._v("¶")]),this._v(" Option Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value")]),e("td",[t._v("选项的值")]),e("td",[t._v("string/number/object")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("选项的标签，若不设置则默认与 "),e("code",[t._v("value")]),t._v(" 相同")]),e("td",[t._v("string/number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用该选项")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[this._v("¶")]),this._v(" Methods")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")])])]),e("tbody",[e("tr",[e("td",[t._v("focus")]),e("td",[t._v("使 input 获取焦点")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("blur")]),e("td",[t._v("使 input 失去焦点，并隐藏下拉框")]),e("td",[t._v("-")])])])])}],!1,null,null,null);e.default=a.exports},1339:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-alert",{attrs:{title:"成功提示的文案",type:"success"}}),this._v(" "),t("tis-alert",{attrs:{title:"消息提示的文案",type:"info"}}),this._v(" "),t("tis-alert",{attrs:{title:"警告提示的文案",type:"warning"}}),this._v(" "),t("tis-alert",{attrs:{title:"错误提示的文案",type:"error"}})]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-alert",{attrs:{title:"成功提示的文案",type:"success",effect:"dark"}}),this._v(" "),t("tis-alert",{attrs:{title:"消息提示的文案",type:"info",effect:"dark"}}),this._v(" "),t("tis-alert",{attrs:{title:"警告提示的文案",type:"warning",effect:"dark"}}),this._v(" "),t("tis-alert",{attrs:{title:"错误提示的文案",type:"error",effect:"dark"}})]],2)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-alert",{attrs:{title:"不可关闭的 alert",type:"success",closable:!1}}),this._v(" "),t("tis-alert",{attrs:{title:"自定义 close-text",type:"info","close-text":"知道了"}}),this._v(" "),t("tis-alert",{attrs:{title:"设置了回调的 alert",type:"warning"},on:{close:this.hello}})]],2)},staticRenderFns:[]},{methods:{hello:function(){alert("Hello World!")}}}),"element-demo3":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-alert",{attrs:{title:"成功提示的文案",type:"success","show-icon":""}}),this._v(" "),t("tis-alert",{attrs:{title:"消息提示的文案",type:"info","show-icon":""}}),this._v(" "),t("tis-alert",{attrs:{title:"警告提示的文案",type:"warning","show-icon":""}}),this._v(" "),t("tis-alert",{attrs:{title:"错误提示的文案",type:"error","show-icon":""}})]],2)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-alert",{attrs:{title:"带辅助性文字介绍",type:"success",description:"这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"}})]],2)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-alert",{attrs:{title:"成功提示的文案",type:"success",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),this._v(" "),t("tis-alert",{attrs:{title:"消息提示的文案",type:"info",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),this._v(" "),t("tis-alert",{attrs:{title:"警告提示的文案",type:"warning",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),this._v(" "),t("tis-alert",{attrs:{title:"错误提示的文案",type:"error",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}})]],2)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("用于页面中展示重要的提示信息。")]),t._m(1),e("p",[t._v("页面中的非浮层元素，不会自动消失。")]),e("demo-block",[e("div",[e("p",[t._v("Alert 组件提供四种主题，由"),e("code",[t._v("type")]),t._v("属性指定，默认值为"),e("code",[t._v("info")]),t._v("。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-alert\n    title="成功提示的文案"\n    type="success">\n  </tis-alert>\n  <tis-alert\n    title="消息提示的文案"\n    type="info">\n  </tis-alert>\n  <tis-alert\n    title="警告提示的文案"\n    type="warning">\n  </tis-alert>\n  <tis-alert\n    title="错误提示的文案"\n    type="error">\n  </tis-alert>\n</template>\n')])])])],2),t._m(2),t._m(3),e("demo-block",[e("div",[e("p",[t._v("通过设置"),e("code",[t._v("effect")]),t._v("属性来改变主题，默认为"),e("code",[t._v("light")]),t._v("。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-alert\n    title="成功提示的文案"\n    type="success"\n    effect="dark">\n  </tis-alert>\n  <tis-alert\n    title="消息提示的文案"\n    type="info"\n    effect="dark">\n  </tis-alert>\n  <tis-alert\n    title="警告提示的文案"\n    type="warning"\n    effect="dark">\n  </tis-alert>\n  <tis-alert\n    title="错误提示的文案"\n    type="error"\n    effect="dark">\n  </tis-alert>\n</template>\n')])])])],2),t._m(4),e("p",[t._v("自定义关闭按钮为文字或其他符号。")]),e("demo-block",[e("div",[e("p",[t._v("在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。"),e("code",[t._v("closable")]),t._v("属性决定是否可关闭，接受"),e("code",[t._v("boolean")]),t._v("，默认为"),e("code",[t._v("true")]),t._v("。你可以设置"),e("code",[t._v("close-text")]),t._v("属性来代替右侧的关闭图标，注意："),e("code",[t._v("close-text")]),t._v("必须为文本。设置"),e("code",[t._v("close")]),t._v("事件来设置关闭时的回调。")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-alert\n    title="不可关闭的 alert"\n    type="success"\n    :closable="false">\n  </tis-alert>\n  <tis-alert\n    title="自定义 close-text"\n    type="info"\n    close-text="知道了">\n  </tis-alert>\n  <tis-alert\n    title="设置了回调的 alert"\n    type="warning"\n    @close="hello">\n  </tis-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert(\'Hello World!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),t._m(5),e("p",[t._v("表示某种状态时提升可读性。")]),e("demo-block",[e("div",[e("p",[t._v("通过设置"),e("code",[t._v("show-icon")]),t._v("属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-alert\n    title="成功提示的文案"\n    type="success"\n    show-icon>\n  </tis-alert>\n  <tis-alert\n    title="消息提示的文案"\n    type="info"\n    show-icon>\n  </tis-alert>\n  <tis-alert\n    title="警告提示的文案"\n    type="warning"\n    show-icon>\n  </tis-alert>\n  <tis-alert\n    title="错误提示的文案"\n    type="error"\n    show-icon>\n  </tis-alert>\n</template>\n')])])])],2),t._m(6),e("p",[t._v("包含标题和内容，解释更详细的警告。")]),e("demo-block",[e("div",[e("p",[t._v("除了必填的"),e("code",[t._v("title")]),t._v("属性外，你可以设置"),e("code",[t._v("description")]),t._v("属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。")])]),e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-alert\n    title="带辅助性文字介绍"\n    type="success"\n    description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">\n  </tis-alert>\n</template>\n')])])])],2),t._m(7),e("demo-block",[e("div",[e("p",[t._v("最后，这是一个同时具有 icon 和辅助性文字的样例。")])]),e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-alert\n    title="成功提示的文案"\n    type="success"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </tis-alert>\n  <tis-alert\n    title="消息提示的文案"\n    type="info"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </tis-alert>\n  <tis-alert\n    title="警告提示的文案"\n    type="warning"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </tis-alert>\n  <tis-alert\n    title="错误提示的文案"\n    type="error"\n    description="文字说明文字说明文字说明文字说明文字说明文字说明"\n    show-icon>\n  </tis-alert>\n</template>\n')])])])],2),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"alert-jing-gao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert-jing-gao"}},[this._v("¶")]),this._v(" Alert 警告")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhu-ti"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti"}},[this._v("¶")]),this._v(" 主题")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("Alert 组件提供了两个不同的主题："),t("code",[this._v("light")]),this._v("和"),t("code",[this._v("dark")]),this._v("。")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 自定义关闭按钮")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dai-you-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon"}},[this._v("¶")]),this._v(" 带有 icon")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 带有辅助性文字介绍")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 带有 icon 和辅助性文字介绍")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("title")]),e("td",[t._v("标题")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("type")]),e("td",[t._v("主题")]),e("td",[t._v("string")]),e("td",[t._v("success/warning/info/error")]),e("td",[t._v("info")])]),e("tr",[e("td",[t._v("description")]),e("td",[t._v("辅助性文字。也可通过默认 slot 传入")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("closable")]),e("td",[t._v("是否可关闭")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("center")]),e("td",[t._v("文字是否居中")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("close-text")]),e("td",[t._v("关闭按钮自定义文本")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("show-icon")]),e("td",[t._v("是否显示图标")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("effect")]),e("td",[t._v("选择提供的主题")]),e("td",[t._v("string")]),e("td",[t._v("light/dark")]),e("td",[t._v("light")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[this._v("¶")]),this._v(" Slot")])},function(){var t=this.$createElement,t=this._self._c||t;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("描述")])]),t("tr",[t("td",[this._v("title")]),t("td",[this._v("标题的内容")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this.$createElement,t=this._self._c||t;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("close")]),t("td",[this._v("关闭alert时触发的事件")]),t("td",[this._v("—")])])])])}],!1,null,null,null);e.default=a.exports},1340:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[e._v("默认不区分颜色")]),e._v(" "),t("tis-rate",{model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})],1),e._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[e._v("区分颜色")]),e._v(" "),t("tis-rate",{attrs:{colors:e.colors},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})],1)])},staticRenderFns:[]},{data:function(){return{value1:null,value2:null,colors:["#99A9BF","#F7BA2A","#FF9900"]}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-rate",{attrs:{"show-text":""},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:null}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-rate",{attrs:{"icon-classes":e.iconClasses,"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:e.value,callback:function(t){e.value=t},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 e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value}"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:3.7}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("评分组件")]),t._m(1),e("demo-block",[e("div",[e("p",[t._v("评分默认被分为三个等级，可以利用颜色数组对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用"),e("code",[t._v("colors")]),t._v("属性设置，而它们对应的两个阈值则通过 "),e("code",[t._v("low-threshold")]),t._v(" 和 "),e("code",[t._v("high-threshold")]),t._v(" 设定。你也可以通过传入颜色对象来自定义分段，键名为分段的界限值，键值为对应的颜色。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="block">\n  <span class="demonstration">默认不区分颜色</span>\n  <tis-rate v-model="value1"></tis-rate>\n</div>\n<div class="block">\n  <span class="demonstration">区分颜色</span>\n  <tis-rate\n    v-model="value2"\n    :colors="colors">\n  </tis-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),t._m(2),e("p",[t._v("用辅助文字直接地表达对应分数")]),e("demo-block",[e("div",[e("p",[t._v("为组件设置 "),e("code",[t._v("show-text")]),t._v(" 属性会在右侧显示辅助文字。通过设置 "),e("code",[t._v("texts")]),t._v(" 可以为每一个分值指定对应的辅助文字。"),e("code",[t._v("texts")]),t._v(" 为一个数组，长度应等于最大值 "),e("code",[t._v("max")]),t._v("。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-rate\n  v-model="value"\n  show-text>\n</tis-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: null\n      }\n    }\n  }\n<\/script>\n')])])])],2),t._m(3),e("p",[t._v("当有多层评价时，可以用不同类型的 icon 区分评分层级")]),e("demo-block",[e("div",[e("p",[t._v("设置"),e("code",[t._v("icon-classes")]),t._v("属性可以自定义不同分段的图标。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名。本例还使用"),e("code",[t._v("void-icon-class")]),t._v("指定了未选中时的图标类名。")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<tis-rate\n  v-model=\"value\"\n  :icon-classes=\"iconClasses\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</tis-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),t._m(4),e("p",[t._v("只读的评分用来展示分数，允许出现半星")]),e("demo-block",[e("div",[e("p",[t._v("为组件设置 "),e("code",[t._v("disabled")]),t._v(" 属性表示组件为只读，支持小数分值。此时若设置 "),e("code",[t._v("show-score")]),t._v("，则会在右侧显示目前的分值。可以提供 "),e("code",[t._v("score-template")]),t._v(" 作为显示模板，模板为一个包含了 "),e("code",[t._v("{value}")]),t._v(" 的字符串，"),e("code",[t._v("{value}")]),t._v(" 会被解析为分值。")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-rate\n  v-model="value"\n  disabled\n  show-score\n  text-color="#ff9900"\n  score-template="{value}">\n</tis-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 3.7\n      }\n    }\n  }\n<\/script>\n')])])])],2),t._m(5),t._m(6),t._m(7),t._m(8)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"rate-ping-fen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate-ping-fen"}},[this._v("¶")]),this._v(" Rate 评分")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fu-zhu-wen-zi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-wen-zi"}},[this._v("¶")]),this._v(" 辅助文字")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"qi-ta-icon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-icon"}},[this._v("¶")]),this._v(" 其它 icon")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhi-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-du"}},[this._v("¶")]),this._v(" 只读")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("max")]),e("td",[t._v("最大分值")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("5")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否为只读")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("allow-half")]),e("td",[t._v("是否允许半选")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("low-threshold")]),e("td",[t._v("低分和中等分数的界限值，值本身被划分在低分中")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("2")])]),e("tr",[e("td",[t._v("high-threshold")]),e("td",[t._v("高分和中等分数的界限值，值本身被划分在高分中")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("4")])]),e("tr",[e("td",[t._v("colors")]),e("td",[t._v("icon 的颜色。若传入数组，共有 3 个元素，为 3 个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色")]),e("td",[t._v("array/object")]),e("td",[t._v("—")]),e("td",[t._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),e("tr",[e("td",[t._v("void-color")]),e("td",[t._v("未选中 icon 的颜色")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("#C6D1DE")])]),e("tr",[e("td",[t._v("disabled-void-color")]),e("td",[t._v("只读时未选中 icon 的颜色")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("#EFF2F7")])]),e("tr",[e("td",[t._v("icon-classes")]),e("td",[t._v("icon 的类名。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名")]),e("td",[t._v("array/object")]),e("td",[t._v("—")]),e("td",[t._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),e("tr",[e("td",[t._v("void-icon-class")]),e("td",[t._v("未选中 icon 的类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("el-icon-star-off")])]),e("tr",[e("td",[t._v("disabled-void-icon-class")]),e("td",[t._v("只读时未选中 icon 的类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("el-icon-star-on")])]),e("tr",[e("td",[t._v("show-text")]),e("td",[t._v("是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("show-score")]),e("td",[t._v("是否显示当前分数，show-score 和 show-text 不能同时为真")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("text-color")]),e("td",[t._v("辅助文字的颜色")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("#1F2D3D")])]),e("tr",[e("td",[t._v("texts")]),e("td",[t._v("辅助文字数组")]),e("td",[t._v("array")]),e("td",[t._v("—")]),e("td",[t._v("['极差', '失望', '一般', '满意', '惊喜']")])]),e("tr",[e("td",[t._v("score-template")]),e("td",[t._v("分数显示模板")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("{value}")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this.$createElement,t=this._self._c||t;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);e.default=a.exports},1341:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("tis-row",{staticClass:"demo-avatar demo-basic"},[n("tis-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[e._v("square")]),e._v(" "),n("div",{staticClass:"demo-basic--circle"},[n("div",{staticClass:"block"},[n("tis-avatar",{attrs:{shape:"square",size:50,src:e.squareUrl}})],1),e._v(" "),e._l(e.sizeList,function(t){return n("div",{key:t,staticClass:"block"},[n("tis-avatar",{attrs:{shape:"square",size:t,src:e.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"]}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("用图标、图片或者字符的形式展示用户或事物信息。")]),t._m(1),t._m(2),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-row class="demo-avatar demo-basic">\n    <tis-col :span="12">\n      <div class="sub-title">square</div>\n      <div class="demo-basic--circle">\n        <div class="block"><tis-avatar shape="square" :size="50" :src="squareUrl"></tis-avatar></div>\n        <div class="block" v-for="size in sizeList" :key="size">\n          <tis-avatar shape="square" :size="size" :src="squareUrl"></tis-avatar>\n        </div>\n      </div>\n    </tis-col> \n  </tis-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),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"avatar-tou-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avatar-tou-xiang"}},[this._v("¶")]),this._v(" Avatar 头像")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("通过 "),t("code",[this._v("shape")]),this._v(" 和 "),t("code",[this._v("size")]),this._v(" 设置头像的形状和大小。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("icon")]),e("td",[t._v("设置头像的图标类型，参考 Icon 组件")]),e("td",[t._v("string")]),e("td"),e("td")]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("设置头像的大小")]),e("td",[t._v("number/string")]),e("td",[t._v("number / large / medium / small")]),e("td",[t._v("large")])]),e("tr",[e("td",[t._v("shape")]),e("td",[t._v("设置头像的形状")]),e("td",[t._v("string")]),e("td",[t._v("circle / square")]),e("td",[t._v("circle")])]),e("tr",[e("td",[t._v("src")]),e("td",[t._v("图片头像的资源地址")]),e("td",[t._v("string")]),e("td"),e("td")]),e("tr",[e("td",[t._v("srcSet")]),e("td",[t._v("以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像")]),e("td",[t._v("string")]),e("td"),e("td")]),e("tr",[e("td",[t._v("alt")]),e("td",[t._v("描述图像的替换文本")]),e("td",[t._v("string")]),e("td"),e("td")]),e("tr",[e("td",[t._v("fit")]),e("td",[t._v("当展示类型为图片的时候，设置图片如何适应容器框")]),e("td",[t._v("string")]),e("td",[t._v("fill / contain / cover / none / scale-down")]),e("td",[t._v("cover")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this.$createElement,t=this._self._c||t;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("error")]),t("td",[this._v("图片类头像加载失败的回调， 返回 false 会关闭组件默认的 fallback 行为")]),t("td",[this._v("(e: Event)")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[this._v("¶")]),this._v(" Slot")])},function(){var t=this.$createElement,t=this._self._c||t;return t("table",[t("thead",[t("tr",[t("th",[this._v("名称")]),t("th",[this._v("说明")])])]),t("tbody",[t("tr",[t("td",[this._v("default")]),t("td",[this._v("自定义头像展示内容")])])])])}],!1,null,null,null);e.default=a.exports},1342:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[this._v("\n  Scroll down to see the bottom-right button.\n  "),t("tis-backtop",{attrs:{target:".page-component__scroll .el-scrollbar__wrap"}})]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[this._v("\n  Scroll down to see the bottom-right button.\n  "),t("tis-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:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("返回页面顶部的操作按钮")]),t._m(1),e("p",[t._v("滑动页面即可看到右下方的按钮。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  Scroll down to see the bottom-right button.\n  <tis-backtop target=".page-component__scroll .el-scrollbar__wrap"></tis-backtop>\n</template>\n')])])])],2),t._m(2),e("p",[t._v("显示区域被固定为 40px * 40px 的区域, 其中的内容可支持自定义。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  Scroll down to see the bottom-right button.\n  <tis-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  </tis-backtop>\n</template>\n')])])])],2),t._m(3),t._m(4),t._m(5),t._m(6)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"backtop-hui-dao-ding-bu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#backtop-hui-dao-ding-bu"}},[this._v("¶")]),this._v(" Backtop 回到顶部")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 自定义显示内容")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("target")]),e("td",[t._v("触发滚动的对象")]),e("td",[t._v("string")]),e("td"),e("td")]),e("tr",[e("td",[t._v("visibility-height")]),e("td",[t._v("滚动高度达到此参数值才出现")]),e("td",[t._v("number")]),e("td"),e("td",[t._v("200")])]),e("tr",[e("td",[t._v("right")]),e("td",[t._v("控制其显示位置, 距离页面右边距")]),e("td",[t._v("number")]),e("td"),e("td",[t._v("40")])]),e("tr",[e("td",[t._v("bottom")]),e("td",[t._v("控制其显示位置, 距离页面底部距离")]),e("td",[t._v("number")]),e("td"),e("td",[t._v("40")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this.$createElement,t=this._self._c||t;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("click")]),t("td",[this._v("点击按钮触发的事件")]),t("td",[this._v("点击事件")])])])])}],!1,null,null,null);e.default=a.exports},1343:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-radio",{attrs:{label:"1"},model:{value:e.radio,callback:function(t){e.radio=t},expression:"radio"}},[e._v("备选项")]),e._v(" "),t("tis-radio",{attrs:{label:"2"},model:{value:e.radio,callback:function(t){e.radio=t},expression:"radio"}},[e._v("备选项")])]],2)},staticRenderFns:[]},{data:function(){return{radio:"1"}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-radio",{attrs:{disabled:"",label:"禁用"},model:{value:e.radio,callback:function(t){e.radio=t},expression:"radio"}},[e._v("备选项")]),e._v(" "),t("tis-radio",{attrs:{disabled:"",label:"选中且禁用"},model:{value:e.radio,callback:function(t){e.radio=t},expression:"radio"}},[e._v("备选项")])]],2)},staticRenderFns:[]},{data:function(){return{radio:"选中且禁用"}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-radio-group",{model:{value:e.radio,callback:function(t){e.radio=t},expression:"radio"}},[t("tis-radio",{attrs:{label:3}},[e._v("备选项")]),e._v(" "),t("tis-radio",{attrs:{label:6}},[e._v("备选项")]),e._v(" "),t("tis-radio",{attrs:{label:9}},[e._v("备选项")])],1)]],2)},staticRenderFns:[]},{data:function(){return{radio:3}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("div",{staticStyle:{"margin-top":"20px"}},[t("tis-radio-group",{attrs:{size:"medium"},model:{value:e.radio2,callback:function(t){e.radio2=t},expression:"radio2"}},[t("tis-radio-button",{attrs:{label:"上海"}}),e._v(" "),t("tis-radio-button",{attrs:{label:"北京"}}),e._v(" "),t("tis-radio-button",{attrs:{label:"广州"}}),e._v(" "),t("tis-radio-button",{attrs:{label:"深圳"}})],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{radio1:"上海",radio2:"上海",radio3:"上海",radio4:"上海"}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("在一组备选项中进行单选")]),t._m(1),e("p",[t._v("由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。")]),e("demo-block",[e("div",[e("p",[t._v("要使用 Radio 组件，只需要设置"),e("code",[t._v("v-model")]),t._v("绑定变量，选中意味着变量的值为相应 Radio "),e("code",[t._v("label")]),t._v("属性的值，"),e("code",[t._v("label")]),t._v("可以是"),e("code",[t._v("String")]),t._v("、"),e("code",[t._v("Number")]),t._v("或"),e("code",[t._v("Boolean")]),t._v("。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-radio v-model="radio" label="1">备选项</tis-radio>\n  <tis-radio v-model="radio" label="2">备选项</tis-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),t._m(2),e("p",[t._v("单选框不可用的状态。")]),e("demo-block",[e("div",[e("p",[t._v("只要在"),e("code",[t._v("tis-radio")]),t._v("元素中设置"),e("code",[t._v("disabled")]),t._v("属性即可，它接受一个"),e("code",[t._v("Boolean")]),t._v("，"),e("code",[t._v("true")]),t._v("为禁用。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-radio disabled v-model="radio" label="禁用">备选项</tis-radio>\n  <tis-radio disabled v-model="radio" label="选中且禁用">备选项</tis-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'选中且禁用\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),t._m(3),e("p",[t._v("适用于在多个互斥的选项中选择的场景")]),e("demo-block",[e("div",[e("p",[t._v("结合"),e("code",[t._v("tis-radio-group")]),t._v("元素和子元素"),e("code",[t._v("tis-radio")]),t._v("可以实现单选组，在"),e("code",[t._v("tis-radio-group")]),t._v("中绑定"),e("code",[t._v("v-model")]),t._v("，在"),e("code",[t._v("tis-radio")]),t._v("中设置好"),e("code",[t._v("label")]),t._v("即可，无需再给每一个"),e("code",[t._v("tis-radio")]),t._v("绑定变量，另外，还提供了"),e("code",[t._v("change")]),t._v("事件来响应变化，它会传入一个参数"),e("code",[t._v("value")]),t._v("。")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-radio-group v-model="radio">\n    <tis-radio :label="3">备选项</tis-radio>\n    <tis-radio :label="6">备选项</tis-radio>\n    <tis-radio :label="9">备选项</tis-radio>\n  </tis-radio-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: 3\n      };\n    }\n  }\n<\/script>\n')])])])],2),t._m(4),e("p",[t._v("按钮样式的单选组合。")]),e("demo-block",[e("div",[e("p",[t._v("只需要把"),e("code",[t._v("tis-radio")]),t._v("元素换成"),e("code",[t._v("tis-radio-button")]),t._v("元素即可，此外，Tis 还提供了"),e("code",[t._v("size")]),t._v("属性。")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <div style="margin-top: 20px">\n    <tis-radio-group v-model="radio2" size="medium">\n      <tis-radio-button label="上海" ></tis-radio-button>\n      <tis-radio-button label="北京"></tis-radio-button>\n      <tis-radio-button label="广州"></tis-radio-button>\n      <tis-radio-button label="深圳"></tis-radio-button>\n    </tis-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),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"radio-dan-xuan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-dan-xuan-kuang"}},[this._v("¶")]),this._v(" Radio 单选框")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dan-xuan-kuang-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan-kuang-zu"}},[this._v("¶")]),this._v(" 单选框组")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"an-niu-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi"}},[this._v("¶")]),this._v(" 按钮样式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"radio-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes"}},[this._v("¶")]),this._v(" Radio Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值")]),e("td",[t._v("string / number / boolean")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("Radio 的 value")]),e("td",[t._v("string / number / boolean")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("border")]),e("td",[t._v("是否显示边框")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("Radio 的尺寸，仅在 border 为真时有效")]),e("td",[t._v("string")]),e("td",[t._v("medium / small / mini")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("name")]),e("td",[t._v("原生 name 属性")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"radio-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-events"}},[this._v("¶")]),this._v(" Radio Events")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"radio-group-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes"}},[this._v("¶")]),this._v(" Radio-group Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("绑定值")]),e("td",[t._v("string / number / boolean")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("size")]),e("td",[t._v("单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效")]),e("td",[t._v("string")]),e("td",[t._v("medium / small / mini")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("text-color")]),e("td",[t._v("按钮形式的 Radio 激活时的文本颜色")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("#ffffff")])]),e("tr",[e("td",[t._v("fill")]),e("td",[t._v("按钮形式的 Radio 激活时的填充色和边框色")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("#409EFF")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"radio-group-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events"}},[this._v("¶")]),this._v(" Radio-group Events")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"radio-button-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes"}},[this._v("¶")]),this._v(" Radio-button Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("label")]),e("td",[t._v("Radio 的 value")]),e("td",[t._v("string / number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("name")]),e("td",[t._v("原生 name 属性")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])}],!1,null,null,null);e.default=a.exports},1344:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-badge",{staticClass:"item",attrs:{value:12}},[e("tis-button",{attrs:{size:"small"}},[t._v("评论")])],1),t._v(" "),e("tis-badge",{staticClass:"item",attrs:{value:3}},[e("tis-button",{attrs:{size:"small"}},[t._v("回复")])],1),t._v(" "),e("tis-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[e("tis-button",{attrs:{size:"small"}},[t._v("评论")])],1),t._v(" "),e("tis-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[e("tis-button",{attrs:{size:"small"}},[t._v("回复")])],1),t._v(" "),e("tis-dropdown",{attrs:{trigger:"click"}},[e("span",{staticClass:"el-dropdown-link"},[t._v("\n    点我查看"),e("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),t._v(" "),e("tis-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[e("tis-dropdown-item",{staticClass:"clearfix"},[t._v("\n      评论\n      "),e("tis-badge",{staticClass:"mark",attrs:{value:12}})],1),t._v(" "),e("tis-dropdown-item",{staticClass:"clearfix"},[t._v("\n      回复\n      "),e("tis-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1),t._v(" "),e("tis-badge",{staticClass:"item",attrs:{value:200,max:99}},[e("tis-button",{attrs:{size:"small"}},[t._v("评论")])],1),t._v(" "),e("tis-badge",{staticClass:"item",attrs:{value:100,max:10}},[e("tis-button",{attrs:{size:"small"}},[t._v("回复")])],1)],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("出现在按钮、图标旁的数字或状态标记。")]),t._m(1),e("p",[t._v("展示新消息数量。")]),e("demo-block",[e("div",[e("p",[t._v("定义"),e("code",[t._v("value")]),t._v("属性，它接受"),e("code",[t._v("Number")]),t._v("或者"),e("code",[t._v("String")]),t._v("。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-badge :value="12" class="item">\n  <tis-button size="small">评论</tis-button>\n</tis-badge>\n<tis-badge :value="3" class="item">\n  <tis-button size="small">回复</tis-button>\n</tis-badge>\n<tis-badge :value="1" class="item" type="primary">\n  <tis-button size="small">评论</tis-button>\n</tis-badge>\n<tis-badge :value="2" class="item" type="warning">\n  <tis-button size="small">回复</tis-button>\n</tis-badge>\n\n<tis-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    点我查看<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <tis-dropdown-menu slot="dropdown">\n    <tis-dropdown-item class="clearfix">\n      评论\n      <tis-badge class="mark" :value="12" />\n    </tis-dropdown-item>\n    <tis-dropdown-item class="clearfix">\n      回复\n      <tis-badge class="mark" :value="3" />\n    </tis-dropdown-item>\n  </tis-dropdown-menu>\n</tis-dropdown>\n\n<tis-badge :value="200" :max="99" class="item">\n  <tis-button size="small">评论</tis-button>\n</tis-badge>\n<tis-badge :value="100" :max="10" class="item">\n  <tis-button size="small">回复</tis-button>\n</tis-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),t._m(2),t._m(3)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"badge-biao-ji"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge-biao-ji"}},[this._v("¶")]),this._v(" Badge 标记")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("value")]),e("td",[t._v("显示值")]),e("td",[t._v("string, number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("max")]),e("td",[t._v("最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("is-dot")]),e("td",[t._v("小圆点")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("hidden")]),e("td",[t._v("隐藏 badge")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("type")]),e("td",[t._v("类型")]),e("td",[t._v("string")]),e("td",[t._v("primary / success / warning / danger / info")]),e("td",[t._v("—")])])])])}],!1,null,null,null);e.default=a.exports},1345:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-radar",{attrs:{data:this.chartData}})]],2)},staticRenderFns:[]},{data:function(){return{chartData:{columns:["日期","访问用户","下单用户","下单率"],rows:[{"日期":"1/1","访问用户":1393,"下单用户":1093,"下单率":.32},{"日期":"1/2","访问用户":3530,"下单用户":3230,"下单率":.26},{"日期":"1/3","访问用户":2923,"下单用户":2623,"下单率":.76},{"日期":"1/4","访问用户":1723,"下单用户":1423,"下单率":.49},{"日期":"1/5","访问用户":3792,"下单用户":3492,"下单率":.323},{"日期":"1/6","访问用户":4593,"下单用户":4293,"下单率":.78}]}}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this.$createElement,t=this._self._c||t;return t("section",{staticClass:"content element-doc"},[this._m(0),this._m(1),t("demo-block",[t("template",{slot:"source"},[t("element-demo0")],1),t("template",{slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"html"}},[this._v("<template>\n  <ve-radar :data=\"chartData\"></ve-radar>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),this._m(2),this._m(3),this._m(4)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"lei-da-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lei-da-tu"}},[this._v("¶")]),this._v(" 雷达图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("string")]),e("td",[t._v("默认columns第一项为维度")])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("array")]),e("td",[t._v("默认columns第二项起为指标")])]),e("tr",[e("td",[t._v("dataType")]),e("td",[t._v("数据类型")]),e("td",[t._v("object")]),e("td",[t._v("可选值: KMB, normal, percent")])]),e("tr",[e("td",[t._v("digit")]),e("td",[t._v("设置数据类型为percent时保留的位数")]),e("td",[t._v("number")]),e("td",[t._v("默认为2")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("图形上的文本标签")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-radar.label"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("itemStyle")]),e("td",[t._v("折线拐点标志的样式")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-radar.itemStyle"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("lineStyle")]),e("td",[t._v("线条样式")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-radar.lineStyle"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("areaStyle")]),e("td",[t._v("区域填充样式")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-radar.areaStyle"}},[t._v("文档")])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注：dataType中直接设置对应维度的数据类型，例如示例的"),t("code",[this._v("{ '占比': 'percent' }")]),this._v("，即将占比数据设置为百分比类型")])])}],!1,null,null,null);e.default=a.exports},1346:function(t,e,n){"use strict";n.r(e);var a=n(46),i=n(47),s={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},r={boxShadowLight:"0 2px 12px 0 rgba(0, 0, 0, 0.1)",boxShadowBase:"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)",borderRadiusBase:"4px",borderRadiusSmall:"2px"},l={created:function(){a.a.$on(i.d,this.setGlobal)},mounted:function(){this.setGlobal()},methods:{setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},boxShadowLight:"",boxShadowBase:"",borderRadiusBase:"",borderRadiusSmall:""}},watch:{global:{immediate:!0,handler:function(e){var n=this;Object.keys(s).forEach(function(t){e[t]?n[s[t]]=e[t]:n[s[t]]=r[s[t]]})}}}},n=n(0),l=Object(n.a)(l,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。")]),t._m(1),e("p",[t._v("我们提供了以下几种边框样式，以供选择。")]),t._m(2),t._m(3),e("p",[t._v("我们提供了以下几种圆角样式，以供选择。")]),e("tis-row",{staticClass:"demo-radius",attrs:{gutter:12}},[e("tis-col",{attrs:{span:6,xs:{span:12}}},[e("div",{staticClass:"title"},[t._v("无圆角")]),e("div",{staticClass:"value"},[t._v("border-radius: 0px")]),e("div",{staticClass:"radius"})]),e("tis-col",{attrs:{span:6,xs:{span:12}}},[e("div",{staticClass:"title"},[t._v("小圆角")]),e("div",{staticClass:"value"},[t._v("border-radius: "+t._s(t.borderRadiusSmall))]),e("div",{staticClass:"radius",style:{borderRadius:t.borderRadiusSmall}})]),e("tis-col",{attrs:{span:6,xs:{span:12}}},[e("div",{staticClass:"title"},[t._v("大圆角")]),e("div",{staticClass:"value"},[t._v("border-radius: "+t._s(t.borderRadiusBase))]),e("div",{staticClass:"radius",style:{borderRadius:t.borderRadiusBase}})]),e("tis-col",{attrs:{span:6,xs:{span:12}}},[e("div",{staticClass:"title"},[t._v("圆形圆角")]),e("div",{staticClass:"value"},[t._v("border-radius: 30px")]),e("div",{staticClass:"radius radius-30"})])],1),t._m(4),e("p",[t._v("我们提供了以下几种投影样式，以供选择。")]),e("div",{staticClass:"demo-shadow",style:{boxShadow:t.boxShadowBase}}),e("span",{staticClass:"demo-shadow-text"},[t._v("基础投影 box-shadow: "+t._s(t.boxShadowBase))]),e("div",{staticClass:"demo-shadow",style:{boxShadow:t.boxShadowLight}}),e("span",{staticClass:"demo-shadow-text"},[t._v("浅色投影 box-shadow: "+t._s(t.boxShadowLight))])],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"border-bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#border-bian-kuang"}},[this._v("¶")]),this._v(" Border 边框")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"bian-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bian-kuang"}},[this._v("¶")]),this._v(" 边框")])},function(){var t=this.$createElement,t=this._self._c||t;return t("table",{staticClass:"demo-border"},[t("tbody",[t("tr",[t("td",{staticClass:"text"},[this._v("名称")]),t("td",{staticClass:"text"},[this._v("粗细")]),t("td",{staticClass:"line"},[this._v("举例")])]),t("tr",[t("td",{staticClass:"text"},[this._v("\b实线")]),t("td",{staticClass:"text"},[this._v("1px")]),t("td",{staticClass:"line"},[t("div")])]),t("tr",[t("td",{staticClass:"text"},[this._v("\b虚线")]),t("td",{staticClass:"text"},[this._v("2px")]),t("td",{staticClass:"line"},[t("div",{staticClass:"dashed"})])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"yuan-jiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yuan-jiao"}},[this._v("¶")]),this._v(" 圆角")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"tou-ying"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tou-ying"}},[this._v("¶")]),this._v(" 投影")])}],!1,null,null,null);e.default=l.exports},1347:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-progress",{attrs:{percentage:50}}),this._v(" "),t("tis-progress",{attrs:{percentage:100,format:this.format}}),this._v(" "),t("tis-progress",{attrs:{percentage:100,status:"success"}}),this._v(" "),t("tis-progress",{attrs:{percentage:100,status:"warning"}}),this._v(" "),t("tis-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]},{methods:{format:function(t){return 100===t?"满":t+"%"}}}),"element-demo1":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-progress",{attrs:{"text-inside":!0,"stroke-width":26,percentage:70}}),this._v(" "),t("tis-progress",{attrs:{"text-inside":!0,"stroke-width":24,percentage:100,status:"success"}}),this._v(" "),t("tis-progress",{attrs:{"text-inside":!0,"stroke-width":22,percentage:80,status:"warning"}}),this._v(" "),t("tis-progress",{attrs:{"text-inside":!0,"stroke-width":20,percentage:50,status:"exception"}})],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-progress",{attrs:{type:"circle",percentage:0}}),this._v(" "),t("tis-progress",{attrs:{type:"circle",percentage:25}}),this._v(" "),t("tis-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),this._v(" "),t("tis-progress",{attrs:{type:"circle",percentage:70,status:"warning"}}),this._v(" "),t("tis-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-progress",{attrs:{type:"dashboard",percentage:this.percentage,color:this.colors}}),this._v(" "),t("div",[t("tis-button-group",[t("tis-button",{attrs:{icon:"el-icon-minus"},on:{click:this.decrease}}),this._v(" "),t("tis-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)}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("用于展示操作进度，告知用户当前状态和预期。")]),t._m(1),e("demo-block",[e("div",[e("p",[t._v("Progress 组件设置"),e("code",[t._v("percentage")]),t._v("属性即可，表示进度条对应的百分比，"),e("strong",[t._v("必填")]),t._v("，必须在 0-100。通过 "),e("code",[t._v("format")]),t._v(" 属性来指定进度条文字内容。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-progress :percentage="50"></tis-progress>\n<tis-progress :percentage="100" :format="format"></tis-progress>\n<tis-progress :percentage="100" status="success"></tis-progress>\n<tis-progress :percentage="100" status="warning"></tis-progress>\n<tis-progress :percentage="50" status="exception"></tis-progress>\n\n<script>\n  export default {\n    methods: {\n      format(percentage) {\n        return percentage === 100 ? \'满\' : `${percentage}%`;\n      }\n    }\n  };\n<\/script>\n')])])])],2),t._m(2),e("p",[t._v("百分比不占用额外控件，适用于文件上传等场景。")]),e("demo-block",[e("div",[e("p",[t._v("Progress 组件可通过 "),e("code",[t._v("stroke-width")]),t._v(" 属性更改进度条的高度，并可通过 "),e("code",[t._v("text-inside")]),t._v(" 属性来将进度条描述置于进度条内部。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-progress :text-inside="true" :stroke-width="26" :percentage="70"></tis-progress>\n<tis-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></tis-progress>\n<tis-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></tis-progress>\n<tis-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></tis-progress>\n')])])])],2),t._m(3),t._m(4),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-progress type="circle" :percentage="0"></tis-progress>\n<tis-progress type="circle" :percentage="25"></tis-progress>\n<tis-progress type="circle" :percentage="100" status="success"></tis-progress>\n<tis-progress type="circle" :percentage="70" status="warning"></tis-progress>\n<tis-progress type="circle" :percentage="50" status="exception"></tis-progress>\n')])])])],2),t._m(5),e("demo-block",[e("div",[e("p",[t._v("通过 "),e("code",[t._v("type")]),t._v(" 属性来指定使用仪表盘形进度条。")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('\n<tis-progress type="dashboard" :percentage="percentage" :color="colors"></tis-progress>\n<div>\n  <tis-button-group>\n    <tis-button icon="el-icon-minus" @click="decrease"></tis-button>\n    <tis-button icon="el-icon-plus" @click="increase"></tis-button>\n  </tis-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),t._m(6),t._m(7)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"progress-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress-jin-du-tiao"}},[this._v("¶")]),this._v(" Progress 进度条")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xian-xing-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao"}},[this._v("¶")]),this._v(" 线形进度条")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"bai-fen-bi-nei-xian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bai-fen-bi-nei-xian"}},[this._v("¶")]),this._v(" 百分比内显")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"huan-xing-jin-du-tiao"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#huan-xing-jin-du-tiao"}},[this._v("¶")]),this._v(" 环形进度条")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("Progress 组件可通过 "),t("code",[this._v("type")]),this._v(" 属性来指定使用环形进度条，在环形进度条中，还可以通过 "),t("code",[this._v("width")]),this._v(" 属性来设置其大小。")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 仪表盘形进度条")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[e("strong",[t._v("percentage")])]),e("td",[e("strong",[t._v("百分比（必填）")])]),e("td",[t._v("number")]),e("td",[t._v("0-100")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("type")]),e("td",[t._v("进度条类型")]),e("td",[t._v("string")]),e("td",[t._v("line/circle/dashboard")]),e("td",[t._v("line")])]),e("tr",[e("td",[t._v("stroke-width")]),e("td",[t._v("进度条的宽度，单位 px")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("6")])]),e("tr",[e("td",[t._v("text-inside")]),e("td",[t._v("进度条显示文字内置在进度条内（只在 type=line 时可用）")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("status")]),e("td",[t._v("进度条当前状态")]),e("td",[t._v("string")]),e("td",[t._v("success/exception/warning")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("color")]),e("td",[t._v("进度条背景色（会覆盖 status 状态颜色）")]),e("td",[t._v("string/function/array")]),e("td",[t._v("—")]),e("td",[t._v("''")])]),e("tr",[e("td",[t._v("width")]),e("td",[t._v("环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）")]),e("td",[t._v("number")]),e("td"),e("td",[t._v("126")])]),e("tr",[e("td",[t._v("show-text")]),e("td",[t._v("是否显示进度条文字内容")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("stroke-linecap")]),e("td",[t._v("circle/dashboard 类型路径两端的形状")]),e("td",[t._v("string")]),e("td",[t._v("butt/round/square")]),e("td",[t._v("round")])])])])}],!1,null,null,null);e.default=a.exports},1348:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-breadcrumb",{attrs:{separator:"/"}},[t("tis-breadcrumb-item",{attrs:{to:{path:"/"}}},[this._v("首页")]),this._v(" "),t("tis-breadcrumb-item",[t("a",{attrs:{href:"/"}},[this._v("活动管理")])]),this._v(" "),t("tis-breadcrumb-item",[this._v("活动列表")]),this._v(" "),t("tis-breadcrumb-item",[this._v("活动详情")])],1)],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("显示当前页面的路径，快速返回之前的任意页面。")]),t._m(1),e("p",[t._v("适用广泛的基础用法。")]),e("demo-block",[e("div",[e("p",[t._v("在"),e("code",[t._v("el-breadcrumb")]),t._v("中使用"),e("code",[t._v("el-breadcrumb-item")]),t._v("标签表示从首页开始的每一级。Element 提供了一个"),e("code",[t._v("separator")]),t._v("属性，在"),e("code",[t._v("el-breadcrumb")]),t._v("标签中设置它来决定分隔符，它只能是字符串，默认为斜杠"),e("code",[t._v("/")]),t._v("。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-breadcrumb separator="/">\n  <tis-breadcrumb-item :to="{ path: \'/\' }">首页</tis-breadcrumb-item>\n  <tis-breadcrumb-item><a href="/">活动管理</a></tis-breadcrumb-item>\n  <tis-breadcrumb-item>活动列表</tis-breadcrumb-item>\n  <tis-breadcrumb-item>活动详情</tis-breadcrumb-item>\n</tis-breadcrumb>\n')])])])],2),t._m(2),t._m(3),t._m(4),t._m(5)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"breadcrumb-mian-bao-xie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-mian-bao-xie"}},[this._v("¶")]),this._v(" Breadcrumb 面包屑")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"breadcrumb-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes"}},[this._v("¶")]),this._v(" Breadcrumb Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("separator")]),e("td",[t._v("分隔符")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("斜杠'/'")])]),e("tr",[e("td",[t._v("separator-class")]),e("td",[t._v("图标分隔符 class")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"breadcrumb-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes"}},[this._v("¶")]),this._v(" Breadcrumb Item Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("to")]),e("td",[t._v("路由跳转对象，同 "),e("code",[t._v("vue-router")]),t._v(" 的 "),e("code",[t._v("to")])]),e("td",[t._v("string/object")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("replace")]),e("td",[t._v("在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])])])])}],!1,null,null,null);e.default=a.exports},1349:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[[e("tis-row",[e("tis-button",{on:{click:t.clickFunc}},[t._v("默认按钮")]),t._v(" "),e("tis-button",{attrs:{type:"primary"}},[t._v("主要按钮")]),t._v(" "),e("tis-button",{attrs:{type:"info"}},[t._v("信息按钮")]),t._v(" "),e("tis-button",{attrs:{type:"danger"}},[t._v("危险按钮")])],1),t._v(" "),e("tis-row",[e("tis-button",{attrs:{plain:""}},[t._v("朴素按钮")]),t._v(" "),e("tis-button",{attrs:{type:"primary",plain:""}},[t._v("主要按钮")]),t._v(" "),e("tis-button",{attrs:{type:"info",plain:""}},[t._v("信息按钮")]),t._v(" "),e("tis-button",{attrs:{type:"danger",plain:""}},[t._v("危险按钮")])],1)]],2)},staticRenderFns:[]},{methods:{clickFunc:function(){console.log("开始请求变量"),fetch("http://localhost:3000/build",{method:"POST"}).then(function(t){return t.json()}).then(function(t){console.log("后台编译完成"),console.log("成功",t);t=t.data.css_file;document.getElementById("tisTheme").setAttribute("href",t)}).catch(function(t){console.log("后台编译完成"),console.log("失败",t)})}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("tis-row",[e("tis-button",{attrs:{disabled:""}},[t._v("默认按钮")]),t._v(" "),e("tis-button",{attrs:{type:"primary",disabled:""}},[t._v("主要按钮")]),t._v(" "),e("tis-button",{attrs:{type:"info",disabled:""}},[t._v("信息按钮")]),t._v(" "),e("tis-button",{attrs:{type:"danger",disabled:""}},[t._v("危险按钮")])],1),t._v(" "),e("tis-row",[e("tis-button",{attrs:{plain:"",disabled:""}},[t._v("朴素按钮")]),t._v(" "),e("tis-button",{attrs:{type:"primary",plain:"",disabled:""}},[t._v("主要按钮")]),t._v(" "),e("tis-button",{attrs:{type:"info",plain:"",disabled:""}},[t._v("信息按钮")]),t._v(" "),e("tis-button",{attrs:{type:"danger",plain:"",disabled:""}},[t._v("危险按钮")])],1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-button",{attrs:{type:"text"}},[this._v("文字按钮")]),this._v(" "),t("tis-button",{attrs:{type:"text",disabled:""}},[this._v("文字按钮")])],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("tis-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("tis-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),this._v(" "),t("tis-button",{attrs:{type:"primary",icon:"el-icon-search"}},[this._v("搜索")]),this._v(" "),t("tis-button",{attrs:{type:"primary"}},[this._v("上传"),t("i",{staticClass:"el-icon-upload el-icon--right"})])],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-button-group",[t("tis-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[this._v("上一页")]),this._v(" "),t("tis-button",{attrs:{type:"primary"}},[this._v("下一页"),t("i",{staticClass:"el-icon-arrow-right el-icon--right"})])],1),this._v(" "),t("tis-button-group",[t("tis-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),this._v(" "),t("tis-button",{attrs:{type:"primary",icon:"el-icon-share"}}),this._v(" "),t("tis-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-button",{attrs:{type:"primary",loading:!0}},[this._v("加载中")])],1)},staticRenderFns:[]},{}),"element-demo6":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-row",[t("tis-button",[this._v("默认按钮")]),this._v(" "),t("tis-button",{attrs:{size:"medium"}},[this._v("中等按钮")]),this._v(" "),t("tis-button",{attrs:{size:"small"}},[this._v("小型按钮")])],1)],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("常用的操作按钮。")]),t._m(1),e("p",[t._v("基础的按钮用法。")]),e("demo-block",[e("div",[e("p",[t._v("使用"),e("code",[t._v("type")]),t._v("、"),e("code",[t._v("plain")]),t._v("、"),e("code",[t._v("round")]),t._v("和"),e("code",[t._v("circle")]),t._v("属性来定义 Button 的样式。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-row>\n    <tis-button @click=\"clickFunc\">默认按钮</tis-button>\n    <tis-button type=\"primary\">主要按钮</tis-button>\n    <tis-button type=\"info\">信息按钮</tis-button>\n    <tis-button type=\"danger\">危险按钮</tis-button>\n  </tis-row>\n\n  <tis-row>\n    <tis-button plain>朴素按钮</tis-button>\n    <tis-button type=\"primary\" plain>主要按钮</tis-button>\n    <tis-button type=\"info\" plain>信息按钮</tis-button>\n    <tis-button type=\"danger\" plain>危险按钮</tis-button>\n  </tis-row>\n</template>\n\n<script>\n  export default {\n    methods: {\n      clickFunc() {\n        console.log('开始请求变量');\n        fetch('http://localhost:3000/build', {\n          method: 'POST'\n        }).then(res => res.json()).then(data => {\n          console.log('后台编译完成');\n          console.log('成功', data);\n          const { css_file } = data.data;\n\n          const themeDom = document.getElementById('tisTheme');\n          themeDom.setAttribute('href', css_file)\n        }).catch(error => {\n          console.log('后台编译完成');\n          console.log('失败', error);\n        })\n      }\n    }\n  }\n<\/script>\n")])])])],2),t._m(2),e("p",[t._v("按钮不可用状态。")]),e("demo-block",[e("div",[e("p",[t._v("你可以使用"),e("code",[t._v("disabled")]),t._v("属性来定义按钮是否可用，它接受一个"),e("code",[t._v("Boolean")]),t._v("值。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-row>\n  <tis-button disabled>默认按钮</tis-button>\n  <tis-button type="primary" disabled>主要按钮</tis-button>\n  <tis-button type="info" disabled>信息按钮</tis-button>\n  <tis-button type="danger" disabled>危险按钮</tis-button>\n</tis-row>\n\n<tis-row>\n  <tis-button plain disabled>朴素按钮</tis-button>\n  <tis-button type="primary" plain disabled>主要按钮</tis-button>\n  <tis-button type="info" plain disabled>信息按钮</tis-button>\n  <tis-button type="danger" plain disabled>危险按钮</tis-button>\n</tis-row>\n')])])])],2),t._m(3),e("p",[t._v("没有边框和背景色的按钮。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-button type="text">文字按钮</tis-button>\n<tis-button type="text" disabled>文字按钮</tis-button>\n')])])])],2),t._m(4),e("p",[t._v("带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。")]),e("demo-block",[e("div",[e("p",[t._v("设置"),e("code",[t._v("icon")]),t._v("属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用"),e("code",[t._v("i")]),t._v("标签即可，可以使用自定义图标。")])]),e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-button type="primary" icon="el-icon-edit"></tis-button>\n<tis-button type="primary" icon="el-icon-share"></tis-button>\n<tis-button type="primary" icon="el-icon-delete"></tis-button>\n<tis-button type="primary" icon="el-icon-search">搜索</tis-button>\n<tis-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></tis-button>\n')])])])],2),t._m(5),e("p",[t._v("以按钮组的方式出现，常用于多项类似操作。")]),e("demo-block",[e("div",[e("p",[t._v("使用"),e("code",[t._v("<tis-button-group>")]),t._v("标签来嵌套你的按钮。")])]),e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-button-group>\n  <tis-button type="primary" icon="el-icon-arrow-left">上一页</tis-button>\n  <tis-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></tis-button>\n</tis-button-group>\n<tis-button-group>\n  <tis-button type="primary" icon="el-icon-edit"></tis-button>\n  <tis-button type="primary" icon="el-icon-share"></tis-button>\n  <tis-button type="primary" icon="el-icon-delete"></tis-button>\n</tis-button-group>\n')])])])],2),t._m(6),e("p",[t._v("点击按钮后进行数据加载操作，在按钮上显示加载状态。")]),e("demo-block",[e("div",[e("p",[t._v("要设置为 loading 状态，只要设置"),e("code",[t._v("loading")]),t._v("属性为"),e("code",[t._v("true")]),t._v("即可。")])]),e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-button type="primary" :loading="true">加载中</tis-button>\n')])])])],2),t._m(7),e("p",[t._v("Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),e("demo-block",[e("div",[e("p",[t._v("额外的尺寸："),e("code",[t._v("medium")]),t._v("、"),e("code",[t._v("small")]),t._v("、"),e("code",[t._v("mini")]),t._v("，通过设置"),e("code",[t._v("size")]),t._v("属性来配置它们。")])]),e("template",{slot:"source"},[e("element-demo6")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-row>\n  <tis-button>默认按钮</tis-button>\n  <tis-button size="medium">中等按钮</tis-button>\n  <tis-button size="small">小型按钮</tis-button>\n</tis-row>\n')])])])],2),t._m(8),t._m(9)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"button-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#button-an-niu"}},[this._v("¶")]),this._v(" Button 按钮")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai"}},[this._v("¶")]),this._v(" 禁用状态")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"wen-zi-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wen-zi-an-niu"}},[this._v("¶")]),this._v(" 文字按钮")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"tu-biao-an-niu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-an-niu"}},[this._v("¶")]),this._v(" 图标按钮")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"an-niu-zu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-zu"}},[this._v("¶")]),this._v(" 按钮组")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"jia-zai-zhong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-zhong"}},[this._v("¶")]),this._v(" 加载中")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"bu-tong-chi-cun"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun"}},[this._v("¶")]),this._v(" 不同尺寸")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("size")]),e("td",[t._v("尺寸")]),e("td",[t._v("string")]),e("td",[t._v("medium / small / mini")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("type")]),e("td",[t._v("类型")]),e("td",[t._v("string")]),e("td",[t._v("primary / success / warning / danger / info / text")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("plain")]),e("td",[t._v("是否朴素按钮")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("round")]),e("td",[t._v("是否圆角按钮")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("circle")]),e("td",[t._v("是否圆形按钮")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("loading")]),e("td",[t._v("是否加载中状态")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用状态")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("icon")]),e("td",[t._v("图标类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("autofocus")]),e("td",[t._v("是否默认聚焦")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("native-type")]),e("td",[t._v("原生 type 属性")]),e("td",[t._v("string")]),e("td",[t._v("button / submit / reset")]),e("td",[t._v("button")])])])])}],!1,null,null,null);e.default=a.exports},1350:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,t=e._self._c||t;return t("div",[[t("tis-popover",{attrs:{placement:"top-start",title:"标题",width:"200",trigger:"hover",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[t("tis-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("hover 激活")])],1),e._v(" "),t("tis-popover",{attrs:{placement:"bottom",title:"标题",width:"200",trigger:"click",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[t("tis-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("click 激活")])],1),e._v(" "),t("tis-popover",{ref:"popover",attrs:{placement:"right",title:"标题",width:"200",trigger:"focus",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),e._v(" "),t("tis-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[e._v("focus 激活")]),e._v(" "),t("tis-popover",{attrs:{placement:"bottom",title:"标题",width:"200",trigger:"manual",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"},model:{value:e.visible,callback:function(t){e.visible=t},expression:"visible"}},[t("tis-button",{attrs:{slot:"reference"},on:{click:function(t){e.visible=!e.visible}},slot:"reference"},[e._v("手动激活")])],1)]],2)},staticRenderFns:[]},{data:function(){return{visible:!1}}}),"element-demo1":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[t("tis-table",{attrs:{data:this.gridData}},[t("tis-table-column",{attrs:{width:"150",property:"date",label:"日期"}}),this._v(" "),t("tis-table-column",{attrs:{width:"100",property:"name",label:"姓名"}}),this._v(" "),t("tis-table-column",{attrs:{width:"300",property:"address",label:"地址"}})],1),this._v(" "),t("tis-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 e=this,t=e.$createElement,t=e._self._c||t;return t("div",[t("tis-popover",{attrs:{placement:"top",width:"160"},model:{value:e.visible,callback:function(t){e.visible=t},expression:"visible"}},[t("p",[e._v("这是一段内容这是一段内容确定删除吗？")]),e._v(" "),t("div",{staticStyle:{"text-align":"right",margin:"0"}},[t("tis-button",{attrs:{size:"mini",type:"text"},on:{click:function(t){e.visible=!1}}},[e._v("取消")]),e._v(" "),t("tis-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){e.visible=!1}}},[e._v("确定")])],1),e._v(" "),t("tis-button",{attrs:{slot:"reference"},slot:"reference"},[e._v("删除")])],1)],1)},staticRenderFns:[]},{data:function(){return{visible:!1}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),t._m(2),e("demo-block",[e("div",[e("p",[e("code",[t._v("trigger")]),t._v("属性用于设置何时触发 Popover，支持四种触发方式："),e("code",[t._v("hover")]),t._v("，"),e("code",[t._v("click")]),t._v("，"),e("code",[t._v("focus")]),t._v(" 和 "),e("code",[t._v("manual")]),t._v("。对于触发 Popover 的元素，有两种写法：使用 "),e("code",[t._v('slot="reference"')]),t._v(" 的具名插槽，或使用自定义指令"),e("code",[t._v("v-popover")]),t._v("指向 Popover 的索引"),e("code",[t._v("ref")]),t._v("。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-popover\n    placement="top-start"\n    title="标题"\n    width="200"\n    trigger="hover"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n    <tis-button slot="reference">hover 激活</tis-button>\n  </tis-popover>\n\n  <tis-popover\n    placement="bottom"\n    title="标题"\n    width="200"\n    trigger="click"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n    <tis-button slot="reference">click 激活</tis-button>\n  </tis-popover>\n\n  <tis-popover\n    ref="popover"\n    placement="right"\n    title="标题"\n    width="200"\n    trigger="focus"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n  </tis-popover>\n  <tis-button v-popover:popover>focus 激活</tis-button>\n\n  <tis-popover\n    placement="bottom"\n    title="标题"\n    width="200"\n    trigger="manual"\n    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"\n    v-model="visible">\n    <tis-button slot="reference" @click="visible = !visible">手动激活</tis-button>\n  </tis-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),t._m(3),e("p",[t._v("可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。")]),e("demo-block",[e("div",[e("p",[t._v("利用分发取代"),e("code",[t._v("content")]),t._v("属性")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-popover\n  placement="right"\n  width="400"\n  trigger="click">\n  <tis-table :data="gridData">\n    <tis-table-column width="150" property="date" label="日期"></tis-table-column>\n    <tis-table-column width="100" property="name" label="姓名"></tis-table-column>\n    <tis-table-column width="300" property="address" label="地址"></tis-table-column>\n  </tis-table>\n  <tis-button slot="reference">click 激活</tis-button>\n</tis-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),t._m(4),e("p",[t._v("当然，你还可以嵌套操作，这相比 Dialog 更为轻量：")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-popover\n  placement="top"\n  width="160"\n  v-model="visible">\n  <p>这是一段内容这是一段内容确定删除吗？</p>\n  <div style="text-align: right; margin: 0">\n    <tis-button size="mini" type="text" @click="visible = false">取消</tis-button>\n    <tis-button type="primary" size="mini" @click="visible = false">确定</tis-button>\n  </div>\n  <tis-button slot="reference">删除</tis-button>\n</tis-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false,\n      };\n    }\n  }\n<\/script>\n')])])])],2),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"popover-dan-chu-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover-dan-chu-kuang"}},[this._v("¶")]),this._v(" Popover 弹出框")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("Popover 的属性与 Tooltip 很类似，它们都是基于"),t("code",[this._v("Vue-popper")]),this._v("开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"qian-tao-xin-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-xin-xi"}},[this._v("¶")]),this._v(" 嵌套信息")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"qian-tao-cao-zuo"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-cao-zuo"}},[this._v("¶")]),this._v(" 嵌套操作")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("trigger")]),e("td",[t._v("触发方式")]),e("td",[t._v("String")]),e("td",[t._v("click/focus/hover/manual")]),e("td",[t._v("click")])]),e("tr",[e("td",[t._v("title")]),e("td",[t._v("标题")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("content")]),e("td",[t._v("显示的内容，也可以通过 "),e("code",[t._v("slot")]),t._v(" 传入 DOM")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("width")]),e("td",[t._v("宽度")]),e("td",[t._v("String, Number")]),e("td",[t._v("—")]),e("td",[t._v("最小宽度 150px")])]),e("tr",[e("td",[t._v("placement")]),e("td",[t._v("出现位置")]),e("td",[t._v("String")]),e("td",[t._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),e("td",[t._v("bottom")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("Popover 是否可用")]),e("td",[t._v("Boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("value / v-model")]),e("td",[t._v("状态是否可见")]),e("td",[t._v("Boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("offset")]),e("td",[t._v("出现位置的偏移量")]),e("td",[t._v("Number")]),e("td",[t._v("—")]),e("td",[t._v("0")])]),e("tr",[e("td",[t._v("transition")]),e("td",[t._v("定义渐变动画")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("fade-in-linear")])]),e("tr",[e("td",[t._v("visible-arrow")]),e("td",[t._v("是否显示 Tooltip 箭头，更多参数可见"),e("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[t._v("Vue-popper")])]),e("td",[t._v("Boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("popper-options")]),e("td",[e("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[t._v("popper.js")]),t._v(" 的参数")]),e("td",[t._v("Object")]),e("td",[t._v("参考 "),e("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[t._v("popper.js")]),t._v(" 文档")]),e("td",[e("code",[t._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),e("tr",[e("td",[t._v("popper-class")]),e("td",[t._v("为 popper 添加类名")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("open-delay")]),e("td",[t._v("触发方式为 hover 时的显示延迟，单位为毫秒")]),e("td",[t._v("Number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("close-delay")]),e("td",[t._v("触发方式为 hover 时的隐藏延迟，单位为毫秒")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("200")])]),e("tr",[e("td",[t._v("tabindex")]),e("td",[t._v("Popover 组件的 "),e("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"}},[t._v("tabindex")])]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("0")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[this._v("¶")]),this._v(" Slot")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("show")]),e("td",[t._v("显示时触发")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("after-enter")]),e("td",[t._v("显示动画播放完毕后触发")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("hide")]),e("td",[t._v("隐藏时触发")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("after-leave")]),e("td",[t._v("隐藏动画播放完毕后触发")]),e("td",[t._v("—")])])])])}],!1,null,null,null);e.default=a.exports},1351:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-bar",{attrs:{data:this.chartData}})]],2)},staticRenderFns:[]},{data:function(){return{chartData:{columns:["日期","访问用户","下单用户","下单率"],rows:[{"日期":"1/1","访问用户":1393,"下单用户":1093,"下单率":.32},{"日期":"1/2","访问用户":3530,"下单用户":3230,"下单率":.26},{"日期":"1/3","访问用户":2923,"下单用户":2623,"下单率":.76},{"日期":"1/4","访问用户":1723,"下单用户":1423,"下单率":.49},{"日期":"1/5","访问用户":3792,"下单用户":3492,"下单率":.323},{"日期":"1/6","访问用户":4593,"下单用户":4293,"下单率":.78}]}}}}),"element-demo1":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-bar",{attrs:{data:this.chartData,settings:this.chartSettings}})]],2)},staticRenderFns:[]},{data:function(){return this.chartSettings={dimension:["日期"],metrics:["访问用户"]},{chartData:{columns:["日期","访问用户","下单用户","下单率"],rows:[{"日期":"1/1","访问用户":1393,"下单用户":1093,"下单率":.32},{"日期":"1/2","访问用户":3530,"下单用户":3230,"下单率":.26},{"日期":"1/3","访问用户":2923,"下单用户":2623,"下单率":.76},{"日期":"1/4","访问用户":1723,"下单用户":1423,"下单率":.49},{"日期":"1/5","访问用户":3792,"下单用户":3492,"下单率":.323},{"日期":"1/6","访问用户":4593,"下单用户":4293,"下单率":.78}]}}}}),"element-demo2":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-bar",{attrs:{data:this.chartData,settings:this.chartSettings}})]],2)},staticRenderFns:[]},{data:function(){return this.chartSettings={metrics:["访问用户"],dataOrder:{label:"访问用户",order:"desc"}},{chartData:{columns:["日期","访问用户","下单用户","下单率"],rows:[{"日期":"1/1","访问用户":1393,"下单用户":1093,"下单率":.32},{"日期":"1/2","访问用户":3530,"下单用户":3230,"下单率":.26},{"日期":"1/3","访问用户":2923,"下单用户":2623,"下单率":.76},{"日期":"1/4","访问用户":1723,"下单用户":1423,"下单率":.49},{"日期":"1/5","访问用户":3792,"下单用户":3492,"下单率":.323},{"日期":"1/6","访问用户":4593,"下单用户":4293,"下单率":.78}]}}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <ve-bar :data=\"chartData\"></ve-bar>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),t._m(2),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <ve-bar :data=\"chartData\" :settings=\"chartSettings\"></ve-bar>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        dimension: ['日期'],\n        metrics: ['访问用户']\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),t._m(3),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <ve-bar :data=\"chartData\" :settings=\"chartSettings\"></ve-bar>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        metrics: ['访问用户'],\n        dataOrder: {\n          label: '访问用户',\n          order: 'desc'\n        }\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"tiao-xing-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tiao-xing-tu"}},[this._v("¶")]),this._v(" 条形图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zhi-ding-zhi-biao-wei-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-ding-zhi-biao-wei-du"}},[this._v("¶")]),this._v(" 指定指标维度")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"pai-xu-tiao-xing-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pai-xu-tiao-xing-tu"}},[this._v("¶")]),this._v(" 排序条形图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("array")]),e("td",[t._v("默认columns第一项为维度")])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("array")]),e("td",[t._v("默认columns第二项起为指标")])]),e("tr",[e("td",[t._v("xAxisType")]),e("td",[t._v("上下坐标轴数据类型")]),e("td",[t._v("array")]),e("td",[t._v("可选值: KMB, normal, percent")])]),e("tr",[e("td",[t._v("xAxisName")]),e("td",[t._v("上下坐标轴标题")]),e("td",[t._v("array")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("axisSite")]),e("td",[t._v("指标所在的轴")]),e("td",[t._v("object")]),e("td",[t._v("默认不在top轴的指标都在bottom轴")])]),e("tr",[e("td",[t._v("stack")]),e("td",[t._v("堆叠选项")]),e("td",[t._v("object")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("digit")]),e("td",[t._v("设置数据类型为percent时保留的位数")]),e("td",[t._v("number")]),e("td",[t._v("默认为2")])]),e("tr",[e("td",[t._v("dataOrder")]),e("td",[t._v("设置数据排序方式")]),e("td",[t._v("boolean, object")]),e("td",[t._v("默认为false")])]),e("tr",[e("td",[t._v("scale")]),e("td",[t._v("是否是脱离 0 值比例")]),e("td",[t._v("array")]),e("td",[t._v("默认为[false, false]，表示上下两个轴都不会脱离0值比例。设置成 true 后坐标刻度不会强制包含零刻度")])]),e("tr",[e("td",[t._v("min")]),e("td",[t._v("上下坐标轴最小值")]),e("td",[t._v("array")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("max")]),e("td",[t._v("上下坐标轴最大值")]),e("td",[t._v("array")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("labelMap")]),e("td",[t._v("设置指标的别名，同时作用于提示框和图例")]),e("td",[t._v("object")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("legendName")]),e("td",[t._v("设置图表上方图例的别名")]),e("td",[t._v("object")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("设置图形上的文本标签")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-bar.label"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("itemStyle")]),e("td",[t._v("图形样式")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-bar.itemStyle"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("yAxisType")]),e("td",[t._v("纵轴的类型")]),e("td",[t._v("string")]),e("td",[t._v("可选值'category'，'value'，默认为'category'")])]),e("tr",[e("td",[t._v("opacity")]),e("td",[t._v("透明度")]),e("td",[t._v("number")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注1. axisSite 可以设置 top 和 bottom，例如示例所示 "),t("code",[this._v("axisSite: { top: ['占比'] }")]),this._v(" 即将占比的数据置于上轴上。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注2. stack 用于将两数据堆叠起来，例如实例中所示"),t("code",[this._v("stack: { '销售额': ['销售额-1季度', '销售额-2季度'] }")]),this._v(" 即将'销售额-1季度', '销售额-2季度'相应的数据堆叠在一起。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注3. dataOrder 用于设置数据的排序方式，用于更加清晰的展示数据的升降。例如： "),t("code",[this._v("{ label: '成本', order: 'asc }")]),this._v(" 表示数据按照成本指标升序展示，降序为"),t("code",[this._v("desc")]),this._v("。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注4. min和max的值可以直接设置为数字，例如："),t("code",[this._v("[100, 300]")]),this._v("；也可以设置为"),t("code",[this._v("['dataMin', 'dataMin']")]),this._v(", "),t("code",[this._v("['dataMax', 'dataMax']")]),this._v("，此时表示使用该坐标轴上的最小值或最大值为最小或最大刻度。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注5. 为了优化连续的数值型横轴显示多指标的时候样式，在此情况下默认设置opacity为0.5。")])])}],!1,null,null,null);e.default=a.exports},1352:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-popconfirm",{attrs:{title:"这是一段内容确定删除吗？"}},[t("tis-button",{attrs:{slot:"reference"},slot:"reference"},[this._v("删除")])],1)]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-popconfirm",{attrs:{"confirm-button-text":"好的","cancel-button-text":"不用了",icon:"el-icon-info","icon-color":"red",title:"这是一段内容确定删除吗？"}},[t("tis-button",{attrs:{slot:"reference"},slot:"reference"},[this._v("删除")])],1)]],2)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("点击元素，弹出气泡确认框。")]),t._m(1),e("p",[t._v("Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考 Popover 的文档，在此文档中不做详尽解释。")]),e("demo-block",[e("div",[e("p",[t._v("在 Popconfirm 中，只有 "),e("code",[t._v("title")]),t._v(" 属性可用，"),e("code",[t._v("content")]),t._v(" 属性不会被展示。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n<tis-popconfirm\n  title="这是一段内容确定删除吗？"\n>\n  <tis-button slot="reference">删除</tis-button>\n</tis-popconfirm>\n</template>\n')])])])],2),t._m(2),e("p",[t._v("可以在 Popconfirm 中自定义内容。")]),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n<tis-popconfirm\n  confirm-button-text=\'好的\'\n  cancel-button-text=\'不用了\'\n  icon="el-icon-info"\n  icon-color="red"\n  title="这是一段内容确定删除吗？"\n>\n  <tis-button slot="reference">删除</tis-button>\n</tis-popconfirm>\n</template>\n')])])])],2),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"popconfirm-qi-pao-que-ren-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popconfirm-qi-pao-que-ren-kuang"}},[this._v("¶")]),this._v(" Popconfirm 气泡确认框")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"zi-ding-yi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi"}},[this._v("¶")]),this._v(" 自定义")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("title")]),e("td",[t._v("标题")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("confirm-button-text")]),e("td",[t._v("确认按钮文字")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("cancel-button-text")]),e("td",[t._v("取消按钮文字")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("confirm-button-type")]),e("td",[t._v("确认按钮类型")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("Primary")])]),e("tr",[e("td",[t._v("cancel-button-type")]),e("td",[t._v("取消按钮类型")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("Text")])]),e("tr",[e("td",[t._v("icon")]),e("td",[t._v("Icon")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("el-icon-question")])]),e("tr",[e("td",[t._v("icon-color")]),e("td",[t._v("Icon 颜色")]),e("td",[t._v("String")]),e("td",[t._v("—")]),e("td",[t._v("#f90")])]),e("tr",[e("td",[t._v("hide-icon")]),e("td",[t._v("是否隐藏 Icon")]),e("td",[t._v("Boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[this._v("¶")]),this._v(" Slot")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("confirm")]),e("td",[t._v("点击确认按钮时触发")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("cancel")]),e("td",[t._v("点击取消按钮时触发")]),e("td",[t._v("—")])])])])}],!1,null,null,null);e.default=a.exports},1353:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-pie",{attrs:{data:this.chartData}})]],2)},staticRenderFns:[]},{data:function(){return{chartData:{columns:["日期","访问用户"],rows:[{"日期":"1/1","访问用户":1393},{"日期":"1/2","访问用户":3530},{"日期":"1/3","访问用户":2923},{"日期":"1/4","访问用户":1723},{"日期":"1/5","访问用户":3792},{"日期":"1/6","访问用户":4593}]}}}}),"element-demo1":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-pie",{attrs:{data:this.chartData,settings:this.chartSettings}})]],2)},staticRenderFns:[]},{data:function(){return this.chartSettings={dimension:"日期",metrics:"访问用户"},{chartData:{columns:["日期","访问用户"],rows:[{"日期":"1/1","访问用户":1393},{"日期":"1/2","访问用户":3530},{"日期":"1/3","访问用户":2923},{"日期":"1/4","访问用户":1723},{"日期":"1/5","访问用户":3792},{"日期":"1/6","访问用户":4593}]}}}}),"element-demo2":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-pie",{attrs:{data:this.chartData,settings:this.chartSettings}})]],2)},staticRenderFns:[]},{data:function(){return this.chartSettings={roseType:"radius"},{chartData:{columns:["日期","访问用户"],rows:[{"日期":"1/1","访问用户":1393},{"日期":"1/2","访问用户":3530},{"日期":"1/3","访问用户":2923},{"日期":"1/4","访问用户":1723},{"日期":"1/5","访问用户":3792},{"日期":"1/6","访问用户":4593}]}}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <ve-pie :data=\"chartData\"></ve-pie>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['日期', '访问用户'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393 },\n            { '日期': '1/2', '访问用户': 3530 },\n            { '日期': '1/3', '访问用户': 2923 },\n            { '日期': '1/4', '访问用户': 1723 },\n            { '日期': '1/5', '访问用户': 3792 },\n            { '日期': '1/6', '访问用户': 4593 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),t._m(2),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <ve-pie :data=\"chartData\" :settings=\"chartSettings\"></ve-pie>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        dimension: '日期',\n        metrics: '访问用户'\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393 },\n            { '日期': '1/2', '访问用户': 3530 },\n            { '日期': '1/3', '访问用户': 2923 },\n            { '日期': '1/4', '访问用户': 1723 },\n            { '日期': '1/5', '访问用户': 3792 },\n            { '日期': '1/6', '访问用户': 4593 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),t._m(3),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <ve-pie :data=\"chartData\" :settings=\"chartSettings\"></ve-pie>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        roseType: 'radius'\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393 },\n            { '日期': '1/2', '访问用户': 3530 },\n            { '日期': '1/3', '访问用户': 2923 },\n            { '日期': '1/4', '访问用户': 1723 },\n            { '日期': '1/5', '访问用户': 3792 },\n            { '日期': '1/6', '访问用户': 4593 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),t._m(4),t._m(5),t._m(6)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"bing-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bing-tu"}},[this._v("¶")]),this._v(" 饼图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"she-zhi-zhi-biao-wei-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-zhi-biao-wei-du"}},[this._v("¶")]),this._v(" 设置指标维度")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"mei-gui-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mei-gui-tu"}},[this._v("¶")]),this._v(" 玫瑰图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("string")]),e("td",[t._v("默认columns第一项为维度")])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("string")]),e("td",[t._v("默认columns第二项为指标")])]),e("tr",[e("td",[t._v("dataType")]),e("td",[t._v("数据类型")]),e("td",[t._v("string")]),e("td",[t._v("可选值: KMB, normal, percent")])]),e("tr",[e("td",[t._v("legendLimit")]),e("td",[t._v("legend显示数量限制")]),e("td",[t._v("number")]),e("td",[t._v("legend数量过多会导致饼图样式错误，限制legend最大值并且当超过此值时，隐藏legend可以解决这个问题")])]),e("tr",[e("td",[t._v("selectedMode")]),e("td",[t._v("选中模式")]),e("td",[t._v("string")]),e("td",[t._v("可选值：single, multiple，默认为false")])]),e("tr",[e("td",[t._v("hoverAnimation")]),e("td",[t._v("是否开启 hover 在扇区上的放大动画效果")]),e("td",[t._v("boolean")]),e("td",[t._v("默认值为true")])]),e("tr",[e("td",[t._v("radius")]),e("td",[t._v("饼图半径")]),e("td",[t._v("number")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("offsetY")]),e("td",[t._v("纵向偏移量")]),e("td",[t._v("number")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("digit")]),e("td",[t._v("设置数据类型为percent时保留的位数")]),e("td",[t._v("number")]),e("td",[t._v("默认为2")])]),e("tr",[e("td",[t._v("roseType")]),e("td",[t._v("显示为南丁格尔玫瑰图")]),e("td",[t._v("string")]),e("td",[t._v("默认不展示为南丁格尔玫瑰图，可设置为"),e("code",[t._v("'radius', 'area'")])])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("饼图图形上的文本标签")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-pie.label"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("labelLine")]),e("td",[t._v("标签的视觉引导线样式")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-pie.labelLine"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("itemStyle")]),e("td",[t._v("图形样式")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-pie.itemStyle"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("level")]),e("td",[t._v("多圆饼图时设置")]),e("td",[t._v("array")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("limitShowNum")]),e("td",[t._v("设置超过此数字时使用‘其他’代替")]),e("td",[t._v("number")]),e("td",[t._v("此时数据会按照由大到小顺序显示")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注1. level 的值接受二维数组，例如："),t("code",[this._v("[['a', 'b'], ['c', 'd']]")]),this._v(", 表示的含义是内层展示的是维度中的"),t("code",[this._v("'a', 'b'")]),this._v("的指标加在一起组成的饼图，外层为"),t("code",[this._v("'c', 'd'")]),this._v("的指标加在一起组成的环图。")])])}],!1,null,null,null);e.default=a.exports},1354:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var e=this;this.$alert("这是一段内容","标题名称",{confirmButtonText:"确定",callback:function(t){e.$message({type:"info",message:"action: "+t})}})}}}),"element-demo1":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("点击打开 Message Box")])]],2)},staticRenderFns:[]},{methods:{open:function(){var t=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(function(){t.$message({type:"success",message:"删除成功!"})}).catch(function(){t.$message({type:"info",message:"已取消删除"})})}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。")]),t._m(1),t._m(2),e("p",[t._v("当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。")]),e("demo-block",[e("div",[e("p",[t._v("调用"),e("code",[t._v("$alert")]),t._v("方法即可打开消息提示，它模拟了系统的 "),e("code",[t._v("alert")]),t._v("，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，"),e("code",[t._v("message")]),t._v("和"),e("code",[t._v("title")]),t._v("。值得一提的是，窗口被关闭后，它默认会返回一个"),e("code",[t._v("Promise")]),t._v("对象便于进行后续操作的处理。若不确定浏览器是否支持"),e("code",[t._v("Promise")]),t._v("，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-button type=\"text\" @click=\"open\">点击打开 Message Box</tis-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),t._m(3),e("p",[t._v("提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。")]),e("demo-block",[e("div",[e("p",[t._v("调用"),e("code",[t._v("$confirm")]),t._v("方法即可打开消息提示，它模拟了系统的 "),e("code",[t._v("confirm")]),t._v("。Message Box 组件也拥有极高的定制性，我们可以传入"),e("code",[t._v("options")]),t._v("作为第三个参数，它是一个字面量对象。"),e("code",[t._v("type")]),t._v("字段表明消息类型，可以为"),e("code",[t._v("success")]),t._v("，"),e("code",[t._v("error")]),t._v("，"),e("code",[t._v("info")]),t._v("和"),e("code",[t._v("warning")]),t._v("，无效的设置将会被忽略。注意，第二个参数"),e("code",[t._v("title")]),t._v("必须定义为"),e("code",[t._v("String")]),t._v("类型，如果是"),e("code",[t._v("Object")]),t._v("，会被理解为"),e("code",[t._v("options")]),t._v("。在这里我们用了 Promise 来处理后续响应。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-button type=\"text\" @click=\"open\">点击打开 Message Box</tis-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),t._m(4),t._m(5)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"messagebox-dan-kuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox-dan-kuang"}},[this._v("¶")]),this._v(" MessageBox 弹框")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xiao-xi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xi-ti-shi"}},[this._v("¶")]),this._v(" 消息提示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"que-ren-xiao-xi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#que-ren-xiao-xi"}},[this._v("¶")]),this._v(" 确认消息")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options"}},[this._v("¶")]),this._v(" Options")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("title")]),e("td",[t._v("MessageBox 标题")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("message")]),e("td",[t._v("MessageBox 消息正文内容")]),e("td",[t._v("string / VNode")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("dangerouslyUseHTMLString")]),e("td",[t._v("是否将 message 属性作为 HTML 片段处理")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("type")]),e("td",[t._v("消息类型，用于显示图标")]),e("td",[t._v("string")]),e("td",[t._v("success / info / warning / error")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("iconClass")]),e("td",[t._v("自定义图标的类名，会覆盖 "),e("code",[t._v("type")])]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("customClass")]),e("td",[t._v("MessageBox 的自定义类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("callback")]),e("td",[t._v("若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调")]),e("td",[t._v("function(action, instance)，action 的值为'confirm', 'cancel'或'close', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("showClose")]),e("td",[t._v("MessageBox 是否显示右上角关闭按钮")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("beforeClose")]),e("td",[t._v("MessageBox 关闭前的回调，会暂停实例的关闭")]),e("td",[t._v("function(action, instance, done)，action 的值为'confirm', 'cancel'或'close'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("distinguishCancelAndClose")]),e("td",[t._v("是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 ESC 键）进行区分")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("lockScroll")]),e("td",[t._v("是否在 MessageBox 出现时将 body 滚动锁定")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("showCancelButton")]),e("td",[t._v("是否显示取消按钮")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false（以 confirm 和 prompt 方式调用时为 true）")])]),e("tr",[e("td",[t._v("showConfirmButton")]),e("td",[t._v("是否显示确定按钮")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("cancelButtonText")]),e("td",[t._v("取消按钮的文本内容")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("取消")])]),e("tr",[e("td",[t._v("confirmButtonText")]),e("td",[t._v("确定按钮的文本内容")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("确定")])]),e("tr",[e("td",[t._v("cancelButtonClass")]),e("td",[t._v("取消按钮的自定义类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("confirmButtonClass")]),e("td",[t._v("确定按钮的自定义类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("closeOnClickModal")]),e("td",[t._v("是否可通过点击遮罩关闭 MessageBox")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true（以 alert 方式调用时为 false）")])]),e("tr",[e("td",[t._v("closeOnPressEscape")]),e("td",[t._v("是否可通过按下 ESC 键关闭 MessageBox")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true（以 alert 方式调用时为 false）")])]),e("tr",[e("td",[t._v("closeOnHashChange")]),e("td",[t._v("是否在 hashchange 时关闭 MessageBox")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("showInput")]),e("td",[t._v("是否显示输入框")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false（以 prompt 方式调用时为 true）")])]),e("tr",[e("td",[t._v("inputPlaceholder")]),e("td",[t._v("输入框的占位符")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("inputType")]),e("td",[t._v("输入框的类型")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("text")])]),e("tr",[e("td",[t._v("inputValue")]),e("td",[t._v("输入框的初始文本")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("inputPattern")]),e("td",[t._v("输入框的校验表达式")]),e("td",[t._v("regexp")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("inputValidator")]),e("td",[t._v("输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage")]),e("td",[t._v("function")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("inputErrorMessage")]),e("td",[t._v("校验未通过时的提示文本")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("输入的数据不合法!")])]),e("tr",[e("td",[t._v("center")]),e("td",[t._v("是否居中布局")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("roundButton")]),e("td",[t._v("是否使用圆角按钮")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])])])])}],!1,null,null,null);e.default=a.exports},1355:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-funnel",{attrs:{data:this.chartData}})]],2)},staticRenderFns:[]},{data:function(){return{chartData:{columns:["状态","数值"],rows:[{"状态":"展示","数值":900},{"状态":"访问","数值":600},{"状态":"点击","数值":300},{"状态":"订单","数值":100}]}}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this.$createElement,t=this._self._c||t;return t("section",{staticClass:"content element-doc"},[this._m(0),this._m(1),t("demo-block",[t("template",{slot:"source"},[t("element-demo0")],1),t("template",{slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"html"}},[this._v("<template>\n  <ve-funnel :data=\"chartData\"></ve-funnel>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['状态', '数值'],\n          rows: [\n            { '状态': '展示', '数值': 900 },\n            { '状态': '访问', '数值': 600 },\n            { '状态': '点击', '数值': 300 },\n            { '状态': '订单', '数值': 100 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),this._m(2),this._m(3)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"lou-dou-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lou-dou-tu"}},[this._v("¶")]),this._v(" 漏斗图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("string")]),e("td",[t._v("默认columns第一项为维度")])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("string")]),e("td",[t._v("默认columns第二项为指标")])]),e("tr",[e("td",[t._v("dataType")]),e("td",[t._v("数据类型")]),e("td",[t._v("string")]),e("td",[t._v("可选值: KMB, normal, percent")])]),e("tr",[e("td",[t._v("sequence")]),e("td",[t._v("数据显示顺序")]),e("td",[t._v("array")]),e("td",[t._v("默认按照数据大小顺序")])]),e("tr",[e("td",[t._v("ascending")]),e("td",[t._v("是否显示为金字塔")]),e("td",[t._v("boolean")]),e("td",[t._v("默认为false")])]),e("tr",[e("td",[t._v("useDefaultOrder")]),e("td",[t._v("是否自动按照数值大小排序")]),e("td",[t._v("boolean")]),e("td",[t._v("默认为false")])]),e("tr",[e("td",[t._v("filterZero")]),e("td",[t._v("是否过滤指标为0的数据")]),e("td",[t._v("boolean")]),e("td",[t._v("默认为false")])]),e("tr",[e("td",[t._v("digit")]),e("td",[t._v("设置数据类型为percent时保留的位数")]),e("td",[t._v("number")]),e("td",[t._v("默认为2")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("设置文本标签样式")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-funnel.label"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("labelLine")]),e("td",[t._v("设置标签的视觉引导线样式")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-funnel.labelLine"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("itemStyle")]),e("td",[t._v("设置图形样式")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-funnel.itemStyle"}},[t._v("文档")])])])])])}],!1,null,null,null);e.default=a.exports},1356:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration",staticStyle:{color:"#fff"}},[this._v("页数较少时的效果")]),this._v(" "),t("tis-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration",staticStyle:{color:"#fff"}},[this._v("大于 7 页时的效果")]),this._v(" "),t("tis-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]},{})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("当数据量过多时，使用分页分解数据。")]),t._m(1),e("demo-block",[e("div",[e("p",[t._v("设置"),e("code",[t._v("layout")]),t._v("，表示需要显示的内容，用逗号分隔，布局元素会依次显示。"),e("code",[t._v("prev")]),t._v("表示上一页，"),e("code",[t._v("next")]),t._v("为下一页，"),e("code",[t._v("pager")]),t._v("表示页码列表，除此以外还提供了"),e("code",[t._v("jumper")]),t._v("和"),e("code",[t._v("total")]),t._v("，"),e("code",[t._v("size")]),t._v("和特殊的布局符号"),e("code",[t._v("->")]),t._v("，"),e("code",[t._v("->")]),t._v("后的元素会靠右显示，"),e("code",[t._v("jumper")]),t._v("表示跳页元素，"),e("code",[t._v("total")]),t._v("表示总条目数，"),e("code",[t._v("size")]),t._v("用于设置每页显示的页码数量。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="block">\n  <span class="demonstration" style="color:#fff">页数较少时的效果</span>\n  <tis-pagination\n    layout="prev, pager, next"\n    :total="50">\n  </tis-pagination>\n</div>\n<div class="block">\n  <span class="demonstration" style="color:#fff">大于 7 页时的效果</span>\n  <tis-pagination\n    layout="prev, pager, next"\n    :total="1000">\n  </tis-pagination>\n</div>\n')])])])],2),t._m(2),e("demo-block",[e("div",[e("p",[t._v("设置"),e("code",[t._v("background")]),t._v("属性可以为分页按钮添加背景色。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-pagination\n  background\n  layout="prev, pager, next"\n  :total="1000">\n</tis-pagination>\n')])])])],2),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"pagination-fen-ye"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination-fen-ye"}},[this._v("¶")]),this._v(" Pagination 分页")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 带有背景色的分页")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("small")]),e("td",[t._v("是否使用小型分页样式")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("background")]),e("td",[t._v("是否为分页按钮添加背景色")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("page-size")]),e("td",[t._v("每页显示条目个数，支持 .sync 修饰符")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("10")])]),e("tr",[e("td",[t._v("total")]),e("td",[t._v("总条目数")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("page-count")]),e("td",[t._v("总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性")]),e("td",[t._v("Number")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("pager-count")]),e("td",[t._v("页码按钮的数量，当总页数超过该值时会折叠")]),e("td",[t._v("number")]),e("td",[t._v("大于等于 5 且小于等于 21 的奇数")]),e("td",[t._v("7")])]),e("tr",[e("td",[t._v("current-page")]),e("td",[t._v("当前页数，支持 .sync 修饰符")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("1")])]),e("tr",[e("td",[t._v("layout")]),e("td",[t._v("组件布局，子组件名用逗号分隔")]),e("td",[t._v("String")]),e("td",[e("code",[t._v("sizes")]),t._v(", "),e("code",[t._v("prev")]),t._v(", "),e("code",[t._v("pager")]),t._v(", "),e("code",[t._v("next")]),t._v(", "),e("code",[t._v("jumper")]),t._v(", "),e("code",[t._v("->")]),t._v(", "),e("code",[t._v("total")]),t._v(", "),e("code",[t._v("slot")])]),e("td",[t._v("'prev, pager, next, jumper, ->, total'")])]),e("tr",[e("td",[t._v("page-sizes")]),e("td",[t._v("每页显示个数选择器的选项设置")]),e("td",[t._v("number[]")]),e("td",[t._v("—")]),e("td",[t._v("[10, 20, 30, 40, 50, 100]")])]),e("tr",[e("td",[t._v("popper-class")]),e("td",[t._v("每页显示个数选择器的下拉框类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("prev-text")]),e("td",[t._v("替代图标显示的上一页文字")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("next-text")]),e("td",[t._v("替代图标显示的下一页文字")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("disabled")]),e("td",[t._v("是否禁用")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("hide-on-single-page")]),e("td",[t._v("只有一页时是否隐藏")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("size-change")]),e("td",[t._v("pageSize 改变时会触发")]),e("td",[t._v("每页条数")])]),e("tr",[e("td",[t._v("current-change")]),e("td",[t._v("currentPage 改变时会触发")]),e("td",[t._v("当前页")])]),e("tr",[e("td",[t._v("prev-click")]),e("td",[t._v("用户点击上一页按钮改变当前页后触发")]),e("td",[t._v("当前页")])]),e("tr",[e("td",[t._v("next-click")]),e("td",[t._v("用户点击下一页按钮改变当前页后触发")]),e("td",[t._v("当前页")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[this._v("¶")]),this._v(" Slot")])},function(){var t=this.$createElement,t=this._self._c||t;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);e.default=a.exports},1357:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-gantt",{attrs:{height:"600px",data:this.chartData}})]],2)},staticRenderFns:[]},{data:function(){return{chartData:{columns:["日期","访问用户","下单用户","下单率"],rows:[{"日期":"1/1","访问用户":1393,"下单用户":1093,"下单率":.32},{"日期":"1/2","访问用户":3530,"下单用户":3230,"下单率":.26},{"日期":"1/3","访问用户":2923,"下单用户":2623,"下单率":.76},{"日期":"1/4","访问用户":1723,"下单用户":1423,"下单率":.49},{"日期":"1/5","访问用户":3792,"下单用户":3492,"下单率":.323},{"日期":"1/6","访问用户":4593,"下单用户":4293,"下单率":.78}]},options:{}}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this.$createElement,t=this._self._c||t;return t("section",{staticClass:"content element-doc"},[this._m(0),this._m(1),t("demo-block",[t("template",{slot:"source"},[t("element-demo0")],1),t("template",{slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"html"}},[this._v("<template>\n  <ve-gantt \n  height=\"600px\"\n  :data=\"chartData\"/>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n            columns: ['日期', '访问用户', '下单用户', '下单率'],\n            rows: [\n                { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n                { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n                { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n                { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n                { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n                { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n            ]\n        },\n        options: {}\n      }\n    }\n  }\n<\/script>\n")])])])],2)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"gan-te-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gan-te-tu"}},[this._v("¶")]),this._v(" 甘特图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])}],!1,null,null,null);e.default=a.exports},1358:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[t("tis-page-header",{attrs:{content:"详情页面"},on:{back:this.goBack}})],1)},staticRenderFns:[]},{methods:{goBack:function(){console.log("go back")}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。")]),t._m(1),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<tis-page-header @back="goBack" content="详情页面">\n</tis-page-header>\n\n<script>\n  export default {\n    methods: {\n      goBack() {\n        console.log(\'go back\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),t._m(2),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"pageheader-ye-tou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pageheader-ye-tou"}},[this._v("¶")]),this._v(" PageHeader 页头")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu"}},[this._v("¶")]),this._v(" 基础")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[this._v("¶")]),this._v(" Attributes")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("title")]),e("td",[t._v("标题")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("返回")])]),e("tr",[e("td",[t._v("content")]),e("td",[t._v("内容")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("¶")]),this._v(" Events")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots"}},[this._v("¶")]),this._v(" Slots")])},function(){var t=this.$createElement,t=this._self._c||t;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);e.default=a.exports},1359:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-button",{attrs:{plain:!0},on:{click:this.open}},[this._v("打开消息提示")]),this._v(" "),t("tis-button",{attrs:{plain:!0},on:{click:this.openVn}},[this._v("VNode")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$message("这是一条消息提示")},openVn:function(){var t=this.$createElement;this.$message({message:t("p",null,[t("span",null,"内容可以是 "),t("i",{style:"color: teal"},"VNode")])})}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[[e("tis-button",{attrs:{plain:!0},on:{click:t.open2}},[t._v("成功")]),t._v(" "),e("tis-button",{attrs:{plain:!0},on:{click:t.open3}},[t._v("警告")]),t._v(" "),e("tis-button",{attrs:{plain:!0},on:{click:t.open1}},[t._v("消息")]),t._v(" "),e("tis-button",{attrs:{plain:!0},on:{click:t.open4}},[t._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 t=this,e=t.$createElement,e=t._self._c||e;return e("div",[[e("tis-button",{attrs:{plain:!0},on:{click:t.open1}},[t._v("消息")]),t._v(" "),e("tis-button",{attrs:{plain:!0},on:{click:t.open2}},[t._v("成功")]),t._v(" "),e("tis-button",{attrs:{plain:!0},on:{click:t.open3}},[t._v("警告")]),t._v(" "),e("tis-button",{attrs:{plain:!0},on:{click:t.open4}},[t._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"})}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。")]),t._m(1),e("p",[t._v("从顶部出现，3 秒后自动消失。")]),e("demo-block",[e("div",[e("p",[t._v("Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个"),e("code",[t._v("$message")]),t._v("方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-button :plain=\"true\" @click=\"open\">打开消息提示</tis-button>\n  <tis-button :plain=\"true\" @click=\"openVn\">VNode</tis-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),t._m(2),e("p",[t._v("用来显示「成功、警告、消息、错误」类的操作反馈。")]),e("demo-block",[e("div",[e("p",[t._v("当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置"),e("code",[t._v("type")]),t._v("字段可以定义不同的状态，默认为"),e("code",[t._v("info")]),t._v("。此时正文内容以"),e("code",[t._v("message")]),t._v("的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入"),e("code",[t._v("type")]),t._v("字段的情况下像"),e("code",[t._v("open4")]),t._v("那样直接调用。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-button :plain="true" @click="open2">成功</tis-button>\n  <tis-button :plain="true" @click="open3">警告</tis-button>\n  <tis-button :plain="true" @click="open1">消息</tis-button>\n  <tis-button :plain="true" @click="open4">错误</tis-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),t._m(3),e("p",[t._v("可以添加关闭按钮。")]),e("demo-block",[e("div",[e("p",[t._v("默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用"),e("code",[t._v("showClose")]),t._v("字段。此外，和 Notification 一样，Message 拥有可控的"),e("code",[t._v("duration")]),t._v("，设置"),e("code",[t._v("0")]),t._v("为不会被自动关闭，默认为 3000 毫秒。")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v('<template>\n  <tis-button :plain="true" @click="open1">消息</tis-button>\n  <tis-button :plain="true" @click="open2">成功</tis-button>\n  <tis-button :plain="true" @click="open3">警告</tis-button>\n  <tis-button :plain="true" @click="open4">错误</tis-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),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"message-xiao-xi-ti-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message-xiao-xi-ti-shi"}},[this._v("¶")]),this._v(" Message 消息提示")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-chu-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[this._v("¶")]),this._v(" 基础用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"bu-tong-zhuang-tai"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-zhuang-tai"}},[this._v("¶")]),this._v(" 不同状态")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ke-guan-bi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ke-guan-bi"}},[this._v("¶")]),this._v(" 可关闭")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",{staticClass:"warning"},[e("p",[e("code",[t._v("message")]),t._v(" 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 "),e("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[t._v("XSS 攻击")]),t._v("。因此在 "),e("code",[t._v("dangerouslyUseHTMLString")]),t._v(" 打开的情况下，请确保 "),e("code",[t._v("message")]),t._v(" 的内容是可信的，"),e("strong",[t._v("永远不要")]),t._v("将用户提交的内容赋值给 "),e("code",[t._v("message")]),t._v(" 属性。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options"}},[this._v("¶")]),this._v(" Options")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("message")]),e("td",[t._v("消息文字")]),e("td",[t._v("string / VNode")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("type")]),e("td",[t._v("主题")]),e("td",[t._v("string")]),e("td",[t._v("success/warning/info/error")]),e("td",[t._v("info")])]),e("tr",[e("td",[t._v("iconClass")]),e("td",[t._v("自定义图标的类名，会覆盖 "),e("code",[t._v("type")])]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("dangerouslyUseHTMLString")]),e("td",[t._v("是否将 message 属性作为 HTML 片段处理")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("customClass")]),e("td",[t._v("自定义类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("duration")]),e("td",[t._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("3000")])]),e("tr",[e("td",[t._v("showClose")]),e("td",[t._v("是否显示关闭按钮")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("center")]),e("td",[t._v("文字是否居中")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("onClose")]),e("td",[t._v("关闭时的回调函数, 参数为被关闭的 message 实例")]),e("td",[t._v("function")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("offset")]),e("td",[t._v("Message 距离窗口顶部的偏移量")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("20")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa"}},[this._v("¶")]),this._v(" 方法")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;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);e.default=a.exports},1360:function(t,e,n){"use strict";n.r(e);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t})({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-graph",{attrs:{height:"500px",data:this.chartData}})]],2)},staticRenderFns:[]},{data:function(){return{chartData:{columns:["日期","访问用户","下单用户","下单率"],rows:[{"日期":"1/1","访问用户":1393,"下单用户":1093,"下单率":.32},{"日期":"1/2","访问用户":3530,"下单用户":3230,"下单率":.26},{"日期":"1/3","访问用户":2923,"下单用户":2623,"下单率":.76},{"日期":"1/4","访问用户":1723,"下单用户":1423,"下单率":.49},{"日期":"1/5","访问用户":3792,"下单用户":3492,"下单率":.323},{"日期":"1/6","访问用户":4593,"下单用户":4293,"下单率":.78}]},options:{}}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this.$createElement,t=this._self._c||t;return t("section",{staticClass:"content element-doc"},[this._m(0),this._m(1),t("demo-block",[t("template",{slot:"source"},[t("element-demo0")],1),t("template",{slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"html"}},[this._v("<template>\n  <ve-graph \n  height=\"500px\"\n  :data=\"chartData\"/>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n            columns: ['日期', '访问用户', '下单用户', '下单率'],\n            rows: [\n                { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n                { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n                { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n                { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n                { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n                { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n            ]\n        },\n        options: {}\n      }\n    }\n  }\n<\/script>\n")])])])],2)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"tuo-bu-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tuo-bu-tu"}},[this._v("¶")]),this._v(" 拓扑图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])}],!1,null,null,null);e.default=a.exports},1361:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("tis-button",{attrs:{plain:""},on:{click:this.open1}},[this._v("\n    可自动关闭\n  ")]),this._v(" "),t("tis-button",{attrs:{plain:""},on:{click:this.open2}},[this._v("\n    不会自动关闭\n    ")])]],2)},staticRenderFns:[]},{methods:{open1:function(){var t=this.$createElement;this.$notify({title:"标题名称",message:t("i",{style:"color: teal"},"这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案")})},open2:function(){this.$notify({title:"提示",message:"这是一条不会自动关闭的消息",duration:0})}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[[e("tis-button",{attrs:{plain:""},on:{click:t.open1}},[t._v("\n    成功\n  ")]),t._v(" "),e("tis-button",{attrs:{plain:""},on:{click:t.open2}},[t._v("\n    警告\n  ")]),t._v(" "),e("tis-button",{attrs:{plain:""},on:{click:t.open3}},[t._v("\n    消息\n  ")]),t._v(" "),e("tis-button",{attrs:{plain:""},on:{click:t.open4}},[t._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 t=this,e=t.$createElement,e=t._self._c||e;return e("div",[[e("tis-button",{attrs:{plain:""},on:{click:t.open1}},[t._v("\n    右上角\n  ")]),t._v(" "),e("tis-button",{attrs:{plain:""},on:{click:t.open2}},[t._v("\n    右下角\n  ")]),t._v(" "),e("tis-button",{attrs:{plain:""},on:{click:t.open3}},[t._v("\n    左下角\n  ")]),t._v(" "),e("tis-button",{attrs:{plain:""},on:{click:t.open4}},[t._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"})}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),e("p",[t._v("悬浮出现在页面角落，显示全局的通知提醒消息。")]),t._m(1),e("p",[t._v("适用性广泛的通知栏")]),e("demo-block",[e("div",[e("p",[t._v("Notification 组件提供通知功能，Element 注册了"),e("code",[t._v("$notify")]),t._v("方法，接收一个"),e("code",[t._v("options")]),t._v("字面量参数，在最简单的情况下，你可以设置"),e("code",[t._v("title")]),t._v("字段和"),e("code",[t._v("message")]),t._v("字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置"),e("code",[t._v("duration")]),t._v("，可以控制关闭的时间间隔，特别的是，如果设置为"),e("code",[t._v("0")]),t._v("，则不会自动关闭。注意："),e("code",[t._v("duration")]),t._v("接收一个"),e("code",[t._v("Number")]),t._v("，单位为毫秒，默认为"),e("code",[t._v("4500")]),t._v("。")])]),e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-button\n    plain\n    @click=\"open1\">\n    可自动关闭\n  </tis-button>\n  <tis-button\n    plain\n    @click=\"open2\">\n    不会自动关闭\n    </tis-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),t._m(2),e("p",[t._v("带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息")]),e("demo-block",[e("div",[e("p",[t._v("Element 为 Notification 组件准备了四种通知类型："),e("code",[t._v("success")]),t._v(", "),e("code",[t._v("warning")]),t._v(", "),e("code",[t._v("info")]),t._v(", "),e("code",[t._v("error")]),t._v("。通过"),e("code",[t._v("type")]),t._v("字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入"),e("code",[t._v("type")]),t._v("字段的情况下像"),e("code",[t._v("open3")]),t._v("和"),e("code",[t._v("open4")]),t._v("那样直接调用。")])]),e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-button\n    plain\n    @click=\"open1\">\n    成功\n  </tis-button>\n  <tis-button\n    plain\n    @click=\"open2\">\n    警告\n  </tis-button>\n  <tis-button\n    plain\n    @click=\"open3\">\n    消息\n  </tis-button>\n  <tis-button\n    plain\n    @click=\"open4\">\n    错误\n  </tis-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),t._m(3),e("p",[t._v("可以让 Notification 从屏幕四角中的任意一角弹出")]),e("demo-block",[e("div",[e("p",[t._v("使用"),e("code",[t._v("position")]),t._v("属性定义 Notification 的弹出位置，支持四个选项："),e("code",[t._v("top-right")]),t._v("、"),e("code",[t._v("top-left")]),t._v("、"),e("code",[t._v("bottom-right")]),t._v("、"),e("code",[t._v("bottom-left")]),t._v("，默认为"),e("code",[t._v("top-right")]),t._v("。")])]),e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <tis-button\n    plain\n    @click=\"open1\">\n    右上角\n  </tis-button>\n  <tis-button\n    plain\n    @click=\"open2\">\n    右下角\n  </tis-button>\n  <tis-button\n    plain\n    @click=\"open3\">\n    左下角\n  </tis-button>\n  <tis-button\n    plain\n    @click=\"open4\">\n    左上角\n  </tis-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),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"notification-tong-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification-tong-zhi"}},[this._v("¶")]),this._v(" Notification 通知")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"ji-ben-yong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa"}},[this._v("¶")]),this._v(" 基本用法")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dai-you-qing-xiang-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-qing-xiang-xing"}},[this._v("¶")]),this._v(" 带有倾向性")])},function(){var t=this.$createElement,t=this._self._c||t;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"}},[this._v("¶")]),this._v(" 自定义弹出位置")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options"}},[this._v("¶")]),this._v(" Options")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("可选值")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("title")]),e("td",[t._v("标题")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("message")]),e("td",[t._v("说明文字")]),e("td",[t._v("string/Vue.VNode")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("dangerouslyUseHTMLString")]),e("td",[t._v("是否将 message 属性作为 HTML 片段处理")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("false")])]),e("tr",[e("td",[t._v("type")]),e("td",[t._v("主题样式，如果不在可选值内将被忽略")]),e("td",[t._v("string")]),e("td",[t._v("success/warning/info/error")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("iconClass")]),e("td",[t._v("自定义图标的类名。若设置了 "),e("code",[t._v("type")]),t._v("，则 "),e("code",[t._v("iconClass")]),t._v(" 会被覆盖")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("customClass")]),e("td",[t._v("自定义类名")]),e("td",[t._v("string")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("duration")]),e("td",[t._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("4500")])]),e("tr",[e("td",[t._v("position")]),e("td",[t._v("自定义弹出位置")]),e("td",[t._v("string")]),e("td",[t._v("top-right/top-left/bottom-right/bottom-left")]),e("td",[t._v("top-right")])]),e("tr",[e("td",[t._v("showClose")]),e("td",[t._v("是否显示关闭按钮")]),e("td",[t._v("boolean")]),e("td",[t._v("—")]),e("td",[t._v("true")])]),e("tr",[e("td",[t._v("onClose")]),e("td",[t._v("关闭时的回调函数")]),e("td",[t._v("function")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("onClick")]),e("td",[t._v("点击 Notification 时的回调函数")]),e("td",[t._v("function")]),e("td",[t._v("—")]),e("td",[t._v("—")])]),e("tr",[e("td",[t._v("offset")]),e("td",[t._v("偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量")]),e("td",[t._v("number")]),e("td",[t._v("—")]),e("td",[t._v("0")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"fang-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa"}},[this._v("¶")]),this._v(" 方法")])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;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);e.default=a.exports},1362:function(t,e,n){"use strict";n.r(e);var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},a={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-line",{attrs:{data:this.chartData}})]],2)},staticRenderFns:[]},{data:function(){return{chartData:{columns:["日期","访问用户","下单用户","下单率"],rows:[{"日期":"1/1","访问用户":1393,"下单用户":1093,"下单率":.32},{"日期":"1/2","访问用户":3530,"下单用户":3230,"下单率":.26},{"日期":"1/3","访问用户":2923,"下单用户":2623,"下单率":.76},{"日期":"1/4","访问用户":1723,"下单用户":1423,"下单率":.49},{"日期":"1/5","访问用户":3792,"下单用户":3492,"下单率":.323},{"日期":"1/6","访问用户":4593,"下单用户":4293,"下单率":.78}]}}}}),"element-demo1":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-line",{attrs:{data:this.chartData,settings:this.chartSettings}})]],2)},staticRenderFns:[]},{data:function(){return this.chartSettings={metrics:["访问用户","下单用户"],dimension:["日期"]},{chartData:{columns:["日期","访问用户","下单用户","下单率"],rows:[{"日期":"1/1","访问用户":1393,"下单用户":1093,"下单率":.32},{"日期":"1/2","访问用户":3530,"下单用户":3230,"下单率":.26},{"日期":"1/3","访问用户":2923,"下单用户":2623,"下单率":.76},{"日期":"1/4","访问用户":1723,"下单用户":1423,"下单率":.49},{"日期":"1/5","访问用户":3792,"下单用户":3492,"下单率":.323},{"日期":"1/6","访问用户":4593,"下单用户":4293,"下单率":.78}]}}}}),"element-demo2":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-line",{attrs:{data:this.chartData,settings:this.chartSettings}})]],2)},staticRenderFns:[]},{data:function(){return this.chartSettings={axisSite:{right:["下单率"]},yAxisType:["KMB","percent"],yAxisName:["数值","比率"]},{chartData:{columns:["日期","访问用户","下单用户","下单率"],rows:[{"日期":"1/1","访问用户":1393,"下单用户":1093,"下单率":.32},{"日期":"1/2","访问用户":3530,"下单用户":3230,"下单率":.26},{"日期":"1/3","访问用户":2923,"下单用户":2623,"下单率":.76},{"日期":"1/4","访问用户":1723,"下单用户":1423,"下单率":.49},{"日期":"1/5","访问用户":3792,"下单用户":3492,"下单率":.323},{"日期":"1/6","访问用户":4593,"下单用户":4293,"下单率":.78}]}}}}),"element-demo3":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-line",{attrs:{data:this.chartData,extend:this.extend}})]],2)},staticRenderFns:[]},{data:function(){return this.extend={"xAxis.0.axisLabel.rotate":45},{chartData:{columns:["日期","访问用户","下单用户","下单率"],rows:[{"日期":"1/1","访问用户":1393,"下单用户":1093,"下单率":.32},{"日期":"1/2","访问用户":3530,"下单用户":3230,"下单率":.26},{"日期":"1/3","访问用户":2923,"下单用户":2623,"下单率":.76},{"日期":"1/4","访问用户":1723,"下单用户":1423,"下单率":.49},{"日期":"1/5","访问用户":3792,"下单用户":3492,"下单率":.323},{"日期":"1/6","访问用户":4593,"下单用户":4293,"下单率":.78},{"日期":"1/7","访问用户":1393,"下单用户":1093,"下单率":.32},{"日期":"1/8","访问用户":3530,"下单用户":3230,"下单率":.26},{"日期":"1/9","访问用户":2923,"下单用户":2623,"下单率":.76},{"日期":"1/10","访问用户":1723,"下单用户":1423,"下单率":.49},{"日期":"1/11","访问用户":3792,"下单用户":3492,"下单率":.323},{"日期":"1/12","访问用户":4593,"下单用户":4293,"下单率":.78}]}}}}),"element-demo4":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-line",{attrs:{data:this.chartData,settings:this.chartSettings}})]],2)},staticRenderFns:[]},{data:function(){return this.chartSettings={stack:{"用户":["访问用户","下单用户"]},area:!0},{chartData:{columns:["日期","访问用户","下单用户","下单率"],rows:[{"日期":"1/1","访问用户":1393,"下单用户":1093,"下单率":.32},{"日期":"1/2","访问用户":3530,"下单用户":3230,"下单率":.26},{"日期":"1/3","访问用户":2923,"下单用户":2623,"下单率":.76},{"日期":"1/4","访问用户":1723,"下单用户":1423,"下单率":.49},{"日期":"1/5","访问用户":3792,"下单用户":3492,"下单率":.323},{"日期":"1/6","访问用户":4593,"下单用户":4293,"下单率":.78}]}}}}),"element-demo5":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-line",{attrs:{data:this.chartData,settings:this.chartSettings}})]],2)},staticRenderFns:[]},{data:function(){return this.chartSettings={labelMap:{PV:"访问用户",Order:"下单用户"},legendName:{"访问用户":"访问用户 total: 10000"}},{chartData:{columns:["date","PV","Order","OrderRate"],rows:[{date:"1/1",PV:1393,Order:1093,OrderRate:.32},{date:"1/2",PV:3530,Order:3230,OrderRate:.26},{date:"1/3",PV:2923,Order:2623,OrderRate:.76},{date:"1/4",PV:1723,Order:1423,OrderRate:.49},{date:"1/5",PV:3792,Order:3492,OrderRate:.323},{date:"1/6",PV:4593,Order:4293,OrderRate:.78}]}}}}),"element-demo6":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-line",{attrs:{data:this.chartData,extend:this.extend}})]],2)},staticRenderFns:[]},{data:function(){return this.extend={series:{label:{normal:{show:!0}}}},{chartData:{columns:["日期","访问用户","下单用户","下单率"],rows:[{"日期":"1/1","访问用户":1393,"下单用户":1093,"下单率":.32},{"日期":"1/2","访问用户":3530,"下单用户":3230,"下单率":.26},{"日期":"1/3","访问用户":2923,"下单用户":2623,"下单率":.76},{"日期":"1/4","访问用户":1723,"下单用户":1423,"下单率":.49},{"日期":"1/5","访问用户":3792,"下单用户":3492,"下单率":.323},{"日期":"1/6","访问用户":4593,"下单用户":4293,"下单率":.78}]}}}}),"element-demo7":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-line",{attrs:{data:this.chartData,settings:this.chartSettings}})]],2)},staticRenderFns:[]},{data:function(){return this.chartSettings={xAxisType:"value"},{chartData:{columns:["日期","访问用户","下单用户","下单率"],rows:[{"日期":"1","访问用户":1393,"下单用户":1093,"下单率":.32},{"日期":"2","访问用户":3530,"下单用户":3230,"下单率":.26},{"日期":"5","访问用户":2923,"下单用户":2623,"下单率":.76},{"日期":"10","访问用户":1723,"下单用户":1423,"下单率":.49},{"日期":"11","访问用户":3792,"下单用户":3492,"下单率":.323},{"日期":"20","访问用户":4593,"下单用户":4293,"下单率":.78}]}}}}),"element-demo8":a({render:function(){var t=this.$createElement,t=this._self._c||t;return t("div",[[t("ve-line",{attrs:{data:this.chartData,settings:this.chartSettings}})]],2)},staticRenderFns:[]},{data:function(){return this.chartSettings={xAxisType:"time"},{chartData:{columns:["日期","访问用户","下单用户","下单率"],rows:[{"日期":"2018-01-01","访问用户":1393,"下单用户":1093,"下单率":.32},{"日期":"2018-01-02","访问用户":3530,"下单用户":3230,"下单率":.26},{"日期":"2018-01-03","访问用户":2923,"下单用户":2623,"下单率":.76},{"日期":"2018-01-05","访问用户":1723,"下单用户":1423,"下单率":.49},{"日期":"2018-01-10","访问用户":3792,"下单用户":3492,"下单率":.323},{"日期":"2018-01-20","访问用户":4593,"下单用户":4293,"下单率":.78}]}}}})}},n=n(0),a=Object(n.a)(a,function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),e("demo-block",[e("template",{slot:"source"},[e("element-demo0")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <ve-line :data=\"chartData\"></ve-line>\n</template>\n\n<script>\n  export default {\n    data: function () {\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),t._m(2),e("demo-block",[e("template",{slot:"source"},[e("element-demo1")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("\n<template>\n  <ve-line :data=\"chartData\" :settings=\"chartSettings\"></ve-line>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        metrics: ['访问用户', '下单用户'],\n        dimension: ['日期']\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),t._m(3),e("demo-block",[e("template",{slot:"source"},[e("element-demo2")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <ve-line :data=\"chartData\" :settings=\"chartSettings\"></ve-line>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        axisSite: { right: ['下单率'] },\n        yAxisType: ['KMB', 'percent'],\n        yAxisName: ['数值', '比率']\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),t._m(4),e("demo-block",[e("template",{slot:"source"},[e("element-demo3")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <ve-line :data=\"chartData\" :extend=\"extend\"></ve-line>\n</template>\n\n<script>\n  export default {\n    data: function () {\n      this.extend = {\n        'xAxis.0.axisLabel.rotate': 45\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 },\n            { '日期': '1/7', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/8', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/9', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/10', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/11', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/12', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),t._m(5),e("demo-block",[e("template",{slot:"source"},[e("element-demo4")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <ve-line :data=\"chartData\" :settings=\"chartSettings\"></ve-line>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        stack: { '用户': ['访问用户', '下单用户'] },\n        area: true\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),t._m(6),e("demo-block",[e("template",{slot:"source"},[e("element-demo5")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <ve-line :data=\"chartData\" :settings=\"chartSettings\"></ve-line>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        labelMap: {\n          'PV': '访问用户',\n          'Order': '下单用户'\n        },\n        legendName: {\n          '访问用户': '访问用户 total: 10000'\n        }\n      }\n      return {\n        chartData: {\n          columns: ['date', 'PV', 'Order', 'OrderRate'],\n          rows: [\n            { 'date': '1/1', 'PV': 1393, 'Order': 1093, 'OrderRate': 0.32 },\n            { 'date': '1/2', 'PV': 3530, 'Order': 3230, 'OrderRate': 0.26 },\n            { 'date': '1/3', 'PV': 2923, 'Order': 2623, 'OrderRate': 0.76 },\n            { 'date': '1/4', 'PV': 1723, 'Order': 1423, 'OrderRate': 0.49 },\n            { 'date': '1/5', 'PV': 3792, 'Order': 3492, 'OrderRate': 0.323 },\n            { 'date': '1/6', 'PV': 4593, 'Order': 4293, 'OrderRate': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),t._m(7),e("demo-block",[e("template",{slot:"source"},[e("element-demo6")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <ve-line :data=\"chartData\" :extend=\"extend\"></ve-line>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.extend = {\n        series: {\n          label: {\n            normal: {\n              show: true\n            }\n          }\n        }\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),t._m(8),e("demo-block",[e("template",{slot:"source"},[e("element-demo7")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <ve-line :data=\"chartData\" :settings=\"chartSettings\"></ve-line>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        xAxisType: 'value'\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '5', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '10', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '11', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '20', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),t._m(9),e("demo-block",[e("template",{slot:"source"},[e("element-demo8")],1),e("template",{slot:"highlight"},[e("pre",{pre:!0},[e("code",{pre:!0,attrs:{class:"html"}},[t._v("<template>\n  <ve-line :data=\"chartData\" :settings=\"chartSettings\"></ve-line>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        xAxisType: 'time'\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '2018-01-01', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '2018-01-02', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '2018-01-03', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '2018-01-05', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '2018-01-10', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '2018-01-20', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("h2",{attrs:{id:"zhe-xian-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhe-xian-tu"}},[this._v("¶")]),this._v(" 折线图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"she-zhi-xian-shi-de-zhi-biao-wei-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-xian-shi-de-zhi-biao-wei-du"}},[this._v("¶")]),this._v(" 设置显示的指标维度")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"she-zhi-shuang-y-zhou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-shuang-y-zhou"}},[this._v("¶")]),this._v(" 设置双y轴")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"heng-zuo-biao-de-qing-xie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#heng-zuo-biao-de-qing-xie"}},[this._v("¶")]),this._v(" 横坐标的倾斜")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"dui-die-mian-ji-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-die-mian-ji-tu"}},[this._v("¶")]),this._v(" 堆叠面积图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"she-zhi-bie-ming"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-bie-ming"}},[this._v("¶")]),this._v(" 设置别名")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"xian-shi-zhi-biao-shu-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-shi-zhi-biao-shu-zhi"}},[this._v("¶")]),this._v(" 显示指标数值")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"she-zhi-heng-zhou-wei-lian-xu-de-shu-zhi-zhou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-heng-zhou-wei-lian-xu-de-shu-zhi-zhou"}},[this._v("¶")]),this._v(" 设置横轴为连续的数值轴")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"she-zhi-heng-zhou-wei-lian-xu-de-shi-jian-zhou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-heng-zhou-wei-lian-xu-de-shi-jian-zhou"}},[this._v("¶")]),this._v(" 设置横轴为连续的时间轴")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("array")]),e("td",[t._v("默认columns第一项为维度")])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("array")]),e("td",[t._v("默认columns第二项起为指标")])]),e("tr",[e("td",[t._v("xAxisType")]),e("td",[t._v("横轴的数据类型")]),e("td",[t._v("string")]),e("td",[t._v("可选值: category, value, time, log")])]),e("tr",[e("td",[t._v("yAxisType")]),e("td",[t._v("左右坐标轴数据类型")]),e("td",[t._v("array")]),e("td",[t._v("可选值: KMB, normal, percent")])]),e("tr",[e("td",[t._v("yAxisName")]),e("td",[t._v("左右坐标轴标题")]),e("td",[t._v("array")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("axisSite")]),e("td",[t._v("指标所在的轴")]),e("td",[t._v("object")]),e("td",[t._v("默认不在right轴的指标都在left轴")])]),e("tr",[e("td",[t._v("stack")]),e("td",[t._v("堆叠选项")]),e("td",[t._v("object")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("area")]),e("td",[t._v("是否展示为面积图")]),e("td",[t._v("boolean")]),e("td",[t._v("默认为false")])]),e("tr",[e("td",[t._v("scale")]),e("td",[t._v("是否是脱离 0 值比例")]),e("td",[t._v("array")]),e("td",[t._v("默认为[false, false]，表示左右"),e("br"),t._v("两个轴都不会脱离0值比例。"),e("br"),t._v("设置成 true 后坐标刻度不会"),e("br"),t._v("强制包含零刻度"),e("br")])]),e("tr",[e("td",[t._v("min")]),e("td",[t._v("左右坐标轴最小值")]),e("td",[t._v("array")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("max")]),e("td",[t._v("左右坐标轴最大值")]),e("td",[t._v("array")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("digit")]),e("td",[t._v("设置数据类型为percent时保留的位数")]),e("td",[t._v("number")]),e("td",[t._v("默认为2")])]),e("tr",[e("td",[t._v("labelMap")]),e("td",[t._v("设置指标的别名，同时作用于提示框和图例")]),e("td",[t._v("object")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("legendName")]),e("td",[t._v("设置图表上方图例的别名")]),e("td",[t._v("object")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("备注1. axisSite 可以设置 left 和 right，例如示例所示 "),t("code",[this._v("axisSite: { right: ['占比'] }")]),this._v(" 即将占比的数据置于右轴上。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("备注2. stack 用于将两数据堆叠起来，例如实例中所示"),t("code",[this._v("stack: { '销售额': ['成本', '利润'] }")]),this._v(" 即将'成本', '利润'相应的数据堆叠在一起。")])},function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("备注3. min和max的值可以直接设置为数字，例如："),t("code",[this._v("[100, 300]")]),this._v("；也可以设置为"),t("code",[this._v("['dataMin', 'dataMin']")]),this._v(", "),t("code",[this._v("['dataMax', 'dataMax']")]),this._v("，此时表示使用该坐标轴上的最小值或最大值为最小或最大刻度。")])}],!1,null,null,null);e.default=a.exports},1364:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h1",[t._v("柱状图")]),t._m(0),e("p",[e("vuep",{attrs:{template:"#simple-histogram-chart"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"simple-histogram-chart"}},[t._v("\n<template>\n  <ve-histogram :data=\"chartData\"></ve-histogram>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(1),e("p",[e("vuep",{attrs:{template:"#set-metrics-dimension"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-metrics-dimension"}},[t._v("\n<template>\n  <ve-histogram :data=\"chartData\" :settings=\"chartSettings\"></ve-histogram>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        metrics: ['访问用户', '下单用户'],\n        dimension: ['日期']\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(2),e("p",[e("vuep",{attrs:{template:"#set-double-y-axis"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-double-y-axis"}},[t._v("\n<template>\n  <ve-histogram :data=\"chartData\" :settings=\"chartSettings\"></ve-histogram>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        axisSite: { right: ['下单率'] },\n        yAxisType: ['KMB', 'percent'],\n        yAxisName: ['数值', '比率']\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(3),e("p",[e("vuep",{attrs:{template:"#histogram-line"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"histogram-line"}},[t._v("\n<template>\n  <ve-histogram :data=\"chartData\" :settings=\"chartSettings\"></ve-histogram>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        showLine: ['下单用户']\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(4),e("p",[e("vuep",{attrs:{template:"#histogram-stack"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"histogram-stack"}},[t._v("\n<template>\n  <ve-histogram :data=\"chartData\" :settings=\"chartSettings\"></ve-histogram>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        stack: { '用户': ['访问用户', '下单用户'] }\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(5),e("p",[e("vuep",{attrs:{template:"#show-data-default"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"show-data-default"}},[t._v("\n<template>\n  <ve-histogram :data=\"chartData\" :extend=\"extend\"></ve-histogram>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.extend = {\n        series: {\n          label: { show: true, position: \"top\" }\n        }\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(6),e("p",[e("vuep",{attrs:{template:"#change-metrics-name"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"change-metrics-name"}},[t._v("\n<template>\n  <ve-histogram :data=\"chartData\" :settings=\"chartSettings\"></ve-histogram>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        labelMap: {\n          'PV': '访问用户',\n          'Order': '下单用户'\n        },\n        legendName: {\n          '访问用户': '访问用户 total: 10000'\n        }\n      }\n      return {\n        chartData: {\n          columns: ['date', 'PV', 'Order', 'OrderRate'],\n          rows: [\n            { 'date': '1/1', 'PV': 1393, 'Order': 1093, 'OrderRate': 0.32 },\n            { 'date': '1/2', 'PV': 3530, 'Order': 3230, 'OrderRate': 0.26 },\n            { 'date': '1/3', 'PV': 2923, 'Order': 2623, 'OrderRate': 0.76 },\n            { 'date': '1/4', 'PV': 1723, 'Order': 1423, 'OrderRate': 0.49 },\n            { 'date': '1/5', 'PV': 3792, 'Order': 3492, 'OrderRate': 0.323 },\n            { 'date': '1/6', 'PV': 4593, 'Order': 4293, 'OrderRate': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(7),e("p",[e("vuep",{attrs:{template:"#set-value-axis"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-value-axis"}},[t._v("\n<template>\n  <ve-histogram :data=\"chartData\" :settings=\"chartSettings\"></ve-histogram>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        xAxisType: 'value'\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '下单率'],\n          rows: [\n            { '日期': 1, '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },\n            { '日期': 2, '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },\n            { '日期': 5, '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },\n            { '日期': 10, '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },\n            { '日期': 20, '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },\n            { '日期': 22, '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15)])},[function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-xian-shi-de-zhi-biao-wei-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-xian-shi-de-zhi-biao-wei-du"}},[this._v("¶")]),this._v(" 设置显示的指标维度")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-shuang-y-zhou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-shuang-y-zhou"}},[this._v("¶")]),this._v(" 设置双y轴")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"zhu-zhuang-tu-zhe-xian-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhu-zhuang-tu-zhe-xian-tu"}},[this._v("¶")]),this._v(" 柱状图+折线图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"dui-die-zhu-zhuang-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dui-die-zhu-zhuang-tu"}},[this._v("¶")]),this._v(" 堆叠柱状图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"mo-ren-xian-shi-zhu-zhuang-tu-shu-ju"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-xian-shi-zhu-zhuang-tu-shu-ju"}},[this._v("¶")]),this._v(" 默认显示柱状图数据")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"xiu-gai-bie-ming"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-bie-ming"}},[this._v("¶")]),this._v(" 修改别名")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-heng-zhou-wei-lian-xu-de-shu-zhi-zhou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-heng-zhou-wei-lian-xu-de-shu-zhi-zhou"}},[this._v("¶")]),this._v(" 设置横轴为连续的数值轴")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("array")]),e("td",[t._v("默认columns第一项为维度")])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("array")]),e("td",[t._v("默认columns第二项起为指标")])]),e("tr",[e("td",[t._v("yAxisType")]),e("td",[t._v("左右坐标轴数据类型")]),e("td",[t._v("array")]),e("td",[t._v("可选值: KMB, normal, percent")])]),e("tr",[e("td",[t._v("yAxisName")]),e("td",[t._v("左右坐标轴标题")]),e("td",[t._v("array")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("axisSite")]),e("td",[t._v("指标所在的轴")]),e("td",[t._v("object")]),e("td",[t._v("默认不在right轴的指标都在left轴")])]),e("tr",[e("td",[t._v("stack")]),e("td",[t._v("堆叠选项")]),e("td",[t._v("object")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("digit")]),e("td",[t._v("设置数据类型为percent时保留的位数")]),e("td",[t._v("number")]),e("td",[t._v("默认为2")])]),e("tr",[e("td",[t._v("dataOrder")]),e("td",[t._v("设置数据排序方式")]),e("td",[t._v("boolean, object")]),e("td",[t._v("默认为false")])]),e("tr",[e("td",[t._v("scale")]),e("td",[t._v("是否是脱离 0 值比例")]),e("td",[t._v("array")]),e("td",[t._v("默认为[false, false]，表示左右"),e("br"),t._v("两个轴都不会脱离0值比例。"),e("br"),t._v("设置成 true 后坐标刻度不会"),e("br"),t._v("强制包含零刻度"),e("br")])]),e("tr",[e("td",[t._v("min")]),e("td",[t._v("左右坐标轴最小值")]),e("td",[t._v("array")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("max")]),e("td",[t._v("左右坐标轴最大值")]),e("td",[t._v("array")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("labelMap")]),e("td",[t._v("设置指标的别名，同时作用于提示框和图例")]),e("td",[t._v("object")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("legendName")]),e("td",[t._v("设置图表上方图例的别名")]),e("td",[t._v("object")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("设置图形上的文本标签")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-bar.label"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("itemStyle")]),e("td",[t._v("图形样式")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-bar.itemStyle"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("showLine")]),e("td",[t._v("展示为折线图的指标")]),e("td",[t._v("array")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("xAxisType")]),e("td",[t._v("横轴的类型")]),e("td",[t._v("string")]),e("td",[t._v("可选值'category'，'value'，默认为'category'")])]),e("tr",[e("td",[t._v("opacity")]),e("td",[t._v("透明度")]),e("td",[t._v("number")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注1. axisSite 可以设置 left 和 right，例如示例所示 "),t("code",[this._v("axisSite: { right: ['占比'] }")]),this._v(" 即将占比的数据置于右轴上。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注2. stack 用于将两数据堆叠起来，例如实例中所示"),t("code",[this._v("stack: { '销售额': ['销售额-1季度', '销售额-2季度'] }")]),this._v(" 即将'销售额-1季度', '销售额-2季度'相应的数据堆叠在一起。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注3. dataOrder 用于设置数据的排序方式，用于更加清晰的展示数据的升降。例如： "),t("code",[this._v("{ label: '余额', order: 'asc }")]),this._v(" 表示数据按照余额指标升序展示，降序为"),t("code",[this._v("desc")]),this._v("。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注4. min和max的值可以直接设置为数字，例如："),t("code",[this._v("[100, 300]")]),this._v("；也可以设置为"),t("code",[this._v("['dataMin', 'dataMin']")]),this._v(", "),t("code",[this._v("['dataMax', 'dataMax']")]),this._v("，此时表示使用该坐标轴上的最小值或最大值为最小或最大刻度。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注5. 有时我们需要将折线图与柱状图展示在同一个图上，利用showLine属性可以设置需要展示为折线图的指标，其他的指标则使用柱状图展示。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注6. 为了优化连续的数值型横轴显示多指标的时候样式，在此情况下默认设置opacity为0.5。")])])}],!1,null,null,null),e.default=n.exports},1365:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h1",[t._v("仪表盘")]),t._m(0),e("p",[e("vuep",{attrs:{template:"#simple-gauge"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"simple-gauge"}},[t._v("\n<template>\n  <ve-gauge :data=\"chartData\"></ve-gauge>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['type', 'a', 'b', 'value'],\n          rows: [\n            { type: '速度', value: 80, a: 1, b: 2 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(1),e("p",[e("vuep",{attrs:{template:"#set-dim-metrics"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-dim-metrics"}},[t._v("\n<template>\n  <ve-gauge :data=\"chartData\" :settings=\"chartSettings\"></ve-gauge>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        dimension: 'type',\n        metrics: 'value'\n      }\n      return {\n        chartData: {\n          columns: ['a', 'b', 'type', 'value'],\n          rows: [\n            { type: '速度', value: 80, a: 1, b: 2 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(2),e("p",[e("vuep",{attrs:{template:"#set-dataType"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-dataType"}},[t._v("\n<template>\n  <ve-gauge :data=\"chartData\" :settings=\"chartSettings\"></ve-gauge>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        dataType: {\n          '占比': 'percent'\n        },\n        seriesMap: {\n          '占比': {\n            min: 0,\n            max: 1\n          }\n        }\n      }\n      return {\n        chartData: {\n          columns: ['type', 'value'],\n          rows: [\n            { type: '占比', value: 0.8 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(3),e("p",[e("vuep",{attrs:{template:"#set-label"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-label"}},[t._v("\n<template>\n  <ve-gauge :data=\"chartData\" :settings=\"chartSettings\"></ve-gauge>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        labelMap: {\n          'speed': '速度'\n        },\n        dataName: {\n          'speed': 'km/h'\n        }\n      }\n      return {\n        chartData: {\n          columns: ['type', 'value'],\n          rows: [\n            { type: 'speed', value: 60 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(4),e("p",[e("vuep",{attrs:{template:"#set-style"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-style"}},[t._v("\n<template>\n  <ve-gauge\n    :data=\"chartData\"\n    background-color=\"#000\"\n    :settings=\"chartSettings\">\n  </ve-gauge>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        dataName: {\n          '速度': 'km/h',\n          '转速': 'x1000 r/min',\n          '油表': 'gas'\n        },\n        seriesMap: {\n          '速度': {\n            min:0,\n            max:220,\n            splitNumber:11,\n            radius: '50%',\n            axisLine: {\n              lineStyle: {\n                color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],\n                width: 3,\n                shadowColor: '#fff',\n                shadowBlur: 10\n              }\n            },\n            axisLabel: {\n              textStyle: {\n                fontWeight: 'bolder',\n                color: '#fff',\n                shadowColor: '#fff',\n                shadowBlur: 10\n              }\n            },\n            axisTick: {\n              length:15,\n              lineStyle: {\n                color: 'auto',\n                shadowColor: '#fff',\n                shadowBlur: 10\n              }\n            },\n            splitLine: {\n              length:25,\n              lineStyle: {\n                width:3,\n                color: '#fff',\n                shadowColor: '#fff',\n                shadowBlur: 10\n              }\n            },\n            pointer: {\n              shadowColor: '#fff',\n              shadowBlur: 5\n            },\n            title: {\n              textStyle: {\n                fontWeight: 'bolder',\n                fontSize: 20,\n                fontStyle: 'italic',\n                color: '#fff',\n                shadowColor: '#fff',\n                shadowBlur: 10\n              }\n            },\n            detail: {\n              backgroundColor: 'rgba(30,144,255,0.8)',\n              borderWidth: 1,\n              borderColor: '#fff',\n              shadowColor: '#fff',\n              shadowBlur: 5,\n              offsetCenter: [0, '50%'],\n              textStyle: {\n                fontWeight: 'bolder',\n                color: '#fff'\n              }\n            }\n          },\n          '转速': {\n            center: ['10%', '55%'],\n            radius: '25%',\n            min:0,\n            max:7,\n            endAngle:45,\n            splitNumber:7,\n            axisLine: {\n              lineStyle: {\n                color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],\n                width: 2,\n                shadowColor: '#fff',\n                shadowBlur: 10\n              }\n            },\n            axisLabel: {\n              textStyle: {\n                fontWeight: 'bolder',\n                color: '#fff',\n                shadowColor: '#fff',\n                shadowBlur: 10\n              }\n            },\n            axisTick: {\n              length:12,\n              lineStyle: {\n                color: 'auto',\n                shadowColor: '#fff',\n                shadowBlur: 10\n              }\n            },\n            splitLine: {\n              length:20,\n              lineStyle: {\n                width:3,\n                color: '#fff',\n                shadowColor: '#fff',\n                shadowBlur: 10\n              }\n            },\n            pointer: {\n              width:5,\n              shadowColor: '#fff',\n              shadowBlur: 5\n            },\n            title: {\n              offsetCenter: [0, '-30%'],\n              textStyle: {\n                fontWeight: 'bolder',\n                fontStyle: 'italic',\n                color: '#fff',\n                shadowColor: '#fff',\n                shadowBlur: 10\n              }\n            },\n            detail: {\n              borderColor: '#fff',\n              shadowColor: '#fff',\n              shadowBlur: 5,\n              width: 80,\n              height:30,\n              offsetCenter: [25, '20%'],\n              textStyle: {\n                fontWeight: 'bolder',\n                color: '#fff'\n              }\n            }\n          },\n          '油表': {\n            center: ['84%', '50%'],\n            radius: '30%',\n            min:0,\n            max:2,\n            startAngle:135,\n            endAngle:45,\n            splitNumber:2,\n            axisLine: {\n              lineStyle: {\n                color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],\n                width: 2,\n                shadowColor: '#fff',\n                shadowBlur: 10\n              }\n            },\n            axisTick: {\n              length:12,\n              lineStyle: {\n                color: 'auto',\n                shadowColor: '#fff',\n                shadowBlur: 10\n              }\n            },\n            axisLabel: {\n              textStyle: {\n                fontWeight: 'bolder',\n                color: '#fff',\n                shadowColor: '#fff',\n                shadowBlur: 10\n              },\n              formatter: function(v){\n                switch (v + '') {\n                  case '0': return 'E';\n                  case '1': return 'Gas';\n                  case '2': return 'F';\n                }\n              }\n            },\n            splitLine: {\n              length:15,\n              lineStyle: {\n                width:3,\n                color: '#fff',\n                shadowColor: '#fff',\n                shadowBlur: 10\n              }\n            },\n            pointer: {\n              width:2,\n              shadowColor: '#fff',\n              shadowBlur: 5\n            },\n            title: {\n              show: false\n            },\n            detail: {\n              show: false\n            }\n          }\n        }\n      }\n      return {\n        chartData: {\n          columns: ['type', 'value'],\n          rows: [\n            { type: '速度', value: 60 },\n            { type: '转速', value: 80 },\n            { type: '油表', value: 6000 },\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(5),t._m(6),t._m(7)])},[function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"zhi-biao-wei-du-pei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-biao-wei-du-pei-zhi"}},[this._v("¶")]),this._v(" 指标维度配置")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-shu-ju-lei-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-shu-ju-lei-xing"}},[this._v("¶")]),this._v(" 设置数据类型")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-zhi-biao-bie-ming-yu-dan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-zhi-biao-bie-ming-yu-dan-wei"}},[this._v("¶")]),this._v(" 设置指标别名与单位")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-duo-biao-pan-ji-xiu-gai-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-duo-biao-pan-ji-xiu-gai-yang-shi"}},[this._v("¶")]),this._v(" 设置多表盘及修改样式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("string")]),e("td",[t._v("默认 columns[0]")])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("string")]),e("td",[t._v("默认 columns[1]")])]),e("tr",[e("td",[t._v("dataType")]),e("td",[t._v("数据类型")]),e("td",[t._v("object")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("digit")]),e("td",[t._v("设置数据类型为percent时保留的位数")]),e("td",[t._v("number")]),e("td",[t._v("默认为2")])]),e("tr",[e("td",[t._v("labelMap")]),e("td",[t._v("设置指标的别名")]),e("td",[t._v("object")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("seriesMap")]),e("td",[t._v("附加到 series 中的设置")]),e("td",[t._v("object")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("dataName")]),e("td",[t._v("表盘上显示的单位")]),e("td",[t._v("object")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注1： 通过 seriesMap，可以为每一个仪表设置样式，具体样式的配置可以参考"),t("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-gauge"}},[this._v("文档")])])])}],!1,null,null,null),e.default=n.exports},1366:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h1",[t._v("水球图")]),t._m(0),e("p",[e("vuep",{attrs:{template:"#simple-liquidfill"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"simple-liquidfill"}},[t._v("\n<template>\n  <ve-liquidfill :data=\"chartData\"></ve-liquidfill>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['city', 'percent'],\n          rows: [{\n            city: '上海',\n            percent: 0.6\n          }]\n        }\n      }\n    }\n  }\n")]),t._m(1),e("p",[e("vuep",{attrs:{template:"#set-layers"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-layers"}},[t._v("\n<template>\n  <ve-liquidfill :data=\"chartData\" :settings=\"chartSettings\"></ve-liquidfill>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        wave: [0.5, 0.3, 0.1],\n        seriesMap: {\n          '上海': {\n            color: ['red', 'green', 'yellow']\n          }\n        }\n      }\n      return {\n        chartData: {\n          columns: ['city', 'percent'],\n          rows: [{\n            city: '上海',\n            percent: 0.7\n          }]\n        }\n      }\n    }\n  }\n")]),t._m(2),e("p",[e("vuep",{attrs:{template:"#set-multi"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-multi"}},[t._v("\n<template>\n  <ve-liquidfill :data=\"chartData\" :settings=\"chartSettings\"></ve-liquidfill>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        wave: [[0.5, 0.3, 0.1], [0.3, 0.2], []],\n        seriesMap: [\n          {\n            color: ['red', 'green', 'yellow'],\n            label: {\n              formatter (options) {\n                const {\n                  seriesName,\n                  data: {\n                    value\n                  }\n                } = options\n                return `${seriesName}\\n${value}`\n              },\n              fontSize: 30\n            },\n            center: ['24%', '20%'],\n            radius: '40%',\n            waveAnimation: false\n          },\n          {\n            label: {\n              formatter (options) {\n                return `${options.seriesName}\\n${options.data.value}`\n              },\n              fontSize: 30\n            },\n            center: ['25%', '70%'],\n            radius: '40%'\n          },\n          {\n            label: {\n              fontSize: 30\n            },\n            center: ['70%', '50%'],\n            radius: '40%',\n            waveAnimation: false\n          }\n        ]\n      }\n      return {\n        chartData: {\n          columns: ['city', 'percent'],\n          rows: [{\n            city: '上海',\n            percent: 0.6\n          }, {\n            city: '广州',\n            percent: 0.4\n          }, {\n            city: '成都',\n            percent: 0.9\n          }]\n        }\n      }\n    }\n  }\n")]),t._m(3),e("p",[e("vuep",{attrs:{template:"#set-shape"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-shape"}},[t._v("\n<template>\n  <ve-liquidfill :data=\"chartData\" :settings=\"chartSettings\"></ve-liquidfill>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        seriesMap: {\n          '上海': {\n            shape: 'rect'\n          }\n        }\n      }\n      return {\n        chartData: {\n          columns: ['city', 'percent'],\n          rows: [{\n            city: '上海',\n            percent: 0.6\n          }]\n        }\n      }\n    }\n  }\n")]),t._m(4),e("p",[e("vuep",{attrs:{template:"#set-style"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-style"}},[t._v("\n<template>\n  <ve-liquidfill\n    :data=\"chartData\"\n    background-color=\"#000\"\n    :settings=\"chartSettings\">\n  </ve-gauge>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        seriesMap: {\n          '上海': {\n            color: ['red'],\n            itemStyle: {\n              opacity: 0.2\n            },\n            emphasis: {\n              itemStyle: {\n                opacity: 0.8\n              }\n            },\n            backgroundStyle: {\n              color: 'yellow'\n            },\n            label: {\n              formatter (options) {\n                const {\n                  seriesName,\n                  value\n                } = options\n                return `${seriesName}\\n${value * 100}%`\n              },\n              fontSize: 40,\n              color: 'green',\n              insideColor: 'red'\n            }\n          }\n        }\n      }\n      return {\n        chartData: {\n          columns: ['city', 'percent'],\n          rows: [{\n            city: '上海',\n            percent: 0.6\n          }]\n        }\n      }\n    }\n  }\n")]),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),e("p",[t._v("!> 注意：不要在seriesMap中设置data，这样会覆盖row中对应的数据和wave。")]),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20)])},[function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shui-qiu-tu-fen-ceng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shui-qiu-tu-fen-ceng"}},[this._v("¶")]),this._v(" 水球图分层")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-duo-ge-shui-qiu-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-duo-ge-shui-qiu-tu"}},[this._v("¶")]),this._v(" 设置多个水球图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-shui-qiu-tu-de-xing-zhuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-shui-qiu-tu-de-xing-zhuang"}},[this._v("¶")]),this._v(" 设置水球图的形状")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shui-qiu-tu-wen-zi-biao-qian-ji-yang-shi-she-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shui-qiu-tu-wen-zi-biao-qian-ji-yang-shi-she-zhi"}},[this._v("¶")]),this._v(" 水球图文字标签及样式设置")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("String")]),e("td",[t._v("默认 columns[0]")])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("String")]),e("td",[t._v("默认 columns[1]")])]),e("tr",[e("td",[t._v("dataType")]),e("td",[t._v("数据类型")]),e("td",[t._v("String")]),e("td",[t._v("默认为percent,也可设置为normal")])]),e("tr",[e("td",[t._v("digit")]),e("td",[t._v("设置数据类型为percent时保留的位数")]),e("td",[t._v("Number")]),e("td",[t._v("默认为2")])]),e("tr",[e("td",[t._v("wave")]),e("td",[t._v("设置水球图分层")]),e("td",[t._v("Array[Number]，Array[Array[Number]]")]),e("td",[t._v("默认为[], 数组中的值不大于row中对应的维度值，且需要由大到小排列。可设置为[0.3, 0.2, 0.1]的形式，表示每个水球图都显示4层，且最下面三层的值分别为0.1，0.2，0.3；也可设置为[[0.2, 0.1], [0.1], []]的形式，当有多个水球图时，wave中的每一项对应一个水球图的分层设置，如果wave.length < rows.length,则剩余的水球图的分层设置以wave数组中最后一项为准。比如rows=[{val: 0.1}, {val: 0.2}, {val: 0.3}, {val: 0.4}], 而wave=[[0.2,0.1], [0.2]]，此时rows中后三项的分层设置均为[0.2]")])]),e("tr",[e("td",[t._v("seriesMap")]),e("td",[t._v("附加到 series 中的设置")]),e("td",[t._v("Object，Array[Object]")]),e("td",[t._v("默认为{}，可以设置单个水球图，也可以一次设置多个。数组形式配置见“多个水球图”示例，对象形式配置见其他示例。")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注1： 通过 seriesMap，可以为每一个水球图设置样式，具体样式的配置可以参考"),t("a",{attrs:{href:"https://github.com/ecomfe/echarts-liquidfill"}},[this._v("文档")]),this._v("或下面对应的中文文档。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h3",{attrs:{id:"echarts-liquidfill-pei-zhi-zhong-wen-wen-dang-zai-seriesmap-zhong-shi-yong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#echarts-liquidfill-pei-zhi-zhong-wen-wen-dang-zai-seriesmap-zhong-shi-yong"}},[this._v("¶")]),this._v(" echarts-liquidfill配置中文文档(在seriesMap中使用))")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"seriesmap-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#seriesmap-pei-zhi-xiang"}},[this._v("¶")]),this._v(" seriesMap 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("color")]),e("td",[t._v("颜色")]),e("td",[t._v("Array[String]")]),e("td",[t._v("data中第一个数据对应color中第一个颜色，以此类推。如果color.length小于data.length, data中数据项的颜色会循环展示。在这里，color设置的是row中metrics和wave的值对应数据波浪的颜色。")])]),e("tr",[e("td",[t._v("radius")]),e("td",[t._v("水球图的半径")]),e("td",[t._v("String")]),e("td",[t._v("单个水球图的半径，相对于容器元素中较短边(width和height)的长度，以百分数表示,如’50%’")])]),e("tr",[e("td",[t._v("center")]),e("td",[t._v("水球图的位置")]),e("td",[t._v("Array[String]")]),e("td",[t._v("设置时以百分数表示，数组中第一项代表横坐标，相对于容器的width的百分比，第二项代表纵坐标，相对于容器heigght的百分比。如[’50%’, ’50%’]表示居中")])]),e("tr",[e("td",[t._v("amplitude")]),e("td",[t._v("水波的起伏程度")]),e("td",[t._v("String")]),e("td",[t._v("用百分数表示。数值越大，起伏程度越大，如’10%’")])]),e("tr",[e("td",[t._v("waveLength")]),e("td",[t._v("水波的长度")]),e("td",[t._v("String")]),e("td",[t._v("相对于水球的直径。当为’50%’时，水球图中一条数据上会出现两个水波；为33%时，会出现三个水波。以此类推。")])]),e("tr",[e("td",[t._v("period")]),e("td",[t._v("水波滚动的速度")]),e("td",[t._v("Number, Function")]),e("td",[t._v("表示滚动一个水波需要花费的时间，以毫秒为单位。可以直接设置数字，也可以设置为function(value, index)的形式。")])]),e("tr",[e("td",[t._v("direction")]),e("td",[t._v("水波的滚动方向")]),e("td",[t._v("String")]),e("td",[t._v("整体设置水波的滚动方向，可选’left’或’right’")])]),e("tr",[e("td",[t._v("shape")]),e("td",[t._v("水球图的形状")]),e("td",[t._v("String")]),e("td",[t._v("水球图的形状，可选值有’circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’，也可以通过svg自定义’path://*'")])]),e("tr",[e("td",[t._v("waveAnimation")]),e("td",[t._v("水波是否滚动")]),e("td",[t._v("Boolean")]),e("td",[t._v("为true时水波滚动，反之不滚动。默认为true")])]),e("tr",[e("td",[t._v("animationEasing")]),e("td",[t._v("水波初始的动画的速度曲线")]),e("td",[t._v("String")]),e("td",[t._v("水波初始的动画的速度曲线")])]),e("tr",[e("td",[t._v("animationEasingUpdate")]),e("td",[t._v("数据变动时水波动画的速度曲线")]),e("td",[t._v("String")]),e("td",[t._v("数据变动时水波动画的速度曲线")])]),e("tr",[e("td",[t._v("animationDuration")]),e("td",[t._v("水波初始动画所需要的时间")]),e("td",[t._v("Number")]),e("td",[t._v("水波初始动画所需要的时间")])]),e("tr",[e("td",[t._v("animationDurationUpdate")]),e("td",[t._v("数据变动时水波动画变化所需要的时间")]),e("td",[t._v("Number")]),e("td",[t._v("数据变动时水波动画变化所需要的时间")])]),e("tr",[e("td",[t._v("outline")]),e("td",[t._v("水球图的外边框设置")]),e("td",[t._v("Object")]),e("td",[t._v("水球图的外边框设置")])]),e("tr",[e("td",[t._v("backgroundStyle")]),e("td",[t._v("水球图的背景颜色")]),e("td",[t._v("Object")]),e("td",[t._v("水球图的背景颜色")])]),e("tr",[e("td",[t._v("itemStyle")]),e("td",[t._v("水球图波浪的样式")]),e("td",[t._v("Object")]),e("td",[t._v("水球图波浪的样式")])]),e("tr",[e("td",[t._v("emphasis")]),e("td",[t._v("鼠标悬浮时波浪的样式")]),e("td",[t._v("Object")]),e("td",[t._v("鼠标悬浮时波浪的样式")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("图形上的文本标签")]),e("td",[t._v("Object")]),e("td",[t._v("图形上的文本标签")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h5",{attrs:{id:"outline-shui-qiu-tu-wai-bian-kuang-pei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#outline-shui-qiu-tu-wai-bian-kuang-pei-zhi"}},[this._v("¶")]),this._v(' "outline" 水球图外边框配置')])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("show")]),e("td",[t._v("是否显示")]),e("td",[t._v("Boolean")]),e("td")]),e("tr",[e("td",[t._v("borderDistance")]),e("td"),e("td",[t._v("Number")]),e("td",[t._v("水球图外边框和水球图核心内容的距离，类似于元素的内边距")])]),e("tr",[e("td",[t._v("itemStyle")]),e("td",[t._v("水球图外边框的样式")]),e("td",[t._v("Object")]),e("td",[t._v("主要配置项有color: String(边框和核心内容之间的背景颜色，也就是borderDistance那部分的背景颜色), borderColor: String(外边框的颜色)，borderWidth: Number(外边框的宽度)，shadowBlur: Number(外边阴影的模糊距离)，shadowColor: String(边框阴影的颜色)")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h5",{attrs:{id:"backgroundstyle-pei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#backgroundstyle-pei-zhi"}},[this._v("¶")]),this._v(' "backgroundStyle" 配置')])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("color")]),e("td",[t._v("水球图的背景颜色")]),e("td",[t._v("String")]),e("td")]),e("tr",[e("td",[t._v("borderWidth")]),e("td",[t._v("背景的边框")]),e("td",[t._v("Number")]),e("td")]),e("tr",[e("td",[t._v("borderColor")]),e("td",[t._v("背景边框的颜色")]),e("td",[t._v("String")]),e("td")])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h5",{attrs:{id:"itemstyle-pei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#itemstyle-pei-zhi"}},[this._v("¶")]),this._v(' "itemStyle" 配置')])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("opacity")]),e("td",[t._v("波浪的透明度")]),e("td",[t._v("Number")]),e("td")]),e("tr",[e("td",[t._v("shadowBlur")]),e("td",[t._v("波浪阴影的模糊距离")]),e("td",[t._v("Number")]),e("td")]),e("tr",[e("td",[t._v("shadowColor")]),e("td",[t._v("波浪阴影的颜色")]),e("td",[t._v("String")]),e("td")])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h5",{attrs:{id:"emphasis-pei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#emphasis-pei-zhi"}},[this._v("¶")]),this._v(' "emphasis" 配置')])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("itemStyle")]),e("td",[t._v("鼠标悬浮时波浪的样式")]),e("td",[t._v("Object")]),e("td",[t._v("opacity: Number(鼠标悬浮时波浪的透明度)")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h5",{attrs:{id:"label-pei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#label-pei-zhi"}},[this._v("¶")]),this._v(' "label" 配置')])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("show")]),e("td",[t._v("是否显示")]),e("td",[t._v("Boolean")]),e("td",[t._v("默认显示")])]),e("tr",[e("td",[t._v("color")]),e("td",[t._v("文本的颜色")]),e("td",[t._v("String")]),e("td")]),e("tr",[e("td",[t._v("insideColor")]),e("td",[t._v("被波浪覆盖部分的文本的颜色")]),e("td",[t._v("String")]),e("td")]),e("tr",[e("td",[t._v("fontWeight")]),e("td",[t._v("文本的字重")]),e("td",[t._v("String")]),e("td")]),e("tr",[e("td",[t._v("fontSize")]),e("td",[t._v("字号")]),e("td",[t._v("Number")]),e("td")]),e("tr",[e("td",[t._v("formatter")]),e("td",[t._v("自定义文字标签内容")]),e("td",[t._v("Function")]),e("td")]),e("tr",[e("td",[t._v("align")]),e("td",[t._v("文本的位置")]),e("td",[t._v("String")]),e("td",[t._v("可选值有'left', 'center', 'right")])]),e("tr",[e("td",[t._v("baseline")]),e("td",[t._v("文本垂直方向上对齐方向")]),e("td",[t._v("String")]),e("td",[t._v("可选值有'top', 'middle', 'bottom'")])]),e("tr",[e("td",[t._v("position")]),e("td",[t._v("文本的位置")]),e("td",[t._v("String, Array[string]")]),e("td",[t._v("有inside, left, right, top, bottom可选，也可设置为[’10%’, ’20%’]形式表示水平和垂直方向的位置")])])])])}],!1,null,null,null),e.default=n.exports},1367:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h1",[t._v("地图")]),t._m(0),e("p",[e("vuep",{attrs:{template:"#simple-map"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"simple-map"}},[t._v("\n<template>\n  <ve-map :data=\"chartData\"></ve-map>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['位置', '税收', '人口', '面积'],\n          rows: [\n            { '位置': '吉林', '税收': 123, '人口': 123, '面积': 92134 },\n            { '位置': '北京', '税收': 1223, '人口': 2123, '面积': 29234 },\n            { '位置': '上海', '税收': 2123, '人口': 1243, '面积': 94234 },\n            { '位置': '浙江', '税收': 4123, '人口': 5123, '面积': 29234 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(1),e("p",[e("vuep",{attrs:{template:"#set-metrics-dimension"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-metrics-dimension"}},[t._v("\n<template>\n  <ve-map :data=\"chartData\" :settings=\"chartSettings\"></ve-map>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        position: 'china',\n        dimension: '位置',\n        metrics: ['人口', '面积'],\n        dataType: {\n          '面积': 'KMB'\n        }\n      }\n      return {\n        chartData: {\n          columns: ['位置', '税收', '人口', '面积'],\n          rows: [\n            { '位置': '吉林', '税收': 123, '人口': 123, '面积': 92134 },\n            { '位置': '北京', '税收': 1223, '人口': 2123, '面积': 29234 },\n            { '位置': '上海', '税收': 2123, '人口': 1243, '面积': 94234 },\n            { '位置': '浙江', '税收': 4123, '人口': 5123, '面积': 29234 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(2),e("p",[e("vuep",{attrs:{template:"#set-city"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-city"}},[t._v("\n<template>\n  <ve-map :data=\"chartData\" :settings=\"chartSettings\"></ve-map>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        position: 'province/beijing'\n      }\n      return {\n        chartData: {\n          columns: ['位置', '人口'],\n          rows: [\n            { '位置': '延庆区', '人口': 123 },\n            { '位置': '密云区', '人口': 1223 },\n            { '位置': '平谷区', '人口': 2123 },\n            { '位置': '海淀区', '人口': 4123 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(3),e("p",[e("vuep",{attrs:{template:"#change-metrics-name"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"change-metrics-name"}},[t._v("\n<template>\n  <ve-map :data=\"chartData\" :settings=\"chartSettings\"></ve-map>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        position: 'province/beijing',\n        labelMap: {\n          'people': '人口'\n        }\n      }\n      return {\n        chartData: {\n          columns: ['位置', 'people'],\n          rows: [\n            { '位置': '延庆区', 'people': 123 },\n            { '位置': '密云区', 'people': 1223 },\n            { '位置': '平谷区', 'people': 2123 },\n            { '位置': '海淀区', 'people': 4123 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(4),e("p",[e("vuep",{attrs:{template:"#set-selection"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-selection"}},[t._v("\n<template>\n  <div>\n    <span>当前选中了: {{ cityName || '-' }}</span>\n    <ve-map :data=\"chartData\" :settings=\"chartSettings\" :events=\"chartEvents\"></ve-map>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        position: 'china',\n        // selectData: true,\n        selectedMode: 'single'\n      }\n      this.chartEvents = {\n        click: (v) => {\n          this.cityName = v.name\n        }\n      }\n      return {\n        cityName: '',\n        chartData: {\n          columns: ['位置', 'GDP'],\n          rows: [\n            { '位置': '吉林', 'GDP': 123 },\n            { '位置': '北京', 'GDP': 1223 },\n            { '位置': '上海', 'GDP': 2123 },\n            { '位置': '浙江', 'GDP': 4123 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(5),e("p",[e("vuep",{attrs:{template:"#set-style"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-style"}},[t._v("\n<template>\n  <ve-map :data=\"chartData\" :settings=\"chartSettings\"></ve-map>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        position: 'china',\n        label: false,\n        itemStyle: {\n          normal: {\n            borderColor: '#00f'\n          }\n        },\n        zoom: 1.2\n      }\n      return {\n        chartData: {\n          columns: ['位置', '人口'],\n          rows: [\n            { '位置': '吉林', ' 人口': 123 },\n            { '位置': '北京', ' 人口': 1223 },\n            { '位置': '上海', ' 人口': 2123 },\n            { '位置': '浙江', ' 人口': 4123 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(6),e("p",[e("vuep",{attrs:{template:"#set-position-json"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-position-json"}},[t._v("\n<template>\n  <ve-map :data=\"chartData\" :settings=\"chartSettings\" :extend=\"chartExtend\"></ve-map>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        positionJsonLink: 'https://unpkg.com/v-charts-custom-maps@0.2.1/hk-geo.json',\n        position: 'HK',\n        beforeRegisterMap (json) {\n          // edit data here such as:\n          // json.features[0].properties.cp = [121.509062, 26.044332]\n          return json\n        }\n      }\n      this.chartExtend = {\n        series: {\n          nameMap: {\n            'Central and Western':'中西区',\n            'Eastern':'东区',\n            'Islands':'离岛',\n            'Kowloon City':'九龙城',\n            'Kwai Tsing':'葵青',\n            'Kwun Tong':'观塘',\n            'North':'北区',\n            'Sai Kung':'西贡',\n            'Sha Tin':'沙田',\n            'Sham Shui Po':'深水埗',\n            'Southern':'南区',\n            'Tai Po':'大埔',\n            'Tsuen Wan':'荃湾',\n            'Tuen Mun':'屯门',\n            'Wan Chai':'湾仔',\n            'Wong Tai Sin':'黄大仙',\n            'Yau Tsim Mong':'油尖旺',\n            'Yuen Long':'元朗'\n          }\n        }\n      }\n      return {\n        chartData: {\n          columns: ['位置', ' 人口'],\n          rows: [\n            { '位置': '北区', ' 人口': 123 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(7),t._m(8),t._m(9)])},[function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-zhi-biao-wei-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-zhi-biao-wei-du"}},[this._v("¶")]),this._v(" 设置指标维度")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-cheng-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-cheng-shi"}},[this._v("¶")]),this._v(" 设置城市")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"xiu-gai-zhi-biao-ming-cheng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-zhi-biao-ming-cheng"}},[this._v("¶")]),this._v(" 修改指标名称")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-xuan-zhong-mo-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-xuan-zhong-mo-shi"}},[this._v("¶")]),this._v(" 设置选中模式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-yang-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-yang-shi"}},[this._v("¶")]),this._v(" 设置样式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-zi-ding-yi-wei-zhi-bing-xiu-gai-shu-ju-yuan"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-zi-ding-yi-wei-zhi-bing-xiu-gai-shu-ju-yuan"}},[this._v("¶")]),this._v(" 设置自定义位置并修改数据源")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("string")]),e("td",[t._v("默认columns第一项为维度")])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("array")]),e("td",[t._v("默认columns第二项为指标")])]),e("tr",[e("td",[t._v("position")]),e("td",[t._v("位置")]),e("td",[t._v("string")]),e("td",[t._v("默认为 "),e("code",[t._v("'china'")])])]),e("tr",[e("td",[t._v("selectData")]),e("td",[t._v("是否高亮显示数据对应位置")]),e("td",[t._v("boolean")]),e("td",[t._v("默认为 "),e("code",[t._v("false")])])]),e("tr",[e("td",[t._v("selectedMode")]),e("td",[t._v("地图选中模式")]),e("td",[t._v("Boolean，String")]),e("td",[t._v("默认为 "),e("code",[t._v("false")]),t._v(", 可选值有"),e("br"),e("code",[t._v("'single', 'multiple'")])])]),e("tr",[e("td",[t._v("dataType")]),e("td",[t._v("指标数据类型")]),e("td",[t._v("object")]),e("td",[t._v("内容为 指标-指标数据 "),e("br"),t._v("类型的键值对，支持"),e("br"),e("code",[t._v("'normal', 'KMB', 'percent'")])])]),e("tr",[e("td",[t._v("digit")]),e("td",[t._v("设置数据类型为percent时保留的位数")]),e("td",[t._v("number")]),e("td",[t._v("默认为2")])]),e("tr",[e("td",[t._v("zoom")]),e("td",[t._v("视角的缩放比例")]),e("td",[t._v("number")]),e("td",[t._v("默认为1")])]),e("tr",[e("td",[t._v("center")]),e("td",[t._v("当前视角的中心点")]),e("td",[t._v("array")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("aspectScale")]),e("td",[t._v("用于 scale 地图的长宽比")]),e("td",[t._v("number")]),e("td",[t._v("默认为0.75")])]),e("tr",[e("td",[t._v("boundingCoords")]),e("td",[t._v("左上角以及右下角分别所对应的经纬度")]),e("td",[t._v("array")]),e("td",[t._v("默认为null")])]),e("tr",[e("td",[t._v("roam")]),e("td",[t._v("是否开启鼠标缩放和平移漫游")]),e("td",[t._v("boolean, string")]),e("td",[t._v("默认为false, 可选值有"),e("br"),e("code",[t._v("false, true, 'scale', 'move'")])])]),e("tr",[e("td",[t._v("scaleLimit")]),e("td",[t._v("滚轮缩放的极限控制")]),e("td",[t._v("object")]),e("td",[t._v("默认"),e("code",[t._v("{ min: 1, max: 1 }")])])]),e("tr",[e("td",[t._v("mapGrid")]),e("td",[t._v("地图距离容器的边距")]),e("td",[t._v("object")]),e("td",[t._v("默认值为"),e("br"),e("code",[t._v("{")]),e("br"),e("code",[t._v("left: auto,")]),e("br"),e("code",[t._v("right: auto,")]),e("br"),e("code",[t._v("top: auto,")]),e("br"),e("code",[t._v("bottom: auto")]),e("br"),e("code",[t._v("}")])])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("文本标签")]),e("td",[t._v("boolean, object")]),e("td",[t._v("默认为"),e("code",[t._v("true")]),t._v(", 内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-map.label"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("itemStyle")]),e("td",[t._v("地图区域的多边形 图形样式")]),e("td",[t._v("boolean, object")]),e("td",[t._v("默认为true, 内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-map.itemStyle"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("positionJsonLink")]),e("td",[t._v("地图数据源")]),e("td",[t._v("string")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("beforeRegisterMap")]),e("td",[t._v("地图数据注册前执行的函数")]),e("td",[t._v("Function")]),e("td",[t._v("参数为地图数据，需返回地图数据")])]),e("tr",[e("td",[t._v("beforeRegisterMapOnce")]),e("td",[t._v("地图数据注册前执行的函数(仅执行一次)")]),e("td",[t._v("Function")]),e("td",[t._v("参数为地图数据，需返回地图数据")])]),e("tr",[e("td",[t._v("specialAreas")]),e("td",[t._v("地图中的位置配置")]),e("td",[t._v("object")]),e("td",[t._v("将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看, 用法参考"),e("a",{attrs:{href:"http://echarts.baidu.com/api.html#echarts.registerMap"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("mapURLProfix")]),e("td",[t._v("位置请求的 URL 前缀")]),e("td",[t._v("string")]),e("td",[t._v("默认为 "),e("code",[t._v("https://unpkg.com/echarts@3.6.2/map/json/")])])]),e("tr",[e("td",[t._v("mapOrigin")]),e("td",[t._v("地图 geojson")]),e("td",[t._v("object")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注: 属性中的 position 默认为'china',可设置的类型有'china'、'china-cities'、'china-contour'、'world'、'province/beijing'、'province/shanghai'等，省份的position如例子中所示需要在前面加'province/'")])])}],!1,null,null,null),e.default=n.exports},1368:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h1",[t._v("K线图")]),t._m(0),e("p",[e("vuep",{attrs:{template:"#simple"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"simple"}},[t._v("\n<template>\n  <ve-candle :data=\"chartData\"></ve-candle>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],\n          rows: [\n            { '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },\n            { '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },\n            { '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },\n            { '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },\n            { '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },\n            { '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },\n            { '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },\n            { '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },\n            { '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },\n            { '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },\n            { '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },\n            { '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },\n            { '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },\n            { '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },\n            { '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },\n            { '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },\n            { '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },\n            { '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },\n            { '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },\n            { '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },\n            { '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },\n            { '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },\n            { '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },\n            { '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },\n            { '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },\n            { '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },\n            { '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },\n            { '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },\n            { '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },\n            { '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },\n            { '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },\n            { '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },\n            { '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },\n            { '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },\n            { '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },\n            { '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },\n            { '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },\n            { '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(1),e("p",[e("vuep",{attrs:{template:"#simple-data"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"simple-data"}},[t._v("\n<template>\n  <ve-candle :data=\"chartData\"></ve-candle>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],\n          rows: [\n            ['2004-01-05', 10411.85, 10544.07, 10411.85, 10575.92, 221290000],\n            ['2004-01-06', 10543.85, 10538.66, 10454.37, 10584.07, 191460000],\n            ['2004-01-07', 10535.46, 10529.03, 10432, 10587.55, 225490000],\n            ['2004-01-08', 10530.07, 10592.44, 10480.59, 10651.99, 237770000],\n            ['2004-01-09', 10589.25, 10458.89, 10420.52, 10603.48, 223250000],\n            ['2004-01-12', 10461.55, 10485.18, 10389.85, 10543.03, 197960000],\n            ['2004-01-13', 10485.18, 10427.18, 10341.19, 10539.25, 197310000],\n            ['2004-01-14', 10428.67, 10538.37, 10426.89, 10573.85, 186280000],\n            ['2004-01-15', 10534.52, 10553.85, 10454.52, 10639.03, 260090000],\n            ['2004-01-16', 10556.37, 10600.51, 10503.7, 10666.88, 254170000],\n            ['2004-01-20', 10601.4, 10528.66, 10447.92, 10676.96, 224300000],\n            ['2004-01-21', 10522.77, 10623.62, 10453.11, 10665.7, 214920000],\n            ['2004-01-22', 10624.22, 10623.18, 10545.03, 10717.4, 219720000],\n            ['2004-01-23', 10625.25, 10568.29, 10490.14, 10691.77, 234260000],\n            ['2004-01-26', 10568, 10702.51, 10510.44, 10725.18, 186170000],\n            ['2004-01-27', 10701.1, 10609.92, 10579.33, 10748.81, 206560000],\n            ['2004-01-28', 10610.07, 10468.37, 10412.44, 10703.25, 247660000],\n            ['2004-01-29', 10467.41, 10510.29, 10369.92, 10611.56, 273970000],\n            ['2004-01-30', 10510.22, 10488.07, 10385.56, 10551.03, 208990000],\n            ['2004-02-02', 10487.78, 10499.18, 10395.55, 10614.44, 224800000],\n            ['2004-02-03', 10499.48, 10505.18, 10414.15, 10571.48, 183810000],\n            ['2004-02-04', 10503.11, 10470.74, 10394.81, 10567.85, 227760000],\n            ['2004-02-05', 10469.33, 10495.55, 10399.92, 10566.37, 187810000],\n            ['2004-02-06', 10494.89, 10593.03, 10433.7, 10634.81, 182880000],\n            ['2004-02-09', 10592, 10579.03, 10433.7, 10634.81, 160720000],\n            ['2004-02-10', 10578.74, 10613.85, 10511.18, 10667.03, 160590000],\n            ['2004-02-11', 10605.48, 10737.7, 10561.55, 10779.4, 277850000],\n            ['2004-02-12', 10735.18, 10694.07, 10636.44, 10775.03, 197560000],\n            ['2004-02-13', 10696.22, 10627.85, 10578.66, 10755.47, 208340000],\n            ['2004-02-17', 10628.88, 10714.88, 10628.88, 10762.07, 169730000],\n            ['2004-02-18', 10706.68, 10671.99, 10623.62, 10764.36, 164370000],\n            ['2004-02-19', 10674.59, 10664.73, 10626.44, 10794.95, 219890000],\n            ['2004-02-20', 10666.29, 10619.03, 10559.11, 10722.77, 220560000],\n            ['2004-02-23', 10619.55, 10609.62, 10508.89, 10711.84, 229950000],\n            ['2004-02-24', 10609.55, 10566.37, 10479.33, 10681.4, 225670000],\n            ['2004-02-25', 10566.59, 10601.62, 10509.4, 10660.73, 192420000],\n            ['2004-02-26', 10598.14, 10580.14, 10493.7, 10652.96, 223230000],\n            ['2004-02-27', 10581.55, 10583.92, 10519.03, 10689.55, 200050000]\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(2),e("p",[e("vuep",{attrs:{template:"#set-dataType"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-dataType"}},[t._v("\n<template>\n  <ve-candle :data=\"chartData\" :settings=\"chartSettings\"></ve-candle>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        dataType: 'KMB'\n      }\n      return {\n        chartData: {\n          columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],\n          rows: [\n            { '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },\n            { '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },\n            { '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },\n            { '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },\n            { '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },\n            { '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },\n            { '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },\n            { '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },\n            { '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },\n            { '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },\n            { '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },\n            { '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },\n            { '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },\n            { '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },\n            { '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },\n            { '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },\n            { '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },\n            { '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },\n            { '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },\n            { '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },\n            { '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },\n            { '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },\n            { '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },\n            { '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },\n            { '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },\n            { '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },\n            { '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },\n            { '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },\n            { '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },\n            { '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },\n            { '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },\n            { '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },\n            { '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },\n            { '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },\n            { '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },\n            { '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },\n            { '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },\n            { '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(3),e("p",[e("vuep",{attrs:{template:"#show-ma-vol"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"show-ma-vol"}},[t._v("\n<template>\n  <ve-candle :data=\"chartData\" :settings=\"chartSettings\"></ve-candle>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        showMA: true,\n        showVol: true\n      }\n      return {\n        chartData: {\n          columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],\n          rows: [\n            { '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },\n            { '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },\n            { '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },\n            { '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },\n            { '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },\n            { '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },\n            { '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },\n            { '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },\n            { '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },\n            { '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },\n            { '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },\n            { '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },\n            { '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },\n            { '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },\n            { '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },\n            { '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },\n            { '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },\n            { '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },\n            { '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },\n            { '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },\n            { '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },\n            { '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },\n            { '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },\n            { '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },\n            { '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },\n            { '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },\n            { '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },\n            { '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },\n            { '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },\n            { '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },\n            { '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },\n            { '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },\n            { '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },\n            { '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },\n            { '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },\n            { '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },\n            { '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },\n            { '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(4),e("p",[e("vuep",{attrs:{template:"#set-label-legend"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-label-legend"}},[t._v("\n<template>\n  <ve-candle :data=\"chartData\" :settings=\"chartSettings\"></ve-candle>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        showMA: true,\n        showVol: true,\n        labelMap: {\n          MA5: 'ma5'\n        },\n        legendName: {\n          '日K': 'day k'\n        },\n        showDataZoom: true\n      }\n      return {\n        chartData: {\n          columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],\n          rows: [\n            { '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },\n            { '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },\n            { '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },\n            { '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },\n            { '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },\n            { '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },\n            { '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },\n            { '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },\n            { '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },\n            { '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },\n            { '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },\n            { '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },\n            { '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },\n            { '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },\n            { '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },\n            { '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },\n            { '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },\n            { '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },\n            { '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },\n            { '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },\n            { '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },\n            { '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },\n            { '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },\n            { '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },\n            { '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },\n            { '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },\n            { '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },\n            { '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },\n            { '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },\n            { '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },\n            { '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },\n            { '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },\n            { '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },\n            { '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },\n            { '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },\n            { '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },\n            { '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },\n            { '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(5),e("p",[e("vuep",{attrs:{template:"#set-ma-list"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-ma-list"}},[t._v("\n<template>\n  <ve-candle :data=\"chartData\" :settings=\"chartSettings\"></ve-candle>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        showMA: true,\n        MA: [1, 2, 3, 4]\n      }\n      return {\n        chartData: {\n          columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],\n          rows: [\n            { '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },\n            { '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },\n            { '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },\n            { '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },\n            { '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },\n            { '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },\n            { '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },\n            { '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },\n            { '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },\n            { '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },\n            { '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },\n            { '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },\n            { '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },\n            { '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },\n            { '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },\n            { '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },\n            { '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },\n            { '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },\n            { '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },\n            { '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },\n            { '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },\n            { '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },\n            { '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },\n            { '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },\n            { '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },\n            { '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },\n            { '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },\n            { '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },\n            { '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },\n            { '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },\n            { '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },\n            { '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },\n            { '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },\n            { '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },\n            { '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },\n            { '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },\n            { '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },\n            { '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(6),e("p",[e("vuep",{attrs:{template:"#set-dataZoom"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-dataZoom"}},[t._v("\n<template>\n  <ve-candle :data=\"chartData\" :settings=\"chartSettings\"></ve-candle>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        showDataZoom: true,\n        start: 20,\n        end: 100\n      }\n      return {\n        chartData: {\n          columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],\n          rows: [\n            { '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },\n            { '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },\n            { '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },\n            { '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },\n            { '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },\n            { '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },\n            { '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },\n            { '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },\n            { '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },\n            { '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },\n            { '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },\n            { '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },\n            { '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },\n            { '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },\n            { '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },\n            { '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },\n            { '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },\n            { '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },\n            { '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },\n            { '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },\n            { '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },\n            { '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },\n            { '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },\n            { '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },\n            { '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },\n            { '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },\n            { '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },\n            { '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },\n            { '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },\n            { '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },\n            { '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },\n            { '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },\n            { '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },\n            { '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },\n            { '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },\n            { '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },\n            { '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },\n            { '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(7),t._m(8),t._m(9)])},[function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shi-yong-jian-hua-de-shu-ju-ge-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-jian-hua-de-shu-ju-ge-shi"}},[this._v("¶")]),this._v(" 使用简化的数据格式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-shu-ju-ge-shi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-shu-ju-ge-shi"}},[this._v("¶")]),this._v(" 设置数据格式")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"xian-shi-ma-vol"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xian-shi-ma-vol"}},[this._v("¶")]),this._v(" 显示MA, VOL")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"xiu-gai-zhi-biao-ming-he-tu-li-wen-zi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-zhi-biao-ming-he-tu-li-wen-zi"}},[this._v("¶")]),this._v(" 修改指标名和图例文字")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"xiu-gai-ma-xian-shi-zhou-qi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-ma-xian-shi-zhou-qi"}},[this._v("¶")]),this._v(" 修改 MA 显示周期")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-dataroom-kong-jian"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-dataroom-kong-jian"}},[this._v("¶")]),this._v(" 设置 dataRoom 控件")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("string")]),e("td",[t._v("默认为 columns[0]")])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("array")]),e("td",[t._v("默认为 [columns[1] ~ columns[5]]")])]),e("tr",[e("td",[t._v("digit")]),e("td",[t._v("设置数据类型为percent时保留的位数")]),e("td",[t._v("number")]),e("td",[t._v("默认为2")])]),e("tr",[e("td",[t._v("itemStyle")]),e("td",[t._v("图形样式")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-candlestick.itemStyle"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("labelMap")]),e("td",[t._v("设置指标的别名")]),e("td",[t._v("object")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("legendName")]),e("td",[t._v("设置图表上方图例的别名")]),e("td",[t._v("object")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("showMA")]),e("td",[t._v("是否展示移动平均线指标")]),e("td",[t._v("boolean")]),e("td",[t._v("默认 为 false")])]),e("tr",[e("td",[t._v("MA")]),e("td",[t._v("移动平均线指标周期")]),e("td",[t._v("array")]),e("td",[t._v("默认 "),e("code",[t._v("[5, 10, 20, 30]")])])]),e("tr",[e("td",[t._v("showVol")]),e("td",[t._v("是否展示成交量")]),e("td",[t._v("boolean")]),e("td",[t._v("默认为 false")])]),e("tr",[e("td",[t._v("downColor")]),e("td",[t._v("下降颜色")]),e("td",[t._v("string")]),e("td",[t._v("默认为 #ec0000")])]),e("tr",[e("td",[t._v("upColor")]),e("td",[t._v("上升颜色")]),e("td",[t._v("string")]),e("td",[t._v("默认为 #00da3c")])]),e("tr",[e("td",[t._v("showDataZoom")]),e("td",[t._v("是否展示 dataZoom 控件")]),e("td",[t._v("boolean")]),e("td",[t._v("默认为 false")])]),e("tr",[e("td",[t._v("start")]),e("td",[t._v("dataZoom 控件的起始位置")]),e("td",[t._v("number")]),e("td",[t._v("默认为 50，即中间位置")])]),e("tr",[e("td",[t._v("end")]),e("td",[t._v("dataZoom 控件的结束位置")]),e("td",[t._v("number")]),e("td",[t._v("默认为 100，即末尾位置")])]),e("tr",[e("td",[t._v("dataType")]),e("td",[t._v("数据展示格式")]),e("td",[t._v("string")]),e("td",[t._v("可选值: KMB, normal, percent")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注1: metrics 各项的值分别代表 "),t("code",[this._v("['open', 'close', 'lowest', 'highest', 'vol']")]),this._v("（开盘值, 收盘值, 最低值, 最高值, 成交量）, 其中 vol 为可选值。\n备注2: k 线图左侧数值被遮挡时，可以通过设置 grid 属性来增加数值可用空间，从而避免遮挡。示例： ")])])}],!1,null,null,null),e.default=n.exports},1369:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h1",[t._v("百度/高德地图")]),e("p",[t._v("为了使在echarts上更简单的使用百度/高德地图，v-charts封装了一个百度/高德地图的‘壳子’，在settings中添加关于图表的配置（key,bmap,amap），在组件上直接设置 series, tooltip 等，便可生成以百度/高德地图为坐标系的 Echarts 图表。")]),t._m(0),e("p",[e("vuep",{attrs:{template:"#simple-bmap"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"simple-bmap"}},[t._v("\n<template>\n  <ve-bmap\n    :settings=\"chartSettings\"\n    :series=\"chartSeries\"\n    :tooltip=\"chartTooltip\">\n  </ve-bmap>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        key: 'oBvDtR6nzWtVchkY4cLHtnah1VVZQKRK',\n        bmap: {\n          center: [120, 30],\n          zoom: 14,\n          roam: true,\n          mapStyle: {}\n        }\n      }\n      this.chartTooltip = { show: true }\n      return {\n        chartSeries: [\n          {\n            type: 'scatter',\n            coordinateSystem: 'bmap',\n            data: [\n              [120, 30, 1] // 经度，维度，value，...\n            ]\n          }\n        ]\n      }\n    }\n  }\n")]),t._m(1),e("p",[e("vuep",{attrs:{template:"#simple-amap"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"simple-amap"}},[t._v("\n<template>\n  <ve-amap\n    :settings=\"chartSettings\"\n    :series=\"chartSeries\"\n    :tooltip=\"chartTooltip\">\n  </ve-amap>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        key: '4b5f2cf2cba25200cc6b68c398468899',\n        v: '1.4.3',\n        amap: {\n          resizeEnable: true,\n          center: [120.14322240845, 30.236064370321],\n          zoom: 10\n        }\n      }\n      this.chartTooltip = { show: true }\n      return {\n        chartSeries: [\n          {\n            type: 'scatter',\n            coordinateSystem: 'bmap',\n            data: [\n              [120, 30, 1] // 经度，维度，value，...\n            ]\n          }\n        ]\n      }\n    }\n  }\n")]),t._m(2),e("p",[e("vuep",{attrs:{template:"#set-bmap"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-bmap"}},[t._v("\n<template>\n  <ve-bmap\n    :settings=\"chartSettings\"\n    :after-set-option-once=\"afterSet\"\n    :series=\"chartSeries\"\n    :tooltip=\"chartTooltip\">\n  </ve-bmap>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        key: 'oBvDtR6nzWtVchkY4cLHtnah1VVZQKRK',\n        bmap: {\n          center: [120, 30],\n          zoom: 14,\n          roam: true,\n          mapStyle: {}\n        }\n      }\n      this.chartTooltip = { show: true }\n      return {\n        chartSeries: [\n          {\n            type: 'scatter',\n            coordinateSystem: 'bmap',\n            data: [\n              [120, 30, 1] // 经度，维度，value，...\n            ]\n          }\n        ]\n      }\n    },\n    methods: {\n      afterSet: function (echarts) {\n        var bmap = echarts.getModel().getComponent('bmap').getBMap()\n        bmap.addControl(new window.BMap.MapTypeControl())\n      }\n    }\n  }\n")]),t._m(3),t._m(4),t._m(5)])},[function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"bai-du-di-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bai-du-di-tu"}},[this._v("¶")]),this._v(" 百度地图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"gao-de-di-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#gao-de-di-tu"}},[this._v("¶")]),this._v(" 高德地图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"huo-qu-di-tu-shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#huo-qu-di-tu-shi-li"}},[this._v("¶")]),this._v(" 获取地图实例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("key")]),e("td",[t._v("百度/高德地图 access_key")]),e("td",[t._v("string")]),e("td",[t._v("可"),e("a",{attrs:{href:"http://lbsyun.baidu.com/apiconsole/key"}},[t._v("由此")]),t._v("获取")])]),e("tr",[e("td",[t._v("v")]),e("td",[t._v("百度/高德地图版本")]),e("td",[t._v("string")]),e("td",[t._v("默认2.0(百度)/1.4.3(高德)")])]),e("tr",[e("td",[t._v("bmap")]),e("td",[t._v("百度地图配置项")]),e("td",[t._v("object")]),e("td",[t._v("参考"),e("a",{attrs:{href:"https://github.com/ecomfe/echarts/tree/master/extension/bmap#%E4%BD%BF%E7%94%A8"}},[t._v("文档")]),t._v("配置")])]),e("tr",[e("td",[t._v("amap")]),e("td",[t._v("高德地图配置项")]),e("td",[t._v("object")]),e("td",[t._v("参考高德地图文档配置")])]),e("tr",[e("td",[t._v("useOuterMap")]),e("td",[t._v("使用全局的地图依赖")]),e("td",[t._v("boolean")]),e("td",[t._v("-")])])])])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("blockquote",[e("ol",[e("li",[t._v("百度/高德地图在与其他地图搭配使用时，需要额外引入相应的 echarts 模块，例如使用热力图，则需要"),e("code",[t._v("import 'echarts/lib/chart/heatmap'")]),t._v("。")]),e("li",[t._v("使用 script 引入百度地图或高德地图后，配置 useOuterMap 可以阻止组件对地图资源的引用"),e("br"),t._v("\n百度地图 "),e("code",[t._v('<script src="https://api.map.baidu.com/api?v=2.0&ak=key"><\/script>')]),e("br"),t._v("\n高德地图 "),e("code",[t._v('<script src="https://webapi.amap.com/maps?v=1.4.3&key=key"><\/script>')])])])])}],!1,null,null,null),e.default=n.exports},1370:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this.$createElement;this._self._c;return this._m(0)},[function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h2",{attrs:{id:"shi-yong-shuo-ming"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-shuo-ming"}},[t._v("¶")]),t._v(" 使用说明")]),e("p",[t._v("本节将介绍如何在项目中使用 TIS。")]),e("h3",{attrs:{id:"yin-ru-tis"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-tis"}},[t._v("¶")]),t._v(" 引入 TIS")]),e("p",[t._v("你可以引入整个 TIS，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 TIS。")]),e("h4",{attrs:{id:"wan-zheng-yin-ru"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#wan-zheng-yin-ru"}},[t._v("¶")]),t._v(" 完整引入")]),e("p",[t._v("在 main.js 中写入以下内容：")]),e("pre",[e("code",{staticClass:"language-javascript"},[t._v("import Vue from 'vue';\nimport TisUI from 'tis-ui';\nimport 'tis-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(TisUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),e("p",[t._v("以上代码便完成了 TIS 的引入。需要注意的是，样式文件需要单独引入。")]),e("h4",{attrs:{id:"an-xu-yin-ru"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru"}},[t._v("¶")]),t._v(" 按需引入")]),e("p",[t._v("借助 "),e("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[t._v("babel-plugin-component")]),t._v("，我们可以只引入需要的组件，以达到减小项目体积的目的。")]),e("p",[t._v("首先，安装 babel-plugin-component：")]),e("pre",[e("code",{staticClass:"language-bash"},[t._v("npm install babel-plugin-component -D\n")])]),e("p",[t._v("然后，将 .babelrc 修改为：")]),e("pre",[e("code",{staticClass:"language-json"},[t._v('{\n  "presets": [["es2015", { "modules": false }]],\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "tis-ui",\n        "styleLibraryName": "theme-chalk"\n      }\n    ]\n  ]\n}\n')])]),e("p",[t._v("接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：")]),e("pre",[e("code",{staticClass:"language-javascript"},[t._v("import Vue from 'vue';\nimport { Button, Select } from 'tis-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")])]),e("p",[t._v("完整组件列表和引入方式（完整组件列表以 "),e("a",{attrs:{href:"https://github.com/ElemeFE/TIS/blob/master/components.json"}},[t._v("components.json")]),t._v(" 为准）")]),e("pre",[e("code",{staticClass:"language-javascript"},[t._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 'tis-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")])]),e("h3",{attrs:{id:"kai-shi-shi-yong"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#kai-shi-shi-yong"}},[t._v("¶")]),t._v(" 开始使用")]),e("p",[t._v("至此，一个基于 Vue 和 TIS 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。")])])}],!1,null,null,null),e.default=n.exports},1374:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this.$createElement,t=this._self._c||t;return t("section",{staticClass:"content element-doc"},[t("h1",[this._v("桑基图")]),this._m(0),t("p",[t("vuep",{attrs:{template:"#simple-sankey"}})],1),t("script",{pre:!0,attrs:{type:"text/x-template",id:"simple-sankey"}},[this._v("\n<template>\n  <ve-sankey :data=\"chartData\" :settings=\"chartSettings\"></ve-sankey>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        links: [\n          { source: '首页', target: '列表页a', value: 0.5 },\n          { source: '首页', target: '列表页b', value: 0.5 },\n          { source: '列表页a', target: '内容页a-1', value: 0.1 },\n          { source: '列表页a', target: '内容页a-2', value: 0.4 },\n          { source: '列表页b', target: '内容页b-1', value: 0.2 },\n          { source: '列表页b', target: '内容页b-2', value: 0.3 }\n        ]\n      }\n      return {\n        chartData: {\n          columns: ['页面', '访问量'],\n          rows: [\n            { '页面': '首页', '访问量': 100000 },\n            { '页面': '列表页a', '访问量': 20000 },\n            { '页面': '列表页b', '访问量': 80000 },\n            { '页面': '内容页a-1', '访问量': 10000 },\n            { '页面': '内容页a-2', '访问量': 10000 },\n            { '页面': '内容页b-1', '访问量': 60000 },\n            { '页面': '内容页b-2', '访问量': 20000 }\n          ]\n        }\n      }\n    }\n  }\n")]),this._m(1),t("p",[t("vuep",{attrs:{template:"#set-data-type"}})],1),t("script",{pre:!0,attrs:{type:"text/x-template",id:"set-data-type"}},[this._v("\n<template>\n  <ve-sankey :data=\"chartData\" :settings=\"chartSettings\"></ve-sankey>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        links: [\n          { source: '首页', target: '列表页a', value: 0.5 },\n          { source: '首页', target: '列表页b', value: 0.5 },\n          { source: '列表页a', target: '内容页a-1', value: 0.1 },\n          { source: '列表页a', target: '内容页a-2', value: 0.4 },\n          { source: '列表页b', target: '内容页b-1', value: 0.2 },\n          { source: '列表页b', target: '内容页b-2', value: 0.3 }\n        ],\n        dataType: ['KMB', 'percent']\n      }\n      return {\n        chartData: {\n          columns: ['页面', '访问量'],\n          rows: [\n            { '页面': '首页', '访问量': 100000 },\n            { '页面': '列表页a', '访问量': 20000 },\n            { '页面': '列表页b', '访问量': 80000 },\n            { '页面': '内容页a-1', '访问量': 10000 },\n            { '页面': '内容页a-2', '访问量': 10000 },\n            { '页面': '内容页b-1', '访问量': 60000 },\n            { '页面': '内容页b-2', '访问量': 20000 }\n          ]\n        }\n      }\n    }\n  }\n")]),this._m(2),this._m(3)])},[function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-shu-ju-lei-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-shu-ju-lei-xing"}},[this._v("¶")]),this._v(" 设置数据类型")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("string")]),e("td",[t._v("默认columns第一项为维度")])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("string")]),e("td",[t._v("默认columns第二项为指标")])]),e("tr",[e("td",[t._v("dataType")]),e("td",[t._v("数据类型")]),e("td",[t._v("array")]),e("td",[t._v("数组的第一项为item的数据类型，"),e("br"),t._v("第二项为line的数据类型，"),e("br"),t._v("可选值: KMB, normal, percent")])]),e("tr",[e("td",[t._v("links")]),e("td",[t._v("节点间的关系数据")]),e("td",[t._v("array")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-sankey.links"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("digit")]),e("td",[t._v("设置数据类型为percent时保留的位数")]),e("td",[t._v("number")]),e("td",[t._v("默认为2")])]),e("tr",[e("td",[t._v("label")]),e("td",[t._v("每个矩形节点中文本标签的样式")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-sankey.label"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("itemStyle")]),e("td",[t._v("节点矩形的样式")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-sankey.itemStyle"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("lineStyle")]),e("td",[t._v("桑基图边的样式")]),e("td",[t._v("object")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-sankey.lineStyle"}},[t._v("文档")])])])])])}],!1,null,null,null),e.default=n.exports},1375:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h1",[t._v("散点图")]),e("p",[t._v("散点图有两种：单维度多指标散点图和双维度多指标散点图。")]),t._m(0),e("p",[e("vuep",{attrs:{template:"#simple-single-dim"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"simple-single-dim"}},[t._v("\n<template>\n  <ve-scatter :data=\"chartData\"></ve-scatter>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '年龄'],\n          rows: [\n            { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n            { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n            { '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },\n            { '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n            { '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n            { '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }\n          ]\n        }\n      }\n    }\n  }\n")]),e("p",[t._v("横轴为维度（日期），纵轴为指标（访问用户，下单用户，年龄）。")]),t._m(1),e("p",[e("vuep",{attrs:{template:"#simple-multi-dims"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"simple-multi-dims"}},[t._v("\n<template>\n  <ve-scatter :data=\"chartData\"></ve-scatter>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '年龄'],\n          rows: {\n            '上海': [\n              { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },\n              { '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n              { '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }\n            ],\n            '北京': [\n              { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1273, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n              { '日期': '1/4', '访问用户': 2123, '年龄': 9, '下单用户': 3245 },\n              { '日期': '1/5', '访问用户': 4103, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/6', '访问用户': 7123, '年龄': 10, '下单用户': 3567 }\n            ],\n            '广州': [\n              { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 2123, '年龄': 30, '下单用户': 3245 },\n              { '日期': '1/5', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/4', '访问用户': 5123, '年龄': 18, '下单用户': 4564 },\n              { '日期': '1/6', '访问用户': 3843, '年龄': 30, '下单用户': 4850 }\n            ]\n          }\n        }\n      }\n    }\n  }\n")]),e("p",[t._v("图例和横轴分别为两个维度(地点，日期)，指标（访问用户，下单用户，年龄）展示在 纵轴，散点大小，visualMap 及 tooltip 中。")]),e("p",[t._v("其中，metrics 数组的第一项（默认为 columns[1]）展示为纵轴，第二项（默认为 columns[2]）展示为散点大小， visualMap 需特殊配置。")]),e("p",[t._v("visualMap 中的 dimension 属性用于设置数据的哪个指标映射到视觉元素上，接受的是一个数字，代表数据的次序，其中，数据的排序为 dimension, metrics[0], metrics[1], columns 中的其他指标，在上图中的次序就是 日期，访问用户，下单用户，年龄，如果想要将年龄映射到视觉元素上，dimension 的值就是 3。")]),e("p",[t._v("两种类型的图通过数据格式区分:\n单维度多指标散点图的数据格式为:")]),t._m(2),e("p",[t._v("单维度多指标散点图的数据格式为:")]),t._m(3),t._m(4),e("p",[e("vuep",{attrs:{template:"#set-dim-metrics"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-dim-metrics"}},[t._v("\n<template>\n  <ve-scatter :data=\"chartData\" :settings=\"chartSettings\"></ve-scatter>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        dimension: '日期',\n        metrics: ['年龄', '下单用户']\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '年龄'],\n          rows: {\n            '上海': [\n              { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },\n              { '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n              { '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }\n            ],\n            '北京': [\n              { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1273, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n              { '日期': '1/4', '访问用户': 2123, '年龄': 9, '下单用户': 3245 },\n              { '日期': '1/5', '访问用户': 4103, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/6', '访问用户': 7123, '年龄': 10, '下单用户': 3567 }\n            ],\n            '广州': [\n              { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 2123, '年龄': 30, '下单用户': 3245 },\n              { '日期': '1/5', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/4', '访问用户': 5123, '年龄': 18, '下单用户': 4564 },\n              { '日期': '1/6', '访问用户': 3843, '年龄': 30, '下单用户': 4850 }\n            ]\n          }\n        }\n      }\n    }\n  }\n")]),t._m(5),e("p",[e("vuep",{attrs:{template:"#set-data-type"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-data-type"}},[t._v("\n<template>\n  <ve-scatter :data=\"chartData\" :settings=\"chartSettings\"></ve-scatter>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        dataType: {\n          '访问用户': 'KMB',\n          '年龄': 'percent',\n          '下单用户': 'normal'\n        }\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '年龄'],\n          rows: {\n            '上海': [\n              { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },\n              { '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n              { '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }\n            ],\n            '北京': [\n              { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1273, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n              { '日期': '1/4', '访问用户': 2123, '年龄': 9, '下单用户': 3245 },\n              { '日期': '1/5', '访问用户': 4103, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/6', '访问用户': 7123, '年龄': 10, '下单用户': 3567 }\n            ],\n            '广州': [\n              { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 2123, '年龄': 30, '下单用户': 3245 },\n              { '日期': '1/5', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/4', '访问用户': 5123, '年龄': 18, '下单用户': 4564 },\n              { '日期': '1/6', '访问用户': 3843, '年龄': 30, '下单用户': 4850 }\n            ]\n          }\n        }\n      }\n    }\n  }\n")]),t._m(6),e("p",[e("vuep",{attrs:{template:"#set-label"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-label"}},[t._v("\n<template>\n  <ve-scatter :data=\"chartData\" :settings=\"chartSettings\"></ve-scatter>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        legendName: {\n          '上海': '上海1'\n        },\n        labelMap: {\n          '访问用户': 'PV'\n        }\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '年龄'],\n          rows: {\n            '上海': [\n              { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },\n              { '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n              { '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }\n            ],\n            '北京': [\n              { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1273, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n              { '日期': '1/4', '访问用户': 2123, '年龄': 9, '下单用户': 3245 },\n              { '日期': '1/5', '访问用户': 4103, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/6', '访问用户': 7123, '年龄': 10, '下单用户': 3567 }\n            ],\n            '广州': [\n              { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 2123, '年龄': 30, '下单用户': 3245 },\n              { '日期': '1/5', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/4', '访问用户': 5123, '年龄': 18, '下单用户': 4564 },\n              { '日期': '1/6', '访问用户': 3843, '年龄': 30, '下单用户': 4850 }\n            ]\n          }\n        }\n      }\n    }\n  }\n")]),t._m(7),e("p",[e("vuep",{attrs:{template:"#set-scale"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-scale"}},[t._v("\n<template>\n  <ve-scatter :data=\"chartData\" :settings=\"chartSettings\"></ve-scatter>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        scale: true,\n        max: 10000\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '年龄'],\n          rows: {\n            '上海': [\n              { '日期': '1/1', '访问用户': 1230, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },\n              { '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n              { '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }\n            ],\n            '北京': [\n              { '日期': '1/1', '访问用户': 1230, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1273, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n              { '日期': '1/4', '访问用户': 2123, '年龄': 9, '下单用户': 3245 },\n              { '日期': '1/5', '访问用户': 4103, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/6', '访问用户': 7123, '年龄': 10, '下单用户': 3567 }\n            ],\n            '广州': [\n              { '日期': '1/1', '访问用户': 1230, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 2123, '年龄': 30, '下单用户': 3245 },\n              { '日期': '1/5', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/4', '访问用户': 5123, '年龄': 18, '下单用户': 4564 },\n              { '日期': '1/6', '访问用户': 3843, '年龄': 30, '下单用户': 4850 }\n            ]\n          }\n        }\n      }\n    }\n  }\n")]),t._m(8),e("p",[e("vuep",{attrs:{template:"#set-symbol"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-symbol"}},[t._v("\n<template>\n  <ve-scatter :data=\"chartData\" :settings=\"chartSettings\"></ve-scatter>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        symbol: 'rect',\n        symbolSizeMax: 30,\n        symbolRotate: 45,\n        symbolOffset: [10, 10]\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '年龄'],\n          rows: {\n            '上海': [\n              { '日期': '1/1', '访问用户': 1230, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },\n              { '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n              { '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }\n            ],\n            '北京': [\n              { '日期': '1/1', '访问用户': 1230, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1273, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n              { '日期': '1/4', '访问用户': 2123, '年龄': 9, '下单用户': 3245 },\n              { '日期': '1/5', '访问用户': 4103, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/6', '访问用户': 7123, '年龄': 10, '下单用户': 3567 }\n            ],\n            '广州': [\n              { '日期': '1/1', '访问用户': 1230, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 2123, '年龄': 30, '下单用户': 3245 },\n              { '日期': '1/5', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/4', '访问用户': 5123, '年龄': 18, '下单用户': 4564 },\n              { '日期': '1/6', '访问用户': 3843, '年龄': 30, '下单用户': 4850 }\n            ]\n          }\n        }\n      }\n    }\n  }\n")]),t._m(9),e("p",[e("vuep",{attrs:{template:"#set-trigger"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-trigger"}},[t._v("\n<template>\n  <ve-scatter :data=\"chartData\" :settings=\"chartSettings\"></ve-scatter>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        tooltipTrigger: 'axis'\n      }\n      return {\n        chartData: {\n          columns: ['日期', '访问用户', '下单用户', '年龄'],\n          rows: {\n            '上海': [\n              { '日期': '1/1', '访问用户': 1230, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },\n              { '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n              { '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }\n            ],\n            '北京': [\n              { '日期': '1/1', '访问用户': 1230, '年龄': 3, '下单用户': 1244 },\n              { '日期': '1/2', '访问用户': 1273, '年龄': 6, '下单用户': 2344 },\n              { '日期': '1/3', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n              { '日期': '1/4', '访问用户': 2123, '年龄': 9, '下单用户': 3245 },\n              { '日期': '1/5', '访问用户': 4103, '年龄': 12, '下单用户': 4355 },\n              { '日期': '1/6', '访问用户': 7123, '年龄': 10, '下单用户': 3567 }\n            ]\n          }\n        }\n      }\n    }\n  }\n")]),t._m(10),t._m(11)])},[function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"dan-wei-du-duo-zhi-biao-san-dian-tu-shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dan-wei-du-duo-zhi-biao-san-dian-tu-shi-li"}},[this._v("¶")]),this._v(" 单维度多指标散点图示例：")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shuang-wei-du-duo-zhi-biao-san-dian-tu-shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shuang-wei-du-duo-zhi-biao-san-dian-tu-shi-li"}},[this._v("¶")]),this._v(" 双维度多指标散点图示例：")])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-js"},[this._v("{\n  columns: ['日期', '访问用户', '下单用户', '年龄'],\n  rows: [\n    { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n    { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n    { '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },\n    { '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n    { '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n    { '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }\n  ]\n}\n")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("pre",[t("code",{staticClass:"language-js"},[this._v("{\n  columns: ['日期', '访问用户', '下单用户', '年龄'],\n  rows: {\n    '上海': [\n      { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n      { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n      { '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },\n      { '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n      { '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n      { '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }\n    ],\n    '北京': [\n      { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n      { '日期': '1/2', '访问用户': 1273, '年龄': 6, '下单用户': 2344 },\n      { '日期': '1/3', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },\n      { '日期': '1/4', '访问用户': 2123, '年龄': 9, '下单用户': 3245 },\n      { '日期': '1/5', '访问用户': 4103, '年龄': 12, '下单用户': 4355 },\n      { '日期': '1/6', '访问用户': 7123, '年龄': 10, '下单用户': 3567 }\n    ],\n    '广州': [\n      { '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },\n      { '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },\n      { '日期': '1/3', '访问用户': 2123, '年龄': 30, '下单用户': 3245 },\n      { '日期': '1/5', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },\n      { '日期': '1/4', '访问用户': 5123, '年龄': 18, '下单用户': 4564 },\n      { '日期': '1/6', '访问用户': 3843, '年龄': 30, '下单用户': 4850 }\n    ]\n  }\n}\n")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"zhi-biao-wei-du-pei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zhi-biao-wei-du-pei-zhi"}},[this._v("¶")]),this._v(" 指标维度配置")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shu-ju-lei-xing-pei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-ju-lei-xing-pei-zhi"}},[this._v("¶")]),this._v(" 数据类型配置")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shu-xing-ming-pei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shu-xing-ming-pei-zhi"}},[this._v("¶")]),this._v(" 属性名配置")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"suo-fang-pei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#suo-fang-pei-zhi"}},[this._v("¶")]),this._v(" 缩放配置")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"san-dian-yang-shi-pei-zhi"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#san-dian-yang-shi-pei-zhi"}},[this._v("¶")]),this._v(" 散点样式配置")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"san-dian-chu-xian-fu-gai-shi-ti-shi-kuang-ke-yi-gai-cheng-tong-guo-zuo-biao-zhou-hong-fa"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#san-dian-chu-xian-fu-gai-shi-ti-shi-kuang-ke-yi-gai-cheng-tong-guo-zuo-biao-zhou-hong-fa"}},[this._v("¶")]),this._v(" 散点出现覆盖时, 提示框可以改成通过坐标轴触发")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("string")]),e("td",[t._v("默认 columns[0]")])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("array")]),e("td",[t._v("默认 [columns[0], columns[1]]")])]),e("tr",[e("td",[t._v("dataType")]),e("td",[t._v("数据类型")]),e("td",[t._v("object")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("xAxisType")]),e("td",[t._v("x轴类型")]),e("td",[t._v("string")]),e("td",[t._v("可选值: category, value, time, log")])]),e("tr",[e("td",[t._v("xAxisName")]),e("td",[t._v("x轴标题")]),e("td",[t._v("string")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("yAxisName")]),e("td",[t._v("y轴标题")]),e("td",[t._v("string")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("digit")]),e("td",[t._v("设置数据类型为percent时保留的位数")]),e("td",[t._v("number")]),e("td",[t._v("默认为2")])]),e("tr",[e("td",[t._v("labelMap")]),e("td",[t._v("设置指标的别名")]),e("td",[t._v("object")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("legendName")]),e("td",[t._v("设置图表上方图例的别名")]),e("td",[t._v("object")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("tooltipTrigger")]),e("td",[t._v("提示框的触发方式")]),e("td",[t._v("string")]),e("td",[t._v("可选值: item, axis")])]),e("tr",[e("td",[t._v("axisVisible")]),e("td",[t._v("是否显示坐标轴")]),e("td",[t._v("boolean")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("symbolSizeMax")]),e("td",[t._v("气泡最大值")]),e("td",[t._v("number")]),e("td",[t._v("默认为50")])]),e("tr",[e("td",[t._v("symbol")]),e("td",[t._v("标记的图形")]),e("td",[t._v("string")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-scatter.symbol"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("symbolSize")]),e("td",[t._v("标记的大小")]),e("td",[t._v("number, array, Function")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-scatter.symbolSize"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("symbolRotate")]),e("td",[t._v("标记的旋转角度")]),e("td",[t._v("number")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-scatter.symbolRotate"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("symbolOffset")]),e("td",[t._v("标记相对于原本位置的偏移")]),e("td",[t._v("array")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-scatter.symbolOffset"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("cursor")]),e("td",[t._v("鼠标悬浮时在图形元素上时鼠标的样式")]),e("td",[t._v("string")]),e("td",[t._v("内容参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-scatter.cursor"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("scale")]),e("td",[t._v("是否是脱离 0 值比例")]),e("td",[t._v("boolean")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("min")]),e("td",[t._v("y轴最小值")]),e("td",[t._v("number")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("max")]),e("td",[t._v("y轴最大值")]),e("td",[t._v("number")]),e("td",[t._v("-")])])])])}],!1,null,null,null),e.default=n.exports},1376:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this.$createElement;this._self._c;return this._m(0)},[function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h1",[t._v("开始使用")]),e("h3",{attrs:{id:"wan-zheng-yin-ru"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#wan-zheng-yin-ru"}},[t._v("¶")]),t._v(" 完整引入")]),e("hr"),e("pre",[e("code",{staticClass:"language-js"},[t._v("// main.js\nimport Vue from 'vue'\nimport VCharts from 'v-charts'\nimport App from './App.vue'\n\nVue.use(VCharts)\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n})\n")])]),e("h3",{attrs:{id:"an-xu-yin-ru"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru"}},[t._v("¶")]),t._v(" 按需引入")]),e("hr"),e("p",[t._v("v-charts的每种图表组件，都已经单独打包到lib文件夹下了")]),e("pre",[e("code",[t._v("|- lib/\n    |- line.common.js  -------------- 折线图\n    |- bar.common.js  --------------- 条形图\n    |- histogram.common.js  --------- 柱状图\n    |- pie.common.js  --------------- 饼图\n    |- ring.common.js  -------------- 环图\n    |- funnel.common.js  ------------ 漏斗图\n    |- waterfall.common.js  --------- 瀑布图\n    |- radar.common.js  ------------- 雷达图\n    |- map.common.js  --------------- 地图\n    |- sankey.common.js  ------------ 桑基图\n    |- heatmap.common.js  ----------- 热力图\n    |- scatter.common.js  ----------- 散点图\n    |- candle.common.js  ------------ k线图\n    |- gauge.common.js  ------------- 仪表盘\n    |- tree.common.js  -------------- 树图\n    |- bmap.common.js  -------------- 百度地图\n    |- amap.common.js  -------------- 高德地图\n")])]),e("p",[t._v("使用时，可以直接将单个图表引入到项目中")]),e("pre",[e("code",{staticClass:"language-js"},[t._v("import Vue from 'vue'\nimport VeLine from 'v-charts/lib/line.common'\nimport App from './App.vue'\n\nVue.component(VeLine.name, VeLine)\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n})\n")])])])}],!1,null,null,null),e.default=n.exports},1378:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this.$createElement,t=this._self._c||t;return t("section",{staticClass:"content element-doc"},[t("h1",[this._v("图表切换")]),this._m(0),this._m(1),t("p",[t("vuep",{attrs:{template:"#simple-toggle"}})],1),t("script",{pre:!0,attrs:{type:"text/x-template",id:"simple-toggle"}},[this._v("\n<template>\n  <div>\n    <button @click=\"changeType\">切换图表类型</button>\n    <ve-chart :data=\"chartData\" :settings=\"chartSettings\"></ve-chart>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.typeArr = ['line', 'histogram', 'pie']\n      this.index = 0\n      return {\n        chartData: {\n          columns: ['日期', '访问用户'],\n          rows: [\n            { '日期': '1月1日', '访问用户': 1523 },\n            { '日期': '1月2日', '访问用户': 1223 },\n            { '日期': '1月3日', '访问用户': 2123 },\n            { '日期': '1月4日', '访问用户': 4123 },\n            { '日期': '1月5日', '访问用户': 3123 },\n            { '日期': '1月6日', '访问用户': 7123 }\n          ]\n        },\n        chartSettings: { type: this.typeArr[this.index] }\n      }\n    },\n    methods: {\n      changeType: function () {\n        this.index++\n        if (this.index >= this.typeArr.length) { this.index = 0 }\n        this.chartSettings = { type: this.typeArr[this.index] }\n      }\n    }\n  }\n")])])},[function(){var t=this.$createElement,t=this._self._c||t;return t("p",[this._v("为了方便使用一份数据即可生成不同的表格，可以使用"),t("code",[this._v("<ve-chart>")]),this._v("组件，切换图表类型则只需要改变settings即可")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])}],!1,null,null,null),e.default=n.exports},1379:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h1",[t._v("树图")]),t._m(0),e("p",[e("vuep",{attrs:{template:"#simple-tree"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"simple-tree"}},[t._v("\n<template>\n  <ve-tree :data=\"chartData\"></ve-tree>\n</template>\n\n<script>\n  const treeData = {\n    name: 'f',\n    value: 1,\n    link: 'https://ele.me',\n    children: [\n      {\n        name: 'a',\n        value: 1,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'a-a',\n            link: 'https://ele.me',\n            value: 2\n          },\n          {\n            name: 'a-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      },\n      {\n        name: 'b',\n        value: 1,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'b-a',\n            link: 'https://ele.me',\n            value: 2\n          },\n          {\n            name: 'b-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      },\n      {\n        name: 'c',\n        value: 3,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'c-a',\n            link: 'https://ele.me',\n            value: 4\n          },\n          {\n            name: 'c-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      },\n      {\n        name: 'd',\n        value: 3,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'd-a',\n            link: 'https://ele.me',\n            value: 4\n          },\n          {\n            name: 'd-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      }\n    ]\n  }\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['name', 'value'],\n          rows: [\n            {\n              name: 'tree1',\n              value: [treeData]\n            }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(1),e("p",[e("vuep",{attrs:{template:"#more-tree"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"more-tree"}},[t._v("\n<template>\n  <ve-tree :data=\"chartData\" :settings=\"chartSettings\"></ve-tree>\n</template>\n\n<script>\n  const treeData = {\n    name: 'f',\n    value: 1,\n    link: 'https://ele.me',\n    children: [\n      {\n        name: 'a',\n        value: 1,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'a-a',\n            link: 'https://ele.me',\n            value: 2\n          },\n          {\n            name: 'a-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      },\n      {\n        name: 'b',\n        value: 1,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'b-a',\n            link: 'https://ele.me',\n            value: 2\n          },\n          {\n            name: 'b-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      },\n      {\n        name: 'c',\n        value: 3,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'c-a',\n            link: 'https://ele.me',\n            value: 4\n          },\n          {\n            name: 'c-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      },\n      {\n        name: 'd',\n        value: 3,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'd-a',\n            link: 'https://ele.me',\n            value: 4\n          },\n          {\n            name: 'd-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      }\n    ]\n  }\n  export default {\n    data () {\n      this.chartSettings = {\n        seriesMap: {\n          tree1: {\n            top: '5%',\n            left: '7%',\n            bottom: '2%',\n            right: '60%'\n          },\n          tree2: {\n            top: '20%',\n            left: '60%',\n            bottom: '22%',\n            right: '18%'\n          }\n        }\n      }\n      return {\n        chartData: {\n          columns: ['name', 'value'],\n          rows: [\n            {\n              name: 'tree1',\n              value: [treeData]\n            },\n            {\n              name: 'tree2',\n              value: [treeData]\n            }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(2),e("p",[e("vuep",{attrs:{template:"#radial-tree"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"radial-tree"}},[t._v("\n<template>\n  <ve-tree :data=\"chartData\" :settings=\"chartSettings\"></ve-tree>\n</template>\n\n<script>\n  const treeData = {\n    name: 'f',\n    value: 1,\n    link: 'https://ele.me',\n    children: [\n      {\n        name: 'a',\n        value: 1,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'a-a',\n            link: 'https://ele.me',\n            value: 2\n          },\n          {\n            name: 'a-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      },\n      {\n        name: 'b',\n        value: 1,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'b-a',\n            link: 'https://ele.me',\n            value: 2\n          },\n          {\n            name: 'b-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      },\n      {\n        name: 'c',\n        value: 3,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'c-a',\n            link: 'https://ele.me',\n            value: 4\n          },\n          {\n            name: 'c-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      },\n      {\n        name: 'd',\n        value: 3,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'd-a',\n            link: 'https://ele.me',\n            value: 4\n          },\n          {\n            name: 'd-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      }\n    ]\n  }\n  export default {\n    data () {\n      this.chartSettings = {\n        seriesMap: {\n          tree1: {\n            layout: 'radial'\n          }\n        }\n      }\n      return {\n        chartData: {\n          columns: ['name', 'value'],\n          rows: [\n            {\n              name: 'tree1',\n              value: [treeData]\n            }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(3),e("p",[e("vuep",{attrs:{template:"#vertical-tree"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"vertical-tree"}},[t._v("\n<template>\n  <ve-tree :data=\"chartData\" :settings=\"chartSettings\"></ve-tree>\n</template>\n\n<script>\n  const treeData = {\n    name: 'f',\n    value: 1,\n    link: 'https://ele.me',\n    children: [\n      {\n        name: 'a',\n        value: 1,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'a-a',\n            link: 'https://ele.me',\n            value: 2\n          },\n          {\n            name: 'a-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      },\n      {\n        name: 'b',\n        value: 1,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'b-a',\n            link: 'https://ele.me',\n            value: 2\n          },\n          {\n            name: 'b-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      },\n      {\n        name: 'c',\n        value: 3,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'c-a',\n            link: 'https://ele.me',\n            value: 4\n          },\n          {\n            name: 'c-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      },\n      {\n        name: 'd',\n        value: 3,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'd-a',\n            link: 'https://ele.me',\n            value: 4\n          },\n          {\n            name: 'd-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      }\n    ]\n  }\n  export default {\n    data () {\n      this.chartSettings = {\n        seriesMap: {\n          tree1: {\n            orient: 'vertical'\n          }\n        }\n      }\n      return {\n        chartData: {\n          columns: ['name', 'value'],\n          rows: [\n            {\n              name: 'tree1',\n              value: [treeData]\n            }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(4),e("p",[e("vuep",{attrs:{template:"#custom-tooltip-tree"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"custom-tooltip-tree"}},[t._v("\n<template>\n  <ve-tree :data=\"chartData\" :extend=\"chartExtend\" :tooltip-formatter=\"tooltipFormatter\" :settings=\"chartSettings\"></ve-tree>\n</template>\n\n<script>\n  const treeData = {\n    name: 'f',\n    value: 1,\n    link: 'https://ele.me',\n    children: [\n      {\n        name: 'a',\n        value: 1,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'a-a',\n            link: 'https://ele.me',\n            value: 2\n          },\n          {\n            name: 'a-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      },\n      {\n        name: 'b',\n        value: 1,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'b-a',\n            link: 'https://ele.me',\n            value: 2\n          },\n          {\n            name: 'b-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      },\n      {\n        name: 'c',\n        value: 3,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'c-a',\n            link: 'https://ele.me',\n            value: 4\n          },\n          {\n            name: 'c-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      },\n      {\n        name: 'd',\n        value: 3,\n        link: 'https://ele.me',\n        children: [\n          {\n            name: 'd-a',\n            link: 'https://ele.me',\n            value: 4\n          },\n          {\n            name: 'd-b',\n            link: 'https://ele.me',\n            value: 2\n          }\n        ]\n      }\n    ]\n  }\n  export default {\n    data () {\n      this.chartSettings = {}\n      this.chartExtend = {\n        tooltip: {\n          alwaysShowContent: true\n        }\n      }\n      return {\n        chartData: {\n          columns: ['name', 'value'],\n          rows: [\n            {\n              name: 'tree1',\n              value: [treeData]\n            }\n          ]\n        }\n      }\n    },\n    methods: {\n      tooltipFormatter (v) {\n        return [\n          `${v.seriesName}: ${v.data.value}`,\n          `<a target=\"_blank\" href=\"${v.data.link}\">${v.data.link}</a>`\n        ].join('<br>')\n      }\n    }\n  }\n")]),t._m(5),t._m(6),t._m(7)])},[function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"duo-shu-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#duo-shu-tu"}},[this._v("¶")]),this._v(" 多树图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"jing-xiang-shu-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#jing-xiang-shu-tu"}},[this._v("¶")]),this._v(" 径向树图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"zong-xiang-shu-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zong-xiang-shu-tu"}},[this._v("¶")]),this._v(" 纵向树图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"zi-ding-yi-ti-shi-kuang-nei-rong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-ti-shi-kuang-nei-rong"}},[this._v("¶")]),this._v(" 自定义提示框内容")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("string")]),e("td",[t._v("默认columns第一项为维度")])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("string")]),e("td",[t._v("默认columns第二项为指标")])]),e("tr",[e("td",[t._v("seriesMap")]),e("td",[t._v("附加到 series 中的设置")]),e("td",[t._v("object")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注1： 通过 seriesMap，可以为每一个树设置样式，具体样式的配置可以参考"),t("a",{attrs:{href:"http://echarts.baidu.com/option.html#series-tree"}},[this._v("文档")])])])}],!1,null,null,null),e.default=n.exports},1380:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h1",[t._v("瀑布图")]),t._m(0),e("p",[e("vuep",{attrs:{template:"#simple-waterfall"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"simple-waterfall"}},[t._v("\n<template>\n  <ve-waterfall :data=\"chartData\"></ve-waterfall>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['活动', '时间'],\n          rows: [\n            { '活动': '吃饭', '时间': 4 },\n            { '活动': '睡觉', '时间': 10 },\n            { '活动': '打豆豆', '时间': 5 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(1),e("p",[e("vuep",{attrs:{template:"#set-metrics-dimension"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-metrics-dimension"}},[t._v("\n<template>\n  <ve-waterfall :data=\"chartData\" :settings=\"chartSettings\"></ve-waterfall>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        dimension: '活动',\n        metrics: '时间'\n      }\n      return {\n        chartData: {\n          columns: ['活动', '时间'],\n          rows: [\n            { '活动': '吃饭', '时间': 4 },\n            { '活动': '睡觉', '时间': 10 },\n            { '活动': '打豆豆', '时间': 5 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(2),e("p",[e("vuep",{attrs:{template:"#set-data-type"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-data-type"}},[t._v("\n<template>\n  <ve-waterfall :data=\"chartData\" :settings=\"chartSettings\"></ve-waterfall>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        dataType: 'percent'\n      }\n      return {\n        chartData: {\n          columns: ['活动', '时间'],\n          rows: [\n            { '活动': '吃饭', '时间': 0.1 },\n            { '活动': '睡觉', '时间': 0.2 },\n            { '活动': '打豆豆', '时间': 0.3 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(3),e("p",[e("vuep",{attrs:{template:"#change-metrics-name"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"change-metrics-name"}},[t._v("\n<template>\n  <ve-waterfall :data=\"chartData\" :settings=\"chartSettings\"></ve-waterfall>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        labelMap: {\n          '时间': 'time'\n        }\n      }\n      return {\n        chartData: {\n          columns: ['活动', '时间'],\n          rows: [\n            { '活动': '吃饭', '时间': 0.1 },\n            { '活动': '睡觉', '时间': 0.2 },\n            { '活动': '打豆豆', '时间': 0.3 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(4),e("p",[e("vuep",{attrs:{template:"#set-label"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-label"}},[t._v("\n<template>\n  <ve-waterfall :data=\"chartData\" :settings=\"chartSettings\"></ve-waterfall>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        totalNum: 24,\n        totalName: '总时间',\n        remainName: '剩余时间'\n      }\n      return {\n        chartData: {\n          columns: ['活动', '时间'],\n          rows: [\n            { '活动': '吃饭', '时间': 4 },\n            { '活动': '睡觉', '时间': 10 },\n            { '活动': '打豆豆', '时间': 5 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(5),t._m(6)])},[function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-zhi-biao-wei-du"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-zhi-biao-wei-du"}},[this._v("¶")]),this._v(" 设置指标维度")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-shu-ju-lei-xing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-shu-ju-lei-xing"}},[this._v("¶")]),this._v(" 设置数据类型")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"xiu-gai-zhi-biao-ming-cheng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-zhi-biao-ming-cheng"}},[this._v("¶")]),this._v(" 修改指标名称")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-zong-ji-sheng-yu-de-ming-cheng"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-zong-ji-sheng-yu-de-ming-cheng"}},[this._v("¶")]),this._v(" 设置 总计、剩余 的名称")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("string")]),e("td",[t._v("默认columns第一项为维度")])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("string")]),e("td",[t._v("默认columns第二项为指标")])]),e("tr",[e("td",[t._v("dataType")]),e("td",[t._v("数据类型")]),e("td",[t._v("string")]),e("td",[t._v("可选值: KMB, normal, percent")])]),e("tr",[e("td",[t._v("totalNum")]),e("td",[t._v("总量")]),e("td",[t._v("number")]),e("td",[t._v("默认瀑布图总量为所有数据的和")])]),e("tr",[e("td",[t._v("totalName")]),e("td",[t._v("总量的显示文案")]),e("td",[t._v("string")]),e("td",[t._v("默认显示总计")])]),e("tr",[e("td",[t._v("remainName")]),e("td",[t._v("剩余的显示文案")]),e("td",[t._v("string")]),e("td",[t._v("默认显示其他")])]),e("tr",[e("td",[t._v("digit")]),e("td",[t._v("设置数据类型为percent时保留的位数")]),e("td",[t._v("number")]),e("td",[t._v("默认为2")])])])])}],!1,null,null,null),e.default=n.exports},1382:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h1",[t._v("词云图")]),t._m(0),e("p",[e("vuep",{attrs:{template:"#simple-wordcloud"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"simple-wordcloud"}},[t._v("\n<template>\n  <ve-wordcloud :data=\"chartData\"></ve-wordcloud>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['word', 'count'],\n          rows: getRows()\n        }\n      }\n    }\n  }\n\n  function getRows () {\n    return [{\n      'word': 'visualMap',\n      'count': 22199\n    }, {\n      'word': 'continuous',\n      'count': 10288\n    }, {\n      'word': 'contoller',\n      'count': 620\n    }, {\n      'word': 'series',\n      'count': 274470\n    }, {\n      'word': 'gauge',\n      'count': 12311\n    }, {\n      'word': 'detail',\n      'count': 1206\n    }, {\n      'word': 'piecewise',\n      'count': 4885\n    }, {\n      'word': 'textStyle',\n      'count': 32294\n    }, {\n      'word': 'markPoint',\n      'count': 18574\n    }, {\n      'word': 'pie',\n      'count': 38929\n    }, {\n      'word': 'roseType',\n      'count': 969\n    }, {\n      'word': 'label',\n      'count': 37517\n    }, {\n      'word': 'emphasis',\n      'count': 12053\n    }, {\n      'word': 'yAxis',\n      'count': 57299\n    }, {\n      'word': 'name',\n      'count': 15418\n    }, {\n      'word': 'type',\n      'count': 22905\n    }, {\n      'word': 'gridIndex',\n      'count': 5146\n    }, {\n      'word': 'normal',\n      'count': 49487\n    }, {\n      'word': 'itemStyle',\n      'count': 33837\n    }, {\n      'word': 'min',\n      'count': 4500\n    }, {\n      'word': 'silent',\n      'count': 5744\n    }, {\n      'word': 'animation',\n      'count': 4840\n    }, {\n      'word': 'offsetCenter',\n      'count': 232\n    }, {\n      'word': 'inverse',\n      'count': 3706\n    }, {\n      'word': 'borderColor',\n      'count': 4812\n    }, {\n      'word': 'markLine',\n      'count': 16578\n    }, {\n      'word': 'line',\n      'count': 76970\n    }, {\n      'word': 'radiusAxis',\n      'count': 6704\n    }, {\n      'word': 'radar',\n      'count': 15964\n    }, {\n      'word': 'data',\n      'count': 60679\n    }, {\n      'word': 'dataZoom',\n      'count': 24347\n    }, {\n      'word': 'tooltip',\n      'count': 43420\n    }, {\n      'word': 'toolbox',\n      'count': 25222\n    }, {\n      'word': 'geo',\n      'count': 16904\n    }, {\n      'word': 'parallelAxis',\n      'count': 4029\n    }]\n  }\n")]),t._m(1),e("p",[e("vuep",{attrs:{template:"#set-color"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-color"}},[t._v("\n<template>\n  <ve-wordcloud :data=\"chartData\" :settings=\"chartSettings\"></ve-wordcloud>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        color: ['#ff0', '#00f', '#f00', '#0ff']\n      }\n      return {\n        chartData: {\n          columns: ['word', 'count'],\n          rows: getRows()\n        }\n      }\n    }\n  }\n\n  function getRows () {\n    return [{\n      'word': 'visualMap',\n      'count': 22199\n    }, {\n      'word': 'continuous',\n      'count': 10288\n    }, {\n      'word': 'contoller',\n      'count': 620\n    }, {\n      'word': 'series',\n      'count': 274470\n    }, {\n      'word': 'gauge',\n      'count': 12311\n    }, {\n      'word': 'detail',\n      'count': 1206\n    }, {\n      'word': 'piecewise',\n      'count': 4885\n    }, {\n      'word': 'textStyle',\n      'count': 32294\n    }, {\n      'word': 'markPoint',\n      'count': 18574\n    }, {\n      'word': 'pie',\n      'count': 38929\n    }, {\n      'word': 'roseType',\n      'count': 969\n    }, {\n      'word': 'label',\n      'count': 37517\n    }, {\n      'word': 'emphasis',\n      'count': 12053\n    }, {\n      'word': 'yAxis',\n      'count': 57299\n    }, {\n      'word': 'name',\n      'count': 15418\n    }, {\n      'word': 'type',\n      'count': 22905\n    }, {\n      'word': 'gridIndex',\n      'count': 5146\n    }, {\n      'word': 'normal',\n      'count': 49487\n    }, {\n      'word': 'itemStyle',\n      'count': 33837\n    }, {\n      'word': 'min',\n      'count': 4500\n    }, {\n      'word': 'silent',\n      'count': 5744\n    }, {\n      'word': 'animation',\n      'count': 4840\n    }, {\n      'word': 'offsetCenter',\n      'count': 232\n    }, {\n      'word': 'inverse',\n      'count': 3706\n    }, {\n      'word': 'borderColor',\n      'count': 4812\n    }, {\n      'word': 'markLine',\n      'count': 16578\n    }, {\n      'word': 'line',\n      'count': 76970\n    }, {\n      'word': 'radiusAxis',\n      'count': 6704\n    }, {\n      'word': 'radar',\n      'count': 15964\n    }, {\n      'word': 'data',\n      'count': 60679\n    }, {\n      'word': 'dataZoom',\n      'count': 24347\n    }, {\n      'word': 'tooltip',\n      'count': 43420\n    }, {\n      'word': 'toolbox',\n      'count': 25222\n    }, {\n      'word': 'geo',\n      'count': 16904\n    }, {\n      'word': 'parallelAxis',\n      'count': 4029\n    }]\n  }\n")]),t._m(2),e("p",[e("vuep",{attrs:{template:"#set-shape"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-shape"}},[t._v("\n<template>\n  <ve-wordcloud :data=\"chartData\" :settings=\"chartSettings\"></ve-wordcloud>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        shape: 'diamond'\n      }\n      return {\n        chartData: {\n          columns: ['word', 'count'],\n          rows: getRows()\n        }\n      }\n    }\n  }\n\n  function getRows () {\n    return [{\n      'word': 'visualMap',\n      'count': 22199\n    }, {\n      'word': 'continuous',\n      'count': 10288\n    }, {\n      'word': 'contoller',\n      'count': 620\n    }, {\n      'word': 'series',\n      'count': 274470\n    }, {\n      'word': 'gauge',\n      'count': 12311\n    }, {\n      'word': 'detail',\n      'count': 1206\n    }, {\n      'word': 'piecewise',\n      'count': 4885\n    }, {\n      'word': 'textStyle',\n      'count': 32294\n    }, {\n      'word': 'markPoint',\n      'count': 18574\n    }, {\n      'word': 'pie',\n      'count': 38929\n    }, {\n      'word': 'roseType',\n      'count': 969\n    }, {\n      'word': 'label',\n      'count': 37517\n    }, {\n      'word': 'emphasis',\n      'count': 12053\n    }, {\n      'word': 'yAxis',\n      'count': 57299\n    }, {\n      'word': 'name',\n      'count': 15418\n    }, {\n      'word': 'type',\n      'count': 22905\n    }, {\n      'word': 'gridIndex',\n      'count': 5146\n    }, {\n      'word': 'normal',\n      'count': 49487\n    }, {\n      'word': 'itemStyle',\n      'count': 33837\n    }, {\n      'word': 'min',\n      'count': 4500\n    }, {\n      'word': 'silent',\n      'count': 5744\n    }, {\n      'word': 'animation',\n      'count': 4840\n    }, {\n      'word': 'offsetCenter',\n      'count': 232\n    }, {\n      'word': 'inverse',\n      'count': 3706\n    }, {\n      'word': 'borderColor',\n      'count': 4812\n    }, {\n      'word': 'markLine',\n      'count': 16578\n    }, {\n      'word': 'line',\n      'count': 76970\n    }, {\n      'word': 'radiusAxis',\n      'count': 6704\n    }, {\n      'word': 'radar',\n      'count': 15964\n    }, {\n      'word': 'data',\n      'count': 60679\n    }, {\n      'word': 'dataZoom',\n      'count': 24347\n    }, {\n      'word': 'tooltip',\n      'count': 43420\n    }, {\n      'word': 'toolbox',\n      'count': 25222\n    }, {\n      'word': 'geo',\n      'count': 16904\n    }, {\n      'word': 'parallelAxis',\n      'count': 4029\n    }]\n  }\n")]),t._m(3),e("p",[e("vuep",{attrs:{template:"#set-sizeRange"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"set-sizeRange"}},[t._v("\n<template>\n  <ve-wordcloud :data=\"chartData\" :settings=\"chartSettings\"></ve-wordcloud>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        sizeMin: 30,\n        sizeMax: 60\n      }\n      return {\n        chartData: {\n          columns: ['word', 'count'],\n          rows: getRows()\n        }\n      }\n    }\n  }\n\n  function getRows () {\n    return [{\n      'word': 'visualMap',\n      'count': 22199\n    }, {\n      'word': 'continuous',\n      'count': 10288\n    }, {\n      'word': 'contoller',\n      'count': 620\n    }, {\n      'word': 'series',\n      'count': 274470\n    }, {\n      'word': 'gauge',\n      'count': 12311\n    }, {\n      'word': 'detail',\n      'count': 1206\n    }, {\n      'word': 'piecewise',\n      'count': 4885\n    }, {\n      'word': 'textStyle',\n      'count': 32294\n    }, {\n      'word': 'markPoint',\n      'count': 18574\n    }, {\n      'word': 'pie',\n      'count': 38929\n    }, {\n      'word': 'roseType',\n      'count': 969\n    }, {\n      'word': 'label',\n      'count': 37517\n    }, {\n      'word': 'emphasis',\n      'count': 12053\n    }, {\n      'word': 'yAxis',\n      'count': 57299\n    }, {\n      'word': 'name',\n      'count': 15418\n    }, {\n      'word': 'type',\n      'count': 22905\n    }, {\n      'word': 'gridIndex',\n      'count': 5146\n    }, {\n      'word': 'normal',\n      'count': 49487\n    }, {\n      'word': 'itemStyle',\n      'count': 33837\n    }, {\n      'word': 'min',\n      'count': 4500\n    }, {\n      'word': 'silent',\n      'count': 5744\n    }, {\n      'word': 'animation',\n      'count': 4840\n    }, {\n      'word': 'offsetCenter',\n      'count': 232\n    }, {\n      'word': 'inverse',\n      'count': 3706\n    }, {\n      'word': 'borderColor',\n      'count': 4812\n    }, {\n      'word': 'markLine',\n      'count': 16578\n    }, {\n      'word': 'line',\n      'count': 76970\n    }, {\n      'word': 'radiusAxis',\n      'count': 6704\n    }, {\n      'word': 'radar',\n      'count': 15964\n    }, {\n      'word': 'data',\n      'count': 60679\n    }, {\n      'word': 'dataZoom',\n      'count': 24347\n    }, {\n      'word': 'tooltip',\n      'count': 43420\n    }, {\n      'word': 'toolbox',\n      'count': 25222\n    }, {\n      'word': 'geo',\n      'count': 16904\n    }, {\n      'word': 'parallelAxis',\n      'count': 4029\n    }]\n  }\n")]),t._m(4),t._m(5),t._m(6),t._m(7)])},[function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-ci-yun-tu-de-yan-se"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-ci-yun-tu-de-yan-se"}},[this._v("¶")]),this._v(" 设置词云图的颜色")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-ci-yun-tu-de-xing-zhuang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-ci-yun-tu-de-xing-zhuang"}},[this._v("¶")]),this._v(" 设置词云图的形状")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"she-zhi-ci-yun-tu-de-zi-ti-da-xiao-fan-wei"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#she-zhi-ci-yun-tu-de-zi-ti-da-xiao-fan-wei"}},[this._v("¶")]),this._v(" 设置词云图的字体大小范围")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("String")]),e("td",[t._v("默认 "),e("code",[t._v("columns[0]")])])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("String")]),e("td",[t._v("默认 "),e("code",[t._v("columns[1]")])])]),e("tr",[e("td",[t._v("sizeMin")]),e("td",[t._v("最小字体大小")]),e("td",[t._v("Number")]),e("td",[t._v("默认为 "),e("code",[t._v("12")])])]),e("tr",[e("td",[t._v("sizeMax")]),e("td",[t._v("最大字体大小")]),e("td",[t._v("Number")]),e("td",[t._v("默认为 "),e("code",[t._v("60")])])]),e("tr",[e("td",[t._v("shape")]),e("td",[t._v("词云图的形状")]),e("td",[t._v("String")]),e("td",[t._v("默认为 "),e("code",[t._v("circle")]),t._v("，可选值见备注")])]),e("tr",[e("td",[t._v("color")]),e("td",[t._v("词云图字体颜色")]),e("td",[t._v("Array[String], String, Function")]),e("td",[t._v("默认为 "),e("code",[t._v('"rgb(Math.round(Math.random * 160), Math.round(Math.random * 160), Math.round(Math.random * 160))"')])])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注1: shape 可选值有cardioid、 diamond、triangle-forward、triangle、pentagon、star等。如果最终的形状不是理想的形状（都为矩形），可能是画布高度或者宽度不够以及数据过多导致的。可通过设置画布或容器的width或height，通过extend设置series的drawOutOfBound尝试解决。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注2: 详细配置详见"),t("a",{attrs:{href:"https://github.com/ecomfe/echarts-wordcloud"}},[this._v("echarts-wordcloud文档")]),this._v("。更多个性化配置可以结合wordcloud文档在extend的series配置项中设置。")])])}],!1,null,null,null),e.default=n.exports},1390:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this.$createElement;return(this._self._c||t)("router-view")},[],!1,null,null,null),e.default=n.exports},1391:function(t,e,n){"use strict";n.r(e);var a=[function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",{staticClass:"page-container page-resource"},[e("h2",[t._v("资源")]),e("p",[t._v("设计资源正在整理和完善中")]),e("div",{staticClass:"cards"},[e("ul",{staticClass:"container"},[e("li",[e("div",{staticClass:"card"},[e("img",{attrs:{src:n(951),alt:""}}),e("h3",[t._v("Axure Components")]),e("p",[t._v("通过在 Axure 中导入 Tis-Design 组件库，可以在交互设计阶段方便地调用常用的组件")]),e("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"}},[t._v("下载")])])]),e("li",[e("div",{staticClass:"card"},[e("img",{attrs:{src:n(952),alt:""}}),e("h3",[t._v("Sketch Template")]),e("p",[t._v("从 Tis-Design Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格")]),e("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');",href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[t._v("下载")])])])])])])}],i=(n(1023),n(0)),a=Object(i.a)({},function(){var t=this.$createElement;this._self._c;return this._m(0)},a,!1,null,"4fc92bb0",null);e.default=a.exports},1392:function(t,e,n){"use strict";n.r(e);n(1019);var a=n(0),a=Object(a.a)({},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("div",[e("h2",[t._v("设计原则")]),e("tis-row",{staticClass:"cards",attrs:{gutter:14}},[e("tis-col",{attrs:{xs:12,sm:6}},[e("div",{staticClass:"card"},[e("img",{attrs:{src:n(937),alt:"Consistency"}}),e("h4",[t._v("一致")]),e("span",[t._v("Consistency")])])]),e("tis-col",{attrs:{xs:12,sm:6}},[e("div",{staticClass:"card"},[e("img",{attrs:{src:n(938),alt:"Feedback"}}),e("h4",[t._v("反馈")]),e("span",[t._v("Feedback")])])]),e("tis-col",{attrs:{xs:12,sm:6}},[e("div",{staticClass:"card"},[e("img",{attrs:{src:n(939),alt:"Efficiency"}}),e("h4",[t._v("效率")]),e("span",[t._v("Efficiency")])])]),e("tis-col",{attrs:{xs:12,sm:6}},[e("div",{staticClass:"card"},[e("img",{attrs:{src:n(940),alt:"Controllability"}}),e("h4",[t._v("可控")]),e("span",[t._v("Controllability")])])])],1),e("h3",[t._v("一致性 Consistency")]),t._m(0),e("h3",[t._v("反馈 Feedback")]),t._m(1),e("h3",[t._v("效率 Efficiency")]),t._m(2),e("h3",[t._v("可控 Controllability")]),t._m(3)],1)},[function(){var t=this.$createElement,t=this._self._c||t;return t("ul",[t("li",[t("strong",[this._v("与现实生活一致：")]),this._v("与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),t("li",[t("strong",[this._v("在界面中一致：")]),this._v("所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])])},function(){var t=this.$createElement,t=this._self._c||t;return t("ul",[t("li",[t("strong",[this._v("控制反馈：")]),this._v("通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),t("li",[t("strong",[this._v("页面反馈：")]),this._v("操作后，通过页面元素的变化清晰地展现当前状态。")])])},function(){var t=this.$createElement,t=this._self._c||t;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 t=this.$createElement,t=this._self._c||t;return t("ul",[t("li",[t("strong",[this._v("用户决策：")]),this._v("根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),t("li",[t("strong",[this._v("结果可控：")]),this._v("用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])}],!1,null,"115f647c",null);e.default=a.exports},1397:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this.$createElement;this._self._c;return this._m(0)},[function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h2",{attrs:{id:"zi-ding-yi-zhu-ti"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zhu-ti"}},[t._v("¶")]),t._v(" 自定义主题")]),e("p",[t._v("Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了四种方法，可以进行不同程度的样式自定义。")]),e("h3",{attrs:{id:"zhu-ti-bian-ji-qi"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti-bian-ji-qi"}},[t._v("¶")]),t._v(" 主题编辑器")]),e("p",[t._v("使用"),e("a",{attrs:{href:"./#/zh-CN/theme"}},[t._v("在线主题编辑器")]),t._v("，可以修改定制 Element 所有全局和组件的 Design Tokens，并可以方便地实时预览样式改变后的视觉。同时它还可以基于新的定制样式生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」部分）。")]),e("p",[t._v("也可以使用"),e("a",{attrs:{href:"https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim"}},[t._v("主题编辑器 Chrome 插件")]),t._v("，在任何使用 Element 开发的网站上配置并实时预览主题。")]),e("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"}}),e("h3",{attrs:{id:"jin-ti-huan-zhu-ti-se"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#jin-ti-huan-zhu-ti-se"}},[t._v("¶")]),t._v(" 仅替换主题色")]),e("p",[t._v("如果仅希望更换 Element 的主题色，推荐使用"),e("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview"}},[t._v("在线主题生成工具")]),t._v("。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。")]),e("p",[t._v("使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。")]),e("h3",{attrs:{id:"zai-xiang-mu-zhong-gai-bian-scss-bian-liang"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#zai-xiang-mu-zhong-gai-bian-scss-bian-liang"}},[t._v("¶")]),t._v(" 在项目中改变 SCSS 变量")]),e("p",[t._v("Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 "),e("code",[t._v("element-variables.scss")]),t._v("，写入以下内容：")]),e("pre",[e("code",{staticClass:"language-html"},[t._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")])]),e("p",[t._v("之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：")]),e("pre",[e("code",{staticClass:"language-JS"},[t._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),e("div",{staticClass:"tip"},[e("p",[t._v("需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。")])]),e("h3",{attrs:{id:"ming-ling-xing-zhu-ti-gong-ju"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#ming-ling-xing-zhu-ti-gong-ju"}},[t._v("¶")]),t._v(" 命令行主题工具")]),e("p",[t._v("如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：")]),e("h4",{attrs:{id:"an-zhuang-gong-ju"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang-gong-ju"}},[t._v("¶")]),e("strong",[t._v("安装工具")])]),e("p",[t._v("首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。")]),e("pre",[e("code",{staticClass:"language-shell"},[t._v("npm i element-theme -g\n")])]),e("p",[t._v("安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。")]),e("pre",[e("code",{staticClass:"language-shell"},[t._v("# 从 npm\nnpm i element-theme-chalk -D\n\n# 从 GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),e("h4",{attrs:{id:"chu-shi-hua-bian-liang-wen-jian"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#chu-shi-hua-bian-liang-wen-jian"}},[t._v("¶")]),e("strong",[t._v("初始化变量文件")])]),e("p",[t._v("主题生成工具安装成功后，如果全局安装可以在命令行里通过 "),e("code",[t._v("et")]),t._v(" 调用工具，如果安装在当前目录下，需要通过 "),e("code",[t._v("node_modules/.bin/et")]),t._v(" 访问到命令。执行 "),e("code",[t._v("-i")]),t._v(" 初始化变量文件。默认输出到 "),e("code",[t._v("element-variables.scss")]),t._v("，当然你可以传参数指定文件输出目录。")]),e("pre",[e("code",{staticClass:"language-shell"},[t._v("et -i [可以自定义变量文件]\n\n> ✔ Generator variables file\n")])]),e("p",[t._v("如果使用默认配置，执行后当前目录会有一个 "),e("code",[t._v("element-variables.scss")]),t._v(" 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：")]),e("pre",[e("code",{staticClass:"language-css"},[t._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")])]),e("h4",{attrs:{id:"xiu-gai-bian-liang"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-bian-liang"}},[t._v("¶")]),e("strong",[t._v("修改变量")])]),e("p",[t._v("直接编辑 "),e("code",[t._v("element-variables.scss")]),t._v(" 文件，例如修改主题色为红色。")]),e("pre",[e("code",{staticClass:"language-CSS"},[t._v("$--color-primary: red;\n")])]),e("h4",{attrs:{id:"bian-yi-zhu-ti"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#bian-yi-zhu-ti"}},[t._v("¶")]),e("strong",[t._v("编译主题")])]),e("p",[t._v("保存文件后，到命令行里执行 "),e("code",[t._v("et")]),t._v(" 编译主题，如果你想启用 "),e("code",[t._v("watch")]),t._v(" 模式，实时编译主题，增加 "),e("code",[t._v("-w")]),t._v(" 参数；如果你在初始化时指定了自定义变量文件，则需要增加 "),e("code",[t._v("-c")]),t._v(" 参数，并带上你的变量文件名。默认情况下编译的主题目录是放在 "),e("code",[t._v("./theme")]),t._v(" 下，你可以通过 "),e("code",[t._v("-o")]),t._v(" 参数指定打包目录。")]),e("pre",[e("code",{staticClass:"language-shell"},[t._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),e("h3",{attrs:{id:"shi-yong-zi-ding-yi-zhu-ti"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-zi-ding-yi-zhu-ti"}},[t._v("¶")]),t._v(" 使用自定义主题")]),e("h4",{attrs:{id:"yin-ru-zi-ding-yi-zhu-ti"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-zi-ding-yi-zhu-ti"}},[t._v("¶")]),e("strong",[t._v("引入自定义主题")])]),e("p",[t._v("和引入默认主题一样，在代码里直接引用「在线主题编辑器」或「命令行工具」生成的主题的 "),e("code",[t._v("theme/index.css")]),t._v(" 文件即可。")]),e("pre",[e("code",{staticClass:"language-javascript"},[t._v("import '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n")])]),e("h4",{attrs:{id:"da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti"}},[t._v("¶")]),e("strong",[t._v("搭配插件按需引入组件主题")])]),e("p",[t._v("如果是搭配 "),e("code",[t._v("babel-plugin-component")]),t._v(" 一起使用，只需要修改 "),e("code",[t._v(".babelrc")]),t._v(" 的配置，指定 "),e("code",[t._v("styleLibraryName")]),t._v(" 路径为自定义主题相对于 "),e("code",[t._v(".babelrc")]),t._v(" 的路径，注意要加 "),e("code",[t._v("~")]),t._v("。")]),e("pre",[e("code",{staticClass:"language-json"},[t._v('{\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "~theme"\n      }\n    ]\n  ]\n}\n')])]),e("p",[t._v("如果不清楚 "),e("code",[t._v("babel-plugin-component")]),t._v(" 是什么，请阅读 "),e("a",{attrs:{href:"./#/zh-CN/component/quickstart"}},[t._v("快速上手")]),t._v(" 一节。更多 "),e("code",[t._v("element-theme")]),t._v(" 用法请参考"),e("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[t._v("项目仓库")]),t._v("。")])])}],!1,null,null,null),e.default=n.exports},1399:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h1",[t._v("热力图")]),t._m(0),e("p",[e("vuep",{attrs:{template:"#simple-heatmap"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"simple-heatmap"}},[t._v("\n<template>\n  <ve-heatmap :data=\"chartData\"></ve-heatmap>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        chartData: {\n          columns: ['时间', '地点', '人数'],\n          rows: [\n            { '时间': '星期一', '地点': '北京', '人数': 1000 },\n            { '时间': '星期二', '地点': '上海', '人数': 400 },\n            { '时间': '星期三', '地点': '杭州', '人数': 800 },\n            { '时间': '星期二', '地点': '深圳', '人数': 200 },\n            { '时间': '星期三', '地点': '长春', '人数': 100 },\n            { '时间': '星期五', '地点': '南京', '人数': 300 },\n            { '时间': '星期四', '地点': '江苏', '人数': 800 },\n            { '时间': '星期一', '地点': '北京', '人数': 700 },\n            { '时间': '星期三', '地点': '上海', '人数': 300 },\n            { '时间': '星期二', '地点': '杭州', '人数': 500 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(1),e("p",[e("vuep",{attrs:{template:"#axis-settings"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"axis-settings"}},[t._v("\n<template>\n  <ve-heatmap :data=\"chartData\" :settings=\"chartSettings\"></ve-heatmap>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        xAxisList: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],\n        yAxisList: ['北京', '上海', '杭州', '深圳', '长春', '南京', '江苏']\n      }\n      return {\n        chartData: {\n          columns: ['时间', '地点', '人数'],\n          rows: [\n            { '时间': '星期一', '地点': '北京', '人数': 1000 },\n            { '时间': '星期二', '地点': '上海', '人数': 400 },\n            { '时间': '星期三', '地点': '杭州', '人数': 800 },\n            { '时间': '星期二', '地点': '深圳', '人数': 200 },\n            { '时间': '星期三', '地点': '长春', '人数': 100 },\n            { '时间': '星期五', '地点': '南京', '人数': 300 },\n            { '时间': '星期四', '地点': '江苏', '人数': 800 },\n            { '时间': '星期三', '地点': '北京', '人数': 700 },\n            { '时间': '星期三', '地点': '上海', '人数': 300 },\n            { '时间': '星期二', '地点': '杭州', '人数': 500 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(2),e("p",[e("vuep",{attrs:{template:"#visualMap-settings"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"visualMap-settings"}},[t._v("\n<template>\n  <ve-heatmap :data=\"chartData\" :visual-map=\"chartVisualMap\" :grid=\"chartGrid\"></ve-heatmap>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartGrid = {\n        right: 100\n      }\n      this.chartVisualMap = {\n        min: 0,\n        max: 1500,\n        type: 'piecewise',\n        right: 0,\n        top: '50%'\n      }\n      return {\n        chartData: {\n          columns: ['时间', '地点', '人数'],\n          rows: [\n            { '时间': '星期一', '地点': '北京', '人数': 1000 },\n            { '时间': '星期二', '地点': '上海', '人数': 400 },\n            { '时间': '星期三', '地点': '杭州', '人数': 800 },\n            { '时间': '星期二', '地点': '深圳', '人数': 200 },\n            { '时间': '星期三', '地点': '长春', '人数': 100 },\n            { '时间': '星期五', '地点': '南京', '人数': 300 },\n            { '时间': '星期四', '地点': '江苏', '人数': 800 },\n            { '时间': '星期三', '地点': '北京', '人数': 700 },\n            { '时间': '星期三', '地点': '上海', '人数': 200 },\n            { '时间': '星期二', '地点': '杭州', '人数': 500 }\n          ]\n        },\n      }\n    }\n  }\n")]),t._m(3),e("p",[e("vuep",{attrs:{template:"#map-heatmap"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"map-heatmap"}},[t._v("\n<template>\n  <ve-heatmap :data=\"chartData\" :settings=\"chartSettings\"></ve-heatmap>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        position: 'china',\n        type: 'map',\n        geo: {\n          label: {\n            emphasis: {\n              show: false\n            }\n          },\n          itemStyle: {\n            normal: {\n              areaColor: '#323c48',\n              borderColor: '#111'\n            },\n            emphasis: {\n              areaColor: '#2a333d'\n            }\n          }\n        }\n      }\n      return {\n        chartData: {\n          columns: ['lat', 'lng', '人数'],\n          rows: [\n            { 'lat': 115.892151, 'lng': 28.676493, '人数': 1000 },\n            { 'lat': 117.000923, 'lng': 36.675807, '人数': 400 },\n            { 'lat': 113.665412, 'lng': 34.757975, '人数': 800 },\n            { 'lat': 114.298572, 'lng': 30.584355, '人数': 200 },\n            { 'lat': 112.982279, 'lng': 28.19409, '人数': 100 },\n            { 'lat': 113.280637, 'lng': 23.125178, '人数': 300 },\n            { 'lat': 110.33119, 'lng': 20.031971, '人数': 800 },\n            { 'lat': 104.065735, 'lng': 30.659462, '人数': 700 },\n            { 'lat': 108.948024, 'lng': 34.263161, '人数': 300 },\n            { 'lat': 103.823557, 'lng': 36.058039, '人数': 500 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(4),e("p",[e("vuep",{attrs:{template:"#bmap-heatmap"}})],1),e("script",{pre:!0,attrs:{type:"text/x-template",id:"bmap-heatmap"}},[t._v("\n<template>\n  <ve-heatmap :data=\"chartData\" :settings=\"chartSettings\"></ve-heatmap>\n</template>\n\n<script>\n  export default {\n    data () {\n      this.chartSettings = {\n        key: 'oBvDtR6nzWtVchkY4cLHtnah1VVZQKRK',\n        bmap: {\n          center: [120.14322240845, 30.236064370321],\n          zoom: 14,\n          roam: true\n        },\n        type: 'bmap'\n      }\n      return {\n        chartData: {\n          columns: ['lat', 'lng'],\n          rows: [\n            { 'lat': 120.14322240845, 'lng': 30.236064370321 },\n            { 'lat': 120.14301682797, 'lng': 30.236035316745 },\n            { 'lat': 120.14138577045, 'lng': 30.236113748704 },\n            { 'lat': 120.1400398833, 'lng': 30.235973050702 },\n            { 'lat': 120.13893453465, 'lng': 30.23517220446 },\n            { 'lat': 120.1382899739, 'lng': 30.234062922977 },\n            { 'lat': 120.13265960629, 'lng': 30.231641351722 },\n            { 'lat': 120.13170681763, 'lng': 30.229925745619 },\n            { 'lat': 120.13119614803, 'lng': 30.228996846637 },\n            { 'lat': 120.13023980134, 'lng': 30.228226570416 }\n          ]\n        }\n      }\n    }\n  }\n")]),t._m(5),t._m(6),t._m(7)])},[function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"shi-li"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#shi-li"}},[this._v("¶")]),this._v(" 示例")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"pei-zhi-zuo-biao-zhou"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pei-zhi-zuo-biao-zhou"}},[this._v("¶")]),this._v(" 配置坐标轴")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"zi-ding-yi-visualmap"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-visualmap"}},[this._v("¶")]),this._v(" 自定义 visualMap")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"di-tu-re-li-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#di-tu-re-li-tu"}},[this._v("¶")]),this._v(" 地图热力图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"bai-du-di-tu-re-li-tu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bai-du-di-tu-re-li-tu"}},[this._v("¶")]),this._v(" 百度地图热力图")])},function(){var t=this.$createElement,t=this._self._c||t;return t("h4",{attrs:{id:"settings-pei-zhi-xiang"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#settings-pei-zhi-xiang"}},[this._v("¶")]),this._v(" settings 配置项")])},function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("table",[e("thead",[e("tr",[e("th",[t._v("配置项")]),e("th",[t._v("简介")]),e("th",[t._v("类型")]),e("th",[t._v("备注")])])]),e("tbody",[e("tr",[e("td",[t._v("type")]),e("td",[t._v("热力图的类型")]),e("td",[t._v("string")]),e("td",[t._v("可选值："),e("code",[t._v("cartesian")]),t._v("(默认值，直角坐标系), "),e("code",[t._v("map")]),t._v("(地图)，"),e("code",[t._v("bmap")]),t._v("(百度地图)")])]),e("tr",[e("td",[t._v("xAxisList")]),e("td",[t._v("x 轴数据")]),e("td",[t._v("array")]),e("td",[t._v("默认取数据中的数据中的第一维度的数据")])]),e("tr",[e("td",[t._v("yAxisList")]),e("td",[t._v("y 轴数据")]),e("td",[t._v("array")]),e("td",[t._v("默认取数据中的数据中的第二维度的数据")])]),e("tr",[e("td",[t._v("dimension")]),e("td",[t._v("维度")]),e("td",[t._v("array")]),e("td",[t._v("默认为 [columns[0], columns[1]]")])]),e("tr",[e("td",[t._v("metrics")]),e("td",[t._v("指标")]),e("td",[t._v("string")]),e("td",[t._v("默认为 columns[2]")])]),e("tr",[e("td",[t._v("dataType")]),e("td",[t._v("数据类型")]),e("td",[t._v("string")]),e("td",[t._v("可选值: KMB, normal, percent")])]),e("tr",[e("td",[t._v("min")]),e("td",[t._v("visualMap 中的最小值")]),e("td",[t._v("number")]),e("td",[t._v("默认取指标中最小的数据")])]),e("tr",[e("td",[t._v("max")]),e("td",[t._v("visualMap 中的最大值")]),e("td",[t._v("number")]),e("td",[t._v("默认取指标中最大的数据")])]),e("tr",[e("td",[t._v("digit")]),e("td",[t._v("设置数据类型为percent时保留的位数")]),e("td",[t._v("number")]),e("td",[t._v("默认为2")])]),e("tr",[e("td",[t._v("key")]),e("td",[t._v("百度地图 access_key")]),e("td",[t._v("string")]),e("td",[t._v("可"),e("a",{attrs:{href:"http://lbsyun.baidu.com/apiconsole/key"}},[t._v("由此")]),t._v("获取")])]),e("tr",[e("td",[t._v("bmap")]),e("td",[t._v("百度地图配置项")]),e("td",[t._v("object")]),e("td",[t._v("参考"),e("a",{attrs:{href:"https://github.com/ecomfe/echarts/tree/master/extension/bmap#%E4%BD%BF%E7%94%A8"}},[t._v("文档")]),t._v("配置")])]),e("tr",[e("td",[t._v("geo")]),e("td",[t._v("地图配置项")]),e("td",[t._v("object")]),e("td",[t._v("参考"),e("a",{attrs:{href:"http://echarts.baidu.com/option.html#geo"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("position")]),e("td",[t._v("地图类型")]),e("td",[t._v("string")]),e("td",[t._v("默认为 "),e("code",[t._v("'china'")])])]),e("tr",[e("td",[t._v("positionJsonLink")]),e("td",[t._v("地图数据源")]),e("td",[t._v("string")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("beforeRegisterMap")]),e("td",[t._v("地图数据注册前执行的函数")]),e("td",[t._v("Function")]),e("td",[t._v("参数为地图数据，需返回地图数据")])]),e("tr",[e("td",[t._v("beforeRegisterMapOnce")]),e("td",[t._v("地图数据注册前执行的函数(仅执行一次)")]),e("td",[t._v("Function")]),e("td",[t._v("参数为地图数据，需返回地图数据")])]),e("tr",[e("td",[t._v("specialAreas")]),e("td",[t._v("地图中的位置配置")]),e("td",[t._v("object")]),e("td",[t._v("将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看, 用法参考"),e("a",{attrs:{href:"http://echarts.baidu.com/api.html#echarts.registerMap"}},[t._v("文档")])])]),e("tr",[e("td",[t._v("mapURLProfix")]),e("td",[t._v("位置请求的 URL 前缀")]),e("td",[t._v("string")]),e("td",[t._v("默认为 "),e("code",[t._v("https://unpkg.com/echarts@3.6.2/map/json/")])])]),e("tr",[e("td",[t._v("pointSize")]),e("td",[t._v("点大小")]),e("td",[t._v("number")]),e("td",[t._v("默认为 10")])]),e("tr",[e("td",[t._v("blurSize")]),e("td",[t._v("模糊大小")]),e("td",[t._v("number")]),e("td",[t._v("默认为 5")])]),e("tr",[e("td",[t._v("heatColor")]),e("td",[t._v("visualMap 中的最大值颜色区间")]),e("td",[t._v("array")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("yAxisName")]),e("td",[t._v("y 轴名称")]),e("td",[t._v("string")]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("xAxisName")]),e("td",[t._v("x 轴名称")]),e("td",[t._v("string")]),e("td",[t._v("-")])])])])},function(){var t=this.$createElement,t=this._self._c||t;return t("blockquote",[t("p",[this._v("备注：当不指定指标时，指标的值默认为1。")])])}],!1,null,null,null),e.default=n.exports},1402:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this.$createElement;this._self._c;return this._m(0)},[function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h2",{attrs:{id:"kai-fa-shuo-ming"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#kai-fa-shuo-ming"}},[t._v("¶")]),t._v(" 开发说明")]),e("p",[t._v("组件二次开发说明")]),e("h3",{attrs:{id:"1-zheng-ti-xiang-mu-de-mu-lu-jie-gou-shuo-ming"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#1-zheng-ti-xiang-mu-de-mu-lu-jie-gou-shuo-ming"}},[t._v("¶")]),t._v(" 1. 整体项目的目录结构说明")]),e("p",[t._v("本项目采用monorepo的方式进行代码方式管理，用到lerna")]),e("p",[t._v("packages下面分别有两个文件夹"),e("code",[t._v("web")]),t._v("和"),e("code",[t._v("mobile")]),t._v("，分别放的是PC端的组件和移动端的组件源码")]),e("pre",[e("code",[t._v("root\n├── README.md\n├── lerna.json\n├── package-lock.json\n├── package.json\n├── packages\n│   ├── mobile ---------- 移动端组件相关代码\n│   │   ├── docs\n│   │   ├── es\n│   │   ├── lib\n│   │   ├── package-lock.json\n│   │   ├── package.json\n│   │   ├── packages\n│   │   ├── src ---------- 移动端组件每个实际组件的相关代码\n│   │   ├── test\n│   │   ├── tsconfig.json\n│   │   ├── types\n│   │   ├── vant.config.js\n│   │   ├── vetur\n│   │   ├── webpack.config.js\n│   │   ├── yarn-error.log\n│   │   └── yarn.lock\n│   └── web ---------- pc端组件相关代码\n│       ├── build\n│       ├── components.json\n│       ├── dist\n│       ├── element_logo.svg\n│       ├── examples\n│       ├── node_modules\n│       ├── package-lock.json\n│       ├── package.json\n│       ├── packages ---------- pc端具体组件的代码在此文件夹下\n│       ├── src\n│       ├── test\n│       ├── types\n│       └── yarn.lock\n├── scripts ---------- 一些打包脚本\n    ├── build.js\n    └── build_vant.js\n")])]),e("h3",{attrs:{id:"2-kai-fa-liu-cheng"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#2-kai-fa-liu-cheng"}},[t._v("¶")]),t._v(" 2. 开发流程")]),e("h4",{attrs:{id:"1-1-zhuang-bao"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#1-1-zhuang-bao"}},[t._v("¶")]),t._v(" 1.1 装包")]),e("p",[t._v("装包前请确保安装了 yarn，建议使用yarn来进行包管理")]),e("p",[t._v("安装yarn")]),e("pre",[e("code",[t._v("npm install -g yarn\n")])]),e("p",[t._v("装包")]),e("pre",[e("code",{staticClass:"language-bash"},[t._v("npm run bootstrap\n")])]),e("h4",{attrs:{id:"1-2-qi-dong-xiang-mu"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#1-2-qi-dong-xiang-mu"}},[t._v("¶")]),t._v(" 1.2 启动项目")]),e("p",[t._v("启动开发模式")]),e("pre",[e("code",{staticClass:"language-bash"},[t._v("npm run dev\n")])]),e("p",[t._v("开发模式启动之后，即可进行组件的二次开发")]),e("p",[t._v("这里需要特别注意的一点是，在修改移动的组件的时候，需要进行build才能在开发模式下查看到最新的修改")]),e("p",[t._v("移动端组件的build命令：")]),e("pre",[e("code",[t._v("npm run build:mobile\n")])]),e("h4",{attrs:{id:"1-3-zu-jian-ku-zhan-shi-zhan-dian-da-bao"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#1-3-zu-jian-ku-zhan-shi-zhan-dian-da-bao"}},[t._v("¶")]),t._v(" 1.3 组件库展示站点打包")]),e("p",[t._v("需要确保node环境是 大于等于 v10.19.0")]),e("p",[t._v("可以安装n来进行node版本的管理")]),e("p",[t._v("为了确保打包的是最新的代码，需要先对移动端组件代码进行build：")]),e("pre",[e("code",[t._v("npm run build:mobile\n")])]),e("p",[t._v("然后打包整体组件&站点")]),e("pre",[e("code",[t._v("npm run build tis-ui\n")])]),e("p",[t._v("打包好之后最终的站点的根目录在，若需要部署需要知道这个目录位置，否则不需要关心：")]),e("pre",[e("code",[t._v("tis-design/packages/element/examples/element-ui\n")])]),e("h4",{attrs:{id:"1-4-zu-jian-ku-zheng-ti-da-bao"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#1-4-zu-jian-ku-zheng-ti-da-bao"}},[t._v("¶")]),t._v(" 1.4 组件库整体打包")]),e("p",[t._v("组件库整体打包命令：")]),e("pre",[e("code",[t._v("npm run build:all\n")])]),e("p",[t._v("打包之后即可进行最新的组件引用并使用了")]),e("h3",{attrs:{id:"3-qi-ta-shuo-ming"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#3-qi-ta-shuo-ming"}},[t._v("¶")]),t._v(" 3. 其他说明")]),e("p",[t._v("packages下面有两个重要的包，一个存放的是pc端的组件源码，一个存放移动端的组件")]),e("p",[t._v("element的包里面，pc组件相关的源码在"),e("code",[t._v("web/packages")]),t._v("文件夹目录下")]),e("p",[t._v("vant的包里面，移动端组件相关的源码在"),e("code",[t._v("mobile/src")]),t._v("文件夹下")])])}],!1,null,null,null),e.default=n.exports},1403:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this.$createElement;this._self._c;return this._m(0)},[function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h2",{attrs:{id:"guo-ji-hua"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#guo-ji-hua"}},[t._v("¶")]),t._v(" 国际化")]),e("p",[t._v("Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：")]),e("pre",[e("code",{staticClass:"language-javascript"},[t._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")])]),e("p",[t._v("或")]),e("pre",[e("code",{staticClass:"language-javascript"},[t._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")])]),e("p",[t._v("如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。")]),e("p",[e("strong",[t._v("webpack.config.js")])]),e("pre",[e("code",{staticClass:"language-javascript"},[t._v("{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n")])]),e("h2",{attrs:{id:"jian-rong-vue-i18n-5-x"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-vue-i18n-5-x"}},[t._v("¶")]),t._v(" 兼容 "),e("code",[t._v("vue-i18n@5.x")])]),e("p",[t._v("Element 兼容 "),e("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[t._v("vue-i18n@5.x")]),t._v("，搭配使用能更方便地实现多语言切换。")]),e("pre",[e("code",{staticClass:"language-javascript"},[t._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")])]),e("h2",{attrs:{id:"jian-rong-qi-ta-i18n-cha-jian"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-qi-ta-i18n-cha-jian"}},[t._v("¶")]),t._v(" 兼容其他 i18n 插件")]),e("p",[t._v("如果不使用 "),e("code",[t._v("vue-i18n@5.x")]),t._v("，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。")]),e("pre",[e("code",{staticClass:"language-javascript"},[t._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")])]),e("h2",{attrs:{id:"jian-rong-vue-i18n-6-x"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-vue-i18n-6-x"}},[t._v("¶")]),t._v(" 兼容 "),e("code",[t._v("vue-i18n@6.x")])]),e("p",[t._v("默认不支持 6.x 的 "),e("code",[t._v("vue-i18n")]),t._v("，你需要手动处理。")]),e("pre",[e("code",{staticClass:"language-javascript"},[t._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")])]),e("h2",{attrs:{id:"an-xu-jia-zai-li-ding-zhi-i18n"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-jia-zai-li-ding-zhi-i18n"}},[t._v("¶")]),t._v(" 按需加载里定制 i18n")]),e("pre",[e("code",{staticClass:"language-js"},[t._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")])]),e("h2",{attrs:{id:"tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian"}},[t._v("¶")]),t._v(" 通过 CDN 的方式加载语言文件")]),e("pre",[e("code",{staticClass:"language-html"},[t._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n<\/script>\n')])]),e("p",[t._v("搭配 "),e("code",[t._v("vue-i18n")]),t._v(" 使用")]),e("pre",[e("code",{staticClass:"language-html"},[t._v('<script src="//unpkg.com/vue"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  Vue.locale(\'en\', ELEMENT.lang.en)\n  Vue.locale(\'zh-cn\', ELEMENT.lang.zhCN)\n<\/script>\n')])]),e("p",[t._v("目前 Element 内置了以下语言：")]),e("ul",{staticClass:"language-list"},[e("li",[t._v("简体中文（zh-CN）")]),e("li",[t._v("英语（en）")]),e("li",[t._v("德语（de）")]),e("li",[t._v("葡萄牙语（pt）")]),e("li",[t._v("西班牙语（es）")]),e("li",[t._v("丹麦语（da）")]),e("li",[t._v("法语（fr）")]),e("li",[t._v("挪威语（nb-NO）")]),e("li",[t._v("繁体中文（zh-TW）")]),e("li",[t._v("意大利语（it）")]),e("li",[t._v("韩语（ko）")]),e("li",[t._v("日语（ja）")]),e("li",[t._v("荷兰语（nl）")]),e("li",[t._v("越南语（vi）")]),e("li",[t._v("俄语（ru-RU）")]),e("li",[t._v("土耳其语（tr-TR）")]),e("li",[t._v("巴西葡萄牙语（pt-br）")]),e("li",[t._v("波斯语（fa）")]),e("li",[t._v("泰语（th）")]),e("li",[t._v("印尼语（id）")]),e("li",[t._v("保加利亚语（bg）")]),e("li",[t._v("波兰语（pl）")]),e("li",[t._v("芬兰语（fi）")]),e("li",[t._v("瑞典语（sv-SE）")]),e("li",[t._v("希腊语（el）")]),e("li",[t._v("斯洛伐克语（sk）")]),e("li",[t._v("加泰罗尼亚语（ca）")]),e("li",[t._v("捷克语（cs-CZ）")]),e("li",[t._v("乌克兰语（ua）")]),e("li",[t._v("土库曼语（tk）")]),e("li",[t._v("泰米尔语（ta）")]),e("li",[t._v("拉脱维亚语（lv）")]),e("li",[t._v("南非荷兰语（af-ZA）")]),e("li",[t._v("爱沙尼亚语（ee）")]),e("li",[t._v("斯洛文尼亚语（sl）")]),e("li",[t._v("阿拉伯语（ar）")]),e("li",[t._v("希伯来语（he）")]),e("li",[t._v("立陶宛语（lt）")]),e("li",[t._v("蒙古语（mn）")]),e("li",[t._v("哈萨克斯坦语（kz）")]),e("li",[t._v("匈牙利语（hu）")]),e("li",[t._v("罗马尼亚语（ro）")]),e("li",[t._v("库尔德语（ku）")]),e("li",[t._v("维吾尔语（ug-CN）")]),e("li",[t._v("高棉语（km）")]),e("li",[t._v("塞尔维亚语（sr）")]),e("li",[t._v("巴斯克语（eu）")]),e("li",[t._v("吉尔吉斯语（kg）")]),e("li",[t._v("亚美尼亚语 (hy)")]),e("li",[t._v("克罗地亚 (hr)")]),e("li",[t._v("世界语 (eo)")])]),e("p",[t._v("如果你需要使用其他的语言，欢迎贡献 PR：只需在 "),e("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[t._v("这里")]),t._v(" 添加一个语言配置文件即可。")])])}],!1,null,null,null),e.default=n.exports},1404:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this.$createElement;this._self._c;return this._m(0)},[function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h1",[t._v("IndexBar 索引栏")]),e("h3",{attrs:{id:"yin-ru"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru"}},[t._v("¶")]),t._v(" 引入")]),e("pre",[e("code",{staticClass:"language-js"},[t._v("import Vue from 'vue';\nimport { IndexBar, IndexAnchor } from 'vant';\n\nVue.use(IndexBar);\nVue.use(IndexAnchor);\n")])]),e("h2",{attrs:{id:"dai-ma-yan-shi"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#dai-ma-yan-shi"}},[t._v("¶")]),t._v(" 代码演示")]),e("h3",{attrs:{id:"ji-chu-yong-fa"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa"}},[t._v("¶")]),t._v(" 基础用法")]),e("p",[t._v("点击索引栏时，会自动跳转到对应的 "),e("code",[t._v("IndexAnchor")]),t._v(" 锚点位置。")]),e("pre",[e("code",{staticClass:"language-html"},[t._v('<van-index-bar>\n  <van-index-anchor index="A" />\n  <van-cell title="文本" />\n  <van-cell title="文本" />\n  <van-cell title="文本" />\n\n  <van-index-anchor index="B" />\n  <van-cell title="文本" />\n  <van-cell title="文本" />\n  <van-cell title="文本" />\n\n  ...\n</van-index-bar>\n')])]),e("h3",{attrs:{id:"zi-ding-yi-suo-yin-lie-biao"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-suo-yin-lie-biao"}},[t._v("¶")]),t._v(" 自定义索引列表")]),e("p",[t._v("可以通过 "),e("code",[t._v("index-list")]),t._v(" 属性自定义展示的索引字符列表。")]),e("pre",[e("code",{staticClass:"language-html"},[t._v('<van-index-bar :index-list="indexList">\n  <van-index-anchor index="1">标题1</van-index-anchor>\n  <van-cell title="文本" />\n  <van-cell title="文本" />\n  <van-cell title="文本" />\n\n  <van-index-anchor index="2">标题2</van-index-anchor>\n  <van-cell title="文本" />\n  <van-cell title="文本" />\n  <van-cell title="文本" />\n\n  ...\n</van-index-bar>\n')])]),e("pre",[e("code",{staticClass:"language-js"},[t._v("export default {\n  data() {\n    return {\n      indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n    };\n  },\n};\n")])]),e("h2",{attrs:{id:"api"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[t._v("¶")]),t._v(" API")]),e("h3",{attrs:{id:"indexbar-props"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#indexbar-props"}},[t._v("¶")]),t._v(" IndexBar Props")]),e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("index-list")]),e("td",[t._v("索引字符列表")]),e("td",[e("em",[t._v("string[] | number[]")])]),e("td",[e("code",[t._v("A-Z")])])]),e("tr",[e("td",[t._v("z-index")]),e("td",[t._v("z-index 层级")]),e("td",[e("em",[t._v("number | string")])]),e("td",[e("code",[t._v("1")])])]),e("tr",[e("td",[t._v("sticky")]),e("td",[t._v("是否开启锚点自动吸顶")]),e("td",[e("em",[t._v("boolean")])]),e("td",[e("code",[t._v("true")])])]),e("tr",[e("td",[t._v("sticky-offset-top")]),e("td",[t._v("锚点自动吸顶时与顶部的距离")]),e("td",[e("em",[t._v("number")])]),e("td",[e("code",[t._v("0")])])]),e("tr",[e("td",[t._v("highlight-color")]),e("td",[t._v("索引字符高亮颜色")]),e("td",[e("em",[t._v("string")])]),e("td",[e("code",[t._v("#ee0a24")])])])])]),e("h3",{attrs:{id:"indexanchor-props"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#indexanchor-props"}},[t._v("¶")]),t._v(" IndexAnchor Props")]),e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),e("th",[t._v("说明")]),e("th",[t._v("类型")]),e("th",[t._v("默认值")])])]),e("tbody",[e("tr",[e("td",[t._v("index")]),e("td",[t._v("索引字符")]),e("td",[e("em",[t._v("number | string")])]),e("td",[t._v("-")])])])]),e("h3",{attrs:{id:"indexbar-events"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#indexbar-events"}},[t._v("¶")]),t._v(" IndexBar Events")]),e("table",[e("thead",[e("tr",[e("th",[t._v("事件名")]),e("th",[t._v("说明")]),e("th",[t._v("回调参数")])])]),e("tbody",[e("tr",[e("td",[t._v("select")]),e("td",[t._v("点击索引栏的字符时触发")]),e("td",[e("em",[t._v("index: number | string")])])]),e("tr",[e("td",[t._v("change "),e("code",[t._v("v2.10.10")])]),e("td",[t._v("当前高亮的索引字符变化时触发")]),e("td",[e("em",[t._v("index: number | string")])])])])]),e("h3",{attrs:{id:"indexanchor-slots"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#indexanchor-slots"}},[t._v("¶")]),t._v(" IndexAnchor Slots")]),e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("说明")])])]),e("tbody",[e("tr",[e("td",[t._v("default")]),e("td",[t._v("锚点位置显示内容，默认为索引字符")])])])]),e("h3",{attrs:{id:"indexbar-fang-fa"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#indexbar-fang-fa"}},[t._v("¶")]),t._v(" IndexBar 方法")]),e("p",[t._v("通过 ref 可以获取到 IndexBar 实例并调用实例方法，详见"),e("a",{attrs:{href:"#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa"}},[t._v("组件实例方法")]),t._v("。")]),e("table",[e("thead",[e("tr",[e("th",[t._v("方法名")]),e("th",[t._v("说明")]),e("th",[t._v("参数")]),e("th",[t._v("返回值")])])]),e("tbody",[e("tr",[e("td",[t._v("scrollTo "),e("code",[t._v("v2.12.2")])]),e("td",[t._v("滚动到指定锚点")]),e("td",[e("em",[t._v("index: number | string")])]),e("td",[t._v("-")])])])]),e("h3",{attrs:{id:"yang-shi-bian-liang"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#yang-shi-bian-liang"}},[t._v("¶")]),t._v(" 样式变量")]),e("p",[t._v("组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考"),e("a",{attrs:{href:"#/zh-CN/theme"}},[t._v("主题定制")]),t._v("。")]),e("table",[e("thead",[e("tr",[e("th",[t._v("名称")]),e("th",[t._v("默认值")]),e("th",[t._v("描述")])])]),e("tbody",[e("tr",[e("td",[t._v("@index-bar-sidebar-z-index")]),e("td",[e("code",[t._v("2")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-bar-index-font-size")]),e("td",[e("code",[t._v("@font-size-xs")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-bar-index-line-height")]),e("td",[e("code",[t._v("@line-height-xs")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-bar-index-active-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-z-index")]),e("td",[e("code",[t._v("1")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-padding")]),e("td",[e("code",[t._v("0 @padding-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-text-color")]),e("td",[e("code",[t._v("@text-color")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-font-weight")]),e("td",[e("code",[t._v("@font-weight-bold")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-font-size")]),e("td",[e("code",[t._v("@font-size-md")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-line-height")]),e("td",[e("code",[t._v("32px")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-background-color")]),e("td",[e("code",[t._v("transparent")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-sticky-text-color")]),e("td",[e("code",[t._v("@red")])]),e("td",[t._v("-")])]),e("tr",[e("td",[t._v("@index-anchor-sticky-background-color")]),e("td",[e("code",[t._v("@white")])]),e("td",[t._v("-")])])])])])}],!1,null,null,null),e.default=n.exports},1405:function(t,e,n){"use strict";n.r(e);n=n(0),n=Object(n.a)({},function(){var t=this.$createElement;this._self._c;return this._m(0)},[function(){var t=this,e=t.$createElement,e=t._self._c||e;return e("section",{staticClass:"content element-doc"},[e("h2",{attrs:{id:"yi-zhan-shi-kai-fa-ping-tai-ye-mian-bu-shu"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#yi-zhan-shi-kai-fa-ping-tai-ye-mian-bu-shu"}},[t._v("¶")]),t._v(" 一站式开发平台页面部署")]),e("p",[t._v("需要确保node环境是 大于等于 v10.19.0")]),e("p",[t._v("可以安装n来进行node版本的管理")]),e("p",[t._v("第一步（非必须）：")]),e("p",[t._v("为了确保打包的是最新的代码，需要先对移动端组件代码进行build：")]),e("pre",[e("code",[t._v("npm run build:mobile\n")])]),e("p",[t._v("然后打包整体组件&站点")]),e("pre",[e("code",[t._v("npm run build tis-ui\n")])]),e("p",[t._v("第二步：")]),e("ul",[e("li",[t._v("启动一站式开发站点服务")])]),e("pre",[e("code",[t._v("npm run server:start\n")])]),e("p",[t._v("启动成功后的访问地址：http://localhost:9999/#/zh-CN")]),e("p",[t._v("如果访问出现问题，请尝试执行"),e("code",[t._v("rm -rf ~/.pm2")]),t._v("命令之后再重新执行："),e("code",[t._v("npm run server:start")])]),e("ul",[e("li",[t._v("关闭站点服务：")])]),e("pre",[e("code",[t._v("npm run server:stop\n")])]),e("ul",[e("li",[t._v("清理一站式站点服务,一般在服务启动失败或出现异常了，可以使用这条命令做清理，再执行启动")])]),e("pre",[e("code",[t._v("npm run server:delete\n")])]),e("h2",{attrs:{id:"an-zhuang"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang"}},[t._v("¶")]),t._v(" 安装")]),e("h3",{attrs:{id:"tong-guo-git-di-zhi-an-zhuang"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#tong-guo-git-di-zhi-an-zhuang"}},[t._v("¶")]),t._v(" 通过git地址安装")]),e("p",[t._v("需要在pacakge.json中加入以下内容")]),e("pre",[e("code",{staticClass:"language-json"},[t._v('{\n    "tis-ui": "ssh://git@sekiyika.tpddns.cn:8022/home/git/tis-design.git"\n}\n')])]),e("h3",{attrs:{id:"npm-an-zhuang"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#npm-an-zhuang"}},[t._v("¶")]),t._v(" npm 安装")]),e("p",[t._v("推荐使用 npm 的方式安装，它能更好地和 "),e("a",{attrs:{href:"https://webpack.js.org/"}},[t._v("webpack")]),t._v(" 打包工具配合使用。")]),e("p",[t._v("建立npm私库的情况下")]),e("pre",[e("code",{staticClass:"language-shell"},[t._v("npm i tis-ui -S\n")])])])}],!1,null,null,null),e.default=n.exports},928:function(t,e,n){var a={"./changelog.vue":1074,"./component-mobile.vue":1237,"./component.vue":1239,"./design.vue":1392,"./guide.vue":1242,"./index.vue":1243,"./main-layout.vue":447,"./nav.vue":1245,"./resource.vue":1391,"./theme-nav.vue":1390,"./theme-preview.vue":1249,"./theme.vue":1288};function i(t){t=s(t);return n(t)}function s(t){if(n.o(a,t))return a[t];t=new Error("Cannot find module '"+t+"'");throw t.code="MODULE_NOT_FOUND",t}i.keys=function(){return Object.keys(a)},i.resolve=s,(t.exports=i).id=928},932:function(t,e,n){var a={"./zh-CN/alert.md":1339,"./zh-CN/avatar.md":1341,"./zh-CN/backtop.md":1342,"./zh-CN/badge.md":1344,"./zh-CN/border.md":1346,"./zh-CN/breadcrumb.md":1348,"./zh-CN/button.md":1349,"./zh-CN/c-bar.md":1351,"./zh-CN/c-bmap.md":1369,"./zh-CN/c-candle.md":1368,"./zh-CN/c-funnel.md":1355,"./zh-CN/c-gantt.md":1357,"./zh-CN/c-gauge.md":1365,"./zh-CN/c-graph.md":1360,"./zh-CN/c-heatmap.md":1399,"./zh-CN/c-histogram.md":1364,"./zh-CN/c-line.md":1362,"./zh-CN/c-liquidfill.md":1366,"./zh-CN/c-map.md":1367,"./zh-CN/c-pie.md":1353,"./zh-CN/c-radar.md":1345,"./zh-CN/c-ring.md":1333,"./zh-CN/c-sankey.md":1374,"./zh-CN/c-scatter.md":1375,"./zh-CN/c-start.md":1376,"./zh-CN/c-toggle.md":1378,"./zh-CN/c-tree.md":1379,"./zh-CN/c-waterfall.md":1380,"./zh-CN/c-wordcloud.md":1382,"./zh-CN/calendar.md":1311,"./zh-CN/card.md":1302,"./zh-CN/carousel.md":1295,"./zh-CN/cascader.md":1270,"./zh-CN/checkbox.md":1248,"./zh-CN/collapse.md":1247,"./zh-CN/color-picker.md":1218,"./zh-CN/color.md":1195,"./zh-CN/container.md":1189,"./zh-CN/custom-theme.md":1397,"./zh-CN/date-picker.md":1141,"./zh-CN/datetime-picker.md":1125,"./zh-CN/dev.md":1402,"./zh-CN/dialog.md":1102,"./zh-CN/divider.md":1100,"./zh-CN/drawer.md":1099,"./zh-CN/dropdown.md":1097,"./zh-CN/form.md":1095,"./zh-CN/i18n.md":1403,"./zh-CN/icon.md":1093,"./zh-CN/image.md":1092,"./zh-CN/index-bar.md":1404,"./zh-CN/infiniteScroll.md":1090,"./zh-CN/input-number.md":1088,"./zh-CN/input.md":1086,"./zh-CN/installation.md":1405,"./zh-CN/layout.md":1084,"./zh-CN/link.md":1083,"./zh-CN/loading.md":1081,"./zh-CN/m-action-sheet.md":1079,"./zh-CN/m-breadcrumb-tree.md":1078,"./zh-CN/m-button.md":1080,"./zh-CN/m-calendar.md":1082,"./zh-CN/m-cascader.md":1085,"./zh-CN/m-cell.md":1087,"./zh-CN/m-checkbox.md":1089,"./zh-CN/m-datetime-picker.md":1091,"./zh-CN/m-field.md":1094,"./zh-CN/m-form.md":1096,"./zh-CN/m-grid.md":1098,"./zh-CN/m-index-bar.md":1101,"./zh-CN/m-notice-bar.md":1105,"./zh-CN/m-notify.md":1132,"./zh-CN/m-number-keyboard.md":1181,"./zh-CN/m-password-input.md":1208,"./zh-CN/m-picker.md":1240,"./zh-CN/m-pull-refresh.md":1264,"./zh-CN/m-search.md":1278,"./zh-CN/m-sidebar.md":1303,"./zh-CN/m-swipe-cell.md":1317,"./zh-CN/m-swipe.md":1319,"./zh-CN/m-tree-select.md":1327,"./zh-CN/menu.md":1334,"./zh-CN/message-box.md":1354,"./zh-CN/message.md":1359,"./zh-CN/notification.md":1361,"./zh-CN/page-header.md":1358,"./zh-CN/pagination.md":1356,"./zh-CN/popconfirm.md":1352,"./zh-CN/popover.md":1350,"./zh-CN/progress.md":1347,"./zh-CN/quickstart.md":1370,"./zh-CN/radio.md":1343,"./zh-CN/rate.md":1340,"./zh-CN/select.md":1338,"./zh-CN/slider.md":1335,"./zh-CN/steps.md":1332,"./zh-CN/switch.md":1329,"./zh-CN/table.md":1326,"./zh-CN/tabs.md":1324,"./zh-CN/tag.md":1323,"./zh-CN/theme.md":1321,"./zh-CN/time-picker.md":1318,"./zh-CN/timeline.md":1315,"./zh-CN/tooltip.md":1313,"./zh-CN/transfer.md":1310,"./zh-CN/transition.md":1308,"./zh-CN/tree.md":1307,"./zh-CN/typography.md":1305,"./zh-CN/upload.md":1301};function i(t){t=s(t);return n(t)}function s(t){if(n.o(a,t))return a[t];t=new Error("Cannot find module '"+t+"'");throw t.code="MODULE_NOT_FOUND",t}i.keys=function(){return Object.keys(a)},i.resolve=s,(t.exports=i).id=932},965:function(t,e,n){},966:function(t,e,n){},967:function(t,e,n){},968:function(t,e,n){},969:function(t,e,n){},970:function(t,e,n){},971:function(t,e,n){},972:function(t,e,n){},986:function(t,e,n){},988:function(t,e,n){}}]);