组件element------Others组件
（1）Dialog 对话框-----在保留当前页面状态的情况下，告知用户并承载相关操作。
基本用法-----需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。
点击打开 Dialog
这是一段信息
before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。
自定义内容
打开嵌套表格的 Dialog
打开嵌套表单的 Dialog
嵌套的 Dialog------正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。
点击打开外层 Dialog
居中布局----将center设置为true即可使标题和底部居中。center仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。
点击打开 Dialog
需要注意的是内容是默认不居中的
*Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。
如果 visible 属性绑定的变量位于 Vuex 的 store 内，那么 .sync 不会正常工作。此时需要去除 .sync 修饰符，同时监听 Dialog 的 open 和 close 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 visible 属性绑定的变量的值。*
Attributes
Slot
Events
（2）Tooltip 文字提示----使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如placement=“left-end”，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。
基础用法
上左
上边
上右
左上
左边
左下
右上
右边
右下
下左
下边
下右
主题
Dark
Light
更多 Content
多行信息
第二行信息
Top center
高级扩展：transition 属性可以定制显隐的动画效果，默认为fade-in-linear。 如果需要关闭 tooltip 功能，disabled 属性可以满足这个需求，它接受一个Boolean，设置为true即可。
事实上，这是基于 Vue-popper 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。 当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。
点击{{disabled ? '开启' : '关闭'}} tooltip 功能
tooltip 内不支持 router-link 组件，请使用 vm.$router.push 代替。
tooltip 内不支持 disabled form 元素，参考MDN，请在 disabled form 元素外层添加一层包裹元素。
Attributes
（3）Popover 弹出框
基础用法--------trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。对于触发 Popover 的元素，有两种写法：使用 slot=“reference” 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。
hover 激活
click 激活
focus 激活
手动激活
嵌套信息
click 激活
嵌套操作
这是一段内容这是一段内容确定删除吗？
取消
确定
删除
Attributes
（4）Card 卡片
基础用法---------Card 组件包括header和body部分，header部分需要有显式具名 slot 分发，同时也是可选的。
卡片名称
操作按钮
{{'列表内容 ' + o }}
简单卡片
{{'列表内容 ' + o }}
带图片
好吃的汉堡
操作按钮
卡片阴影------通过shadow属性设置卡片阴影出现的时机：always、hover或never。
总是显示
鼠标悬浮时显示
从不显示
Attributes
（5）Carousel 走马灯-------在有限空间内，循环播放同一类型的图片、文字等内容
基础用法----结合使用el-carousel和el-carousel-item标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在el-carousel-item标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置trigger属性为click，可以达到点击触发的效果。
默认 Hover 指示器触发
{{ item }}
Click 指示器触发
{{ item }}
指示器------indicator-position属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为outside则会显示在外部；设置为none则不会显示指示器。
{{ item }}
切换箭头-----arrow属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将arrow设置为always，则会一直显示；设置为never，则会一直隐藏。
{{ item }}
卡片化
{{ item }}
方向
{{ item }}
Carousel Attributes
（6）Collapse 折叠面板
基础用法
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
手风琴效果------通过 accordion 属性来设置是否以手风琴模式显示。
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
自定义面板标题
一致性 Consistency
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
（7）Timeline 时间线-----可视化地呈现时间流信息。
基础用法
排序：
倒序
正序
{{activity.content}}
定义节点样式
{{activity.content}}
定义时间戳
更新 Github 模板
王小虎 提交于 2018/4/12 20:46
更新 Github 模板
王小虎 提交于 2018/4/3 20:46
更新 Github 模板
王小虎 提交于 2018/4/2 20:46
（8）Divider 分割线
基础用法
青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪
设置文案
头上一片晴天，心中一个想念
少年包青天
饿了别叫妈, 叫饿了么
阿里云
垂直分割
雨纷纷
（9）Calendar calendar
基本------设置 value 来指定当前显示的月份。如果 value 未指定，则显示当月。value 支持 v-model 双向绑定。
自定义内容-------通过设置名为 dateCell 的 scoped-slot 来自定义日历单元格中显示的内容。在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。详情解释参考下方的 API 文档。
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
自定义范围-----设置 range 属性指定日历的显示范围。开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月。
Attributes
（10）Image 图片
基础用法------可通过fit确定图片如何适应到容器框，同原生 object-fit。
{{ fit }}
占位内容-------可通过slot = placeholder可自定义占位内容
默认
加载中...
加载失败------通过slot = error可自定义加载失败内容
默认
懒加载---------可通过lazy开启懒加载功能，当图片滚动到可视范围内才会加载。可通过scroll-container来设置滚动容器，若未定义，则为最近一个overflow值为auto或scroll的父元素。
大图预览------------可通过 previewSrcList 开启预览大图的功能。
Attributes
（11）Backtop 回到顶部
基础用法
（12）InfiniteScroll 无限滚动
基础用法-------在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。
- {{ i }}
禁用加载
- {{ i }}
加载中...
没有更多了
（13）Drawer 抽屉
基本用法---------需要设置 visible 属性，它的类型是 boolean,当为 true 时显示 Drawer。Drawer 分为两个部分：title 和 body，title 需要具名为 title 的 slot, 也可以通过 title 属性来定义，默认值为空。需要注意的是, Drawer 默认是从右往左打开, 当然可以设置对应的 direction, 详细请参考 direction 用法 最后，本例还展示了 before-close 的用法
从左往右开
从右往左开
从上往下开
从下往上开
点我打开
我来啦!
自定义内容
打开嵌套表格的 Drawer
打开嵌套 Form 的 Drawer
多层嵌套-------如果你需要嵌套多层 Drawer 请一定要设置 append-to-body 属性为 true
点我打开
打开里面的!
_(:зゝ∠)_
Drawer 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。
Drawer 提供一个 destroyOnClose API, 用来在关闭 Drawer 时销毁子组件内容, 例如清理表单内的状态, 在必要时可以将该属性设置为 true 用来保证初始状态的一致性
如果 visible 属性绑定的变量位于 Vuex 的 store 内，那么 .sync 不会正常工作。此时需要去除 .sync 修饰符，同时监听 Drawer 的 open 和 close 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 visible 属性绑定的变量的值。
Drawer Attributes
Drawer Slot
至此，组件element全部完毕！！！
