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

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>

vue图片查看器，支持放大缩小还原相关推荐

vue 图片查看器(可缩放，翻上下一页等)使用
NPM 1.安装 npm install vue-photo-preview --save 2.main.js引入 import preview from 'vue-photo-preview' im ...
前端实现图片查看器（滚轮放大，缩小，旋转）——Viewer.js
一.前端实现图片查看器(放大,缩小,旋转)--Viewer.js [附参考链接:(14条消息) Viewer.js第一次点击图片无法显示解决方案(vue使用)_李墨瞳的博客-CSDN博客] 1.0 J ...
windows照片查看器没了_Secondary Display Photo Viewer(图片查看器)下载
Secondary Display Photo Viewer(图片查看器)是一款非常棒的图片查看类软件哦,这款软件能够帮助用户们进行幻灯片的查看使用等,1大量的编辑功能也让用户们喜爱哦~ Second ...
C#制作一个图片查看器，具有滚轮放大缩小，鼠标拖动，图像像素化，显示颜色RGB信息功能
目录前言一.界面设计二.关键技术 1.把图片拖入到窗体并显示 2.实现图像缩放的功能 3.实现图像的移动效果 4.实时显示当前鼠标处的RGB值 5. 右击功能的实现 6.效果展示总结前言使 ...
view vue 存图片_小小vue2.0图片查看器
一个小小vue2.0的图片查看器组件闲暇下来封装了一个 vue2.0的图片查看器组件,通过这个更能方便清楚地查看列表的一张张图片.已经兼容 pc 跟移动端,通过 npm 来下载安装使用. This ...
图片查看器：Android支持图片查看、缩放、滑动的PhotoView
上效果: Android 图片查看器Demo效果导入PhotoView,导入Glide. maven { url "https://jitpack.io" }implementa ...
viewer.js图片查看器
viewer.js插件(vue) Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Vie ...
图片查看器 Viewer.js
插件简介 Viewer.js 是一款强大的图片查看器,提供了纯 JS 版本和 jQuery 版本,具有以下特点: 支持移动设备触摸事件支持响应式支持放大.缩小支持旋转(类似微博的图片旋转) 支持 ...
【React组件】写一个模仿蓝湖的图片查看器
前言最近公司让写一个可以自由拖拽放大的图片查看器,我寻思这还不简单,一顿操作猛如虎,俩小时后: 事实证明,一旦涉及到 DOM 的变换操作,如果很多细节考虑不全,抓过来就写,那基本就凉了.于是我仔细分 ...

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

Vue中使用图片查看器

如何使用

vue图片查看器，支持放大缩小还原相关推荐

最新文章

热门文章

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

Vue中使用图片查看器

如何使用

vue图片查看器，支持放大 缩小 还原相关推荐

最新文章

热门文章

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

vue图片查看器，支持放大缩小还原相关推荐