要
实现点击
图片放大
预览的功能，可以通过绑定点击事件，在点击时弹出模态框或者新窗口来显示
预览图片。在模态框或者新窗口中，我们可以展示
图片的原始大小，并提供一些交互操作，如放大、缩小、旋转、裁剪等。
下面是一个使用
Vue和
Element UI
实现的
图片放大
预览的代码示例：
```html
<template>
<div>
<input type="file" accept="
image/*" capture="camera" @change="preview
Image" ref="fileInput">
<img :src="
imageUrl" v-if="
imageUrl" @click="showPreview">
<
el-dialog :visible.sync="previewVisible">
<img :src="
imageUrl" :style="{transform: 'rotate(' + rotateDegree + 'deg) scale(' + scale + ')', cursor: isDragging ? 'grabbing' : 'grab'}" @mousedown="startDrag" @mouseup="endDrag" @mousemove="onDrag" ref="preview
Image">
<
el-slider v-mod
el="scale" :min="0.1" :max="5" :step="0.1" style="width: 300px; margin: 10px 0;"></
el-slider>
<
el-button-group>
<
el-button type="primary" @click="rotateDegree -= 90">向左旋转</
el-button>
<
el-button type="primary" @click="rotateDegree += 90">向右旋转</
el-button>
</
el-button-group>
</
el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: '',
previewVisible: false,
rotateDegree: 0,
scale: 1,
isDragging: false,
startX: 0,
startY: 0,
startLeft: 0,
startTop: 0,
};
},
methods: {
preview
Image(event) {
const file = event.target.files[0];
if (!file) {
return;
}
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
this.
imageUrl = e.target.result;
};
},
showPreview() {
this.previewVisible = true;
},
startDrag(event) {
this.isDragging = true;
this.startX = event.clientX;
this.startY = event.clientY;
this.startLeft = this.$refs.preview
Image.offsetLeft;
this.startTop = this.$refs.preview
Image.offsetTop;
},
endDrag() {
this.isDragging = false;
},
onDrag(event) {
if (!this.isDragging) {
return;
}
const dx = event.clientX - this.startX;
const dy = event.clientY - this.startY;
const left = this.startLeft + dx;
const top = this.startTop + dy;
this.$refs.preview
Image.style.left = left + 'px';
this.$refs.preview
Image.style.top = top + 'px';
},
},
};
</script>
```
在上面的代码中，我们新增了一个
图片预览的模态框，当用户点击
图片时，会通过showPreview方法设置previewVisible属性为true，从而显示模态框。模态框中使用了
Element UI的Slider组件，用于控制
图片的缩放比例；同时还提供了向左旋转、向右旋转的按钮，用于调整
图片的旋转角度；通过鼠标拖拽
实现了
图片的平移功能。
注意，上面的示例只是一个简单的
实现，还有很多细节需要注意，比如
图片的边界判断、拖拽的时候阻止选中文本等等。
253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
