uView日历控件(u-calendar)优化

news2024/11/26 2:49:51

1 问题 

u-calendar日历控件存在的问题:

  1. 不能设置默认选中值,
  2. 打开弹窗选择起始日期,然后点击取消按钮或蒙版关闭弹窗时,日历弹窗中的选中值发生改变(再次打开日历弹窗时,就可以看到选中值的错误)。

2 修改思路

针对以上两点,对于mode="range"的u-calendar做了如下修改来解决上述问题。

因为是npm引入的uView组件,不能在node_modules目录下修改组件内容。

所以只能将u-calendar组件复制到components目录下,改名为ln-calendar.vue,并修改组件内容。

2.1 设置默认选中值

首先在props中添加defaultDate属性:

defaultDate: {
	type: Array,
	default: () => []
},

 其次,写一个设置默认值的方法:

//设置默认值,格式['2022-12-1','2023-8-2'],不带0
setDefaultDate(defaultDate) {
	if (defaultDate.length == 0) {
		return;
	}
	const startDateArr = defaultDate[0].split('-')
	this.startYear = Number(startDateArr[0])
	this.startMonth = Number(startDateArr[1])
	this.startDay = Number(startDateArr[2])
	this.startDate = this.activeDate = `${this.startYear}-${this.startMonth}-${this.startDay}`
	if (this.defaultDate.length > 1) {
		const endDateArr = defaultDate[1].split('-')
		this.endYear = Number(endDateArr[0])
		this.endMonth = Number(endDateArr[1])
		this.endDay = Number(endDateArr[2])
		this.endDate = `${this.endYear}-${this.endMonth}-${this.endDay}`
	}
},

 最后在init()方法中调用setDefaultDate()方法即可。注意,调用时要放在changeData()方法之前。

 2.2 修复取消选中时,弹窗内选中值不还原的问题

 首先,在data中定义两个变量:

hasFix: false, //识别是否点击了确定按钮
beforeChangeVal: [] //存储原有选中值

 其次,在dateClick()方法顶部,存储确定按钮点击状态和原有选中值:

//保存原有值,点击取消或者蒙版关闭弹窗时,用于复原选中项
this.hasFix = false
if (this.endDate) {
	this.beforeChangeVal = [this.startDate, this.endDate]
}

 然后,在btnFix()方法顶部,设置确定按钮点击状态为true:

this.hasFix = true

 最后,在close() 方法中,修复问题。

if (!this.hasFix) {
  // 修复点击取消按钮或蒙版关闭弹窗时,日历弹窗的选中值发生改变的问题
  this.setDefaultDate(this.beforeChangeVal);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/848109.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IMV8.0

一、背景内容 经历了多个版本,基础内容在前面,可以使用之前的基础环境: v1: https://blog.csdn.net/wtt234/article/details/132139454 v2: https://blog.csdn.net/wtt234/article/details/132144907 v3: h…

选择软件检测机构时的注意事项,获取软件测试报告的费用为多少?

随着信息科技的发展,我们的生活和工作也越来越离不开软件产品的使用。软件企业要想在行业崭露头角,软件质量是重中之重。因此很多软件企业为了更好的保障软件质量,会选择将该项工作交由软件检测机构进行。 一、选择软件检测机构时的注意事项…

小尺寸、高效率的88W8997-A0-CBQ2E005-T无线互连芯片,NV24C64DWVLT3G 64Kb EEPROM存储器

88W8997-A0-CBQ2E005-T 是业界尺寸最小、能效最高的MU-MIMO无线互连组合芯片,面向企业级和消费级市场。88W8997是业界首款全面支持Bluetooth 4.2以及未来Bluetooth 5.0全套功能的28nm 2 x 2 802.11ac Wave-2组合芯片。该器件实现了高达867Mbps的峰值数据传送速率&am…

W5100S-EVB-PICO作为TCP Client 进行数据回环测试(五)

前言 上一章我们用W5100S-EVB-PICO开发板通过DNS解析www.baidu.com(百度域名)成功得到其IP地址,那么本章我们将用我们的开发板作为客户端去连接服务器,并做数据回环测试:收到服务器发送的数据,并回传给服务…

kettle之转换嵌套转换问题

在kettle中如果转换中还调用了转换,需要用过滤记录和中止来判断是否转换内容成功。否则,运行失败了,也会显示成功。这样计算数据会出现问题 如下图所示: 如下图count转换Execution results参数如下: 如下图中用ExecutionNrErro…

vue3获得url上的参数值

1、引入 import { useRoute } from vue-router2、获得const route useRoute() console.log(route.query.number)

IntelliJ IDEA 2021/2022关闭双击shift全局搜索

IDEA左上角 File-->Settings 找到Navigate -->Search Everywhere ,右键添加快捷键。 OK --> Apply应用

W6100-EVB-PICO作为TCP Client 进行数据回环测试(五)

前言 上一章我们用W6100-EVB-PICO开发板通过DNS解析www.baidu.com(百度域名)成功得到其IP地址,那么本章我们将用我们的开发板作为客户端去连接服务器,并做数据回环测试:收到服务器发送的数据,并回传给服务器…

【BI系统】选型常见问题解答二

本文主要总结BI系统选型过程中遇见的常见问题,并针对性做出回答,希望能为即将选型,或正在选型BI系统的企业用户们提供一个快速了解通道。 有针对金蝶云星空的BI方案吗?能起到怎样的作用? 答:奥威BI系统拥…

Windows新版文件资源管理器经常在后台弹出的临时解决方案

禁用组策略自动刷新 运行gpedit.msc找到计算机配置->管理模板->系统->组策略找到 “关闭组策略的后台刷新”启用 参考 https://answers.microsoft.com/en-us/windows/forum/all/windows-11-most-recently-opened-explorer-window/26e097bd-1eba-4462-99bd-61597b5…

网络编程 tcp udp http编程流程 网络基础知识

讲解 网络基础知识网络编程tcp编程流程图示理解bind和accept函数理解监视套接字和链接套接字理解linux和window下的编程实现tcp特点 udp编程流程图示理解udp特点 http编程流程图示理解编程实现-网站服务器 网络基础知识 OSI分层:应用层 表示层 会话层 传输层 网络层…

相关搜索量激增10000%!“芭比周边”产品火爆亚马逊!

据外媒报道,芭比娃娃是今年夏天最热的话题。今年7月份,“芭比娃娃”是亚马逊上搜索最多的词。第二季度,Shopify上的芭比娃娃销量激增了56%。知名玩具制造商美泰(Mattel)预计,受电影的推动,在未来…

echarts没有数据时也显示y轴刻度

一般如果没有数据,echarts的y轴刻度会隐藏,如果想让y轴刻度显示,需要设置yAxis的 min、max属性: 但是max数据不能写死,如果写死的话,万一实际数据量过大的话,会溢出echarts,所以做个…

找短视频BGM、音效素材,有这6个网站就够了。

很多从事自媒体的朋友不知道去哪里找免费的音效和好听的BGM,作为网站收藏家的我,本期就给大家分享6个视频剪辑必备的音效素材网站,有免费、付费、商用的,大家可以根据自己的需求进行选择,有需要的赶紧收藏起来吧&#…

Linux安装配置nginx+php搭建

Linux安装配置nginxphp搭建 文章目录 Linux安装配置nginxphp搭建1.nginx源码包编译环境和安装相应的依赖1.1 安装编译环境1.2 安装pcre库、zlib库和openssl库 2.安装nginx2.1 在[nginx官网](https://nginx.org/en/download.html)上获取源码包并进行下载2.2 进行解压编译 3.启动…

uboot详解

uboot入口 在PC机上引导程序一般由BIOS开始执行,然后读取硬盘中位于MBR(Main Boot Record,主引导记录)中的Bootloader(例如LILO或GRUB),并进一步引导操作系统的启动。然而在嵌入式系统中通常没有像BIOS那样的固件程序,因此整个系统的加载启动…

mybatis打印sql语句出现多余的limit关键字

1、事情起因 在项目中使用了PageHelper分页插件,由于需求特殊,需要自定义分页,代码编写完成后,事故出现了。 前端传参: {pageNum: 1,pageSize: 10, }已知表中数据10条,但是每次分页查询只有10条数据,排查…

第17章-Spring AOP经典应用场景

文章目录 一、日志处理二、事务控制三、参数校验四、自定义注解五、AOP 方法失效问题1. ApplicationContext2. AopContext3. 注入自身 六、附录1. 示例代码 AOP 提供了一种面向切面操作的扩展机制,通常这些操作是与业务无关的,在实际应用中,可…

5. C++类的封装

一、类的封装 封装的含义&#xff1a; 所有属性都是私有的&#xff0c;外部不能直接访问提供与属性相关的成员函数&#xff0c;间接访问属性 模板代码&#xff1a; #include <iostream> using namespace std;class Clock { private:int hour, minute, second; public…

《UNIX 传奇:历史与回忆》读后感

《UNIX 传奇&#xff1a;历史与回忆》 是 bwk&#xff08;Brian W. Kernighan&#xff09;2019 年的新作&#xff0c;回忆了 UNIX 在大半个世纪的风雨历程&#xff0c;是一本引人入胜的书籍。通过对 UNIX 操作系统的历史和发展进行详细的叙述和回顾&#xff0c;让我对这个操作系…