@dailoge/vue-image-preview

使用方式

导入

• 1 import { showPreView } from '@dailoge/vue-image-preview'
• 2 直接引入dist/build.js，暴露在window的对象名称是VuePreview，此对象下面有同样的方法

使用

showPreView({
    imageList: [
        'https://placekitten.com/600/400',
        'https://placekitten.com/1100/500',
        'https://placekitten.com/1000/600',
        'https://placekitten.com/1200/700',
        'https://placekitten.com/1400/800',
    ],
    index: 3,
    showOptions: ['fullScreen', 'zoom', 'download', 'rotate'],
    closeCallback: () => {}
})

在需要的时候调用这个函数即可

* imageList: 图片列表， 必传

同时还支持

[
    {
        src: 'path/to/image1.jpg', // path to image
        w: 1024, // image width
        h: 768, // image height
        msrc: 'path/to/small-image.jpg', // small image placeholder,
        title: 'Image Caption'
    },
    {
        src: 'path/to/image2.jpg',
        w: 600,
        h: 600
    }
]

index: 首屏展示哪张图片，从0开始，默认为0

showOptions: 支持功能的配置化，对用的功能分别是全屏、缩放、下载、旋转，默认支持所有功能

closeCallback: 照片墙关闭的回调函数

事例