vue - vue中对Vant日历组件(calendar)的二次封装
vue中对vant日历选择器组件实现的的二次封装;主要实现功能如下:
主要功能:
- 日期区间选择(基本);
- 自定义选择器的底部按钮,添加清除时间操作(slot插槽);
- 指定默认选中的日期范围(当前日期到本月底通过default-date)
- 自定义日期可选范围;(通过 min-date 和 max-date )
- 支持默认值的传入;(没有默认值时会显示placeholder:请选择时间区间)
- 自定义组件的宽度;(通过props:Width,推荐使用百分比 如:80%)
效果图如下:

日期区间组件实现如下:calendar.vue
主要代码讲解:
1, 通过
<template slot="footer">可以更改底部默认的按钮,我这边添加来了一个清除时间的按钮;点击清除时间按钮会把时间清空,恢复到默认状态;
2,通过min-date 和 max-date控制日期可以选择的开始和结束的范围;
3,通过default-date可以更改指定默认选中的日期范围,需要注意的是返回的是一个数组,开始位置和结束位置;可以看一下timeInterval()方法;
4,点击确认按钮onConfirmAll()会把所选择开始日期和结束日期返回给父组件;时间格式如下:2023-02-20;
5,可以传入defaultData 默认值,没有默认值会显示:请选择时间区间;
6,可以传入:Width="'100%'"来控制组件的宽度;
7,针对不同的业务需求可以对当前组件做出相应的调整;
<template><!-- 日期选择组件 可指定选择范围 --><div class="calendar" :style="`width:${Width}`"><van-field :label="title" v-model="date" right-icon="arrow-down" readonly @click="show = true" :placeholder="placeholder" /><!-- 日期选择器 --><van-calendar safe-area-inset-bottom v-model="show" color="#1989fa" type="range" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate" :default-date="timeInterval()" ref="myCalendar"><template slot="footer"><div class="footer"><van-button @click="clearTimeAll" type="danger" class="footerBtn">清除时间</van-button><van-button class="footerBtn" @click="onConfirmAll" type="info">确认</van-button></div></template></van-calendar></div>
</template><script>
export default {name: 'calendar',components: {},props: {/* 可以不用传 用来展示左侧的文案 为空则不展示文案*/title: {type: String,default: '',},/* 传过来的默认值 */defaultData: {type: String,// default:'请选择'},placeholder: {type: String,default: '请选择时间区间',},// 宽度Width: {type: String,},},data() {return {date: this.defaultData ? this.defaultData : '', // 先判断有没有默认值 有就用没有就为空show: false,// 日期区间minDate: new Date(2022, 0, 1),maxDate: new Date(2025, 12, 31),// 当前日期currentDate: new Date().getDate(),};},computed: {},watch: {// 监听到需要重新赋值defaultData(newValue) {this.date = newValue;},},created() {// 处理默认值 如果有默认值直接赋值if (this.defaultData) {this.date = this.defaultData;}},mounted() {},methods: {/* 日期区间 当前自动选择的日期区间 :取当天到月底 返回的是一个数组*/timeInterval() {let new_year = new Date().getFullYear();let new_month = new Date().getMonth() + 1;let new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天let end = new Date(new_date.getTime() - 1000 * 60 * 60 * 24); //取最后一天return [new Date(), end];},/* 确认选择 组件自带的事件 */onConfirm(date) {const [start, end] = date;this.show = false;this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;// 传给父组件 以此来请求数据this.$emit('dateFun', `${this.formatDate(start)}`, `${this.formatDate(end)}`);},/* 确认按钮 */onConfirmAll() {// 直接调用上面的方法if (this.$refs.myCalendar) {this.$refs.myCalendar.onConfirm();} else {console.warn('myCalendar实例没有获取到');}},/* 清除时间 时间置空*/clearTimeAll() {this.date = '';this.show = false;this.$emit('dateFun', ``, ``);},/* 转换时间 */formatDate(date) {// 给日期补0return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;},},
};
</script><style scoped lang="scss">
// 覆盖 van-field的样式
/deep/ .van-cell {padding: 2px 5px;border-radius: 5px;border: 1px solid #1457f0;
}
/deep/ .van-field__right-icon {margin-right: 0;padding: 0;color: #1457f0;
}
.footer {display: flex;justify-content: space-between;align-items: center;// 底部自定义按钮的样式.footerBtn {width: 150px;border-radius: 2px;}
}
</style>
父组件中使用:
<template><div><!-- 日期区间选择器演示 --><h4>Vant日期区间选择器封装</h4><div class="Calendar"><Calendar @dateFun="dateFun" :Width="'80%'" :defaultData="defaultData"></Calendar></div></div>
</template><script>
// 时间选择器
import Calendar from '../../components/calendar/calendar.vue';
export default {
//注册components: { Calendar },data() {return {// 组件的默认值 没有可以为空 或者 组件中不在使用defaultData属性defaultData:'2023-01-01-2023-02-01',],};},methods: {//接收子组件传过来的日期值 dateFun(start, end) {console.log('start:', start, 'end:', end);// 保存获取到的时间...},},
};
</script><style scoped lang="scss">
.Calendar {margin-top: 20px;
}
</style>相关文章:
vue - vue中对Vant日历组件(calendar)的二次封装
vue中对vant日历选择器组件实现的的二次封装;主要实现功能如下: 主要功能: 日期区间选择(基本);自定义选择器的底部按钮,添加清除时间操作(slot插槽);指定默认选中的日期…...
详解C++的类型转换
文章目录前言一、C语言中的类型转换二、为什么C需要四种转换三、C强制类型转换3.1 static_cast3.2 reinterpret_cast3.3 const_cast3.4 dynamic_cast四、RTTI总结前言 在C语言的类型转换有一个非常大的坑,有好多悄悄地转换,有时候把我们转换的就蒙了,因为C要兼容C语言,所以C就…...
NLP文本自动生成介绍及Char-RNN中文文本自动生成训练demo
前言 文本自动生成是自然语言处理领域的一个重要研究方向,实现文本自动生成也是人工智能走向成熟的一个重要标志。文本自动生成技术极具应用前景。 例如,文本自动生成技术可以应用于智能问答与对话、机器翻译等系统,实现更加智能和自然的人机…...
Teradata 离场,企业数据分析平台如何应对变革?
近日大数据分析和数仓软件巨头 Teradata(TD)宣布基于中国商业环境的评估,退出在中国的直接运营。TD 是全球最大的专注于大数据分析、数仓和整合营销管理解决方案的供应商之一,其早在 1997 年就进入中国,巅峰期占据半数…...
QWebEngineView-官翻
文章目录特性公共成员函数重实现公共成员函数公有槽函数信号静态公有成员函数保护成员函数重实现保护成员函数额外继承成员详细描述特性文档编制成员函数文档QWebEngineView::**QWebEngineView**([QWidget](../../W/QWidget.md) **parent* Q_NULLPTR)[virtual] QWebEngineView…...
网络安全高级攻击
对分类器的高层次攻击可以分为以下三种类型:对抗性输入:这是专门设计的输入,旨在确保被误分类,以躲避检测。对抗性输入包含专门用来躲避防病毒程序的恶意文档和试图逃避垃圾邮件过滤器的电子邮件。数据中毒攻击:这涉及…...
优思学院:六西格玛中的水平对比方法是什么?
水平对比,就是比较不同事物之间的差异。 这个概念在六西格玛管理中也很重要,也就是我们经常说的标杆管理,经常被用来寻找行业中最好的做法,以帮助组织改进自身的绩效。 在六西格玛管理中,水平对比有三种常见的应用方式…...
UVa 690 Pipeline Scheduling 流水线调度 二进制表示状态 DFS 剪枝
题目链接:Pipeline Scheduling 题目描述: 给定一张5n(1≤n≤20)5\times n(1\le n\le20)5n(1≤n≤20)的资源需求表,第iii行第jjj列的值为’X’表示进程在jjj时刻需要使用使用资源iii,如果为’.则表示不需要使用。你的任务是安排十个…...
【ArcGIS Pro二次开发】(6):工程(Project)的基本操作
在ArcGIS Pro中我们对工程的基本操作一般包括打开、新建、保存等。下面演示在二次开发中如何用代码进行以上操作。 新建一个项目,命名为【ProjectManager】,添加8个按钮,命名为【CreateEmptyProject、CreateProjectByDefault、OpenExProjest…...
Qt OpenGL(四十)——Qt OpenGL 核心模式-雷达扫描效果
提示:本系列文章的索引目录在下面文章的链接里(点击下面可以跳转查看): Qt OpenGL 核心模式版本文章目录 Qt OpenGL(四十)——Qt OpenGL 核心模式-雷达扫描效果 一、场景 上一篇文章介绍了在雷达坐标系中绘制飞行的飞机,其实雷达坐标系应该还有一个效果,就是扫描的效…...
群智能优化算法求解标准测试函数F1~F23之种群动态分布图(视频)
群智能优化算法求解标准测试函数F1的种群动态分布图群智能优化算法求解标准测试函数F2的种群动态分布图群智能优化算法求解标准测试函数F3的种群动态分布图群智能优化算法求解标准测试函数F4的种群动态分布图群智能优化算法求解标准测试函数F5的种群动态分布图群智能优化算法求…...
vue-axios封装与使用
一、简介 Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 这是一个使用率很高的前端网络请求库,几乎所有的前端项目都会使用,本文主要介绍的是如何在vue项目中使用axios,并对其进行全面的封装。 注意&#x…...
重要节点排序方法
文章目录研究背景提前约定基于节点近邻的排序方法度中心性(degree centrality, DC)半局部中心性(semilocal centrality, SLC)k-壳分解法基于路径排序的方法离心中心性 (Eccentricity, ECC)接近中心性 (closeness centrality, CC)K…...
【2.20】动态规划 +项目 + 存储引擎
01背包问题 现有一容量为w的背包,有3个物品,每个物品重量不同,价值不同,问,怎样装才能价值最大化? 明确dp数组含义和下标含义:dp[j]表示当前背包的最大价值。j表示背包容量。递推公式…...
触摸屏单个按键远程控制led
一、硬件 arduino2块 淘晶驰串口屏7寸增强型带外壳1块,不支持视频音频 nRF24L0模块2块 扩展板2块 跳线若干 面包板1块 led灯1个 电阻二极管若干 下载线两个 usb转串口1个 二、实验内容 一个arduino作为触摸屏的控制器,接收触摸屏双向开关的信号,同时通过nRF24L01发送“open”…...
JVM12 class文件
1. Class 文件结构 1.1. Class 字节码文件结构 类型名称说明长度数量魔数u4magic魔数,识别Class文件格式4个字节1版本号u2minor_version副版本号(小版本)2个字节1u2major_version主版本号(大版本)2个字节1常量池集合u2constant_pool_count常量池计数器2个字节1cp_infoconstan…...
等保三级认证基本要求
一、什么是等保测评? 企业单位委托经公安部认证的具有资质的测评机构,按照管理规范和技术标准,对相应的测评对象(信息系统)的状况进行测评。 1、安全技术测评:包括物理安全、网络安全、主机系统安全、应用安…...
Python 基本数据类型(一)
1. 整型 整型即整数,用 int 表示,在 Python3 中整型没有长度限制。 1.1 内置函数 1. int(num, baseNone) int( ) 函数用于将字符串转换为整型,默认转换为十进制。 >>> int(123) 123 >>> int(123, …...
win10 环境变量及其作用大全
------------------------------------------------------系统变量------------------------------------------------------ ComSpec: C:\WINDOWS\system32\cmd.exe command specification 解释: ComSpec是Windows操作系统中的一个环境变量,它表示Windo…...
@Valid与@Validated的区别
1.介绍 说明: 其实Valid 与 Validated都是做数据校验的,只不过注解位置与用法有点不同。 不同点: (1) Valid是使用Hibernate validation的时候使用。Validated是只用Spring Validator校验机制使用。 (2&…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
C++ 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...
dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...
听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...
【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)
LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 题目描述解题思路Java代码 题目描述 题目链接:LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...
python爬虫——气象数据爬取
一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用: 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests:发送 …...
AI语音助手的Python实现
引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...
【FTP】ftp文件传输会丢包吗?批量几百个文件传输,有一些文件没有传输完整,如何解决?
FTP(File Transfer Protocol)本身是一个基于 TCP 的协议,理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况,主要原因包括: ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...
es6+和css3新增的特性有哪些
一:ECMAScript 新特性(ES6) ES6 (2015) - 革命性更新 1,记住的方法,从一个方法里面用到了哪些技术 1,let /const块级作用域声明2,**默认参数**:函数参数可以设置默认值。3&#x…...
