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

时间：2018-08-31 17:11:48 阅读：1788 评论：0 收藏：0 [点我收藏+]

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

　　　　　　　　}

　　　　　　]

　　　　}

原文地址：https://www.cnblogs.com/eva67/p/9566351.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行