vue3-ciallo-viewer

An exquisite vue3 image preview component. Mobile device support ✔

Install

npm install vue3-ciallo-viewer --save

Props

| Prop| Type| Default|Description| | --- | --- | --- |---| |open|Boolean|false|Controls whether the image viewer is visible| |images|Array|[]|Array of image URLs to display| |duration|Number|300|Transition duration in milliseconds.| |targetIndex|Number|0|Index of the currently displayed image.|

Events

| Name| Description| | --- | --- | |open|Executed when the viewer is activated| |close|Executed when the viewer is closed| |prev|Triggered when navigating to the previous image| |next|Triggered when navigating to the next image|

Basic usage

<template>
    <div>
        <ImageView :open="status" :images="['images/1.png']" @close="() => status = false" />
        <button @click="status =! status">点击</button>
    </div>
</template>
<script setup lang="ts">
import { ImageView } from "vue3-ciallo-viewer"
import 'vue3-ciallo-viewer/dist/style.css'
import { ref } from 'vue'
const status = ref<boolean>(false)
</script>

API

CialloViewer

CialloViewer(array: HTMLCollection, targetIndex?: number | null, duration?: number): void

Parameters

• array : HTMLCollection The collection of images to display.
• targetIndex : number | null (optional) The index of the image to highlight, defaults to 0.
• duration : number (optional) The duration of the image transition, defaults to 400 milliseconds.

Return Value

UnmountTargetViewer

UnmountTargetViewer(): void

Description

The UnmountTargetViewer function unmounts the current image viewer.

Return Value

void - This function does not return any value.

API Basic usage

<template>
    <div>
        <div ref="images">
            <img class="image_class" v-for="(item, index) in list" :key="item.id" @click="handleClick(index)" :src="item.src"  alt=""/>
        </div>
    </div>
</template>
<script setup lang="ts">
import {CialloViewer} from "vue3-ciallo-viewer"
import 'vue3-ciallo-viewer/dist/style.css'
import {ref} from 'vue'
const list = ref<any[]>([
    {
        id: 0,
        src: './src/assets/images/1.jpg'
    },
    {
        id: 1,
        src: './src/assets/images/2.jpg'
    },
    {
        id: 2,
        src: './src/assets/images/3.jpg'
    }
])
const images = ref<HTMLElement>()
const handleClick = (index: number): void => {
    if(!images.value) return
    CialloViewer(images.value.getElementsByTagName('img'), index, 400)
}
</script>
<style>
</style>