图片预览

@erp/biz 提供的图片预览功能，支持单张和多张图片预览、复制、下载等操作。

核心功能

• createImagePreviewPop - 创建图片预览弹窗
• copyImageByUrl - 复制图片到剪贴板
• downloadImageByUrl - 下载图片到本地
• 支持图片组预览、键盘切换、缩放等交互

引入方式

import { createImagePreviewPop } from '@erp/biz'

createImagePreviewPop

创建图片预览弹窗，支持单张和多张图片预览。

基础用法

import { createImagePreviewPop } from '@erp/biz'

// 预览单张图片
createImagePreviewPop('https://example.com/image.jpg')

// 预览多张图片
createImagePreviewPop([
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg'
])

指定初始图片

// 从第二张图片开始预览（索引从0开始）
createImagePreviewPop(imageList, 1)

// 或使用对象参数
createImagePreviewPop(imageList, {
  current: 2
})

参数说明

function createImagePreviewPop(
  srcList: string | string[],
  params?: number | ImagePreviewParams
): Promise<void>

interface ImagePreviewParams {
  /** 初始显示的图片索引 */
  current?: number
  
  /** 自定义复制处理函数 */
  copy?: (url: string) => void
  
  /** 自定义下载处理函数 */
  download?: (url: string) => void
  
  /** 预览URL格式化函数 */
  previewUrlFormatter?: (url: string) => string
}

内置操作

预览弹窗内置以下操作按钮：

• 复制图片到剪贴板
• 下载图片到本地

自定义操作

createImagePreviewPop(imageList, {
  current: 0,
  // 自定义复制逻辑
  copy: (url) => {
    navigator.clipboard.writeText(url)
    Message.success('链接已复制')
  },
  // 自定义下载逻辑
  download: (url) => {
    window.open(url, '_blank')
  }
})

URL 格式化

// 预览时使用原图，列表显示缩略图
createImagePreviewPop(thumbnailList, {
  previewUrlFormatter: (url) => {
    // 移除缩略图参数，获取原图
    return url.replace(/\?.*$/, '')
  }
})

使用示例

在表格中预览图片

<template>
  <img 
    :src="compressImg(row.image, 80)" 
    @click="handlePreview(row.image)"
  />
</template>

<script setup>
import { createImagePreviewPop, compressImg } from '@erp/biz'

const handlePreview = (url) => {
  createImagePreviewPop(url)
}
</script>

预览商品图片列表

const productImages = [
  'https://oss.example.com/product/main.jpg',
  'https://oss.example.com/product/detail1.jpg',
  'https://oss.example.com/product/detail2.jpg'
]

// 点击某张图片时，从该图片开始预览
const handleImageClick = (index: number) => {
  createImagePreviewPop(productImages, index)
}

---

相关函数

copyImageByUrl

复制图片到剪贴板。

import { copyImageByUrl } from '@erp/biz'

await copyImageByUrl('https://example.com/image.jpg')
// 成功后显示 "图片已复制到剪贴板"

downloadImageByUrl

下载图片到本地。

import { downloadImageByUrl } from '@erp/biz'

// 使用原文件名
downloadImageByUrl('https://example.com/photo.jpg')

// 指定文件名
downloadImageByUrl('https://example.com/photo.jpg', '我的照片.jpg')