README
图片大图预览
element的图片预览组件
基本使用
npm install v-image-viewer
main.js
import ImageViewer from 'v-image-viewer';
Vue.use(ImageViewer)
或者
<image-viewer
v-if="showViewer"
:on-close="closeViewer"
:url-list="testImgList">
</image-viewer>
import {ImageViewer} from 'v-image-viewer';
data() {
return {
showViewer: false,
testImgList: [
'https://img.xiaopiu.com/userImages/img7159694579f0.jpeg',
'http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/2/thumb.jpg',
'http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/6/thumb.jpg'
]
}
},
components: {
ImageViewer
},
methods: {
onPreview() {
this.showViewer = true
},
closeViewer() {
this.showViewer = false
}
}
api
props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
initialIndex | 展示第几张图片 | Number | 0 |
loading | 加载提示 | Boolean | false |
on-close | 点击右上关闭或空白地方关闭触发的方法 | function | |
urlList | 图片列表数组 | Array | [] |
zIndex | 层级 | Number | 0 |