Vue组件库 View UI 来看看这80种奇奇怪怪的按钮

Bertha 。 2023-10-04 10:51 5阅读 0赞

> 80种奇奇怪怪的按钮，先睹为快！
> 
> 本文详细讲解 View UI 中，Button 组件的样式配置和单击事件响应。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70][]

--------------------

**目录**

一、按钮样式

1.1 颜色

1.2 大小

1.3 按钮形状

1.4 背景透明

1.5 按钮图标

1.6 其他样式

二、 按钮事件

2.1 按钮传值

2.1.1 无传输值单击事件

2.1.2 传输静态参数

2.1.3 传递动态参数

2.1.4 循环渲染传参

2.2 按钮跳转

--------------------

**[如果你还没配置好 View UI 的开发环境，赶紧点击这里查看教程啦！][View UI]**

--------------------

## 一、按钮样式 ##

### 1.1 颜色 ###

颜色是按钮的基础样式之一，**通过设置Button 的 type属性，可以实现按钮颜色的变化**。

目前View UI支持以下八种颜色，分别为：

**primary、dashed、text、info、success、warning、error**

分别对应下图八种颜色

![20210415132130141.png][]

配置方法很简单，就是给 Button 组件，加一个 type 属性即可

### 1.2 大小 ###

大小也是按钮的基础样式之一，**通过设置Button 的 size 属性，可以实现按钮大小的变化**。

目前View UI支持以下三种大小，分别为：

small、default、large

![20210415144130533.png][]

配置代码如下所示：

### 1.3 按钮形状 ###

圆角决定了这个按钮的四个边缘是否光滑。

在实际开发中，通常会设置圆角，让界面更有美感。

目前View UI只支持圆角这一种形状

通过**设置 Button 组件的 shape 属性**，实现圆角。

![20210415144701964.png][]

### 1.4 背景透明 ###

背景透明在 View UI 中又称为 幽灵属性。

下图设置了背景透明，可以透过按钮看到淡蓝色的背景。

通过**设置 Button 组件的 ghost 属性 = true**，实现背景透明。

![20210415145011282.png][]

### 1.5 按钮图标 ###

按钮的文字前面或后面可以放置图标，从而让按钮的功能更加通俗易懂。

View UI 自带了很多ICON图标，一般情况下可以满足我们的开发需求。

**可以使用 Button 组件的 icon属性，为按钮设置前置图标**。

也可以通过在 Button 组件内，放置 Icon 组件，来实现按钮的前置、后置图标，**但优先级小于 Button 组件配置的icon属性**。

演示效果如下所示：

![2021041514580891.png][]

源代码如下所示：

### 1.6 其他样式 ###

View UI 还支持其他的样式配置，因为不太常用，所以不再一一演示。

比如：

long 属性项，用于配置按钮宽度是否扩充至全屏

disabled 属性项，用于配置按钮是否被禁用，即无法被点击的样式

loading属性项，用于配置按钮是否显示加载中图标

html-type 属性项，用于兼容原生H5的提交属性

......

--------------------

本文作者：郑为中

CSDN原文地址： **[https://zwz99.blog.csdn.net/article/details/115720476][https_zwz99.blog.csdn.net_article_details_115720476]**

--------------------

## 二、 按钮事件 ##

### 2.1 按钮传值 ###

按钮，顾名思义就是按了之后能够扭动起来（就是能干事）。

我认为按钮在前端的作用，就是让C端用户主动去触发某个事件，完成人机交互。

其中很重要的一点，就是按钮点击传值问题，View UI 的按钮能不能传值？ 方不方便？

答案当然是 —— 能！

View UI 的 Button 组件 **可通过 @click 配置该按钮的单击事件**！

我分为四种情况，逐一测试

![20210415151934635.png][]

#### 2.1.1 无传输值单击事件 ####

按钮的单击事件，**如果没有传参数，View UI 的 Button 组件会返回一个窗体对象**，密密麻麻，包括点击的坐标值，屏幕宽高等等......

其实......这些东西对你来说，一点都没用。

对，你没听错！ 一点都没用！一点都没用！一点都没用！

那么**则么让他有用起来呢？就需要传值！**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 1][]

#### 2.1.2 传输静态参数 ####

在实际开发中，可能会遇到**按钮需要传参**的需求。

有一些的按钮是固定的，你点了他，就代表XXX的固定功能，那么可以考虑静态传参

传递参数后，在单击事件中打印即可，效果如下图所示：

![20210415152822205.png][]

#### 2.1.3 传递动态参数 ####

很多情况下，需要**根据实际情况传递动态的参数**值。

<Col span="6">
      <Button type="warning"  shape="circle" @click="clickTest(testData)">传输动态内容</Button>
    </Col>

比如这个testData，是我自己定义的一个变量。

这样就可以实现 Button 组件的动态传参。

![20210415153144358.png][]

#### 2.1.4 循环渲染传参 ####

我在实际开发中，用的最多的就是 **v-for 下按钮传值**。

![20210415154946602.png][]

比如下面这样

<Row :gutter="32">
      <Col span="6" v-for="(item,index) in userList" :key="index">
        <Button type="warning"  shape="circle" @click="clickTest(item)">循环渲染传值{
       {index}}</Button>
      </Col>
    </Row>

**userList 一般为后端传递过来的对象数组**

**我们需要给按钮的单击事件，传递数组中当前对象的，一个或多个属性值**

这样就可以给按钮单击事件，传递相应的值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 2][]

### 2.2 按钮跳转 ###

**有时会需要单击按钮打开某个网址**。

比如C端用户单击按钮后，导出Excel（对接Java POI），就要访问后端 API 的 URL，实现快速导出Excel。

当然可以使用 JS 自带的方法来打开网址

test() {
      window.open("https://blog.csdn.net/qq_41464123","_blank");
    },

**View UI 也为我们提供了快速跳转 URL 的方法**，在 button 组件中，配置 to 属性即可。

View UI 还可以实现无痕浏览，满足开发者的多维需求。

![20210415160032237.png][]

<Row :gutter="32">
      <Col span="6">
        <Button to="https://blog.csdn.net/qq_41464123" type="warning"  shape="circle">我的博客</Button>
      </Col>
      <Col span="6">
        <Button to="https://blog.csdn.net/qq_41464123" type="warning"  shape="circle" replace>无痕浏览</Button>
      </Col>
      <Col span="6">
        <Button to="https://blog.csdn.net/qq_41464123" type="warning"  shape="circle" target="_blank">新标签访问</Button>
      </Col>
    </Row>

**以上就是 View UI 的 Button 组件 常用的功能配置。**

--------------------

**附：事件完整代码**

<template>
      <div class="hello">
        <Divider> ZWZ普通传值 </Divider>
        <Row :gutter="32">
          <Col span="6">
            <Button type="warning"  shape="circle" @click="clickTest">无传输值</Button>
          </Col>
          <Col span="6">
            <Button type="warning"  shape="circle" @click="clickTest(3.14159)">传输数字</Button>
          </Col>
          <Col span="6">
            <Button type="warning"  shape="circle" @click="clickTest(testData)">传输动态内容</Button>
          </Col>
        </Row>
        <Divider> ZWZ循环渲染 </Divider>
        <Row :gutter="32">
          <Col span="6" v-for="(item,index) in userList" :key="index">
            <Button type="warning"  shape="circle" @click="clickTest(item)">循环渲染传值{
       {index}}</Button>
          </Col>
        </Row>
        <Divider> ZWZ测试结束 </Divider>
      </div>
    </template>
    
    <script>
    export default {
      name: 'test',
      data() {
        return {
          testData: '传输值',
          userList: [
            {id: 1,name: 'ZWZ1'},
            {id: 2,name: 'ZWZ2'},
            {id: 3,name: 'ZWZ3'}
          ]
        }
      },
      methods: {
        clickTest(e) {
          console.log(e);
        }
      }
    }
    </script>
    
    <style scoped>
    .hello {
      background-color: rgb(224, 249, 250);
    }
    </style>

**附：样式完整Vue代码**

<template>
      <div class="hello">
        <Divider> 基础按钮 </Divider>
        <Row :gutter="32">
          <Col span="2">
            <Button>按钮01</Button>
          </Col>
          <Col span="2">
            <Button type="primary">按钮02</Button>
          </Col>
          <Col span="2">
            <Button type="dashed">按钮03</Button>
          </Col>
          <Col span="2">
            <Button type="text">按钮04</Button>
          </Col>
          <Col span="2">
            <Button type="info">按钮05</Button>
          </Col>
          <Col span="2">
            <Button type="success">按钮06</Button>
          </Col>
          <Col span="2">
            <Button type="warning">按钮07</Button>
          </Col>
          <Col span="2">
            <Button type="error">按钮08</Button>
          </Col>
        </Row>
        <Divider> 幽灵按钮 </Divider>
        <Row :gutter="32">
          <Col span="2">
            <Button ghost>按钮11</Button>
          </Col>
          <Col span="2">
            <Button type="primary" ghost>按钮12</Button>
          </Col>
          <Col span="2">
            <Button type="dashed" ghost>按钮13</Button>
          </Col>
          <Col span="2">
            <Button type="text" ghost>按钮14</Button>
          </Col>
          <Col span="2">
            <Button type="info" ghost>按钮15</Button>
          </Col>
          <Col span="2">
            <Button type="success" ghost>按钮16</Button>
          </Col>
          <Col span="2">
            <Button type="warning" ghost>按钮17</Button>
          </Col>
          <Col span="2">
            <Button type="error" ghost>按钮18</Button>
          </Col>
        </Row>
        <Divider> 圆角按钮 </Divider>
        <Row :gutter="32">
          <Col span="2">
            <Button shape="circle">按钮21</Button>
          </Col>
          <Col span="2">
            <Button type="primary" shape="circle">按钮22</Button>
          </Col>
          <Col span="2">
            <Button type="dashed" shape="circle">按钮23</Button>
          </Col>
          <Col span="2">
            <Button type="text" shape="circle">按钮24</Button>
          </Col>
          <Col span="2">
            <Button type="info" shape="circle">按钮25</Button>
          </Col>
          <Col span="2">
            <Button type="success" shape="circle">按钮26</Button>
          </Col>
          <Col span="2">
            <Button type="warning" shape="circle">按钮27</Button>
          </Col>
          <Col span="2">
            <Button type="error" shape="circle">按钮28</Button>
          </Col>
        </Row>
        <Divider> 带图标圆角按钮 </Divider>
        <Row :gutter="32">
          <Col span="2">
            <Button shape="circle" icon="ios-wifi">按钮31</Button>
          </Col>
          <Col span="2">
            <Button type="primary" shape="circle" icon="ios-wifi">按钮32</Button>
          </Col>
          <Col span="2">
            <Button type="dashed" shape="circle" icon="ios-wifi">按钮33</Button>
          </Col>
          <Col span="2">
            <Button type="text" shape="circle" icon="ios-wifi">按钮34</Button>
          </Col>
          <Col span="2">
            <Button type="info" shape="circle" icon="ios-wifi">按钮35</Button>
          </Col>
          <Col span="2">
            <Button type="success" shape="circle" icon="ios-wifi">按钮36</Button>
          </Col>
          <Col span="2">
            <Button type="warning" shape="circle" icon="ios-wifi">按钮37</Button>
          </Col>
          <Col span="2">
            <Button type="error" shape="circle" icon="ios-wifi">按钮38</Button>
          </Col>
        </Row>
        <Divider> 纯图标圆角按钮 </Divider>
        <Row :gutter="32">
          <Col span="2">
            <Button shape="circle" icon="ios-wifi"></Button>
          </Col>
          <Col span="2">
            <Button type="primary" shape="circle" icon="ios-wifi"></Button>
          </Col>
          <Col span="2">
            <Button type="dashed" shape="circle" icon="ios-wifi"></Button>
          </Col>
          <Col span="2">
            <Button type="text" shape="circle" icon="ios-wifi"></Button>
          </Col>
          <Col span="2">
            <Button type="info" shape="circle" icon="ios-wifi"></Button>
          </Col>
          <Col span="2">
            <Button type="success" shape="circle" icon="ios-wifi"></Button>
          </Col>
          <Col span="2">
            <Button type="warning" shape="circle" icon="ios-wifi"></Button>
          </Col>
          <Col span="2">
            <Button type="error" shape="circle" icon="ios-wifi"></Button>
          </Col>
        </Row>
        <Divider> 大尺寸圆角按钮 </Divider>
        <Row :gutter="32">
          <Col span="2">
            <Button shape="circle" icon="ios-wifi" size="large">按钮51</Button>
          </Col>
          <Col span="2">
            <Button type="primary" shape="circle" icon="ios-wifi" size="large">按钮52</Button>
          </Col>
          <Col span="2">
            <Button type="dashed" shape="circle" icon="ios-wifi" size="large">按钮53</Button>
          </Col>
          <Col span="2">
            <Button type="text" shape="circle" icon="ios-wifi" size="large">按钮54</Button>
          </Col>
          <Col span="2">
            <Button type="info" shape="circle" icon="ios-wifi" size="large">按钮55</Button>
          </Col>
          <Col span="2">
            <Button type="success" shape="circle" icon="ios-wifi" size="large">按钮56</Button>
          </Col>
          <Col span="2">
            <Button type="warning" shape="circle" icon="ios-wifi" size="large">按钮57</Button>
          </Col>
          <Col span="2">
            <Button type="error" shape="circle" icon="ios-wifi" size="large">按钮58</Button>
          </Col>
        </Row>
        <Divider> 拉长型圆角按钮 </Divider>
        <Row :gutter="32">
          <Col span="2">
            <Button shape="circle" icon="ios-wifi" size="large" long>按钮61</Button>
          </Col>
          <Col span="2">
            <Button type="primary" shape="circle" icon="ios-wifi" size="large" long>按钮62</Button>
          </Col>
          <Col span="2">
            <Button type="dashed" shape="circle" icon="ios-wifi" size="large" long>按钮63</Button>
          </Col>
          <Col span="2">
            <Button type="text" shape="circle" icon="ios-wifi" size="large" long>按钮64</Button>
          </Col>
          <Col span="2">
            <Button type="info" shape="circle" icon="ios-wifi" size="large" long>按钮65</Button>
          </Col>
          <Col span="2">
            <Button type="success" shape="circle" icon="ios-wifi" size="large" long>按钮66</Button>
          </Col>
          <Col span="2">
            <Button type="warning" shape="circle" icon="ios-wifi" size="large" long>按钮67</Button>
          </Col>
          <Col span="2">
            <Button type="error" shape="circle" icon="ios-wifi" size="large" long>按钮68</Button>
          </Col>
        </Row>
        <Divider> 加载按钮 </Divider>
        <Row :gutter="32">
          <Col span="2">
            <Button shape="circle" icon="ios-wifi" size="large" loading>按钮71</Button>
          </Col>
          <Col span="2">
            <Button type="primary" shape="circle" icon="ios-wifi" size="large" loading>按钮72</Button>
          </Col>
          <Col span="2">
            <Button type="dashed" shape="circle" icon="ios-wifi" size="large" loading>按钮73</Button>
          </Col>
          <Col span="2">
            <Button type="text" shape="circle" icon="ios-wifi" size="large" loading>按钮74</Button>
          </Col>
          <Col span="2">
            <Button type="info" shape="circle" icon="ios-wifi" size="large" loading>按钮75</Button>
          </Col>
          <Col span="2">
            <Button type="success" shape="circle" icon="ios-wifi" size="large" loading>按钮76</Button>
          </Col>
          <Col span="2">
            <Button type="warning" shape="circle" icon="ios-wifi" size="large" loading>按钮77</Button>
          </Col>
          <Col span="2">
            <Button type="error" shape="circle" icon="ios-wifi" size="large" loading>按钮78</Button>
          </Col>
        </Row>
        <Divider> 禁用按钮 </Divider>
        <Row :gutter="32">
          <Col span="2">
            <Button shape="circle" icon="ios-wifi" size="large" disabled>按钮81</Button>
          </Col>
          <Col span="2">
            <Button type="primary" shape="circle" icon="ios-wifi" size="large" disabled>按钮82</Button>
          </Col>
          <Col span="2">
            <Button type="dashed" shape="circle" icon="ios-wifi" size="large" disabled>按钮83</Button>
          </Col>
          <Col span="2">
            <Button type="text" shape="circle" icon="ios-wifi" size="large" disabled>按钮84</Button>
          </Col>
          <Col span="2">
            <Button type="info" shape="circle" icon="ios-wifi" size="large" disabled>按钮85</Button>
          </Col>
          <Col span="2">
            <Button type="success" shape="circle" icon="ios-wifi" size="large" disabled>按钮86</Button>
          </Col>
          <Col span="2">
            <Button type="warning" shape="circle" icon="ios-wifi" size="large" disabled>按钮87</Button>
          </Col>
          <Col span="2">
            <Button type="error" shape="circle" icon="ios-wifi" size="large" disabled>按钮88</Button>
          </Col>
        </Row>
        <Divider> 按钮组合 </Divider>
        <Row :gutter="32">
          <Col span="4">
            <ButtonGroup>
              <Button shape="circle" icon="ios-wifi" size="large">按钮91-1</Button>
              <Button type="primary" shape="circle" icon="ios-wifi" size="large">按钮91-2</Button>
            </ButtonGroup>
          </Col>
          <Col span="8">
            <ButtonGroup size="large">
              <Button type="dashed" shape="circle" icon="ios-wifi" size="large">按钮92-1</Button>
              <Button type="text" shape="circle" icon="ios-wifi" size="large">按钮92-2</Button>
              <Button type="info" shape="circle" icon="ios-wifi" size="large">按钮92-3</Button>
              <Button type="success" shape="circle" icon="ios-wifi" size="large">按钮92-4</Button>
            </ButtonGroup>
          </Col>
          <Col span="4">
            <ButtonGroup>
              <Button type="warning" shape="circle" icon="ios-wifi" size="large">按钮93-1</Button>
              <Button type="error" shape="circle" icon="ios-wifi" size="large">按钮93-2</Button>
            </ButtonGroup>
          </Col>
        </Row>
      </div>
    </template>
    
    <script>
    export default {
      name: 'test',
    }
    </script>
    
    <style scoped>
    .hello {
      background-color: rgb(224, 249, 250);
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210415115558560.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz,size_16,color_FFFFFF,t_70
[View UI]: https://blog.csdn.net/qq_41464123/article/details/115490056
[20210415132130141.png]: https://img-blog.csdnimg.cn/20210415132130141.png
[20210415144130533.png]: https://img-blog.csdnimg.cn/20210415144130533.png
[20210415144701964.png]: https://img-blog.csdnimg.cn/20210415144701964.png
[20210415145011282.png]: https://img-blog.csdnimg.cn/20210415145011282.png
[2021041514580891.png]: https://img-blog.csdnimg.cn/2021041514580891.png
[https_zwz99.blog.csdn.net_article_details_115720476]: https://zwz99.blog.csdn.net/article/details/115720476
[20210415151934635.png]: https://img-blog.csdnimg.cn/20210415151934635.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210415152256301.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz,size_16,color_FFFFFF,t_70
[20210415152822205.png]: https://img-blog.csdnimg.cn/20210415152822205.png
[20210415153144358.png]: https://img-blog.csdnimg.cn/20210415153144358.png
[20210415154946602.png]: https://img-blog.csdnimg.cn/20210415154946602.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210415155039724.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz,size_16,color_FFFFFF,t_70
[20210415160032237.png]: https://img-blog.csdnimg.cn/20210415160032237.png