更新记录

0.0.1(2024-08-13) 下载此版本

  • init

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-uvue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × ×

lime-scratchcard 刮刮卡

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

安装

在插件市场导入即可

演示

基础使用

通过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 ''

打赏

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问