Vue2实现图片预览功能 -- v-viewer:图片查看器

一. 先看效果图

 

二. 具体步骤

简介:一款基于 viewer.js 封装的Vue版插件,可用于图像查看,以及图片的旋转、缩放等功能预览

官网:v-viewer

文档说明:Vue图片浏览组件v-viewer,支持旋转、缩放、翻转等操作 - Mirari's Blog

GitHub 下载地址:https://github.com/mirari/v-viewer

1. v-viewer插件安装

npm install v-viewer --save

2. main.js配置:

import Viewer from 'v-viewer'//图片预览
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({Options: { 'zIndex': 9999,'inline': true, //启用lnline模式'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}
})

 

3. 页面使用 

<viewer><img :src="url" :key="url"/>
</viewer>

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/105613.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ultra-Fast-Lane-Detection-v2 裁剪数据增强

目录 标注拆分为独立文件加载并数据增强 Ultra-Fast-Lane-Detection-v2 裁剪数据增强 main方法是调用示例

Android Studio的笔记--HttpURLConnection使用GET下载zip文件

HttpURLConnection使用GET下载zip文件 http get下载zip文件MainActivity.javaAndroidMainfest.xmlactivity_main.xmllog http get下载zip文件 MainActivity.java 用HttpURLConnection GET方法进行需注意&#xff1a; 1、Android 9及以上版本需要设置这个&#xff0c;否则会有…

网络爬虫实践小结

背景 近期工作中要解决两个问题&#xff0c;一个是数据组需要网爬一些图片数据&#xff0c;另外一个是要批量爬取公司用于文档协同的一个网站上的附件。于是乎&#xff0c;就写了两个脚本去完成任务。 爬虫思路 第一步&#xff1a;向确定的url发送请求&#xff0c;接收服务器…

[小林coding]4.2TCP重传,滑动窗口,流量控制,拥塞控制_1013

1.重传 1.1 超时重传 两个情况&#xff1a; a 数据包丢失 b ack应答丢失 RTT&#xff1a;网络包往返的时间&#xff08;不是一个定值&#xff09; RTO&#xff1a;超时重传的时间间隔&#xff08;也是一个动态的&#xff09; RTO设置的时间长&#xff1a;浪费时间资源&…

grafana api创建dashboard 记录

文章目录 json model导入申请api key创建dashboard删除dashboard json model导入 直接在ui通过json model 导入&#xff0c;开发自己用还好&#xff0c;但对非开发人员不太友好&#xff0c;故考虑通过api后台自动创建 api doc : https://grafana.com/docs/grafana/v9.3/devel…

AR动态贴纸SDK,让创作更加生动有趣

在当今的社交媒体时代&#xff0c;视频已经成为了人们表达自我、分享生活的重要方式。然而&#xff0c;如何让你的视频在众多的信息中脱颖而出&#xff0c;吸引更多的关注和点赞呢&#xff1f;答案可能就在你的手中——美摄AR动态贴纸SDK。 美摄AR动态贴纸SDK是一款专为视频编辑…

R语言——赋值(= ,<- ,<<-)

R语言 R语言——赋值&#xff08; &#xff0c;<- &#xff0c;<<-&#xff09; 文章目录 R语言一、 与 <- 的区别二、 <<- ,向上一环境层写入变量 R语言中" <- " 与 " " 都可以用来赋值&#xff0c;但R中建议使用" <- “…

ESP32网络开发实例-UDP数据发送与接收

UDP数据发送与接收 文章目录 UDP数据发送与接收1、UDP简单介绍2、软件准备3、硬件准备4、代码实现本文将详细介绍在Arduino开发环境中,如何实现ESP32通过UDP协议进行数据发送与接收。 1、UDP简单介绍 用户数据报协议 (UDP) 是一种跨互联网使用的通信协议,用于对时间敏感的传…

Linux开发工具:vim的介绍和用法及其简单配置

前言 Vim 简介. 编辑. Vim是从 vi 发展出来的一个文本编辑器。. 代码补全、编译及错误跳转等方便编程的功能特别丰富&#xff0c;在程序员中被广泛使用&#xff0c;和Emacs并列成为类Unix系统用户最喜欢的文本编辑器。. [1] vim的设计理念是命令的组合。. 用户学习了各种各样的…

【统计学概念】初学者指南:了解置信区间

一、说明 什么是置信区间&#xff1f;如何将概率转化成信心度&#xff1f;信心度如何去工作&#xff1f;这些初步的统计概念需要明晰&#xff0c;然后才能应用统计模型&#xff0c;然后是贝叶斯推理&#xff0c;我们将逐步深入这些概念。 二、总体与样本个体统计 总体是研究人…

【Unity】【VR】详解Oculus Integration输入

【背景】 以下内容适用于Oculus Integration开发VR场景,也就是OVR打头的Scripts,不适用于OpenXR开发场景,也就是XR打头Scripts。 【详解】 OVR的Input相对比较容易获取。重点在于区分不同动作机制的细节效果。 OVR Input的按键存在Button和RawButton两个系列 RawButton…

比较和同步数据库架构和数据:MssqlMerge Pro Crack

比较和同步数据库架构和数据 适用于Oracle、MySQL 和 MariaDB、SQL Server、PostgreSQL、SQLite、MS Access和跨 DBMS 场景 业界领先的文本比较工具中常用的两面板 UI 快速过滤器显示所有/新/更改/新更改 合并两个方向的更改 轻量级&#xff1a;跨 DBMS 工具小于 20 MB&#xf…

数据结构之手撕顺序表(增删查改等)

0.引言 在本章之后&#xff0c;就要求大家对于指针、结构体、动态开辟等相关的知识要熟练的掌握&#xff0c;如果有小伙伴对上面相关的知识还不是很清晰&#xff0c;要先弄明白再过来接着学习哦&#xff01; 那进入正题&#xff0c;在讲解顺序表之前&#xff0c;我们先来介绍…

代码随想录——图论一刷day03

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣130. 被围绕的区域二、力扣417. 太平洋大西洋水流问题三、力扣827. 最大人工岛 前言 一、力扣130. 被围绕的区域 class Solution {boolean[][] flag;i…

JavaScript-es6-新版语法-export-import

文章目录 1.export2.import3.export default 命令4.总结 在JavaScript ES6中&#xff0c;export与export default均可用于导出常量、函数、文件、模块等。模块功能主要由两个命令构成&#xff1a;export和import。export命令用于规定模块的对外接口&#xff0c;import命令用于输…

接口测试文档

接口测试的总结文档 第一部分&#xff1a;主要从问题出发&#xff0c;引入接口测试的相关内容并与前端测试进行简单对比&#xff0c;总结两者之前的区别与联系。但该部分只交代了怎么做和如何做&#xff1f;并没有解释为什么要做&#xff1f; 第二部分&#xff1a;主要介绍为什…

鸿蒙tabbar ArkTS

鸿蒙tabbar ArkTS 做了仿照现在应用的做了一个tabbar。 官方文档地址 参考文档 tabbar 其中有个比较重要的点是&#xff0c;对image资源的引用问题。 资源相关说明 图片是resources目录下的base目录下的。 media目录下的图片的资源不能添加文件夹&#xff0c;只能是文件&a…

树模型(一)孤立森林

孤立森林&#xff08;Isolation Forest&#xff09;算法是西瓜书作者周志华老师的团队研究开发的算法&#xff0c;一般用于结构化数据的异常检测。 异常的定义 针对于不同类型的异常&#xff0c;要用不同的算法来进行检测&#xff0c;而孤立森林算法主要针对的是连续型结构化…

适用于 Golang 的任务调度程序 AGScheduler

以前一直使用 Python 的任务调度库 APScheduler&#xff08;支持任务持久化&#xff0c;支持多种存储方式&#xff09;&#xff0c;但由于没有找到和它功能和使用方式类似的 Golang 库&#xff0c;所以模仿 APScheduler 3.x 写了个简易版本的 AGScheduler。 AGScheduler Advan…

近地面无人机植被定量遥感与生理参数反演

目录 专题一 近十年近地面无人机植被遥感文献分析、传感器选择、观测方式及质量控制要点 专题二 辐射度量与地物反射特性 专题三 无人机遥感影像辐射与几何处理 专题四 光在植被叶片与冠层中的辐射传输机理及平面模型应用 专题五 植被覆盖度与叶面积指数遥感估算 更多应用…