Vue 中使用 viewerjs

时间：2024-11-10 11:36:38

安装 viewerjs

npm install viewerjs --save

创建一个 Viewer.vue 组件

<template>

    <div id="index">

        <ul>

            <li v-for="(item, index) in imgArr"

                :key="index">

                <img :src="item" />

            </li>

        </ul>

        <p>测试测试测试</p>

        <p>测试测试测试</p>

        <p>测试测试测试</p>

        <p>测试测试测试</p>

        <img :src="imgArr[2]" />

    </div>

</template>

<script>

import Viewer from 'viewerjs';

import 'viewerjs/dist/viewer.css';

export default {

    name: 'Viewer',

    data() {

        return {

            imgArr: [

                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538988692454&di=a6086c2c80a99ec0a50ed3696776f39e&imgtype=0&src=http%3A%2F%2Fpic165.nipic.com%2Ffile%2F20180522%2F12398452_105538125000_2.jpg',

                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539582468&di=78699558c94fff160ae1fa5cc73be9fa&imgtype=jpg&er=1&src=http%3A%2F%2Fpic166.nipic.com%2Ffile%2F20180522%2F12398452_105521854000_2.jpg',

                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538987750399&di=8c77894bad73fbc3c1c82ebde9309ff2&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3D09e9a51105f41bd5ce5ee0b438a2e4a7%2Ffaedab64034f78f083c1d8c972310a55b2191cc5.jpg',

                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538987750397&di=70b58f375170a335264545cdea00aec9&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3D79013c1e743e6709aa0d4dbf52bffa51%2Fb7fd5266d0160924759f6222df0735fae6cd3455.jpg',

                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538987750397&di=106be7a370b48812e9e7ed19e9c8eb16&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3D896dc4cbde62853586edda61f99713aa%2Fd009b3de9c82d158de82e7888b0a19d8bc3e4282.jpg'

            ]

        };

    },

    mounted() {

        const ViewerDom = document.getElementById('index');

        const viewer = new Viewer(ViewerDom, {

            // 配置

        })

    },

}

</script>

<style lang="less">

#index {

    width: 100%;

    ul {

        li {

            width: 24%;

            height: 200px;

            margin-right: 1%;

            margin-bottom: 20px;

            cursor: pointer;

            display: inline-block;

            &:nth-child(4n) {

                margin-right: 0;

            }

            img {

                height: 100%;

                width: 100%;

                object-fit: cover;

            }

        }

    }

}

</style>

支持的键盘事件

仅在modal mode 下可用

  • ESC 键：退出全屏、关闭、退出、停止播放
  • Space 键：停止、播放
  • ← 键：查看上一张图片
  • → 键：查看下一张图片
  • ↑ 键：放大图片
  • ↓ 键：缩小图片
  • Ctrl + 0 组合键：缩小到初始大小
  • Ctrl + 1 组合键：放大到原始大小

参数配置

如果要改变全局的默认样式，可以使用 Viewer.setDefaults(options)

参数名称 参数类型 默认值 说明
initialViewIndex Number 0 定义用于查看的图像的初始索引
inline Boolean false 支持 inline mode
button Boolean true 是否显示查看图片时右上角的关闭按钮
navbar Boolean / Number true 是否显示底部导航栏 
0 或者 false :不显示 
1 或者 true :显示 
2 :当屏幕宽度大于768px时显示 
3 :当屏幕宽度大于992px时显示 
4 :当屏幕宽度大于1200px时显示
title Boolean / Number /
Function / Array		 true 0 或者 false 时不显示
1或者true或者function或者array时显示
2 :当屏幕宽度大于768px时显示 
3 :当屏幕宽度大于992px时显示 
4 :当屏幕宽度大于1200px时显示
function 在函数体内返回标题
array 第一个参数表示可见性(0-4) 第二个参数就是标题
toolbar Boolean / Number / Object true 标题栏是否显示和布局 
0 或者 false 时不显示
1或者true或者时显示
2 :当屏幕宽度大于768px时显示 
3 :当屏幕宽度大于992px时显示 
4 :当屏幕宽度大于1200px时显示 
tooltip Boolean true 放大或缩小时显示的百分比的文字提示
true : 显示 
false : 不显示
movable Boolean true 是否可以拖动图片
zoomable Boolean true 是否可以缩放图片
rotatable Boolean true 是否可以旋转图片
scalable Boolean true 是否可以缩放图片
transition Boolean true 为一些特殊元素启用CSS3转换。
fullscreen Boolean true 允许全屏播放
keyboard Boolean true 启用键盘支持
backdrop Boolean / String true 启用 modal 为false的时候不支持点击背景关闭
loading Boolean true 加载图片的时候的loading图标
loop Boolean true 是否可以循环查看图片
interval Number 5000 定义图片查看器的最小的宽度
minWidth Number 200 定义图片查看器的最小的高度
minHeight Number 100 播放图片时 距离下一张图片的间隔时间
zoomRatio Number 0.1 利用鼠标滚轮缩放图片时的比例
minZoomRatio Number 0.01 缩小图片的最小比例
maxZoomRatio Number 100 放大图片的放大比例
zIndex Number 2015 定义查看器的CSS z-index值 modal 模式下
zIndexInline Number 0 定义查看器的CSS z-index值 inline 模式下
url String / Function src 原始图像URL
如果是一个字符串，应该图像元素的属性之一
如果是一个函数，应该返回一个有效的图像URL
container Element / String body 将查看器置于modal模式的容器 
只有在 inline为 false的时候才可以使用
filter Function null 过滤图像以便查看(如果图像是可见的，应该返回true)
toggleOnDblclick Boolean true 当你放大或者缩小图片时 双击还原
ready Function null 当查看图片时被触发的函数 只会触发一次
show Function null 当查看图片时被触发的函数 每次查看都会触发
shown Function null 当查看图片时被触发的函数 每次查看都会触发 在show之后
hide Function null 当关闭图片查看器时被触发的函数 每次关闭都会触发
hidden Function null 当关闭图片查看器时被触发的函数 每次关闭都会触发 在hide之后
view Function null 当查看图片时被触发的函数 每次查看都会触发 在shown之后
viewed Function null 当查看图片时被触发的函数 每次查看都会触发 在view之后
zoom Function null 在图片缩放时触发
zoomed Function null 在图片缩放时触发 在 zoom之后

toolbal Object 详解

key值名称 说明
zoomIn 放大图片的按钮
zoomOut 缩小图片的按钮
reset 重置图片大小的按钮
prev 查看上一张图片的按钮
next 查看上一张图片的按钮
play 播放图片的按钮
rotateLeft 向左旋转图片的按钮
rotateRight 向右旋转图片的按钮
flipHorizontal 图片左右翻转的按钮
flipVertical 图片上下翻转的按钮

gitgub 地址：https://github.com/fengyuanchen/viewerjs#options

官网地址：https://fengyuanchen.github.io/viewerjs/

相关文章