wd-lottery 抽奖插件

一个基于 vue 的抽奖插件

在 vue2.x / vue3.x 中使用

方式 1：通过 import 引入

1. 首先安装插件

# npm 安装：
npm install wd-lottery

# yarn 安装：
yarn add wd-lottery

2. 然后找到 main.js 引入插件并 use

// vue2.x
import { LuckyWheel } from 'wd-lottery'

// TODO: vue3.x 
import { LuckyWheel } from 'wd-lottery/vue3'

3. 最后在组件内使用 <LuckyWheel></LuckyWheel>大转盘抽奖

<template>
  <div>
    <!-- 大转盘抽奖 -->
    <LuckyWheel
      width="200px"
      height="200px"
    >
      <template v-slot:bg>
        <img src="转盘背景" class="bg" alt="">
      </template>
      <template v-slot:item="{ item }">
        <div class="info">
          <img class="prize-img" :src="item.image" />
          <div class="prize-name">{{item.name}}</div>
        </div>
      </template>
    </LuckWheel>
  </div>
</template>

方式 2：通过 script 标签引入

为了避免 CDN 链接出现异常或波动，我非常建议你缓存到本地或服务器

• vue2.x：
  • 最新版本： https://cdn.jsdelivr.net/npm/wd-lottery/dist/wd-lottery.min.js

Attributes

参数	必输	默认	类型	说明	备注
prizeList	是		array	奖品列表
width	是		string	转盘宽度
height	否	=width	string	转盘高度
turnsNumber	否	5	int	转动的圈数
turnsTime	否	5	int	转动持续时间（秒）
showBg	否	true	boolean	是否启用内置转盘背景
prizeBgColors	否	['#F47F45', '#FFA468']	array	内置转盘背景颜色	每一块扇形的背景色，循环填充
borderColor	否	#ff9800	string	内置转盘背景每一块扇形的外边框颜色

Methods

方法名	说明	参数
rotate	转盘开始转动方法	Function(index)

Events

方法名	说明	回调参数
over	转盘停止转动	当前奖品信息

Slot

name	说明
bg	转盘背景
item	转盘 Item 的内容