多手柄滑块的实现-Multiple Hander Slider

前言

Vue2实现一个包含大于2个手柄的滑块（以垂直方向为例）
思路

基本思路
初始化一个色条和一个同等高度的拖拽区
遍历数组，计算每个数组的位置，赋值给style.top/bottom
给拖拽元素绑定拖拽函数，拖拽时计算和赋值位置，根据位置计算变化后的值
触发事件回调
优化
防抖：触发事件回调可以外包一层防抖，防抖时延可以作为组件参数传入
结果排序：sort
<!-- 
  组件：多值滑条
  start-起始值  [基础参数]
  end-终止值  [基础参数]
  heightArr-数组(Number-长度不限)  [基础参数]
  beyond-允许超出相邻边界，默认true  [基础参数]
  unit-单位，默认m
  sortable-是否从小到大排序，默认排序
  width-色条宽度，默认10px 至少给该组件所在容器一个60px的宽度
-->
<template>
  <div class="temp">
    <div class="height-container" :style="{ width: `${2 * width}px` }">
      <div class="control" ref="controlRef">
        <div class="end">{{ end }}{{ unit }}</div>
        <div class="start">{{ start }}{{ unit }}</div>
        <div
          class="drag-item"
          v-for="(item, index) in heightTemp"
          :key="index"
          @mousedown="startDrag(index, $event)"
        >
          {{ item }}{{ unit }}
        </div>
      </div>
      <div class="slider"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MultiSlider",
  props: {
    width: {
      type: Number,
      default: 10,
    },
    start: {
      type: Number,
      default: 0,
    },
    end: {
      type: Number,
      default: 1000,
    },
    heightArr: {
      type: Array,
      default: () => [100, 300, 700],
    },
    sortable: {
      type: Boolean,
      default: true,
    },
    beyond: {
      type: Boolean,
      default: true,
    },
    unit: {
      type: String,
      default: "m",
    },
  },
  data() {
    return {
      heightTemp: [], // 三个高度
      dragging: false, // 拖拽中
      dragIndex: null, // 拖拽的索引
      dragTimer: null, // 拖拽定时器
      precision: 0,
    };
  },
  mounted() {
    this.heightTemp = this.heightArr;
    this.precision = this.heightTemp.reduce((max, cur) => {
      let temp = cur.toString().split(".");
      if (temp.length > 1) {
        max = Math.max(max, temp[1].length || 0);
      } else {
        max = Math.max(max, 0);
      }
      return max;
    }, 0);

    this.$nextTick(() => {
      this.initHeight();
    });
  },
  methods: {
    // 初始位置
    initHeight() {
      let start = this.start;
      let end = this.end;
      let sliderHeight = this.$refs.controlRef.clientHeight;
      let dragItems = this.$refs.controlRef.querySelectorAll(".drag-item");
      this.heightTemp.forEach((item, idx) => {
        let bottom = ((item - start) / (end - start)) * sliderHeight;
        dragItems[idx].style.bottom = `${bottom}px`;
      });
    },
    // 点击开始拖拽
    startDrag(index, event) {
      event.preventDefault();
      event.stopPropagation();
      this.dragging = true;
      this.dragIndex = index;
      document.addEventListener("mousemove", this.drag);
      document.addEventListener("mouseup", this.stopDrag);
    },
    // 拖拽中
    drag(event) {
      if (!this.dragging) return;
      document.body.style.cursor = "grabbing";
      let sliderHeight = this.$refs.controlRef.clientHeight;
      let bottom =
        sliderHeight -
        (event.clientY - this.$refs.controlRef.getBoundingClientRect().top);
      if (bottom < 0) {
        bottom = 0;
      }
      if (bottom > sliderHeight) {
        bottom = sliderHeight;
      }

      // 不允许超出上下边界
      if (!this.beyond) {
        let dragItems = this.$refs.controlRef.querySelectorAll(".drag-item");
        // 获取bottom数值
        let curBottom = dragItems[this.dragIndex].style.bottom;
        // 转化为数字
        curBottom = Number(curBottom.replace("px", ""));
        if (this.dragIndex === 0) {
          let prevBottom = dragItems[this.dragIndex + 1]?.style.bottom;
          prevBottom = Number(prevBottom.replace("px", ""));
          if (curBottom >= prevBottom - 12) {
            bottom = prevBottom - 14;
            this.$refs.controlRef.querySelectorAll(".drag-item")[
              this.dragIndex
            ].style.bottom = `${bottom}px`;
            let start = this.start;
            let end = this.end;

            let temp = (
              (bottom / sliderHeight) * (end - start) +
              start
            ).toFixed(this.precision);
            this.heightTemp[this.dragIndex] = Number(temp);

            this.$refs.controlRef.querySelectorAll(".drag-item")[
              this.dragIndex
            ].innerText = `${temp}m`;
            this.stopDrag();
          }
        } else if (this.dragIndex === dragItems.length - 1) {
          let nextBottom =
            dragItems[this.dragIndex - 1]?.style.bottom || sliderHeight;
          nextBottom = Number(nextBottom.replace("px", ""));
          if (curBottom <= nextBottom + 12) {
            bottom = nextBottom + 14;
            this.$refs.controlRef.querySelectorAll(".drag-item")[
              this.dragIndex
            ].style.bottom = `${bottom}px`;
            let start = this.start;
            let end = this.end;

            let temp = (
              (bottom / sliderHeight) * (end - start) +
              start
            ).toFixed(this.precision);
            this.heightTemp[this.dragIndex] = Number(temp);

            this.$refs.controlRef.querySelectorAll(".drag-item")[
              this.dragIndex
            ].innerText = `${temp}m`;
            this.stopDrag();
          }
        } else {
          let prevBottom = dragItems[this.dragIndex + 1]?.style.bottom;
          let nextBottom =
            dragItems[this.dragIndex - 1]?.style.bottom || sliderHeight;
          prevBottom = Number(prevBottom.replace("px", ""));
          nextBottom = Number(nextBottom.replace("px", ""));
          if (curBottom >= prevBottom - 12) {
            bottom = prevBottom - 14;
            this.$refs.controlRef.querySelectorAll(".drag-item")[
              this.dragIndex
            ].style.bottom = `${bottom}px`;
            let start = this.start;
            let end = this.end;

            let temp = (
              (bottom / sliderHeight) * (end - start) +
              start
            ).toFixed(this.precision);
            this.heightTemp[this.dragIndex] = Number(temp);

            this.$refs.controlRef.querySelectorAll(".drag-item")[
              this.dragIndex
            ].innerText = `${temp}m`;
            this.stopDrag();
          } else if (curBottom <= nextBottom + 12) {
            bottom = nextBottom + 14;
            this.$refs.controlRef.querySelectorAll(".drag-item")[
              this.dragIndex
            ].style.bottom = `${bottom}px`;
            let start = this.start;
            let end = this.end;

            let temp = (
              (bottom / sliderHeight) * (end - start) +
              start
            ).toFixed(this.precision);
            this.heightTemp[this.dragIndex] = Number(temp);

            this.$refs.controlRef.querySelectorAll(".drag-item")[
              this.dragIndex
            ].innerText = `${temp}m`;
            this.stopDrag();
          }
        }
      }
      this.$refs.controlRef.querySelectorAll(".drag-item")[
        this.dragIndex
      ].style.bottom = `${bottom}px`;
      let start = this.start;
      let end = this.end;

      let temp = ((bottom / sliderHeight) * (end - start) + start).toFixed(
        this.precision
      );
      this.heightTemp[this.dragIndex] = Number(temp);

      this.$refs.controlRef.querySelectorAll(".drag-item")[
        this.dragIndex
      ].innerText = `${temp}m`;

      // this.setDebounce();
    },
    // 结束拖拽
    stopDrag() {
      this.dragging = false;
      this.dragIndex = null;
      document.body.style.cursor = "auto";
      document.removeEventListener("mousemove", this.drag);
      document.removeEventListener("mouseup", this.stopDrag);
      this.setDebounce();
    },
    // 回调
    setDebounce() {
      if (this.sortable) {
        let result = this.heightTemp.sort((a, b) => a - b);
        this.$emit("changeSlider", result);
      } else {
        this.$emit("changeSlider", this.heightTemp);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.temp {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.height-container {
  height: 100%;
  width: 100%;
  font-size: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 4px;
  padding-top: 12px;

  .control {
    grid-column: span 1;
    position: relative;

    .start {
      position: absolute;
      bottom: 0;
      right: 0;
      color: #a09fa4;
      user-select: none;
    }
    .end {
      position: absolute;
      top: -12px;
      right: 0;
      color: #a09fa4;
      user-select: none;
    }

    .drag-item {
      position: absolute;
      right: 0;
      width: fit-content;
      user-select: none;
      cursor: grab;
      height: 16px;
      padding-right: 4px;
      padding-left: 2px;
      color: #a09fa4;
      background-color: #a09fa4;
      clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      &::before {
        z-index: -1;
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 1px;
        background-color: #fdfed6;
        clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
      }
    }
  }

  .slider {
    margin-top: -12px;
    overflow: hidden;
    grid-column: span 1;
    background-color: #a09fa4;
  }
}
</style>