Vue2实现页面表单悬浮按钮

效果：

实现步骤：

 （1）在需要添加的表单页面里定义悬浮按钮

这段代码需要放到<template> </template>标签的form表单里面

// HTML代码
<div ref="dragArea" class="drag-area">
      <el-tooltip effect="dark" content="返回" placement="top">
        <el-button size="mini" icon="el-icon-back" circle @click="floatButton"></el-button>
      </el-tooltip>
    </div>

（2）定义JS代码

这段代码可以放到mounted（）{}里面或者created（）{}

// JS代码
  mounted() {
    /**
   * 监听悬浮拖拽区域
   */
    this.$nextTick(() => {
      // 获取DOM元素
      let dragArea = this.$refs.dragArea;
      // 缓存 clientX clientY 的对象: 用于判断是点击事件还是移动事件
      let clientOffset = {};
      // 绑定鼠标按下事件
      dragArea.addEventListener("mousedown", (event) => {
        let offsetX = dragArea.getBoundingClientRect().left; // 获取当前的x轴距离
        let offsetY = dragArea.getBoundingClientRect().top; // 获取当前的y轴距离
        let innerX = event.clientX - offsetX; // 获取鼠标在方块内的x轴距
        let innerY = event.clientY - offsetY; // 获取鼠标在方块内的y轴距
        console.log(offsetX, offsetY, innerX, innerY);
        // 缓存 clientX clientY
        clientOffset.clientX = event.clientX;
        clientOffset.clientY = event.clientY;
        // 鼠标移动的时候不停的修改div的left和top值
        document.onmousemove = function (event) {
          dragArea.style.left = event.clientX - innerX + "px";
          dragArea.style.top = event.clientY - innerY + "px";
          // dragArea 距离顶部的距离
          let dragAreaTop = window.innerHeight - dragArea.getBoundingClientRect().height;
          // dragArea 距离左部的距离
          let dragAreaLeft = window.innerWidth - dragArea.getBoundingClientRect().width;
          // 边界判断处理
          // 1、设置左右不能动
          // dragArea.style.left = dragAreaLeft + "px";

          // 1.设置左侧边界
          if (dragArea.getBoundingClientRect().left <= 0) {
            dragArea.style.left = "0px";
          }
          // 2.设置右侧边界
          if (dragArea.getBoundingClientRect().left >= dragAreaLeft) {
            dragArea.style.left = dragAreaLeft + "px";
          }
          // 3、设置顶部边界
          if (dragArea.getBoundingClientRect().top <= 0) {
            dragArea.style.top = "0px";
          }
          // 4、设置底部边界
          if (dragArea.getBoundingClientRect().top >= dragAreaTop) {
            dragArea.style.top = dragAreaTop + "px";
          }
        };
        // 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件；否则鼠标抬起后还可以继续拖拽方块
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      }, false);
      // 绑定鼠标松开事件
      dragArea.addEventListener('mouseup', (event) => {
        let clientX = event.clientX;
        let clientY = event.clientY;
        if (clientX === clientOffset.clientX && clientY === clientOffset.clientY) {
          console.log('click 事件');
        } else {
          console.log('drag 事件');
        }
      })
    });
  },

（3）定义悬浮按钮样式

这个样式基本满足所有电脑显示需求

// css代码
<style scoped lang="scss">
.drag-area {
  position: fixed;
  right: 400px;
  top: 50%;
  z-index: 99999;
  padding: 13px;
  width: fit-content;
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0px 2px 15px 0px rgba(9, 41, 77, 0.15);
  cursor: move;
  user-select: none;
  text-align: center;
}
<style>

属性解释

• position: fixed;

  • 将元素固定在窗口的指定位置，滚动页面时不会移动。

• right: 20px;

  • 将元素固定在离窗口右侧 20 像素的位置。

• top: 20%;

  • 将元素固定在离窗口顶部 20% 的位置。

• z-index: 99999;

  • 设置元素的堆叠顺序，值越大越靠上，确保元素在最上层显示。

• padding: 13px;

  • 设置元素的内边距，四周均为 13 像素。

• width: fit-content;

  • 设置元素的宽度为其内容所需的宽度。

• opacity: 1;

  • 设置元素的不透明度为 1（完全不透明）。

• background-color: rgba(255, 255, 255, 0.1);

  • 设置背景颜色为白色，且透明度为 0.1。

• border-radius: 8px;

  • 设置元素的边框圆角为 8 像素。

• box-shadow: 0px 2px 15px 0px rgba(9, 41, 77, 0.15);

  • 设置元素的阴影效果，阴影偏移为 (0px, 2px)，模糊半径为 15 像素，颜色为 rgba(9, 41, 77, 0.15)。

• cursor: move;

  • 设置鼠标悬停在元素上时显示为移动指针（通常用于拖动）。

• user-select: none;

  • 禁止用户选择元素中的文本。

• text-align: center;

  • 设置元素中的文本居中对齐。
    
    （4）定义方法

    methods：{
    
    floatButton() {
    
    //这里写点击按钮后你想要实现的功能
    
    }
    
    }