el-button入门学习

自律最差的编程狗

已于 2022-05-16 15:55:07 修改

阅读量6.8k

点赞数 3

分类专栏： element-ui 文章标签：学习 elementui

于 2022-05-12 17:02:43 首次发布

原文链接：https://element.eleme.cn/#/zh-CN/component/button

版权

element-ui 专栏收录该内容

43 篇文章

订阅专栏

本文详细介绍了Element UI库中的各种按钮类型（primary, info, warning, danger, success）、形状（default, plain, round, circle），以及文本按钮、禁用状态、图标位置、按钮组、加载状态和不同尺寸的实现。通过实例展示了如何创建和定制美观且功能丰富的前端按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习内容
1.按钮颜色样式：primary,info,warning,danger,success
2.按钮形状样式：default,plain,round,circle
3.文本按钮：type=’text’
4.禁用按钮关键字 disabled
5.带图标的按钮右图标使用i标签+class,左图标使用icon属性设置
6.按钮组 el-button-group
7.加载按钮关键字 loading
8.按钮大小关键字 size
代码效果图
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id='app'>
        <!-- disabled或:disabled='true'为禁用按钮 -->
        <!-- 矩形按钮：默认 -->
        <el-row>
            <el-button>取消或搜索按钮</el-button>
            <el-button type='info'>详情按钮</el-button>
            <el-button type='primary'>确认按钮</el-button>
            <el-button type='warning'>修改按钮</el-button>
            <el-button type='danger' disabled>新增或删除按钮</el-button>
            <el-button type='success'>安全操作按钮</el-button>
        </el-row>
        <!-- 朴素按钮：plain -->
        <el-row>
            <el-button plain>取消按钮</el-button>
            <el-button type='info' plain>详情按钮</el-button>
            <el-button type='primary' plain>确认按钮</el-button>
            <el-button type='warning' plain>修改按钮</el-button>
            <el-button type='danger' plain disabled>新增或删除按钮</el-button>
            <el-button type='success' plain>安全操作按钮</el-button>
        </el-row>
        <!-- 椭圆按钮：round -->
        <el-row>
            <el-button round>取消按钮</el-button>
                <el-button type='info' round>详情按钮</el-button>
                <el-button type='primary' round>确认按钮</el-button>
                <el-button type='warning' round>修改按钮</el-button>
                <el-button type='danger' round :disabled='true'>新增或修改按钮</el-button>
                <el-button type='success' round>安全操作按钮</el-button>
        </el-row>
        <!-- 圆形图标按钮：circle+icon='el-icon-...' -->
        <el-row>
            <el-button icon='el-icon-search' circle></el-button>
            <el-button type='warning' icon='el-icon-edit' circle></el-button>
            <el-button type='info' icon='el-icon-message' circle></el-button>
            <el-button type='primary' icon='el-icon-check' circle></el-button>
            <el-button type='danger' icon='el-icon-delete' circle :disabled='false'></el-button>
            <el-button type='success' icon='el-icon-check' circle ></el-button>
        </el-row>
        <!-- 文字按钮：type:'text' -->
        <el-row>
            <el-button type='text'>文字按钮</el-button>
            <el-button type='text' :disabled='true'>文字按钮</el-button>
        </el-row>
        <!-- 图标文字组合按钮 -->
        <el-row>
            <el-button type='primary' icon='el-icon-edit'></el-button>
            <el-button type='primary' icon='el-icon-search'>搜索</el-button>
            <el-button type='primary'>上传<i class='el-icon-upload el-icon--right'></i></el-button>
        </el-row>
        <!-- 按钮组 el-button-group标签 -->
        <el-row>
            <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>
            <el-button-group>
                <el-button type='primary' icon='el-icon-edit'></el-button>
                <el-button type='primary' icon='el-icon-share'></el-button>
                <el-button type='primary' icon='el-icon-delete'></el-button>
            </el-button-group>
        </el-row>
        <!-- 加载按钮 :loading='true'-->
        <el-row>
            <el-button type='primary' :loading='true'>加载中</el-button>
        </el-row>
        <!-- 不同尺寸按钮 size='medium/small/mini' -->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button size='medium'>中等按钮</el-button>
            <el-button size='small'>小型按钮</el-button>
            <el-button size='mini'>超小按钮</el-button>
        </el-row>
    </div>
</body>
</html>
<script>
    let vm = new Vue({
        el:'#app'
    })
</script>
<style>
    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }
</style>

官网链接：elment-ui官网