移动vue大转盘抽奖

近期做大转盘的抽奖的形式，需要动态奖品的数量，之前计划写源生的js和css实现，相对来说是比较困难的，最好的办法还是利用canvas操作。

最近找到vue的canvas开源的插件，很高校的解决了整个问题。数据是我随便写的，应该可以执行。可能有点丑，后期样式自己随便调。

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

main.js全局引入

import VueLuckyCanvas from '@lucky-canvas/vue'
Vue.use(VueLuckyCanvas)

/*** 按需引入*/


import { LuckyWheel, LuckyGrid } from '@lucky-canvas/vue'
// 大转盘抽奖
Vue.components('LuckyWheel', LuckyWheel)

界面中直接

<LuckyWheel

class="luck-draw"

ref="LuckyWheel"

width="340px"

height="340px"

:blocks="blocks"

:prizes="prizes"

:buttons="buttons"

:default-style="defaultStyle"

:default-config="defaultConfig"

@start="startCallBack"

@end="endCallBack"

blocks 背景配置

buttons 按钮的配置

default-style 默认样式

default-config 默认配置

prizes 奖品的配置

/>

配置选项全部在data中设置

data(){return{blocks: [{ padding: '10px', background: '#869cfa' }],prizes: [{ fonts: [{ text: '0' }], background: '#e9e8fe' },{ fonts: [{ text: '1' }], background: '#b8c5f2' },{ fonts: [{ text: '2' }], background: '#e9e8fe' },{ fonts: [{ text: '3' }], background: '#b8c5f2' },{ fonts: [{ text: '4' }], background: '#e9e8fe' },{ fonts: [{ text: '5' }], background: '#b8c5f2' },],defaultStyle: {fontColor: '#303133',fontSize: '10px',lengthLimit:98,},defaultConfig: {gutter: '1px',},}
}

startCallBack	按钮点击执行事件
endCallBack	旋转结果执行事件

执行转盘旋转的方法：

 this.$refs.LuckyWheel.play();

执行转盘结束和定在位置的操作：index是奖品数组的序列号

  this.$refs.LuckyWheel.stop(index);

移动vue大转盘抽奖相关推荐

php仿京东幸运大转盘抽奖,原生js vue 抽奖插件仿京东大转盘抽京豆（原创）...
插件描述:一个基于原生 javript vue2 vue3 的大转盘抽奖插件更新时间:2020-11-24 00:18:54 在 vue2.x / vue3.x 中使用方式 1:通过 import ...
vue移动端大转盘抽奖
vue移动端幸运大转盘抽奖要求: 点击开始后转盘开始转动,5秒后转盘逐渐减速并停止,最终位置随机定位在10个奖项中的某一个,并弹出中奖信息 <template><div class ...
html转盘游戏,html5大转盘抽奖实例源码(基于vue.js)
[实例简介] [调试步骤] # 安装依赖 npm install # 开启本地服务器localhost:8088 npm run dev # 发布环境 npm run build #然后静待你的浏览器 ...
php 打乱数组顺序_PHP实现大转盘抽奖算法
php中文网最新课程每日17点准时技术干货分享本文通过具体的实例向大家介绍了PHP语言实现大转盘抽奖算法,希望对大家学习PHP抽奖有所帮助. 流程: 1.拼装奖项数组: 2.计算概率: 3.返回中 ...
Jquery写的幸运大转盘抽奖实例,用asp.net处理的服务器逻辑，附源码下载
[实例简介] 该幸运大转盘抽奖实例已实现服务器端的业务逻辑代码,稍加改动就可以应用实际了文件:590m.com/f/25127180-488779229-66bbf7(访问密码:551685) [实 ...
幸运大转盘抽奖（前端）
采用Lottery.js插件, 无依赖, 简单易用(复制粘贴就能用) 效果图(可自己写算法定义概率,可自己定义奖项数量和名称) html <!DOCTYPE html> <html ...
PHP+AJAX开发幸运大转盘抽奖
PHP+AJAX开发幸运大转盘抽奖 PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率奖品设置 1 $prizes = array( 2 0 => array( 3 &q ...
js框架jquery实现的幸运大转盘抽奖程序代码,兼容多种浏览器(Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Chrome)
博客目录 js框架jquery实现的幸运大转盘抽奖程序代码实现功能截图系统功能使用技术代码写在最后 js框架jquery实现的幸运大转盘抽奖程序代码本系统实现了一个幸运转盘抽奖,兼容多种浏 ...
cocos2dx 圆盘抽奖_cocos2d编写的类似幸运大转盘抽奖源码
压缩包内容概览: cocos2d编写的类似幸运大转盘抽奖源码-帮你选择 ; 随机 ; 程序委托 ; 背高清 ; 背 ipad ; 返回 ; 默认 ; 默认@2x ; 图标-72 ; 图标@2x ; 我 ...
C#保留2位小数几种场景总结游标遍历所有数据库循环执行修改数据库的sql命令原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断...
C#保留2位小数几种场景总结场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25. ...

移动vue大转盘抽奖

移动vue大转盘抽奖相关推荐

最新文章

热门文章

blocks	背景配置
buttons	按钮的配置
default-style	默认样式
default-config	默认配置
prizes	奖品的配置