ui-preview 图片预览组件

版本：v2.3.11

图片预览组件用于预览图片，支持手势缩放、滑动切换等功能

基本使用

<template>
  <div class="preview-demo">
    <ui-image 
      src="https://example.com/image.jpg" 
      alt="示例图片" 
      @click="showPreview = true"
      style="cursor: pointer; max-width: 200px;"
    />
    <ui-preview v-model:show="showPreview" :images="images" :initial-index="0" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const showPreview = ref(false);
const images = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg'
];
</script>

<style scoped>
.preview-demo {
  padding: 20px;
  display: flex;
  justify-content: center;
}
</style>

Props

参数	类型	默认值	说明
show	Boolean	false	是否显示图片预览
images	Array	-	图片地址数组
initialIndex	Number	0	初始显示的图片索
loop	Boolean	true	是否支持循环切换
showIndicators	Boolean	true	是否显示指示
showCloseButton	Boolean	true	是否显示关闭按钮
zIndex	Number	2000	预览层级

Events

事件	说明	回调参数
show	预览显示时触	-
hide	预览隐藏时触	-
close	关闭预览时触	-
change	切换图片时触	(index: Number) 当前图片索引

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/functional/preview/preview