feat: migrate ImagePreview component

src/image-preview/index.js

@@ -1,15 +1,15 @@
-// import Vue from 'vue';
-import VueImagePreview from './ImagePreview';
+import { createApp, nextTick } from 'vue';
+import VanImagePreview from './ImagePreview';
 import { inBrowser } from '../utils';
 
 let instance;
 
 const defaultConfig = {
   loop: true,
-  value: true,
   images: [],
   maxZoom: 3,
   minZoom: 1 / 3,
+  onScale: null,
   onClose: null,
   onChange: null,
   className: '',
@@ -25,24 +25,59 @@ const defaultConfig = {
   closeIconPosition: 'top-right',
 };
 
-const initInstance = () => {
-  instance = new (Vue.extend(VueImagePreview))({
-    el: document.createElement('div'),
-  });
-  document.body.appendChild(instance.$el);
+function initInstance() {
+  const root = document.createElement('div');
+  document.body.appendChild(root);
 
-  instance.$on('change', (index) => {
-    if (instance.onChange) {
-      instance.onChange(index);
-    }
-  });
+  instance = createApp({
+    data() {
+      return {
+        props: {
+          show: false,
+        },
+      };
+    },
+    methods: {
+      close() {
+        this.toggle(false);
+      },
+      toggle(show) {
+        this.props.show = show;
+      },
+      setProps(props) {
+        Object.assign(this.props, props);
+      },
+      onClosed() {
+        this.props.images = [];
+      },
+    },
+    render() {
+      return (
+        <VanImagePreview
+          {...{
+            ...this.props,
+            onClosed: this.onClosed,
+            'onUpdate:show': this.toggle,
+          }}
+        />
+      );
+    },
+  }).mount(root);
+}
 
-  instance.$on('scale', (data) => {
-    if (instance.onScale) {
-      instance.onScale(data);
-    }
-  });
-};
+// const initInstance = () => {
+//   instance.$on('change', (index) => {
+//     if (instance.onChange) {
+//       instance.onChange(index);
+//     }
+//   });
+
+//   instance.$on('scale', (data) => {
+//     if (instance.onScale) {
+//       instance.onScale(data);
+//     }
+//   });
+// };
 
 const ImagePreview = (images, startPosition = 0) => {
   /* istanbul ignore if */
@@ -56,28 +91,27 @@ const ImagePreview = (images, startPosition = 0) => {
 
   const options = Array.isArray(images) ? { images, startPosition } : images;
 
-  Object.assign(instance, defaultConfig, options);
-
-  instance.$once('input', (show) => {
-    instance.value = show;
+  instance.setProps({
+    ...defaultConfig,
+    ...options,
   });
 
-  instance.$once('closed', () => {
-    instance.images = [];
+  nextTick(() => {
+    instance.toggle(true);
   });
 
-  if (options.onClose) {
-    instance.$off('close');
-    instance.$once('close', options.onClose);
-  }
+  // if (options.onClose) {
+  //   instance.$off('close');
+  //   instance.$once('close', options.onClose);
+  // }
 
   return instance;
 };
 
-ImagePreview.Component = VueImagePreview;
+ImagePreview.Component = VanImagePreview;
 
-ImagePreview.install = () => {
-  Vue.use(VueImagePreview);
+ImagePreview.install = (app) => {
+  app.use(VanImagePreview);
 };
 
 export default ImagePreview;