V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
ldq404
V2EX  ›  分享创造

😍 分享一个前端 [大转盘 / 九宫格] 抽奖插件 ☜(゚ヮ゚☜)

  •  3
     
  •   ldq404 ·
    buuing · 2021-01-20 16:59:14 +08:00 · 3898 次点击
    这是一个创建于 1387 天前的主题,其中的信息可能已经有所发展或是发生改变。

    抽奖插件

    🎨 奖品 / 文字 / 图片 / 颜色 / 按钮均可配置
    🚦 支持同步 / 异步抽奖
    🎯 概率前 / 后端可控
    🎈 自动根据 dpr 调整清晰度适配移动端

    demo-img

    各端兼容情况

    npm 包 支持的框架 最新版本 下载量(月) Star
    lucky-canvas Js / JQuery version downloads stars
    vue-luck-draw Vue2.x / Vue3.x version downloads stars
    react-luck-draw React 开发中...
    mini-luck-draw 原生微信小程序 version downloads stars
    taro-luck-draw taro 计划中...
    uni-luck-draw uni-app version downloads stars
    • 后期会增加更多功能 / 属性, 以及更多抽奖类型 (老虎机 / 扭蛋机 / 刮刮乐), 以及更多端的兼容
    • 如果哪位老哥想要的功能没有, 也可以留言发给我

    本插件开源免费,用着顺手的小伙伴可以 github 点个star支持一下 (●'◡'●)

    第 1 条附言  ·  2021-01-20 18:08:05 +08:00

    首先感谢大家的支持, 我再补充两个 demo 🤣市面上你能看到的抽奖 99% 都可以实现, 如果不能实现请联系我, 我给你加功能

    demo2-img

    第 2 条附言  ·  2021-02-03 17:27:02 +08:00

    新增 React 和 Taro 两个版本抽奖, 持续更新中~~~

    npm 包 支持的框架 最新版本 下载量(月) Star
    react-luck-draw React version downloads stars
    taro-luck-draw Taro version downloads stars
    31 条回复    2021-01-25 19:49:42 +08:00
    ARhen
        1
    ARhen  
       2021-01-20 17:08:55 +08:00   ❤️ 1
    自己做自己的欧皇 😂
    ldq404
        2
    ldq404  
    OP
       2021-01-20 17:11:48 +08:00
    @ARhen 哈哈, 想中什么奖就中什么
    justin2018
        3
    justin2018  
       2021-01-20 17:28:30 +08:00   ❤️ 1
    可以 可以

    颜值很好 收藏了 哈哈哈~
    TabGre
        4
    TabGre  
       2021-01-20 17:40:09 +08:00 via iPhone   ❤️ 1
    nice
    ldq404
        5
    ldq404  
    OP
       2021-01-20 17:43:40 +08:00
    @justin2018 额, 老哥, 具体样式得由公司的 ui 来设计, 我只提供插件 🤣
    nasa
        6
    nasa  
       2021-01-20 17:48:23 +08:00   ❤️ 1
    start 已送上
    ldq404
        7
    ldq404  
    OP
       2021-01-20 17:49:36 +08:00
    @nasa 感谢老哥支持
    lichdkimba
        8
    lichdkimba  
       2021-01-20 17:58:38 +08:00   ❤️ 1
    支持 真的做的可以
    dioxide
        9
    dioxide  
       2021-01-20 18:04:03 +08:00   ❤️ 1
    不错, 感谢分享,
    ldq404
        10
    ldq404  
    OP
       2021-01-20 19:07:40 +08:00
    @lichdkimba 嘿嘿, 谢谢夸奖 😁
    baozi23
        11
    baozi23  
       2021-01-20 19:40:34 +08:00   ❤️ 1
    是不是可以加个配置 12 宫格的,或者能够自定义配置宫格数量
    ldq404
        12
    ldq404  
    OP
       2021-01-20 20:52:31 +08:00
    @baozi23 有的, 可以通过`rows`和`cols`这两个属性, 默认是 3*3 的九宫格, 然后格子可以通过 row 或 col 设置合并单元格实现`m*n`宫格 😎
    JokerLiang
        13
    JokerLiang  
       2021-01-21 10:18:05 +08:00   ❤️ 1
    不错,推荐,用了这个做了个需求。感谢老哥。
    oneisall0423
        14
    oneisall0423  
       2021-01-21 10:55:14 +08:00   ❤️ 1
    支持一下~
    ldq404
        15
    ldq404  
    OP
       2021-01-21 13:03:25 +08:00
    @JokerLiang 哈哈哈, 好巧啊 😂
    imtudou
        16
    imtudou  
       2021-01-21 16:35:42 +08:00   ❤️ 1
    Mark 支持一下~
    ldq404
        17
    ldq404  
    OP
       2021-01-21 16:38:42 +08:00
    @imtudou 🤞 谢谢支持
    hitaoguo
        18
    hitaoguo  
       2021-01-22 09:31:15 +08:00   ❤️ 1
    再写个抽人的,就齐活了
    ldq404
        19
    ldq404  
    OP
       2021-01-22 10:10:16 +08:00
    @hitaoguo 什么抽人, 年会抽奖吗
    hitaoguo
        20
    hitaoguo  
       2021-01-22 10:13:31 +08:00
    @ldq404 #19 对啊,能够人抽奖,也能奖抽人
    Serializability
        21
    Serializability  
       2021-01-22 17:30:10 +08:00   ❤️ 1
    好东西,start 已点
    ldq404
        22
    ldq404  
    OP
       2021-01-22 19:10:24 +08:00
    @Serializability 谢谢支持😎
    ldq404
        23
    ldq404  
    OP
       2021-01-22 19:11:10 +08:00
    @hitaoguo 感觉年会抽奖用 webgl 搞个 3d 的会比较合适, 以后有空研究一下
    rodrick
        24
    rodrick  
       2021-01-23 08:25:53 +08:00   ❤️ 1
    不错不错,star 一下
    rodrick
        25
    rodrick  
       2021-01-23 08:31:35 +08:00
    不知道是不是我网的问题,现在所有用 github page 的访问都好卡啊。。
    90d0n
        26
    90d0n  
       2021-01-23 11:32:54 +08:00   ❤️ 1
    不错不错, 做的很棒!
    可不可以支持一次抽奖,多个中奖奖品. 比如 点击一次抽奖获得两个奖品
    ldq404
        27
    ldq404  
    OP
       2021-01-23 15:38:29 +08:00
    @rodrick 可能是墙的力度加大了😢
    ldq404
        28
    ldq404  
    OP
       2021-01-23 15:40:25 +08:00
    @90d0n 大转盘肯定搞不了, 九宫格的话还可以, 但是总共也就 8 个奖品, 同时抽三四个会显得太乱了, 不过倒是可以搞一个 10 连抽的功能, 抽中一个继续抽下一个😎
    lcf8381595
        29
    lcf8381595  
       2021-01-23 16:50:19 +08:00   ❤️ 1
    谢谢。正好要用。请问能支持其它类型的抽奖吗?比如一个产品,抽奖结果只有两种情况,中奖和未中奖(根据提前设置好的中奖率),这种需求怎么实现比较好?
    ldq404
        30
    ldq404  
    OP
       2021-01-23 19:09:35 +08:00
    @lcf8381595 目前只搞了大转盘和九宫格, 你说的这种我也没没啥思路, 直接给个翻转卡片得了
    baozi23
        31
    baozi23  
       2021-01-25 19:49:42 +08:00
    @ldq404 厉害,后来细看文档才发现,😂
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1102 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:29 · PVG 06:29 · LAX 14:29 · JFK 17:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.