vue制作印章

// 上代码

<template>
  <div>
    <div class="main" id="main">
      <div id="seal">印章111</div>
      <div @click="seal">确 定</div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      positionX: 0,
      positionY: 0,
      isDown: false,
      nl:0,
      nt:0
    }
  },

  mounted() {
    var seal = document.getElementById('seal')
    var x = 0
    var y = 0
    var left = 0
    var top = 0
    this.isDown = false
    // 鼠标按下事件
    seal.onmousedown = (e) => {
      // 获取x坐标和y坐标
      x = e.clientX
      y = e.clientY
      // 获取左部和顶部的偏移量
      left = seal.offsetLeft
      top = seal.offsetTop
      // 开关打开
      this.isDown = true
      // 设置样式
      seal.style.cursor = 'move'
    }
    // 鼠标移动
    window.onmousemove = (e) => {
      if (this.isDown === false) {
        return
      }
      // 获取x和y
      var nx = e.clientX
      var ny = e.clientY
      // 计算移动后的左偏移量和顶部的偏移量
      this.nl = nx - (x - left)
      this.nt = ny - (y - top)

      seal.style.left = this.nl + 'px'
      seal.style.top = this.nt + 'px'
    }
    // 鼠标抬起事件
    seal.onmouseup = () => {
      // 开关关闭
      this.isDown = false
      seal.style.cursor = 'default'
    }
  },
  methods: {
     //获取最后盖章的位置
      seal(){
         console.log(this.nl + 'px',this.nt + 'px') 
      }
  }
}
</script>

<style lang="less">
.main {
  width: 500px;
  height: 500px;
  border: 1px solid;
  position: relative;
  #seal {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: rgb(238, 81, 141);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>