关于前端:vue2x插件升级支持vue3支持vue3的图片预览插件来了-hevueimgpreview

5次阅读

共计 3167 个字符，预计需要花费 8 分钟才能阅读完成。

之前在工作中有须要用到图片预览的中央，当初没有找到适合的图片插件，于是就本人写了一个，并公布到了 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;

在 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;
  }    
};

官网的原话是这样的

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 我也是刚接触，心愿能够给大家带来帮忙，另外此插件也会继续更新，欢送有须要的敌人自取

正文完