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

小影_89782024-02-25 11:51

html部分

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代码：

javascript 复制代码

 .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部分

javascript 复制代码

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;
    },
  }
}