vue缩放功能

vue缩放功能

<template>
    <div @mousewheel.prevent="hMouseWheel" id="ddd"></div>
</template>
<script>
export default {
    methods:{
        hMouseWheel(ev){
            var ev = ev || window.event;
            var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
            down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
            var scal = 1
            var oDiv = document.getElementById('ddd')
            if (down) {
                console.log('鼠标滚轮向下放大---------')
                // scal = (parseFloat(scal) + 0.01).toFixed(2);
                scal = scal
                console.log("放大系数: " + scal)
                oDiv.style.transform = "scale(" + scal + ")";    //scale()在这里要使用拼接的方式才能生效
                oDiv.style.transformOrigin = '0 0';
            } else {
                console.log('鼠标滚轮向上缩小++++++++++')
                if (scal == 0.01) {
                    scal = 0.01
                    return
                } else {
                    // scal = (parseFloat(scal) - 0.01).toFixed(2);
                    scal = 0.01
                }
                console.log("缩小系数: " + scal)
                oDiv.style.transform = "scale(" + scal + ")";    //scale()在这里要使用拼接的方式才能生效。
                oDiv.style.transformOrigin = '0 0';
            }
            if (ev.preventDefault) {/*FF 和 Chrome*/
                ev.preventDefault();// 阻止默认事件
            }
            return false;

        }
    }
}
</script>

这个缩放方法是网上找的，我也不记得原创是谁了，做个笔记。
有一个bug，鼠标滚动的时候，可以缩放，但是位置会发生变化，目前还没有解决。