简易的可拖拽进度条el-progress

实现关键思路：

1. 点击移动时修改百分比

2. 按进度条的长度来控制灵敏度

3. 包含在元素内部，避免麻烦的位置计算

缺点：进度条有动画，精度操作不灵活

<template>
  <div class="draggable-progress" ref="refElProgress">
    <el-progress
      :percentage="percentage"
      :show-text="true"
      :stroke-width="20"
      :duration="0.1"
      :text-inside="true"
    >
      <template #default="{ percentage }">
        <el-tooltip :content="String(percentage)" placement="top">
          <div
            class="draggable-progress-handle"
            @mousedown="mouseDown"
            @mouseup="mouseUp"
            @mousemove="mouseMove"
            @mouseleave="mouseleave"
          ></div>
        </el-tooltip>
      </template>
    </el-progress>
  </div>
</template>
<script setup lang="tsx">
import { ref, onMounted, computed } from 'vue'
/**
 * 监听变化：
 * https://v4-11-2.vueuse.org/core/useresizeobserver/
 */
import { useResizeObserver } from '@vueuse/core'

const percentage = ref(90)
const moveingX = ref(0)

const moving = ref(false)
const widthProgress = ref(0)
const refElProgress = ref(null)

const mouseDown = (e) => {
  moving.value = true
  moveingX.value = 0
  console.log('mouseDown------------>')
}

const mouseleave = (e) => {
  moving.value = false
  moveingX.value = 0
}

const mouseUp = (e) => {
  moving.value = false
  moveingX.value = 0
  console.log('mouseUp------------>')
}

const mouseMove = (e) => {
  if (moving.value) {
    let speed = widthProgress.value / 100
    let tempT = (e.movementX * speed * 100) / widthProgress.value + percentage.value
    if (tempT < 0) {
      tempT = 0
    }
    if (tempT > 100) {
      tempT = 100
    }
    console.log("moving---->")
    console.log(e.movementX)
    console.log(tempT)
    percentage.value = Math.floor(tempT) 
  }
}

onMounted(() => {
  if (refElProgress.value) {
    const width = refElProgress.value.clientWidth
    widthProgress.value = width
    console.log('-->')
    console.log(width)
  }

  useResizeObserver(refElProgress, (entries) => {
    const entry = entries[0]
    const { width, height } = entry.contentRect
    console.log('heightL-->')
    console.log(height)
    console.log(width)
    widthProgress.value = width
  })
})
</script>
<style lang="scss" scoped>
.draggable-progress {
  position: relative;
  width: 100%;
  --gantt-draggable-progress-left: -8px;

  .draggable-progress-handle {
    // position: absolute;
    top: -4px;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: 3px solid red;
    border-radius: 50%;
    cursor: col-resize;
    z-index: 0;
    opacity: 1;
    transition: opacity 0.5s ease;
    &:hover {
      opacity: 0.5;
    }
  }
}
</style>