elementui 按钮组默认高亮点击其他地方不默认失焦只有点击其他按钮才变焦

桂秋拾貳.

已于 2022-09-26 11:50:12 修改

阅读量1.9k

点赞数 8

分类专栏：日常学习文章标签： elementui javascript ecmascript vue.js 前端

于 2022-08-20 18:08:42 首次发布

本文链接：https://blog.csdn.net/qq_58925458/article/details/126442695

版权

elementui 按钮组默认高亮点击其他地方不默认失焦只有点击其他按钮才变焦

本文章完全是记录自己记录的问题，如有雷同纯属巧合
我今天在做网页的时候遇到一个问题 就是使用 elementUI 的 按钮组组件的时候 点击其他地方按钮就失去焦点了，为了解决这个问题，我想到一种办法。

1. 思路

我的思路是：

1. 先从官网拿到按钮组组件
2. 然后所有按钮设置为朴素按钮
3. 然后如果想有默认选中的话，就将默认选中的按钮不是朴素按钮。
4. 点到某一个按钮的时候，将此按钮设置成选中状态（取消朴素按钮），将其他按钮变成朴素按钮

2. 上效果

请看完成效果

在这里插入图片描述

3. 实现

	<div id="demo">
        // 从官网复制组件 按钮组
        // 属性解释：
        // 	type: 为按钮类型，可以从官网获取不一样的类型。
        //	plain: 按钮是否为朴素按钮。 true为朴素按钮，false为非朴素按钮
        //	@click="btnGroup()  点击所触发的函数
        <el-button-group>
          <el-button type="primary" :plain="isPlainDefault " @click