nut-button 样式用法
时间: 2025-07-09 13:37:22 浏览: 19
### NutUI 中 `nut-button` 样式使用方法详解
#### 1. 基本用法
`nut-button` 是 NutUI 提供的一个基础按钮组件,支持多种类型和样式的配置。以下是一个基本的使用示例:
```vue
<template>
<view>
<nut-button type="primary">主要按钮</nut-button>
</view>
</template>
```
上述代码展示了如何创建一个主要类型的按钮[^1]。通过设置 `type` 属性为 `"primary"`,可以定义按钮的主要样式。
#### 2. 按钮类型
`nut-button` 支持多种按钮类型,包括但不限于以下几种:
- **主要按钮**:`type="primary"`
- **次要按钮**:`type="default"`
- **警告按钮**:`type="danger"`
- **文本按钮**:`type="text"`
示例如下:
```vue
<template>
<view>
<nut-button type="primary">主要按钮</nut-button>
<nut-button type="default">次要按钮</nut-button>
<nut-button type="danger">警告按钮</nut-button>
<nut-button type="text">文本按钮</nut-button>
</view>
</template>
```
每种类型的按钮都有其预定义的样式[^1]。
#### 3. 按钮尺寸
`nut-button` 支持调整按钮的尺寸,可以通过 `size` 属性来控制。支持的值包括 `"large"`、`"normal"` 和 `"small"`。
示例如下:
```vue
<template>
<view>
<nut-button type="primary" size="large">大号按钮</nut-button>
<nut-button type="primary" size="normal">普通按钮</nut-button>
<nut-button type="primary" size="small">小号按钮</nut-button>
</view>
</template>
```
通过设置不同的 `size` 属性,可以灵活调整按钮的大小[^1]。
#### 4. 按钮状态
`nut-button` 还支持禁用状态,通过设置 `disabled` 属性为 `true`,可以使按钮处于不可点击状态。
示例如下:
```vue
<template>
<view>
<nut-button type="primary" disabled>禁用按钮</nut-button>
</view>
</template>
```
当 `disabled` 属性被设置为 `true` 时,按钮将呈现灰色且无法点击。
#### 5. 自定义样式
如果需要进一步自定义按钮的样式,可以通过 `class` 或 `style` 属性进行扩展。例如:
```vue
<template>
<view>
<nut-button type="primary" class="custom-class">自定义样式按钮</nut-button>
</view>
</template>
<style>
.custom-class {
border-radius: 20px;
font-size: 16px;
}
</style>
```
通过添加自定义类名或内联样式,可以实现更丰富的视觉效果[^3]。
#### 6. 图标按钮
`nut-button` 支持在按钮中添加图标,可以通过 `icon` 属性指定图标名称。
示例如下:
```vue
<template>
<view>
<nut-button type="primary" icon="add">添加</nut-button>
</view>
</template>
```
此功能依赖于 NutUI 的图标库 `@nutui/icons-vue`,确保已正确安装并引入[^3]。
---
### 注意事项
- 在使用 `nut-button` 时,需确保已正确安装并引入 NutUI 组件库。
- 如果需要使用图标功能,请确认已安装对应的图标库 `@nutui/icons-vue`。
---
阅读全文
相关推荐



















