【Vue中的@blur@input事件解读】

失去焦点和获取焦点是一个鼠标行为，例如当点击数个输入框其中的一个使其处于编辑输入状态的时候就是获得可焦点，当点击其他输入框或者其他区域就会使这个输入框失去焦点

@blur 是当元素失去焦点时所触发的事件，不论是通过tab键还是点击其它元素等方式进行焦点转移，且不管文本的值是否有改变

<el-input
            v-model="indexInfo.score"
            class="input-info"
            type="number"
            style="width: 54%;margin-left:42px;"
            :disabled="indexFlag"
            placeholder="请输入"
            min="0"
            max="9999"
            @input="value => indexInfo.score = getRightVal(indexInfo.score)"
            @blur="validateSingle(indexInfo.score,'score');value => indexInfo.score = getRightVal(indexInfo.score)"
          />

• @input="value => indexInfo.score = getRightVal(indexInfo.score)"：当输入框的值发生变化时，触发input事件，并调用Vue实例中的getRightVal方法来对indexInfo.score进行处理，确保它的值符合要求。

• @blur="validateSingle(indexInfo.score,'score');value => indexInfo.score = getRightVal(indexInfo.score)"：当输入框失去焦点时，触发blur事件，并调用Vue实例中的validateSingle方法对indexInfo.score进行验证，然后再调用getRightVal方法对其进行处理，确保它的值符合要求。

  validateSingle(info,type) {
        if(type === "indexName") {
          if(info) {
            this.verificationTips.indexName = "";
          }else {
            this.verificationTips.indexName = "请输入指标名";
          }
        }
  }

  示例代码中，当用户完成输入总分并且焦点移开时，对输入进行验证会触发@blur事件，会出现消息提示框——”请输入指标名“

• change事件：这个事件会在输入框的值发生改变并且输入框失去焦点时触发。但是它有一个限制，即只有当输入框的值发生了实际改变时才会触发。如果用户在输入框中输入了一个值，然后删除它，再次输入相同的值，change事件不会触发，因为值没有实际改变。

• input事件：这个事件会在用户输入时实时触发，无论输入框是否获得或失去焦点。它提供了实时的反馈，但在验证用户输入时可能会产生问题。例如，当用户正在输入一个不符合要求的值时，会不断触发input事件，导致频繁的验证操作，这可能会对性能产生一定的影响。

• blur事件：这个事件会在输入框失去焦点时触发。使用blur事件，可以确保在用户完成输入并移动焦点到其他元素时进行验证。它减少了验证的频率，提高了性能，并且在用户完成输入之前不会干扰用户输入。