LimeScratchcard 刮刮卡

• 使用canvas实现橡皮擦、刮刮卡功能，兼容uniapp/uniappx(web,安卓,ios)
• uniappx需要hbx4.25
• vue2需要composition-api

安装

在 导入即可

文档

scratchcard

演示

基础使用

通过content设置内容

<l-scratchcard content="1000万"/>

插槽

通过插槽设置内容

<l-scratchcard>
	<template #default="{show}">
		<text v-if="show">你没有中奖</text>
	</template>
</l-scratchcard>

自定义颜色

通过coverColor涂层的颜色，backgroundColor设置背景色

<l-scratchcard 
	content="1000万"
	coverColor="#F9CC9D"
	backgroundColor="#C3D08B"
/>

涂层背景

通过coverImg涂层背景

<l-scratchcard 
	content="1000万"
	coverImg="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
/>

刮开比例

通过ratio设置刮开比例

<l-scratchcard 
	content="1000万"
	:ratio="0.2"
/>

事件回调

通过open事件接收完成事件

<l-scratchcard 
	content="1000万"
	@open="opencard"	
/>

插件标签

• 默认 l-scratchcard 为 component
• 默认 lime-scratchcard 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

Prop

字段	说明	类型	默认值
content	奖项信息，支持 html	String	''
height	卡片高度	String	50px
width	卡片高度	String	300px
coverColor	刮开层颜色	String	''
coverImg	刮开层是图片（不支持跨域。设置此项后 coverColor 失效）	String	''
fontSize	中奖信息字号	String	20px
backgroundColor	内容层背景颜色	String	'#FFFFFF'
ratio	触发事件的刮开比	Number	0.8(介于 0-1 之间)
scratchRadius	划痕大小	Number	10
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)

事件

字段	说明	类型	默认值
open	刮开后回调函数	function	''

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码