更新记录

1.1.2（2025-08-13） 下载此版本

更新文档。

1.1.1（2025-08-13） 下载此版本

修改文档。

1.1.0（2025-08-13） 下载此版本

升级。

平台兼容性

云端兼容性

uni-app(4.07)

uni-app x(4.07)

其他

方便您的同时，请五星、收藏，让好的东西照亮更多深渊中负重前行的代码人。

创作不易，在您方便之际，赞赏作者，我们会更有动力继续下去。

简介

ljs-raffle-vue3，抽奖类随机控制器，超灵活，可配置。

可用场景：手机抽奖，大型抽奖页面等。

使用 uni_modules 安装（推荐）

使用 uni_modules 方式安装组件库，可以直接通过插件市场导入，通过右键菜单快速更新组件，不需要引用、注册，直接在页面中使用 ljs-raffle-vue3组件。

参数

options参数

暴露方法

插槽

插槽default

快速应用

常规示例

<ljs-raffle-vue3
    ref="ljsRaffle"
    :data="data"
    @result="result">
    <template #default="{row, activeIndex, index}">
        <view class="content"
            :class="{
                active: activeIndex === index
            }">
            <image class="pic" :src="row.img"></image>
            <view class="text">{{ row.label }}</view>
        </view>
    </template>
    <template #operate>
        <view class="butBox">
            <view class="but" @click="getRandom">单抽</view>
            <view class="but" @click="getRandom10">10连抽</view>
        </view>
    </template>
</ljs-raffle-vue3>

export default {
    data() {
        return {
            data: [
                {
                    label: '钻石',
                    img: 'https://wine-project.oss-cn-beijing.aliyuncs.com/weapp/mine/bayAVine_icon1.png',
                },
                {
                    label: '精美贴画',
                    img: 'https://wine-project.oss-cn-beijing.aliyuncs.com/weapp/mine/bayAVine_icon2.png',
                },
                {
                    label: 'Iphone 16',
                    img: 'https://wine-project.oss-cn-beijing.aliyuncs.com/weapp/mine/bayAVine_icon3.png',
                },
                {
                    label: '手机支架',
                    img: 'https://wine-project.oss-cn-beijing.aliyuncs.com/weapp/mine/bayAVine_icon4.png',
                },
                {
                    label: '唇膏',
                    img: 'https://wine-project.oss-cn-beijing.aliyuncs.com/weapp/mine/bayAVine_icon1.png',
                },
                {
                    label: '小夜灯',
                    img: 'https://wine-project.oss-cn-beijing.aliyuncs.com/weapp/mine/bayAVine_icon2.png',
                },
                {
                    label: '虎虎生威眼罩',
                    img: 'https://wine-project.oss-cn-beijing.aliyuncs.com/weapp/mine/bayAVine_icon3.png',
                },
                {
                    label: '降噪耳机',
                    img: 'https://wine-project.oss-cn-beijing.aliyuncs.com/weapp/mine/bayAVine_icon4.png',
                },
                {
                    label: '蓝牙耳机',
                    img: 'https://wine-project.oss-cn-beijing.aliyuncs.com/weapp/mine/bayAVine_icon1.png',
                },
            ]
        }
    },
    onLoad() {
    },
    methods: {
        getRandom() {
            this.$refs.ljsRaffle.getRandomResult(1);
        },
        getRandom10() {
            this.$refs.ljsRaffle.getRandomResult(10);
        },
        result(val, index) {
            console.log(val, index);
        }
    }
}

.content{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #999;
    border-radius: 8rpx;
    &.active{
        background-color: rgba(245, 153, 66, .6);
    }
    .pic{
        width: 60upx;
        height: 60upx;
    }
    .pic{
        width: 60upx;
        height: 60upx;
    }
    .text{
        font-size: 26upx;
        color: #000;
        margin-top: 20upx;
    }
}
.butBox{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20upx 0;
    .but{
        width: 200upx;
        height: 96upx;
        line-height: 96upx;
        text-align: center;
        background-color: #f59942;
        color: #FFF;
        font-size: 32upx;
        font-weight: 600;
        margin-right: 40upx;
        border-radius: 20upx;
        &:last-child{
            margin-right: 0;
        }
    }
}

干预示例

<ljs-raffle-vue3
    ref="ljsRaffle"
    :data="data"
    :interfere="true"
    :interfereResult="interfereResult"
    :interfereResultWait="interfereResultWait"
    @result="result">
    <template #default="{row, activeIndex, index}">
        <view class="content"
            :class="{
                active: activeIndex === index
            }">
            <image class="pic" :src="row.img"></image>
            <view class="text">{{ row.label }}</view>
        </view>
    </template>
    <template #operate>
        <view class="butBox">
            <view class="but" @click="getRandom">单抽</view>
            <view class="but" @click="getRandom10">10连抽</view>
        </view>
    </template>
</ljs-raffle-vue3>

export default {
    data() {
        return {
            interfereResult: null,
            interfereResultWait: true, // 干预时
        }
    },
    onLoad() {
        setInterval(() => {
            this.interfereResult = [1, 2, 1, 1, 1, 1, 1, 1, 1, 1]
            this.interfereResultWait = false;
        }, 5000)
    },
    methods: {
        getRandom() {
            this.$refs.ljsRaffle.getRandomResult(1);
        },
        getRandom10() {
            this.$refs.ljsRaffle.getRandomResult(10);
        },
        result(val, index) {
            console.log(val, index);
        }
    }
}

贡献代码

龙九山。有任何问题，请在平台留言，在手头宽裕得情况下，我会尽快修复问题。