当前位置: 首页 > news >正文

Vue图片浏览组件v-viewer,支持旋转、缩放、翻转等操作

Vue图片浏览组件v-viewer,支持旋转、缩放、翻转等操作

  • 之前用过viewer.js,算是市场上用过最全面的图片预览。
  • v-viewer,是基于viewer.js的一个图片浏览的Vue组件,支持旋转、缩放、翻转等操作。

基本使用

安装:npm安装

npm install v-viewer

目录结构如下
在这里插入图片描述

注册并使用

引入v-viewer及必需的css样式,并使用Vue.use()注册插件,之后即可使用。

  • import 'viewerjs/dist/viewer.css':引入必需的css样式,详见上目录。
  • import VueViewer from 'v-viewer':引入v-viewer
  • Vue.use(VueViewer) :使用Vue.use()注册插件
<template><div><viewer :images="images"><!-- style="width: 100px; height: 100px" 这是指定缩略图大小--><img v-for="(src,index) in images" :key="index" :src="src" style="width: 100px; height: 100px" @click="show(index)"></viewer><!-- api --><button type="button" @click="show">Click to show</button></div>
</template>
<script>import 'viewerjs/dist/viewer.css'import VueViewer from 'v-viewer'import Vue from 'vue'Vue.use(VueViewer)export default {data() {return {images: ["https://picsum.photos/200/200","https://picsum.photos/300/200","https://picsum.photos/250/200"]};},methods: {show(index) {this.$viewerApi({images: this.images,options: {initialViewIndex: index,},})},},}
</script>

预览时,如何打开指定图片

主要取决于this.$viewerApi所传参数对象:ViewerApiOptions
this.$viewerApi({images: this.images,options: {initialViewIndex: index,},
})
ViewerApiOptions分析
export interface ViewerApiOptions {images: Array<string | object>options?: ViewerJs.Options}
  • images:图片列表(必填
  • options:参考ViewerJs.Options的参数👇(非必填,如果包含,它的类型必须是 ViewerJs.Options
ViewerJs.Options分析
export interface Options {backdrop?: boolean | string; // 是否显示遮罩层,以及遮罩层的颜色或图片button?: boolean; // 是否显示右上角的关闭按钮className?: string; // 给查看器容器添加自定义类名container?: string | HTMLElement; // 查看器的容器,可以是选择器字符串或HTMLElement对象filter?: Function; // 图片过滤函数,用于筛选需要显示的图片fullscreen?: boolean | FullscreenOptions; // 是否启用全屏模式及全屏选项focus?: boolean; // 是否在查看时将焦点锁定在查看器上hidden?(event: CustomEvent): void; // 查看器隐藏后的回调函数hide?(event: CustomEvent): void; // 查看器开始隐藏时的回调函数inheritedAttributes?: string[]; // 定义哪些图片属性应被查看器继承initialCoverage?: number; // 图片初始覆盖率,决定图片初始显示的大小initialViewIndex?: number; // 初始查看图片的索引inline?: boolean; // 是否以内联方式(而不是模态方式)显示查看器interval?: number; // 幻灯片播放时每张图片的停留时间keyboard?: boolean; // 是否允许键盘控制loading?: boolean; // 是否显示加载提示loop?: boolean; // 在最后一张图片后是否循环到第一张图片maxZoomRatio?: number; // 允许的最大缩放比例minHeight?: number; // 图片的最小高度minWidth?: number; // 图片的最小宽度minZoomRatio?: number; // 允许的最小缩放比例movable?: boolean; // 图片是否可拖动move?(event: MoveEvent): void; // 图片移动时的回调函数moved?(event: MovedEvent): void; // 图片移动结束时的回调函数navbar?: boolean | Visibility; // 是否显示导航栏play?(event: CustomEvent): void; // 点击播放按钮时的回调函数ready?(event: CustomEvent): void; // 查看器准备就绪时的回调函数rotatable?: boolean; // 图片是否可旋转rotate?(event: RotateEvent): void; // 图片旋转时的回调函数rotated?(event: RotatedEvent): void; // 图片旋转结束时的回调函数scalable?: boolean; // 图片是否可缩放scale?(event: ScaleEvent): void; // 图片缩放时的回调函数scaled?(event: ScaledEvent): void; // 图片缩放结束时的回调函数show?(event: CustomEvent): void; // 查看器开始显示时的回调函数shown?(event: CustomEvent): void; // 查看器显示后的回调函数slideOnTouch?: boolean; // 是否允许触摸滑动切换图片stop?(event: CustomEvent): void; // 停止播放时的回调函数title?: boolean | Visibility | Function | [Visibility, Function]; // 图片标题的显示方式和内容toggleOnDblclick?: boolean; // 是否允许双击切换图片的缩放状态toolbar?: boolean | Visibility | ToolbarOptions; // 工具栏的显示方式和选项tooltip?: boolean; // 是否显示工具提示transition?: boolean; // 是否使用 CSS 过渡效果url?: string | Function; // 定义如何从图片元素获取大图的 URLview?(event: CustomEvent): void; // 开始查看某张图片时的回调函数viewed?(event: CustomEvent): void; // 查看某张图片结束时的回调函数zIndex?: number; // 查看器的 z-index 值zIndexInline?: number; // 内联查看器的 z-index 值zoom?(event: ZoomEvent): void; // 图片缩放时的回调函数zoomOnTouch?: boolean; // 是否允许触摸缩放图片zoomOnWheel?: boolean; // 是否允许鼠标滚轮缩放图片zoomRatio?: number; // 缩放比例的步进值zoomable?: boolean; // 图片是否可缩放zoomed?(event: ZoomedEvent): void; // 图片缩放结束时的回调函数
}

字段较多,并未一一进行尝试实践,可自行学习,这里initialViewIndex决定初始索引。

  • initialViewIndex:初始查看图片的索引

相关文章:

Vue图片浏览组件v-viewer,支持旋转、缩放、翻转等操作

Vue图片浏览组件v-viewer&#xff0c;支持旋转、缩放、翻转等操作 之前用过viewer.js&#xff0c;算是市场上用过最全面的图片预览。v-viewer&#xff0c;是基于viewer.js的一个图片浏览的Vue组件&#xff0c;支持旋转、缩放、翻转等操作。 基本使用 安装&#xff1a;npm安装…...

大蟒蛇(Python)笔记(总结,摘要,概括)——第2章 变量和简单的数据类型

目录 2.1 运行hello_world.py时发生的情况 2.2 变量 2.2.1 变量的命名和使用 2.2.2 如何在使用变量时避免命名错误 2.2.3 变量是标签 2.3 字符串 2.3.1 使用方法修改字符串的大小写 2.3.2 在字符串中使用变量 2.3.3 使用制表符或换行符来添加空白 2.3.4 删除空白 2.3.5 删除…...

SpringCloud-Gateway网关的使用

本文介绍如何再 SpringCloud 项目中引入 Gateway 网关并完成网关服务的调用。Gateway 网关是一个在微服务架构中起到入口和路由控制的关键组件。它负责处理客户端请求&#xff0c;进行路由决策&#xff0c;并将请求转发到相应的微服务。Gateway 网关还可以实现负载均衡、安全认…...

想要学习编程,有什么推荐的书籍吗

如果你要变得更好&#xff0c;C语言是一个极佳的选择&#xff0c;其原因有二。首先&#xff0c;C语言缺乏任何现代的安全功能&#xff0c;这意味着你必须更为警惕&#xff0c;时刻了解真正发生的事情。如果你能写出安全、健壮的C代码&#xff0c;那你就能用任何编程语言写出安全…...

LWM(LargeWorldModel)大世界模型-可文字可图片可视频-多模态LargeWorld-视频问答成功运行-实现循环问答多次问答

Large World Model&#xff08;LWM&#xff09;现在大火&#xff0c;其最主要特点是不仅能够针对文本进行检索交互&#xff0c;还能对图片、视频进行问答交互&#xff0c;自从上文《LWM(LargeWorldModel)大世界模型-可文字可图片可视频-多模态LargeWorld-详细安装记录》发出后&…...

线阵相机之帧超时

1 帧超时的效果 在帧超时时间内相机若未采集完一张图像所需的行数&#xff0c;则相机会直接完成这张图像的采集&#xff0c;并自动将缺失行数补黑出图&#xff0c;机制有以下几种选择&#xff1a; 1. 丢弃整张补黑的图像 2. 保留补黑部分出图 3.丢弃补黑部分出图...

模型转换案例学习:等效替换不支持算子

文章介绍 Qualcomm Neural Processing SDK &#xff08;以下简称SNPE&#xff09;支持Caffe、ONNX、PyTorch和TensorFlow等不同ML框架的算子。对于某些特定的不支持的算子&#xff0c;我们介绍一种算子等效替换的方法来完成模型转换。本案例来源于https://github.com/quic/qidk…...

js 数组排序的方式

var numberList [5, 100, 94, 71, 49, 36, 2, 4]; 冒泡排序&#xff1a; 相邻的数据进行两两比较&#xff0c;小数放在前面&#xff0c;大数放在后面&#xff0c;这样一趟下来&#xff0c;最小的数就被排在了第一位&#xff0c;第二趟也是如此&#xff0c;如此类推&#xff0…...

手机连接电脑后资源管理器无法识别(识别设备但无法访问文件)

问题描述 小米8刷了pixel experience系统,今天用电脑连接后无法访问手机文件,但是手机选择了usb传输模式为文件传输 解决办法 在设备和打印机页面中右键选择属性 点击改变设置 卸载驱动,注意勾选删除设备的驱动程序软件 卸载后重新连接手机,电脑弹出希望对设备进行什么操作时…...

安装unget包 sqlsugar时报错,完整的报错解决

前置 .net6的开发环境 问题 ? 打开unget官网&#xff0c;搜索报错的依赖Oracle.ManagedDataAccess.Core unget官网 通过unget搜索Oracle.ManagedDataAccess.Core查看该依赖的依赖 发现应该是需要的依赖Oracle.ManagedDataAccess.Core(>3.21.100)不支持.net6的环境 解…...

oracle数据库事务的四大特性与隔离级别与游标

数据库事务的四大特性: 这里提到了 ACID 四个特性&#xff0c;分别是&#xff1a; A&#xff08;Atomicity&#xff09;&#xff1a; 原子性&#xff0c;确保事务中的所有操作要么全部执行成功&#xff0c;要么全部不执行&#xff0c;不存在部分执行的情况。 C&#xff08;…...

Day25--learning English

一、积累 1.crab 2.scrape 3.crude 4.infect 5.blinds 6.plunk 7.fart 8.expel 9.stamp 10.tongs 11.utensil 12.sticky 13.yolk 14.snap 15.fuzz 16.chuck 17.hamper 18.panel 19.prod 20.eyebrow 二、练习 1.牛津原译 scrape /skreɪp/ REMOVE 除去 1.to remove sth from…...

职业技能鉴定服务中心前端静态页面(官网+证书查询)

有个朋友想做职业技能培训&#xff0c;会发证书&#xff0c;证书可以在自己网站可查。想做一个这样的网站&#xff0c;而且要特别土&#xff0c;一眼看上去像xxx官方网站&#xff0c;像jsp .net技术开发的网站。用htmlcssjquery还原了这样子一个前端页面&#xff0c;这里分享给…...

第六十六天 API安全-接口安全阿里云KEY%postmanDVWSXEE鉴权泄露

第66天 API安全-接口安全&阿里云KEY%postman&DVWS&XEE&鉴权&泄露 知识点 1.HTTP类接口-测评 2.RPC类接口-测评 3.Web Service类-测评 参考链接&#xff1a;https://www.jianshu.com/p/e48db27d7c70 内容点&#xff1a; SOAP(Simple Object Access Prot…...

在Vue3 + Vite项目中使用less

在Vue3 Vite项目中使用less&#xff0c;需要安装less和less-loader两个依赖。 首先&#xff0c;在项目根目录下执行以下命令安装less和less-loader&#xff1a; npm install less less-loader --save-dev安装完成后&#xff0c;在vite.config.js配置文件中添加以下代码&…...

this的指向问题总结

this一般会出现在函数里面&#xff0c;但是一般情况下只有在函数被调用执行时&#xff0c;才能确定this指向哪个对象。一般情况下this是指调用函数的对象。 1.在全局作用域下或者普通函数中this的指向一般都是window对象 window.fn&#xff08;&#xff09;&#xff0c;普通函…...

jQuery的应用(二)

对上一节内容的补充。 jQuery选择器 jQuery选择器类似于CSS选择器,用来选取网页中的元素 jQuery选择器功能强大,种类也很多,分类如下 通过CSS选择器选取元素: 基本选择器层次选择器属性选择器通过过滤选择器选择元素: 基本过滤选择器可见性过滤选择器表单对象过滤选择器…...

芋道源码(yudao)跳转新页面的几种方式

芋道源码&#xff08;yudao&#xff09;跳转新页面的几种方式 导入useRouter const { push, replace, resolve } useRouter() 当前页面跳转 const goToPage (url: string) > {url push(/hot163) }当前页面跳转 const goToPage (url: string) > {url resolve(/h…...

Open AI — Sora 如何发挥其魔力 — 近距离观察该技术

OpenAI 的大模型 Sora 可以制作一整分钟的高质量视频。他们的工作成果表明,使视频生成模型更大是为现实世界创建多功能模拟器的好方法。Sora 是一种灵活的可视化数据模型。它可以创建不同长度、形状和大小的视频和图片,甚至可以创建长达一分钟的高清视频。我阅读了 OpenAI 的…...

密码解密 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 100分 题解&#xff1a; Java / Python / C 题目描述 给定一段 “密文”字符串 s &#xff0c;其中字符都是经过 “密码本” 映射的&#xff0c;现需要将“密文”解密并且输出。 映射的规则&#xff1a; ( a−i ) 分…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

提升移动端网页调试效率:WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...