2.0.1 • Published 5 years ago
react-scratch-perfect v2.0.1
欢迎使用react刮一刮组件
此组件使用图片时未使用getImageData方法,没有跨域问题,使用简单,适合多场景使用
安装
npm install react-scratch-perfect --save例子: https://dsmelon.github.io/react-scratch-perfect/dist/index.html
api
| 参数名 | 类型 | 默认值 | 说明 | 值 |
|---|---|---|---|---|
| className | string | 无 | 容器的类名 | |
| clear | boolean | false | 完成后是否清除画布 | |
| color | string | #808080 | 刮刮卡的颜色 | |
| img | string | 无 | 刮刮卡的填充图片(如果图片加载失败,会使用颜色值) | |
| imgRepeat | string | 无 | 图片填充方式 | width: 宽度撑满，高度自适应并居中 height: 高度撑满，宽度自适应并居中 repeat: 重复填充无值会被拉伸铺满容器 |
| size | number | 1/10容器宽度 | 画笔直径 | |
| round | array[number] | [0,0,0,0] | 奖品限定区域,分别为上右下左的padding值 | |
| percentage | number | 70 | 完成百分比(round之外的不参与计算) | |
| mode | string | move | 在什么时刻触发onChange和onSuccess | move: 手指移动时触发onChange和onSuccess end: 手指抬起时触发onChange和onSuccess |
| onChange | function(percentage) | 无 | 改变时触发的函数,回传的是已经刮出的百分比 | |
| onSuccess | function | 无 | 完成时的回调 |
使用方法
<Scratch
color="#808080"
img=""
round={[100,50,100,50]}
size={40}
imgRepeat="height"
percentage={70}
clear={false}
mode="move"
onChange={this.handleChange}
onSuccess={this.onSuccess}
className="scratch"
>
<div className="s1">一等奖</div>
</Scratch>.s1{
font-size: 100px;
line-height: 320px;
height: 320px;
width: 450px;
color: deeppink;
display: inline-block;
}