VUE篇之时间切片案例

效果如图

思路：

1.首先是时间的切片渲染圆圈和线

2.下一行渲染文本，这里为了让文本居中，转做了一层poastion的定位

<template>
    <div class="root">
        <!-- <textarea v-autosize></textarea> -->
        <div class="box">
            <div v-for="(item, index) in list" :key="index" class="list">
                <el-tooltip class="item" effect="dark" :content="item.start" placement="top">
                    <div :class="['point', { 'small': index % 4 != 0 }, { 'date': date == item.start }]"> </div>
                </el-tooltip>
                <div v-show="index != list.length - 1" class="line"></div>
            </div>
        </div>
        <div class="text">
            <span v-for="(item, index) in list" :key="index" class="word"
                :style="`--width:${index % 4 == 0 ? '22px' : '18px'}`">
                <span> {{ index == list.length - 1 ? item.start : (index % 8 == 0 ? item.start : '') }}</span>
            </span>
        </div>
    </div>
</template>
<script>
import autosize from 'v-autosize';
import moment from 'moment';
export default {
    directives: {
        autosize,
    },
    data() {
        return {
            dialogVisible: false,
            value: '',
            num: 24 * 60 / 15,
            form: {
                start: '2025-01-06 00:00:00',
                end: '2025-01-06 23:59:59'
            },
            list: [],
            date: '08:00'//后端返回值
        }
    },
    mounted() {
        this.time();
    },
    methods: {
        time() {
            const start = moment(this.form.start);
            const end = moment(this.form.end);
            const diff = 1440;
            console.log('时间差', diff);
            const step = Math.floor(diff / this.num);
            console.log('步长', step);
            const list = [];
            for (let index = 0; index < this.num; index++) {
                const s = start.clone().add(index *
                    step, 'minute').format('HH:mm'); const e = start.clone().add((index + 1) *
                        step, 'minute').format('HH:mm'); list.push({ start: s, end: e, });
            }
            this.list = list;
            console.log('时间段', list)
        }
    }
} </script>
<style lang="scss">
.el-textarea__inner {
    height: auto;
}

.root {
    background-color: beige;
    padding: 50px;
    box-sizing: border-box;
}

.box {
    width: 100%;
    box-sizing: border-box;
    display: flex;

    .list {
        display: flex;
        align-items: center;
        height: 12px;

        .point {
            width: 12px;
            height: 12px;
            background-color: white;
            border: 1px solid blue;
            box-sizing: border-box;
            border-radius: 50%;
            cursor: pointer;

            &:hover {
                background-color: pink;
                border-color: pink;
            }
        }

        .small {
            width: 8px;
            height: 8px;
        }

        .date {
            background-color: red;
            border-color: red;

            &:hover {
                background-color: red;
                border-color: red;
            }
        }

        .line {
            width: 10px;
            height: 2px;
            background-color: blue;
        }
    }
}

.text {
    display: flex;
    flex-direction: row;

    .word {
        width: var(--width);
        position: relative;

        span {
            position: absolute;
            left: -50%;
            top: 0;
        }
    }
}
</style>