v-viewer图片预览插件，可以放大需要预览的图片

文章目录

一、页面效果

更多内容和效果在官网地址查看，官网地址：v-viewer

二、使用步骤

1.npm安装

npm install [email protected]

2.main.js文件中全局引入v-viewer插件

代码如下：

import Viewer from'v-viewer'
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.完整代码

我这里写了常用的三种使用方式，页面效果我只是简单的布局，不要在意这个小细节，下面是代码：

<template><div><!--    第一种方式--><div style="width: 100%;height: 300px;margin-top:100px;display:flex;justify-content: center"><viewer :images="photo"><img
            v-for="(src, index) in photo":src="src":key="index"
            style="width: 200px;height: 300px;margin-left: 10px"/></viewer></div><!--    第二种方式--><img
        src="https://inews.gtimg.com/om_bt/OtJhl6_zArzI6BSdVjGLfKGObnrm36gW47dFuaxSOmT7YAA/1000"
        style="width: 300px;height: 200px;margin: 100px auto;display: block"
        v-viewer alt=""/><!--    第三种方式--><button style="margin: 100px auto;display: block" type="button"class="button" @click="previewURL">点击展示图片</button></div></template><script>exportdefault{name:"test",data(){return{photo:['https://wxls-cms.oss-cn-hangzhou.aliyuncs.com/online/2024-04-18/218da022-f4bf-456a-99af-5cb8e157f7b8.jpg','https://inews.gtimg.com/om_bt/O6SG7dHjdG0kWNyWz6WPo2_3v6A6eAC9ThTazwlKPO1qMAA/641']}},methods:{previewURL(){const $viewer =this.$viewerApi({images:this.photo
      })},}}</script><style scoped></style>