【lucky-canvas插件】在Vue3实现大转盘&九宫格&老虎机抽奖

目录

前言

一、lucky-canvas介绍

二、lucky-canvas使用（Vue3）

1. 安装

2. 注册

3. 使用

三、九宫格为例的具体使用

1. 组件使用

2. 常用配置

① blocks 背景

② prizes 奖品

③ buttons 抽奖按钮

3. 回调函数

① start 开始抽奖前

② end 结束抽奖后

 4. 组件方法

① init() 初始化

② play() 开始抽奖

③ stop() 缓慢停止

四、三种抽奖完整代码示例

1. 转盘

2.九宫格

3.老虎机

---

前言

平时做项目时常会遇到抽奖需求。如果一个一个原生手敲的话，很费时间。所以找到了一款抽奖插件——lucky-canvas，一个基于 JavaScript 的跨平台 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件。可以满足绝大部分的项目需求。（高定制并且细节较多的话仍需原生手写）。

本文将介绍该插件的使用方法，并以vue3项目举例。

一、lucky-canvas介绍

该插件基于 JS + Canvas 实现的【大转盘 & 九宫格 & 老虎机】抽奖，致力于为 WEB 前端提供一个功能强大且专业可靠的营销组件，只需要通过简单配置即可实现自由化定制，帮助你快速的完成产品需求。

该插件可以在跨平台使用，比如：

 该插件也提供了各种示例，有基础示例和完整示例，比如：

 

并且提供了api文档：

二、lucky-canvas使用（Vue3）

1. 安装

这里是以Vue为例，所以下载的是 @lucky-canvas/vue，如果是其他框架，比如是react，就是下载@lucky-canvas/vue/react，依此类推。

# npm 安装
npm install @lucky-canvas/vue@latest

# 或者 yarn 安装
yarn add @lucky-canvas/vue@latest

# 或者 pnpm 安装
pnpm install @lucky-canvas/vue@latest

2. 注册

main.ts:

// 完整加载
import VueLuckyCanvas from '@lucky-canvas/vue'

const app = createApp(App)
app.use(VueLuckyCanvas)
app.mount('#app')

3. 使用

直接在template里面以组件的形式进行使用。

官网的Vue3示例只提供了转盘，名称如下：

 其余的，九宫格对应为LuckyGrid，老虎机对应为SlotMachine。

三、九宫格为例的具体使用

1. 组件使用

使用组件，并且给定默认宽高和背景。

会出现：

其中的blocks，就是九宫格盒子的背景。也是我们接触到的第一个配置。 

2. 常用配置

① blocks 背景

用数组表示。

② prizes 奖品

用数组表示。

x和y是相对坐标，x表示第几行，y表示第几列。

font是文字，并且可以通过top设置距离顶部的距离。还有很多其他字段，可以设置字体颜色大小等等。

background是背景，背景还可以通过imgs字段替换成图片。

③ buttons 抽奖按钮

加了抽奖按钮后，中间的空就填好了。

x和y是相对坐标，x表示第几行，y表示第几列。

font是文字，并且可以通过top设置距离顶部的距离。还有很多其他字段，可以设置字体颜色大小等等。

background是背景，背景还可以通过imgs字段替换成图片。

3. 回调函数

① ① start 开始抽奖前

当点击抽奖按钮时, 触发该回调, 此时你可以决定是否要开始游戏。如果你是多按钮, 则可以通过第二个参数知道是哪个按钮触发的抽奖

② end 结束抽奖后

当游戏完全结束后, 触发该回调, 你可以在此时弹窗恭喜用户。参数则是中奖的奖品。

 4. 组件方法

① init() 初始化

调用该方法时, 会立刻停止游戏, 回到最初始的状态。

② play() 开始抽奖

调用该方法时, 游戏才会开始。

③ stop() 缓慢停止

调用该方法时, 才会缓慢停止, 参数就是中奖奖品的索引。

四、三种抽奖完整代码示例

1. 转盘

2.九宫格

3.老虎机

更多可见官网：100px.net | 基于 Js / TS / Vue / React / 微信小程序 / uni-app / Taro 的【大转盘 & 九宫格 & 老虎机】抽奖插件https://100px.net/