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 关闭图片预览
