https://github.com/xLogic92/vue-picture-preview

一、vue-picture-preview (只能实现图片的预览，不能实现图片的放大功能)

安装

  1. yarn add vue-picture-preview

使用

  1. import vuePicturePreview from 'vue-picture-preview'
  2. Vue.use(vuePicturePreview)

在根组件中添加lg-preview组件的位置

  1. <div id="app">
  2.     <router-view></router-view>
  3.     <lg-preview></lg-preview>
  4. </div>
  1. <template>
  2.   <div class="home">
  3.   <template v-for="(item,index) of images"  >
  4.     <img
  5.       v-preview="item.imgUrl"
  6.       preview-title-enable="true"
  7.      preview-nav-enable="true"
  8.      :src="item.imgUrl" 
  9.      :alt="index+1+'/'+images.length" :key="item.id"/>
  10.   </template>
  11.   </div>
  12. </template>
  14. <script>
  15. import localData from "@/data/data.js";
  16. export default {
  17.   name: "home",
  18.   data(){
  19.     return {
  20.       images:localData
  21.     }
  22.   }
  23. }
  24. </script>
  25. <style scoped>
  26. .home{
  27.   display: grid;
  28.   grid-template-columns: repeat(2,350px);
  29.   grid-gap: 10px 10px;
  30. }
  32. </style>
  1. var localData = [
  2.     { imgUrl: "http://img1.qunarzz.com/sight/p0/1501/10/1012e4a2c398409c.water.jpg_350x240_56977146.jpg", id: 1000 },
  3.     { imgUrl: "http://img1.qunarzz.com/sight/p0/201405/27/94685f45252d4f782f6545a7586e9daa.jpg_350x240_bfb5f7e5.jpg", id: 1001 },
  4.     { imgUrl: "http://img1.qunarzz.com/sight/p0/201405/27/94685f45252d4f782f6545a7586e9daa.jpg_350x240_bfb5f7e5.jpg", id: 1002 },
  5.     { imgUrl: "http://img1.qunarzz.com/sight/p0/201301/14/c14bcd857b804ca393835fbb.jpg_350x240_d84595e3.jpg", id: 1234 },
  6.     { imgUrl: "http://img1.qunarzz.com/sight/p0/1509/fb/4bd1b1c83f5bc033ff36093b91294021.water.jpg_350x240_feb831ff.jpg", id: 1115 },
  7.     { imgUrl: "http://img1.qunarzz.com/sight/p0/1412/5c/b921bad6734a811e28c2c8f7a22f83ba.water.jpg_350x240_874af7bd.jpg", id: 1116 },
  8. ]

swiper.gif

二、vue-preview

支持滑动换图，支持手势缩放，显示当前时第几张和总共多少张

https://ls1231.github.io/vue-preview/

  1. yarn add vue-preview

Tips:字段要和官网的写成一样。