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

 

 

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

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

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

          

            
所选的参与评分类型权重加起来应等于100%，已配置 {{ totalWeight || 0 }} %。
            平均分配
          
        
        
        

          

            

              
                
                  
{{item.name}} 
                
              
              
                
                  
                
                
                  
                  %
                
              
            
            

          
        



  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组件需要联动使用