# @winman-f2e/lottery-wheel

> A library created by fle-cli.

Latest version **0.1.1** (published 2018-09-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @winman-f2e/lottery-wheel
pnpm add @winman-f2e/lottery-wheel
yarn add @winman-f2e/lottery-wheel
bun add @winman-f2e/lottery-wheel
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2018-09-13 |
| First published | 2018-09-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ansenhuang |
| Maintainers | ansenhuang, azgaga, juzhikan, liushichuan, longyunxia, sherrywu, wuww5511, yaochen, yun77op |
| Keywords | fle-cli, webpack |

## Links

- npm: https://www.npmjs.com/package/@winman-f2e/lottery-wheel
- npm.io page: https://npm.io/package/@winman-f2e/lottery-wheel

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2018-09-13
- 0.1.0 — 2018-09-07

## README

# 抽奖转盘

转盘抽奖场景

## 开始安装

```bash
$ npm install @winman-f2e/lottery-wheel
```

## 如何使用

```js
import LotteryWheel from '@winman-f2e/lottery-wheel'

document.getElementById('root').innerHTML = `
  <div class="container">
    <div class="plate"></div>
    <div class="indicator"></div>
  </div>
`

const prizes = [
  {
    id: 'vip_2',
    name: '2天VIP'
  },
  {
    id: 'coin_2000',
    name: '2000金币'
  },
  {
    id: 'vip_7',
    name: '7天VIP'
  },
  {
    id: 'cash_888',
    name: '888元现金红包'
  },
  {
    id: 'vip_30',
    name: '30天VIP'
  },
  {
    id: 'coupon_66',
    name: '66钻石券'
  }
]

// 转盘转动
const lotteryWheel = new LotteryWheel({
  el: '.plate',
  initDeg: -30,
  prizes
})

// 指针转动
// const lotteryWheel = new LotteryWheel({
//   el: '.indicator',
//   prizes: [prizes[0]].concat(prizes.slice(1).reverse())
// })

document.querySelector('.indicator').addEventListener('click', () => {
  // 伪装转动，等待抽奖结果
  lotteryWheel.mock()

  // 模拟异步请求，获取抽奖结果
  setTimeout(() => {
    let index = Math.floor(Math.random() * 6)
    lotteryWheel.success(prizes[index].id, prize => {
      console.info(prize)
    })
    // lotteryWheel.fail()
  }, 2000)
}, false)
```

## API

### LotteryWheel

```js
const lotteryWheel = new LotteryWheel({
  el: '.plate', // 转动的dom节点，dom或字符串
  prizes: [{ id: 'test', name: 'xxx' }], // 奖品列表，要有id，以便查找对应的奖品
  initDeg: 0, // 初始化时的旋转角度
  offsetDeg: 0, // 旋转到结果时需要偏移的角度
  mockSpeed: 5, // 模拟转动的速度，越大越快
  turnNumber: 5, // 获得抽奖结果后，执行旋转动画的圈数
  timingFunction: 'cubic-bezier(0.38, 0.26, 0.25, 1)', // 旋转动画曲线，若需修改，注意尽量和模拟速度保持流畅的衔接，避免出现停顿
  duration: 5000 // 动画过渡时间，单位ms
})
```

### 实例方法

* mock：模拟转动
* success：获得抽奖结果时执行，参数：
  - prizeId：用于从prizes的id中寻找对应的奖品
  - callback：动画结束后的回调，参数为prize（奖品列表的一项）
* fail：抽奖失败时调用，转盘会重置到初始状态

## 环境配置

构建工具

``` bash
$ npm install -g fle-cli

# yarn
$ yarn global add fle-cli
```

命令说明

```bash
# 本地开发
fle dev

# 代码构建
fle build
```

查看更多说明： [构建文档](https://www.npmjs.com/package/fle-cli)

---
_Source: https://npm.io/package/@winman-f2e/lottery-wheel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._