13、优化轮播图组件与vue深度处理器

本文介绍如何在Vue项目中使用深度作用选择器来改变轮播图组件的焦点颜色,包括定位问题、解决方案及最终效果展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言:上篇讲了vue里面轮播图组件的使用,还有有个小问题可以优化一下。
github:https://github.com/Ewall1106/mall

1、焦点问题

我们看到这里的焦点会有一个默认的颜色,改变这个焦点颜色也有一个小坑。

img_a918eed4df6747528bc12eb05d6706b2.png
问题所在

2、如何解决

(1)这里我们要用到vue的深度作用选择器,关于深度作用选择其详情看一看官网介绍:https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html

img_844b73f3d2e1e7bf905e632923998b1d.png
vue官网

(2)用开发者工具找到这个点的class类名

img_c8af6dcb6f19dc73edf3d24fbab8072c.png
tools

(3)使用深度选择器把这个点变为白色

img_3b2753c938d227a37ff1daab72fe111d.png
深度选择器

ps:less里面不能用 >>> 这样写。

3、ok,最后的浏览器的效果就是这样了,perfect

img_db3b5b7314b314048e88d937875facaa.png
最终轮播图效果

参考学习
https://www.jianshu.com/p/4f92c4461e3d
https://github.com/surmon-china/vue-awesome-swiper
http://www.swiper.com.cn/api/index2.html
https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值