|适配框架|npm包|最新版本|npm下载量|CDN使用量| | :-: | :-: | :-: | :-: | :-: | |JS / JQ|lucky-canvas|||| |Vue2.x / Vue3.x|@lucky-canvas/vue|||| |React|@lucky-canvas/react|||-| |UniApp|@lucky-canvas/uni|||-| |Taro3.x|@lucky-canvas/taro|||-| |微信小程序|@lucky-canvas/mini|||-|

在 vue2.x / vue3.x 中使用

• 跳转官网 查看详情

组件列表

• <lucky-wheel> - 大转盘抽奖
• <lucky-grid> - 九宫格抽奖
• <slot-machine> - 老虎机抽奖
• <lucky-scratch> - 刮刮卡抽奖 ✨ 新增

刮刮卡快速开始

<template>
  <div class="scratch-wrapper">
    <div class="prize-content">🎉 恭喜中奖 🎉</div>
    <lucky-scratch
      ref="scratchRef"
      width="300px"
      height="150px"
      :mask="{ type: 'color', color: '#ccc' }"
      :scratch="{ radius: 20, percent: 0.5 }"
      @once-before-start="handleAuth"
      @success="handleSuccess"
    />
  </div>
</template>

<script>
export default {
  methods: {
    handleAuth(resolve) {
      // 权限校验（只在第一次刮动时触发）
      resolve(true) // true 允许，false 阻止
    },
    handleSuccess(progress) {
      alert('恭喜中奖！')
    }
  }
}
</script>

查看 vue2.html 和 vue3.html 获取完整示例

🙏🙏🙏 点个Star

如果您觉得这个项目还不错, 可以在 Github 上面帮我点个star, 支持一下作者 ☜(ﾟヮﾟ☜)