FormaUI文档

Appearance

引入组件 ​

局部引入

ts
// parent.vue
const FTimeline = defineAsyncComponent(() => import('@/components/formaui/f-timeline/f-timeline.vue'))
const FTimelineItem = defineAsyncComponent(() => import('@/components/formaui/f-timeline-item/f-timeline-item.vue'))

基础用法 ​

html
<f-timeline>
  <f-timeline-item backgroundColor="transparent">
    <template v-slot:node>
      <view class="tui-node">
        <tui-icon name="check" color="#fff" :size="14" bold></tui-icon>
      </view>
    </template>

    <template v-slot:content>
      <view>
        <view class="tui-order-title">已签收</view>
        <view class="tui-order-desc">您的订单已由本人签收。感谢您在商城购物，欢迎再次光临。</view>
        <view class="tui-order-time tui-gray">2019-05-01 18:48:26</view>
      </view>
    </template>
  </f-timeline-item>
  <f-timeline-item backgroundColor="transparent">
    <template v-slot:node>
      <view class="tui-node">
        <tui-icon name="people" color="#fff" :size="13"></tui-icon>
      </view>
    </template>
    <template v-slot:content>
      <view class="tui-order-title tui-gray">派送中</view>
      <view class="tui-order-desc tui-light-gray">
        您的订单正在配送途中（快递员：echo.，电话：
        <text class="tui-primary">13822448855</text>
        ），请您耐心等待。
      </view>
      <view class="tui-order-time tui-gray">2019-05-01 16:29:07</view>
    </template>
  </f-timeline-item>
</f-timeline>

timeline 插槽 ​

名称说明
default显示内容

timeline 属性 ​

名称类型说明默认值
----

timeline 事件 ​

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

timeline 方法 ​

方法名说明传入参数
---

timelineItem 插槽 ​

名称说明
content时间轴 item 内容插槽，展示该节点的内容
node时间轴 item 节点插槽

timelineItem 属性 ​

名称类型说明默认值
bgColorstring时间轴 item 节点背景颜色transparent

timelineItem 事件 ​

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

timelineItem 方法 ​

方法名说明传入参数
---