Element el-button 按钮组件详解

今天药忘吃喽~ 2023-01-12 01:48 346阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 背景
 *  2. 按钮分类
 *  3. 按钮样式
 *  4. 按钮状态
 *  5. 按钮分组
 *  6. 按钮尺寸
 *  7. 小结

# 1. 背景 #

按钮是很常用的，Element的按钮功能还是比较全面的，本篇就来介绍下。

先看下各种按钮的效果图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]

# 2. 按钮分类 #

el-button按钮的分类基本是靠颜色区分的，另外还有一种文本按钮`type="text"`，文本按钮由于比较小，比较适合用于表格每行的操作栏部分。

按钮分类：
        <el-button>默认</el-button>
        <el-button type="primary">primary</el-button>
        <el-button type="success">success</el-button>
        <el-button type="info">info</el-button>
        <el-button type="warning">warning</el-button>
        <el-button type="danger">danger</el-button>
        <el-button type="text">text</el-button>

# 3. 按钮样式 #

Element提供了朴素按钮、圆角按钮、圆形按钮，需要注意的是圆形按钮一般只放一个图标进去，代码如下：

按钮样式：
        <el-button type="primary" plain>朴素按钮</el-button>
        <el-button type="primary" round>圆角按钮</el-button>
        <el-button type="primary" circle icon="el-icon-search"></el-button>

# 4. 按钮状态 #

按钮状态其实就是HTML标准的功能，通过disabled实现禁用即可。

按钮状态：
        <el-button type="primary">正常</el-button>
        <el-button type="primary" disabled>禁用</el-button>

# 5. 按钮分组 #

按钮分组很好用，像常见的分页按钮，分成一组的话更加好看，通过`<el-button-group>`将按钮包裹起来，即可实现。

按钮分组：
        <el-button-group>
          <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
          <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>

# 6. 按钮尺寸 #

饿了提供了默认、中、小、很小四种尺寸，代码如下：

按钮的尺寸：
        <el-button>默认</el-button>
        <el-button type="primary" size="medium ">medium</el-button>
        <el-button type="primary" size="small">small</el-button>
        <el-button type="primary" size="mini">mini</el-button>

# 7. 小结 #

el-button提供的功能已经比较完善了，拿来即可即可。注意不推荐自己定义style来修改默认样式，容易导致外观不统一。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/e2f53a5fb3f5412bb1607ee7f3bf9c50.png