ImagePreview 图片预览

用于全屏沉浸式放大浏览高清大图的弹层控件，包含磨砂顶部页码胶囊、底部文案描述遮罩、手势滑动 Swiper 与一键保存相册能力。

---

代码示例

1. 唤起全屏图片预览 (Basic Preview)

使用 v-model:show 控制预览弹层的显隐。通过 :current 设定打开时的初始展示图片索引。

<template>
  <mu-button type="primary" block @click="show = true">
    唤起全屏大图预览
  </mu-button>

  <mu-image-preview
    v-model:show="show"
    :images="previewImages"
    :current="0"
  />
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
const previewImages = ref([
  { url: 'https://picsum.photos/800/1200?random=11', desc: 'Muzhiyu UI 极奢视效设计系统 1' },
  { url: 'https://picsum.photos/800/1200?random=12', desc: 'VisionOS 空间拟态光影交互组件库 2' }
])
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:show	控制全屏图片预览弹层的显隐	Boolean	true | false	false
images	图片数组 (支持字符串 URL 数组或对象 [{url, desc}])	Array	-	[]
current	打开时当前展示图片的初始索引	Number	-	0
loop	是否开启左右无缝循环滑动	Boolean	true | false	true
closeable	是否显示右上角关闭图标按钮	Boolean	true | false	true
closeOnClickMask	点击黑色遮罩空白区域是否自动关闭	Boolean	true | false	true
showSave	是否显示右上角下载保存图片按钮	Boolean	true | false	true

---

事件说明 (Events)

事件名	说明	回调参数
update:show	v-model:show 双向绑定更新	(show: boolean)
change	滑动切换到新图片时触发	(index: Number)
save	点击下载保存图片按钮时触发	({ url: String, index: Number })
close	预览弹层彻底收起关闭时触发	-

---

实例方法 (Expose Methods)

方法名	说明
open(index?)	打开图片预览（可指定初始索引）
handleSaveImage()	以编程方式触发保存当前图片操作