【前端】[vue3] [uni-app] 组件样式击穿:deep

在这里插入图片描述

在这里插入图片描述

  • 利用vue3 中的 deep 方式击穿,我这边测试了三个击穿方式,主要用了uniApp的uni-icon组件进行演示:

(如图,我项目中用了 uni-icon 组件,一个是type=right 一个是type=download-filled):
在这里插入图片描述

  1. 第一种:在自定义的全局样式文件中,针对icon的type=download-filled 进行color变色:
    在这里插入图片描述
    –效果:项目中icon组件所有type=download-filled的图标变色了,而其它type的图标没变色–
    效果

  2. 第二种:在当前页面文件中,针对icon的type=right 进行color变色:

    在这里插入图片描述

–效果:只针对当前页面,并且style标签中加上了 【scoped】。 左侧图标没变色,右侧向右箭头图标 变色了,–
在这里插入图片描述

  1. 第三种:在自定义全局样式文件中,定义全局所有icon组件的color变色,无论type是多少,统一变成一种颜色:
    在这里插入图片描述
    –效果:无论type是多少,颜色全都变了–
    在这里插入图片描述

注意:如果你和我一样在开发uni-app项目,在做这种全局样式变更时,如果修改完发现h5变了,小程序没变,则需要重新编译项目,我这边测试有时候小程序无法实时展现样式效果。

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

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

相关文章

Java使用poi生成word文档的简单实例

Java使用poi生成word文档的简单实例 生成的效果如下: 用到的poi的简单的知识 新建一个word对象 //新建文件 XWPFDocument document new XWPFDocument();新建段落以及文字样式 //创建段落 XWPFParagraph paragraph document.createParagraph(); paragraph.se…

收银系统源码-开源收银系统-私有化独立部署

千呼新零售2.0-支持OEM私有化独立部署和全开源源码 千呼新零售2.0-支持OEM私有化独立部署和全开源源码 千呼新零售2.0-支持OEM私有化独立部署和全开源源码 千呼新零售2.0-支持OEM私有化独立部署和全开源源码 如需了解请私信交流

电脑系统重装怎么操作?分享四个win10重装系统方法

“我遇到了一些笔记本电脑的问题,别人告诉我解决这个问题需要重新安装Win10电脑系统。但我不记得我把光盘放在哪里了,我能否在不丢失文件的情况下重新安装操作系统?电脑系统重装怎么操作?”虽然电脑自带系统中有多种方法可供选择&…

【最佳实践】前端如何搭建自己的cli命令行工具,让自己编码的时候如虎添翼

作为前端开发人员,搭建自己的前端CLI工具是一个有趣且有意义的事情。以下是一篇详细的教程,包括使用场景和案例。 使用场景 假设你是一个前端团队的一员,需要频繁地在不同的项目中执行一些标准化的任务,比如: 根据模…

【02-02】SpringMVC基于注解的应用

一、请求处理 1、常用注解 RequestMapping 作用:用来匹配客户端发送的请求(用来处理URL映射,将请求映射到处理方法中),可以在类或者方法上使用。 用在类上,可以将请求模块化,避免请求方法中的…

前端 Array.sort() 源码学习

源码地址 V8源码Array 710行开始为sort()相关 Array.sort()方法是那种排序呢&#xff1f; 去看源码主要是源于这个问题 // In-place QuickSort algorithm. // For short (length < 22) arrays, insertion sort is used for efficiency.源码中的第一句话就回答了我的问题…

微软发布Phi-3系列语言模型:手机端的强大AI助手

大模型&#xff08;LLMs&#xff09;在处理复杂任务时展现出的巨大潜力&#xff0c;但却需要庞大的计算资源和存储空间&#xff0c;限制了它们在移动设备等资源受限环境中的应用。微软公司最新发布的Phi-3系列语言模型&#xff0c;以其卓越的性能和小巧的体积&#xff0c;打破了…

FairGuard游戏加固无缝兼容 Android 15 预览版

2024年6月25日&#xff0c;谷歌发布了 Android 15 Beta 3 &#xff0c;作为Android 15 “平台稳定性”的里程碑版本&#xff0c;谷歌建议所有应用、游戏、SDK、库和游戏引擎开发者都将“平台稳定性”里程碑版本作为规划最终兼容性测试和公开发布的目标。 安卓开发者博客提供的版…

积分的可视化

积分的可视化 flyfish 考虑平方根函数 f ( x ) x f(x) \sqrt{x} f(x)x ​&#xff0c;其中 x ∈ [ 0 , 1 ] x \in [0, 1] x∈[0,1] 。在区间 [ 0 , 1 ] [0, 1] [0,1] 上&#xff0c;函数 f f f 下方的面积是指函数 y f ( x ) y f(x) yf(x) 的图像与 x x x 轴之间的部…

【微服务网关——中间件实现】

1.中间件的意义 避免成为if狂魔提高复用、隔离业务调用清晰、组合随意 2.实现原理 中间件一般都封装在路由上&#xff0c;路由是URL请求分发的管理器中间件选型 基于链表构建中间件 基于责任链的实现缺点&#xff1a;实现复杂&#xff0c;调用方式不灵活 使用数组构建中间件 控…

cad怎么导出为图片?分享四种导出方法

cad怎么导出为图片&#xff1f;在工程设计、建筑设计、机械设计等领域&#xff0c;CAD图纸的编辑和分享是一项日常工作。然而&#xff0c;如何将CAD图纸高效、准确地导出为图片格式&#xff0c;一直是设计师们关注的焦点。今天&#xff0c;就为大家推荐四款强大的CAD导出图片软…

连接Huggingface报requests.exceptions.SSLError错误

最近在学习使用 SHAP 算法解释 BERT 模型的输出结果&#xff0c;然而在从 Huggingface 上导入模型和数据集的过程中出现了网络连接相关的错误&#xff0c;本文用于记录错误类型和解决错误的方法。 1 代码示例 SHAP 官方展示的代码如下&#xff1a; import datasets import nu…

企业微信内嵌H5项目接入聊天功能

产品需求是,在列表中把符合条件的列表接入聊天功能,以下是详细步骤: 1.引入企业微信 <script src"https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js"></script> 2.获取wx签名(必须要) /*** 获取wx签名**/ export function getWxJsApi(data) {r…

如何在信创领域中做好防泄露

随着信息技术的迅猛发展&#xff0c;数据安全和防泄露成为了企业和政府机构面临的重大挑战。在信创&#xff08;Creative and Innovative Intelligent Products&#xff09;领域中&#xff0c;沙箱技术以其独特的隔离和保护机制&#xff0c;成为了防泄露的关键手段之一。 一、沙…

上古世纪战争台服官网地址+台服预约+预创建角色教程

上古世纪战争台服上线啦&#xff0c;在《上古世纪战争》中&#xff0c;通过主要势力和地区&#xff0c;剧情和角色可以想起原作。《上古世纪战争》的主要背景为&#xff0c;原大陆消失之后&#xff0c;完成移民的种族们定居在诺伊大陆之后遇到的多个势力之间的冲突。同时&#…

鸿蒙期末项目(4)

day4 页面的设计与编写基本完成&#xff0c;接下来使用我们之前搭建好的服务器与相关的网络接口将鸿蒙中的逻辑真正实现一下。 在实现购物车页面展示功能时&#xff0c;使用了如下代码&#xff1a; getCartList(uid: number): Promise<CartItem[]> {return new Promise…

MTK平台Android13实现三方launcher为默认

一、前言 目前有遇到客户的定制需求,希望使用三方的launcher作为默认的launcher使用,一般情况下直接将三方launcher通过内置到系统并通过overlay机制即可很方便的实现launcher的替换,但是存在一个问题,需要增加ROM的维护成本。本文通过设备在使用前联网通过后台下发三方lau…

基于SpringBoot的财务管理系统

根据您提供的论文内容和模板要求&#xff0c;以下是定制化的文章输出&#xff1a; 你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a; Java 数据库&#xff1a; MySQL 技术&#xff1a; SpringBoot…

沙龙圆满举行 | 数据资产入表新动向·驱动企业新质生产力!

近日&#xff0c;由四川智慧城市发展联盟、璞华科技有限公司等公司主办的“数据治理与入表专题沙龙会”在成都圆满落幕。璞华科技有限公司作为数据治理、数据资产入表领域的领军企业&#xff0c;为此次盛会贡献了我们的专业见解与实战经验。 沙龙现场&#xff0c;业内精英齐聚一…

Redis优化之持久化

目录 1.Redis高可用 2.Redis持久化 2.1 RDB持久化 2.1.1 触发条件 2.1.2 执行流程 2.1.3 启动时加载 2.2 AOF持久化 2.2.1 开启AOF 2.2.2 执行流程 2.2.3 文件重写触发方式 2.2.4 文件重写的流程 2.2.5 启动时加载 2.3 RDB和AOF的优缺点 3.Redis性能管理 3.1 查看…