27、有赞Vant组件库的引入及轮播图片预览的实现②
【27、有赞Vant组件库的引入及轮播图片预览的实现②】前言：上一章主要是安装并引入了vant组件库；这章我们完成商品详情页轮播图片的预览功能。其实图片预览功能自己写也很简单，我可能比较懒。。。1、图片预览组件ImagePreview
Github：https://github.com/Ewall1106/mall
这个vant组件与其它组件的引入方式不同，不需要在
main.js中引入，直接在页面中引入即可：ImagePreview和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式，使用前需要先引入它。
文章图片
引入 2、使用
（1）首先我们为轮播图添加点击事件
文章图片
为轮播图添加点击事件 （2）然后我们使用
ImagePreview组件实现图片预览的功能（当点击图片的时候调用），实现的方式很简单， 直接传入图片数组即可实现图片预览
文章图片
传入图片数组实现图片预览 （3）最后还有一点小问题，就是dot焦点的颜色与我们主题色不符合
文章图片
焦点颜色不对
- 这个问题其实我们在13章优化轮播图组件与vue深度处理器这一章时已经碰到过了，解决的方法还是使用vue深度处理器；
- 通过开发者工具查询页面的html结构，我们发现这个dot焦点名为
van-swipe__indicator--active，位于标签下；
文章图片
F12开发者工具
- 所以我们需要在
App.vue中使用vue深度处理器改变这个焦点的颜色，把它设置为我们的主题色。
文章图片
改变焦点色 3、小结
至此，我们使用vant组件完成图片预览的功能就完全实现了；是不是很简单？反正比自己写应该简单多了。
文章图片
轮播图片预览的实现
推荐阅读
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- Shell-Bash变量与运算符
- 清明，是追思、是传承、是感恩。
- 牛人进化+|牛人进化+ 按自己的意愿过一生
- 七老修复好敏感、角质层薄、红血丝
- 华为旁！大社区、地铁新盘，佳兆业城市广场五期！
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 螃蟹和这些食物同吃，轻则腹泻、重则中毒！要小心哦~
- 八、「料理风云」