更新记录

1.0.0（2023-05-03） 下载此版本

完成

平台兼容性

uni.scss(按项目实际颜色)

$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
$uni-color-info: #909399; //默认色
$uni-color-disabled: #c0c4cc; //禁止色
$uni-color-default: #dcdfe6; 

依赖yll1024335892-ayi-icon组件

• yll1024335892-ayi-icon

举例

基础用法

<template>
    <ayi-timeline>
        <ayi-timeline-item v-for="(item, index) in list" :key="index" :timestamp="item.timestamp" :show-line="item.showLine" :content="item.content" :icon="item.icon" :color="item.color">
        </ayi-timeline-item>
    </ayi-timeline>
</template>

<script lang="ts" setup>
    import { ref } from "vue";
    const list = ref([
        {
            timestamp: "昨天",
            content: "开通账号，赠送500",
        },
        {
            timestamp: "今天",
            content: "成功转入9000",
            color: "#409EFF",
        },
        {
            timestamp: "11-06",
            content: "开始计算收益",
            icon: "toast-waiting",
            color: "#E6A23C",
        },
        {
            timestamp: "11-09",
            content: "收益到账",
            showLine: true,
            icon: "check-border",
            color: "#67C23A",
        },
    ]);
</script>

自定义内容

<template>
    <ayi-timeline>
        <ayi-timeline-item v-for="(item, index) in list" :key="index" :timestamp="item.timestamp" :show-line="item.showLine" :content="item.content" :icon="item.icon" :color="item.color">
            <template #content>
                <ayi-tag>{{ item.content }}</ayi-tag>
            </template>
        </ayi-timeline-item>
    </ayi-timeline>
</template>

<script lang="ts" setup>
    import { ref } from "vue";
    const list = ref([
        {
            timestamp: "昨天",
            content: "开通账号，赠送500",
        },
        {
            timestamp: "今天",
            content: "成功转入9000",
            color: "#409EFF",
        },
        {
            timestamp: "11-06",
            content: "开始计算收益",
            icon: "toast-waiting",
            color: "#E6A23C",
        },
        {
            timestamp: "11-09",
            content: "收益到账",
            showLine: true,
            icon: "check-border",
            color: "#67C23A",
        },
    ]);
</script>