Vue 中的图片预览插件 v-viewer的使用

vue图片点击放大预览v-viewer库使用

https://github.com/mirari/v-viewer github地址。

1.安装配置

npm install v-viewer --save

 

2.在main.js中引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

//Vue.use(Viewer) 默认配置写法
Vue.use(Viewer, {
    defaultOptions: {
        zIndex: 9999
    }
})

3.在页面中使用

<template>
    <viewer :images="images">
       <img v-for="src in images" :src="src" :key="src" width="300">
    </viewer>
</template>

<script type="text/ecmascript-6">
    export default {
        name: "images",
        data() {
            return {
                images : []
            }
        },
        created() {
            //图片是从后台查的
            this.getData()
        },
        methods: {
            getData() {
                var _this = this
                _this.$http.get('/admin/attach/product')
                    .then(function (response) {
                        _this.images = response.data.data
                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            }
        }
    }
</script>

 

images 数组里的格式很简单，就是图片地址，没有多余的参数。

[
        "http://oss.tdcloud.trmap.cn/producephoto/1807181752/2c9180845e18bf9b015e19f1d3440010/别墅.jpg",
        "http://oss.tdcloud.trmap.cn/producephoto/1807311736/2c9180845e18bf9b015e19f1d3440010/201803190613566108.png",
        "http://oss.tdcloud.trmap.cn/producephoto/1807311736/2c9180845e18bf9b015e19f1d3440010/1248064370052.jpg",
        "http://oss.tdcloud.trmap.cn/producephoto/1807311737/2c9180845e18bf9b015e19f1d3440010/201709260737493750.png"
    ]

转载地址：https://yq.aliyun.com/articles/635813