眾所周知，常見的組件庫如Element、Ant Design，自帶的圖片預覽功能都沒有縮略圖，所以

需要單獨封裝一個圖片預覽的服務。

?第三方庫：v-viewer

安裝：?

npm install v-viewer viewerjs

若使用報錯，可安裝指定版本。

具體實現：

main.js

import Viewer from 'v-viewer'//引入圖片預覽
import 'viewerjs/dist/viewer.css'//引入圖片預覽//圖片預覽viewer
Vue.use(Viewer,{defaultOptions: {zIndex: 9999  // 需大于 dialog 默認值(通常 2000)}
})

用法：

export default {methods:{// 預覽圖片viewFn() {const images = ["https://picsum.photos/200/200","https://picsum.photos/300/200","https://picsum.photos/250/200"]let preIndex = 0;this.$viewerApi({images: images ,options: {initialViewIndex: preIndex,},});}, }}