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循环获得
<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 这个结构体 ，先获取数组再循环生成
<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上门取件时间组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue.js中用webpack合并打包多个组件并实现按需加载
对于现在前端插件的频繁更新，我也是无力吐槽，但是既然入了前端的坑就得认嘛，所以多多少少要对组件化有点了解，下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料，需要的朋友可以参考下。2017-02-02
这篇文章主要介绍了Element Carousel 走马灯的具体实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
Vue中使用JWT进行身份认证也是一种常见的方式,它能够更好地保护用户的信息,本文主要介绍了Vue开发中Jwt的使用详解,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
Vue3 vite配置css 的sourceMap及文件引用配置别名的过程
这篇文章主要介绍了Vue3 vite配置css的sourceMap,及文件引用配置别名的过程，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
在做vue3项目中时,每次使用都需要先进行引入,下面这篇文章主要给大家介绍了关于vue3 api自动导入的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
使用vue和datatables进行表格的服务器端分页实例代码
本篇文章主要介绍了使用vue和datatables进行表格的服务器端分页实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06![关于console.log打印结果是 [object Object]的解决](//img.jbzj.com/images/xgimg/bcimg6.png)
关于console.log打印结果是 [object Object]的解决
这篇文章主要介绍了关于console.log打印结果是 [object Object]的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
MVVM模型主要是为了分离视图(View)和模型(Model)，其优点为：低耦合、可重用性、独立开发以及可测试，视图和模型分离的特点给了 Vue 很大的启发，这篇文章主要介绍了MVVM模型在Vue中的使用,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue裁切预览组件功能的实现代码，本文通过实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值,感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
这篇文章主要利用websocked 建立长连接，利用Vuex全局通信的特性，以及watch,computed函数监听消息变化，并驱动页面变化实现实时聊天，感兴趣的可以了解一下2021-08-08
![关于console.log打印结果是 [object Object]的解决](http://img.jbzj.com/images/xgimg/bcimg6.png)
最新评论