Vue插件图片预览hevue-img-preview

安装

# 安装
npm install hevue-img-preview --save

# main.js 引入
import hevueImgPreview from 'hevue-img-preview'
Vue.use(hevueImgPreview)

# 使用
#//给任意对象添加任意事件，例如
<img :src="imgurl" @click="previewImg(imgurl)">

#//在事件里调用方法进行预览
methods: {
    previewImg (imgurl) {
        this.$hevueImgPreview(imgurl)
    }
}

使用

//接收一个地址字符串
this.$hevueImgPreview(url)
this.$hevueImgPreview('https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg') // 线上地址
this.$hevueImgPreview('./img/logo.jpeg') // 本地地址
//接收一个对象
this.$hevueImgPreview(options)

单图预览

this.$hevueImgPreview({
    url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
    mainBackground: 'rgba(0, 0, 0, .5)', // 整体背景颜色
})

多图预览

this.$hevueImgPreview({
    multiple: true, // 开启多图预览模式
    nowImgIndex: 1, // 多图预览，默认展示第二张图片
    imgList: ['1.png', '2.png', '3.png'], // 需要预览的多图数组
    mainBackground: 'rgba(0, 0, 0, .5)', // 整体背景颜色
})