vue.js - 如何将y和x坐标绑定到vue中的图像？

Question

我想用鼠标点击移动图像。我已经设置x和y鼠标移动了，但是我不知道如何将这些坐标绑定到图像上。

谁能帮我？我在用VUE.JS

标签： vue.js

Answer 1

一种解决方案是绑定设置绝对位置的内联样式<img>：

1. 创建<img>标签：

   <img class="my-img">
   

2. 对其进行样式设置，使其绝对定位：

   .my-img {
     position: absolute;
   }
   

3. 将其绑定style到设置top（Y 坐标）和left（X 坐标）的对象。在下面的示例中，我们绑定top到一个名为的数据字段imgTop和left一个名为的数据字段imgLeft。当我们的组件设置imgTop时，<img>'stop将被设置为相同的值；同样对于left和imgLeft。稍后我们将添加imgTop和imgLeft数据字段。

   <img class="my-img" :style="{ top: imgTop, left: imgLeft }">
   

4. 创建一个<div>以包含<img>. 这个容器将代表可点击的区域，<img>可以在其中移动。

   <div class="container">
     <img class="my-img">
   </div>
   

5. 将容器设置为与视口一样大（使用vw和vh长度单位）：

   .container {
     width: 100vw;
     height: 100vh;
   }
   

6. 在容器上设置click-event 处理程序。我们v-on:EVENT=METHOD用来分配一个处理事件的方法（还有一个简写语法 -- @EVENT=METHOD）。我们稍后会添加该onClick方法。

   <div class="container" @click="onClick">
   

7. 在您的组件中创建imgTopandimgLeft字段data：

   extern default {
     data: () => ({
       imgLeft: null,
       imgTop: null,
     }),
   }
   

8. 在组件的methods. MouseEvent.clientX请注意，处理程序将and格式化MouseEvent.clientY为像素长度（追加px），并将结果分配给imgLeftand imgTop。

   extern default {
     methods: {
       onClick(e) {
         this.imgLeft = `${e.clientX}px`;
         this.imgTop = `${e.clientY}px`;
       }
     }
   }
   

演示：

new Vue({
  el: '#app',
  data: () => ({
    imgLeft: null,
    imgTop: null,
  }),
  methods: {
    onClick(e) {
      this.imgLeft = `${e.clientX}px`;
      this.imgTop = `${e.clientY}px`;
    }
  }
})

.container {
  width: 100vw;
  height: 100vh;
}

.img {
  position: absolute;
}

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <div class="container" @click.stop="onClick">
    <img class="img"
         src="//placekitten.com/100/100"
         width="100"
         alt="kitty"
         :style="{top: imgTop, left: imgLeft}">
  </div>
</div>