vue图片查看器,支持放大 缩小 还原

本文介绍了如何在Vue项目中结合Element-UI实现一个具备放大、缩小、翻转等操作的图片查看器。通过引入v-viewer插件,并设置相关配置,如启用inline模式、显示关闭按钮等。同时,提供了组件使用示例和样式调整方法,帮助开发者快速集成此功能。
摘要由CSDN通过智能技术生成

Vue中使用图片查看器


项目中使用的是 vue + element-ui 要求查看图片时能够实现 图片放大缩小翻转等功能,于是找到一个适合的插件,首先看下效果:

在这里插入图片描述
在这里插入图片描述

功能与我们设想的一样,下面看下如何使用
GitHub地址:viewerjs
官网:https://fengyuanchen.github.io/viewerjs/

如何使用

1、首先安装v-viewer

npm i v-viewer --save

如果安装不上 使用cnpm安装

2、然后main.js中引入 v-viewer

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
  }
})

可以将它作为一个组件:

<viewer class="container" :images="urlList">   //需要绑定放图片的数组,接收固定参数
        <div class="imgWrapper" v-if="urlList.length > 0">
            <div class="img" v-for="(item,index) of urlList" :key="index">
                <img v-if="isUrl" :src="item" alt="">
                <img v-else :src="item.url" alt="">
            </div>
        </div>
    </viewer>

设置下样式,就可以使用了
对于下面用不到的控件,找到class类名,弄掉就好了

<style lang="scss">
    .viewer-toolbar{
        .viewer-flip-horizontal{
            display:none;
        }
        .viewer-flip-vertical{
            display:none;
        }
    }
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值