Vxe UI vue 使用 VxeUI.previewImage() 图片预览方法

Vxe UI vue 使用 VxeUI.previewImage() 图片预览方法的调用

查看 github

代码

调用全局方法 VxeUI.previewImage()

参数说明:
urlList:图片列表,支持传字符串,也可以传对象数组 [{url: 'xx’l}]
activeIndex:指定默认显示哪张图片

<template><div><vxe-button status="primary" @click="clickEvent">点击预览图片</vxe-button></div>
</template><script lang="ts" setup>
import { VxeUI } from 'vxe-pc-ui'const clickEvent = () => {VxeUI.previewImage({activeIndex: 1,urlList: ['https://vxeui.com/resource/img/fj573.jpeg','https://vxeui.com/resource/img/fj562.png','https://vxeui.com/resource/img/fj187.jpg']})
}
</script>

效果

在这里插入图片描述

快捷键

支持按键 ArrowUp ↑ 放大图片
支持按键 Shift + ArrowUp ↑ 向上移动图片
支持按键 ArrowDown ↓ 缩小图片
支持按键 Shift + ArrowDown ↑ 向下移动图片
支持按键 ArrowLeft ← 切换上一张图片
支持按键 Shift + ArrowLeft ↑ 向左移动图片
支持按键 ArrowRight → 切换下一张图片
支持按键 Shift + ArrowRight ↑ 向右移动图片
支持按键 Ctrl + P 打印图片
支持按键 Ctrl + R 顺时针旋转图片
支持按键 Ctrl + Shift + R 逆时针旋转图片
支持按键 Esc 关闭图片预览

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

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

相关文章

2. redis配置文件解析

redis配置文件解析 一、redis配置文件1、监听地址2、监听端口3、redis接收请求的队列长度3.1 修改系统参数/内核参数 4、客户端空闲的超时时间5、指定redis的pid文件6、定义错误日志7、定义数据库的数量8、定义持久化存储9、设置redis密码10、redis并发连接11、最大内存策略 二…

FIREYE燃烧控制器,Fireye红外扫描仪,Fireye说明书Fireye 技术参数Fireye 代理商

上海德奥达热能设备有限公司上海德奥达热能设备有限公司 FIREYE燃烧控制器&#xff0c;Fireye红外扫描仪&#xff0c;Fireye control&#xff0c;原装美国进口火焰检测器&#xff0c;Fireye紫外线扫描仪&#xff0c; Fireye紫外传感器&#xff0c;fireye价格&#xff0c;Fireye…

正则表达式二

修饰符 i&#xff1a;将匹配设置为不区分大小写&#xff0c;即A和a没有区别 var str"Google Runoob taobao runoob"; var n1str.match(/runoob/g); //runoob var n2str.match(/runoob/gi); //Runoob&#xff0c;runoobg&#xff1a;重找所有匹配项&#xff0…

Windows Server FTP详解

搭建&#xff1a; Windows Server 2012R2 FTP服务介绍及搭建_windows2012server r2ftp怎么做&#xff1f;-CSDN博客 问题&#xff1a; https://www.cnblogs.com/123525-m/p/17448357.html Java使用 被动FTP&#xff08;PASV&#xff09; 被动FTP模式在数据连接建立过程中…

Docker的安装和使用

目录 Docker的安装和使用移除旧版本docker配置docker yum源安装 最新 docker启动& 开机启动docker&#xff1b; enable start 二合一配置加速 Docker相关命令查看下载相关命令Docker启动相关命令上传Docker Hub加载删除镜像 Docker存储卷映射命令 Docker 网络Docker Compo…

计算机网络 ——数据链路层(广域网)

计算机网络 —— 广域网 什么是广域网PPP协议PPP协议的三个部分PPP协议的帧格式 HDLC协议HDLC的站HDLC的帧样式 PPP和HDLC的异同 我们今天来看广域网。 什么是广域网 广域网&#xff08;Wide Area Network&#xff0c;简称WAN&#xff09;是一种地理覆盖范围广泛的计算机网络…

Redis篇 list类型在Redis中的命令操作

list在redis基本的命令 一.基本命令1.lpush和range2.lpushx rpushx3.lpop rpop4.lindex linsert llen5.lrem6.ltrim lset7.blpop brpop 一.基本命令 list在redis中相当于数组或者顺序表. 1.lpush和range 2.lpushx rpushx 3.lpop rpop 4.lindex linsert llen 如果要插入的列表中…

java自动化测试-接口响应内容处理技巧:json转DTO

背景:某个交易自动化案例需要检查关联系统的交易结果&#xff0c;可以通过接口请求结果来断言。 一般处理是转成json格式一层层获取自己想要的&#xff0c;但这样子很麻烦而且容易记错层级或字段。这里介绍一种非常通用且方便的方式。 假设接口返回数据如下: { “itemId”:345…

【Kubernetes】9-Pod控制器

一、什么是 pod 的控制器 Pod控制器&#xff0c;又称之为工作负载&#xff08;workload&#xff09;&#xff0c;是用于实现管理pod的中间层 确保pod资源符合预期状态&#xff1b;pod的资源故障时会进行重启&#xff1b; 当重启策略无效时&#xff0c;则会重新新建pod的资源 二…

一维时间序列信号的小波时间散射变换(MATLAB 2021)

小波散射变换的目的在于获取第一层次的特征信息&#xff0c;即免疫平移、轻微形变的信息。而低通的滤波器能够获取输入信号的概貌&#xff0c;获取反映其整体大尺度特征的信息&#xff0c;以图像为例&#xff0c;由低通滤波器选取的信号对于图像的平移、伸缩、旋转等局部变化有…

Mysql 常用命令 详细大全【分步详解】

1、启动和停止MySQL服务 // 暂停服务 默认 80 net stop mysql80// 启动服务 net start mysql80// 任意地方启动 mysql 客户端的连接 mysql -u root -p 2、输入密码 3、数据库 4、DDL&#xff08;Data Definition Language &#xff09;数据 定义语言, 用来定义数据库对象(数…

[开发|java] java在windows中环境变量配置

系统环境 系统版本&#xff1a;windows10 配置环境变量 配置Java开发环境在Windows系统中通常涉及两个关键环境变量的设置&#xff1a;JAVA_HOME 和 Path。以下是详细的步骤&#xff1a; 设置JAVA_HOME: 打开“控制面板”或通过搜索栏找到“系统”设置。在系统设置中&…

五、身份与访问管理—身份与访问管理基础与访问控制模型(CISSP)

目录 1.访问控制概述 1.1 访问控制步骤 1.2 口令管理(Password Management) 1.3 生物技术(Biometrics)

如何查看当前系统中哪些端口被占用了?

在 Mac 系统中&#xff0c;你可以使用 lsof 命令来查看哪些端口被占用。以下是具体的步骤&#xff1a; 打开终端。输入以下命令并按回车&#xff1a; sudo lsof -i -P -n | grep LISTEN 这个命令会列出所有正在监听的端口以及它们的使用情况。-i 选项表示列出所有网络连接&a…

linux指令-sed

sed 是一个流编辑器&#xff0c;用于对输入流&#xff08;或文件&#xff09;进行基本的文本转换。以下是 sed 命令的详细输出说明文档&#xff1a; 1. 基本语法 sed [OPTIONS]... [SCRIPT] [INPUTFILE...] OPTIONS&#xff1a;可选的命令行选项&#xff0c;如 -i 用于直接修…

空间不够用了怎么办

空间告急啊哥们 整理一下清理空间有用的一些blog吧。 【linux】公共服务器如何清理过多的.cache缓存 linux根目录空间不足&#xff0c;追加空间到根目录下 【linux】linux磁盘空间 目录查看清理 和 文件查看清理

simulink如何配置自动代码生成

simulink如何配置我们的自动代码生成 仿真时间设置我们仿真我们这个模型的一个时间&#xff0c;目前默认它是10秒。如果把它改成“INF”&#xff0c;它就是会一直仿真。 求解器选择&#xff0c;因为我们使用的是嵌入式代码&#xff0c;因此我们一般嵌入式是一个数字量。所以选…

【AI大模型】Transformers大模型库(三):特殊标记(special tokens)

目录​​​​​​​ 一、引言 二、特殊标记&#xff08;special tokens&#xff09; 2.1 概述 2.2 主要功能 2.3 代码示例 三、总结 一、引言 这里的Transformers指的是huggingface开发的大模型库&#xff0c;为huggingface上数以万计的预训练大模型提供预测、训练等服…

RK3568技术笔记之二 SAIL-RK3568开发板介绍

开发板是我们自己的&#xff0c;后面我用开发板和工控机来做技术笔记。不用多讲。我先把核心板和开发板规格书搬过来&#xff0c;这篇文章里都是自己的知识产权&#xff0c;所以就不标准引用来源了。 先看看核心板的规格书吧。 再来一下开发板的规格书 看完规格书&#xff0c;…

用cocos2d-python绘制游戏开发的新篇章

用cocos2d-python绘制游戏开发的新篇章 第一部分&#xff1a;背景 在游戏开发的世界中&#xff0c;寻找一个强大而灵活的框架至关重要。cocos2d-python是一个Python游戏开发框架&#xff0c;它提供了一套丰富的功能&#xff0c;用于创建2D游戏、图形和交互式应用。基于流行的c…