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

本文主要是介绍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 关闭图片预览

这篇关于Vxe UI vue 使用 VxeUI.previewImage() 图片预览方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---