項目開發(fā)中經(jīng)常遇到圖片點擊放大的需求援制，剛好框架一直用的是vue戏挡，這里說一下vue-photo-preview的使用，適用于PC端和移動端晨仑，另一款photoswipe點擊放大看這里
1褐墅、如果是webpack打包的項目：
- 首先安裝vue-photo-preview
npm install vue-photo-preview --save
- 引入，在main.js文件里
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)
- 在需要使用的文件里洪己，在img標(biāo)簽添加preview屬性 preview值相同即表示為同一組
<img v-for="(img,img_index) in c_item.imgList" :key="img_index" :src="img" :preview="1" />
由于這里的imgList是動態(tài)獲取的妥凳，所以在成功請求到數(shù)據(jù)后在加上this.$previewRefresh()重置
效果如下：
效果圖
2、純引入vue.js的文件使用vue-photo-preview：
- 下載vue-photo-preview.js (整個項目都需要放入你的文件目錄答捕，不能只保存js文件逝钥，需要skin)
- 引入：
<script src="dist/vue-photo-preview.js"></script>
- 使用同1，動態(tài)獲取imgList時需要this.$previewRefresh();
<!--html-->
<img src="img1.png" alt="" :preview="1">
<img src="img2.png" alt="" :preview="1">
<img src="img3.png" alt="" :preview="1">
/*JS:*/
var options={
fullscreenEl:false //關(guān)閉全屏按鈕
};
Vue.use(vuePhotoPreview,options);
new Vue({ ... })
