vue3图片预览
1、安装:npm install vue3-preview-image -S2、在main.js中引入组合式api中引入方法调用关闭预览修改默认配置。
·
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>
更多推荐
已为社区贡献2条内容
所有评论(0)