npm安装viewer组件
npm i v-viewer
在main.js中引入
import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)Viewer.setDefaults({//默认样式，可以按需求更改（默认可不写）Options: {'inline': true, // 启用 inline 模式'button': true, // 显示右上角关闭按钮'navbar': true, // 显示缩略图导航'title': true, // 显示当前图片的标题'toolbar': true, // 显示工具栏'tooltip': true, // 显示缩放百分比'movable': true, // 图片是否可移动'zoomable': true, // 图片是否可缩放'rotatable': true, // 图片是否可旋转'scalable': true, // 图片是否可翻转'transition': true, // 使用 CSS3 过度'fullscreen': true, // 播放时是否全屏'keyboard': true, // 是否支持键盘'url': 'data-source' // 设置大图片的 url}})
代码
<div class="func-right flex"><viewer><img :src="getImg" alt=""></viewer></div>//动态获取图片getImg(){return new URL('../../assets/images/qq-fance.jpg', import.meta.url).href}
