TimeAxis 时间轴

使用 fui-timeaxis 和 fui-timeaxis-node 组织时间节点及左右两侧内容。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 时间轴 -->
<fui-timeaxis :leftWidth="120">
  <!-- 时间轴节点 -->
  <fui-timeaxis-node>
    <template #left><text>今天</text></template>
    <text>●</text>
    <template #right><text>已完成</text></template>
  </fui-timeaxis-node>
</fui-timeaxis>

时间轴属性

属性	类型	说明	官网默认值
padding	Array	容器内边距，按上、右、下、左顺序设置	[]
background	String	容器背景色	transparent
leftWidth	Number / String	左侧内容宽度，单位 rpx；大于 0 时显示	0
width	Number / String	节点区域宽度，单位 rpx	48
lineWidth	Number / String	时间轴线宽，单位 px	nvue 0.5，其余 1

节点属性

属性	类型	说明	官网默认值
lined	Boolean	是否显示该节点下方线条	true
lineColor	String	线条颜色	#ccc

插槽

插槽	说明
default	时间轴内放置节点；节点内放置节点内容
left	节点左侧内容，需设置时间轴 leftWidth
right	节点右侧内容

平台说明

非 nvue 平台的线宽样式会缩放 0.5 倍。组件未声明自定义事件。

事件

事件	说明	回调参数
—	无自定义事件	—