做网站的公司金坛七台河网站seo

众所周知，常见的组件库如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,},});}, }}