最新專案的一個時間軸選中樣式，磨了我很久，剛開始想的是找網上的外掛，但是發現沒有，

先給大家看一下我要完成的樣式

就是圖片下方的時間軸，要根據上面時間的選擇範圍變化，發現網上沒有，於是自己和同事一起手寫了一個。

先上程式碼

<template>
    <div class="drag-wrep">
        <ul class="list">
            <li class="time start" ref="Start"></li>
            <li
                v-for
 
="(item, index) in endWeek - startWeek"
                :key="index + 'px'"
                class="time"
                :style="'left:' + (startInit + 17 * item) + 'px'"
            ></li>
            <li class="time end" ref="End"></li>
            <li class="item-li" v-for="(item, index) in 53"
 
 :key="index"></li>
        </ul>
        <ul class="list list-month">
            <li
                :class="{
                    'month-start': day < 10,
                    'month-center': day >= 10 && day <= 20,
                    'month-end': day > 20
                }"
 

                class="item-month"
                v-for="item in month"
                :key="item.id"
            >
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>

<script>
const initMonth = [
    {
        name: "1月",
        id: 1
    },
    {
        name: "2月",
        id: 2
    },
    {
        name: "3月",
        id: 3
    },
    {
        name: "4月",
        id: 4
    },
    {
        name: "5月",
        id: 5
    },
    {
        name: "6月",
        id: 6
    },
    {
        name: "7月",
        id: 7
    },
    {
        name: "8月",
        id: 8
    },
    {
        name: "9月",
        id: 9
    },
    {
        name: "10月",
        id: 10
    },
    {
        name: "11月",
        id: 11
    },
    {
        name: "12月",
        id: 12
    }
];
export default {
    props: {
        daterange: {
            type: [Number, String, Array, Object],
            default: () => [
                parseInt(new Date("2020-09-30T16:00:00.000Z").valueOf()),
                parseInt(new Date("2020-10-30T16:00:00.000Z").valueOf())
            ]
        }
    },
    data() {
        return {
            startInit: 0, // 左邊的初始位置
            startTime: 0,
            endTime: 0,
            startWeek: 0,
            endWeek: 0,

            month: [],
            day: new Date().getDate()
        };
    },
    created() {
        this.dealTimeAxis();
    },
    methods: {
        dealTimeAxis() {
            // 處理時間軸
            let month = new Date().getMonth() + 1;
            let year = new Date().getFullYear();
            let newArr = initMonth.filter(item => item.id <= month);
            if (month != 12) {
                newArr[0].name = `${year}年1月`;
            }
            let oldArr = [];
            for (let i = month + 1; i <= 12; i++) {
                oldArr.push({
                    name: `${i}月`,
                    id: i
                });
            }
            this.month = oldArr.concat(newArr);
        },
        dealStartTime(val) {
            // 處理開始時間
            this.startTime = parseInt(
                new Date().valueOf() - new Date(val).valueOf()
            );
            this.startWeek =
                53 - Math.ceil(this.startTime / (24 * 60 * 60 * 1000) / 7);
            this.startInit = this.startWeek * 17;
            this.$refs.Start.style.left = this.startInit + "px";
        },
        dealEndTime(val) {
            this.endTime = parseInt(
                new Date().valueOf() - new Date(val).valueOf()
            );
            this.endWeek =
                53 - Math.ceil(this.endTime / (24 * 60 * 60 * 1000) / 7);
            this.$refs.End.style.left = this.endWeek * 17 + "px";
        }
    }
};
</script>

<style lang="scss" scoped>
.drag-wrep {
    margin-top: 100px;
    width: 100%;
    height: 100px;
    // background-image: linear-gradient(to bottom right, red, yellow);
    .list {
        display: flex;
        position: relative;
        .time {
            position: absolute;
            top: 0;
            width: 15px;
            height: 7px;
            background: #bac1cc;
            margin: 1px;
            cursor: pointer;
        }
        .start {
            left: -1700px;
        }
        .end {
            left: -1700px;
        }
        .item-li {
            width: 15px;
            height: 7px;
            background: #e8f0fe;
            margin: 1px;
        }
    }
    .list-month {
        width: 901px;
        justify-content: space-between;
        .item-month {
            width: 77px;
            font-size: 12px;
            font-weight: 400;

            color: #757575;
        }
        .month-start {
            text-align: right;
        }
        .month-center {
            text-align: center;
        }
        .month-end {
            text-align: left;
        }
    }
}
</style>

就是，這個元件，先給大家講一下思路。

首先是樣式，通過ul,和li實現。因為我們是一個格子是一週的時間算下來一年大概要53個，通過迴圈，先將格子實現出來，再修改樣式

然後先設定list為相對定位，然後裡面再定三個li，這三個li就是被選中的樣式，設定為絕對定位，每個格子的大小大概是17px。

     <ul class="list">
            <li class="time start" ref="Start"></li>
            <li
                v-for="(item, index) in endWeek - startWeek"
                :key="index + 'px'"
                class="time"
                :style="'left:' + (startInit + 17 * item) + 'px'"
            ></li>
            <li class="time end" ref="End"></li>
            <li class="item-li" v-for="(item, index) in 53" :key="index"></li>
        </ul>

然後通過接收外面傳過來的起始時間和結束時間來實現選中樣式。

然後在用一個昂發來處理時間軸的位置。和顯示的文字內容。