更新记录

0.2.1（2023-05-08）

• chore: 增加示例

0.2.0（2021-07-09）

• chore: 统一命名规范，无须主动引入组件

0.1.0（2021-06-16）

• 首次上传
• 纯CSS实现的抽奖转盘

平台兼容性

Dialer 转盘抽奖

营销活动类组件
查看更多 站点1
查看更多 站点2
Q群：806744170

平台兼容

代码演示

基础用法

<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',
                },
                {
                    id: 'coupon1',
                    name: '1元',
                    img: 'https://img11.360buyimg.com/pop/jfs/t1/189927/14/6092/4174/60b66173E23c472ea/44af15a151defca1.png',
                },
                {
                    id: 'apple',
                    Color: 'rgba(246, 142, 46, 0.5)',
                    name: '苹果手机',
                    img: 'https://img11.360buyimg.com/pop/jfs/t1/177670/26/4591/2514/60a25874Ee0e5332a/99c7bdfede732ae4.png'
                },
                {
                    id: 'coupon210',
                    name: '210元',
                    img: 'https://img11.360buyimg.com/pop/jfs/t1/124578/12/20170/4429/60b635d8E7089ebb0/7a47d76a2a260cc0.png'
                },
                {
                    id: 'jd100',
                    name: '100京豆',
                    img: 'https://img11.360buyimg.com/pop/jfs/t1/162790/37/15087/28046/6062a49aE8f2c10f2/5591ff0ff38a45e2.png',
                },
                {
                    id: 'coupon400',
                    name: '400元',
                    img: 'https://img11.360buyimg.com/pop/jfs/t1/177090/2/7001/4535/60b6607aEe9c1db2a/76c67675f547db3f.png'
                },
                {
                    id: 'thanks',
                    name: '谢谢参与',
                    img: 'https://storage.jd.com/cdn-upload/dialTemplateHeart.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、通过设置dial-style设置背景的方式设置，必须是网络图片
• 2、通过插槽border设置

// 方式1
<l-dialer dial-style="color: rgba(60,48,158,0.7); padding: 32rpx;background-image: url(http://a.cn/static/dialer/lottery-bg.png)"/>

// 方式2
<l-dialer>
    <image slot="border" src="static/dialer/lottery-bg.png"/>
</l-dialer>

指针

• 1、可通过pointer-style设置背景的方式设置，但必须为网络图片
• 2、可通过插槽pointer设置
• 3、因为插件是能过获取内部方法实现抽奖，只要获取方法，任何元素都是指针按钮

// 方式1
<l-dialer pointer-style="background-image: url(http://a.cn/static/dialer/bg.png)"/>
// 方式2
<l-dialer>
    <image slot="pointer" src="static/dialer/lottery-bg.png" />
</l-dialer>

奖品插槽

• 默认会按奖品列表渲染，但想更个性可通过插槽prize设置
• 微信小程序最好使用HX3.7.12+并且在manifest.json设置slotMultipleInstance

  "mp-weixin" : {
  "slotMultipleInstance" : true
  }

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

查看示例

• 导入后直接使用这个标签查看演示效果

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

插件标签

• 默认 l-dialer 为 component
• 默认 lime-dialer 为 demo

API

Props

Event

Slots