vue自定义指令–实现div和图片的拖拽，放大，缩小
在开发可视化大屏的过程中碰到甲方只能提供一张图片的地图无法提供经纬度，需要在这张图片实现类似百度地图功能的标点。所以就想实现对图片的拖拽移动然后加上放大和缩小功能。这样来模拟百度地图的小部分功能，然后通过在图片上放小div进行标点，来进行坐标定位，如下图
代码已经封装成组件，复制可以。最后求点赞💖🤞😍
<template><div class="app1"><div v-drag class="qwe" style="width: 1920px; height: 1080px"><div class="div1" @click="getData"></div><div class="div2" @click="getData"></div><div class="div3" @click="getData"></div><div class="div4" @click="getData"></div><div class="div5" @click="getData"></div><div class="div6" @click="getData"></div></div></div></template><script>export default {// 组件名称name: 'mapPage',data() {return {}},// 自定义指令 实现可拖动 drag(el, bindings)directives: {drag(el) {el.onmousedown = function (e) {let disx = e.pageX - el.offsetLeftlet disy = e.pageY - el.offsetTopdocument.onmousemove = function (e) {// el.style.left = e.pageX - disx + 'px'// el.style.top = e.pageY - disy + 'px'if (e.pageX - disx < 53 && -1100 < e.pageX - disx) {// if (e.pageY - disy < 40 && -271 < e.pageY - disy) {el.style.left = e.pageX - disx + 'px'el.style.top = e.pageY - disy + 'px'// console.log('左', el.style.left, el.style.top, '上')// }}}document.onmouseup = function () {document.onmousemove = document.onmouseup = null}}//对div盒子的大小改变let scale = 1el.onmousewheel = document.onmousewheel = (e) => {if (e.wheelDelta < 0) {// console.log('后滚放大')if (scale < 1.2) {scale += 0.05el.style.transform = `scale(${scale})`el.style.transformOrigin = '200 200'// console.log(scale, '放大')}} else if (e.wheelDelta > 0) {// 前滚缩小if (scale > 0.4) {scale -= 0.05el.style.transform = `scale(${scale})`el.style.transformOrigin = '200 200'// console.log(scale, '缩小')}}}},},//计算属性computed: {},// 组件方法methods: {getData() {console.log('可以触发点击事件')},},//挂载后钩子函数mounted() {},}</script><style scoped lang="scss">.app1 {position: relative;.map {width: 45%;height: 100%;}.qwe {z-index: 1;background: url('../../assets/indexImg/bg.webp') center center no-repeat;background-size: 100% 100%;// background-color: rgb(185, 76, 13);position: absolute;top: 0%;left: 0%;img {width: 100%;height: 100%;}.div1 {width: 20px;height: 30px;background-color: red;position: absolute;top: 48%;left: 12%;}.div2 {@extend .div1;position: absolute;top: 66%;left: 12%;}.div3 {@extend .div1;position: absolute;top: 55%;left: 12%;}.div4 {@extend .div1;position: absolute;top: 71%;left: 33%;}.div5 {@extend .div1;position: absolute;top: 46%;left: 66%;}.div6 {@extend .div1;position: absolute;top: 32%;left: 82%;}}}</style>
最近也开发了自己的公众号，会在上面分享前端方面的知识，有兴趣的话，走个关注吧！！！
如果觉得《vue自定义指令--实现div和图片的拖拽 放大 缩小》对你有帮助，请点赞、收藏，并留下你的观点哦！
