实现三个输入框数值动态平衡，总和始终为100的问题求助

需要实现三个输入框的数值动态平衡，总和始终为100，初始状态为100, 0, 0。例如在第二个输入框输入50时，数值应变为50, 50, 0。使用Vue开发（框架不影响核心逻辑），尝试了以下代码但无法正常工作，比如在第三个输入框输入数值时总和会超过100：

adjustPercentage(changedValue) {
  if (changedValue === 'input1') {
    this.input2 = 100 - this.input1 - this.input3;
    this.input3 = 100 - this.input1 - this.input2;
  } else if (changedValue === 'input2') {
    this.input1 = 100 - this.input2 - this.input3;
    this.input3 = 100 - this.input1 - this.input2;
  } else if (changedValue === 'input3') {
    this.input1 = 100 - this.input2 - this.input3;
    this.input2 = 100 - this.input1 - this.input3;
  }

  // Ensure the values are clamped to avoid negative percentages
  if (this.input1 < 0) this.input1 = 0;
  if (this.input2 < 0) this.input2 = 0;
  if (this.input3 < 0) this.input3 = 0;
},

你的代码存在两个核心问题：

• 重复计算逻辑混乱：修改某一输入框时，会先后计算另外两个输入框的值，导致后计算的输入框被错误覆盖。
• 未提前限制输入范围：若用户输入超过100的值，后续修正负数的逻辑无法挽回总和超出100的问题。

以下是修正后的代码，同时支持保持非修改输入框比例的平衡逻辑（符合你给出的示例场景）：

adjustPercentage(changedValue) {
  // 1. 先限制当前修改输入框的数值在0-100之间
  this[changedValue] = Math.max(0, Math.min(100, this[changedValue]));
  
  const currentVal = this[changedValue];
  const remaining = 100 - currentVal;
  
  // 获取另外两个输入框的键名
  const otherInputs = Object.keys(this).filter(key => key.startsWith('input') && key !== changedValue);
  const inputA = otherInputs[0];
  const inputB = otherInputs[1];
  
  const sumOthers = this[inputA] + this[inputB];
  
  if (sumOthers === 0) {
    // 若另外两个输入框均为0（如初始状态），将剩余值全部分配给第一个非当前输入框
    this[inputA] = remaining;
    this[inputB] = 0;
  } else {
    // 按原有比例分配剩余值，保持非修改输入框的比例关系
    const ratioA = this[inputA] / sumOthers;
    const ratioB = this[inputB] / sumOthers;
    this[inputA] = remaining * ratioA;
    this[inputB] = remaining * ratioB;
    
    // 处理浮点数精度问题，确保总和严格为100
    const total = currentVal + this[inputA] + this[inputB];
    if (total !== 100) {
      this[inputA] += 100 - total;
    }
  }
  
  // 最后再次确保所有值在0-100范围内（处理精度误差）
  this.input1 = Math.max(0, Math.min(100, this.input1));
  this.input2 = Math.max(0, Math.min(100, this.input2));
  this.input3 = Math.max(0, Math.min(100, this.input3));
},

关键逻辑说明： #

• 提前限制输入范围：先把用户输入的数值约束在0-100，从源头避免超出总和的问题。
• 比例分配剩余值：当非修改输入框有值时，按原有比例分配剩余数值，保证平衡后仍符合之前的分配逻辑。
• 初始状态处理：针对初始100,0,0这类场景，将剩余值全部分配给原有非0的输入框，符合你给出的示例效果。
• 精度修正：处理浮点数计算导致的微小误差，确保总和始终精确为100。

如果你不需要保持比例，想让剩余值平均分配给另外两个输入框，可以把比例分配的代码替换为：

this[inputA] = remaining / 2;
this[inputB] = remaining / 2;

内容的提问来源于stack exchange，提问作者supersize