更新记录

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

1.0.0

平台兼容性

dengbo-lotteryWheel 幸运组件

dengbo-lotteryWheel 是一个功能丰富的幸运组件，适用于抽奖、游戏等场景。它提供了可自定义的外观和行为，支持动态奖项、闪烁灯效等特性。

特性

• 可自定义奖项数量和内容
• 支持自定义大小和样式
• 动态旋转效果
• 可配置的闪烁灯效
• 支持自定义背景图片
• 响应式设计

属性

事件

插槽

组件提供了以下插槽以便自定义内容：

• bg: 自定义背景
• pointer: 自定义指针
• 默认插槽: 自定义每个奖品区域的内容

注意事项

• 确保提供的奖品数量与 prizes 数组长度一致。
• 如果使用自定义背景图片，请确保图片资源可用。
• 大小可能需要根据实际设备进行调整。

示例

<template>
    <view class="content">
        <view class="lottery">
            <dengbo-lotteryWheel :prizes="prizes" :size="626" :duration="5000" @run="Click"
                @done="Done" ref="luckyWheel" :lightImgs="lightImages" customStyle="borderRadius: 50%;">
                <template v-slot:bg>
                    <image src="/static/tzbj.png" style="width: 100%; height: 100%" />
                </template>
                <template v-slot:pointer>
                    <image src="/static/tan.png" style="width: 212rpx" mode="widthFix" @click="startWheel"/>
                </template>
            </dengbo-lotteryWheel>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                lightImages: ['/static/tpoint1.png', '/static/tpoint2.png'],
                prizes: [{
                        name: '积分',
                        image: '/static/thb.png',
                        pro: '50积分',
                    },
                    {
                        name: '积分',
                        image: '/static/thb.png',
                        pro: '100积分',
                    },
                    {
                        name: '优惠券',
                        image: '/static/thb.png',
                        pro: '15元优惠券',
                    },
                    {
                        name: '家用电器',
                        image: '/static/thb.png',
                        pro: '微波炉',
                    },
                    {
                        name: '谢谢参与',
                        image: '/static/thb.png',
                        pro: '15元优惠券',
                    },
                    {
                        name: '办公用品',
                        image: '/static/thb.png',
                        pro: '机械键盘',
                    },
                    {
                        name: '生活用品',
                        image: '/static/thb.png',
                        pro: '化妆刷',
                    },
                ],
            }
        },
        onLoad() {

        },
        methods: {
            startWheel() {
                this.$refs.luckyWheel.run(2);
            },
            Click() {
                console.log('用户点击了转盘');
                this.$refs.luckyWheel.run(2);
            },
            Done(prize) {
                console.log('抽奖结束，中奖奖品：', prize);
            },
        }
    }
</script>

<style>
    .content{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .lottery {
        position: relative;
        display: inline-block;
        width: 626rpx;
        height: 626rpx;
        margin-top: 100rpx;
      }
</style>