更新记录

1.0.0（2025-04-09） 下载此版本

刮刮卡抽奖组件，自定义背景刮层图，重置 触发阈值等灵活自定义配置

平台兼容性

小程序刮刮卡组件

使用说明

<view>
 <scratch-card  v-if="reset"
   @finish="onScratchFinish"
   result-text="中奖啦！"
   :width="288"
   :height="150"
   ctxLogoUrl="自定义刮奖背景图片"
   >
   <view>刮开查看结果</view>
 </scratch-card>
 <button class="btn" @tap="refresh">重置</button>
</view>

高级用法

当抽奖结果显示为图片或需要自定义样式修饰时，可以传入slot,并将resultText值设置为''

<!-- 将 resultText 设置为空字符串 -->
<view>
<scratch-card resultText='' v-if="reset">
  <!-- 此处为 slot 子节点内容 -->
  <view class="result">
    <text>{{result}}</text>
  </view>
</scratch-card>
<button class="btn" @tap="refresh">重置</button>
</view>

<script>
    export default {
        data() {
            return {
                reset:true,
            }
        },
        methods:{
            refresh : function(){
                this.reset = false; // 暂时隐藏组件，等待重新渲染
                this.$nextTick(() => {
                    this.reset = true; // 重新显示组件
                });
                 this.$refs.scratchCard.refresh();
            },

            onScratchFinish(){
                  uni.showToast({
                        title: '成功',
                        icon : 'success'
                    });
            },
        }
    };
</script>

参数说明

由于小程序当前接口限制，暂不支持 rpx、rem等像素单位，目前仅支持 px