vue2.0+elementui實現一個上門取件時間組件
更新時間：2024年02月23日 15:30:23 作者：nihao561
這篇文章主要給大家介紹了關于vue2.0+elementui實現一個上門取件時間組件的相關資料,用于預約上門服務時間 看到網上有很多亂七八糟的代碼,看著頭疼,于是自己寫了一個簡單的,需要的朋友可以參考下
本文使用vue2.0+elementui 制作一個上門取件時間組件，類似順豐，樣式如下：
大概功能：點擊期望上門時間，下面出現一個彈框可以選擇時間：
首先我們定義一些需要的數據：
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: "一小時內",
clickDay: "今天",
time: "",
}
},接著我們畫一個期望上門時間的長框，點擊可以出現彈窗，點擊外部彈窗消失，這中間我們使用了import Clickoutside from 'element-ui/src/utils/clickoutside' 這一組件，來幫助我們達到這個目的
<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組件中的內容，是下單時間的按鈕集合，通過timeToList 這個結構體 ，先獲取數組再循環(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>頁面寫好了我們開始寫邏輯代碼，先需要一些工具函數獲取小時、分鐘、年月日，一個用來判定點擊了哪個按鈕的list（由于是雙層結構tab+button集，所以需要兩個值來判定），一個獲取今天按鈕列表的函數：
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 = ['一小時內', ...arr]
return arr
}然后我們需要先初始化數據
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，但是我還是習慣自己做這部分操作
setTime() {
this.time = this.clickDay + ' ' + this.clickValue
},接下來我們需要生成tab表單dayList，以及每個tab頁面下面的時間選項，用了上面的兩個工具函數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)
})
},
通過上面的初始化函數,可以生成下拉頁面的組件內容，函數順序如下
mounted() {
this.initial()
this.setTime()
this.getDay()
this.getTimeToList()
},最后我們添加一些點擊動作,完整代碼
openDown() {//打開下來框
this.isDropdown = true
},
clickoutside(e) {//關閉下拉框
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>完整代碼已經上傳github：https://github.com/majinihao123/vue-Component
總結
到此這篇關于vue2.0+elementui實現一個上門取件時間組件的文章就介紹到這了,更多相關Vue上門取件時間組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
最近vue項目要做數據實時刷新，數據較大，會出現卡死情況，所以本文主要介紹了頁面實時刷新長連接，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了Vue與.net?Core?接收List＜T＞泛型參數，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了Vue Promise的axios請求封裝詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了vue中自定義右鍵菜單插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本篇文章主要介紹了Vue多種方法實現表頭和首列固定的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了vue實現表格合并功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要來和大家深入討論一下在Vue開發(fā)中是否有必要一定用watch,如果換成watcheffect會如何,文中的示例代碼講解詳細,需要的可以參考下2023-12-12
這篇文章主要介紹了Vue中強制組件重新渲染的正確方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
本篇文章主要介紹了vue項目實現記住密碼到cookie功能示例(附源碼)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了vue.js實現的幻燈片功能,結合實例形式分析了vue.js實現幻燈片的相關樣式、配置、功能等操作技巧,需要的朋友可以參考下2019-01-01