更新记录

1.0.2（2024-12-11） 下载此版本

修改readme部分描述错误

1.0.1（2024-10-31） 下载此版本

修复部分兼容问题

1.0.0（2024-10-31） 下载此版本

hello plugin

平台兼容性

uni-app

其他

说明

这是一个使用 canvas 模拟抽奖刮卡的小组件，支持自定义尺寸、自定义涂层样式、自定义刮卡进度等等

基础用法

监听 begin 事件来加载奖品，使用 goods 插槽来展示奖品

<vshen-scraper @begin="begin">
    <template #goods>
        <view>刮开后可见的内容</view>
    </template>
</vshen-scraper>

function begin({done}) {
    // 这个事件里可以加载奖品，加载完成后调用 done 方法即可进入刮卡阶段
    done()
}

组件属性

组件插槽

组件事件

设置刮卡尺寸

组件会自动适配父容器的尺寸，所以不需要调整组件本身的宽高，只要设置好父容器的尺寸即可

跳过开始按钮

开发者可以通过 ref 方式主动调用组件的 begin 方法来跳过开始按钮节点，该方法调用后相当于点击了开始按钮

<vshen-scraper ref="scraper"></vshen-scraper>

mounted() {
    this.$refs.scraper.begin()
}

已知的问题

默认涂层不加载

默认涂层是通过 base64 加载的图片，某些手机可能无法渲染（原因未知，有知道的小伙伴可以留言，我看到后会修复掉这个问题）

解决方法是通过 mask 属性传递一张自己的涂层图片，本地图片和网络图片都可以