vue项目：自定义滑块过渡效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue项目：自定义滑块过渡效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue项目：自定义滑块过渡效果,前端,java,javascript

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部分文章来源地址https://www.toymoban.com/news/detail-835512.html

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

到了这里，关于vue项目：自定义滑块过渡效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！