vue2.0+elementui實現(xiàn)一個上門取件時間組件

更新時間：2024年02月23日 15:30:23 作者：nihao561

這篇文章主要給大家介紹了關(guān)于vue2.0+elementui實現(xiàn)一個上門取件時間組件的相關(guān)資料,用于預(yù)約上門服務(wù)時間看到網(wǎng)上有很多亂七八糟的代碼,看著頭疼,于是自己寫了一個簡單的,需要的朋友可以參考下

本文使用vue2.0+elementui 制作一個上門取件時間組件，類似順豐，樣式如下：

大概功能：點(diǎn)擊期望上門時間，下面出現(xiàn)一個彈框可以選擇時間：

首先我們定義一些需要的數(shù)據(jù)：

  data() {
        return {
            isDropdown: false,
            dayList: [],
            listArray: [
                "08:00~09:00",
                "09:00~10:00",
                "10:00~11:00",
                "11:00~12:00",
                "12:00~13:00",
                "13:00~14:00",
                "14:00~15:00",
                "15:00~16:00",
                "16:00~17:00",
                "17:00~18:00",
                "18:00~19:00",
                "19:00~19:30",
            ],
            timeToList: {
            },
            timeValue: "今天",
            clickValue: "一小時內(nèi)",
            clickDay: "今天",
            time: "",
        }
    },

接著我們畫一個期望上門時間的長框，點(diǎn)擊可以出現(xiàn)彈窗，點(diǎn)擊外部彈窗消失，這中間我們使用了import Clickoutside from 'element-ui/src/utils/clickoutside' 這一組件，來幫助我們達(dá)到這個目的

<template>
    <div class="time-picker" @click="openDown" v-clickoutside="clickoutside">
        <div class="content-first">
            <div class="redSpan">*</div>
            <div>期望上門時間</div>
        </div>
        <div class="content-first">
            <div>
                {{ time }}
            </div>
            <i class="el-icon-s-order"></i>
        </div>
</template>

接下來畫一個彈出頁面，彈出頁面頂部是一個tab組件，這里通過daylist循環(huán)獲得

   <div class="time">
                <div v-for="item in dayList" class="item" :class="timeValue == item.lable ? 'active' : ''"
                    @click="dayChange(item)">
                    <div>{{ item.lable }}</div>
                    <div>{{ item.ymd }}</div>
                </div>
            </div>

tab組件中的內(nèi)容，是下單時間的按鈕集合，通過timeToList 這個結(jié)構(gòu)體，先獲取數(shù)組再循環(huán)生成

           <div class="timeList">
                <div v-for="item  in  timeToList[timeValue]" @click="timeChange(item)" class="timeBox"
                    :class="clickDay == item.day && clickValue == item.lable ? 'active' : ''">
                    {{ item.lable }}
                </div>
            </div>

頁面寫好了我們開始寫邏輯代碼，先需要一些工具函數(shù)獲取小時、分鐘、年月日，一個用來判定點(diǎn)擊了哪個按鈕的list（由于是雙層結(jié)構(gòu)tab+button集，所以需要兩個值來判定），一個獲取今天按鈕列表的函數(shù)：

        getHours() {
            const now = new Date();
            return now.getHours();
        },

        getMinute() {
            const now = new Date();
            return now.getMinutes();
        },

        formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        
        transTime(arr, day) {
            let temp = []
            arr.forEach((item) => {
                temp.push({
                    lable: item,
                    day: day
                })
            })
            return temp
        },

        getTodayList(arr) {
            let minute = this.getMinute()
            let hour = this.getHours()
            if (hour < 8)
                return arr
            if (hour >= 19 && minute > 30)
                return []
            arr = arr.slice(hour - 7)
            arr = ['一小時內(nèi)', ...arr]
            return arr
        }

然后我們需要先初始化數(shù)據(jù)

     initial() {
            let minute = this.getMinute()
            let hour = this.getHours()
            if (hour < 8) {
                this.clickValue = "08:00~09:00"
                this.clickDay = "今天"
                return
            }
            if (hour >= 19 && minute > 30) {
                this.clickValue = "08:00~09:00"
                this.clickDay = "明天"
                return
            }
        },

然后將時間賦值，這里其實可以用computed，但是我還是習(xí)慣自己做這部分操作

        setTime() {
            this.time = this.clickDay + ' ' + this.clickValue
        },

接下來我們需要生成tab表單dayList，以及每個tab頁面下面的時間選項，用了上面的兩個工具函數(shù)getTodayList(),transTime()

       getDay() {
            const today = new Date()
            const tomorrow = new Date(today)
            tomorrow.setDate(tomorrow.getDate() + 1)
            const afterTomorrow = new Date(today)
            afterTomorrow.setDate(afterTomorrow.getDate() + 2)

            let dayArray = [this.formatDate(today), this.formatDate(tomorrow), this.formatDate(afterTomorrow)]
            let dayName = ['今天', '明天', '后天']
            this.dayList = dayName.map((item, index) => {
                return {
                    lable: item,
                    ymd: dayArray[index]
                }
            })
        },

      getTimeToList() {
            this.dayList.forEach((item) => {
                let arr = JSON.parse(JSON.stringify(this.listArray))
                if (item.lable === "今天")
                    arr = this.getTodayList(arr)
                this.timeToList[item.lable] = this.transTime(arr, item.lable)
            })
        },

通過上面的初始化函數(shù),可以生成下拉頁面的組件內(nèi)容，函數(shù)順序如下

    mounted() {
        this.initial()
        this.setTime()
        this.getDay()
        this.getTimeToList()
    },

最后我們添加一些點(diǎn)擊動作,完整代碼

        openDown() {//打開下來框
            this.isDropdown = true
        },

        clickoutside(e) {//關(guān)閉下拉框
            if (!e) {
                this.isDropdown = false
                this.timeValue = this.clickDay
            }
        },

        dayChange(item) {//切換tab頁面
            this.timeValue = item.lable
        },

        timeChange(item) {//選擇下單時間
            this.clickValue = item.lable
            this.clickDay = item.day
            this.setTime()
        },

貼一下css代碼

<style lang="scss" scoped>
.time-picker {
    background-color: #f4f5f7;
    width: 336px;
    height: 32px;
    padding: 0 6px;

    display: flex;
    justify-content: space-between;
    cursor: pointer;

    .content-first {
        display: flex;
        align-items: center;
        gap: 3px;

        .redSpan {
            color: red;
        }
    }

    .dropdown {
        position: absolute;
        top: 32px;
        right: 0px;
        z-index: 99;
        width: 100%;
        height: 220px;
        background-color: #fff;
        box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.04);
        border-radius: 10px;
        padding: 6px;

        .time {
            display: flex;

            .item {
                width: 33%;
                height: 45px;
                text-align: center;
                font-size: 14px;
                line-height: 18px;
                border-bottom: 1px solid #cccccc;
            }

            .active {
                color: red;
                border-bottom: 1px solid red;
            }
        }

        .timeList {
            padding: 10px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;

            .timeBox {
                width: 93px;
                height: 29px;
                background-color: #f7f8fa;
                text-align: center;
            }

            .timeBox:hover {
                color: red;
            }

            .active {
                color: red;
                background-color: #ffefef;
            }
        }
    }

}
</style>

完整代碼已經(jīng)上傳github：https://github.com/majinihao123/vue-Component

總結(jié)

到此這篇關(guān)于vue2.0+elementui實現(xiàn)一個上門取件時間組件的文章就介紹到這了,更多相關(guān)Vue上門取件時間組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: