Vxe UI vue vxe-upload image-preview 图片预览组件的使用

vxe-pc-ui Vxe UI vue vxe-upload image-preview 图片预览组件的使用

代码

调用全局方法 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 关闭图片预览