vue2.0+elementui实现一个上门取件时间组件

细林

本文使用vue2.0+elementui 制作一个上门取件时间组件，类似顺丰，样式如下：

大概功能：点击期望上门时间，下面出现一个弹框可以选择时间：
首先我们定义一些需要的数据：

1.   data() {
   
2.         return {
   
3.             isDropdown: false,
   
4.             dayList: [],
   
5.             listArray: [
   
6.                 "08:00~09:00",
   
7.                 "09:00~10:00",
   
8.                 "10:00~11:00",
   
9.                 "11:00~12:00",
   
10.                 "12:00~13:00",
    
11.                 "13:00~14:00",
    
12.                 "14:00~15:00",
    
13.                 "15:00~16:00",
    
14.                 "16:00~17:00",
    
15.                 "17:00~18:00",
    
16.                 "18:00~19:00",
    
17.                 "19:00~19:30",
    
18.             ],
    
19.             timeToList: {
    
20.             },
    
21.             timeValue: "今天",
    
22.             clickValue: "一小时内",
    
23.             clickDay: "今天",
    
24.             time: "",
    
25.         }
    
26.     },

复制代码

接着我们画一个期望上门时间的长框，点击可以出现弹窗，点击外部弹窗消失，这中间我们使用了import Clickoutside from 'element-ui/src/utils/clickoutside' 这一组件，来帮助我们达到这个目的

1. <template>
   
2.     <div class="time-picker" @click="openDown" v-clickoutside="clickoutside">
   
3.         <div class="content-first">
   
4.             <div class="redSpan">*</div>
   
5.             <div>期望上门时间</div>
   
6.         </div>
   
7.         <div class="content-first">
   
8.             <div>
   
9.                 {{ time }}
   
10.             </div>
    
11.             <i class="el-icon-s-order"></i>
    
12.         </div>
    
13. </template>

复制代码

接下来画一个弹出页面，弹出页面顶部是一个tab组件，这里通过daylist循环获得

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

复制代码

tab组件中的内容，是下单时间的按钮集合，通过timeToList 这个结构体 ，先获取数组再循环生成

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

复制代码

页面写好了我们开始写逻辑代码，先需要一些工具函数获取小时、分钟、年月日，一个用来判定点击了哪个按钮的list（由于是双层结构tab+button集，所以需要两个值来判定），一个获取今天按钮列表的函数：

1.         getHours() {
   
2.             const now = new Date();
   
3.             return now.getHours();
   
4.         },
   
5. 
   
6.         getMinute() {
   
7.             const now = new Date();
   
8.             return now.getMinutes();
   
9.         },
   
10. 
    
11.         formatDate(date) {
    
12.             const year = date.getFullYear();
    
13.             const month = String(date.getMonth() + 1).padStart(2, '0');
    
14.             const day = String(date.getDate()).padStart(2, '0');
    
15.             return `${year}-${month}-${day}`;
    
16.         },
    
17.         
    
18.         transTime(arr, day) {
    
19.             let temp = []
    
20.             arr.forEach((item) => {
    
21.                 temp.push({
    
22.                     lable: item,
    
23.                     day: day
    
24.                 })
    
25.             })
    
26.             return temp
    
27.         },
    
28. 
    
29.         getTodayList(arr) {
    
30.             let minute = this.getMinute()
    
31.             let hour = this.getHours()
    
32.             if (hour < 8)
    
33.                 return arr
    
34.             if (hour >= 19 && minute > 30)
    
35.                 return []
    
36.             arr = arr.slice(hour - 7)
    
37.             arr = ['一小时内', ...arr]
    
38.             return arr
    
39.         }

复制代码

然后我们需要先初始化数据

1.      initial() {
   
2.             let minute = this.getMinute()
   
3.             let hour = this.getHours()
   
4.             if (hour < 8) {
   
5.                 this.clickValue = "08:00~09:00"
   
6.                 this.clickDay = "今天"
   
7.                 return
   
8.             }
   
9.             if (hour >= 19 && minute > 30) {
   
10.                 this.clickValue = "08:00~09:00"
    
11.                 this.clickDay = "明天"
    
12.                 return
    
13.             }
    
14.         },

复制代码

然后将时间赋值，这里其实可以用computed，但是我还是习惯自己做这部分操作

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

复制代码

接下来我们需要生成tab表单dayList，以及每个tab页面下面的时间选项，用了上面的两个工具函数getTodayList(),transTime()

1.        getDay() {
   
2.             const today = new Date()
   
3.             const tomorrow = new Date(today)
   
4.             tomorrow.setDate(tomorrow.getDate() + 1)
   
5.             const afterTomorrow = new Date(today)
   
6.             afterTomorrow.setDate(afterTomorrow.getDate() + 2)
   
7. 
   
8.             let dayArray = [this.formatDate(today), this.formatDate(tomorrow), this.formatDate(afterTomorrow)]
   
9.             let dayName = ['今天', '明天', '后天']
   
10.             this.dayList = dayName.map((item, index) => {
    
11.                 return {
    
12.                     lable: item,
    
13.                     ymd: dayArray[index]
    
14.                 }
    
15.             })
    
16.         },
    
17. 
    
18.       getTimeToList() {
    
19.             this.dayList.forEach((item) => {
    
20.                 let arr = JSON.parse(JSON.stringify(this.listArray))
    
21.                 if (item.lable === "今天")
    
22.                     arr = this.getTodayList(arr)
    
23.                 this.timeToList[item.lable] = this.transTime(arr, item.lable)
    
24.             })
    
25.         },

复制代码

通过上面的初始化函数,可以生成下拉页面的组件内容，函数顺序如下

1.     mounted() {
   
2.         this.initial()
   
3.         this.setTime()
   
4.         this.getDay()
   
5.         this.getTimeToList()
   
6.     },

复制代码

最后我们添加一些点击动作,完整代码

1.         openDown() {//打开下来框
   
2.             this.isDropdown = true
   
3.         },
   
4. 
   
5.         clickoutside(e) {//关闭下拉框
   
6.             if (!e) {
   
7.                 this.isDropdown = false
   
8.                 this.timeValue = this.clickDay
   
9.             }
   
10.         },
    
11. 
    
12.         dayChange(item) {//切换tab页面
    
13.             this.timeValue = item.lable
    
14.         },
    
15. 
    
16.         timeChange(item) {//选择下单时间
    
17.             this.clickValue = item.lable
    
18.             this.clickDay = item.day
    
19.             this.setTime()
    
20.         },

复制代码

贴一下css代码

1. <style lang="scss" scoped>
   
2. .time-picker {
   
3.     background-color: #f4f5f7;
   
4.     width: 336px;
   
5.     height: 32px;
   
6.     padding: 0 6px;
   
7. 
   
8.     display: flex;
   
9.     justify-content: space-between;
   
10.     cursor: pointer;
    
11. 
    
12.     .content-first {
    
13.         display: flex;
    
14.         align-items: center;
    
15.         gap: 3px;
    
16. 
    
17.         .redSpan {
    
18.             color: red;
    
19.         }
    
20.     }
    
21. 
    
22.     .dropdown {
    
23.         position: absolute;
    
24.         top: 32px;
    
25.         right: 0px;
    
26.         z-index: 99;
    
27.         width: 100%;
    
28.         height: 220px;
    
29.         background-color: #fff;
    
30.         box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.04);
    
31.         border-radius: 10px;
    
32.         padding: 6px;
    
33. 
    
34.         .time {
    
35.             display: flex;
    
36. 
    
37.             .item {
    
38.                 width: 33%;
    
39.                 height: 45px;
    
40.                 text-align: center;
    
41.                 font-size: 14px;
    
42.                 line-height: 18px;
    
43.                 border-bottom: 1px solid #cccccc;
    
44.             }
    
45. 
    
46.             .active {
    
47.                 color: red;
    
48.                 border-bottom: 1px solid red;
    
49.             }
    
50.         }
    
51. 
    
52.         .timeList {
    
53.             padding: 10px;
    
54.             display: flex;
    
55.             align-items: center;
    
56.             flex-wrap: wrap;
    
57.             gap: 10px;
    
58. 
    
59.             .timeBox {
    
60.                 width: 93px;
    
61.                 height: 29px;
    
62.                 background-color: #f7f8fa;
    
63.                 text-align: center;
    
64.             }
    
65. 
    
66.             .timeBox:hover {
    
67.                 color: red;
    
68.             }
    
69. 
    
70.             .active {
    
71.                 color: red;
    
72.                 background-color: #ffefef;
    
73.             }
    
74.         }
    
75.     }
    
76. 
    
77. }
    
78. </style>

复制代码

完整代码已经上传github：https://github.com/majinihao123/vue-Component
总结
到此这篇关于vue2.0+elementui实现一个上门取件时间组件的文章就介绍到这了,更多相关Vue上门取件时间组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/316233p0i.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！