R524809
142 lines
4.3 KiB
Markdown
142 lines
4.3 KiB
Markdown
# Toy Button 组件
|
|
|
|
基于涂鸦丫设计规范的按钮组件，与 doodle-ui 中的按钮样式保持一致。
|
|
|
|
## 功能特性
|
|
|
|
- ✅ 多种按钮类型：primary、secondary、green、white
|
|
- ✅ 丰富的状态：正常、禁用、加载中
|
|
- ✅ 扁平化模式支持
|
|
- ✅ 图标支持
|
|
- ✅ 自定义尺寸
|
|
- ✅ 流畅的点击动效
|
|
- ✅ 与 doodle-ui 样式完全一致
|
|
|
|
## 使用方法
|
|
|
|
### 基础用法
|
|
|
|
```xml
|
|
<!-- 主要按钮 -->
|
|
<toy-button type="primary" bind:click="onClick">主要按钮</toy-button>
|
|
|
|
<!-- 次要按钮 -->
|
|
<toy-button type="secondary" bind:click="onClick">次要按钮</toy-button>
|
|
|
|
<!-- 绿色按钮 -->
|
|
<toy-button type="green" bind:click="onClick">绿色按钮</toy-button>
|
|
|
|
<!-- 白色按钮 -->
|
|
<toy-button type="white" bind:click="onClick">白色按钮</toy-button>
|
|
```
|
|
|
|
### 按钮状态
|
|
|
|
```xml
|
|
<!-- 禁用状态 -->
|
|
<toy-button type="primary" disabled>禁用按钮</toy-button>
|
|
|
|
<!-- 加载状态 -->
|
|
<toy-button type="primary" loading>加载中</toy-button>
|
|
|
|
<!-- 扁平化模式 -->
|
|
<toy-button type="primary" flat>扁平按钮</toy-button>
|
|
```
|
|
|
|
### 带图标按钮
|
|
|
|
```xml
|
|
<!-- 带图标 -->
|
|
<toy-button type="primary" icon="add">添加</toy-button>
|
|
|
|
<!-- 自定义图标颜色 -->
|
|
<toy-button type="white" icon="edit" icon-color="#FFD719">编辑</toy-button>
|
|
```
|
|
|
|
### 自定义尺寸
|
|
|
|
```xml
|
|
<!-- 自定义宽度 -->
|
|
<toy-button type="primary" width="300rpx">自定义宽度</toy-button>
|
|
|
|
<!-- 自定义高度 -->
|
|
<toy-button type="primary" height="100rpx">自定义高度</toy-button>
|
|
```
|
|
|
|
## 属性说明
|
|
|
|
| 属性 | 类型 | 默认值 | 说明 |
|
|
| --------------- | ------- | ---------- | ------------------------------------------ |
|
|
| type | String | 'default' | 按钮类型：primary、secondary、green、white |
|
|
| disabled | Boolean | false | 是否禁用 |
|
|
| loading | Boolean | false | 是否显示加载状态 |
|
|
| flat | Boolean | false | 是否扁平化模式 |
|
|
| plain | Boolean | false | 是否朴素模式（仅white类型有效） |
|
|
| width | String | '' | 按钮宽度 |
|
|
| height | String | '' | 按钮高度 |
|
|
| icon | String | '' | 图标名称 |
|
|
| iconColor | String | '#ffffff' | 图标颜色 |
|
|
| iconSize | String | '44rpx' | 图标大小 |
|
|
| iconClassPrefix | String | 'toy-icon' | 图标类名前缀 |
|
|
|
|
## 事件说明
|
|
|
|
| 事件名 | 说明 | 回调参数 |
|
|
| ------ | -------------- | -------- |
|
|
| click | 点击按钮时触发 | event |
|
|
|
|
## 样式说明
|
|
|
|
### 按钮类型
|
|
|
|
- **primary**: 黄色背景 (#FFD719)，深色文字 (#141414)
|
|
- **secondary**: 绿色背景 (#93D333)，白色文字
|
|
- **green**: 绿色背景 (#93D333)，白色文字（与secondary相同）
|
|
- **white**: 白色背景，深色文字，带边框
|
|
|
|
### 点击动效
|
|
|
|
- 所有按钮都支持 `scale(0.95)` 的点击缩放效果
|
|
- 扁平化模式下有背景色变化效果
|
|
- 动效持续时间为 150ms
|
|
|
|
### 禁用状态
|
|
|
|
- 背景色变为浅灰色 (#F5F5F5)
|
|
- 文字颜色变为浅灰色 (#CCCCCC)
|
|
- 移除阴影效果
|
|
|
|
## 设计规范
|
|
|
|
本组件完全遵循 doodle-ui 的设计规范：
|
|
|
|
- 圆角：24rpx (对应 doodle-ui 的 12px)
|
|
- 字体大小：48rpx (对应 doodle-ui 的 24px)
|
|
- 字体粗细：600
|
|
- 内边距：0 48rpx
|
|
- 最小宽度：240rpx
|
|
- 过渡动画：0.15s ease-in-out
|
|
- 点击动效：抖动缩放动画
|
|
|
|
## 测试页面
|
|
|
|
可以通过访问 `pages/buttonTest/buttonTest` 页面查看所有按钮类型的效果。
|
|
|
|
## 更新日志
|
|
|
|
### v2.1.0
|
|
|
|
- 修复圆角大小，与 doodle-ui 保持一致 (24rpx)
|
|
- 修复字体大小，与 doodle-ui 保持一致 (48rpx)
|
|
- 修复点击抖动效果，移除 wxs 中的 setTimeout
|
|
- 优化按钮动画，使用纯 CSS 实现抖动效果
|
|
- 改进所有按钮类型的点击反馈
|
|
|
|
### v2.0.0
|
|
|
|
- 完全重构样式，与 doodle-ui 保持一致
|
|
- 添加 secondary 类型支持
|
|
- 优化点击动效
|
|
- 改进扁平化模式
|
|
- 统一设计规范
|