V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  ç™»å½•
爱意满满的作品展示区。
ldq404
V2EX  â€º  分享创造

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

  •  3
     
  •   ldq404 · 312 天前 · 2397 次点击
    这是一个创建于 312 天前的主题,其中的信息可能已经有所发展或是发生改变。

    抽奖插件

    🎨 奖品 / 文字 / 图片 / 颜色 / 按钮均可配置
    🚦 支持同步 / 异步抽奖
    🎯 概率前 / 后端可控
    🎈 自动根据 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 条附言  Â·  312 天前

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

    demo2-img

    • ps: 图片 demo 基于 github 托管, 如果图裂了, 你可以去官网示例中自行观赏这几个 demo

    • demo 示例: https://100px.net/demo/wheel/xc.html

    第 2 条附言  Â·  298 天前

    新增 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   312 天前   ❤️ 1
    自己做自己的欧皇 😂
    ldq404
        2
    ldq404   312 天前
    @ARhen 哈哈, 想中什么奖就中什么
    justin2018
        3
    justin2018   312 天前   ❤️ 1
    可以 可以

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