vue3 发布之后，开始使用 vue3 + ts 写代码，需要使用图片预览插件，在 npm 找了一圈没有适合的。要么是 v2 的插件，要么是不支持 ts,要么是使用不方便，因此封装一个简单的图片预览插件。
封装之初，想到了 uni-app 的全局预览图片方法，故仿照 uni-app 的使用方法
npm install v3-simple-img-preview --save
yarn add v3-simple-img-preview
在 main.js 中引入
import { createApp } from 'vue'
import v3SimpleImgPreview from 'v3-simple-img-preview'
const app = createApp(App)
app.use(v3SimpleImgPreview)
在组建中使用
this.$previewImage({
urls: [],
current: 1,
loop: false,
header: vdom,
success: fn,
fail: fn
})
也可以通过引入方式使用
import { previewImage } from 'v3-simple-img-preview'
previewImage({
urls: [],
current: 1,
loop: false,
header: vdom,
success: fn,
fail: fn
})
| 参数 | 类型 | 说明 |
|---|---|---|
| urls | string[] | 图片地址 |
| current | number | 当前图片 |
| loop | boolean | 是否循环预览 |
| maxZoom | number | 图片放大的最大倍数（默认 3） |
| header | vdom | 自定义工具栏组建 |
| success | function | 图片加载成功回调 |
| fail | function | 图片加载失败回调 |
this.$previewImage方法的header参数可接受一个vdom,同时通过this.$previewImageCom 操作组建
this.$previewImage({
current: 1,
urls: [
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F28%2F20191228105602_4Wm5z.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657337420&t=96b6d4de8b85820e609efed7075de6d3",
],
header: h("div", { style: "position: absolute; right: 20px" }, [
h(
"button",
{
style: "margin-right: 20px",
onclick: () => {
this.$previewImageCom.methods.close();
},
},
"关闭"
),
h(
"button",
{
onclick: () => {
this.$previewImageCom.methods.getFull();
},
},
"全屏"
),
]),
});
----------------------------******************** 华丽的分割线
本来只是一个简单的 pc 端图片预览插件，但是考虑到有些小伙伴可能需要兼容移动端，故特意做了兼容
实现方式参考了 vant 部分源码，纯手写并未使用任何三方插件，可放心使用。
如果问题，或有新的你希望兼容的，都可在 github 上反馈留言，看到之后会及时回复。
----------------------------******************** 华丽的分割线
6 月 27 日修改
pc 端支持鼠标滚动来放大缩小，当图片大小超过窗口时，不再显示滚动条，改为鼠标拖拽移动
8 月 1 日修改
兼容长图，以及 maxZoom 配置