vue的缩略图vue-preview插件的使用

安装插件

npm i vue-preview -S

在入口文件中配置

import VuePreview from 'vue-preview'

Vue.use(VuePreview)

在页面中,也就是组件中的template中插入标签

<template>
  <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
</template>
//@close是当关闭放大的图片时触发事件
//slide1应该是要显示的数据,数组形式,数组中的每个对象中的属性名是固定的
//msrc的属性值是显示图片的地址,
//w:是放大显示图片的宽度
//h:是放大显示图片的高度

<script>
export default {
    data () {
      return {
        slide1: [
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
          }
        ]
      }
    },
    methods: {
      handleClose () {
        console.log('close event')
      }
    }
  }
</script>

使用时的数据一般都是通过ajax请求来的数据,获取的数据的属性名未必符合规范,
所以要遍历获取回来的数组,

arr.forEach(item=>{
	//为每一个对象添加w,h属性,并把图片的属性改为msrc
})

页面中样式的修改不要添加scoped