hevue-img-preview - npm Package Compare versions

Comparing version 5.0.3 to 6.0.0

index.js

 /*
- * @Author: heyongsheng
+ * @Author: 贺永胜
  * @Date: 2020-04-22 15:40:42
- * @Last Modified by: heyongsheng
- * @Last Modified time: 2020-07-08 22:49:13
+ * @公众号: 百里青山
+ * @LastEditors: 贺永胜
+ * @LastEditTime: 2022-07-21 16:21:47
+ * @Descripttion: 
  */
-import Vue from "vue";
 import VueToast from "./hevue-img-preview.vue";
 
-const ToastConstructor = Vue.extend(VueToast);
-
+let imgApp
+let hevueImgPreviewConfig
 let instance
-let hevueImgPreviewConfig
+let vueVersion
 
 const ImgPreview = (options = {}) => {
+
   if (typeof options === 'string') {
@@ -21,3 +23,3 @@ options = {
   }
-  options.show = true
+
   // 优先采取局部配置，其次采取全局配置
@@ -30,21 +32,50 @@ Object.keys(hevueImgPreviewConfig).map(name => {
 
-  instance = new ToastConstructor({
-    data: options
-  })
-  instance.$mount()
-  let dom = instance.$el
-  document.body.appendChild(dom)
+  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 = (Vue, opts = {}) => {
+const install = async (app, opts = {}) => {
+
   hevueImgPreviewConfig = opts
-  Vue.prototype.$hevueImgPreview = ImgPreview;
+  
+  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) {
-  // window.Vue.use(install);
   install(window.Vue)
 }
 
-export default install;
+export default install;

package.json

 {
   "name": "hevue-img-preview",
   "description": "> 本组件是一个基于 vue 编写的 vue 图片预览组件，支持 pc 和手机端，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果。手机端支持单指拖拽和双指缩放。页面各组件颜色均可可自定义，实现个性化设计，如果能帮上你，希望可以移步 [GitHub](https://github.com/heyongsheng/hevue-img-preview) ，或者[码云](https://gitee.com/ihope_top/hevue-img-preview) 给个小星星，如果有任何使用意见或建议，也欢迎回复或者提交 issue",
-  "version": "5.0.3",
+  "version": "6.0.0",
   "author": "贺永胜 <[e-mail]>",
@@ -6,0 +6,0 @@ "license": "MIT",

No alert changes

Improved metrics

Total package byte prevSize

40892

increased by1.78%

Lines of code

312

increased by7.96%

No dependency changes