更新记录

0.2.9（2025-08-31） 下载此版本

• chore: 更新文档

0.2.7（2025-04-22） 下载此版本

• feat: 兼容uniappx 鸿蒙next

0.2.6（2025-02-14） 下载此版本

• fix: 修复uniappx app端列数样式不对的问题

平台兼容性

uni-app(4.74)

uni-app x(4.75)

其他

lime-dialer 转盘抽奖组件

一个功能丰富的转盘抽奖组件，用于营销活动场景。支持自定义奖品、指针、边框等多种配置，可用于抽奖活动、营销推广、游戏互动等多种场景。组件提供了丰富的自定义选项，可以满足各种复杂的抽奖界面设计需求。

插件依赖：无

文档链接

📚 组件详细文档请访问以下站点：

• 转盘抽奖组件文档 - 站点1
• 转盘抽奖组件文档 - 站点2
• 转盘抽奖组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-dialer
2. 导入后可能需要重新编译项目
3. 在页面中使用l-dialer组件

代码演示

基础用法

最简单的转盘抽奖组件用法，设置奖品列表并通过ref调用run方法开始抽奖。

<l-dialer :prizeList="prizeList" @click="onClick" @done="onDone" ref="dialer" />

export default {
    data() {
        return {
            // 奖品列表
            prizeList: [
                {
                    id: 'coupon88',
                    name: '8.8折',
                    img: 'https://img11.360buyimg.com/pop/jfs/t1/175718/35/12595/5477/60b660c6Eb850717b/a1cfe750dcdb5b78.png',
                },
                {
                    id: 'coupon900',
                    Color: 'rgb(251, 219, 216)',
                    name: '900',
                    img: 'https://img11.360buyimg.com/pop/jfs/t1/190845/9/6092/4489/60b65fe8Ebb8f8284/955da889f6d1c13e.png',
                },
                // 更多奖品...
            ]
        };
    },
    methods: {
        onDone(index) {
            const prize = this.prizeList[index]
            uni.showModal({
                title: prize.id == 'thanks' ? '很遗憾': '恭喜您',
                content: (prize.id !== 'thanks' ? `获得`:'') + prize.name
            })
        },
        onClick() {
            // 奖品的索引
            this.$refs.dialer.run(5)
        }
    }
}

自定义转盘边框

可以通过两种方式设置转盘边框：

<!-- 方式1：通过样式设置背景图片 -->
<l-dialer dial-style="color: rgba(60,48,158,0.7); padding: 32rpx;background-image: url(http://example.com/static/dialer/lottery-bg.png)"/>

<!-- 方式2：通过插槽设置 -->
<l-dialer>
    <image slot="border" src="static/dialer/lottery-bg.png"/>
</l-dialer>

自定义指针

可以通过多种方式设置指针：

<!-- 方式1：通过样式设置背景图片 -->
<l-dialer pointer-style="background-image: url(http://example.com/static/dialer/pointer.png)"/>

<!-- 方式2：通过插槽设置 -->
<l-dialer>
    <image slot="pointer" src="static/dialer/pointer.png" />
</l-dialer>

自定义奖品样式

可以通过插槽自定义奖品的展示方式：

<l-dialer>
    <template #prize="{item}">
        <image style="width: 72rpx; height: 72rpx;" :src="item.img" />
    </template>
</l-dialer>

注意：微信小程序最好使用HX3.7.12+并且在manifest.json设置slotMultipleInstance: true

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-dialer/components/lime-dialer -->
<lime-dialer />

插件标签说明

API文档

Props 属性说明

styleOpt 配置项

Events 事件

Methods 方法

通过 ref 可以获取到组件实例并调用实例方法

Slots 插槽

prizeList 奖品配置

奖品列表的每一项配置：

interface Prize {
  id: string;        // 奖品ID
  name: string;      // 奖品名称
  img?: string;      // 奖品图片
  Color?: string;    // 奖品背景色（可选，优先级高于styleOpt.prizeBgColors）
}

--dialer_prize_image_size | 36px | 奖品图片大小 |

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助