vue pc端图片放大预览功能组件 v-viewer

第一步：命令行执行，下载组件

npm install v-viewer --save

第二步：在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' }
})

第三步：在页面中使用

anliList必须是数组形式，不然会报错

<viewer :images="anliList"> 
    <img
        v-for="(src,index) in anliList"
        :src="src"
        :key="index"
        :onerror="errorImg"
        class="slimg"
    >
</viewer>

---

Options配置项

'inline': true, // 是否启用inline模式

'button': true, // 是否显示右上角关闭按钮

'navbar': true, // 是否显示缩略图底部导航栏

'title': true, // 是否显示当前图片标题，默认显示alt属性内容和尺寸

'toolbar': true, // 是否显示工具栏

'tooltip': true, // 放大或缩小图片时，是否显示缩放百分比，默认true

'fullscreen': true, // 播放时是否全屏，默认true

'loading': true, // 加载图片时是否显示loading图标，默认true

'loop': true, // 是否可以循环查看图片，默认true

'movable': true, // 是否可以拖得图片，默认true

'zoomable': true, // 是否可以缩放图片，默认true

'rotatable': true, // 是否可以旋转图片，默认true

'scalable': true, // 是否可以翻转图片，默认true

'toggleOnDblclick': true, // 放大或缩小图片时，是否可以双击还原，默认true

'transition': true, // 使用 CSS3 过度，默认true

'keyboard': true, // 是否支持键盘，默认true

'zoomRatio': 0.1, // 鼠标滚动时的缩放比例，默认0.1

'minZoomRatio': 0.01, // 最小缩放比例，默认0.01

'maxZoomRatio': 100, // 最大缩放比例，默认100

'url': 'data-source' // 设置大图片的 url