TimeAxis 时间轴 
概述
TimeAxis 时间轴，用于展现时间流信息。
TimeAxis 提供了 fui-timeaxis 和 fui-timeaxis-node 两个组件来进行布局。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiTimeaxis from "@/components/firstui/fui-timeaxis/fui-timeaxis.vue"
import fuiTimeaxisNode from "@/components/firstui/fui-timeaxis-node/fui-timeaxis-node.vue"
export default {
components:{
fuiTimeaxis,
fuiTimeaxisNode
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。
仅右侧展示内容
通过 background 属性设置时间轴背景色，padding 属性设置时间轴内边距，lineColor 属性设置该节点线条颜色，lined 属性设置是否显示该节点线条。
<fui-timeaxis background="#fff" :padding="['32rpx','16rpx']">
<fui-timeaxis-node :lineColor="index<3?item.activeColor:'#ccc'" :lined="index!==processData.length-1"
v-for="(item,index) in processData" :key="index">
<view class="fui-node" :style="{borderColor:item.activeColor}">
</view>
<template v-slot:right>
<view class="fui-process__node" :class="{'fui-node__pb':index!==processData.length-1}">
<view class="fui-title" :style="{color:index===3?item.activeColor:'#181818'}">{{item.title}}
</view>
<view class="fui-descr" v-if="item.descr">{{item.descr}}</view>
<view class="fui-time">{{item.time}}</view>
</view>
</template>
</fui-timeaxis-node>
</fui-timeaxis>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
data() {
return {
processData: [{
title: '入场',
time: '07:00',
activeColor: '#465CFF'
}, {
title: '主场演讲',
time: '08:00',
descr: '马云（阿里巴巴）',
activeColor: '#465CFF'
}, {
title: '世界互联经济',
time: '08:30',
descr: '马云（阿里巴巴）',
activeColor: '#465CFF'
}, {
title: '打造自己的互联帝国',
time: '09:30',
descr: '马化腾（腾讯）',
activeColor: '#FFB703'
}, {
title: '散场',
time: '11:00',
descr: '请带走垃圾，有序散场。'
}]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 时间轴内部自定义内容样式 */
.fui-node {
width: 32rpx;
height: 32rpx;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #ccc;
box-sizing: border-box;
}
.fui-process__node {
padding-left: 20rpx;
}
.fui-node__pb {
padding-bottom: 48rpx;
}
.fui-title {
font-size: 34rpx;
line-height: 34rpx;
font-weight: bold;
}
.fui-descr {
font-size: 28rpx;
padding-top: 12rpx;
color: #7F7F7F;
}
.fui-time {
font-size: 24rpx;
color: #B2B2B2;
padding-top: 12rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
左右展示内容
通过 leftWidth 属性设置左侧内容宽度（默认为0），左侧内容写在插槽 slot:left 中。
<fui-timeaxis leftWidth="200" background="#fff" :padding="['32rpx','16rpx']">
<fui-timeaxis-node :lineColor="index<3?item.activeColor:'#ccc'" :lined="index!==processData.length-1"
v-for="(item,index) in processData" :key="index">
<view class="fui-node" :style="{borderColor:item.activeColor}">
</view>
<template v-slot:left>
<view class="fui-time__left">{{item.time}}</view>
</template>
<template v-slot:right>
<view class="fui-process__node" :class="{'fui-node__pbtm':index!==processData.length-1}">
<view class="fui-title" :style="{color:index===3?item.activeColor:'#181818'}">{{item.title}}
</view>
<view class="fui-descr" v-if="item.descr">{{item.descr}}</view>
</view>
</template>
</fui-timeaxis-node>
</fui-timeaxis>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
data() {
return {
processData: [{
title: '入场',
time: '07:00',
activeColor: '#465CFF'
}, {
title: '主场演讲',
time: '08:00',
descr: '马云（阿里巴巴）',
activeColor: '#465CFF'
}, {
title: '世界互联经济',
time: '08:30',
descr: '马云（阿里巴巴）',
activeColor: '#465CFF'
}, {
title: '打造自己的互联帝国',
time: '09:30',
descr: '马化腾（腾讯）',
activeColor: '#FFB703'
}, {
title: '散场',
time: '11:00',
descr: '请带走垃圾，有序散场。'
}]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.fui-node {
width: 32rpx;
height: 32rpx;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #ccc;
box-sizing: border-box;
}
.fui-process__node {
padding-left: 20rpx;
}
.fui-title {
font-size: 34rpx;
line-height: 34rpx;
font-weight: bold;
}
.fui-descr {
font-size: 28rpx;
padding-top: 12rpx;
color: #7F7F7F;
}
.fui-time__left {
font-size: 36rpx;
line-height: 36rpx;
text-align: right;
padding-right: 20rpx;
}
.fui-node__pbtm {
padding-bottom: 88rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
节点设置icon
默认插槽 default 即为设置节点使用，节点样式需自定义。
<fui-timeaxis background="#fff" :padding="['32rpx','16rpx']">
<fui-timeaxis-node>
<view class="fui-node__box" style="background: #FF2B2B;">
<fui-icon name="check" :size="28" color="#fff"></fui-icon>
</view>
<template v-slot:right>
<view class="fui-custom__wrap">
<view class="fui-custom__innder">自定义内容</view>
</view>
</template>
</fui-timeaxis-node>
<fui-timeaxis-node :lined="false">
<view class="fui-node__box" style="background: #09BE4F;">
<fui-icon name="face" :size="28" color="#fff"></fui-icon>
</view>
<template v-slot:right>
<view class="fui-custom__wrap">
<view class="fui-custom__innder">自定义内容</view>
</view>
</template>
</fui-timeaxis-node>
</fui-timeaxis>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.fui-custom__wrap {
padding: 20rpx;
box-sizing: border-box;
}
.fui-custom__innder {
height: 200rpx;
border-radius: 0 16rpx 16rpx;
display: flex;
align-items: center;
justify-content: center;
background: #F1F4FA;
color: #FFB703;
}
.fui-node__box {
width: 36rpx;
height: 36rpx;
background: #ccc;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Slots
# fui-timeaxis 组件
| 插槽名称 | 说明 |
|---|---|
| default | 时间轴内容，由多个时间轴节点组件组成 |
# fui-timeaxis-node 组件
| 插槽名称 | 说明 |
|---|---|
| default | 时间轴节点 |
| left | 时间轴节点左侧内容，需设置 fui-timeaxis 组件属性 leftWidth 值 |
| right | 时间轴节点右侧内容 |
# Props
# fui-timeaxis 组件
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| padding | Array | 时间轴内边距，[上,右,下,左]，可简写为[上,右] | [ ] | - |
| background | String | 时间轴背景色 | transparent | - |
| leftWidth | Number, String | 时间轴左侧内容宽度，设置大于0数值时显示，单位rpx | 0 | - |
| width | Number, String | 时间轴节点宽度，单位rpx | 48 | - |
| lineWidth | Number, String | 时间轴线条宽度，单位px | Nvue：0.5，非Nvue：1 | 非Nvue端宽度默认缩放0.5倍 |
# fui-timeaxis-node 组件
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| lined | Boolean | 是否显示该节点线条 | true | - |
| lineColor | String | 该节点线条颜色 | #ccc | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| - | - | - |
示例预览
# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。