更新记录

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

1.0.0

平台兼容性

dengbo-lotteryScratch 插件

dengbo-lotteryScratch 是一个用于创建刮刮卡效果的 uniapp 组件。它提供了丰富的自定义选项,包括背景图片、水印、闪光灯效果等。

特性

• 可自定义刮卡背景
• 支持文字或图片水印
• 可配置闪光灯效果
• 灵活的刮卡触发百分比
• 支持禁用刮卡功能

属性

事件

插槽

示例

<template>
    <view class="content">
        <view class="lottery">
            <dengbo-lotteryScratch backgroundCard="/static/ggl.png" backgroundImage="/static/gglbj.png"
                ref="card" @complete="seatShow" :disabled="disabled" :lightImgs="lightImages">
                <!-- 刮刮卡内容保持不变 -->
                <template v-slot:scratch-value>
                    <view style="width: 462rpx; height: 228rpx; text-align: center">恭喜你获得IPhone手机一部</view>
                </template>
            </dengbo-lotteryScratch>
            <view v-if="disabled"
                style="width: 100%; height: 100%; position: absolute; left: 0; top: 0;display: flex;align-items: center;justify-content: center;">
                <image src="/static/gan.png" style="width: 274rpx; height: 82rpx" @click.stop="openCard" />
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                lightImages: ['/static/gpoint1.png', '/static/gpoint2.png'],
                disabled: true,
            }
        },
        onLoad() {

        },
        methods: {
            openCard() {
                console.log('刮刮卡开始');
                this.$refs.card.init(); // 重置刮刮卡
                this.disabled = false;
            },

            seatShow() {
                console.log('刮刮卡完成');
                this.disabled = true;
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .lottery {
        margin-top: 100rpx;
        position: relative;
        display: inline-block;
        width: 690rpx;
        height: 460rpx;
    }
</style>

注意事项

• 确保为组件提供适当的宽度和高度。
• 如果使用背景图片或水印图片,请确保图片资源可以正确加载。
• 闪光灯效果可能会影响性能,请根据实际需求调整配置。