joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:修改 button 和 word-card 样式

Browse Source
This commit is contained in:
R524809
2025-09-28 17:31:10 +08:00
parent 6acc5d676c
commit b892b5625a
17 changed files with 610 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/ui/button/README.md
+141
View File
@@ -0,0 +1,141 @@
# 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 类型支持
- 优化点击动效
- 改进扁平化模式
- 统一设计规范
miniprogram/ui/button/button.less
+98 -54
View File
@@ -1,6 +1,6 @@
@button-default-height: 86rpx;
@button-border-radius: 18rpx;
@button-default-font-size: 32rpx;
@button-default-height: 80rpx;
@button-border-radius: 16rpx;
@button-default-font-size: 30rpx;
@button-default-color: #fff;
wx-button:not([size=mini]) {
@@ -18,91 +18,109 @@ wx-button:not([size=mini]) {
border-radius: @button-border-radius;
font-size: @button-default-font-size;
color: @button-default-color;
padding: 0 44rpx;
font-weight: normal;
// width: auto !important;
// transition: all 0.04s;
padding: 0 48rpx;
font-weight: 600;
text-align: center;
cursor: pointer;
transition: all 0.15s ease-in-out;
border: none;
min-width: 240rpx;
&--primary {
background: rgba(255, 215, 25, 1);
box-shadow: 0px 10rpx 2rpx #DBB917;
background: #FFD719;
box-shadow: 0 4rpx 12rpx rgba(255, 215, 25, 0.3);
color: #141414;
&.disabled {
background: rgba(255, 215, 25, 0.5);
box-shadow: 0px 10rpx 2rpx rgba(219, 185, 23, 0.5);
background: #F5F5F5;
color: #CCCCCC;
box-shadow: none;
}
&.active {
transform: translateY(10rpx);
box-shadow: 0 0 0 rgba(219, 185, 23, 0.5);
/* 阴影效果 */
transform: scale(0.92);
box-shadow: 0 2rpx 6rpx rgba(255, 215, 25, 0.2);
animation: buttonPress 0.15s ease-in-out;
}
}
&--green {
background: #93d333;
box-shadow: 0px 10rpx 2rpx rgba(121, 185, 21, 1);
background: #93D333;
box-shadow: 0 4rpx 12rpx rgba(147, 211, 51, 0.3);
color: #FFFFFF;
&.disabled {
background: rgba(147, 211, 51, 0.5);
box-shadow: 0px 10rpx 2rpx rgba(121, 185, 21, 0.5);
background: #F5F5F5;
color: #CCCCCC;
box-shadow: none;
}
&.active {
transform: translateY(10rpx);
box-shadow: 0 0 0 rgba(121, 185, 21, 0.5);
/* 阴影效果 */
transform: scale(0.92);
box-shadow: 0 2rpx 6rpx rgba(147, 211, 51, 0.2);
animation: buttonPress 0.15s ease-in-out;
}
}
&--secondary {
background: #93D333;
box-shadow: 0 4rpx 12rpx rgba(147, 211, 51, 0.3);
color: #FFFFFF;
&.disabled {
background: #F5F5F5;
color: #CCCCCC;
box-shadow: none;
}
&.active {
transform: scale(0.92);
box-shadow: 0 2rpx 6rpx rgba(147, 211, 51, 0.2);
animation: buttonPress 0.15s ease-in-out;
}
}
&--white {
color: rgba(34, 36, 37, 0.9);
background: #fff;
box-shadow: 0 8rpx 0rpx rgba(223, 220, 220, 1);
border: 2rpx solid rgba(223, 220, 220, 1);
background: #FFFFFF;
border: 1rpx solid #E8E8E8;
color: #141414;
&.disabled {
color: rgba(34, 36, 37, 0.5);
background: rgba(255, 255, 255, 0.7);
box-shadow: 0px 8rpx 0rpx rgba(223, 220, 220, 0.9);
background: #F5F5F5;
color: #CCCCCC;
border-color: #E8E8E8;
}
&.plain {
color: #fff;
background: rgba(255, 255, 255, 0.2);
border: 2rpx solid rgba(255, 255, 255, 1);
box-shadow: 0px 8rpx 0rpx rgba(255, 255, 255, 0.88);
// &.disabled {
// background: rgba(255, 255, 255, 0.2);
// border: 1px solid rgba(255, 255, 255, 0.6);
// box-shadow: 0px 3px 0px rgba(255, 255, 255, 0.6);
// }
color: #FFFFFF;
background: transparent;
border: 1rpx solid #FFFFFF;
}
&.active {
transform: translateY(8rpx);
box-shadow: 0 0 0 rgba(223, 220, 220, 1);
/* 阴影效果 */
transform: scale(0.92);
background: #F8F8F8;
animation: buttonPress 0.15s ease-in-out;
}
}
&--flat {
box-shadow: none !important;
border: none;
transition: background 0.1s;
border: none !important;
transition: all 0.15s ease-in-out;
// 覆盖所有颜色变体
&.toy-button--primary,
&.toy-button--green,
&.toy-button--secondary,
&.toy-button--white {
box-shadow: none !important;
border: none !important;
&.active {
transform: none !important;
box-shadow: none !important;
transform: scale(0.92) !important;
animation: buttonPress 0.15s ease-in-out !important;
}
}
@@ -113,29 +131,55 @@ wx-button:not([size=mini]) {
box-shadow: none !important;
}
// 重置active变换
&.active {
transform: none !important;
}
// 彩色按钮active背景变化
&.toy-button--primary.active {
background: rgba(255, 215, 25, 0.7);
background: rgba(255, 215, 25, 0.8);
}
&.toy-button--green.active {
background: rgba(147, 211, 51, 0.7);
background: rgba(147, 211, 51, 0.8);
}
&.toy-button--secondary.active {
background: rgba(147, 211, 51, 0.8);
}
&.toy-button--white.active {
background: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.8);
}
}
.loading-class,
&__icon {
margin-right: 18rpx;
margin-right: 12rpx;
}
// 添加按钮点击动画类
&.button-press {
animation: buttonPress 0.15s ease-in-out;
}
}
// 按钮点击动画
@keyframes buttonPress {
0% {
transform: scale(1);
}
25% {
transform: scale(0.92);
}
50% {
transform: scale(0.98);
}
75% {
transform: scale(0.92);
}
100% {
transform: scale(1);
}
}
miniprogram/ui/button/button.ts
+1 -1
View File
@@ -8,7 +8,7 @@ Component({
properties: {
type: {
type: String,
value: 'default', // primary, green, white
value: 'default', // primary, green, secondary, white
},
openType: {
type: String,