vue实现悬浮窗拖拽和靠边隐藏

预览

组件

child.vue

<template>
  <div class="outBox">
    <div
      :class="['suspendBox', { move: !canDrag }]"
      :style="{top:top+'px',left:left+'px'}"
      @mousedown="start"
      @mousemove="move"
      @mouseup="stop"
      @mouseenter="enter"
      @mouseleave="leave"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
   
  props:{
   
    ableMove: {
   type: Boolean, default: true},  //是否可移动
    ableHide: {
   type: Boolean, default: true},  //是否靠边隐藏
    hoverShow: {
   type: Boolean, default: true},  //图标隐藏时 鼠标悬浮即展示，否则点击展示
    distance: {
   type: Number, default: 5},  //距离边界多少px就隐藏
    defaultX: {
   type: Number, default: 1},  //初始横坐标百分比
    defaultY: {
   type: Number, default: 0.9}  //初始纵坐标百分比
  },
  data() {
   
    return {
   
      canDrag: false,
      isClick: true,
      x0: 0,
      y0: 0,
      top: null,
      left: null
    };
  },
  mounted() {
   
      let img = document.querySelector(".suspendBox"