vue-preview移动端图片全屏详细查看

1.下载安装

npm install vee-preview --save

2.main.js 添加

 

//图片浏览插件
import VuePreview from ‘vue-preview‘

3.组件template中使用

<vue-preview :slides="slide1"></vue-preview>
 
 

 4.定义data里面的数据数组,包括图片地址,大小等

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
        }
      ]
    }
  },

vue-preview移动端图片全屏详细查看

上一篇:PHP+Redis 实例【一】点赞 + 热度


下一篇:Appium+python自动化测试过程中问题