| 123456789101112131415161718192021222324252627 |
- <script setup lang="ts">
- withDefaults(defineProps<{ src?: string; mode?: 'aspectFill' }>(), {})
- const emits = defineEmits<{ displayed: [] }>()
- const visible = ref(false)
- const imgClass = ref('blur-lg transition duration-500 hover:blur-none')
- const handleLoad = async () => {
- visible.value = true
- imgClass.value = 'transition duration-500'
- await nextTick(() => {
- emits('displayed')
- })
- }
- </script>
- <template>
- <!-- <div> -->
- <wd-img
- class="w-full h-full"
- width="100%"
- height="100%"
- :mode="mode"
- :style="{ visibility: visible ? 'visible' : 'hidden' }"
- :src="src"
- :custom-class="`vertical-bottom ${imgClass}`"
- @load="handleLoad"
- ></wd-img>
- <!-- </div> -->
- </template>
|
