Vue preview plugin的使用

使用步骤

• 1.下载vue-preview

  • npm i vue-preview -S

• 2.导入vue-preview

  • import VuePreview from ‘vue-preview’

• 3.在vue中使用vue-preview

  • Vue.use(VuePreview)

• 4.使用vue-preview

  • a.在代码中插入html标签

   <!-- 缩略图 -->
          <div class="thumbs">
              <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
          </div>  
  

  • b. js配置代码

  <script>
  	export default {
  	    data () {
  	      return {
  	        slide1: [
  	          {
  	          /* 一般src和msrc是同一个地址*/
  	            src: '放大图片src',
  	            msrc: '缩略图片的src',
  	            alt: 'picture1',
  	            title: 'Image Caption 1',
  	            w: 600,//放大图片的宽度
  	            h: 400//放大图片的高度
  	          },
  	           {
  	          /*第二个照片*/
  	            src: '放大图片src',
  	            msrc: '缩略图片的src',
  	            alt: 'picture1',
  	            title: 'Image Caption 1',
  	            w: 600,//放大图片的宽度
  	            h: 400//放大图片的高度
  	          }
  	        ]
  	      }
  	    },
  	    methods: {
  	      handleClose () {
  	      //大图转换为小图调用的方法
  	        console.log('close event')
  	      }
  	    }
  	  }
  </script>
  
  

  • c. 配置css代码，注意，必须配置css代码缩略图才有效果

  .thumbs {
      /deep/ .my-gallery {
                  display: flex;
                  flex-wrap: wrap;
                  figure {
                      width: 30%;
                      margin: 5px;
                      img {
                          width: 100%;
                      }
                  }
              }
          }