Vue 上门取件时间组件
本文使用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 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: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 = falsethis.timeValue = this.clickDay}},dayChange(item) {//切换tab页面this.timeValue = item.lable},timeChange(item) {//选择下单时间this.clickValue = item.lablethis.clickDay = item.daythis.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
有需要的自取,麻烦给git一个星星!!!
以后要开始好好搞github自己的个人项目了
相关文章:
Vue 上门取件时间组件
本文使用vue2.0elementui 制作一个上门取件时间组件,类似顺丰,样式如下: 大概功能:点击期望上门时间,下面出现一个弹框可以选择时间: 首先我们定义一些需要的数据: data() {return {isDropdown…...
学习python第一天
1.输出 print("Hello, World!") 2.退出命令提升符 exit() 3.Python 缩进 实例 if 5 > 2:print("Five is greater than two!") 空格数取决于程序员,但至少需要一个。 您必须在同一代码块中使用相同数量的空格,否则 Python 会…...
interface转string输出打印
文章目录 前言一、interface 转json再转string二、使用类型判断 前言 在开发过程中,有时我们使用interface类型接受某些参数接口或返回类型,但输出时,比如记录日志时存在很多不方便情况,输出string发现输出的乱七八糟,…...
如何在PS5上使用金手指修改游戏
环境:windows PS5 问题:PS5 没有GodHen,无法使用json金手指,PKG金手指比较少 解决办法:使用MultiTrainerv从网络注入PS5,修改进程内存 背景:为了护肝,拒绝刷刷刷 解决过程ÿ…...
M1芯片MAC 安装MySQL、Nacos遇到的问题
摘要:由于电脑上是M1芯片,安装软件时遇到一系列问题,记录下踩的坑!!! 安装MySQL MySQl官网下载链接区分ARM和X86架构,终端输入uname -a指令,本机显示为ARM czhczhdeiMac ~ % uname…...
尝试创建若依系统项目(vue3+element-plus+vite) 持续更新...
若依官网:RuoYi 若依官方网站 |后台管理系统|权限管理系统|快速开发框架|企业管理系统|开源框架|微服务框架|前后端分离框架|开源后台系统|RuoYi|RuoYi-Vue|RuoYi-Cloud|RuoYi框架|RuoYi开源|RuoYi视频|若依视频|RuoYi开发文档|若依开发文档|Java开源框架|Java|Spri…...
Pytest测试用例参数化
pytest.mark.parametrize(参数名1,参数名2...参数n, [(参数名1_data1,参数名2_data1...参数名n_data1),(参数名1_data2,参数名2_data2...参数名n_data2)]) 场景: 定义一个登录函数test_login,传入参数为name,password,需要用多个账号去测试登录功能 # …...
【Vue】指令之显示切换,属性绑定
Vue指令【2】 显示切换与属性绑定v-show指令v-if指令v-bind指令 显示切换与属性绑定 v-show指令 作用:根据真假切换元素的显示状态 指令后的内容最终都会解析为布尔值数据改变之后,对应元素的显示状态会同步更新 语法: <div id"…...
Z字型遍历二叉树
编码过程 掏出Deque,先写从左往右遍历 class Solution {public List<List<Integer>> zigzagLevelOrder(TreeNode root) {Deque<TreeNode> deque new ArrayDeque<>();deque.offer(root);while (!deque.isEmpty()) {int n deque.size();f…...
【Go语言成长之路】安装Go
文章目录 安装Go一、下载Go语言安装包二、删除以前安装的Go版本三、添加/usr/local/go/bin到环境变量内四、确认安装成功 安装Go Note: 这里只演示安装Linux版本的Go,若为其它版本,请按照官网的安装教程进行安装即可。 一、下载Go语言安装包 在浏览…...
C语言常见面试题:C语言中如何进行图形界面编程?
在C语言中进行图形界面编程通常需要借助一些图形库。以下是一些常用的C语言图形库及其使用方法: GTK (GIMP Toolkit): GTK 是一个广泛使用的开源图形库,可用于创建跨平台的桌面应用程序。它提供了一套丰富的控件,如按钮、文本框、…...
删除元素(数组)
题目描述 输入一个递增有序的整型数组A有n个元素,删除下标为i的元素,使其仍保持连续有序。注意,有效下标从0开始。 定义如下两个函数分别实现删除元素操作和数组输出操作。 void del(int a[], int n, int i); /*删除数组a中下标为i的元素*…...
WPF DataTemplate内重写BorderBrush,VisualBrush内数据源绑定提示绑定失败
定义DataTemplate 数据模板文件,内容如下 <DataTemplate x:Key"{DataTemplateKey {x:Type VM:TemplateListVM}}" DataType"{x:Type VM:TemplateListVM}"> <Grid Margin"0" Grid.Row"3" Height"50" Ver…...
ElasticSearch搜索与分析引擎-Linux离线环境安装教程
目录 一、下载安装包 网盘链接: 二、安装流程及遇到的问题和解决方案 (1)JDK安装 (2)Elasticsearch安装 (3)Kibana安装 (4)Ik分词器安装 三、启动过程中的问题 ÿ…...
网络安全全栈培训笔记(59-服务攻防-中间件安全CVE复现lSApacheTomcataNginx)
第59天 服务攻防-中间件安全&CVE复现&lS&Apache&Tomcata&Nginx 知识点: 中间件及框架列表: lIS,Apache,Nginx,Tomcat,Docker,Weblogic,JBoos,WebSphere,Jenkins, GlassFish,Jira,Struts2,Laravel,Solr,Shiro,Thinkphp,Sprng,Flask,…...
操作系统真象还原---系列笔记总结
闲话 最开始知道这本书是在校内论坛上,有同学通过这本书里的项目拿到大厂的ssp offer,于是就从网上订购了这本较为大部头的书,想要在简历上添加一个足够底层并且有意思的项目经历,从而帮助自己在秋招时赢得一个好的offer。 第一遍…...
猫用空气净化器好吗?好用的养猫宠物空气净化器品牌推荐
作为一个养猫五年的资深铲屎官,我对如何轻松快乐地养猫有一些心得。猫咪每天在家里奔跑,导致家里经常会出现“猫毛雪”,沙发、地板和衣服都成了重灾区。在除猫毛的问题上,我真的尝试了各种方法,几乎用上了所有的技能。…...
【计网·湖科大·思科】实验六 IP数据报的发送和转发流程、默认路由和特定主机路由
🕺作者: 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux 😘欢迎关注:👍点赞🙌收藏✍️留言 🏇码字不易,你的👍点赞🙌收藏❤️关注对我真的很重要&…...
freertos 源码分析一 list链表数据结构
链表和任务管理是freertos 的核心,先分析链表源码,freertos的链表是双向环形链表,定义与数据结构在list.h中,表项的初始化,插入与删除在list.c中。 数据结构 一、表项数据结构 struct xLIST_ITEM {listFIRST_LIST_IT…...
小程序uni-swiper-action-item滑动不了
<uni-swipe-action><uni-swipe-action-item :options"options"></uni-swipe-action-item></uni-swipe-action> 要在options前面加上right或left <uni-swipe-action><uni-swipe-action-item :right-options"options">&…...
[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域,向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能,能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作,并通过具体…...
云原生玩法三问:构建自定义开发环境
云原生玩法三问:构建自定义开发环境 引言 临时运维一个古董项目,无文档,无环境,无交接人,俗称三无。 运行设备的环境老,本地环境版本高,ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中,性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期,开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发,但背后往往隐藏着系统资源调度不当…...
08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险
C#入门系列【类的基本概念】:开启编程世界的奇妙冒险 嘿,各位编程小白探险家!欢迎来到 C# 的奇幻大陆!今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类!别害怕,跟着我,保准让你轻松搞…...
