preview image

src/controllers/wxController.ts

@@ -4,7 +4,7 @@ declare const wx: any;
 
 const ua = navigator.userAgent.toLowerCase();
 
-function isWeixinBrowser() {
+export function isWeixinBrowser() {
   return /micromessenger/.test(ua) ? true : false;
 }
 

src/modules/editor/components/CompUI/basicUI/Image2/component.tsx

@@ -67,7 +67,7 @@ export const Component = defineComponent({
             if (value.showLink && value.link && !store.isEditMode) {
               window.location.href = value.link;
             } else {
-              controls.wxCtrl.setPreviewData(value.url, store.previewImageList);
+              actions.previewImage(value.url, store.previewImageList);
             }
           }}
         >

src/modules/editor/components/PreviewModal/index.tsx

@@ -0,0 +1,57 @@
+import { Image, Swiper } from "@queenjs/ui";
+import { defineComponent, reactive, ref } from "vue";
+import { array, string } from "vue-types";
+
+export default defineComponent({
+  props: {
+    data: array<string>().isRequired,
+    current: string().isRequired,
+  },
+  setup(props) {
+    const carouselRef = ref();
+
+    const index = props.data.findIndex((d) => d == props.current);
+
+    const state = reactive({
+      index: index,
+    });
+
+    return () => {
+      const { data } = props;
+      return (
+        <div class="relative">
+          <div class="absolute w-1/1 top-15px let-0 text-center z-9">
+            {state.index + 1}/{data.length}
+          </div>
+          <Swiper
+            onInit={(e) => (carouselRef.value = e)}
+            options={{
+              slidesPerView: 1,
+              initialSlide: state.index,
+              on: {
+                slideChange: (e: any) => {
+                  state.index = e.realIndex;
+                },
+              },
+            }}
+          >
+            {data?.map((item, index) => (
+              <Swiper.Slider
+                key={index}
+                class="!h-100vh flex felx-col items-center justify-center"
+              >
+                <div class="flex-1 max-h-1/1 overflow-y-auto">
+                  <Image
+                    src={item}
+                    class="w-1/1 !object-contain bg-light-50"
+                    size={800}
+                  />
+                </div>
+              </Swiper.Slider>
+            ))}
+          </Swiper>
+        </div>
+      );
+    };
+  },
+});

src/modules/editor/module/actions/image.ts → src/modules/editor/module/actions/image.tsx

@@ -1,4 +1,6 @@
+import { isWeixinBrowser } from "@/controllers/wxController";
 import { EditorModule } from "..";
+import PreviewModal from "../../components/PreviewModal";
 
 export const ImgCompActions = EditorModule.action({
   handleImageHotKey(key: string) {
@@ -31,4 +33,13 @@ export const ImgCompActions = EditorModule.action({
       return;
     }
   },
+  previewImage(url, previewImageList) {
+    if (isWeixinBrowser()) {
+      this.controls.wxCtrl.setPreviewData(url, previewImageList);
+    } else {
+      this.showModal(<PreviewModal data={previewImageList} current={url} />, {
+        fullscreen: true,
+      });
+    }
+  },
 });