vue点击另一个输入框时禁用当前输入框的同时清除检验规则并清空输入框

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

给当前输入框绑定一个 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>

在另一个输入框的 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>