56 lines
1.1 KiB
Vue
56 lines
1.1 KiB
Vue
<template>
|
|
<view class="lc-wrap">
|
|
<view class="lc-frame">
|
|
<LenticularCard
|
|
:layers="lenticularLayers"
|
|
:transforms="layerTransforms"
|
|
gyro-source="simulation"
|
|
:approximate-preview="true"
|
|
tilt-hint-text="滑动卡片预览光栅效果"
|
|
@simulate="simulate"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue'
|
|
import LenticularCard from './LenticularCard.vue'
|
|
import { useLenticularPreview } from '@/composables/useLenticularPreview.js'
|
|
import { buildLenticularLayers } from '@/utils/castloveMintForm.js'
|
|
|
|
const props = defineProps({
|
|
/** 用户上传图：作为光栅主体层 */
|
|
imageSrc: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
|
|
const lenticularLayers = ref(buildLenticularLayers(props.imageSrc || ''))
|
|
|
|
watch(
|
|
() => props.imageSrc,
|
|
(s) => {
|
|
lenticularLayers.value = buildLenticularLayers(s || '')
|
|
}
|
|
)
|
|
|
|
const { layerTransforms, simulate } = useLenticularPreview(lenticularLayers)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.lc-wrap {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 16rpx 0 32rpx;
|
|
}
|
|
|
|
.lc-frame {
|
|
width: 100%;
|
|
height: 520rpx;
|
|
max-height: 70vh;
|
|
}
|
|
</style>
|