<script setup lang="ts">
|
import {
|
toRefs,
|
computed,
|
ref,
|
effectScope,
|
onMounted,
|
onBeforeUnmount,
|
type CSSProperties
|
} from 'vue'
|
import { throttle } from 'lodash-es'
|
import { useEventListener } from '@vueuse/core'
|
const props = defineProps({
|
modelValue: Boolean,
|
imageUrl: String
|
})
|
|
type ImageViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise'
|
|
const transform = ref({
|
scale: 1
|
})
|
const scopeEventListener = effectScope()
|
const { modelValue, imageUrl } = toRefs(props)
|
const imgStyle = computed(() => {
|
const { scale } = transform.value
|
const style: CSSProperties = {
|
transform: `scale(${scale})`
|
}
|
return style
|
})
|
|
const handleActions = (action: ImageViewerAction, options = {}) => {
|
const { zoomRate } = {
|
zoomRate: 1.4,
|
...options
|
}
|
switch (action) {
|
case 'zoomOut':
|
if (transform.value.scale > 0.2) {
|
transform.value.scale = Number.parseFloat((transform.value.scale / zoomRate).toFixed(3))
|
}
|
break
|
case 'zoomIn':
|
if (transform.value.scale < 7) {
|
transform.value.scale = Number.parseFloat((transform.value.scale * zoomRate).toFixed(3))
|
}
|
break
|
}
|
}
|
|
const mousewheelHandler = throttle((e: WheelEvent | any /* TODO: wheelDelta is deprecated */) => {
|
const delta = e.wheelDelta ? e.wheelDelta : -e.detail
|
if (delta > 0) {
|
handleActions('zoomIn', {
|
zoomRate: 1.2,
|
enableTransition: false
|
})
|
} else {
|
handleActions('zoomOut', {
|
zoomRate: 1.2,
|
enableTransition: false
|
})
|
}
|
})
|
|
onMounted(() => {
|
scopeEventListener.run(() => {
|
useEventListener(document, 'mousewheel', mousewheelHandler)
|
})
|
})
|
onBeforeUnmount(() => {
|
scopeEventListener.stop()
|
})
|
const emits = defineEmits(['update:modelValue'])
|
const HandleBeforeClose = () => {
|
transform.value.scale = 1
|
modelValue.value = false
|
emits('update:modelValue', false)
|
}
|
</script>
|
|
<template>
|
<el-dialog
|
class="img-enlarge-dialog"
|
append-to-body
|
:before-close="HandleBeforeClose"
|
destroy-on-close
|
close-on-click-modal
|
v-model="modelValue"
|
>
|
<div class="img-content 13">
|
<img :style="imgStyle" :src="imageUrl" alt="Preview Image" />
|
</div>
|
</el-dialog>
|
</template>
|
|
<style lang="less" scoped>
|
.img-content {
|
width: 100vw;
|
height: calc(100vh - 70px);
|
overflow-y: hidden;
|
padding: 60px 120px;
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
}
|
</style>
|
