有赞Vant组件库的引入及轮播图片预览的实现

分手后的思念是犯贱 2023-02-21 12:59 47阅读 0赞

## 有赞Vant组件库的引入及轮播图片预览的实现 ##

### 1、图片预览组件ImagePreview ###

这个[vant组件][vant]与其它组件的引入方式不同，不需要在`main.js`中引入，直接在页面中引入即可：

ImagePreview和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式，使用前需要先引入它。

![img][]

### 2、使用 ###

（1）首先我们为轮播图添加点击事件

![img][img 1]

为轮播图添加点击事件

（2）然后我们使用`ImagePreview组件`实现图片预览的功能（当点击图片的时候调用），实现的方式很简单， 直接传入图片数组即可实现图片预览

![img][img 2]

传入图片数组实现图片预览

（3）最后还有一点小问题，就是dot焦点的颜色与我们主题色不符合

![img][img 3]

这个问题其实我们在13章[优化轮播图组件与vue深度处理器][vue]这一章时已经碰到过了，解决的方法还是使用vue深度处理器；

通过开发者工具查询页面的html结构，我们发现这个dot焦点名为`van-swipe__indicator--active`，位于\`\`标签下；

![img][img 4]

F12开发者工具

*  所以我们需要在`App.vue`中使用vue深度处理器改变这个焦点的颜色，把它设置为我们的主题色。

![img][img 5]

### 3、小结 ###

至此，我们使用vant组件完成图片预览的功能就完全实现了；是不是很简单？反正比自己写应该简单多了。

![img][img 6]

[vant]: https://youzan.github.io/vant/#/zh-CN/image-preview
[img]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yODkxMTI3LTliZDE0YmM2YWFlNzVhNDQucG5n?x-oss-process=image/format,png
[img 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yODkxMTI3LWM3YTM3MWJmZjI5ZjRmY2YucG5n?x-oss-process=image/format,png
[img 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yODkxMTI3LWQ3OTMzZWYxZTRjODhjNTkucG5n?x-oss-process=image/format,png
[img 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yODkxMTI3LTZmYjg2MTlhZDNkNTQxZmYucG5n?x-oss-process=image/format,png
[vue]: https://www.jianshu.com/p/480062706465
[img 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yODkxMTI3LTAwZmI2YzBjMjhkNWZiZDgucG5n?x-oss-process=image/format,png
[img 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yODkxMTI3LWYyOTMwMGMzMjI1YTI1NDcucG5n?x-oss-process=image/format,png
[img 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yODkxMTI3LTg5OTYwMjQ2NDExNjFkZWUuZ2lm