uni-calendar 日历控件自定义点的颜色功能

news2024/11/26 2:03:54

增加自定义点的颜色功能,官方空间点的颜色是固定红色

在这里插入图片描述

1、修改的页面 uni-calendar-item

在uni-calendar-item页面中的这个标签中加上一个style属性,判断传过来的参数是否存在bgcolor背景颜色,有的话添加背景色,没有则不添加默认系统颜色。

在这里插入图片描述

<text v-if="selected&&weeks.extraInfo" 
	class="uni-calendar-item__weeks-box-circle" 
	:style="weeks.extraInfo.bgcolor?'background-color: '+weeks.extraInfo.bgcolor:''"></text>

2、传的参数增加bgcolor

在selected的对象中添加 bgcolor 属性,下面代码与官网基本一致只是增加了个bgcolor属性,也时非必填项。

this.info.selected = [{
		date: getDate(new Date(),-3).fullDate,
		info: '打卡',
		bgcolor:'#007aff'
	},
	{
		date: getDate(new Date(),-2).fullDate,
		info: '签到',
		bgcolor:'#f3a73f',
		data: {
			custom: '自定义信息',
			name: '自定义消息头'
		}
	},
	{
		date: getDate(new Date(),-1).fullDate,
		info: '已打卡',
		bgcolor: 1 == 1 ? '#007aff' : '#f3a73f'
	}
]

其他问题

在使用calendar空间的时候有个问题,直接在this.info.selected中push对象时,日历是不刷新的,只能用建一个新数组将数据放到新数组里面,再this.info.selected=dkList这样赋值,日历才会刷新,有遇到过的吗,可以给我解释一下。

在这里插入图片描述

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

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

相关文章

【DBA课程-笔记】第 4 章:MongoDB数据库管理备份

课程大纲 MongoDB备份机制数据库的恢复数据库的导出数据库的导入MongoDB面试题 一、MongoDB备份机制 1. MongoDB备份方式 磁阵列文件系统快照 Filesystem Snapshots复制数据文件 CPmongodump 备份 和 mongorestore 恢复工具mongoimport 导入 和 mongoexport 导出工具MongoD…

Qt - 模型视图

模型/视图 概念 模型/视图结构将数据存储和界面展示分离&#xff0c;分别用不同的类实现 模型&#xff1a;存储数据视图&#xff1a;界面上的视图组件显示模型中的数据&#xff1b;在视图组件里修改的数据会被自动保存在模型中 源数据 内存中的一个字符串列表 磁盘文件系统结构…

【二叉树part08】| 669.修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树

目录 &#x1f388;LeetCode669. 修剪二叉搜索树 &#x1f388;LeetCode108.将有序数组转换为二叉搜索树 &#x1f388;LeetCode538.把二叉搜索树转换为累加树 &#x1f388;LeetCode669. 修剪二叉搜索树 链接&#xff1a;669.修剪二叉搜索树 给你二叉搜索树的根节点 root…

用于 3D 建模和渲染应该选择怎么样的配置?

选择合适的机器可能会使决定变得困难。在分析图像时&#xff0c;它还需要一定数量的核心和线程&#xff0c;这绝对是一个怪物。渲染一般是使用GPU或者CPU来进行&#xff0c;从而产生渲染效果。 3D 建模是一种用于构建和评估实际物理对象的虚拟 3D 模型的应用程序。该技术应用于…

Mvc进阶(下)

Mvc进阶&#xff08;下&#xff09; 1.前言2.上次代码弊端1.利用xml建模反射优化1.XMl文件2.对xml建模 3.修改中央控制器 3.再优化1.先优化Action子控制器4.优化传值问题 4.总结 1.前言 虽然前面文章深入解析Java自定义MVC框架的原理与实现讲述了Mvc框架&#xff0c;但是那只能…

suse ha for sap scale-up性能优化场景安装配置

1. 安装SUSE操作系统 在官网下载SUSE Linux Enterprise Server for SAP Applications安装介质&#xff0c;在安装操作系统过程中&#xff0c;选择SUSE Linux Enterprise Server for SAP Applications操作系统。 在软件选择界面&#xff0c;根据需要选择SAP HANA Server Base…

oracle connect by很强,但是要慎用,不然有你哭的时候

前言: 第四次工业革命&#xff0c;带来了科技的巨大变更&#xff0c;同时带来了很多半结构化数据&#xff0c;很多数据会做成集合、JSON的形式存储到数据库中&#xff0c;通过ETL工具我们将这些数据抽取到数仓里面&#xff0c;我们怎么进行分析呢&#xff1f;这些数据类似这样的…

centos7安装git及maven

安装git 直接使用yum安装&#xff0c;指令如下&#xff1a; yum install git然后执行如下指令判断是否安装完成&#xff1a; git --version紧接着需要维护git的用户名及邮箱等信息 git config --global user.name "zzy" git config --global user.email "ex…

JS知识点汇总(十四)--事件循环

1. 对事件循环的理解 JavaScript 在设计之初便是单线程&#xff0c;即指程序运行时&#xff0c;只有一个线程存在&#xff0c;同一时间只能做一件事 JavaScript 初期作为一门浏览器脚本语言&#xff0c;通常用于操作 DOM &#xff0c;如果是多线程&#xff0c;一个线程进行了删…

QT学习笔记:调整控件大小和位置

前面的文章&#xff0c;我讲了怎么用layout去布局。但布局做完后&#xff0c;发现界面有点怪。比如&#xff0c;最低下的“清除”按钮这么大&#xff0c;“消息体”这个label没有位于中间等。下面&#xff0c;我就来讲下怎么把界面继续优化。 1、调整“清除”按钮大小和位置 …

第八步:STM32F4 EXTI

1.0 外部中断概述 STM32F4的每个IO都可以作为外部中断输入。 STM32F4的中断控制器支持22个外部中断/事件请求&#xff1a; EXTI线0~15&#xff1a;对应外部IO口的输入中断。 EXTI线16&#xff1a;连接到PVD输出。 EXTI线17&#xff1a;连接到RTC闹钟事件。 EXTI线18&#xff1…

Kubernetes(k8s)实战:Kubernetes(k8s)部署Springboot项目

文章目录 一、练手&#xff1a;k8s部署部署wordpressmysql1、创建wordpress命名空间2、创建mysql数据库3、创建wordpress应用4、小结 二、实战&#xff1a;部署自己的springboot项目1、准备一个springboot项目2、使用docker打成镜像3、使用k8s部署springboot 三、实战&#xff…

pycharm配置虚拟环境

pychram配置虚拟环境&#xff0c;然后使终端在该目录下 win键r 输入cmd, 进入dos命令。使用conda create -n cleanRobot python3.7 创建cleanRobot虚拟环境。 输入&#xff1a; conda activate cleanRobot 进行虚拟环境激活。 我们在安装的anaconda的目录下可以看到刚刚建…

Java批量操作Excel文件实践

摘要&#xff1a;本文由葡萄城技术团队于CSDN原创并首发。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 前言 | 问题背景 在操作Excel的场景中&#xff0c;通常会有一些针对Excel的批量操作&…

基于matlab使用Grad-CAM探索语义分割网络(附源码)

一、前言 此示例演示如何使用 Grad-CAM 探索预训练语义分割网络的预测。 语义分割网络对图像中的每个像素进行分类&#xff0c;从而生成按类分割的图像。您可以使用深度学习可视化技术 Grad-CAM 来查看图像的哪些区域对像素分类决策很重要。 二、下载预训练网络 从剑桥大学…

基于Java工贸学生信息管理系统设计实现(源码+lw+部署文档+讲解等)

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

vscode多主题色功能实现机制

vscode的页面分为两部分&#xff0c;一部分是插件提供&#xff0c;一部分是主体。那么vscode在多主题实现上就要考虑把这两部分结合起来管理&#xff0c;相对来说要比单纯的网页实现多主题功能要复杂一些。 主体部分实现 我们先看下vscode主体部分样式是如何画出来了 registe…

Spring系列2 -- Spring的创建和使用

Spring 就是⼀个包含了众多工具方法的 IOC容器。既然是容器那么它就具备两个最基本的功能&#xff1a; 将对象存储到容器&#xff08;Spring&#xff09;中&#xff1b;从容器中将对象取出来。 在Java中对象也叫做Bean&#xff0c;后续我们就把对象称之为Bean&#xff1b; 目录…

数据结构--二叉树的定义和基本术语

数据结构–二叉树的定义和基本术语 二叉树的基本概念 二叉树是 n ( n ≥ 0 &#xff09; n (n\ge0&#xff09; n(n≥0&#xff09;个结点的有限集合: ①或者为 空二叉树 \color{red}空二叉树 空二叉树&#xff0c;即n 0。 ②或者由一个 根结点 \color{red}根结点 根结点和两…

ModaHub魔搭社区:腾讯发布的向量数据库Tencent Cloud VectorDB有哪些核心能力?

腾讯发布的向量数据库有哪些核心能力&#xff1f; 腾讯云刚刚发布的向量数据库Tencent Cloud VectorDB主要具备以下能力&#xff1a; 高性能向量存储、检索&#xff1a;腾讯云向量数据库具备高性能的向量存储和检索能力&#xff0c;单索引能够轻松支持10亿级别的向量规模。在…