之前在工作中有须要用到图片预览的中央，当初没有找到适合的图片插件，于是就本人写了一个，并公布到了github，没想到的是居然始终有人应用，人不知;鬼不觉的小星星也达到了一百多个，每天文档也还有人拜访，于是抽时间给兼容了vue3一下，特来记录一下，因为业务局部的代码和vue3兼容，所以次要记录一下对于vue2和vue3插件局部的区别
首先附上插件的地址
github: https://github.com/heyongshen...
gitee: https://gitee.com/ihope_top/h...
文档地址：https://heyongsheng.github.io/#/
为了不便，我将对vue2和vue3的兼容放在了一个文件进行逻辑解决，不须要下载不同的版本
首先来看一下之前的index配置文件
import Vue from "vue";import VueToast from "./hevue-img-preview.vue";const ToastConstructor = Vue.extend(VueToast);let instancelet hevueImgPreviewConfigconst 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 imgApplet hevueImgPreviewConfiglet instancelet vueVersionconst 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我也是刚接触，心愿能够给大家带来帮忙，另外此插件也会继续更新，欢送有须要的敌人自取