Vue.js 禁用输入框并清除验证：点击另一个输入框时触发

可以通过监听另一个输入框的 focus 事件，在事件处理函数中禁用当前输入框，清除校验规则并清空输入框。具体实现如下：

1. 给当前输入框绑定一个 ref

<template>
  <div>
    <input ref='input1' v-model='value1' :rules='rules1'>
    <input ref='input2' v-model='value2' @focus='onInput2Focus'>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: '',
      value2: '',
      rules1: [
        {
          validator: (rule, value, callback) => {
            // 校验规则
          },
          trigger: 'blur',
        },
      ],
    };
  },
  methods: {
    onInput2Focus() {
      // 获取输入框1的 ref
      const input1 = this.$refs.input1;
      // 禁用输入框1
      input1.disabled = true;
      // 清除输入框1的校验规则
      input1.clearValidate();
      // 清空输入框1的值
      this.value1 = '';
    },
  },
};
</script>

2. 在另一个输入框的 focus 事件处理函数中调用方法

<template>
  <div>
    <input ref='input1' v-model='value1' :rules='rules1'>
    <input ref='input2' v-model='value2' @focus='onInput2Focus'>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: '',
      value2: '',
      rules1: [
        {
          validator: (rule, value, callback) => {
            // 校验规则
          },
          trigger: 'blur',
        },
      ],
    };
  },
  methods: {
    onInput2Focus() {
      // 获取输入框1的 ref
      const input1 = this.$refs.input1;
      // 禁用输入框1
      input1.disabled = true;
      // 清除输入框1的校验规则
      input1.clearValidate();
      // 清空输入框1的值
      this.value1 = '';
    },
  },
};
</script>