作者简介

引言

导航

✪  Vue开发实例目录总索引
◄ 上一篇【08】Icon图标的使用
► 下一篇【10】Link 文字链接

概述

按钮使用语法：

在Main.vue中编写代码

1、使用type定义样式

<template>
    <div>
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>
    </div>
</template>

2、使用plain定义样式

 <el-row>
    <el-button plain>纯色按钮</el-button>
    <el-button type="primary" plain>主要按钮</el-button>
    <el-button type="success" plain>成功按钮</el-button>
    <el-button type="info" plain>信息按钮</el-button>
    <el-button type="warning" plain>警告按钮</el-button>
    <el-button type="danger" plain>危险按钮</el-button>
</el-row>

3、使用round定义样式

<el-row>
   <el-button round>圆角按钮</el-button>
    <el-button type="primary" round>主要按钮</el-button>
    <el-button type="success" round>成功按钮</el-button>
    <el-button type="info" round>信息按钮</el-button>
    <el-button type="warning" round>警告按钮</el-button>
    <el-button type="danger" round>危险按钮</el-button>
</el-row>

4、使用circle定义样式

 <el-row>
    <el-button circle>圆形按钮-文字</el-button>
    <el-button type="primary" circle>主要按钮</el-button>
    <el-button type="success" circle>成功按钮</el-button>
    <el-button type="info" circle>信息按钮</el-button>
    <el-button type="warning" circle>警告按钮</el-button>
    <el-button type="danger" circle>危险按钮</el-button>
</el-row>

虽然实现了圆形按钮，但是我们发现这个圆形，不太圆，是因为文字太多导致比较长，于是我把最后一个按钮的名字“危险按钮”改成“危”，按钮确实变圆了。

5、带图标和文字的按钮

<el-row>
   <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 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>

6、按钮禁用

<el-row>
  <el-button type="primary" disabled>主要按钮</el-button>
  <el-button type="primary" plain disabled>主要按钮</el-button>
  <el-button type="primary" circle disabled>主要按钮</el-button>
  <el-button type="primary" icon="el-icon-delete" disabled></el-button>
  <el-button type="primary" icon="el-icon-search" disabled>搜索</el-button>
</el-row>

7、文字按钮

 <el-row>
    <el-button type="text" >主要按钮1</el-button>
    <el-button type="text" plain >主要按钮2</el-button>
    <el-button type="text" circle >主要按钮3</el-button>
    <el-button type="text" icon="el-icon-delete" disabled></el-button>
    <el-button type="text" icon="el-icon-search" disabled>搜索</el-button>
</el-row>

8、按钮组

 <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-row>

9、加载中

<el-row>
    <el-button type="primary" :loading="true">加载中</el-button>
</el-row>

小结

这节总结了“按钮的使用”，希望能对大家有所帮助，请各位小伙伴帮忙 【点赞】+【收藏】+ 【评论区打卡】， 如果有兴趣跟小明哥一起学习Java的，【关注一波】不迷路哦。
请到文章下方帮忙【一键三连】谢谢哈！

导航

✪  Vue开发实例目录总索引
◄ 上一篇【08】Icon图标的使用
► 下一篇【10】Link 文字链接

热门专栏推荐

【1】Java小游戏（俄罗斯方块、植物大战僵尸等）
【2】JavaWeb项目实战（图书管理、宿舍管理等）
【3】JavaScript精彩实例（飞机大战、验证码等）
【4】Java小白入门200例
【5】从零学Java、趣学Java
【6】IDEA从零到精通