vue项目-- 缩略图、预览

缩略图、预览

预览:https://github.com/Ls1231/vue-preview

安装：

npm i vue-preview -S 

<ul class="mui-table-view mui-grid-view mui-grid-9">             <li v-for="(img,index) in imgs"  :key="index"  class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">                 <!-- <img :src="img.src"> -->                  <img class="preview-img" :src="img.src" height="100" @click="$preview.open(index, imgs)">             </li> </ul> <script> //缩略图     this.$ajax.get('getthumimages/' + pid)     .then(res=>{         this.imgs = res.data.message;         //forEach         this.imgs.forEach((ele)=>{             ele.w=300;             ele.h=200;//缩率图显示的高         })     })     .catch(err=>{         console.log(err)     }); </script> 

main.js

//VuePreview:引入vue-preview import VuePreview from 'vue-preview' Vue.use(VuePreview); 

文章来源: https://blog.csdn.net/weixin_42235173/article/details/90765610