el-button入门学习

作者：你好赵伟 | 2024-02-18 07:36:16

踩

el-button

学习内容
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

官网链接：elment-ui官网

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/106157