在Vue.js中，点击图片添加圆点的最佳方式是什么？

Question

我有一个带有@click事件的<img>标签。当我点击图片时，我想在鼠标实际位置下方添加一个点。

我正在寻找类似于以下内容：

  $(document).ready(function () {
      $(document).click(function (ev) {
          mouseX = ev.pageX;
          mouseY = ev.pageY
          console.log(mouseX + ' ' + mouseY);
          var color = '#000000';
          var size = '1px';
          $("body").append(
          $('<div></div>')
              .css('position', 'absolute')
              .css('top', mouseY + 'px')
              .css('left', mouseX + 'px')
              .css('width', size)
              .css('height', size)
              .css('background-color', color));
      });
  });

- edvardgospel

Answer 1

您可以使用原生JavaScript完成此操作，方法如下：

new Vue({
     el: "#app",
     methods:{
          drawDot(){
               mouseX = event.pageX;
               mouseY = event.pageY
               console.log(mouseX + ' ' + mouseY);
               var color = '#000000';
               var size = '1px';
               var div = document.createElement("div");  
               div.style.position='absolute';
               div.style.top=mouseY + 'px';
               div.style.left=mouseX + 'px';
               div.style.width=size;
               div.style.height=size;
               div.style.backgroundColor=color;
               document.body.appendChild(div)
          }
     }
});

.draw{
    background: white;
    width: 50vw;
    height: 50vw;
    border-style: solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
     <div class="draw" @click="drawDot"></div>
</div>

- Majed Badawi