27、有贊Vant元件庫的引入及輪播圖片預覽的實現②
摘要：
前言：上一章主要是安裝並引入了vant元件庫；這章我們完成商品詳情頁輪播圖片的預覽功能。其實圖片預覽功能自己寫也很簡單，我可能比較懶。。。
Github： https://github.com/Ewall1106/mall
1、圖片預覽元件ImagePreview
這個 va...
前言：上一章主要是安裝並引入了vant元件庫；這章我們完成商品詳情頁輪播圖片的預覽功能。其實圖片預覽功能自己寫也很簡單，我可能比較懶。。。
Github： https://github.com/Ewall1106/mall
1、圖片預覽元件ImagePreview
這個 vant元件 與其它元件的引入方式不同，不需要在 main.js 中引入，直接在頁面中引入即可：
ImagePreview和其他元件不同，不是通過HTML結構的方式來使用，而是通過函式呼叫的方式，使用前需要先引入它。
引入
2、使用
（1）首先我們為輪播圖新增點選事件
為輪播圖新增點選事件
（2）然後我們使用 ImagePreview元件 實現圖片預覽的功能（當點選圖片的時候呼叫），實現的方式很簡單， 直接傳入圖片陣列即可實現圖片預覽
傳入圖片陣列實現圖片預覽
（3）最後還有一點小問題，就是dot焦點的顏色與我們主題色不符合
焦點顏色不對
- 這個問題其實我們在13章 優化輪播圖元件與vue深度處理器 這一章時已經碰到過了，解決的方法還是使用vue深度處理器；
- 通過開發者工具查詢頁面的html結構，我們發現這個dot焦點名為
van-swipe__indicator--active，位於<body></body>標籤下；
F12開發者工具
- 所以我們需要在
App.vue中使用vue深度處理器改變這個焦點的顏色，把它設定為我們的主題色。
改變焦點色
3、小結
至此，我們使用vant元件完成圖片預覽的功能就完全實現了；是不是很簡單？反正比自己寫應該簡單多了。
輪播圖片預覽的實現