更新记录

0.0.6（2025-08-30） 下载此版本

• fix: 修复vue2类型报错问题

0.0.5（2025-03-06） 下载此版本

• fix: 修复uniapp TypeError: this.cover.createImage is not a function 的错误

0.0.4（2025-02-14） 下载此版本

• chore: 更新示例

平台兼容性

云端兼容性

uni-app(4.66)

uni-app x(4.76)

lime-scratchcard 刮刮卡组件

一个功能丰富的刮刮卡组件，用于实现刮奖效果。支持自定义刮开区域、背景、文字样式等多种配置，可用于抽奖活动、优惠券发放等场景。组件提供了丰富的自定义选项，可以满足各种复杂的界面设计需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 刮刮卡组件文档 - 站点1
• 刮刮卡组件文档 - 站点2
• 刮刮卡组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-scratchcard
2. 导入后可能需要重新编译项目
3. 在页面中使用l-scratchcard组件

代码演示

基础用法

最简单的刮刮卡组件用法，只需要设置刮开后的内容即可。

<l-scratchcard content="恭喜中奖！"></l-scratchcard>

自定义尺寸

设置刮刮卡的宽度和高度。

<l-scratchcard content="恭喜中奖！" :width="200" :height="100"></l-scratchcard>

自定义刮开区域

设置刮开区域的半径和背景颜色。

<l-scratchcard content="恭喜中奖！" :scratch-radius="15" cover-color="#999999"></l-scratchcard>

添加水印

为刮刮卡添加水印文字。

<l-scratchcard content="恭喜中奖！" watermark-text="活动专用" watermark-color="rgba(0,0,0,0.2)"></l-scratchcard>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-scratchcard/components/l-scratchcard -->
<l-scratchcard />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

Events 事件

Slots 插槽

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助