FD_Pano/src/components/range/index.vue

<template>
  <div class="layer" @click="clickHandle($event)" ref="layer">
    <div class="percentage" :style="{width: left}"></div>
    <span class="bar" :style="{left: left}" ref="bar" @click.stop></span>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number | String,
      default: 1
    },
    min: {
      type:Number,
      default: 1
    },
    max: {
      type: Number,
      default: Infinity
    },
    isGradient:{
      type: Number,
      default: 0
    }
  },
  data() {
    let gradientArr = []
    if(this.max > this.isGradient){
      let  temp = Array(Math.ceil(this.max / this.isGradient)).fill(0)
      gradientArr = temp.map((item,i)=>{
        return [i*this.isGradient,(i+1)*this.isGradient]
      })
      console.log(gradientArr);
    }
    return {
      current: Number(this.value),
      isLegal:this.max > this.isGradient && this.isGradient,
      gradientArr
    }
  },
  mounted() {
    this.downHandle = this.downHandle.bind(this)
    this.$refs.bar.addEventListener('mousedown', this.downHandle, false)
    this.$refs.bar.addEventListener('touchstart', this.downHandle, false)
  },
  beforeDestroy() {
    this.$refs.bar.removeEventListener('mousedown', this.downHandle, false)
    this.$refs.bar.removeEventListener('touchstart', this.downHandle, false)
  },
  methods: {

    toChangeNum(tmp){
      
        let max = [0,0]
        if (this.isLegal) {
          max = this.gradientArr.find(item=>{
            return tmp >= item[0] && tmp < item[1]
          })
        }

        if (tmp == 0 || tmp == this.max) {
          this.current = tmp
          return 
        }

        return Number(this.isLegal ? (max ? max[1] : tmp) : tmp)

    },
    clickHandle(ev) {
      let tmp = this.min + this.len * (ev.offsetX / this.width)
      this.current = this.toChangeNum(tmp)
    },
    downHandle(ev) {
      let $layer = document.documentElement
      let startX = ev.pageX || ev.touches[0].pageX
      let initV = this.current
      let move = ev => {
        let tmp = initV - ((startX - (ev.pageX || ev.touches[0].pageX)) / this.width) * this.len
        this.current = this.toChangeNum(tmp)
      }
      let end = ev => {
        $layer.removeEventListener('touchmove', move, false)
        $layer.removeEventListener('touchend', end, false)
        $layer.removeEventListener('mousemove', move, false)
        $layer.removeEventListener('mouseup', end, false)
      }

      $layer.addEventListener('touchmove', move, false)
      $layer.addEventListener('touchend', end, false)
      $layer.addEventListener('mousemove', move, false)
      $layer.addEventListener('mouseup', end, false)
      
      this.$bus.once('player/mouseup', end)
    }
  },
  computed: {
    width() {
      return this.$refs.layer.offsetWidth
    },
    len() {
      return this.max - this.min
    },
    left() {
      return ((this.current - this.min) / this.len) * 100 + '%'
    }
  },
  watch: {
    current() {
      let current = Number(this.current ? this.current.toFixed(2) : this.current)
      if (current !== this.current) return this.current = current
      
      if (!this.current.toString()) {
        return this.current = 1
      }
      if (this.current < this.min) {
        return this.current = this.min
      } else if (this.current > this.max) {
        this.current = this.max
      }
      this.$emit('input', this.current)
    },
    value(newV, oldV) {
      if (newV !== this.current)
      console.log(newV);
      this.current = Number(newV)
    }
  }
}
</script>
<style lang="less" scoped>
.layer {
  margin: 10px 0;
  position: relative;
  width: 100%;
  height: 4px;
  cursor: pointer;
  border: 1px solid #5d5d5d;

  >.percentage {
    height: calc(100% + 2px);
    background-color: @color;
    position: absolute;
    top: -1px;
    left: 0;
  }

  >.bar {
    position: absolute;
    height: 15px;
    width: 15px;
    background-color: #ffffff;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }
}

</style>