element ui 按钮失焦

在ElementUI中，要实现按钮组默认高亮，且点击其他地方不默认失焦，只有点击其他按钮时才变焦的效果，通常需要通过一些自定义的逻辑和样式控制来实现。以下是一些具体的实现方法和步骤：

1. 设置按钮组与按钮样式

首先，确保你的ElementUI按钮组（<el-button-group>）和按钮（<el-button>）已经被正确引入到你的Vue组件中。接着，你可以通过CSS来自定义按钮的样式，包括未选中、选中、鼠标悬浮等状态。

2. 使用Vue数据绑定控制按钮状态

你可以为每个按钮定义一个状态（如isActive），并在点击按钮时通过Vue的数据绑定来切换这个状态。例如，可以创建一个数组来跟踪哪个按钮是激活的，或者使用多个数据属性，每个对应一个按钮。

html复制代码

	<template>
	<el-button-group>
	<el-button :class="{'is-active': activeIndex === 0}" @click="handleButtonClick(0)">按钮1</el-button>
	<el-button :class="{'is-active': activeIndex === 1}" @click="handleButtonClick(1)">按钮2</el-button>
	<!-- 更多按钮 -->
	</el-button-group>
	</template>
	<script>
	export default {
	data() {
	return {
	activeIndex: 0, // 控制哪个按钮是激活的
	};
	},
	methods: {
	handleButtonClick(index) {
	this.activeIndex = index; // 切换激活的按钮
	},
	},
	};
	</script>
	<style>
	.is-active {
	/* 定义激活状态的样式 */
	background-color: #409EFF; /* ElementUI 蓝色主题的颜色 */
	color: #fff;
	}
	</style>

3. 阻止默认失焦行为

默认情况下，当按钮被点击后，如果用户点击了按钮组以外的区域，按钮的焦点会丢失，导致高亮状态消失。但根据你的需求，你需要阻止这种默认行为。然而，在ElementUI和HTML的标准行为中，按钮在点击后并不会像输入框那样保持焦点，所以这里的“失焦”概念可能更多地是指视觉上的高亮状态消失。

为了解决这个问题，你可以不直接处理焦点事件，而是通过点击事件来管理按钮的高亮状态。如上例所示，你已经通过Vue的数据绑定来控制了按钮的高亮状态，这样当用户点击其他区域时，只要没有触发改变activeIndex的逻辑，按钮的高亮状态就不会改变。

4. 优化体验

• 确保可访问性：虽然视觉上的高亮状态很重要，但也要确保你的应用对使用屏幕阅读器等辅助技术的用户友好。
• 键盘支持：如果用户通过键盘（如Tab键）导航到你的按钮组，确保他们能够通过空格键或Enter键来激活按钮，并且高亮状态能够正确反映当前选中的按钮。

通过上述方法，你可以实现ElementUI按钮组默认高亮，且点击其他地方不默认失焦，只有点击其他按钮时才变焦的效果。