前端网站实现图片放大功能

1,npm install v-viewer --save
2,在main.js 中注册引用

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


Vue.use(Viewer);
Viewer.setDefaults({
    Options: {
        "inline": true,
        "button": true,
        "navbar": true,
        "title": true,
        "toolbar": true,
        "tooltip": true,
        "movable": true,
        "zoomable": true,
        "rotatable": true,
        "scalable": true,
        "transition": true,
        "fullscreen": true,
        "keyboard": true,
        "url": "data-source"
    }
})

3，运用在组件中
event.enclosureList ：照片列表

<viewer :images="event.enclosureList">
                                <div v-for="(item,id) in event.enclosureList" :key="id">
                                    <img :src="item"/>
                                </div>
                            </viewer>