Question

我正在开发一个工具，在将鼠标悬停在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;
        }
      }
    });

Answer 1

您必须自行计算

您将获得窗口的宽度和高度，并以此为基础计算百分比。但是请记住，如果您调整窗口大小，则该值可能会有所不同。

ZContext

如何将offsetX和offsetY坐标从像素更改为百分比？

1 个答案: