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

news/2024/4/24 23:57:15/

使用深度选择器来修改子组件的样式,今天遇到一个需求,在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.ppmy.cn/news/48015.html

相关文章

Golang微服务一把嗦 用户微服务集成主流最新go技术栈

声明&#xff1a;此文章为博主个人学习记录&#xff0c;仅供学习和交流&#xff0c;如有侵权请联系博主。 前言 前段时间&#xff0c;因为本地k8s环境一直出问题&#xff0c;线上云环境也用不起&#xff0c;&#xff08;后面搞定了再慢慢学习&#xff09;所以就暂时搁置了k8s学…

【C/C++】GDB 快速定位虚函数表并获取详情信息

文章目录 在GDB中&#xff0c;可以使用以下命令来查看虚函数表&#xff1a; 首先&#xff0c;使用GDB调试程序&#xff0c;并在程序运行到需要查看虚函数表的地方停下来。 然后&#xff0c;使用命令“p /x (long)object”来查看对象的地址。这个命令会输出对象的地址&#xff…

DHCP原理与配置

目录 一、DHCP工作原理 1&#xff09;了解DHCP服务 使用DHCP的好处 DHCP的分配方式 2&#xff09;DHCP的租约过程 分为四个步骤 二、DHCP服务器的配置 1&#xff09;检查并且安装dhcp有关软件包 2&#xff09;查看系统的配置文件&#xff0c;并且利用好官方给的参考案…

一起学 Java(三) 集合框架、数据结构、泛型

一、Java 集合框架 集合框架是一个用来代表和操纵集合的统一架构。所有的集合框架都包含如下内容&#xff1a; 接口&#xff1a;是代表集合的抽象数据类型。接口允许集合独立操纵其代表的细节。在面向对象的语言&#xff0c;接口通常形成一个层次。实现&#xff08;类&#x…

注册功能编写--购物车拓展

教程给出的模板在登录板块的功能不够齐全&#xff0c;正常情况下我们还应该有一个注册功能。所以这次我来写一个注册功能。 1、给登录的jsp页面添加相关超链接按钮&#xff0c;顺便把页面内容通过css改一改。然后再写一个负责注册的jsp 2、在userdao中再写一个方法负责给user表…

leetcode刷题--辅助工具

idea插件 插件商店搜索leetcode&#xff0c;可以让你利用idea调试leetcode的题目 插件首先需要填写用户名密码登录&#xff0c;登录上就可以在idea搜题、做题、提交等 注意&#xff1a; 一些版本登录可能登录失败&#xff0c;解决方法是换leetcode地址为leetcode.cn。 有些可…

灵活可扩展,2023年值得尝试的13款富文本编辑器

作为前端开发人员&#xff0c;我们经常需要为网站和应用程序添加文本内容。与传统的文本编辑器不同&#xff0c;富文本编辑器可让您轻松创建各种类型的文本内容&#xff0c;包括加粗字体、斜体字、框架、列表、图片和视频等。 本文我将向大家推荐 13 款开源的灵活可拓展的富文…

前端研发提质增效利器,TypeScirpt成功迁移详解

点击蓝字&#x1f446; 关注Agilean&#xff0c;获取一手干货 直播预告&#xff1a;Adapt 系列直播又双叒叕来啦&#xff01;最新一期我们将围绕「版本分支与环境」进行深入探讨&#xff0c;欢迎大家来直播间和主播互动哟&#xff5e; 点击下方右上角红色按钮「预约」&#x1f…

基于java进行收藏功能的实现

1.首先进行建表 大部分点赞都是文章&#xff0c;帖子&#xff0c;或者商品的收藏&#xff0c;然后登录用户进行收藏&#xff0c;创建表的话需要文章&#xff0c;帖子&#xff0c;或者商品的id和用户的id&#xff0c;我这里是文章postId和ud 2.接下来就是代码层面的实现 ourc…

探索 Qt WebEngineWidgets:从底层原理到高级应用与技巧

探索 Qt WebEngineWidgets&#xff1a;从底层原理到高级应用与技巧 (Exploring Qt WebEngineWidgets: From Fundamentals to Advanced Applications and Techniques 一、Qt WebEngineWidgets 模块简介及原理 (Introduction and Principles of Qt WebEngineWidgets Module)1. Qt…

(2023)Admob广告实践笔记

开屏 官方最佳实践 最好等到您的用户使用您的应用几次后&#xff0c;再展示您的第一个应用打开广告。在您的用户等待您的应用加载的时间展示应用打开广告。如果您在应用打开广告下方有一个加载屏幕&#xff0c;并且您的加载屏幕在广告关闭之前完成加载&#xff0c;您可能需要…

Jetson Nano (4GB)烧写jetbot Image

一、Image下载 1、官方下载&#xff0c;浏览器访问Using SD Card Image - JetBot&#xff0c;下载jetbot-043_nano-4gb-jp45.zip。 注意&#xff1a;通过此方式下载需要电脑能访问外网。 2、天翼网盘下载&#xff0c;https://cloud.189.cn/t/q2mUJv7jaIna &#xff08;访问码…

对字符串的所有子串的字符种类数求和

题目描述 给定一个长度为n的字符串&#xff0c;求该字符串的所有子串的字符种类数。 暴力方法 遍历所有子串&#xff0c;每次求每个子串的字符种类数&#xff0c;然后求和。 时间复杂度 O ( n 2 ) O(n^2) O(n2) DP 这个之前是真没想过&#xff0c;直到看到了大佬的思路 大…

拼多多的天天618,如何掀开电商营销的“皇帝新衣”?

电商价格战如火如荼&#xff0c;拼多多也在2023年4月正式启动“数码家电消费季”百亿补贴。 首季将在百亿补贴的基础上加码10亿&#xff0c;对手机、平板等各种数码家电&#xff0c;提供全品类补贴&#xff0c;苹果、华为、小米、美的等国内外各大品牌均会参与。拼多多相关负责…

穿拖鞋的汉子考研分享

不打无准备的仗&#xff0c;提前做好攻略&#xff0c;事半功倍&#xff01; 方向一&#xff1a;择校经验 俗话说选择比努力更重要&#xff0c;当自己的方向对了&#xff0c;主要是选择本专业的学校方面&#xff0c;会让自己有更好的收获。 自己从事的工科方向&#xff0c;学习…

【参考文献不爆红】Word的多个参考文献连续交叉引用([1] [3]改为[1-3])

文章目录 1. 参考文献格式2. 引入参考文献3. Word的多个参考文献连续交叉引用&#xff08;[1] [3]改为[1-3]&#xff09;3.1引入两个参考文献3.2 引入三个参考文献3.3 知识科普 1. 参考文献格式 参考教程 全选参考文献–>编号的小三角–>自定义编号&#xff0c;修改为[]…

Elasticsearch 实战篇 | 黑马旅游

一、酒店搜索和分页 需求&#xff1a;实现黑马旅游的酒店搜索功能&#xff0c;完成关键字搜索和分页 1、定义实体类&#xff0c;接收前端的参数 如果当搜索条件为空的时候&#xff0c;就返回全部数据&#xff0c;不为空才按照key来搜索 二、条件过滤 修改实体类&#xff0c;…

云计算实战应用案例精讲-【深度学习】多模态融合(最终篇)

目录 前言 算法原理 多模态深度学习中的网络结构设计和模态融合方法 图注意力机制

MySQL-双主高可用

目录 &#x1f341;拓扑环境 &#x1f341;配置两台MySQL主主同步 &#x1f343;修改MySQL配置文件 &#x1f343;配置主从关系 &#x1f343;测试主主同步 &#x1f341;keepalived高可用 &#x1f343;keepalived的安装配置 &#x1f343;master配置 &#x1f343;slave配置 …

Python中子类__init__函数注意项小结

1. 引言 许多同学在开始学习Python中的面向对象编程时&#xff0c;对于子类的构造函数的初始化操作&#xff0c;经常会感到些许困惑&#xff0c;这里我来试图让它不那么令人困扰。 闲话少说&#xff0c;我们直接开始吧&#xff01; 2. 准备工作 在面向对象编程中&#xff0c…