Vue的弹出框实现图片预览和视频预览功能
作者：逢场作戏2
本文介绍基于Vue3的媒体预览组件,支持图片与视频预览,具备缩放、旋转、拖拽功能,采用ElementUI Dialog容器,通过计算属性实现动态样式,优化拖拽性能,自动调整方向,便于集成使用
VUE 的弹出框实现图片预览和视频预览
这是一个基于Vue3封装的媒体预览组件，主要功能包括：
- 多格式支持：可同时预览图片和视频
- 图片操作功能：
- 缩放（支持滚轮缩放和按钮控制）
- 旋转（90度增量旋转）
- 拖拽（仅在放大状态下可用）
- 自适应显示：图片自动适应容器大小
- 响应式设计：使用Element UI的Dialog作为容器
组件特点：
- 通过计算属性动态计算图片样式
- 使用requestAnimationFrame优化拖拽性能
- 支持图片加载后自动调整方向
- 提供视频播放控制功能
该组件封装了完整的交互逻辑，可方便地集成到项目中实现媒体预览功能。
下面是实现代码：
<template>
<el-dialog v-model="visible" width="1184px" class="preview-dialog" close align-center>
<template v-if="!isVideoPreview" #footer>
<div class="preview-dialog-footer">
<el-button type="text" @click="zoomOut" class="zoom-button">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
<line x1="8" y1="11" x2="14" y2="11"></line>
</svg>
</el-button>
<el-button type="text" @click="zoomIn" class="zoom-button">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
<line x1="11" y1="8" x2="11" y2="14"></line>
<line x1="8" y1="11" x2="14" y2="11"></line>
</svg>
</el-button>
<el-button type="text" @click="rotateImage(90)" class="rotate-button">
<img :src="Rotate" />
</el-button>
</div>
</template>
<div class="preview-content" @wheel="handleWheel">
<img
v-if="!isVideoPreview"
:src="previewUrl"
@load="onImageLoad"
:style="imageStyle"
ref="previewImage"
@mousedown="startDrag"
@mousemove="onDrag"
@mouseup="endDrag"
@mouseleave="endDrag"
/>
<video v-if="isVideoPreview" :src="previewUrl" class="media-video" controls autoplay></video>
</div>
</el-dialog>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import Rotate from '@/assets/home/icon/rotate.svg';
const props = defineProps({
modelValue: Boolean,
previewUrl: {
type: String,
default: ''
},
isVideoPreview: Boolean
});
const emit = defineEmits(['update:modelValue']);
const visible = ref(props.modelValue);
watch(
() => props.modelValue,
(newVal) => {
visible.value = newVal;
}
);
watch(visible, (val) => {
emit('update:modelValue', val);
});
const imageRotation = ref(0);
const previewImage = ref(null);
const dialogWidth = 1184;
const dialogHeight = 648;
const zoomLevel = ref(1);
// 缩放限制
const minZoom = 0.1;
const maxZoom = 5;
// 拖拽相关变量
const isDragging = ref(false);
const dragStartX = ref(0);
const dragStartY = ref(0);
const imageStartLeft = ref(0);
const imageStartTop = ref(0);
const imageLeft = ref(0);
const imageTop = ref(0);
const rafId = ref(0);
const zoomIn = () => {
if (zoomLevel.value < maxZoom) {
zoomLevel.value = Math.min(zoomLevel.value + 0.1, maxZoom);
}
};
const zoomOut = () => {
if (zoomLevel.value > minZoom) {
zoomLevel.value = Math.max(zoomLevel.value - 0.1, minZoom);
}
};
const handleWheel = (event) => {
event.preventDefault();
if (event.deltaY < 0) {
zoomIn();
} else {
zoomOut();
}
};
const startDrag = (event) => {
if (zoomLevel.value <= 1) return; // 只有在放大时才能拖拽
isDragging.value = true;
dragStartX.value = event.clientX;
dragStartY.value = event.clientY;
imageStartLeft.value = imageLeft.value;
imageStartTop.value = imageTop.value;
if (previewImage.value) {
previewImage.value.style.cursor = 'grabbing';
}
// 阻止默认行为，防止图片被选中
event.preventDefault();
};
const onDrag = (event) => {
if (!isDragging.value || zoomLevel.value <= 1) return;
// 使用 requestAnimationFrame 优化性能
if (rafId.value) {
cancelAnimationFrame(rafId.value);
}
rafId.value = requestAnimationFrame(() => {
const deltaX = event.clientX - dragStartX.value;
const deltaY = event.clientY - dragStartY.value;
imageLeft.value = imageStartLeft.value + deltaX;
imageTop.value = imageStartTop.value + deltaY;
rafId.value = 0;
});
// 阻止默认行为
event.preventDefault();
};
const endDrag = () => {
isDragging.value = false;
if (rafId.value) {
cancelAnimationFrame(rafId.value);
rafId.value = 0;
}
if (previewImage.value) {
previewImage.value.style.cursor = 'grab';
}
};
const rotateImage = (degree) => {
console.log('翻转', degree, (imageRotation.value + degree) % 360);
imageRotation.value += degree;
// zoomIn();
// 旋转时重置缩放级别以避免布局问题
zoomLevel.value = 1;
// 重置拖拽位置
imageLeft.value = 0;
imageTop.value = 0;
};
const imageDimensions = computed(() => {
if (!previewImage.value) return { width: 0, height: 0 };
const img = previewImage.value;
const naturalWidth = img.naturalWidth;
const naturalHeight = img.naturalHeight;
const isRotated = imageRotation.value % 180 !== 0;
const displayWidth = isRotated ? naturalHeight : naturalWidth;
const displayHeight = isRotated ? naturalWidth : naturalHeight;
return { width: displayWidth, height: displayHeight };
});
const imageStyle = computed(() => {
if (!previewImage.value) return {};
const { width: displayWidth, height: displayHeight } = imageDimensions.value;
// 计算基础缩放比例，确保图片适应容器
const baseScale = Math.min(dialogWidth / displayWidth, dialogHeight / displayHeight);
// 应用用户缩放级别
const finalScale = baseScale * zoomLevel.value;
// 计算缩放后的尺寸
const scaledWidth = displayWidth * finalScale;
const scaledHeight = displayHeight * finalScale;
// 居中定位
const left = (dialogWidth - scaledWidth) / 2 + imageLeft.value;
const top = (dialogHeight - scaledHeight) / 2 + imageTop.value;
return {
position: 'absolute',
left: `${left}px`,
top: `${top}px`,
width: `${scaledWidth}px`,
height: `${scaledHeight}px`,
transform: `rotate(${imageRotation.value}deg)`,
transformOrigin: 'center center',
cursor: zoomLevel.value > 1 ? 'grab' : 'default'
};
});
const onImageLoad = () => {
// 重置旋转和缩放
imageRotation.value = 0;
zoomLevel.value = 1;
imageLeft.value = 0;
imageTop.value = 0;
for (let index = 0; index < 4; index++) {
console.log('执行第几次', index + 1);
rotateImage(90); //执行四次 可以让图片以合适的宽度呈现
}
// 可选：调试用
// console.log('Image loaded:', previewImage.value.naturalWidth, previewImage.value.naturalHeight);
};
</script>
<style lang="scss" scoped>
.preview-dialog {
:deep(.el-dialog) {
height: 648px;
display: flex;
flex-direction: column;
}
:deep(.el-dialog__body) {
flex: 1;
overflow: hidden !important;
text-align: center;
padding: 0;
position: relative;
}
.preview-dialog-footer {
display: flex;
justify-content: center;
align-items: center;
}
.rotate-button {
font-size: 20px;
padding: 10px;
}
.preview-content {
width: 1184px;
height: 648px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
img {
max-width: none;
max-height: none;
object-fit: contain;
user-select: none;
// 添加硬件加速
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}
.media-video {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
}
</style>补充：vue图片预览
vue图片预览
vue结合vant实现图片视频预览
1. 给图片或视频添加点击事件
<div class="comment_image_box_list" v-for="(imgitem, imgindex) in item.img_url" :key="imgindex+'i'"> <img :src="imgitem" alt="" @click="showPopup(imgitem, 1)" /> </div> <div class="comment_image_box_list" v-for="(vdoitem, vdoindex) in item.video_url" :key="vdoindex+ 'v'"> <video :src="vdoitem" @click="showPopup(vdoitem, 2)" :poster="vdoitem + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_800,h_600,m_fast'"></video> </div>
2.准备一个弹框:
<van-popup v-model="popubIsShow"> <img class="popubImg" :src="img_src" alt="" v-if="popup_type == 1" /> <video class="popubImg" :src="img_src" :poster="img_src + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_800,h_600,m_fast'" controls v-if="popup_type == 2"></video> </van-popup>
3.data准备变量:
data() {
return {
popubIsShow: false,
img_src: ''
};
},4.定义方法:
showPopup(src, type) {
this.img_src = src
this.popubIsShow = true;
this.popup_type = type
},ok,解决
到此这篇关于VUE 的弹出框实现图片预览和视频预览的文章就介绍到这了,更多相关vue弹出框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！