72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<!--image放大封装-->
|
|
<template>
|
|
<div class="amplify-image">
|
|
<div class="img-preview-content" @click="hideImageClick" @mousewheel="handlePicMousewheel">
|
|
<img :src="imageUrl" ref="imageRef" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
//图片地址
|
|
import {onMounted, ref, unref} from 'vue';
|
|
const props = defineProps(['imageUrl']);
|
|
const emit = defineEmits(['register', 'hide']);
|
|
//图片的ref
|
|
const imageRef = ref();
|
|
//缩放级别
|
|
const scale = ref<number>(1);
|
|
|
|
/**
|
|
* 隐藏图片
|
|
*/
|
|
function hideImageClick() {
|
|
scale.value = 1;
|
|
emit('hide')
|
|
}
|
|
|
|
/**
|
|
* 鼠标滑轮滚动
|
|
* @param event
|
|
*/
|
|
function handlePicMousewheel(event) {
|
|
event.preventDefault();
|
|
// 判断是放大还是缩小
|
|
const delta = event.deltaY > 0 ? -1 : 1;
|
|
const scaleStep = 0.1;
|
|
// 更新缩放级别
|
|
scale.value = scale.value + delta * scaleStep
|
|
imageRef.value.style.transform = `scale(${unref(scale)})`;
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.amplify-image{
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
.img-preview-content{
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #fff;
|
|
justify-content: center;
|
|
align-items: center;
|
|
touch-action: none;
|
|
-webkit-user-drag: none;
|
|
img{
|
|
transition: transform 0.3s;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
</style>
|