- 实现的效果
- 操作步骤
- 首先安装插件
# npm 安装
npm install @lucky-canvas/vue@latest
# 或者 yarn 安装
yarn add @lucky-canvas/vue@latest
- 在main.js中引入
// 完整加载
import VueLuckyCanvas from '@lucky-canvas/vue'
Vue.use(VueLuckyCanvas)
- 最后在组件内使用
<LuckyGrid
ref="myLucky"
width="22.68rem"
height="22.68rem"
rows="4"
cols="4"
:prizes="prizes"
:blocks="blocks"
:buttons="buttons"
:defaultStyle="defaultStyle"
:activeStyle="activeStyle"
:defaultConfig="defaultConfig"
@start="startCallback"
@end="endCallback"
/>
data() {
return {
blocks: [
{
padding: '1.5rem',
imgs: [
{
src: require(`@/assets/LuckyDraw/bg2.png`),
width: '22.68rem', //为了h5适配,1rem=16px
height: '22.68rem',
},
],
},
],
prizes: [],
//中奖标记
activeStyle: {
background: 'transparent',
},
//默认样式
defaultStyle: {
borderRadius: '0.62rem', //圆角20px
},
//默认配置
defaultConfig: {
gutter: '0.18rem', //格子之间的缝隙2px
},
}
},
methods:{
getPrizesList() {
const prizes = []
const data = [
{
x: 0,
y: 0,
value: '10000Coins',
src: require(`@/assets/LuckyDraw/10000coins.png`),
},
{
x: 1,
y: 0,
value: '+0%',
src: require(`@/assets/LuckyDraw/+0%.png`),
},
{
x: 2,
y: 0,
value: '+2000%',
src: require(`@/assets/LuckyDraw/+2000%.png`),
},
{
x: 3,
y: 0,
value: '+50%',
src: require(`@/assets/LuckyDraw/+50%.png`),
},
{
x: 3,
y: 1,
value: '+0%',
src: require(`@/assets/LuckyDraw/+0%.png`),
},
{
x: 3,
y: 2,
value: '+100%',
src: require(`@/assets/LuckyDraw/+100%.png`),
},
{
x: 3,
y: 3,
value: '+200%',
src: require(`@/assets/LuckyDraw/+200%.png`),
},
{
x: 2,
y: 3,
value: '+0%',
src: require(`@/assets/LuckyDraw/+0%.png`),
},
{
x: 1,
y: 3,
value: '+1000%',
src: require(`@/assets/LuckyDraw/+2000%.png`),
},
{
x: 0,
y: 3,
value: '+500%',
src: require(`@/assets/LuckyDraw/+500%.png`),
},
{
x: 0,
y: 2,
value: '+300%',
src: require(`@/assets/LuckyDraw/+300%.png`),
},
{
x: 0,
y: 1,
value: '+0%',
src: require(`@/assets/LuckyDraw/+0%.png`),
},
]
data.forEach((item) => {
prizes.push({
x: item.x,
y: item.y,
imgs: [
{
src: require(`@/assets/LuckyDraw/noChange.png`),
width: '79px',
height: '79px',
activeSrc: require(`@/assets/LuckyDraw/change.png`),
},
{
src: item.src,
width: '50px',
height: '45px',
top: '7px',
},
],
fonts: [
{
text: item.value,
top: '51px',
fontColor: '#fff',
fontSize: '10px',
fontStyle: 'Poppins-SemiBold, Poppins',
fontWeight: '500',
},
],
})
})
this.prizes = prizes
},
}
// 点击抽奖按钮会触发star回调
startCallback(e,button) {
// 调用抽奖组件的play方法开始游戏
console.log(e,button,7777);
this.$refs.myLucky.play()
// 模拟调用接口异步抽奖
setTimeout(() => {
// 假设后端返回的中奖索引是0
const index = 7
// 调用stop停止旋转并传递中奖索引
this.$refs.myLucky.stop(index)
}, 1000)
},
// 抽奖结束会触发end回调
endCallback(prize) {
console.log(prize)
setTimeout(() => {
......
}, 500)
},
- 具体参考地址