【vue项目问题解决】如何用鼠标滚轮控制元素缩放？

记录在项目开发过程中遇到的问题，积累开发经验，欢迎大家一起留言探讨

一个元素（例如div），如何通过鼠标滚轮来控制他的缩放呢，很显然，我们需要为元素绑定监听事件，在vue中如何实现这种效果呢？
模板代码：

<template><div class="body" id="body"><div class="content" id="content">我是缩放的元素</div></div>
</template>

样式，注意：我们要给子元素开启过渡动画transition属性,这样看起来不会那么突兀，会呈现出平滑的缩放。

<style lang="scss" scoped>
.body{width: 500px;height: 500px;background-color: pink;.content{transition: all 0.5s;width: 400px;margin: 0 auto;height: 400px;background-color: orange;}
}
</style>

监听事件

export default {data() {return {scale: 1};},methods: {zoomout() {console.log("out");document.getElementById("content").style.transform = "scale("+ this.scale +")";this.scale += 0.05;},zoomin() {console.log("min");document.getElementById("content").style.transform = "scale("+ this.scale +")";this.scale -= 0.05;if(this.scale < 0.5){this.scale = 0.5}},},mounted(){// 为父元素绑定滚轮监听事件document.getElementById("body").onmousewheel = (event) => {var dir = event.deltaY > 0 ? "Up" : "Down";if (dir == "Up") {console.log("向上滑动");this.zoomin();} else {console.log("向下滑动");this.zoomout();}return false;};}
}

注意：绑定滚动事件的时候需要给父元素绑定，缩放效果绑定个子元素。
至此，可以完成缩放功能。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！