13、优化轮播图组件与vue深度解决器

作者 : 开心源码 本文共504个字,预计阅读时间需要2分钟 发布时间: 2022-05-11 共85人阅读

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

1、焦点问题

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

问题所在

2、如何处理

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

vue官网

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

tools

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

深度选择器

ps:less里面不可以使用 >>> 这样写。

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

最终轮播图效果

参考学习
https://www.songma.com/p/4f92c4461e3d
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

上一篇 目录 下一篇

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 13、优化轮播图组件与vue深度解决器

发表回复