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)', // 整体背景颜色
})
如果这篇文章对你有用，可以关注本人微信公众号获取更多ヽ(^ω^)ﾉ ~
