<template><div id="body" class="body"><div class="content" id="content">缩放的元素</div></div></template><script>export default {data() {return {scale: 1}},methods: {// 向上滑动zoomin(){document.getElementById('content').style.transform=`scale(${this.scale})`this.scale+=0.05},// 向下滑动zoomout(){document.getElementById('content').style.transform=`scale(${this.scale})`this.scale-=0.5if(this.scale<0.5){this.scale=0.5}}},mounted(){document.getElementById('body').onmousewheel=(event)=>{let dir=event.deltaY>0 ? 'Up':'Down'if(dir=='Up'){//向上滑动this.zoomin()}else{//向下滑动this.zoomout()}return false;}}}</script><style lang="scss" scoped>.body{width: 500px;height: 500px;background-color: pink;}.content{width: 400px;height: 400px;transition: all 0.5s;background-color: skyblue;margin: 0 auto;}</style>
