vue3图片预览

1、安装：npm install vue3-preview-image -S

2、在main.js中引入

import vue3PreviewImage from 'vue3-preview-image'

app.use(vue3PreviewImage)

也可在js中通过实例调用:

this.$preview(current,list,key)

组合式api中引入方法调用

import { preview } from 'vue3-preview-image'
preview(current,list,key)

参数	说明	类型
current	当前预览的图片索引或者url	String/Number
list	需要预览的图片数组，非必传。如果不传的话，current必须为url，不能为索引。	Array
key	如果list里面的item是图片的url 则不需要，如果是对象的话，需传图片的在对象中的key	String

关闭预览

import { closePreview } from 'vue3-preview-image'
closePreview()

修改默认配置

// 方式一：引入方法传入配置
import { setPreviewDefaultOptions } from 'vue3-preview-image'

setPreviewDefaultOptions({
  enabledMaskClose: false, // 是否开启点击遮罩关闭(默认为true)
  enabledEscClose: false, // 是否开启esc按键关闭(默认为true)
  enabledMouseZoom: false, // 是否开启鼠标滚轮缩放(默认为true)
  activeColor: 'green' // 预览图中选中图片的背景颜色(默认为rgba(239, 84, 78, 0.7))
})

// 方式二：在app.use时传入配置
import vue3PreviewImage from 'vue3-preview-image'
app.use(vue3PreviewImage, { activeColor: '#ff0033' })

示例

<template>
  <div class="container">
    <h1>示例：</h1>
    <button>第一个参数可传入索引,第二个参数传入需要预览的图片数组</button><br><br>
    <button>第一个参数也可传入url</button><br><br>
    <button>也可以只传入url，单张图片预览</button><br><br>
    <button>如果数组的item是对象的话，则第三个参数要指定图片在对象中的key</button><br><br>
    <button>也可通过实例调用</button><br><br>
    <button>使用setup组合式api时引入方法调用</button><br><br>
  </div>
</template>