element组件---Others其他部分组件
Dialog 对话框
Tooltip 文字提示
Popover 弹出框
Card 卡片
Carousel 走马灯
Collapse 折叠面板
Timeline 时间线
Divider 分割线
Calendar calendar
Image 图片
Backtop 回到顶部
InfiniteScroll 无限滚动
Drawer 抽屉
Dialog 对话框
在保留当前页面状态的情况下，告知用户并承载相关操作。
基本用法
Dialog 弹出一个对话框，适合需要定制性更大的场景。
需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。
点击打开 Dialog
这是一段信息
before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。
自定义内容
Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。
打开嵌套表格的 Dialog
打开嵌套表单的 Dialog
嵌套的 Dialog
如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。
正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确
点击打开外层 Dialog
居中布局
标题和底部可水平居中
将center设置为true即可使标题和底部居中。center仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。
el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog
需要注意的是内容是默认不居中的
Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。
如果 visible 属性绑定的变量位于 Vuex 的 store 内，那么 .sync 不会正常工作。此时需要去除 .sync 修饰符，同时监听 Dialog 的 open 和 close 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 visible 属性绑定的变量的值。
Tooltip 文字提示
常用于展示鼠标 hover 时的提示信息。
基础用法
在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。
使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如placement=“left-end”，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。
上左
上边
上右
左上
左边
左下
右上
右边
右下
下左
下边
下右
主题
Tooltip 组件提供了两个不同的主题：dark和light。
通过设置effect属性来改变主题，默认为dark。
Dark
Light
更多 Content
展示多行文本或者是设置文本内容的格式
用具名 slot 分发content，替代tooltip中的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 元素外层添加一层包裹元素。
Popover 弹出框
基础用法
Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。对于触发 Popover 的元素，有两种写法：使用 slot=“reference” 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。
hover 激活
click 激活
focus 激活
手动激活
嵌套信息
可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。
利用分发取代content属性
click 激活
嵌套操作
当然，你还可以嵌套操作，这相比 Dialog 更为轻量：
这是一段内容这是一段内容确定删除吗？
取消
确定
删除
Card 卡片
将信息聚合在卡片容器中展示。
基础用法
包含标题，内容和操作。
Card 组件包括header和body部分，header部分需要有显式具名 slot 分发，同时也是可选的。
卡片名称
操作按钮
{{'列表内容 ' + o }}
简单卡片
卡片可以只有内容区域。
{{'列表内容 ' + o }}
带图片
可配置定义更丰富的内容展示。
配置body-style属性来自定义body部分的style，我们还使用了布局组件。
好吃的汉堡
操作按钮
卡片阴影
可对阴影的显示进行配置。
通过shadow属性设置卡片阴影出现的时机：always、hover或never。
总是显示
鼠标悬浮时显示
从不显示
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 }}
卡片化
当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格
将type属性设置为card即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。
{{ item }}
方向
默认情况下，direction 为 horizontal。通过设置 direction 为 vertical 来让走马灯在垂直方向上显示。
{{ item }}
Collapse 折叠面板
通过折叠面板收纳内容区域
基础用法
可同时展开多个面板，面板之间不影响
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
手风琴效果
每次只能展开一个面板
通过 accordion 属性来设置是否以手风琴模式显示。
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
自定义面板标题
除了可以通过 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
显示日期
基本
设置 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 属性指定日历的显示范围。开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月。
Image 图片
图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等
基础用法
可通过fit确定图片如何适应到容器框，同原生 object-fit。
{{ fit }}
占位内容
可通过slot = placeholder可自定义占位内容
默认
加载中...
加载失败
可通过slot = error可自定义加载失败内容
默认
懒加载
可通过lazy开启懒加载功能，当图片滚动到可视范围内才会加载。可通过scroll-container来设置滚动容器，若未定义，则为最近一个overflow值为auto或scroll的父元素。
大图预览
可通过 previewSrcList 开启预览大图的功能。
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 上带来不一样的体验.
基本用法
呼出一个临时的侧边栏, 可以从多个方向呼出
需要设置 visible 属性，它的类型是 boolean,当为 true 时显示 Drawer。Drawer 分为两个部分：title 和 body，title 需要具名为 title 的 slot, 也可以通过 title 属性来定义，默认值为空。需要注意的是, Drawer 默认是从右往左打开, 当然可以设置对应的 direction, 详细请参考 direction 用法 最后，本例还展示了 before-close 的用法
从左往右开
从右往左开
从上往下开
从下往上开
点我打开
我来啦!
自定义内容
和 Dialog 组件一样, Drawer 同样可以在其内部嵌套各种丰富的操作
打开嵌套表格的 Drawer
打开嵌套 Form 的 Drawer
多层嵌套
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 属性绑定的变量的值。
以上是element组件的Others其他组件！