css3仿TimeLine

最新推荐文章于 2024-04-06 19:41:48 发布

空杉心雨后

最新推荐文章于 2024-04-06 19:41:48 发布

阅读量310

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_33603809/article/details/90749733

js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用Vue和ElementUI自定义一个横向的时间轴组件，通过实例代码展示了组件的结构、样式和交互效果，适用于展示项目流程或时间线。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在element ui没有看到timeline有横向的属性，于是便自己动手写了一个，效果图如下：
在这里插入图片描述
用的是vue：

// template
<template>
    <div style="width: 100%;">
        <ul class="check-list absolute-center">
            <template v-for="(item, index) in contentList">
                <li :key="item.time" :class="(index === contentList.length - 1 ) ? 'current' : '' " :style="`margin-right: ${32 / contentList.length}%`">
                    <span>{{item.label}}</span>
                    <time>{{item.time}}</time>
                </li>
                <li :style="`margin-right: ${32 / contentList.length}%`"></li>
                <li :style="`margin-right: ${32 / contentList.length}%`"></li>
            </template>
        </ul>
    </div>
</template>

css代码：

<style>
    .absolute-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .check-list {
        width: 98%;
        margin: 24% 0 5% 0;
        position: relative;
        border-bottom: 2px solid #000;
        padding-left: 0;
    }
    .check-list li {
        width: 1px;
        height: 4px;
        float: left;
        list-style: none;
        padding: 0;
        position: relative;
        bottom: 4px;
        background: #000;
    }

    .check-list li:nth-child(3n-2)::before {
        content: '';
        position: absolute;
        width: 16px;
        height: 10px;
        background: #008808;
        top: -22px;
        left: -7px;
        border-radius: 50% / 90% 90% 0 0;
        box-shadow: 0 -1px 2px #000;
    }

    .check-list li:nth-child(3n-2)::after {
        content: '';
        position: absolute;
        top: -12px;
        left: -7px;
        border: 8px solid transparent;
        border-top: 15px solid #008808;
    }

    .check-list li.current::before {
        background-color: red;
    }
    .check-list li.current::after {
        border-top-color: red;
    }
    /* 箭头 */
    .check-list:after {
        content: '';
        position: absolute;
        display: block;
        right: -10px;
        bottom: -6px;
        border: 5px solid transparent;
        border-left: 10px solid #000;
    }
    .check-list li span {
        font-size: 14px;
        position: absolute;
        bottom: 30px;
        left: -6px;
    }
    .check-list li time {
        font-size: 12px;
        position: relative;
        top: .2rem;
        transform: translate(-50%, 67%) rotate(-20deg);
        display: inline-block;
    }
</style>

JS：

<script>
    export default {
        props: {
            contentList: {
                type: Array,
                default: function _default() {
                    return [{
                        label: '需求调研中',
                        time: '2019/05/01'
                    }, {
                        label: '需求评审中',
                        time: '2019/06/02'
                    }, {
                        label: '需求对数中',
                        time: '2019/05/03'
                    }, {
                        label: '开发内部讨论实现方案',
                        time: '2019/05/04'
                    }, {
                        label: '开发排期',
                        time: '2019/05/05'
                    }, {
                        label: '开发中',
                        time: '2019/05/06'
                    },{
                        label: '开发完成自测中',
                        time: '2019/05/05'
                    }, {
                        label: '自测完成',
                        time: '2019/05/06'
                    },{
                        label: '提测',
                        time: '2019/05/05'
                    }, {
                        label: '测试中',
                        time: '2019/05/06'
                    },{
                        label: '测试给你提了bug',
                        time: '2019/05/01'
                    }, {
                        label: 'fix bug',
                        time: '2019/06/02'
                    },{
                        label: '上线',
                        time: '2019/05/06'
                    }, {
                        label: '维护',
                        time: '2019/05/07',
                        class: 'current'
                    }];
                }
            }
        }
    }
</script>

原生JS实现的代码放在了https://codepen.io/Moly/pen/WBPRWd

有一个优化点可以考虑：在css里，用check-list的margin-top来控制高度的，能不能做成根据label的值来自适应呢？