# vue-prize

> vue-抽奖组件

Latest version **1.1.6** (published 2018-07-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-prize
pnpm add vue-prize
yarn add vue-prize
bun add vue-prize
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2018-07-24 |
| First published | 2018-04-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 218.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | loo4p |
| Maintainers | loo4p |
| Keywords | Vue, prize, hammer |

## Links

- npm: https://www.npmjs.com/package/vue-prize
- Repository: https://github.com/loo41/vue-prize
- Homepage: https://github.com/loo41/vue-prize#readme
- Issues: https://github.com/loo41/vue-prize/issues
- npm.io page: https://npm.io/package/vue-prize

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.5.16
- [vue-prize](https://npm.io/package/vue-prize.md) ^1.1.1
- [vue-hot-reload-api](https://npm.io/package/vue-hot-reload-api.md) ^2.3.0

## Recent versions

- 1.1.6 (latest) — 2018-07-24
- 1.1.5 — 2018-04-15

## README

# vue-prize
vue-抽奖组件


# vue-prize
> vue-prize是基于Vue和canvas组件。


## Installation

Using yarn:

```bash
yarn add vue-prize
```

Using npm:

```bash
npm i prize
```

## 快速上手

引入vue-prize

```javascript
// 引入vue-prize
import prize from 'vue-prize';
new Vue({
  el: 'root',
  components: {
    prize
  }
}）
```

## Example
```javascript
<template>
<div class="appBox">
  <div class="app">
    <prize :data="data"/>
  </div>
</div>
</template>

<script>
import prize from 'vue-prize'
export default {
  name: 'App',
  data () {
    return {
      data: {
        type: 2,
        notClick: true,
        endEvent: this.endBack,
        reword: [{prize: '一等奖', content: '奔驰', PR: 0.1},{prize: '谢谢参与', content: '感谢参与', PR: 0.1}, {prize: '二等奖', content: '宝 马', PR: 0.1},          
        {prize: '谢谢参与',content: '感谢参与', PR: 0.1}, {prize: '开始抽奖'},  {prize: '三等奖',content: '奔驰',  PR: 0.1}, {prize: '谢谢参与', content: '感谢参与', PR: 0.1},  
        {prize: '特等奖', content: '奔驰+宝马', PR: 0.1},  {prize: '谢谢参与', content: '感谢参与', PR: 0.1}],
        square: {
          unitStyle: 'font-size: 20px; text-align: center; background: #448aff; color: #bbdefb;',
          speed: 50,
          startRewordStyle: 'font-size: 30px; text-align: center; background: #03a9f4',
          itemStyle: 'background:  #212121!important'
        },
        round: {
          height: 500,
          width: 500,
          brgColor: {
            bigOne: '#303f9f',
            bigTwo: '#c5cae9',
            small: '#3f51b5'
          }
        }
      }
    }
  },
  components: {
    prize
  },
  methods: {
    endBack (data) {
      const [info, row] = data
      alert(info.prize)
    }
  }
}
</script>

<style>
.appBox{}
.app{
  height: 500px;
  width: 500px;
}
</style>
```

## 使用
#### Props
| 名称              | 类型               | 默认             | 说明                                         |
| ----------------| ---------------- | ---------------| ------------------------------------------|
| data            | Object           |  {}            |  对象数据   |
| data.type       | Number           |  1             |  奖盘类型 (1 or 2)  |
| data.notClick   | Boolean          |  true          |  控制奖盘是否可以点击抽奖|
| data.endEvent   | Function         |  null          |  抽奖结束后的事件 参数 {data} (let [info, row] = data)   |
| data.reword     | Object           |  [{prize: '', PR: 0.1, content: ''}]          |  奖品{prize} - 概率{PR} - 描述{content} (参考Example)|
| data.square     | Object           |  {unitStyle: '', speed: 50, startRewordStyle: '', itemStyle: ''} | 方格样式{unitStyle} - 速度{speed} - 点击开始样式{startRewordStyle} - 跳动方格样式{itemStyle} (参考Example)      |
| data.round      | Object           |  圆形抽奖组件样式 { height: 500, width: 500, brgColor: {bigOne: '#303f9f', bigTwo: '#c5cae9', small: '#3f51b5'}} | 画布高度{height} - 画布宽度{width} - 组件样式颜色{brgColor} (参考Example) |

---
_Source: https://npm.io/package/vue-prize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._