uni-app 学习笔记:使用深度选择器修改第三方库组件的样式

在uni-app中,深度选择器(Deep Selector)是一个非常重要的概念,它允许父组件穿透样式隔离,从而修改子组件的内部样式。

1.什么是uni-app深度选择器

深度选择器是一种CSS选择器,用于穿透组件的样式隔离机制,使得父组件能够选中并修改子组件内部的DOM元素样式。在uni-app中,由于默认启用了样式隔离,直接使用普通CSS选择器往往无法选中子组件内部的元素,这时就需要使用深度选择器。

2. 如何使用uni-app深度选择器

在uni-app中,使用深度选择器的方法是在父组件的 <style scoped> 标签中使用 ::v-deep(Vue 3推荐写法)或 >>>(旧版Vue写法)来指定要穿透的样式。以下是一个使用 ::v-deep 的示例:

在很多app中都会出现如上图所示的选择标签的效果,在该Demo 中,标签栏(红框内部分)使用的是第三方组件 me-tabs ,me-tabs 组件的代码里,选中的标签文字和指示器的颜色写死了为红色:

但在实际开发中,高亮颜色一般都是需要我们自定义的。这时候我们有三种选择。

选择一:修改 me-tabs 组件代码,让它支持通过传参自定义高亮颜色(本人是uni-app的初学者,水平比较菜,怕改出问题。况且,这个组件还是比较简单的,如果遇到复杂的组件,就不一定好改了)。

选择二:换一个支持通过传参自定义高亮色的标签栏组件。

我选择了第三种方式,即通过 深度选择器 对第三方组件进行样式覆盖。

3.深度选择器的使用场景

1.覆盖子组件的样式 :当你想要修改子组件的样式,但又不希望改动子组件本身的代码时,可以使用 ::v-deep。

2.第三方库组件的样式修改 :当你使用第三方库提供的组件,而这些组件的样式不符合你的设计需求时,::v-deep 可以帮助你进行样式的自定义。

所以,我在Demo 该页面的 <style scoped> 标签中,使用 ::v-deep 添加如下代码:

成功覆盖修改了标签栏选中文字的高亮颜色为蓝色,如下图所示效果。

修改指示器的颜色思路也是一样的,在这就不多说了。

4.注意事项和可能遇到的问题

谨慎使用 ‌:深度选择器会穿透样式隔离,因此应谨慎使用,避免不必要的全局样式污染。
‌性能考虑 ‌:深度选择器可能会导致样式匹配变得更加复杂,从而增加渲染性能的开销。在性能敏感的场景中,应尽量避免使用。

兼容性‌:不同版本的Vue或uni-app可能对深度选择器的支持有所不同。在使用时,请确保你的项目环境支持该特性。不是所有的uni-app组件都支持样式穿透。因此,在使用深度选择器之前,应该查阅相关组件的文档,了解其是否支持该特性。

相关推荐
iOS阿玮1 天前
国庆假期 iOS 开发者守好邮箱 “防线”,严防恶意投诉避免产品下架
uni-app·app·apple
00后程序员张1 天前
iOS App 混淆实战,在源码不可用情况下的成品加固与测试流程
android·ios·小程序·https·uni-app·iphone·webview
isixe1 天前
Uniapp IOS 和 Android 下的文件写入用户目录
前端·uni-app
2501_916013741 天前
iOS 26 设备文件管理实战指南,文件访问、沙盒导出、系统变更与 uni-app 项目适配
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_915921431 天前
前端用什么开发工具?常用前端开发工具推荐与不同阶段的选择指南
android·前端·ios·小程序·uni-app·iphone·webview
2501_916007471 天前
iOS 26 能耗检测实战指南,升级后电池掉速是否正常 + KeyMob + Instruments 实时监控 + 优化策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_916013741 天前
苹果上架 App 全流程详解,iOS 应用发布步骤、ipa 文件上传工具、TestFlight 测试与 App Store 审核经验
android·ios·小程序·https·uni-app·iphone·webview
2501_915909061 天前
HTML 开发工具有哪些?常用 HTML 开发工具推荐、学习路线与实战经验分享
android·小程序·https·uni-app·iphone·webview
fionlsq2 天前
uniapp集成原生安卓开发的插件
android·uni-app·小组件