Vue实现一个简易进度条

                        {{ currentProgress }}               -      +          expindex.php/tags-1038.html" >ort 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)    }  }}    .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; */}.p-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%);}

（）（）