LimeUI+1.2.0

主题

LimeDialer 转盘抽奖组件 ​

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

插件依赖：无

文档链接 ​

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

安装方法 ​

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

代码演示 ​

基础用法 ​

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

html
<l-dialer :prizeList="prizeList" @click="onClick" @done="onDone" ref="dialer" />
js
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)
        }
    }
}

自定义转盘边框 ​

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

html
<!-- 方式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>

自定义指针 ​

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

html
<!-- 方式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>

自定义奖品样式 ​

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

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

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

快速预览 ​

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

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

插件标签说明 ​

标签名说明
l-dialer组件标签
lime-dialer演示标签

API文档 ​

Props 属性说明 ​

属性名说明类型默认值
size转盘直径，默认单位为 rpxnumber | string300
prizeList奖品列表Array[]
turns旋转圈数number10
duration旋转过程时间，单位为 snumber3
styleOpt转盘中的样式配置object见下方说明
customStyle外容器的自定义样式string-
dialStyle转盘自定义样式string-
pointerStyle指针自定义样式stringwidth: 30%

styleOpt 配置项 ​

属性名说明类型默认值
prizeBgColors每一块扇形的背景色Array['#fff0a3', '#fffce6']
borderColor每一块扇形的外边框颜色string#ffd752

Events 事件 ​

事件名说明回调参数
click点击指针时触发-
done转盘旋转结束时触发index: number (中奖奖品的索引)

Methods 方法 ​

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

方法名说明参数
run开始旋转到指定索引位置index: number (奖品的索引)
done旋转结束，该事件是通过标签接收的方法
click点击指针，该事件是通过标签接收的方法

Slots 插槽 ​

名称说明
border自定义转盘边框
prize自定义奖品展示，提供 item 参数表示当前奖品数据
pointer自定义指针

prizeList 奖品配置 ​

奖品列表的每一项配置：

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

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

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码