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

实现多个输入框互斥，可以使用Vue 3的v-model指令和Element Plus的Input组件结合使用，利用$emit事件和watch监听来实现。

首先，建立一个父组件，包含多个Input组件，这里以两个为例：

<template>
  <div>
    <el-input v-model="input1" @input="handleInput1" />
    <el-input v-model="input2" @input="handleInput2" />
  </div>
</template>

在data中定义对应的变量：

data() {
  return {
    input1: '',
    input2: ''
  }
}

在methods中定义对应的方法，这里使用$emit事件来通知父组件当前输入框的值：

methods: {
  handleInput1(value) {
    this.$emit('input1-change', value)
  },
  handleInput2(value) {
    this.$emit('input2-change', value)
  }
}

在watch中监听当前输入框的值，如果当前输入框的值发生改变，就将另一个输入框的值清空：

watch: {
  input1(val) {
    if (val) {
      this.input2 = ''
    }
  },
  input2(val) {
    if (val) {
      this.input1 = ''
    }
  }
}

最后，在父组件中使用该组件时，监听子组件的事件，将输入框的值传递给子组件：

<template>
  <div>
    <mutex-input @input1-change="handleInput1" @input2-change="handleInput2" />
  </div>
</template>

<script>
import MutexInput from './MutexInput.vue'

export default {
  components: {
    MutexInput
  },
  methods: {
    handleInput1(value) {
      this.input1 = value
    },
    handleInput2(value) {
      this.input2 = value
    }
  }
}
</script>

这样就实现了多个输入框互斥的效果。