ImageViewer 图片预览器

基础用法

使用urlList传入需要预览的图片列表，使用initialIndex指定预览的初始索引。使用实例的open方法来打开预览框，使用实例的close方法来关闭预览框。

TIP

注意： 底层使用了Vue3的Teleport组件，具体用法可参考Teleport组件文档。

<template>
    <div class="container">
        <p>
            <ym-button @click="open" type="primary">打开</ym-button>
        </p>

        <ym-image-viewer ref="imageViewerRef" :urlList="urlList" :initialIndex="0"></ym-image-viewer>
    </div>
    
    
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ImageViewerExpose } from 'guyan-ym-ui'

const urlList =  [
    "https://jeek-space-blog.top:3000/images/article/ab93e2fb1e216541d1aeb751600909f2.jpeg",
    "https://jeek-space-blog.top:3000/images/article/d1f2ec4df6a8ca406690312ca69b8d00.jpeg",
    "https://jeek-space-blog.top:3000/images/article/43b9c7996880bc8e02858997790e15f7.jpeg",
    "https://jeek-space-blog.top:3000/images/article/ea6e433dd3c1e06527b6ac05e76d1677.jpeg",
    "https://jeek-space-blog.top:3000/images/article/6c372c58e9f76a1059cec97dae6b84d7.jpeg",
    "https://jeek-space-blog.top:3000/images/article/94ba620bf0f1e5b65e5f4889a88d8fba.png"
  ]

  const imageViewerRef = ref<ImageViewerExpose>()

  const open = () => {
    imageViewerRef.value?.open()
  }
</script>

<style scoped>

</style>

关闭预览器

可以点击预览器右上角的关闭图标来关闭预览器，也可以使用实例的close方法来关闭预览器。 可以使用 hideOnClickModal属性来指定是否点击遮罩层关闭预览器。 可以使用closeOnPressEsc属性来指定是否按下ESC键关闭预览器。

<template>
    <div class="container">
        <p>
            <ym-button @click="open" type="primary">打开</ym-button>
        </p>

        <ym-image-viewer 
        ref="imageViewerRef"
         :urlList="urlList" 
         :initialIndex="0"
         hideOnClickModal
         closeOnPressEsc
         ></ym-image-viewer>
    </div>
    
    
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ImageViewerExpose } from 'guyan-ym-ui'

const urlList =  [
    "https://jeek-space-blog.top:3000/images/article/ab93e2fb1e216541d1aeb751600909f2.jpeg",
    "https://jeek-space-blog.top:3000/images/article/d1f2ec4df6a8ca406690312ca69b8d00.jpeg",
    "https://jeek-space-blog.top:3000/images/article/43b9c7996880bc8e02858997790e15f7.jpeg",
    "https://jeek-space-blog.top:3000/images/article/ea6e433dd3c1e06527b6ac05e76d1677.jpeg",
    "https://jeek-space-blog.top:3000/images/article/6c372c58e9f76a1059cec97dae6b84d7.jpeg",
    "https://jeek-space-blog.top:3000/images/article/94ba620bf0f1e5b65e5f4889a88d8fba.png"
  ]

  const imageViewerRef = ref<ImageViewerExpose>()

  const open = () => {
    imageViewerRef.value?.open()
  }
</script>

<style scoped>

</style>

缩放旋转

可以使用zoomRate来指定图片的缩放比例，使用minScale来指定图片的最小缩放比例，使用maxScale来指定图片的最大缩放比例。 打开预览器后可以使用滚轮或者底部放大缩小按钮来缩放图片。可以使用底部旋转按钮来旋转图片。

<template>
    <div class="container">
        <p>
            <ym-button @click="open" type="primary">打开</ym-button>
        </p>

        <ym-image-viewer 
        ref="imageViewerRef"
         :urlList="urlList" 
         :initialIndex="0"
         :zoomRate="0.3"
         :minScale="0.1"
         :maxScale="10"

         ></ym-image-viewer>
    </div>
    
    
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ImageViewerExpose } from 'guyan-ym-ui'

const urlList =  [
    "https://jeek-space-blog.top:3000/images/article/ab93e2fb1e216541d1aeb751600909f2.jpeg",
    "https://jeek-space-blog.top:3000/images/article/d1f2ec4df6a8ca406690312ca69b8d00.jpeg",
    "https://jeek-space-blog.top:3000/images/article/43b9c7996880bc8e02858997790e15f7.jpeg",
    "https://jeek-space-blog.top:3000/images/article/ea6e433dd3c1e06527b6ac05e76d1677.jpeg",
    "https://jeek-space-blog.top:3000/images/article/6c372c58e9f76a1059cec97dae6b84d7.jpeg",
    "https://jeek-space-blog.top:3000/images/article/94ba620bf0f1e5b65e5f4889a88d8fba.png"
  ]

  const imageViewerRef = ref<ImageViewerExpose>()

  const open = () => {
    imageViewerRef.value?.open()
  }
</script>

<style scoped>

</style>

ImageViewer API

Props

Name	Description	Type	Default
urlList	图片列表	string[]	[]
initialIndex	初始索引	number	0
hideOnClickModal	是否点击遮罩层关闭预览器	boolean	true
closeOnPressEsc	是否按下ESC键关闭预览器	boolean	true
zoomRate	图片缩放比例	number	1
minScale	图片最小缩放比例	number	0.1
maxScale	图片最大缩放比例	number	5

Events

Name	Description	Type
close	关闭预览器时触发	() => void
switch	切换图片时触发	(url: string, index: number) => void
rotate	旋转图片时触发	(angle: number) => void
wheel	滚轮事件	(event: WheelEvent) => void