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>