vue3+element-plus实现多个输入框互斥

实现多个输入框互斥可以通过绑定一个全局变量来控制，例如可以定义一个`lock`变量，表示当前是否有一个输入框被锁定，如果有一个输入框被锁定了，其他输入框就不能编辑。然后在每个输入框中绑定`readonly`属性，根据`lock`变量的值来控制是否可以编辑。

具体实现可以参考以下代码：

<template>
  <div>
    <el-input v-model="input1" :readonly="lock && activeInput !== 'input1'" @focus="activeInput='input1'"></el-input>
    <el-input v-model="input2" :readonly="lock && activeInput !== 'input2'" @focus="activeInput='input2'"></el-input>
    <el-input v-model="input3" :readonly="lock && activeInput !== 'input3'" @focus="activeInput='input3'"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      lock: false, // 是否锁定输入框
      activeInput: '', // 当前激活的输入框
    };
  },
  watch: {
    // 监听输入框的值变化，如果所有输入框都不为空，则锁定输入框
    input1(val) {
      if (val && this.input2 && this.input3) {
        this.lock = true;
      } else {
        this.lock = false;
      }
    },
    input2(val) {
      if (val && this.input1 && this.input3) {
        this.lock = true;
      } else {
        this.lock = false;
      }
    },
    input3(val) {
      if (val && this.input1 && this.input2) {
        this.lock = true;
      } else {
        this.lock = false;
      }
    },
  },
};
</script>

以上代码中，我们使用了`readonly`属性来控制输入框是否可编辑，同时在每个输入框中添加了`@focus`事件，用来记录当前激活的输入框。在每个输入框的值变化时，判断所有输入框是否都不为空，如果是，则锁定输入框。这样就实现了多个输入框互斥的效果。