(转载)vue开发实例之按钮的使用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
感谢大佬的分享,该博客转自于网友博客
原地址是:该网友博客地址

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue的按钮组件？

按钮这在web开发中是非常常见的，上一节中也用到了按钮，这里就开看看element按钮的一些使用方式。

按钮使用语法：

<el-button>按钮名称</el-button>
可以使用type、plain、round和circle属性来定义 Button 的样式

二、使用步骤

1、使用type定义样式

type可以分为：primary、success、info、warning、danger
设定不同的type将会显示不同的颜色，如果type没有设定，或者设定的值不是这5个里面的，则会是默认没有颜色的按钮。

在Main.vue中编写代码
代码如下（示例）：

<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>
————————————————
版权声明：本文为CSDN博主「编程界明世隐」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/dkm123456/article/details/124211130

2、使用plain定义样式

plain是一种使用简单的纯色样式，使用时候，只要加上这个属性即可，默认就是true
我个人不太喜欢用这种，还是上一种我更喜欢，也就是不加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定义样式

circle属性就是让按钮显示为圆形，加入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>

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

但是项目中，很显然这种图标不是我们需要的，就一个字，我哪里知道是什么意思呢，于是我们想到是不是可以用图标来代替，图标我们还是很容易看懂它表示的意思，修改如下：

加入图标 class=“el-icon-XXX”
删除按钮名称

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、按钮禁用

给按钮加上disabled属性即可，加上以后颜色也不一样了，鼠标移上去会显示不可用

<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、文字按钮

讲type设置为text： type=“text”

 <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、加载中

只要设置loading属性为true即可。
常用于搜索的时候，搜索完成后设置 loading为false，用vue很好控制

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

此博客内容是转载一位大佬的博客 大伙有兴趣的可以去看看