vue实现鼠标滚动图片放大缩小拖拽

1.封装可放大缩小拖拽组件

<template><div class="drag-outer"ref="dragWrap":style="'width:'+imgWidth"@mouseenter="isHover = true"@mouseleave="isHover = isMousedown = false"@mousemove="dragMousemove"><div class="drag-inner"ref="dragElement"@mousedown="dragMousedown"@mouseup.stop="isMousedown = false"><slot></slot></div></div>
</template><script>export default {name: "index",props: {imgWidth: {type:String,default () {return '400px'}},scaleZoom: {type: Object,default () {return {max: 5,min: 0.2}}}},data() {return {isMousedown: false,isHover: false,moveStart: {},translate: {x: 0, y: 0},scale: 1}},mounted() {window.addEventListener('mousewheel',this.handleScroll,false)},methods: {handleScroll(e) {if (this.isHover) {let speed = e.wheelDelta / 120if (e.wheelDelta > 0 && this.scale < this.scaleZoom.max) {this.scale += 0.2 * speedthis.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`} else if (e.wheelDelta < 0 && this.scale > this.scaleZoom.min) {this.scale += 0.2 * speedthis.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`}}},dragMousedown() {this.moveStart.x = event.clientXthis.moveStart.y = event.clientYthis.isMousedown = true},dragMousemove() {if (this.isMousedown) {this.translate.x += (event.clientX - this.moveStart.x) / this.scalethis.translate.y += (event.clientY - this.moveStart.y) / this.scalethis.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`this.moveStart.x = event.clientXthis.moveStart.y = event.clientY}}}}
</script><style lang="scss" scoped>.drag-outer {overflow: hidden;height:500px; float: left;display: flex;background-color:#fff;justify-content: center;align-items: center;.drag-inner {transform-origin: center center;display: flex;justify-content: center;align-items: center;cursor: move;user-select: none;width:100%;height:100%;>* {-webkit-user-drag: none;user-drag: none;}img{object-fit:contain; width:100%; height:100%}}}
</style>

2.引用组件实现效果

<template><div><inc_imgsvg v-if="srcImg" :imgWidth="'100%'"><img :src="srcImg" alt=""></inc_imgsvg></div>
</template><script>
import inc_imgsvg from "@/components/customImg/index";
export default {name: "index",components: {inc_imgsvg},data(){return{srcImg:'https://xxx.png'}}
}
</script>

vue实现鼠标滚动图片放大缩小拖拽相关推荐

vue 实现图片放大缩小拖拽
https://www.h5w3.com/239173.html https://blog.51cto.com/wjw1014/5411219 // 放大缩小public setTransform ( ...
canvas 实现图片放大缩小拖拽移动端、PC端
前言实现目标:使用canvas画出地图,且可以通过鼠标滚轮缩放,拖拽:手指滑动拖拽,手势缩放 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dW ...
Vue实现图片预览（放大缩小拖拽）纯手写
这张图是显示的图片放大的一个预览情况,这里是参考预览操作实现的一个背景为黑色的部分,上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大,代码是基于Ant Design Vue框架的基础上这里先 ...
基于Vue Konva的canvas图片放大缩小
最近一个项目要实现图片根据鼠标位置多级放大缩小的功能,在网上找了好久的资源没有找到,偶然看到了一篇文章,但是没有完整的代码,研究了两天把代码补全了,其实也不难,但是困扰了我好几天,这个方法相对于网上别 ...
关于viewer.js插件js版鼠标滚动事件放大缩小改为图片移动
主要是为了记录下需求中解决问题的思路,本人前端相当糟糕. 问题的产生是由于图片太长,页面一次性展示不全,业务人员提出修改前端图片显示中的鼠标滚动改为上下移动.由于项目中图片展示使用的是viewer,j ...
【quill-editor】富文本编辑器对图片的放大缩小拖拽的实现
首先哈,quill-editor没有对图片的功能,文档里也有提到扩展模版文档: 回归正题=> 1.安装模版 npm i quill-image-drop-module -S //拖拽 npm ...
鼠标滚动导航放大缩小
进入页面的样式鼠标向下的样式滚轮向上还是可以变大,直接上代码, <!DOCTYPE html> <html lang="zh-CN"> <head ...
js 实现 H5 div的内容放大缩小拖拽功能 vue可用
大佬写的组件 , 虽然我看不懂但不妨碍我会用啊想去看大佬代码的点这里下面的无脑的代码时刻一.复制代码到一个单独的.vue文件然后走人去下一步 // 放大缩小页面组件 <template ...
bootstrap缩小后div互相叠加_纯 JS 实现放大缩小拖拽踩坑之旅
点击上方"前端公虾米",选择"置顶或者星标" 你的关注意义重大! 前言最近团队需要做一个智能客服悬浮窗功能,需要支持拖动.放大缩小等功能,因为这个是全局插件, ...

vue实现鼠标滚动图片放大缩小拖拽

1.封装可放大缩小拖拽组件

2.引用组件实现效果

vue实现鼠标滚动图片放大缩小拖拽相关推荐

最新文章

热门文章