使用element-plus组件,修改date-picker默认样式

news2025/4/4 14:43:44

使用深度选择器来修改子组件的样式,今天遇到一个需求,在el-drawer中嵌入的el-date-picker,再一次总结一下深度选择器的用法,需求如下:

template内容:

<el-drawer size="70%" v-model="drawer" title="选择年份" :show-close="false" direction="rtl">
   <el-date-picker v-model="selectedDate"  :disabledDate="disabledDate" type="year" placeholder="选择年"></el-date-picker>
</el-drawer>

使用lessscoped的CSS如下:

.el-input__inner{
    font-size: 26px;
}

目的是修改选择的年份的大小,让其显示为26px大小。结果运行代码,效果如下:

我们发现显示的年份字号并没有变大。我们同时添加字体颜色和对齐方式,以更清楚的看到效果,使用深度选择器进行控制。修改如下:

 

:deep(.el-input__inner){
    font-size: 26px;
    text-align: center;
    color:rgb(8, 101, 172) ;
}

运行效果如下:


总结深度选择器用法如下:

由于vue组件的封装目的是为了让组件之间不互相影响,着很好的解决了组件之间相互干扰的问题。但是同时也带来了一些问题:有时候又需要修改子组件的样式,此时vue中,我们可以使用深度选择器,在父组件中来影响子组件,从而解决这个问题。

  • CSS原生使用符号">>>"进行深度。
  • 在使用了CSS的预编译器时,
    1. VUE2中,可以使用/deep/或::v-deep进行深度选择
    2. VUE3中,推荐使用:deep(selector)进行深度选择

其他几个CSS相关的选择:

  • :slotted()

:slotted():在子组件定义样式插槽内容样式

默认情况下,作用域样式不会影响到 <slot/> 渲染出来的内容,因为它们被认为是父组件所持有并传递进来的。

<template>
  <div>
    <slot>插槽内容,如果外部给出,则替换掉</slot>
  </div>
</template>
 
<style lang="less" scoped>
:slotted(.blue) {
  color: blue;
}
</style>
  • :global()

:global() :全局选择器,定义全局样式,不用单开一个没有scoped的style。

<style scoped>
:global(.el-input__inner) {
    color: red;
}
</style>
<!-- 等效于 -->
<style>
 .el-input__inner{
     color:red
 }
</style>
  • 动态css(v-bind)

vue3单文件组件的 <style> 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态,也就是我们可以在style标签中引入script标签中的响应式变量。

<template>
    <span class='sc'>
        span 内容
    </span>
</template>
 
<script setup>
import { ref } from 'vue';
const redColor = ref('red')
 
</script>
 
<style scoped>
.sc{
    color: v-bind(redColor);
}
</style>

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

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

相关文章

ZVL3网络分析仪

ZVL3 Rohde&Schwarz ZVL3 3G矢量网络分析仪|罗德与施瓦茨 9KHz至3GHz 罗德与施瓦茨Rohde&Schwarz 性能特点&#xff1a; 频率范围 9kHz至3GHz/6 GHz(典型值为5kHz) 测量时间(201个测量点&#xff0c;以校准的双端口) <75ms 数据传输(201个测量点) 在100Mbit/sLAN…

自主机器人概述

自主机器人概述 自主机器人自主机器人应用案例自主机器人相关实验室 自主机器人 自主机器人定义&#xff1a;自主机器人就是一个机器人可以在没有外界干扰的情况下&#xff0c;具备高自动化程度&#xff0c;可以执行任务的机器人。 自主机器人组成&#xff1a;感知-规划-控制…

福建游乐园运营商金生游乐申请纳斯达克IPO上市,募资900万美元

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;来自福建南平的游乐园运营商金生游乐集团Golden Heaven Group Holdings Ltd &#xff0c;&#xff08;以下简称金生游乐&#xff09;&#xff0c;近期已向美国证券交易委员会&#xff08;SEC&…

智能面板小程序如何实现跨端开发,并无缝引入ChatGPT?

如何让开发者更便捷高效地开发面板小程序&#xff1f; 全球化 IoT 开发平台服务商涂鸦智能&#xff08;NYSE&#xff1a;TUYA&#xff0c;HKEX&#xff1a;2391&#xff09;原先提供的是一套基于 React Native (简称 RN) 的面板 SDK&#xff0c;但是随着面板规模的不断增长&am…

职场危机波及到你了吗?社科院与杜兰大学金融管理硕士项目为你重塑核心竞争力

现在职场&#xff0c;危机四伏&#xff0c;每个人都面临着潜在的危机。职场小白&#xff0c;时时忧心自己的工作是否出错&#xff0c;是否能安全度过试用期&#xff1b;面对新人辈出&#xff0c;职场的前辈也担心被拍在沙滩上。面对竞争激烈的职场&#xff0c;你有感到危机吗&a…

[Java]过滤器(Filter)

一、什么是过滤器 过滤器是Servlet的高级特性之一&#xff0c;是实现Filter接口的Java类&#xff01; 过滤器的执行流程&#xff1a; 从上面的图我们可以发现&#xff0c;当浏览器发送请求给服务器的时候&#xff0c;先执行过滤器&#xff0c;然后才访问Web的资源。服务器响应…

nginx简单使用与配置

nginx简单使用与配置 Nginx 是一个高性能的HTTP和反向代理web服务器、一个邮件代理服务器&#xff0c;一个通用的 TCP/UDP 代理服务器。支持FastCGI、SSL、Virtual Host、URL Rewrite、Gzip等功能。并且支持很多第三方的模块扩展。 前端可以通过nginx实现以下功能&#xff1a…

【项目实战课】基于Pytorch的YOLOv3工业缺陷检测实战

欢迎大家来到我们的项目实战课&#xff0c;本期内容是《基于Pytorch的YOLOv3工业缺陷检测实战》。所谓项目课&#xff0c;就是以简单的原理回顾详细的项目实战的模式&#xff0c;针对具体的某一个主题&#xff0c;进行代码级的实战讲解。 本次主题 目标检测是最基础的计算机视觉…

利用Resource Hacker简单去除WinRar广告-boldiy

利用Resource Hacker简单去除WinRar广告-boldiy boldiy关注IP属地: 江苏 2022.04.26 18:43:27字数 114阅读 315 下载 Resource Hacker 用软件打开WinRAR.exe 点击展开String Table image.png 打开80&#xff1a;2052 删除1277所在整行&#xff0c;并点击运行&#xff0…

百度地图开发者账号申请

本篇文章要完成的效果 一、百度地图开发者账号申请 官网 &#xff1a; 百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com) 没有的话注册一下 一般来说使用过百度云 就有百度账号 点击【控制台】——【我是个人爱好者/学生】 完善个人信息 —— 实名认证 再次返回首…

【逆天应用】如何用Python实现检测和识别车牌号?(详细教程)

文章目录 前言一、创建Python环境二、如何在您的计算机上安装Tesseract OCR&#xff1f;1.导入库2.获取输入2.获取输入3.在输入端检测车牌4.筛选轮廓5.遍历前30个轮廓5.识别检测到的车牌 三,显示输出总结 前言 车牌检测与识别技术用途广泛&#xff0c;可以用于道路系统、无票停…

ChatGPT 速通手册——连续提问和重新生成的作用

连续提问和重新生成的作用 和 ChatGPT 聊天&#xff0c;也是有套路的。我们把给 ChatGPT 输入的问题文本&#xff0c;叫 Prompt&#xff0c;提示词。实际上&#xff0c;传统搜索引擎也有比较相类似的功能。 在 Prompt Learning 提示学习之后&#xff0c;又总结出一种更好的聊…

【虚幻引擎UE】UE4/UE5 新人科普向

一、前言 Unreal Engine是当前最为流行的游戏引擎之一&#xff0c;具有丰富的游戏开发功能和强大的游戏引擎渲染能力。 二、基础 UE5官方文档&#xff1a;UE5官方文档非常详细&#xff0c;介绍了UE5的各个功能和应用&#xff0c;适合入门学习和深入探究。链接&#xff1a;htt…

Pytorch基础 - 0. Tensor数据类型与存储结构

目录 1. Tensor数据类型 2. Tensor存储结构 在讲PyTorch这个系列之前&#xff0c;先讲一下pytorch中最常见的tensor张量&#xff0c;包括数据类型&#xff0c;创建类型&#xff0c;类型转换&#xff0c;以及存储方式和数据结构。 1. Tensor数据类型 (1) 一共包括9种数据类型…

深度学习基础入门篇[六]:模型调优,学习率设置(Warm Up、loss自适应衰减等),batch size调优技巧,基于方差放缩初始化方法。

【深度学习入门到进阶】必看系列&#xff0c;含激活函数、优化策略、损失函数、模型调优、归一化算法、卷积模型、序列模型、预训练模型、对抗神经网络等 专栏详细介绍&#xff1a;【深度学习入门到进阶】必看系列&#xff0c;含激活函数、优化策略、损失函数、模型调优、归一化…

HIve安装配置(超详细)

文章目录 Hive安装配置一、Hive安装地址二、Hive安装部署1. 把 apache-hive-3.1.2-bin.tar.gz上传到Linux的/export/software目录下2. 解压apache-hive-3.1.2-bin.tar.gz到/export/servers/目录下面3. 修改apache-hive-3.1.2-bin.tar.gz的名称为hive4. 修改/etc/profile&#x…

如何用四元数表示姿态差

在机器人控制中&#xff0c;经常需要控制末端工具的姿态&#xff0c;如果用欧拉角表示姿态&#xff0c;会出现万向锁的问题&#xff0c;而使用四元数就不会有这个问题&#xff0c;此外四元数求出的姿态差为一个标量&#xff0c;更容易在RL算法中使用。 首先&#xff0c;假设末端…

初始化一个Vue3+TS项目

目录 一.创建基本的项目结构: 二. 项目搭建规范: 集成editorconfig配置: 使用prettier工具: 使用ESLint检测 : 项目目录结构划分: CSS样式的重置: 全家桶 – 路由配置: 全家桶 – 状态管理: 网络请求封装axios: 区分 development和production 环境: Element-Plus集成…

第1章、C++基础

第1章、C基础 1.1 命名空间 1.1.1 命名空间的含义 在使用C进行大规模程序设计时&#xff0c;开发过程往往是团队合作&#xff0c;各个程序员命名和各种C库&#xff0c;对标识符的命名可能发生冲突&#xff0c;从而引进命名空间&#xff08;一种特殊的域&#xff09;的概念&a…

MIPI D-PHYv2.5笔记(19) -- Fault Detection

声明&#xff1a;作者是做嵌入式软件开发的&#xff0c;并非专业的硬件设计人员&#xff0c;笔记内容根据自己的经验和对协议的理解输出&#xff0c;肯定存在有些理解和翻译不到位的地方&#xff0c;有疑问请参考原始规范看 检测链路的故障有三种不同的机制。总线冲突&#xff…