uniapp vue 实现大转盘

最新推荐文章于 2025-06-20 23:46:32 发布

原创

最新推荐文章于 2025-06-20 23:46:32 发布 · 1.4k 阅读

8 ·

CC 4.0 BY-SA版权

嘎嘎淘

文章标签：

#arcgis

vue uniapp 小程序抽奖转盘老虎机和九宫格
1.npm 下载插件

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

# 或者 yarn 安装
yarn add @lucky-canvas/vue@latest
2. 然后找到 main.js 引入插件并 use
// vue2完整加载
import VueLuckyCanvas from '@lucky-canvas/vue'
Vue.use(VueLuckyCanvas)

//vue3 完整加载
import VueLuckyCanvas from '@lucky-canvas/vue'
createApp(App).use(VueLuckyCanvas).mount('#app')
3.在页面中使用

<template>
	<view style="border: 1px solid blue;">
		<LuckyGrid
			ref="myLucky"
			width="600rpx" //九宫格宽度
			height="600rpx" //九宫格高度
			:blocks="blocks" //九宫格外圈样式背景
			:prizes="prizes" // 九宫格奖品列表
			:buttons="buttons"  //九宫格按钮
			@start="startCallBack" //开始抽奖事件
			@end="endCallBack" //结束抽奖事件
		/>
	</view>
</template>

<script>
import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid'; // 引入九宫格插件
export default {
	components: { LuckyGrid },
	data() {
		return {
			blocks: [{ padding: '10px', background: '#869cfa' }, { padding: '10px', 
            background: '#e9e8fe' }],
			prizes: [
				{ x: 0, y: 0, range: 0, fonts: [{ text: '0', top: '35%' }], imgs: [{ src: 
                require('../../static/image/rose.png'), width: '50%', top: '22%' 
                }],background: '#E77697' },
				{ x: 1, y: 0, range: 0, fonts: [{ text: '现金200元', top: 
                '70%',fontColor: '#fff', fontSize: '24rpx' },], imgs: