vue中封装自动计算比例滑块

此插件为另一位漂亮的前端同事小姐姐封装,觉得非常好用于是决定记载下来,便于复用

如图需要动态传入需要分配权重的数组,平均分配可以自动将100%平均分给数组中的值

如果手动拖拽,则会自动计算可拖动最大区域,便于最终总权重必定为100%

<el-alert class="merge-alert" type="warning" :closable="false">
          <div slot="title" class="display-flex">
            <div style="height:28px;line-height:28px">所选的参与评分类型权重加起来应等于100%，已配置 <span style="font-weighScore:600">{{ totalWeight || 0 }}</span> %。</div>
            <el-button @click="setAllExpWeight" size="mini" type="text">平均分配</el-button>
          </div>
        </el-alert>
        <el-divider></el-divider>
        <div class="course-exp-weighScore-list">
          <div v-for="item in form.courseObjectiveWeightList" :key="item.id">
            <div style="padding:10px;">
              <el-row type="flex" justify="space-between">
                <el-col :span="24">
                  <p>{{item.name}} </p>
                </el-col>
              </el-row>
              <el-row type="flex" justify="space-between" :gutter="13">
                <el-col :span="16" style="padding-left: 15px;">
                  <ultralabx-slider v-model="item.weight" :max="referenceWeight[item.id]"></ultralabx-slider>
                </el-col>
                <el-col class="text-right" :span="8">
                  <el-input-number v-model="item.weight" size="mini" :min="0" :max="referenceWeight[item.id]" :precision="0"></el-input-number>
                  %
                </el-col>
              </el-row>
            </div>
            <div class="dashed"></div>
          </div>
        </div>



  components: {
    ultralabxSlider,
  },
  computed: {
    totalWeight() {
      let total = 0;
      this.form.courseObjectiveWeightList.forEach((item) => {
        total += item.weight;
      });
      return total;
    },
    referenceWeight() {
      let obj = {};
      this.form.courseObjectiveWeightList.forEach((item) => {
        let { id } = item;
        obj[id] = 100;
        this.form.courseObjectiveWeightList
          .filter((item) => item.id !== id)
          .forEach((item) => {
            obj[id] -= item.weight || 0;
          });
        if (obj[id] < 0) {
          obj[id] = 0;
        }
      });
      return obj;
    },
  },

  methods:{
    setAllExpWeight() {
      //平均分配
      let weightArr = this.disNumber(
        100,
        this.form.courseObjectiveWeightList.length
      );
      this.form.courseObjectiveWeightList.map((item, index) => {
        item.weight = weightArr[index];
      });
    },
   disNumber(num, len) {
     let average = Math.floor(num / len)
     let remainder = num % len
     let arr = new Array(len).fill(average)
     if (remainder > 0) {
      for (let i = 0; i < remainder; i++) {
         arr[i]++
      }
     }
      return arr
     }
  }

// 模拟数据 ,需要自行替换
form.courseObjectiveWeightList = [ { "id": "1689911475658219522", "name": "好好生活啊", "weight": 0 }, { "id": "1689910525744832514", "name": "好日子", "weight": 0 }, { "id": "1689156584639741954", "name": "实验知识1", "weight": 0 } ]

下面是封装ultralabx-slider组件需要联动使用

<template>
  <div class="ultralabx-slider-box">
    <el-slider class="down-slider" v-model="maxNumber" :marks="{[maxNumber]: `${maxNumber}%`}" disabled></el-slider>
    <el-slider class="up-slider" v-model="curNumber" :max="maxNumber" :disabled="disabled" :style="`width: ${maxNumber}%`"></el-slider>

  </div>
</template>

<script>
export default {
  name: "ultralabxSlider",
  props: {
    value: {
      type: Number,
      default: 0,
    },
    max: {
      type: Number,
      default: 100,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        if (val === this.curNumber) {
          return;
        }
        this.curNumber = val;
      },
    },
    max: {
      immediate: true,
      handler(val) {
        this.maxNumber = val;
      },
    },
    curNumber: {
      immediate: true,
      handler(val) {
        if (val === this.value) {
          return;
        }
        this.$emit("input", val);
      },
    },
  },
  data() {
    return {
      curNumber: 0,
      maxNumber: 100,
    };
  },
};
</script>

<style lang="scss">
.ultralabx-slider-box {
  .el-slider__button {
    width: 10px;
    height: 10px;
    border-width: 4px;
  }

  .el-slider__bar,
  .el-slider__runway {
    height: 4px;
    border: 1px solid transparent;
    top: -1px;
  }

  .el-slider__button-wrapper {
    top: -16px;
  }

  .up-slider {
    .el-slider__runway {
      background-color: transparent;
    }

    .el-slider__bar {
      border: 1px solid #409eff;
    }
  }

  .down-slider {
    .el-slider__runway {
      border-color: #e4e7ed;

      &.disabled .el-slider__button {
        border: 1px dashed #ff8e1f;
      }
    }

    .el-slider__bar {
      border-color: #ff8e1f;
      border-style: dashed;
      background-color: #ffffff;
    }

    .el-slider__marks-text {
      color: #ff8e1f;
      font-size: 12px;
      line-height: 2.3;
      white-space: nowrap;
      bottom: 0.333333em;
      margin-top: 0;
    }
  }
}
</style>

<style lang="scss" scoped>
.ultralabx-slider-box {
  position: relative;

  .up-slider {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1001;
  }

  .down-slider {
  }
}
</style>