ant-design-vue3.2.6 图片预览，旋转，放大缩小

这个虽然用弹窗写的但是是在页面上的图片预览所以对弹窗样式进行了修改

<div ref="aa" style="width:75%;"><a-modalclass="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"><imgv-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
在此基础上进行了修改，改成了我需要的，此文章仅供自己学习记录

ant-design-vue3.2.6 图片预览，旋转，放大缩小相关推荐

v-viewer预览图的使用（图片预览旋转/放大缩小/上下切换等）
前言: 之前项目需求,需要找一个预览图的组件,最开始,找了vue-preview组件.因为vue-preview是直接引入 < vue-preview>这个标签,无法看到对组件里面的图片i ...
微信公众号H5点击图片预览(可放大缩小)，用微信内置jssdk实现
在微信公众号H5里面可能会遇到点击图片预览,还可以放大缩小,微信内置有这个功能可以实现用vue写项目的话,先 cnpm install weixin-js-sdk --save 接着给图片一个点击事 ...
Vue实现图片预览（放大缩小拖拽）纯手写
这张图是显示的图片放大的一个预览情况,这里是参考预览操作实现的一个背景为黑色的部分,上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大,代码是基于Ant Design Vue框架的基础上这里先 ...
vue3 开发一个图片预览插件
vue3 的插件开发和vue2思路类似但是写法却迥异.主要变化在vue3没有了extend构造器. 这次我们通过一个图片预览插件,贯通整个vue3插件开发的过程. 1 在src下新建lplugins文 ...
Android Camera2相机预览画面放大缩小（数码变焦DigitalZoom）功能实现
一.前言 Android自定义相机开发中,常常会有通过手势放大或缩小相机预览画面的需求,即数码变焦DigitalZoom. 二.接口说明 1. 获取最大的放大倍数 float maxZoom = mC ...
vue3,电商项目中的商品详情-图片预览组件
目的:完成商品图片预览功能和切换分享一个vueuse的插件useMouseInElement useMouseInElement的官方文档 // 监听DOM元素 target 绑定的DOM元素中鼠标 ...
基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，可自定义背景、按钮颜色等
hevue-img-preview 简介完整版下载地址:基于 vue 编写的vue图片预览组件本组件是一个基于 vue 编写的 vue 图片预览组件,支持 pc 和手机端,支持单图和多图预览,仅传 ...
Vue 组件库 heyui@1.18.0 发布，新增地址选择、图片预览组件
开发四年只会写业务代码,分布式高并发都不会还做程序员? 新增 CategoryPicker 新增组件 CategoryPicker,地址级联组件的最佳方案. <CategoryPicker ...
php 图片预览原理,JavaScript_纯JS实现的批量图片预览加载功能，1.实现原理直接见代码,需要一 - phpStudy...
纯JS实现的批量图片预览加载功能 1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果复制代码代码 ...
jquery实现上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码上传图片验证 */ function submit_upload_picture() ...

ant-design-vue3.2.6 图片预览，旋转，放大缩小

ant-design-vue3.2.6 图片预览，旋转，放大缩小相关推荐

最新文章

热门文章