arco disign vue 日期组件的样式穿透

问题描述:

对日期组件进行样式穿透.
原因分析: 如图,日期组件被展开时它默认将dom元素挂载到body下, 我们的页面在id=root的div 里层, 里层想要穿透外层是万万行不通的.
在这里插入图片描述

解决问题:

其实官网提供了参数,但是并没有提供例子, 只能自己摸索着过河.
在这里插入图片描述
对于日期组件穿透样式,我们能用到的属性只有trigger-props,它需要一个Trigger的参数,
通过搜索,Trigger是一个触发器, 它的主要作用是 点击某一处会触发一个面板, 可能日期组件底层用的就是这个, :trigger-props 接收的是targert 参数, 所以Trigger组件内的所有参数和方法,我们都可以传入.
在这里插入图片描述
在这里插入图片描述

进行样式穿透,我们只用到了Trigger组件的content-class参数, 它的作用是,我们可以指定一个class类名,

在这里插入图片描述

它会将其绑定到日期的div的class内, 这样我们就可以 通过这个class类名为起点,对日期组件进行样式穿透.
在这里插入图片描述

在这里插入图片描述

特别注意:

由于日期面板挂载到body下, 我们不能在style 标签内加scoped, 如果存在这个属性,样式不会被生效, 如果没有这个属性,样式会生效.而且它的作用是全局的, 整个项目所有用到日期组件的地方都会被改变

如何不更改全局的日期样式

我们如果只想在需要的日期组件更改样式, 就设置日期参数:trigger-props,并指定一个class类名, 通过这个类名进行穿透, 这样就不会影响其他的日期组件. 当然这个class类名要在整个项目里做到唯一, 如果产生相同的类名,那么样式会相互影响. 因为即便你定义了class类名,但是style标签 不允许加scoped, 它的作用依旧是全局, 所以要保证class类名的唯一性.

实现代码

<template><a-range-picker :trigger-props="targetProps"> </a-range-picker>
</template>
<script lang="ts" steup>import { TriggerProps } from '@arco-disign/web-vue';const targetProps: TriggerProps = {contentClass: 'mydate',}
</script><style lang="less">/* 选定日期范围后 控制日期范围左右两边背景色圆角*/.mydate .arco-picker-cell-in-range {border-radius: 50%;}/* 日期范围区域的背景色 */.mydate .arco-picker-cell-in-range .arco-picker-date{background-color: rgba(245,134,134,0.808);}/*选择范围开始的样式,修改背景色*/.mydate .arco-picker-cell-range-start .arco-picker-date-value {background-color: rgba(205, 9,9, 0.979);}/*选择范围结束的样式,修改背景色*/.mydate .arco-picker-cell-range-end .arco-picker-date-value {background-color: rgba(205, 9,9, 0.979);}/* 当天日期下面有个小圆点 样式 */mydate .arco-picker-cell-today::after {background-color: red;}/* bug 会被影响全局 日期显示input 的边框 */.arco-picker-focused, .arco-picker-focused:hover {border-color:red;}</style>

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

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

相关文章

【TensorFlow深度学习】自我编码器的演变:从基础AE到变分AE模型

自我编码器的演变&#xff1a;从基础AE到变分AE模型 一、基础自我编码器&#xff1a;维度的压缩与重构二、变分自我编码器&#xff1a;从确定性到概率性三、理论与实践的桥梁&#xff1a;变分推理与KL散度四、变分AE的应用拓展五、结论 自我编码器&#xff08;Autoencoder, AE&…

GEO数据挖掘-富集分析、TinyArray简化流程、多组样本分析more

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 富集分析一些理论知识具体代码 富集不到的补救措施更多资料---问题数据和常见错误分析Part4-复杂数据及其分析多分组数据分析流程 tinyarray简化版本分析流程多分组…

如何高效安全的开展HPC数据传输,保护数据安全?

高性能计算&#xff08;HPC&#xff09;在多个行业和领域中都有广泛的应用&#xff0c;像科学研究机构、芯片IC设计企业、金融、生物制药、能源、航天航空等。HPC&#xff08;高性能计算&#xff09;环境中的数据传输是一个关键环节&#xff0c;它涉及到将数据快速、安全地在不…

DJYGUI AI低代码图形编程开发平台:开启嵌入式软件图形编程新纪元

在科技高速发展的当今时代&#xff0c;软件开发行业对创新和高效的需求日益增长。DJYGUI AI低代码图形编程开发平台的出现&#xff0c;为智能屏、物联屏、串口屏等嵌入式显示设备领域带来了全新的机遇。该平台由都江堰操作系统 AI 代码自动生成平台研发&#xff0c;具有显著的优…

Java中如何使用正则表达式进行字符串匹配和替换?

在Java中&#xff0c;你可以使用java.util.regex包中的正则表达式功能进行字符串匹配和替换。以下是一些基本的使用方法&#xff1a; ### 字符串匹配 你可以使用Pattern和Matcher类来进行正则表达式匹配。下面是一个简单的例子&#xff1a; java import java.util.regex.Patt…

匈牙利命名法,类变量

类变量指的是生存周期在类里的变量&#xff0c;除了这个类就没人认它。网上有很多说的和匈牙利命名法不一致&#xff0c;说静态变量和类变量就是差不多的&#xff0c;其实不是。【面向对象-05】什么是类变量、实例变量、以及区别_类变量和实例变量区别-CSDN博客

【嵌入式操作系统(Linux篇)】实验期末复习(1)

以下是关于嵌入式操作系统&#xff08;Linux篇&#xff09;的实验汇总&#xff0c;大概率都是会考的 特别是shell程序和文件IO的操作 嵌入式操作系统实验小结—涉及期末大题 &#xff08;一&#xff09;Linux操作系统的使用实验 1、认识Linux操作系统的目录结构 请进入自己…

代理IP如何助力旅游信息聚合?

在数字化时代&#xff0c;旅游信息聚合对于提升服务质量、优化用户体验起着至关重要的作用。随着在线旅游预订的普及&#xff0c;旅游信息的采集、整合和呈现成为了一个复杂而关键的过程。在这个过程中&#xff0c;代理IP技术以其独特的优势&#xff0c;为旅游信息聚合提供了强…

APP项目测试 之 开发模型和发布

项目客户端一般分为&#xff1a;浏览器端和APP端 APP端分为&#xff1a;手机端&#xff08;安装在手机上的软件&#xff09;和PC端&#xff08;安装在电脑上的软件&#xff09; 1.开发模型 项目迭代速度不同&#xff1a;开发模型不一样 传统行业&#xff1a;瀑布模型 互联网行业…

[数据集][目标检测]水面垃圾水面漂浮物检测数据集VOC+YOLO格式3749张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;3749 标注数量(xml文件个数)&#xff1a;3749 标注数量(txt文件个数)&#xff1a;3749 标注…

MySQL 死锁处理

查询是否锁表 SHOW OPEN TABLES WHERE In_use > 0; 查看正在锁的事务 SELECT * FROM INFORMATION_SCHEMA.INNODB_LOCKS; 查看等待锁的事务 SELECT * FROM INFORMATION_SCHEMA.INNODB_LOCK_WAITS; 查看进程信息 SHOW PROCESSLIST; 或者 SELECT * FROM INFORMATION_SCHE…

vue2axios的使用

1.安装axios npm i axios 2.配置代理服务器 1.在config.js中配置单个代理服务器 // 开启代理服务器 需要重新启动项目devServer: {proxy: http://localhost:5000}配置简单&#xff0c;请求资源时直接发给前端&#xff08;8080&#xff09;即可&#xff1b;但不能配置多个代理…

Java SPI服务发现与扩展的利器

Java中&#xff0c;为了实现模块之间的解耦和可扩展性&#xff0c;我们常常需要一种机制来动态加载和替换实现。Java SPI就是这样一种机制&#xff0c;它允许我们在不修改原有代码的情况下&#xff0c;为接口添加新的实现&#xff0c;并在运行时动态加载它们。 SPI&#xff0c…

ORB-SLAM2同OpenMVS实现三维重建

ORB-SLAM2 位姿导出 Note: 为与OpenMVS进行对接本次进对ORB-SLAM2进行部分修改&#xff0c;使之可以为 OpenMVS提供稀疏点云、关键帧的位姿、内参&#xff0c;以及稀疏点云在各个View 中的可见性。 主要更改如下 . 在Map文件下增添如下函数 public: void Save(const string &a…

iOS shouldRecognizeSimultaneouslyWithGestureRecognizer 调用机制探索

shouldRecognizeSimultaneouslyWithGestureRecognizer 经常会看到&#xff0c;但是一直没有弄清楚其中的原理和运行机制&#xff0c;今天专门研究下 其运行规律 我们准备三个视图&#xff0c;如下&#xff0c;红色的是绿色视图的父视图&#xff0c;绿色视图 是蓝色视图的父视图…

Feign 配置全局日志存入mongo

1、开启feign日志 在application.yml 添加配置 feign:client:config:default:loggerLevel: FULL2、日志实体类 Document(collection "feignLogs") Data public class FeignLog {Idprivate String id;private String method;private String url;private LocalDate…

fake.js的使用

fake.js&#xff08;也称为 Fake.js&#xff09;是一个用于生成大量逼真数据的JavaScript库&#xff0c;它可以帮助开发者在开发和测试阶段快速生成模拟数据。这个库特别适用于前端开发中的原型设计、测试和占位内容的生成。 以下是 fake.js 的一些主要特性&#xff1a; 多种…

CTF-PWN-LLVM-【红帽杯-2021 simpleVM】

文章目录 参考检查逆向漏洞思路调试定位到PASS名exp 参考 https://bbs.kanxue.com/thread-274259.htm#msg_header_h2_6 http://www.blackbird.wang/2022/08/30/LLVM-PASS%E7%B1%BBpwn%E9%A2%98%E6%80%BB%E7%BB%93/ 检查 因为是用opt运行&#xff0c;加载动态库VMPASS.so的P…

开源模型应用落地-FastAPI-助力模型交互-WebSocket篇(四)

一、前言 使用 FastAPI 可以帮助我们更简单高效地部署 AI 交互业务。FastAPI 提供了快速构建 API 的能力,开发者可以轻松地定义模型需要的输入和输出格式,并编写好相应的业务逻辑。 FastAPI 的异步高性能架构,可以有效支持大量并发的预测请求,为用户提供流畅的交互体验。此外,F…

基于STM32的智能花园灌溉系统

目录 引言环境准备智能花园灌溉系统基础代码实现&#xff1a;实现智能花园灌溉系统 4.1 数据采集模块4.2 数据处理与分析4.3 控制系统实现4.4 用户界面与数据可视化应用场景&#xff1a;花园灌溉管理与优化问题解决方案与优化收尾与总结 1. 引言 智能花园灌溉系统通过使用ST…