图片预览组件
- 这个vant-ImagePreview 组件与其它组件的引入方式不同,不需要在
main.js
中引入,直接在页面中引入即可:
ImagePreview和其他组件不同,不是通过HTML结构的方式来使用,而是通过函数调用的方式,使用前需要先引入它。
简单使用
- 首先我们为轮播图添加点击事件:
- 然后我们使用
ImagePreview组件
实现图片预览的功能(当点击图片的时候调用),实现的方式很简单, 直接传入图片数组即可实现图片预览
- 最后还有一点小问题,就是dot焦点的颜色与我们主题色不符合
- 这个问题其实我们在优化轮播图组件与vue深度处理器这一章时已经碰到过了,解决的方法还是使用vue深度处理器;
- 通过开发者工具查询页面的html结构,我们发现这个dot焦点名为
van-swipe__indicator--active
,位于<body></body>
标签下;
- 所以我们需要在
App.vue
中使用vue深度处理器改变这个焦点的颜色,把它设置为我们的主题色。
小结
- 至此,我们使用vant组件完成图片预览的功能就完全实现了: