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

【问题标题】：Best way to add dot on image when clicked in Vue.js?在 Vue.js 中单击时在图像上添加点的最佳方法？
【发布时间】：2020-06-14 12:26:24
【问题描述】：

我有一个带有@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));
      });
  });

【问题讨论】：

标签： html css vue.js

【解决方案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>

【讨论】：