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

相关推荐
呆呆没有脑袋几秒前
深入浅出 JavaScript 闭包:从核心概念到框架实践
前端
snakeshe10101 分钟前
用100行代码实现React useState钩子:多状态管理揭秘
前端
爱编程的喵1 分钟前
JavaScript闭包深度解析:从作用域到实战应用
前端·javascript
雪碧聊技术1 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了1 小时前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭2 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
zengzehui2 小时前
uniapp启动图被拉伸问题
uni-app
无我Code2 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟2 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light2 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js