Preview 预览

代码演示

基础用法

<template>
    <a-button
        type="primary"
        @click="handlePreview">
        预览
    </a-button>
</template>

<script setup>
import { Preview } from '@/components'

function handlePreview() {
    Preview({
        urls: ['http://cdn.xuanyunet.com/test/1.jpeg'],
    })
}
</script>

<style lang="less" scoped></style>

多媒体

<template>
    <a-button
        type="primary"
        @click="handlePreview">
        预览
    </a-button>
</template>

<script setup>
import { Preview } from '@/components'

function handlePreview() {
    Preview({
        current: 1,
        urls: [
            'http://cdn.xuanyunet.com/test/1.jpeg',
            'http://cdn.xuanyunet.com/test/2.jpeg',
            'http://cdn.xuanyunet.com/test/3.jpeg',
            'http://cdn.xuanyunet.com/test/4.jpeg',
        ],
    })
}
</script>

<style lang="less" scoped></style>

多张图片预览

<template>
    <a-button
        type="primary"
        @click="handlePreview">
        预览
    </a-button>
</template>

<script setup>
import { Preview } from '@/components'

function handlePreview() {
    Preview({
        urls: [
            'http://cdn.xuanyunet.com/test/1.jpeg',
            'http://cdn.xuanyunet.com/test/1.mp3',
            'http://cdn.xuanyunet.com/test/1.mp4',
        ],
    })
}
</script>

<style lang="less" scoped></style>

API

Props

名称	说明	类型	默认值
urls	url 数组，支持 image/* .mp3 .mp4	array	-
current	预览起始位置索引	number	0