element组件---其他组件
Dialog 对话框
在保留当前页面状态的情况下，告知用户并承载相关操作。
基本用法
Dialog 弹出一个对话框，适合需要定制性更大的场景。
点击打开 Dialog
这是一段信息
自定义内容
Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。
打开嵌套表格的 Dialog
打开嵌套表单的 Dialog
嵌套的 Dialog
如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。
点击打开外层 Dialog
居中布局
标题和底部可水平居中
点击打开 Dialog
需要注意的是内容是默认不居中的
Tooltip 文字提示
常用于展示鼠标 hover 时的提示信息。
基础用法
在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。
上左
上边
上右
左上
左边
左下
右上
右边
右下
下左
下边
下右
主题
Tooltip 组件提供了两个不同的主题：dark和light。
Dark
Light
更多 Content
展示多行文本或者是设置文本内容的格式
多行信息
第二行信息
Top center
高级扩展
除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：
transition 属性可以定制显隐的动画效果，默认为fade-in-linear。 如果需要关闭 tooltip 功能，disabled 属性可以满足这个需求，它接受一个Boolean，设置为true即可。
事实上，这是基于 Vue-popper 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。 当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。
点击{{disabled ? '开启' : '关闭'}} tooltip 功能
Popover 弹出框
基础用法
Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
hover 激活
click 激活
focus 激活
手动激活
嵌套信息
可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。
click 激活
嵌套操作
当然，你还可以嵌套操作，这相比 Dialog 更为轻量：
这是一段内容这是一段内容确定删除吗？
取消
确定
删除
Card 卡片
将信息聚合在卡片容器中展示。
基础用法
包含标题，内容和操作。
卡片名称
操作按钮
{{'列表内容 ' + o }}
简单卡片
卡片可以只有内容区域。
{{'列表内容 ' + o }}
带图片
可配置定义更丰富的内容展示。
好吃的汉堡
操作按钮
卡片阴影
可对阴影的显示进行配置。
总是显示
鼠标悬浮时显示
从不显示
Carousel 走马灯
在有限空间内，循环播放同一类型的图片、文字等内容
基础用法
适用广泛的基础用法
默认 Hover 指示器触发
{{ item }}
Click 指示器触发
{{ item }}
指示器
可以将指示器的显示位置设置在容器外部。
{{ item }}
切换箭头
可以设置切换箭头的显示时机
{{ item }}
卡片化
当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格。
{{ item }}
方向
默认情况下，direction 为 horizontal。通过设置 direction 为 vertical 来让走马灯在垂直方向上显示。
{{ item }}
Collapse 折叠面板
通过折叠面板收纳内容区域
基础用法
可同时展开多个面板，面板之间不影响
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
手风琴效果
每次只能展开一个面板。
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
自定义面板标题
除了可以通过 title 属性以外，还可以通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。
一致性 Consistency
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
Timeline 时间线
可视化地呈现时间流信息。
基础用法
Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。
排序：
倒序
正序
{{activity.content}}
定义节点样式
可根据实际场景⾃定义节点尺⼨、颜⾊，或直接使⽤图标。
{{activity.content}}
定义时间戳
当内容在垂直⽅向上过⾼时，可将时间戳置于内容之上。
更新 Github 模板
王小虎 提交于 2018/4/12 20:46
更新 Github 模板
王小虎 提交于 2018/4/3 20:46
更新 Github 模板
王小虎 提交于 2018/4/2 20:46
Divider 分割线
区隔内容的分割线。
基础用法
对不同章节的文本段落进行分割。
青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪
设置文案
可以在分割线上自定义文案内容。
头上一片晴天，心中一个想念
少年包青天
饿了别叫妈, 叫饿了么
阿里云
垂直分割
雨纷纷
Calendar calendar
显示日期
基本
自定义内容
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
自定义范围
Image 图片
图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等
基础用法
{{ fit }}
占位内容
默认
加载中...
加载失败
默认
懒加载
大图预览
Backtop 回到顶部
返回页面顶部的操作按钮
基础用法
滑动页面即可看到右下方的按钮。
Scroll down to see the bottom-right button.
自定义显示内容
显示区域被固定为 40px * 40px 的区域, 其中的内容可支持自定义。
Scroll down to see the bottom-right button.
UP
InfiniteScroll 无限滚动
滚动至底部时，加载更多数据。
基础用法
在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。
- {{ i }}
禁用加载
- {{ i }}
加载中...
没有更多了
Drawer 抽屉
有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验.
基本用法
呼出一个临时的侧边栏, 可以从多个方向呼出
从左往右开
从右往左开
从上往下开
从下往上开
点我打开
我来啦!
自定义内容
和 Dialog 组件一样, Drawer 同样可以在其内部嵌套各种丰富的操作
打开嵌套表格的 Drawer
打开嵌套 Form 的 Drawer
多层嵌套
Drawer 组件也拥有多层嵌套的方法
点我打开
打开里面的!
_(:зゝ∠)_