Preview 预览

代码演示

基础用法

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

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

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

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

多媒体

<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>

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

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

多张图片预览

<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>

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

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

API

Props

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