在开发中,常常会遇到这样的需求,就是点击图片,可以放大预览。在网上找到了一款很好用的插件。拿来即用,不须要复杂的配置。特此记录下(这里只是针对于在vue脚手架下的使用方法)。css
一、安装依赖包。vue
npm install v-viewer --save
二、在main.js中配置以下: npm
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css' Vue.use(Viewer, { defaultOptions: { zIndex: 9999 } })
三、在须要使用图片查看的文件中使用以下:数组
<viewer :images="images"> <img v-for="src in images" :src="src" :key="src"> </viewer>
上面的images是一个数组,用来存放须要预览的图片的路径的。spa