vue3配置简单进度条

1.html部分

                <div

                  class="yarijdt"

                  @mousedown="startDrag"

                  @mousemove="onDragging"

                  @mouseup="stopDrag"

                >

                  <div class="yarijdtbox">

                    <div

                      class="progress"

                      :style="{ width: progress + '%' }"

                    ></div>

                    <div

                      class="handle"

                      :style="{ left: progress + '%' }"

                      ref="handle"

                    ></div>

                  </div>

                </div>

2.jsbufen views为变量

const progress = ref(0);

const startDrag = (event) => {

  isDragging.value = true;

};

const onDragging = (event) => {

  if (isDragging.value) {

    const progressBar = handle.value.parentElement;

    const rect = progressBar.getBoundingClientRect();

    let x = event.clientX - rect.left;

    let width = progressBar.clientWidth;

    if (x < 0) {

      x = 0;

    } else if (x > width) {

      x = width;

    }

    progress.value = (x / width) * 100;

    console.log("大赛", progress.value);

    views.value = Math.round(progress.value * 100);

  }

};

const stopDrag = () => {

  isDragging.value = false;

};

3.css部分

.yarijdt {

  width: 12.5rem;

  height: 0.625rem;

  cursor: pointer;

}

.yarijdtbox {

  height: 100%;

  width: 100%;

  background: white;

  border-radius: 0.5rem;

  position: relative;

}

.progress {

  height: 100%;

  width: 0%;

  background: #1dc47d;

  border-radius: 0.5rem;

}

.handle {

  width: 0.75rem;

  height: 0.75rem;

  border-radius: 50%;

  background: white;

  border: 0.25rem solid #1dc47d;

  position: absolute;

  left: 0;

  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 100;

}