vue3+ts 实现转盘抽奖 组件

安装Lucky-canvas抽奖插件   中文官方文档:

https://100px.net/

封装一个Spinner.vue组件

1.安装插件

# npm 安装
npm install @lucky-canvas/vue@latest
# yarn 安装
yarn add @lucky-canvas/vue@latest

 2.找到 main.ts 引入插件并 use

import VueLuckyCanvas from '@lucky-canvas/vue'

createApp(App).use(VueLuckyCanvas).mount('#app')

3.封装组件 

<template>
	<LuckyWheel ref="myLucky" width="300px" height="300px" :prizes="prizes" :blocks="blocks" :buttons="buttons"
		:defaultConfig="defaultConfig" @start="startCallback" @end="endCallback" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
//转盘容器
const blocks = [{
	padding: '30px',
	//边框图片
	imgs: [{
		src: 'xxx',//图片地址
		width: '110%',
		height: '100%',
		rotate: true
	}]
},
]
//单个内容图片
const prizeImg = {
	src: 'xxx',//图片地址
	width: '30%',
	top: '40%',
	left: '-2%'
}
//奖品数组
const prizes = [
	{ fonts: [{ text: '100能量币', top: '10%', fontSize: '14px', fontColor: '#e74b44' }], background: '#ffeaa7', imgs: [prizeImg] },
	{ fonts: [{ text: '1', top: '10%' }], background: '#ffeaa7', imgs: [prizeImg] },
	{ fonts: [{ text: '2', top: '10%' }], background: '#ffeaa7', imgs: [prizeImg] },
	{ fonts: [{ text: '3', top: '10%' }], background: '#ffeaa7', imgs: [prizeImg] },
	{ fonts: [{ text: '4', top: '10%' }], background: '#ffeaa7', imgs: [prizeImg] },
	{ fonts: [{ text: '5', top: '10%' }], background: '#ffeaa7', imgs: [prizeImg] },
	{ fonts: [{ text: '6', top: '10%' }], background: '#ffeaa7', imgs: [prizeImg] },
	{ fonts: [{ text: '7', top: '10%' }], background: '#ffeaa7', imgs: [prizeImg] },
]
//中心按钮
const buttons = [{
	radius: '25%',
	imgs: [{
		src: 'xxx',//图片地址
		width: '100%',
		top: '-130%'
	}],
	// background: '#fb8c76',
	pointer: true,
	fonts: [{ text: '点击\n抽奖', top: '-15px', left: '3px', fontSize: '16px', fontColor: '#fff' }]
}]
//设置间距
const defaultConfig = {
	gutter: '5px'
}
// 点击抽奖按钮会触发star回调.
const myLucky = ref()
const startCallback = () => {
	// 调用抽奖组件的play方法开始游戏
	myLucky.value.play()
	// 模拟调用接口异步抽奖
	setTimeout(() => {
		// 假设后端返回的中奖索引是0,此处设置随机数
		const index = parseInt(Math.random() * prizes.length + '')
		console.log(index)
		// 调用stop停止旋转并传递中奖索引
		myLucky.value.stop(index)
	}, 3000)
}
// 抽奖结束会触发end回调
const endCallback = (prize: any) => {
	console.log(prize)
}
</script>