Vue实现一个简易进度条

Ann_R

已于 2024-02-28 16:39:46 修改

阅读量531

点赞数 3

文章标签： vue.js javascript 前端

于 2024-02-28 16:33:18 首次发布

本文链接：https://blog.csdn.net/ann_52547/article/details/136349848

版权

本文介绍了如何使用Vue.js创建一个可拖动的滑块进度条组件，用户可以通过点击按钮或拖动滑块来调整百分比值，展示了数据绑定、计算属性和事件处理的方法实现。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <div class="progress-bar" @mousedown="startDrag" @mouseup="stopDrag" @mousemove="dragging" ref="progressBar">
      <div class="slider" :style="{ left: progress + '%' }"></div>
      <div class="progress" :style="{ width: progress + '%' }"></div>
      <div class="progress-value">{{ currentProgress }}</div> 
    </div>
    <div>
      <button @click="decreaseProgress">-</button>
      <button @click="increaseProgress">+</button>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: 'SlideBar',
  data() {
    return {
      isDragging: false,
      progress: 50
    }
  },
  computed: {
    currentProgress() {
      return Math.round(this.progress)
    }
  },
  methods: {
    startDrag() {
      this.isDragging = true
    },
    stopDrag() {
      this.isDragging = false
    },
    dragging(event) {
      if (this.isDragging) {
        const progressBar = this.$refs.progressBar
        const rect = progressBar.getBoundingClientRect()
        const offsetX = event.clientX - rect.left
        const percentage = (offsetX / rect.width) * 100
        this.progress = Math.min(100, Math.max(0, percentage))
      }
    },
    increaseProgress() {
      this.progress = Math.min(100, this.progress + 1)
    },
    decreaseProgress() {
      this.progress = Math.max(0, this.progress - 1)
    }
  }
}
</script>
  
  <style lang="scss">
.progress-bar {
  display: flex;
  align-items: center;
  width: 257px;
  height: 2px;
  background: #dcdbdb;
  position: relative;
  cursor: pointer;
}

.slider {
  position: absolute;
  width: 18px;
  height: 14px;
  background: url('../../assets/images/editor-drag/icon_progress.png') no-repeat;
  background-size: 18px 14px;
}

.progress {
  position: absolute;
  height: 100%;
  /* background: #00bcd4; */
}


.div-input {
    position: relative;
    align-items: center;
    justify-content: space-between;
    ::v-deep .el-input__inner {
      width: 62px;
      height: 34px;
    }

    .unit {
      position: absolute;
      right: 10px;
      width: 9px;
      font-family: SourceHanSansCN-Medium;
      font-weight: 500;
      font-size: 14px;
      color: #7b7e91;
      text-align: right;
    }
  }

.progress-value {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
</style>