LimeScratchcard 刮刮卡组件

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

插件依赖：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 />

插件标签说明

标签名	说明
l-scratchcard	组件标签

Vue2使用说明

main.js中添加以下代码：

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

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

API文档

Props 属性说明

属性名	说明	类型	默认值
content	刮开后的内容	string	''
height	刮刮卡高度	number	50
width	刮刮卡宽度	number	300
coverColor	刮开区域颜色	string	'#d3d3d3'
coverImg	刮开区域背景图	string	''
fontSize	内容字体大小	number	20
scratchRadius	刮开区域半径	number	10
backgroundColor	背景颜色	string	'white'
ratio	刮开比例阈值	number	0.5
watermarkSize	水印字体大小	number	14
watermarkText	水印文字	string	''
watermarkColor	水印颜色	string	'rgba(0,0,0,0.1)'
titleSize	标题字体大小	number	24
title	标题文字	string	''
titleColor	标题颜色	string	'rgba(0,0,0,0.8)'

Events 事件

事件名	说明	回调参数
open	刮开时触发	-
init	初始化完成时触发	-

Slots 插槽

名称	说明
default	自定义刮开后的内容

支持与赞赏

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

支付宝赞助	微信赞助

源代码

组件源码