更新记录

0.0.1（2024-08-13） 下载此版本

• init

平台兼容性

uni-app

uni-app x

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

事件

打赏

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