效果圖

image.png

// 懸浮按鈕組件
<template>
  <div style="position:relative;">
    <div class="button-box" v-drag draggable="false">
      <div class="btn-bg-img" @dblclick="openBox"></div>
      <div class="font-box">{{ text }}</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {caseInfo},
  props: ['caseID'],
  data () {
    return {
      text: '雙擊顯示案件詳情',
      isOpen: false,
      isMove: false
    }
  },
  methods: {
    openBox () {
      console.log('雙擊')
    },
    mousedowm (e) { // 鼠標按下時的鼠標所在的X，Y坐標
      this.mouseDownX = e.pageX
      this.mouseDownY = e.pageY
      // 初始位置的X，Y 坐標
      // this.initX = obj.offsetLeft;
      // this.initY = obj.offsetTop;
      console.log('e', e)
      // 表示鼠標已按下
      this.flag = true
    },
    mousemove (e) {
      if (this.flag) {
        console.log('e :', e)
      }
    }
  },
  directives: {
    drag (el) {
      let oDiv = el // 當前元素
      // let self = this // 上下文
      // 禁止選擇網頁上的文字
      document.onselectstart = function () {
        return false
      }
      oDiv.onmousedown = function (e) {
        // 鼠標按下磁携，計算當前元素距離可視區(qū)的距離
        let disX = e.clientX - oDiv.offsetLeft
        let disY = e.clientY - oDiv.offsetTop
        document.onmousemove = function (e) {
          // 通過事件委托，計算移動的距離
          let l = e.clientX - disX
          let t = e.clientY - disY
          // 移動當前元素
          oDiv.style.left = l + 'px'
          oDiv.style.top = t + 'px'
        }
        document.onmouseup = function (e) {
          document.onmousemove = null
          document.onmouseup = null
        }
        // return false不加的話可能導致黏連膝舅，就是拖到一個地方時div粘在鼠標上不下來，相當于onmouseup失效
        return false
      }
    }
  }
}
</script>

<style scoped>
.button-box {
  width: 80px;
  border-radius: 50%;
  position: fixed;
  bottom: 80px;
  right: 50px;
  padding-left: 15px;
  padding-top: 8px;
  cursor: pointer;
  opacity: 0.7;
  z-index: 888;
}
.btn-bg-img {
  width: 80px;
  height: 80px;
  background-image: url('../../../static/images/click.png');
  background-size: cover;
}
.button-box:hover {
  color: white;
  opacity: 1;
}

.font-box {
  width: 80px;
  color: #3193ef;
  text-align: center;
}
</style>