ant-design-vue3.2.6 图片预览,旋转,放大缩小
图片预览
·
这个虽然用弹窗写的 但是是在页面上的图片预览 所以对弹窗样式进行了修改
<div ref="aa" style="width:75%;">
<a-modal
class="picPreview"
:title="title"
:visible="imgListShow"
@cancel="$emit('close')"
:bodyStyle="moduleCenter"
:getContainer="()=>$refs.aa"
transitionName="none"
>
<p class="p_text">220309_文件名003</p>
<div id="test_3" @mousemove="move" @mouseup="stop" @mouseleave="mouseLeave">
<img @mousedown="start" :src="furl" ref="singleImg" class="originStyle" />
</div>
<template #footer>
<div class="allImg">
<a-button @click="handleCurrentChange(-1)" class="changeImg">
<left-outlined />
</a-button>
<div class="imgbox" :class="imgList.length>6?'':'min'" ref="imgbox">
<img
v-for="(item,index) in imgList"
:key="item"
:src="item"
:class="{ changeColor:changeColor == index}"
@click="handlerImg(item,index)"
/>
</div>
<a-button @click="handleCurrentChange(1)" class="changeImg right">
<right-outlined />
</a-button>
</div>
<div class="ctr-box">
<a-button @click="rotateL" title="左旋转">
<redo-outlined />
<!-- 左旋转 -->
</a-button>
<a-button @click="rotateR" title="右旋转">
<undo-outlined />
<!-- 右旋转 -->
</a-button>
<a-button @click="scale(-1)" title="缩小">
<zoom-out-outlined />
<!-- 缩小 -->
</a-button>
<a-button @click="scale(1)" title="放大">
<zoom-in-outlined />
<!-- 放大 -->
</a-button>
</div>
</template>
</a-modal>
</div>
<script>
export default {
name: "PicPreview",
data() {
return {
imgListShow: true,
num: 0,
furl: "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
changeColor: 0,
currentRotate: 0,
currentScale: 1,
canDrag: false,
offset_x: 0,
offset_y: 0,
mouse_x: 0,
mouse_y: 0,
moduleCenter: {
display: "flex",
alignItems: "center",
justifyContent: "center",
textAlign: "center",
height: "400px"
},
downUrl: "",
imgList:[
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
]
};
},
props: {
title: {
//弹框名称
type: String,
required: false,
default: "批量修改"
},
filePreviewShow: {
//是否显示
type: Boolean,
required: true,
default: true
},
// imgList: {
// //图像数组
// type: Array,
// required: true,
// default: function() {
// return [];
// }
// },
currentImg: {
//当前图像
type: String,
required: false,
default: ""
},
currentIndex: {
//当前图像下标
type: Number,
required: false,
default: 0
}
},
watch: {
filePreviewShow(newv) {
if (newv) {
this.imgListShow = this.filePreviewShow;
this.imgList = this.trimSpace(this.imgList);
if (this.imgList.length === 0) {
this.furl = "";
this.changeColor = 0;
} else {
this.changeColor = this.currentIndex;
if (this.currentImg) {
this.changeColor = this.imgList.findIndex(
a => a === this.currentImg
);
}
setTimeout(() => {
this.scrollImg(this.changeColor - 5, this.changeColor < 5);
}, 500);
this.furl = this.imgList[this.changeColor];
this.handlerImg(this.furl, this.changeColor);
}
} else {
this.imgListShow = this.filePreviewShow;
this.$refs.imgbox.scrollLeft = 0;
window.removeEventListener("mousewheel", this.handleScroll, true) ||
window.removeEventListener("DOMMouseScroll", this.handleScroll, true);
}
}
},
mounted() {
setTimeout(() => {
this.scrollImg(this.changeColor - 5, this.changeColor < 5);
}, 500);
this.changeColor = 0;
},
methods: {
trimSpace(array) {
for (var i = 0; i < array.length; i++) {
if (
array[i] == " " ||
array[i] == null ||
typeof array[i] == "undefined"
) {
array.splice(i, 1);
i = i - 1;
}
}
return array;
},
//判断滚动方向
handleScroll(e) {
this.scale(-e.deltaY);
},
//点击图片显示
handlerImg(furl, index) {
this.currentRotate = 0;
this.currentScale = 1;
this.rotateScale();
if (this.$refs.singleImg) {
this.$refs.singleImg.style.left = 0;
this.$refs.singleImg.style.top = 0;
}
this.furl = furl;
this.changeColor = index;
if (
document.getElementsByClassName("originStyle") &&
document.getElementsByClassName("originStyle")[0] &&
document.getElementsByClassName("originStyle")[0].style
) {
document.getElementsByClassName("originStyle")[0].style.position =
"relative";
}
},
handleCurrentChange(val) {
const changeColor = this.changeColor + val;
if (changeColor === this.imgList.length || changeColor === -1) {
return;
}
this.currentRotate = 0;
this.currentScale = 1;
this.rotateScale();
this.$refs.singleImg.style.left = 0;
this.$refs.singleImg.style.top = 0;
this.furl = this.imgList[changeColor];
this.changeColor = changeColor;
const noScroll =
(val > 0 && changeColor <= 5) ||
(val < 0 && changeColor + 1 >= this.imgList.length - 5);
this.scrollImg(val, noScroll);
},
scrollImg(val, noScroll) {
if (noScroll || !this.$refs.imgbox) {
return;
}
this.$refs.imgbox.scrollLeft += 60 * val;
},
start(e) {
//鼠标左键点击
e.preventDefault && e.preventDefault(); //去掉图片拖动响应
if (e.button == 0) {
this.canDrag = true;
//获取需要拖动节点的坐标
this.offset_x = document.getElementsByClassName(
"originStyle"
)[0].offsetLeft; //x坐标
this.offset_y = document.getElementsByClassName(
"originStyle"
)[0].offsetTop; //y坐标
//获取当前鼠标的坐标
this.mouse_x = e.pageX;
this.mouse_y = e.pageY;
}
},
move(e) {
e.preventDefault && e.preventDefault();
window.addEventListener("mousewheel", this.handleScroll, true) ||
window.addEventListener("DOMMouseScroll", this.handleScroll, false);
if (this.canDrag == true) {
let _x = e.pageX - this.mouse_x;
let _y = e.pageY - this.mouse_y;
//设置移动后的元素坐标
let now_x = this.offset_x + _x + "px";
let now_y = this.offset_y + _y + "px";
document.getElementsByClassName("originStyle")[0].style.position =
"absolute";
document.getElementsByClassName("originStyle")[0].style.top = now_y;
document.getElementsByClassName("originStyle")[0].style.left = now_x;
}
},
mouseLeave(e) {
this.canDrag = false;
window.removeEventListener("mousewheel", this.handleScroll, true) ||
window.removeEventListener("DOMMouseScroll", this.handleScroll, true);
},
stop(e) {
this.canDrag = false;
},
//旋转放大
rotateScale() {
if (!this.$refs.singleImg) {
return;
}
this.$refs.singleImg.style.Transform ="rotate(" +this.currentRotate +"deg)" +"scale(" +this.currentScale +")";
this.$refs.singleImg.style.webkitTransform ="rotate(" +this.currentRotate +"deg)" +"scale(" +this.currentScale +")";
this.$refs.singleImg.style.MozTransform ="rotate(" +this.currentRotate +"deg)" +"scale(" +this.currentScale +")";
this.$refs.singleImg.style.msTransform ="rotate(" +this.currentRotate +"deg)" +"scale(" +this.currentScale +")";
this.$refs.singleImg.style.transform ="rotate(" +this.currentRotate +"deg)" +"scale(" +this.currentScale +")";
},
//旋转
rotateL() {
this.currentRotate += 90;
this.rotateScale();
},
rotateR() {
this.currentRotate -= 90;
this.rotateScale();
},
//缩放 放大
scale(type) {
if (type >= 0) {
this.currentScale += 0.1;
this.rotateScale();
} else {
this.currentScale -= 0.1;
if (this.currentScale <= 0.1) {
this.currentScale = 0.1;
this.rotateScale();
} else {
this.rotateScale();
}
}
}
}
};
</script>
<style lang="less" scoped >
::v-deep .ant-modal-footer {
border-top: 0;
.allImg {
height: 60px;
margin-bottom: 10px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
.changeImg {
height: 100%;
width: 50px;
cursor: pointer;
padding: 0;
border: 0;
i {
font-size: 60px;
}
&.right {
i {
bottom: 2px;
right: 7px;
position: relative;
}
}
}
.imgbox {
width: 370px;
height: 100%;
overflow: hidden;
margin: 0 auto;
border: 1px solid #eee;
display: flex;
align-items: center;
justify-content: start;
&.min {
justify-content: center;
}
&>img {
display: block;
width: 50px;
height: 50px;
margin: 5px;
cursor: pointer;
}
.changeColor {
border: 2px solid #42b983;
}
}
}
.ctr-box {
display: flex;
justify-content: center;
align-content: center;
}
}
::v-deep .ant-modal-title{
font-weight: bold;
}
::v-deep .ant-modal-body {
padding: 0 24px;
flex-direction: column;
.originStyle {
left: 0;
top: 0;
cursor: pointer;
}
.p_text{
margin: 0;
width: 100%;
font-size: 12px;
}
#test_3 {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border: 1px solid #eeeeee;
display: flex;
align-items: center;
justify-content: center;
img {
cursor: move;
display: inline-block;
vertical-align: middle;
}
}
}
::v-deep .ant-modal-mask{
background-color: transparent;
width: 0;
transition: none;
}
::v-deep .ant-modal-wrap{
width: 100%;
position: inherit !important;
}
::v-deep .ant-modal-close-x{
display: none;
}
::v-deep .ant-modal{
width: 100% !important;
top: 0 !important;
}
</style>
原文地址: https://blog.csdn.net/u012732909/article/details/116712076
在此基础上进行了修改,改成了我需要的,此文章仅供自己学习记录
更多推荐
已为社区贡献1条内容
所有评论(0)