uni-datetime-picker组件填坑,在mounted后再赋值calendar日历不展示或错误展示回显的日期。

news2024/11/26 15:40:32

当需求存在tab切换展示uni-datetime-picker,且每次切换需要初始化默认选中日期的时候,就会出现这样的bug。

就以两个不同类型的日期选择框进行切换展示为例:

没填坑之前的代码:

<uni-datetime-picker v-show="activeTab==='part'" type="date" v-model="searchTime"/>
<uni-datetime-picker v-show="activeTab==='all'" type="daterange" v-model="searchTimeRange"/>


//初始化data的数据
data() {
    return {
        searchTime: '',
        searchTimeRange:'',
    }
},

created() {
	this.searchTime = getThisDate();   //getThisDate获取当天日期方法
	this.searchTimeRange = getThisWeek();   //getThisWeek获取本周日期的方法
},

methods: {
changeTab(data) {
    if(data.name===this.activeTab)return;  //点击相同tab时阻止

    //切换时重置日期
	this.searchTime = getThisDate();   
	this.searchTimeRange = getThisWeek();

	this.activeTab = data.name;
    this.getList();
}

显示结果:当选择到其他日期,再切换tab。单个日期选择的选择框是重置的日期,但选择的日历还是前面选择的日期;日期范围选择器的选择框也重置了日期,但选择的日历选中了三个日期。

填坑之路:

最开始想的是组件内日历组件 数据失去响应式或没有重新加载。就简单暴力的用v-if,但结果就是:日期回显不出来,日期选择不能选中,组件完全失效。

然后想到,既然daterange的效果是之前选中的结束日期还在存在,那就在切换时先置空,再赋值本周日期。结果很理想,效果实现。

changeTab(data) {
	if(data.name===this.activeTab)return;
	this.searchTime = getThisDate();
	this.searchTimeRange = [];  //rang选择日期范围的需要重置为空数组,再进行赋值。否则会出现回显错误
	
	this.activeTab = data.name;		
	setTimeout(_=>{
		this.searchTimeRange = getThisWeek();  //重新赋值本周
					
		this.goTop();
		this.getWorkPlanList();
	},0)
},

但单个日期选择date组件使用这个方法直接完全没有用,还导致最开始选中的时间也没有选中了。因此,就需要对uni-datetime-picker组件的代码进行改造。找到uni_modules文件夹下的uni-datetime-picker.vue文件。

会发现,watch监听value时有个判断.当满足这个判断条件时,就不会再去更新日历组件上面选中的日期。当切换重新赋值,打印isEmitValue会发现非初次赋值日期时为true,满足条件就不会去更新视图选中。

所以可以从父组件上再传一个参数来,判断是否需要刷新视图。改造后的代码如下:

<uni-datetime-picker v-show="activeTab==='part'" type="date" 
v-model="searchTime" :isAnyRefresh="true"/>

在uni-datetime-picker组件内props:

watch的判断增加条件:

完美,收官!!!

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

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

相关文章

使用BWGS进行基因型数据预测

标题&#xff1a;小麦基因组选择育种通道方法 描述&#xff1a;专门为小麦全基因组选择育种设计的包 编码方式&#xff1a;UTF-8 URL&#xff1a;GitHub - byzheng/BWGS: 2021 BreedWheat Genomic Selection pipeline BugReports &#xff1a;https://github.com/byzheng/B…

Vue2 | Vant uploader实现上传文件和图片

需求&#xff1a; 实现图片和文件的上传&#xff0c;单个图片超过1M则压缩&#xff0c;全部文件加起来不得超过10M。 效果&#xff1a; 1. html <van-form ref"form"><van-field name"uploader" label"佐证材料" required><t…

TypeScript枚举(Enums)和泛型(Generics)

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 枚举 异构枚举 枚举成员的类型 泛型 1. 函数泛型 2. 接口泛型 3. 类泛型 接下来我们将学习TypeScript 中的两…

无涯教程-JavaScript - ISREF函数

描述 如果指定的值是参考,则ISREF函数返回逻辑值TRUE。否则返回FALSE。 语法 ISREF (value) 争论 Argument描述Required/OptionalvalueA reference to a cell.Required Notes 您可以在执行任何操作之前使用此功能测试单元格的内容。 适用性 Excel 2007,Excel 2010,Exce…

机器故障预测:未来24小时的决胜时刻!!!

一、背景介绍 这个竞赛的焦点是预测机器是否会在未来24小时内故障。数据包括与机器性能相关的各种特征&#xff0c;例如温度、振动、功耗和传感器读数。目标变量是二进制的&#xff0c;表示机器是否在未来24小时内故障&#xff08;1&#xff09;或未故障&#xff08;0&#xf…

计算机竞赛 机器视觉opencv答题卡识别系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 答题卡识别系统 - opencv python 图像识别 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满分5分…

selenium 网页自动化-在访问一个网页时弹出的浏览器窗口,我该如何处理?

前言 相信大家在使用selenium做网页自动化时&#xff0c;会遇到如下这样的一个场景&#xff1a; 在你使用get访问某一个网址时&#xff0c;会在页面中弹出如上图所示的弹出框。 首先想到是利用Alert类来处理它。 然而&#xff0c;很不幸&#xff0c;Alert类处理的结果就是没…

解决java.text.ParseException: Unparseable date: “invalid_date“

解决java.text.ParseException: Unparseable date: "invalid_date" 前言摘要引言正文1. 理解异常的根本原因2. 处理日期字符串格式问题3. 处理非法字符或无效日期信息4. 异常处理 总结参考资料 博主 默语带您 Go to New World. ✍ 个人主页—— 默语 的博客&#x1f…

创造引人入胜的网页体验:掌握 CSS 动画

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 在现代网页设计中&#…

Leetcode算法入门与数组丨2. LeetCode入门

文章目录 前言LeetCode 是什么LeetCode 注册LeetCode 学习LeetCode 题库LeetCode 刷题页面 & 刷题语言选择LeetCode 题解LeetCode 刷题流程LeetCode 刷题攻略 前言 Datawhale组队学习丨9月Leetcode算法入门与数组丨打卡笔记 这篇博客是一个 入门型 的文章&#xff0c;主要…

Failed to connect to bitbucket.org port 443 错误原因, 解决办法

最近使用SourceTree来访问bitbucket.org的代码托管Git, 当Pull或者Push发现操作失败: Failed to connect to bitbucket.org port 443 错误原因: 无法链接到网站地址, 可能是DNS解析IP地址错误, 或者网站维护, 大概率是被墙或者DNS解析错误. 解决办法: 如果您的浏览器能够访问b…

iOS技术博主指南:填写苹果应用上架中的隐私政策信息

摘要&#xff1a;本文将详细介绍iOS技术博主在苹果应用上架过程中如何填写隐私政策信息。博主可以通过App Store Connect为应用程序提供隐私政策网址和用户隐私选项网址&#xff0c;并了解如何填写隐私政策文本。本文将提供步骤和注意事项&#xff0c;帮助博主顺利完成隐私政策…

数据库-理论基础

目录 1.什么是数据库&#xff1f; 2.数据库与文件系统的区别&#xff1f; 3.常见的数据库由那些&#xff1f; 4.关系型数据库(MySQL&#xff09;的特征及组成结构介绍 1.什么是数据库&#xff1f; 数据&#xff1a;描述事物的符号记录&#xff0c;可以是数字&#xff0c;文…

SSTI注入利用姿势合集

文章目录 前言SSTI模板注入原理&#xff1f;关于Python的类知识构造链的思路Jinjia2获取配置信息lipsumrequesturl_forget_flashed_messagesg对象 Jinjia2 Bypass.绕过引号绕过_绕过init过滤[ ]被过滤 羊城杯2023[决赛] SSTI2020XCTF 华为专项赛Tornado通用手法tornado.templat…

电脑字体怎么改?4个方法快速更改字体!

“我的电脑字体看起来很不习惯&#xff0c;想给电脑换个字体。电脑字体应该怎么改呢&#xff1f;哪位朋友可以给我支支招呀&#xff1f;” 电脑字体的不同可能会让用户在使用电脑时有不同的体验。有些电脑用户可能想使用比较正式的字体&#xff0c;但有些用户可能会比较喜欢可爱…

算法|Day49 动态规划17

LeetCode 647- 回文子串 题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目描述&#xff1a;给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。 回文字符串 是正着读和倒过来读一样的字符串。 子…

RS485(一):电路与波形

一、RS485电路 ​RS485( Recommended Standard-485&#xff09;是隶属于OSI模型-物理层的电气特性&#xff0c;规定为 2 线、半双工、平衡传输线的多点异步通信标准&#xff0c;通信采用差分信号传输。 典型485应用电路如下图所示&#xff1a; 其中 、# 分别控制接收和发送…

深度学习-全连接神经网络-训练过程-权值初始化- [北邮鲁鹏]

文章目录 思想避免全零初始化随机权值初始化权值初始化太小&#xff1a;权值初始化太大Xavier初始化目标为什么输入和输出分布会变得不同&#xff1f;Xavier在使用Tanh时的表现好Xavier在使用ReLU时的表现不好 HE初始化&#xff08;MSRA&#xff09;权值初始化总结 思想 通过调…

ARMv8架构简介

ARMv8-A架构和处理器 ARMv8-A架构 ARMv8‑A 架构是针对应用程序配置文件的最新一代 ARM 架构。 ARMv8 这个名称用于描述整体架构,现在包括 32 位执行状态和 64 位执行状态。它引入了使用 64 位宽寄存器执行的能力,同时保持与现有 ARMv7 软件的向后兼容性。 ARMv8‑A 架构引…

电脑死机的时候,CPU到底在做什么?

电脑死机&#xff0c;应该每个接触计算机的小伙伴都经历过吧。 尤其是早些年&#xff0c;电脑配置还没现在这么高的时候&#xff0c;多开几个重量级应用程序&#xff0c;死机就能如约而至&#xff0c;就算你把键盘上的CTRLALTDELETE按烂了&#xff0c;任务管理器也出不来&…