Timeline 时间轴
代码演示
手术预约成功
执行中
完成
基础用法
时间线有两种对齐方式(左对齐、右对齐), 默认position = left。
查看代码 < />
<template>
<w-radio-group v-model="position" class="align-radio">
<w-radio label="left">左侧</w-radio>
<w-radio label="right">右侧</w-radio>
</w-radio-group>
<w-timeline :position="position">
<w-timeline-item time="2018/2/10">手术预约成功</w-timeline-item>
<w-timeline-item time="2018/2/12">执行中</w-timeline-item>
<w-timeline-item time="2018/2/12">完成</w-timeline-item>
</w-timeline>
</template>
<script>
export default {
data () {
return {
position: 'left'
}
}
}
</script>
手术预约成功
执行中
完成
点击操作
为时间结点设置唯一的 index值, 即可实现点击操作, 否则点击事件无效。
查看代码 < />
<template>
<w-timeline @node-actived="handleNodeActived">
<w-timeline-item time="2018/2/10" index="1">手术预约成功</w-timeline-item>
<w-timeline-item time="2018/2/12" index="2">执行中</w-timeline-item>
<w-timeline-item time="2018/2/12" index="3">完成</w-timeline-item>
</w-timeline>
</template>
<script>
export default {
methods: {
handleNodeActived (val) {
alert(`当前被选中的index = ${val}`)
}
}
}
</script>
手术预约成功
执行中
警告
手术异常
颜色含义
蓝色(type = primary): 用于正在进行或默认状态; 绿色(type = success): 用于已完成, 成功状态; 黄色(type = warning): 警告; 红色(type = error): 用于信息异常, 错误。
查看代码 < />
<template>
<w-timeline :position="position">
<w-timeline-item time="2018/2/10" type="success">手术预约成功</w-timeline-item>
<w-timeline-item time="2018/2/12" type="primary">执行中</w-timeline-item>
<w-timeline-item time="2018/2/12" type="warning">警告</w-timeline-item>
<w-timeline-item time="2018/2/12" type="error">手术异常</w-timeline-item>
</w-timeline>
</template>
手术预约成功
执行中
警告
恢复进行
自定义节点
根据不同的场景, 可以通过slot的方式自定义节点, 但为了定位准确需要给出自定义节点的宽度, 否则会以默认值 10px 进行计算, 会出现定位偏差。
查看代码 < />
<template>
<w-timeline>
<w-timeline-item time="2018/2/10" node-size="14px">
<i slot="node" class="w-icon-mark-solid"
style="color: #13CE66; background-color: #fff;"></i>
手术预约成功
</w-timeline-item>
<w-timeline-item time="2018/2/12">执行中</w-timeline-item>
<w-timeline-item time="2018/2/12" node-size="16px">
<div slot="node" style="width: 16px; height: 16px; background-color: #E99B00"></div>
警告
</w-timeline-item>
<w-timeline-item time="2018/2/12" node-size="14px">
<i slot="node" class="w-icon-time-solid"
style="color: #0F49ED; background-color: #fff;"></i>
恢复进行
</w-timeline-item>
</w-timeline>
</template>手术预约成功
执行医生: 李力群 具体时刻: 13:00:11
执行中
执行医生: 李力群 具体时刻: 13:00:11
完成
执行医生: 李力群 具体时刻: 13:00:11
出院
执行医生: 李力群 具体时刻: 13:00:11
自定义时间戳
通过time字段可以传入自定义的时间戳, title字段可以传入节点标题, 其他内容可以通过slot的方式传入。
查看代码 < />
<template>
<w-timeline timePosition="top">
<w-timeline-item time="2018/2/10" title="手术预约成功">
<div class="card-wrapper">
<span>执行医生: 李力群</span>
<span>具体时刻: 13:00:11</span>
</div>
</w-timeline-item>
<w-timeline-item time="2018/2/12" title="执行中">
<div class="card-wrapper">
<span>执行医生: 李力群</span>
<span>具体时刻: 13:00:11</span>
</div>
</w-timeline-item>
<w-timeline-item time="2018/2/12" title="完成">
<div class="card-wrapper">
<span>执行医生: 李力群</span>
<span>具体时刻: 13:00:11</span>
</div>
</w-timeline-item>
<w-timeline-item time="2018/2/18" title="出院">
<div class="card-wrapper">
<span>执行医生: 李力群</span>
<span>具体时刻: 13:00:11</span>
</div>
</w-timeline-item>
</w-timeline>
</template>API
Timeline Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| position | 时间线的位置 | String | left / right | left |
Timeline-Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| index | 时间节点index(点击操作时必填项, 否则点击无效) | — | — | — | |
| time | 时间戳文本 | String | — | — | |
| title | 标题内容 | String | — | — | |
| type | 节点类型 | String | default / primary /success / warning / error | default | |
| node-size | 节点大小(默认为10px, 用于自定义节点时绝对居中) | String | — | 10px |
Timeline Slot
| name | 说明 | Version |
|---|---|---|
| — | 时间节点内容 |
Timeline-Item Slot
| name | 说明 | Version |
|---|---|---|
| node | 自定义节点 (默认为圆圈) | |
| — | 正文内容 |
Events
| 参数 | 说明 | 回调参数 | Version |
|---|---|---|---|
| node-actived | 点击时间节点时的回调函数(节点必须设置唯一的index值否则无效) | 当前被激活节点的index值 |
贡献者
| 类型 | 参与者 |
|---|---|
| 设计者 | UED视觉组 |
| 维护者 | UED前端组 |