el-button源码解析

基础用法

<el-button type="primary">默认按钮</el-button>

禁用状态

设置disabled属性

<el-button type="primary" disabled>按钮</el-button>

源码中是添加了is-disabled这个类明

这个类名最终被编译为以下的css代码在源码中对应了下面这段scss代码

源码位置 packages/theme-chalk/src/button.scss

其中文字按钮和按钮大小都是通过，设置不同类名来实现的

图标按钮

加载中

可以看到如果是加载中，并且设置图标，只会显示加载中的图标

按钮组

可以看到按钮组就是一个添加了slot的容器，可以在里面设置任何想要的内容