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

我是在开发uni-app时测试的思路,大家可以借鉴一下。

我这边测试的是uni组件,但是我觉得即便你用element-plus之类的,样式击穿的思路都相同。

我自定义了一个全局样式scss文件,并引入到了项目中。(如图)

利用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变了,小程序没变,则需要重新编译项目,我这边测试有时候小程序无法实时展现样式效果。

相关推荐
小光学长10 分钟前
基于Vue的保护动物信息管理系统r7zl6b88 (程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
huangql52029 分钟前
截图功能技术详解:从原理到实现的完整指南
前端·html5
长空任鸟飞_阿康1 小时前
Node.js 核心模块详解:fs 模块原理与应用
前端·人工智能·ai·node.js
这儿有一堆花1 小时前
网站链接重定向原理
前端
麦麦大数据1 小时前
F029 vue游戏推荐大数据可视化系统vue+flask+mysql|steam游戏平台可视化
vue.js·游戏·信息可视化·flask·推荐算法·游戏推荐
cecyci1 小时前
如何实现AI聊天机器人的打字机效果?
前端·javascript
IT_陈寒1 小时前
Vite 5个隐藏技巧让你的项目构建速度提升50%,第3个太香了!
前端·人工智能·后端
詩句☾⋆᭄南笙1 小时前
HTML的盒子模型
前端·html·盒子模型
落言1 小时前
AI 时代的工程师:懂,却非懂的时代
前端·程序员·架构
一枚攻城狮2 小时前
前端知识点大汇总
前端