html - 在 Vue.js 中单击时在图像上添加点的最佳方法？

Question

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

我正在寻找这样的东西:

  $(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));
      });
  });

Answer 1

您可以按如下方式在 Vanilla 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>