Vue-prize NPM | npm.io

vue-prize

vue-抽奖组件

vue-prize

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

Installation

Using yarn:

yarn add vue-prize

Using npm:

npm i prize

快速上手

引入vue-prize

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

Example

<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)