v3-img-preview-enhance v1.1.18

v3-img-preview

在原项目基础上增加点击遮罩关闭功能

简介

基于vue3编写的图片预览插件，支持单图和多图预览，支持图片旋转，缩放，移动等功能

• github
• 码云
• Document
• 国内文档地址

安装

npm install v3-img-preview --save
# or
yarn add v3-img-preview

在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import v3ImgPreview from 'v3-img-preview'
const app = createApp(App)
app.mount('#app')
app.use(v3ImgPreview, {/* 全局配置 */})

在组件中使用

组件支持两种调用方式：经过app.use注册后，全局属性上会绑定$v3ImgPreviewFn方法，可以直接调用，您也可以通过直接导入v3ImgPreviewFn方法使用，使用方式如下：

本地预览
```js
import { v3ImgPreviewFn } from 'v3-img-preview'
const imgU

rl1 = require('./images/1.jpg')
const imgUrl2 = require('./images/2.jpg')
// 单张图片
v3ImgPreviewFn(imgUrl1)

// 多张图片
v3ImgPreviewFn({images : [imgUrl1, imgUrl2]})
// or
v3ImgPreviewFn([imgUrl1, imgUrl2])

API

以下属性适用于传递对象时使用，若只传递url，您也可以直接调用方法传递 v3ImgPreviewFn("http://www.xxxxxx.png")

全局配置方式

我们所有的API都支持全局配置，您可以在注册插件的时候配置全局属性

import { createApp } from 'vue'
import App from './App.vue'
import VImagesPreview from 'v3-img-preview'
const app = createApp(App)
app.mount('#app')
// 全局配置属性
app.use(VImagesPreview, { keyboard: false,escClose: false,showToolbar: false })

配置优先级

配置项的优先级为 组件内传入配置 > 全局配置 > 默认值

快捷键