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

最新推荐文章于 2024-06-09 10:01:24 发布

白开水z

最新推荐文章于 2024-06-09 10:01:24 发布

阅读量3.1k

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/li222248/article/details/130759389

版权

效果图

在这里插入图片描述

实现代码

 <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>