vue-prize
v1.1.6
Published
vue-抽奖组件
Downloads
6
Readme
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) |