vue+elementUI el-progress实现可拖拽进度条

最新推荐文章于 2025-03-19 16:08:22 发布

白开水z

最新推荐文章于 2025-03-19 16:08:22 发布

阅读量4.2k

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/li222248/article/details/130759389

版权

该代码示例展示了如何创建一个可拖动的进度条组件。当用户按下鼠标并拖动时，进度条的百分比会根据鼠标在条形内的位置动态更新，松开鼠标后结束拖动。通过`mousedown`、`mouseup`和`mousemove`事件监听拖动过程，计算新的百分比值并更新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

实现代码

 <div class="progress" @mousedown="onDragStart">
              <el-progress
                style="margin-top: 12px; cursor: pointer"
                :percentage="ruleForm.b"
              ></el-progress>
            </div>

<script>
export default {
  name: "add",
  data() {
    return {
      isDragEnd: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    onDragStart(event) {
      this.isDragEnd = true;
      const progressBox = this.$el.querySelector(".progress");
      progressBox.addEventListener("mouseup", this.onDragEnd);
      progressBox.addEventListener("mousemove", this.onDrag);
    },
    onDragEnd() {
      this.isDragEnd = false;
    },
    onDrag(event) {
      if (this.isDragEnd) {
        const progressBox = this.$el.querySelector(".progress");
        const rect = progressBox.getBoundingClientRect();
        const width = rect.width;
        const offsetX = event.clientX - rect.left;
        let percentage = Math.round((offsetX / width) * 100);
        percentage = Math.max(0, Math.min(percentage, 100));
        this.ruleForm.b = percentage;
      }
    },
  },
};
</script>