element-ui button-group 源码分享

今日简单分享一下 button-group 组件，主要从两个方面来分享：

一、组件使用

1.1、使用及页面展示效果如下：

html 复制代码

<template>
    <div>
        <el-button-group>
            <el-button type="primary">primary</el-button>
            <el-button type="primary">primary</el-button>
            <el-button type="primary">primary</el-button>
        </el-button-group>
    </div>
</template>

二、实现逻辑

2.1 在源码找到定义 button-group 组件的文件，以及组件注册的位置，如下图所示：

2.2 在上图当中，我们看到针对于 button-group 组件，仅仅是一个容器组件，并未暴露方法事件。我们的关注点很容易在这个类名上 .el-button-group，通过全局搜索找到它的具体位置，如下图所示：

2.3 button.scss 这个样式文件是在哪里引入的，样式表中定义的样式又是怎么生效的呢？通过全局搜索 demo-styles 我们发现，它有被在全局文件中引入，如下图所示：

2.3 .group-button 的类名被定义在了 .demo-block.demo-button 这个类名里面，那么既然要想 group-button 组件样式生效，我们猜测组件可能会被写在 .demo-block.demo-button 这个类名包裹的标签内，带着这个猜测我们继续寻找线索：

猜测很美好，瞬间觉得自己的逻辑简直完美，去接杯水喝，回来准备大干一场。

接水途中转折点来了，我对刚刚的逻辑产生了一点点的质疑，于是，对自己发起了几个反问：

1、这个组件会有这么麻烦吗？

2、是不是还有其他方向呢？

3、万一是我的思路没有打开，进了一个思维陷进呢？

上面猜测先告一段落，先解决我的几个反问。首先我要找 button-group 组件的实现原理，其次我找到了源码具体位置，并且知道了解密源码的核心点是 el-button-group 这个类名，最后我的最终任务变成了找这个类名。那么要找到这个类名有几种途径呢？

方式一：全局搜索 .el-button-group 这个类名（先暂停）

方式二：在与之对应的样式文件表中查找，如下图：

方式三：在 button 样式表文件中查找，快速找到，如下图：

总结：

button-group 组件相对简单，只是一个包裹 button 按钮的容器。在研究过程中也曾遇到一些小插曲，针对小插入的一句话概述就是，猜测不全错，只不过它是用来控制 api 文档的样式，正如它的命名 demo-styles。