Vue3中如何实现a.vue中4个element plus button，选择哪一个哪一个就高亮，失去焦点不影响高亮

可以通过在a.vue中使用`v-model`绑定一个变量来实现高亮效果，同时使用`:focus`和`:blur`绑定事件来控制失去焦点时不影响高亮。

具体实现方式如下：

1. 在a.vue中定义四个Element Plus Button，并使用`v-model`绑定一个变量`selectedButton`：

<template>
  <div>
    <el-button v-model="selectedButton" :value="1">Button 1</el-button>
    <el-button v-model="selectedButton" :value="2">Button 2</el-button>
    <el-button v-model="selectedButton" :value="3">Button 3</el-button>
    <el-button v-model="selectedButton" :value="4">Button 4</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedButton: null
    }
  }
}
</script>

2. 使用`:focus`和`:blur`绑定事件来控制失去焦点时不影响高亮，同时在样式中设置高亮效果：

<template>
  <div>
    <el-button v-model="selectedButton" :value="1" class="highlight" @focus="selectedButton = 1" @blur="$refs.button1.blur()">Button 1</el-button>
    <el-button v-model="selectedButton" :value="2" class="highlight" @focus="selectedButton = 2" @blur="$refs.button2.blur()">Button 2</el-button>
    <el-button v-model="selectedButton" :value="3" class="highlight" @focus="selectedButton = 3" @blur="$refs.button3.blur()">Button 3</el-button>
    <el-button v-model="selectedButton" :value="4" class="highlight" @focus="selectedButton = 4" @blur="$refs.button4.blur()">Button 4</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedButton: null
    }
  }
}
</script>

<style scoped>
.highlight {
  background-color: #f0f0f0;
}
</style>

3. 在失去焦点时使用`$refs`获取到对应的Button组件，并使用`blur()`方法将其失去焦点，从而防止失去焦点影响高亮效果。

这样就可以实现选择哪一个哪一个就高亮，失去焦点不影响高亮的效果了。