TimeAxis 时间轴，用于展现时间流信息。 TimeAxis 提供了 wui-timeaxis 和 wui-timeaxis-node 两个组件来进行布局。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

仅右侧展示内容

通过 background 属性设置时间轴背景色，padding 属性设置时间轴内边距，lineColor 属性设置该节点线条颜色，lined 属性设置是否显示该节点线条。

<wui-timeaxis background="#fff" :padding="['32rpx','16rpx']">
<wui-timeaxis-node :lineColor="index<3?item.activeColor:'#ccc'" :lined="index!==processData.length-1"
                   v-for="(item,index) in processData" :key="index">
  <view class="wui-node" :style="{borderColor:item.activeColor}">
  </view>
  <template v-slot:right>
    <view class="wui-process__node" :class="{'wui-node__pb':index!==processData.length-1}">
      <view class="wui-title" :style="{color:index===3?item.activeColor:'#181818'}">{{item.title}}
      </view>
      <view class="wui-descr" v-if="item.descr">{{item.descr}}</view>
      <view class="wui-time">{{item.time}}</view>
    </view>
  </template>
</wui-timeaxis-node>
</wui-timeaxis>

  const processData = ref<any>([
    {
      title: '标题',
      time: '07:00',
      descr: '说明说明说明说明说明说明说明说明说明说明说明说明',
      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: '说明说明说明说明说明说明说明说明说明说明说明说明',
    },
  ]);

/* 时间轴内部自定义内容样式 */
.wui-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;
}

.wui-process__node {
  padding-left: 20rpx;
}

.wui-node__pb {
  padding-bottom: 48rpx;
}

.wui-title {
  font-size: 34rpx;
  line-height: 34rpx;
  font-weight: bold;
}

.wui-descr {
  font-size: 28rpx;
  padding-top: 12rpx;
  color: #7F7F7F;
}

.wui-time {
  font-size: 24rpx;
  color: #B2B2B2;
  padding-top: 12rpx;
}

左右展示内容

通过 leftWidth 属性设置左侧内容宽度（默认为0），左侧内容写在插槽 slot:left 中。

<wui-timeaxis leftWidth="200" background="#fff" :padding="['32rpx','16rpx']">
<wui-timeaxis-node :lineColor="index<3?item.activeColor:'#ccc'" :lined="index!==processData.length-1"
                   v-for="(item,index) in processData" :key="index">
  <view class="wui-node" :style="{borderColor:item.activeColor}">
  </view>
  <template v-slot:left>
    <view class="wui-time__left">{{item.time}}</view>
  </template>
  <template v-slot:right>
    <view class="wui-process__node" :class="{'wui-node__pbtm':index!==processData.length-1}">
      <view class="wui-title" :style="{color:index===3?item.activeColor:'#181818'}">{{item.title}}
      </view>
      <view class="wui-descr" v-if="item.descr">{{item.descr}}</view>
    </view>
  </template>
</wui-timeaxis-node>
</wui-timeaxis>

  const processData = ref<any>([
    {
      title: '标题',
      time: '07:00',
      descr: '说明说明说明说明说明说明说明说明说明说明说明说明',
      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: '说明说明说明说明说明说明说明说明说明说明说明说明',
    },
  ]);

.wui-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;
}

.wui-process__node {
  padding-left: 20rpx;
}

.wui-title {
  font-size: 34rpx;
  line-height: 34rpx;
  font-weight: bold;
}

.wui-descr {
  font-size: 28rpx;
  padding-top: 12rpx;
  color: #7F7F7F;
}

.wui-time__left {
  font-size: 36rpx;
  line-height: 36rpx;
  text-align: right;
  padding-right: 20rpx;
}

.wui-node__pbtm {
  padding-bottom: 88rpx;
}

节点设置icon

默认插槽 default 即为设置节点使用，节点样式需自定义。

<wui-timeaxis background="#fff" :padding="['32rpx','16rpx']">
<wui-timeaxis-node>
  <view class="wui-node__box" style="background: #FF2B2B;">
    <wui-icon name="check" :size="28" color="#fff"></wui-icon>
  </view>
  <template v-slot:right>
    <view class="wui-custom__wrap">
      <view class="wui-custom__innder">自定义内容</view>
    </view>
  </template>
</wui-timeaxis-node>
<wui-timeaxis-node :lined="false">
  <view class="wui-node__box" style="background: #09BE4F;">
    <wui-icon name="face" :size="28" color="#fff"></wui-icon>
  </view>
  <template v-slot:right>
    <view class="wui-custom__wrap">
      <view class="wui-custom__innder">自定义内容</view>
    </view>
  </template>
</wui-timeaxis-node>
</wui-timeaxis>

.wui-custom__wrap {
	padding: 20rpx;
	box-sizing: border-box;
}

.wui-custom__innder {
	height: 200rpx;
	border-radius: 0 16rpx 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F1F4FA;
	color: #FFB703;
}

.wui-node__box {
	width: 36rpx;
	height: 36rpx;
	background: #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

Slots

wui-timeaxis 组件

插槽名称	说明
default	时间轴内容，由多个时间轴节点组件组成

wui-timeaxis-node 组件

插槽名称	说明
default	时间轴节点
left	时间轴节点左侧内容，需设置 wui-timeaxis 组件属性 leftWidth 值
right	时间轴节点右侧内容

Props

wui-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倍

wui-timeaxis-node 组件

属性名	类型	说明	默认值	平台差异说明
lined	Boolean	是否显示该节点线条	true	-
lineColor	String	该节点线条颜色	#ccc	-

Events

事件名	说明	回调参数
-	-	-