update

src/components/XSquareCarouselImage.vue

@@ -1,8 +1,10 @@
 <script setup>
+import {ref} from "vue";
 import testIcon from '../static/images/test.png';
 import XImage from "./XImage.vue";
 import ICON from "../static/icons/水印_素材案例.png";
 
+const XImageRef = ref();
 const {list, showSY} = defineProps({
     list: {
         type: Array,
@@ -15,13 +17,19 @@ const {list, showSY} = defineProps({
         default: false,
     }
 });
+
+const openPrew = () => {
+    XImageRef.value.open();
+}
 </script>
 
 <template>
     <view class="relative">
-        <x-image class="!w-[160rpx] !h-[160rpx]" mode="aspectFill" :src="list[0]" :list="list"></x-image>
+        <x-image :sy="showSY" ref="XImageRef" class="!w-[160rpx] !h-[160rpx]" mode="aspectFill" :src="list[0]"
+                 :list="list"></x-image>
 
-        <image v-if="showSY" class="!size-full !absolute left-0 top-0" :src="ICON" mode="aspectFill"></image>
+        <image v-if="showSY" class="!size-full !absolute left-0 top-0" :src="ICON" mode="aspectFill"
+               @click="openPrew"></image>
 
         <view class="!flex absolute left-1/2 -translate-x-1/2 bottom-[20rpx] z-10 gap-[8rpx]">
             <view v-for="(_v, index) in list"