珠海建网站公司,设计学习网站,常德seo排名,企业网站seo实本文使用vue2.0elementui 制作一个上门取件时间组件#xff0c;类似顺丰#xff0c;样式如下#xff1a; 大概功能#xff1a;点击期望上门时间#xff0c;下面出现一个弹框可以选择时间#xff1a;
首先我们定义一些需要的数据#xff1a; data() {return {isDropdown…本文使用vue2.0elementui 制作一个上门取件时间组件类似顺丰样式如下 大概功能点击期望上门时间下面出现一个弹框可以选择时间
首先我们定义一些需要的数据 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 这一组件来帮助我们达到这个目的
templatediv classtime-picker clickopenDown v-clickoutsideclickoutsidediv classcontent-firstdiv classredSpan*/divdiv期望上门时间/div/divdiv classcontent-firstdiv{{ time }}/divi classel-icon-s-order/i/div
/template
接下来画一个弹出页面弹出页面顶部是一个tab组件这里通过daylist循环获得 div classtimediv v-foritem in dayList classitem :classtimeValue item.lable ? active : clickdayChange(item)div{{ item.lable }}/divdiv{{ item.ymd }}/div/div/div
tab组件中的内容是下单时间的按钮集合通过timeToList 这个结构体 先获取数组再循环生成 div classtimeListdiv v-foritem in timeToList[timeValue] clicktimeChange(item) classtimeBox:classclickDay item.day clickValue item.lable ? active : {{ item.lable }}/div/div
页面写好了我们开始写逻辑代码先需要一些工具函数获取小时、分钟、年月日一个用来判定点击了哪个按钮的list由于是双层结构tabbutton集所以需要两个值来判定一个获取今天按钮列表的函数 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 arrif (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 9) {this.clickValue 08:00~09:00this.clickDay 今天return}if (hour 19 minute 30) {this.clickValue 08:00~09:00this.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 falsethis.timeValue this.clickDay}},dayChange(item) {//切换tab页面this.timeValue item.lable},timeChange(item) {//选择下单时间this.clickValue item.lablethis.clickDay item.daythis.setTime()},
贴一下css代码
style langscss 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
完整代码已经上传githubhttps://github.com/majinihao123/vue-Component
有需要的自取麻烦给git一个星星
以后要开始好好搞github自己的个人项目了
