xl-mobile/src/components/XSquareCarouselImage.vue

<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,
        default: [
            testIcon, testIcon, testIcon, testIcon
        ],
    },
    showSY: {
        type: Boolean,
        default: false,
    }
});

const openPrew = () => {
    XImageRef.value.open();
}
</script>

<template>
    <view class="relative">
        <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"
               @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"
                  :class="[`rounded-[50%] !size-[12rpx] ${index === 0 ? 'bg-[rgba(255,255,255,1)]' : 'bg-[rgba(255,255,255,.67)]'}`]"></view>
        </view>
    </view>
</template>

<style scoped lang="scss">

</style>