可拖动的进度条elementPlus

Element Plus是一个基于Vue.js的UI组件库，它提供了一个可拖动的进度条组件，通常被称为`el-progress`。这个组件允许用户通过鼠标或者触摸操作调整其内部值，代表了任务完成度或者是时间进度等。它的设计简洁易用，支持常见的样式定制，如颜色、宽度、动画效果等，并提供了自定义事件，以便开发者在进度变化时执行相应的业务逻辑。

Element Plus的进度条组件可以设置不同的值类型，如百分比（percentage）、固定大小值（value），以及一些额外的功能，比如显示当前状态的文字描述。例如：

<template>
  <el-progress :percentage="progressPercent" type="dashboard"></el-progress>
</template>

<script>
import { ElProgress } from 'element-plus';
export default {
  components: {
    ElProgress,
  },
  data() {
    return {
      progressPercent: 50, // 进度百分比，默认从0开始
    };
  },
  methods: {
    handleDragChange(newPercent) {
      this.progressPercent = newPercent;
    },
  },
};
</script>

相关问题

vue 圆形进度条实现可拖拽进度条

在Vue.js中实现一个可以拖动的圆形进度条，通常会结合HTML5的Canvas API、Vue的组件化思想以及一些交互库（如Vue-Draggable）。以下是简要步骤：

1. 首先，创建一个Vue组件，比如`CircularProgressDraggable.vue`，并导入必要的依赖库（例如vue-draggable）。

<template>
  <div class="progress-circle" ref="circleRef">
    <canvas :width="radius * 2" :height="radius * 2"></canvas>
  </div>
</template>

<script>
import draggable from 'vue-draggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      radius: 50,
      progress: 0,
      isDragging: false
    };
  },
  mounted() {
    this.updateCircle();
  },
  methods: {
    updateCircle() {
      // ...绘制圆形进度部分
    },
    onDragStart(e) {
      this.isDragging = true;
    },
    onDragEnd(e) {
      this.progress = e.newValue; // 更新进度值
      this.isDragging = false;
    }
  }
};
</script>

2. 在模板中，利用`draggable`属性将圆形区域设置为可拖拽，并处理开始和结束事件。

3. 使用`updateCircle`方法，在`mounted`生命周期钩子中初始化圆形进度，然后在`onDragEnd`中根据新的拖动位置更新`progress`数据。

4. 绘制圆形进度部分，这通常在`updateCircle`方法中完成，通过改变Canvas上特定像素的颜色来表示进度。

methods: {
  updateCircle() {
    const canvas = this.$refs.circleRef.querySelector('canvas');
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = '#ccc'; // 填充颜色
    ctx.fill();

    const startAngle = -Math.PI * (this.progress / 100); // 开始角度
    const endAngle = -Math.PI * ((this.progress + 100) / 100); // 结束角度

    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, this.radius - 5, startAngle, endAngle);
    ctx.strokeStyle = '#f00'; // 进度线颜色
    ctx.stroke();
  }
}

js24小时可拖动进度条

要实现可拖动的24小时进度条，可以在上面的代码基础上进行一些修改。具体的实现方法如下：

HTML代码：

<div class="progress-bar">
  <div class="progress"></div>
  <div class="handle"></div>
</div>

CSS代码：

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #ddd;
  position: relative;
  cursor: pointer;
}

.progress {
  width: 0;
  height: 100%;
  background-color: #007bff;
  position: absolute;
  top: 0;
  left: 0;
}

.handle {
  width: 10px;
  height: 10px;
  background-color: #007bff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: pointer;
}

JavaScript代码：

function updateProgressBar() {
  var now = new Date();
  var h = now.getHours();
  var m = now.getMinutes();
  var s = now.getSeconds();
  var totalSeconds = (h * 60 * 60) + (m * 60) + s;
  var percentage = (totalSeconds / 86400) * 100;
  var progressBar = document.querySelector(".progress");
  progressBar.style.width = percentage + "%";
}

function handleDrag(e) {
  var progressBar = document.querySelector(".progress");
  var progressbarRect = progressBar.getBoundingClientRect();
  var offsetX = e.clientX - progressbarRect.left;
  var percentage = (offsetX / progressbarRect.width) * 100;
  progressBar.style.width = percentage + "%";
}

var handle = document.querySelector(".handle");
handle.addEventListener("mousedown", function() {
  document.addEventListener("mousemove", handleDrag);
});

document.addEventListener("mouseup", function() {
  document.removeEventListener("mousemove", handleDrag);
});

updateProgressBar();
setInterval(updateProgressBar, 1000);

在这个例子中，我们在HTML代码中添加了一个名为“progress”的div元素来表示进度条，以及一个名为“handle”的div元素来表示拖动手柄。在CSS代码中，我们添加了一些样式来实现拖动手柄的外观和样式。在JavaScript代码中，我们定义了一个名为handleDrag的函数，该函数会在鼠标移动时被调用，用于计算拖动手柄的位置，并更新进度条的宽度。我们还添加了mousedown和mouseup事件监听器，用于启用和禁用拖动手柄的功能。同时，我们也更新了updateProgressBar函数，以便在拖动手柄时也能够自动更新进度条的宽度。