我正在开发一个工具，我希望在将鼠标悬停在 div 元素上时以百分比 (%) 格式显示 offsetX 和 offsetY 坐标。默认情况下，它采用像素格式。
index.html 文件:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Events</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="vue-events">
<h1>Events in VueJS</h1>
<div id="canvas" v-on:mousemove="updateXY">
<img src="img/img-1.jpg" style="visibility: hidden;" />
{{x}}, {{y}}
</div>
</div>
<script src="js/events.js"></script>
</body>
</html>
event.js 文件:
new Vue({
el: '#vue-events',
methods:{
updateXY: function(event){
this.x = event.offsetX;
this.y = event.offsetY;
}
}
});
最佳答案
你得自己算算
你得到了窗口的宽度和高度，并以此为基础你可以计算出百分比。但请记住，如果您调整窗口大小，该值可能会有所不同。
new Vue({
el: '#vue-events',
methods:{
updateXY: function(event){
this.x = (event.offsetX * 100) / window.innerWidth;
this.y = (event.offsetY * 100) / window.innerHeight;
}
}
});
关于javascript - 如何将 offsetX 和 offsetY 坐标从像素更改为百分比？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58299967/