vue2.x插件升级支持vue3，支持vue3的图片预览插件来了 —— hevue-img-preview

之前在工作中有需要用到图片预览的地方，当初没有找到合适的图片插件，于是就自己写了一个，并发布到了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 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我也是刚接触，希望可以给大家带来帮助，另外此插件也会持续更新，欢迎有需要的朋友自取