-
-
Notifications
You must be signed in to change notification settings - Fork 3
/
ProseImg.vue
66 lines (58 loc) · 1.32 KB
/
ProseImg.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<script setup lang="ts">
const props = defineProps({
src: {
type: String,
default: ''
},
alt: {
type: String,
default: ''
},
width: {
type: [String, Number],
default: undefined
},
height: {
type: [String, Number],
default: undefined
}
})
const image = ref(null)
const showZoomImage = useShowZoomImage()
const zoomImage = useZoomImage()
const currentZoomImage = useCurrentZoomImage()
// click to set zoom image
// the ligtbox which contains a copy of this image will enlarge as large as possible to the page center
const doubleClickHandler = () => {
if (image.value) {
const imageRect = image.value.getBoundingClientRect()
zoomImage.value = {
src: props.src,
width: imageRect.width,
height: imageRect.height,
x: imageRect.x,
y: imageRect.y
}
currentZoomImage.value = zoomImage.value
showZoomImage.value = 'show'
}
}
</script>
<template>
<figure class="my-2">
<img
ref="image"
class="mx-auto my-2"
:src="props.src"
:alt="props.alt"
:width="props.width"
:height="props.height"
@dblclick="doubleClickHandler"
>
<figcaption v-if="props.alt" class="text-sm text-center font-light italic">
{{ props.alt }}
</figcaption>
</figure>
</template>
<style lang="scss" scoped>
</style>