在開發中,常常會遇到這樣的需求,就是點擊圖片,可以放大預覽。在網上找到了一款很好用的插件。拿來即用,不須要複雜的配置。特此記錄下(這裏只是針對於在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