小程序刮刮卡组件
使用说明
安装组件
yarn add @alipay/ant-mini-scratchCard
使用示例
json
xaml
<!-- 其中,result 为动态获取的抽奖结果 -->
js
const app = ;;
效果图
高级用法
当抽奖结果显示为图片或需要自定义样式修饰时,可以传入slot
,并将resultText
值设置为''
<!-- 将 resultText 设置为空字符串 --> <!-- 此处为 slot 子节点内容 --> {{result}}
参数说明
属性 | 类型 | 默认值 | 含义 |
---|---|---|---|
id | String | scratch-canvas | 组件标识,页面唯一 |
width | Number | 300 | 刮刮卡宽度,单位px |
height | Number | 150 | 刮刮卡高度,单位px |
tipText | String | 刮刮我,有惊喜 | 刮奖区域提示文字 |
tipColor | String | #aaa | 提示文字的颜色 |
tipSize | Number | 20 | 提示文字的字号,单位px |
lineWidth | Number | 25 | 擦除线宽度,单位px |
activePercent | Number | 0.4 | 当被擦除比例达到该值时刮奖结束,取值范围0-1 |
autoFadeOut | Boolean | true | 当值为true 且被擦除比例达到activePercent 选项值时刮奖图层自动消失 |
ctxLogoUrl | String | 刮奖区图片背景,小程序接口限制目前只支持线上cdn 地址或离线包地址,cdn 需返回头 Access-Control-Allow-Origin: * |
|
coverColor | String | #dbdbdb | 刮奖区背景色,当背景图片透明度为0 时无效 |
resultText | String | 谢谢参与 | 刮奖结果 |
onFinish | Function | ()=>{} | 刮奖结束回调,当被擦除比例达到activePercent 选项值时触发 |
由于小程序当前接口限制,暂不支持
rpx
、rem
等像素单位,目前仅支持px