快捷導(dǎo)航

vue項(xiàng)目實(shí)現(xiàn)自定義滑塊過(guò)渡效果

更新時(shí)間：2024年07月27日 09:38:48 作者：小影_8978

這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)自定義滑塊過(guò)渡效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue自定義滑塊過(guò)渡效果

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 () {
      // 獲取當(dāng)前值對(duì)應(yīng)的顏色
      // return this.colorToHex(currentColor);
      return tools.valueToColor(this.min, this.max, this.value);
    },
    pointerLeft () {
      return this.calculateLeftPosition(this.value, this.min, this.max)
    }
  },
  methods: {
    // 計(jì)算當(dāng)前的left的位置
    calculateLeftPosition(actualValue, minValue, maxValue) {
      // 確保實(shí)際值不小于最小值，不大于最大值
      actualValue = Math.max(minValue, Math.min(maxValue, actualValue));
      // 計(jì)算left值
      var left = (actualValue - minValue) / (maxValue - minValue) * 100;
      // 返回left值
      return left;
    },
  }
}

vue寫滑塊組件

<template>
  <div @touchend="down = false" @touchmove="gotouchstart" class="pledge">
    <!-- <div class="mask" @touchend="down = false" @touchmove="gotouchstart"></div> -->
    <div class="h2">調(diào)整質(zhì)押率</div>
    <!-- 已借數(shù)量和質(zhì)押金額 -->
    <div class="info">
      <div>已借數(shù)量</div>
      <div>1,001.48292837 USDT</div>
    </div>
    <div class="info">
      <div>質(zhì)押金額</div>
      <div>1.48292837 BTC</div>
    </div>
    <!-- 滑塊背景 -->
    <div class="box">
      <div style="border-right: 1px solid #0f9d58">
        <div class="text">65%</div>
        <div class="text">初始質(zhì)押率</div>
        <div class="low col">低風(fēng)險(xiǎn)</div>
        <div class="round">
          <div></div>
        </div>
        <div class="round" style="bottom: -4px; left: -4px">
          <div></div>
        </div>
        <div class="round" style="top: -4px; right: -4px">
          <div style="background: #0f9d58"></div>
        </div>
      </div>
      <div style="border-right: 1px solid #d23f31">
        <div class="text">83%</div>
        <div class="text">平倉(cāng)質(zhì)押率</div>
        <div class="danger col">高風(fēng)險(xiǎn)</div>
        <div class="round">
          <div></div>
        </div>
        <div class="round" style="top: -4px; right: -4px">
          <div style="background: #d23f31"></div>
        </div>
      </div>
    </div>
    <!-- 滑塊 -->
    <div class="slider" ref="sliderRef">
      <div
        class="slider_box"
        :style="{ left: sliderLeft + 'px' }"
        @touchstart="down = true"
      >
        | | |
      </div>
      <div class="percent" :style="{ left: percentLeft + 'px' }">
        <div>LTV</div>
        <div style="color: #0f9d58; font-weight: bold">{{ percent }}%</div>
      </div>
    </div>
    <!-- 還款總額彈窗 -->
    <div class="title">質(zhì)押金額</div>
    <div class="input">
      <div class="type">增加</div>
      <input type="text" v-model="money" @keyup="formatInput" />
      <div class="unit">
        <span style="margin-right: 5px">MAX</span>
        <span style="color: rgba(0, 0, 0, 0.87)">USDT</span>
      </div>
    </div>
    <div class="btn">增加質(zhì)押金</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliderLeft: -16, // 滑塊左側(cè)距離
      percentLeft: -21, // 百分比的側(cè)距離
      percent: 1, // 百分比
      down: false, // 控制滑塊
      money: 0,
    }
  },
 
  mounted() {},
 
  methods: {
    // 滑塊拖動(dòng)
    gotouchstart(e) {
      if (this.down) {
        let width = this.$refs.sliderRef.getBoundingClientRect().width
        // 計(jì)算距離
        let left =
          Math.round(e.targetTouches[0].clientX) -
          Math.round(this.$refs.sliderRef.getBoundingClientRect().left)
        if (left < 0) {
          this.sliderLeft = -17
          this.percentLeft = -27
        } else if (left > width) {
          this.sliderLeft = width - 17
          this.percentLeft = width - 27
        } else {
          this.sliderLeft = left - 17
          this.percentLeft = left - 27
        }
        // 計(jì)算百分比
        if (left > 0 && left < width / 2) {
          this.percent = Math.round((left / width) * 2 * 65)
          this.percent = this.percent ? this.percent : 1
        } else if (left > width / 2 && left < width) {
          this.percent = Math.round(((left - width / 2) / width) * 2 * 18 + 65)
        } else if (left < 0) {
          this.percent = 1
        } else if (left > width) {
          this.percent = 83
        }
      }
    },
    // 數(shù)字處理
    formatInput() {
      if (typeof this.money !== 'string') {
        this.money = this.money.toString()
      }
      // 先把非數(shù)字的都替換掉，除了數(shù)字和.
      this.money = this.money.replace(/[^\d.]/g, '')
      // 必須保證第一個(gè)為數(shù)字而不是.
      this.money = this.money.replace(/^\./g, '')
      // 保證只有出現(xiàn)一個(gè).而沒(méi)有多個(gè).
      this.money = this.money.replace(/\.{2,}/g, '')
      // 保證.只出現(xiàn)一次，而不能出現(xiàn)兩次以上
      this.money = this.money
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
      // 只能輸入小數(shù)點(diǎn)后8位
      const reg = '^(-)*(\\d+)\\.(\\d{' + 8 + '}).*$'
      this.money = this.money.replace(new RegExp(reg), '$1$2.$3')
    },
  },
}
</script>

<style lang="less" scoped>
.pledge {
  padding: 16px;
  position: relative;
  overflow: hidden;
  .h2 {
    font-family: DIN Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 36px;
  }
  .mask {
    width: 100wh;
    height: 100vh;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
  }
}
.info {
  font-family: DIN Pro;
  font-size: 14px;
  font-style: normal;
  line-height: 18px;
  letter-spacing: 0em;
  text-align: left;
  display: flex;
  margin: 20px 0 30px 0;
}
.info :first-child {
  color: #86868b;
  min-width: 80px;
}
.info :last-child {
  color: #1d1d1f;
  font-weight: bold;
}
 
.title {
  font-family: DIN Pro;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  color: #1d1d1f;
  margin: 8px 0;
}
.input {
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  background: #f5f5f7;
  border-radius: 4px;
  padding: 0 15px;
  .type {
    width: 80px;
    height: 40px;
    margin-right: 5px;
    border-right: 1px solid #e6e6e9;
    font-family: DIN Pro;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 40px;
    color: rgba(0, 0, 0, 0.87);
  }
  input {
    width: 120px;
    background: none;
    outline: none;
    border: none;
    font-family: DIN Pro;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    color: rgba(0, 0, 0, 0.87);
  }
  .unit {
    font-family: DIN Pro;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    color: #14c393;
  }
}
.btn {
  height: 40px;
  background: #14c393;
  border-radius: 10px;
  color: #ffffff;
  font-family: DIN Pro;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
  margin-top: 16px;
}
.slider {
  width: 100%;
  height: 100px;
  position: relative;
  .slider_box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #a1a1a6;
    width: 34px;
    height: 32px;
    background: #ffffff;
    border: 1px solid #e6e6e9;
    box-sizing: border-box;
    box-shadow: 0px 0px 3px rgba(101, 119, 134, 0.15),
      0px 0px 15px rgba(101, 119, 134, 0.2);
    border-radius: 8px;
    position: absolute;
    top: 0%;
    transform: translateY(-50%);
    z-index: 10;
  }
  .percent {
    position: absolute;
    top: 30px;
    width: 55px;
    height: 42px;
    background-color: #fff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08),
      0px 4px 8px rgba(50, 50, 71, 0.006);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 12px;
    line-height: 16px;
    font-family: DIN Pro;
    font-style: normal;
    font-weight: normal;
    color: #515154;
  }
}
.box {
  display: flex;
  flex: 2;
  margin-top: 16px;
  > div {
    flex: 1;
    text-align: right;
    position: relative;
  }
  .text {
    font-family: DIN Pro;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    color: #515154;
    margin-right: 4px;
  }
  .col {
    height: 50px;
    margin-top: 18px;
    font-family: DIN Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
    padding-right: 4px;
    padding-top: 4px;
  }
  .round {
    width: 8px;
    height: 8px;
    background: #ffffff;
    border: 1px solid #e6e6e9;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: absolute;
    bottom: -4px;
    right: -4px;
    z-index: 5;
    > div {
      width: 4px;
      height: 4px;
      background: #1d1d1f;
      border-radius: 50%;
    }
  }
  .low {
    background: rgba(15, 157, 88, 0.2);
    color: #0f9d58;
    border-bottom: 2px solid #0f9d58;
  }
  .danger {
    background: rgba(210, 63, 49, 0.2);
    color: #d23f31;
    border-bottom: 2px solid #d23f31;
  }
}
</style>