vue项目：自定义滑块过渡效果

最新推荐文章于 2025-07-08 15:17:53 发布

原创最新推荐文章于 2025-07-08 15:17:53 发布 · 547 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java #javascript

文章介绍了如何使用Vue.js开发一个带有动态颜色和位置的百分比指示器组件，包括HTML结构、CSS样式和JavaScript逻辑，以响应式地显示在给定范围内的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分

<div class="slider-main">
    <div class="slider">
      <span v-show="value !== ''" class="pointer" :style="`background-color: ${pointerColor}; left: ${pointerLeft}%`" />
    </div>
    <div class="data-text">
      <span class="min-max">{{ max }}%</span>
      <span class="min-max">{{ min }}%</span>
    </div>
  </div>

css代码：

 .slider-main {
    width: 100%;
    .slider {
      flex: 1;
      height: 14px;
      border-radius: 20px;
      background: linear-gradient(to right,  #F59292, #95D8A4);
      position: relative;
      rotate: 180deg;
      .pointer {
        position: absolute;
        width: 24px;
        height: 35px;
        top: 50%;
        transform: translate(-50%, -50%);
        
        border-radius: 24px;
        border: 3px solid #fff;
        left: 50%;
      }
    }
    .data-text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .min-max {
        font-size: 12px;
        color: #666;
        margin: 0 5px;
      }
    }
    
  }

js部分

export default {
  props: {
    value: {
      type: [Number, String],
      default: ''
    },
    min: {
      type: Number,
      default: -100
    },
    max: {
      type: Number,
      default: 100
    },
  },
  computed: {
    pointerColor () {
      // 获取当前值对应的颜色
      // return this.colorToHex(currentColor);
      return tools.valueToColor(this.min, this.max, this.value);
    },
    pointerLeft () {
      return this.calculateLeftPosition(this.value, this.min, this.max)
    }
  },
  methods: {
    // 计算当前的left的位置
    calculateLeftPosition(actualValue, minValue, maxValue) {
      // 确保实际值不小于最小值，不大于最大值
      actualValue = Math.max(minValue, Math.min(maxValue, actualValue));
      // 计算left值
      var left = (actualValue - minValue) / (maxValue - minValue) * 100;
      // 返回left值
      return left;
    },
  }
}