创建自己的Vue进度条组件，引领拖放控制和实时预览！

2023-05-15 11:00:46

用Vue.js构建自定义进度条组件，掌控交互式体验

在当今快节奏的数字世界中，吸引用户注意力是至关重要的。进度条组件提供了互动且引人入胜的方式，让用户了解其操作的进度。通过利用Vue.js的强大功能，我们可以创建属于自己的自定义进度条组件，充分发挥个性化控制的潜力。

第一步：配置进度条属性

当前进度值 ：设置进度条的初始位置，例如 value: 50。
可拖拽 ：允许用户拖动进度条更改其值，例如 isDrag: true。
最小值 ：定义进度条的最小可能值，例如 min: 0。
最大值 ：定义进度条的最大可能值，例如 max: 100。
进度条颜色 ：自定义进度条的颜色以匹配您的品牌或设计美学，例如 bgColor: #4ab157。

第二步：构建交互式进度条组件

1. 创建Vue组件文件

<template>
  <div class="progress-bar">
    <div class="progress-bar-inner" :style="{ width: progress + '%' }" @mousedown="onMouseDown"></div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 50
    },
    isDrag: {
      type: Boolean,
      default: true
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    bgColor: {
      type: String,
      default: '#4ab157'
    }
  },
  data() {
    return {
      progress: this.value
    }
  },
  methods: {
    onMouseDown(e) {
      if (!this.isDrag) return;
      document.addEventListener('mousemove', this.onMouseMove);
      document.addEventListener('mouseup', this.onMouseUp);
    },
    onMouseMove(e) {
      const rect = this.$el.getBoundingClientRect();
      const progress = Math.max(this.min, Math.min(this.max, ((e.clientX - rect.left) / rect.width) * 100));
      this.progress = progress;
      this.$emit('update:value', progress);
    },
    onMouseUp() {
      document.removeEventListener('mousemove', this.onMouseMove);
      document.removeEventListener('mouseup', this.onMouseUp);
    }
  }
};
</script>

<style>
.progress-bar {
  width: 100%;
  height: 10px;
  background-color: #ddd;
  border-radius: 5px;
}

.progress-bar-inner {
  height: 100%;
  background-color: #4ab157;
  transition: width 0.2s ease-in-out;
}
</style>

2. 使用组件并享受拖放的乐趣

<template>
  <div>
    <progress-bar v-model="progress"></progress-bar>
    <span>进度：{{ progress }}%</span>
  </div>
</template>

<script>
import ProgressBar from './ProgressBar.vue';

export default {
  components: { ProgressBar },
  data() {
    return {
      progress: 50
    }
  }
};
</script>