vue3+ts+elementPlus 实现视图右边悬浮按钮+可上下拖拽

1、效果图

此功能用于一些全局展示的快捷按钮，不会受路由切换影响，但是需要放在一个例如 App.vue 这种的文件中使用

2、定义对应组件

        .vue文件代码如下：
 

<template>
  <div class="side_btn_box" :style="{ cursor: isDragging ? 'move' : 'pointer' }" id="dragElement">
    <el-icon :size="20" color="white">
      <PhoneFilled />
    </el-icon>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
const isDragging = ref(false);
/**侧边栏按钮上下拖拽功能部分 */
const SideBtnDrag = () => {
  const dragElement = document.getElementById('dragElement') as HTMLElement;
  let startY = 0;
  let currentY = 0;
  function handleMouseMove(event: any) {
    isDragging.value = true;
    currentY = event.clientY;
    // 移动的距离
    const distance = currentY - startY;


    let currentTop = parseInt(dragElement.style.top) || dragElement.offsetTop || 0;
    const viewportHeight = window.innerHeight;
    // 兼容边界部分
    if (currentTop <= 0) { currentTop = 0 }
    else if (currentTop + 40 > viewportHeight) { currentTop = viewportHeight - 40 }
    dragElement.style.top = currentTop + distance + 'px';
    startY = currentY;
    dragElement.removeEventListener('click', handleClick)
  }
  function handleMouseUp() {
    isDragging.value = false;
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  }
  dragElement.addEventListener('mousedown', (event) => {
    startY = event.clientY;
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
    dragElement.addEventListener('click', handleClick)
  });
}

onMounted(() => {
  SideBtnDrag()
})

const handleClick = () => {
  console.log('触发点击');
}
</script>

<style scoped lang="less" src="../less/sideBtn.less"></style>

css样式如下：

.side_btn_box {
  position: fixed;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 3px 0 0 3px;
  background-color: #409eff;
  bottom: 100px;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  @keyframes slide-in {
    70% {
      // opacity: 0.5;
      scale: 0.4;
    }

    100% {
      // opacity: 1;
      scale: 1;
    }
  }

  &:hover {
    box-shadow: var(--el-box-shadow-dark);

    .el-icon {
      animation: slide-in .3s ease-in-out;
    }
  }
}

最后在App.vue 立面引用或者直接在定义的layout全局布局文件里面 使用即可

layout用于框架的全局布局