今日简单分享一下 button-group 组件，主要从两个方面来分享：
一、 组件使用
1.1、使用及页面展示效果如下：
<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。
原文地址:https://blog.csdn.net/qq_37309987/article/details/135989000
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_67149.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
