v-image-viewer

图片预览

Usage no npm install needed!

<script type="module">
  import vImageViewer from 'https://cdn.skypack.dev/v-image-viewer';
</script>

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

events

methods