标签：插件 Vue img 预览 hevue 多图 preview hevueImgPreview
安装
# 安装
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)', // 整体背景颜色
})
标签：插件,
Vue,
img,
预览,
hevue,
多图,
preview,
hevueImgPreview
From： https://www.cnblogs.com/aeolian/p/17362313.html