Toy Button 组件

基于涂鸦丫设计规范的按钮组件，当前视觉参考 stitch-ui/letterTracing/code.html 中底部“分享 / 保存到相册”按钮，内部不依赖 Vant。

功能特性

✅ 多种按钮类型：primary、secondary、green、white
✅ 丰富的状态：正常、禁用、加载中
✅ 扁平化模式支持
✅ 图标支持
✅ 自定义尺寸
✅ 参考设计稿的缩放点击动效
✅ 与 doodle-ui 样式完全一致

使用方法

基础用法

<!-- 主要按钮 -->
<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>

按钮状态

<!-- 禁用状态 -->
<toy-button type="primary" disabled>禁用按钮</toy-button>

<!-- 加载状态 -->
<toy-button type="primary" loading>加载中</toy-button>

<!-- 扁平化模式 -->
<toy-button type="primary" flat>扁平按钮</toy-button>

带图标按钮

<!-- 带图标 -->
<toy-button type="primary" icon="add">添加</toy-button>

<!-- 自定义图标颜色 -->
<toy-button type="white" icon="edit" icon-color="#FFD719">编辑</toy-button>

自定义尺寸

<!-- 自定义宽度 -->
<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: 黄色背景 (#FFD700)，深色文字 (#6c5a00)
secondary: 绿色背景 (#9CD343)，白色文字
green: 绿色背景 (#9CD343)，白色文字（与secondary相同）
white: 米白背景，深色文字，浅边框

点击动效

所有按钮都支持 scale(0.95) 的点击缩放效果
flat 模式下更接近底部操作栏按钮视觉
动效持续时间约为 180ms

禁用状态

背景色变为浅灰色 (#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 类型支持
优化点击动效
改进扁平化模式
统一设计规范