elementplus 中 DatePicker 日期选择器样式修改无效

问题

遇到一个需求需要修改 DatePicker 日期选择器的样式,在添加了 scoped 属性的 style 标签,并且使用了 deep 样式穿透的情况下并不能修改其样式。

原因

DatePicker 日期选择器弹出面板默认挂载在 body 上,所以在组件中添加了 scoped 属性的 style 标签下是修改不到其样式的。

解决

官网中提供了一个给弹出面板设置 class 类名的属性——popper-class,通过该属性添加类名后选择该类名来修改样式即可。

在这里插入图片描述

需要注意的是,虽然官网提供了该属性,但是我们通过属性来修改样式的时候也并不能改变弹出面板是挂载在 body 的事实,所以我们要修改其样式的话需要把 scoped 属性去掉才行,我们可以添加一个新的不带 scoped 属性的 style 标签来对其样式进行修改。代码如下:

<template><el-date-pickerv-model="time"  type="datetime"placeholder="请选择时间"popper-class="date-cell"></el-date-picker>
</template><style scoped lang="scss">...//组件内部样式
</style><style lang="scss"> //去掉 scoped 属性...//时间选择器样式
</style>

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

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

相关文章

Java日期和时间学习记录2

1、Java的LocalDate类当前时间往未来几天和过去时间几天 import java.time.LocalDate;public class Main {public static void main(String[] args) {// 获取当前日期LocalDate currentDate LocalDate.now();System.out.println("当前日期&#xff1a;" currentDa…

【Fooocus 深度学习】SDXL,AIGC生图,源码解读

文章目录 使用通配符增加prompt多样性Fooocus的风格实现 使用通配符增加prompt多样性 prompt和negative_prompt都可以通过apply_wildcards函数来实现通配符替换&#xff0c;apply_wildcards会从txt中随机找一个出来。 promptsunshine, river, trees, __artist__ task_prompt …

vue2、vue3,生命周期详解

一、Vue2.x Vue2的生命周期 是指Vue实例从创建到销毁的整个过程中&#xff0c;会经历一系列的阶段和回调函数。它分为8个阶段&#xff0c;包括了组件的创建、挂载、更新和销毁等过程。 1、beforeCreate: 在实例初始化之后&#xff0c;但在数据观测和事件配置之前被调用。此…

使用ffmpeg转换索尼老DV拍摄的VOB文件为mp4

一些背景故事 最近对象想用 CCD 拍照录像&#xff0c;家里刚好有一台快 20 年前的索尼 DV DCR-DVD653E&#xff0c;就是电池老化充不进去电了。 翻出来之后还感慨了一下&#xff1a;当年没有网购&#xff0c;价格不透明&#xff1b;有些地方也没有官方店&#xff0c;只有一两家…

Linux笔记之bash脚本中的-e、和

Linux笔记之bash脚本中的-e、&和&& code review! 文章目录 Linux笔记之bash脚本中的-e、&和&&1.&和&&2.-e 1.&和&& 在Linux bash脚本中&#xff0c;&符号有几个不同的用途&#xff0c;这里列举了一些常见的情况&#xf…

js中的内置对象、数学对象、日期对象、数组对象、字符串对象

js中的对象&#xff08;三种&#xff09;&#xff1a; 自定义对象 car、computer DOM对象 div、p BOM对象 window、console 内置对象 数学对象 Math &#xff08;object类型&#xff09; 1、圆周率 Math.PI 2、向下取整(返回值) Math.floor() 3、向上取整(返回值) M…

年少不知 Base 好,错把总包当成宝。。

今天聊一个很现实的话题&#xff1a;选 offer 对比薪资时&#xff0c;我强烈建议以 Base 为主&#xff0c;而不是总包。 为什么&#xff1f;且听鱼皮娓娓道来。 注意&#xff0c;以下为个人观点&#xff0c;仅供参考&#xff01; 首先明确 Base 和总包的概念&#xff1a; Base&…

某马头条——day11+day12

实时计算和定时计算 流式计算 kafkaStream 入门案例 导入依赖 <dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-streams</artifactId><exclusions><exclusion><artifactId>connect-json</artifactId&…

美,英,法,德、意大利和西班牙的geojson,以及区域json

美&#xff0c;英&#xff0c;法&#xff0c;德、意大利和西班牙的geojson文件 json地址 https://pan.baidu.com/s/1nio1bV_j-jAEVqgEHXWsNw?pwdqwer#list/path/GEOJSON 感谢大佬提供的 大佬连接 大佬的知乎原地址 国内geojson获取工具地址 http://da![在这里插入图片描述](h…

【江科大】STM32:I2C通信外设(硬件)

在将2C通信外设之前&#xff0c;我们先捋一捋&#xff0c;串口的相关特点来和I2C进行一个对北比。 首先&#xff1a; 1,大部分单片机&#xff0c;设计的PCB板均带有串口通信的引脚&#xff08;也就是通信基本都借助硬件收发器来实现&#xff09; 2.对于串口的异步时序&#xff…

韩国访问学者申请注意事项

随着国际交流的增加&#xff0c;韩国成为许多学者追求学术深造的热门目的地之一。如果你计划成为一名韩国访问学者&#xff0c;以下是知识人网小编整理的一些需要注意的事项&#xff0c;以确保你的申请顺利进行。 1.详细了解目标学府&#xff1a;在开始申请之前&#xff0c;仔细…

Python进阶——文件及IO操作

一、文件的基本操作 创建文件对象和打开文件对象&#xff1a;open() def my_write():#(1)打开&#xff08;创建&#xff09;文件fileopen(Myqq.txt,w,encodingutf-8) #如果文件不存在&#xff0c;则在当前目录下创建一个文件名字为Myqq.txt#&#xff08;2&#xff09;操作文件f…

redis整合

一.redis的发布订阅 什么 是发布和订阅 Redis 发布订阅 (pub/sub) 是一种消息通信模式&#xff1a;发送者 (pub) 发送消息&#xff0c;订阅者 (sub) 接收消息。 Redis 客户端可以订阅任意数量的频道。 1、Redis的发布和订阅 客户端订阅频道发布的消息 频道发布消息 订阅者就可以…

matlab绘图杂谈-stem函数和plot函数

出发点 今天在论文中看到一副这样的图&#xff0c;它既有曲线&#xff0c;又有点&#xff0c;并且对两者都添加了图例。三条曲线应该是用plot函数绘制的&#xff0c;而target哪个绿色的圆圈&#xff0c;我的理解是用stem函数绘制的。它只是1个点&#xff0c;并且没有竖线&…

Linux文件管理技术实践

shell shell的种类(了解) shell是用于和Linux内核进行交互的一个程序&#xff0c;他的功能和window系统下的cmd是一样的。而且shell的种类也有很多常见的有c shell、bash shell、Korn shell等等。而本文就是使用Linux最常见的bash shell对Linux常见指令展开探讨。 内置shell…

ElasticSearch搜索引擎入门到精通

ES 是基于 Lucene 的全文检索引擎,它会对数据进行分词后保存索引,擅长管理大量的数据,相对于 MySQL 来说不擅长经常更新数据及关联查询。这篇文章就是为了进一步了解一下它,到底是如何做到这么高效的查询的。 在学习其他数据库的时候我们知道索引是一个数据库系统极其重要…

【基础配置】Python2/Python3并存安装配置教程

Nx01 产品简介 Python是一种高级的、解释型的、面向对象的通用编程语言&#xff0c;具有简单易学、代码可读性强、功能强大、可移植性好等特点。它可以应用于多种领域&#xff0c;如Web开发、数据科学、人工智能、机器学习、科学计算、自动化测试等。Python由Guido van Rossum于…

如何使用phpStudy软件测试本地PHP及环境搭建

各位同学朋友们大家好&#xff01;我是咕噜铁蛋&#xff01;我们经常需要在本地进行PHP代码的开发和测试。而phpStudy作为一个集成了Apache、MySQL和PHP的软件套装&#xff0c;提供了方便快捷的环境搭建和测试工具。今天铁蛋为大家详细介绍如何使用phpStudy来测试本地PHP及环境…

雨云服务器部署幻兽帕鲁PalWorld联机服务器详细教程

幻兽帕鲁是Pocketpair开发的一款开放世界生存制作游戏&#xff0c;游戏中&#xff0c;玩家可以在广阔的世界中收集神奇的生物“帕鲁”&#xff0c;派他们进行战斗、建造、做农活&#xff0c;工业生产等。 最近&#xff0c;这款游戏挺火&#xff0c;为了获得更好的游戏体验&…

Vue构建项目断点调试过程问题总结

Vue构建项目断点调试过程问题总结 问题背景 前端开发过程中&#xff0c;碰到问题时需要debug&#xff0c;快速分析和解决问题。一般除了console.log的方式打印日志外&#xff0c;更方便直观的方式就是打断点debug。本文对vue项目debug过程可能碰到的问题进行总结&#xff0c;…