vue2.x插件升级支持vue3，支持vue3的图片预览插件来了
之前在工作中有需要用到图片预览的地方，当初没有找到合适的图片插件，于是就自己写了一个，并发布到了github，没想到的是竟然一直有人使用，不知不觉的小星星也达到了一百多个，每天文档也还有人访问，于是抽时间给兼容了vue3一下，特来记录一下，由于业务部分的代码和vue3兼容，所以主要记录一下关于vue2和vue3插件部分的区别
首先附上插件的地址
github: https://github.com/heyongsheng/hevue-img-preview gitee: https://gitee.com/ihope_top/hevue-img-preview 文档地址：https://heyongsheng.github.io/#/
为了方便，我将对vue2和vue3的兼容放在了一个文件进行逻辑处理，不需要下载不同的版本
首先来看一下之前的index配置文件
import Vue from "vue";
import VueToast from "./hevue-img-preview.vue";
const ToastConstructor = Vue.extend(VueToast);
let instance
let hevueImgPreviewConfig
const ImgPreview = (options = {}) => {
if (typeof options === 'string') {
options = {
url: options
};
}
options.show = true
// 优先采取局部配置，其次采取全局配置
Object.keys(hevueImgPreviewConfig).map(name => {
if ( options[name] == undefined) {
options[name] = hevueImgPreviewConfig[name]
}
})
instance = new ToastConstructor({
data: options
})
instance.$mount()
let dom = instance.$el
document.body.appendChild(dom)
return instance
};
const install = (Vue, opts = {}) => {
hevueImgPreviewConfig = opts
Vue.prototype.$hevueImgPreview = ImgPreview;
};
if (typeof window !== "undefined" && window.Vue) {
// window.Vue.use(install);
install(window.Vue)
}
export default install;废弃的 Vue.extend 和 vue.prototype.xxx = xxx
在vue3中，Vue.extend被废弃，取而代之的是createApp，这里我们可以判断一下用户使用的vue版本，从而使用不同的引入方式
另外，以往我们使用的vue.prototype.xxx = xxx 的方法也不再被推荐使用，取而代之的是app.config.globalProperties.xxx = xxx
因为js规定import必须要在头部引入，而我们这里需要先判断vue的版本，再决定引入方式，所以我们可以使用import()方法替代，注意，这是一个异步函数
所以install部分的代码需要修改如下
const install = async (app, opts = {}) => {
hevueImgPreviewConfig = opts
vueVersion = app.version.split(".")[0]
if (vueVersion > 2) {
let {createApp} = await import("vue");
imgApp = createApp(VueToast)
app.config.globalProperties.$hevueImgPreview = ImgPreview;
} else {
let _vue = await (await import("vue")).default;
console.log(_vue);
imgApp = _vue.extend(VueToast)
_vue.prototype.$hevueImgPreview = ImgPreview;
}
};在vue3中，同一插件将不能重复注册
官方的原话是这样的
Vue.use会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。
所以我们将不能重复的生成instance，我的做法是在第一次生成instance之后，存储已生成的标识，第二次执行的时候不再进行生成（因为也不能二次生成），而是复用
我对vue3理解的不熟，这一段的描述可能不正确，欢迎大佬指正
另外，在vue3中，$mount()不在支持无参数调用，所以整体代码修改如下
import VueToast from "./hevue-img-preview.vue";
let imgApp
let hevueImgPreviewConfig
let instance
let vueVersion
const ImgPreview = (options = {}) => {
if (typeof options === 'string') {
options = {
url: options
};
}
// 优先采取局部配置，其次采取全局配置
Object.keys(hevueImgPreviewConfig).map(name => {
if ( options[name] == undefined) {
options[name] = hevueImgPreviewConfig[name]
}
})
if (vueVersion > 2) {
if (!imgApp.hevueImgPreviewInstalled) {
const parent = document.createElement('div')
instance = imgApp.mount(parent)
imgApp.hevueImgPreviewInstalled = true
let dom = instance.$el
document.body.appendChild(dom)
}
Object.keys(options).map(name => {
instance[name] = options[name]
})
} else {
instance = new imgApp({
data: options
})
instance.$mount()
let dom = instance.$el
document.body.appendChild(dom)
}
instance.show()
return instance
}
const install = async (app, opts = {}) => {
hevueImgPreviewConfig = opts
vueVersion = app.version.split(".")[0]
if (vueVersion > 2) {
let {createApp} = await import("vue");
imgApp = createApp(VueToast)
app.config.globalProperties.$hevueImgPreview = ImgPreview;
} else {
let _vue = await (await import("vue")).default;
console.log(_vue);
imgApp = _vue.extend(VueToast)
_vue.prototype.$hevueImgPreview = ImgPreview;
}
};
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue)
}
export default install;vue3我也是刚接触，希望可以给大家带来帮助，另外此插件也会持续更新，欢迎有需要的朋友自取
腾讯云开发者
