---
title: 按钮
date: 2023-05-28 15:20:38
permalink: /pages/basics/button
article: false
---

## 按钮形状
> css 代码
```css
.cu-btn  默认　　
.cu-btn round  圆角
.cu-btn cuIcon  图标按钮
```

> 演示代码
```vue
<button class="cu-btn">默认</button>
<button class="cu-btn round">圆角</button>
<!-- 图标按钮 -->
<button class="cu-btn cuIcon">
    <text class="cuIcon-emojifill"></text>
</button>
```

## 按钮尺寸

> css 代码
```css
.cu-btn sm  小尺寸
.cu-btn  默认
.cu-btn lg  大尺寸
```

> 演示代码
```vue
<button class="cu-btn round sm">小尺寸</button>
<button class="cu-btn round">默认</button>
<button class="cu-btn round lg">大尺寸</button>
```

## 按钮颜色

> css 代码
```css
.bg-red 背景颜色 | .bg-...
.shadow 阴影
```

> 演示代码
```vue
<button class="cu-btn round bg-red shadow">按钮</button>
```

## 镂空按钮
`.bg-` 换成 `.line-`

```css
.lines-red|... 边框深（大）
.line-red|...  边框浅（小）
```

## 块状按钮

> css 代码
```css
.cu-btn lg
```

> 演示代码
```vue
<button class="cu-btn bg-grey lg">玄灰</button>
<button class="cu-btn bg-red margin-tb-sm lg">嫣红</button>
```

## 无效状态

加上 `disabled` 属性即可

> 演示代码
```vue
<button class="cu-btn block bg-blue margin-tb-sm lg" disabled type="">无效状态</button>
<button class="cu-btn block line-blue margin-tb-sm lg" disabled>无效状态</button>
```

## 按钮加图标
`button` 标签里加入**图标+文字**即可，需要加载状态，加上属性 `loading`

> 演示代码
```vue
<button class="cu-btn block line-orange lg">
    <text class="cuIcon-upload"></text> 图标
</button>
<button class="cu-btn block bg-blue margin-tb-sm lg">
    <text class="cuIcon-loading2 cuIconfont-spin"></text> 加载
</button>
<button class="cu-btn block bg-black margin-tb-sm lg" loading> 
    原生加载
</button>
```