lucky-canvas抽奖插件-大转盘-九宫格-老虎机

地址 https://100px.net/usage/uni-app.html

在vue中使用

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

在mian.js中引入：

// 完整加载
import VueLuckyCanvas from '@lucky-canvas/vue'
Vue.use(VueLuckyCanvas)

下面是一个基本的 demo 更多抽奖类型或复杂的效果可以跳转示例页面查看

<template><div><LuckyWheelref="myLucky"width="300px"height="300px":prizes="prizes":blocks="blocks":buttons="buttons"@start="startCallback"@end="endCallback"/></div></template>
<script>
export default {name: "index",data() {return {//背景区域blocks: [{ padding: "13px", background: "#617df2" }],//prizes奖品列表   top文字的位置  count奖品数量prizes: [{ fonts: [{ text: "手机", top: "10%" }],background: "#e9e8fe"},{ fonts: [{ text: "1", top: "10%" }], background: "#b8c5f2" },{ fonts: [{ text: "2", top: "10%" }], background: "#e9e8fe" },{ fonts: [{ text: "3", top: "10%" }], background: "#b8c5f2" },{ fonts: [{ text: "4", top: "10%" }], background: "#e9e8fe" },{ fonts: [{ text: "5", top: "10%" }], background: "#b8c5f2" },{ fonts: [{ text: "6", top: "10%" }], background: "#e9e8fe" },{ fonts: [{ text: "7", top: "10%" }], background: "#b8c5f2" }],//抽奖按钮buttons: [{ radius: "50px", background: "#617df2" },{ radius: "45px", background: "#afc8ff" },{radius: "40px",background: "#869cfa",pointer: true, //是否显示指针fonts: [{ text: "开始\n抽奖", top: "-20px" }] //奖品文字}]};},methods: {// 点击抽奖按钮会触发star回调,star回调开始抽奖前startCallback() {// 调用抽奖组件的play方法开始游戏this.$refs.myLucky.play();// 模拟调用接口异步抽奖setTimeout(() => {// 返回的是奖品列表，index从0开始const index = Math.floor(Math.random() * 9); //Math.floor(Math.random() * 9)返回一个0-8之间的随机整数console.log(index, "随机数");// 调用stop停止旋转并传递中奖索引this.$refs.myLucky.stop(index);}, 3000);},// 抽奖结束会触发end回调，end回调结束抽奖后endCallback(prize) {console.log(prize);}}
};
</script>

lucky-canvas抽奖插件-大转盘-九宫格-老虎机相关推荐

canvas抽奖插件大转盘和九宫格
下载地址两款canvas抽奖插件包含大转盘和九宫格// 大转盘抽奖 let luckyWheel = new LuckyCanvas.LuckyWheel({ el: "#my-lucky ...
canvas实现抽奖插件—大转盘和九宫格
大家好,我是小王,一个很喜欢Coding但很笨的小女孩. 很喜欢这句话:人数没有白走的路,每一步都算数,关注我,后期分享更多资源! 效果如下: 部分代码如下(需要的源码小伙伴可以私信我): <! ...
Canvas实现微信大转盘抽奖代码
Canvas实现微信大转盘抽奖代码,canvas结合jquery实现的一款大转盘抽奖代码,奖品图片均由canvas绘制,可自定义奖项. jquery抽奖微信大转盘jquery抽奖转盘微信抽奖源代码微信 ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
抽奖动画大转盘抽奖思路与做法
抽奖是各类营销活动中最常见的一种形式,本产品需求大致如下:转盘周围跑马灯交替闪烁,点击抽奖,大转盘旋转,调用接口获取抽奖结果,大转盘指针指向对应的奖品.高保如下图1 2.整体思路本需求要求跑马灯交替 ...
uni-app - 九宫格老虎机抽奖机插件源码（支持服务端API接口控制最终中奖的奖品，自定义组件可随意配置和控制，带组件文档轻松 DIY 自己的营销页抽奖机）幸运抽奖圆形大转盘插件组件
前言如果您需要圆形大转盘抽奖机(如下图所示),请访问:这篇文章. 关于九宫格式老虎机宫格跳动抽奖,网上的大部分源码非常乱且无注释,根本无法改造, 本文提供的组件源码,代码干净整洁注释详细,并且配备超 ...
uni-app - 幸运抽奖圆形大转盘插件组件（支持后端接口确定最终奖品，可自定义轮盘宽高、颜色、字号、按钮等等，全端兼容代码干净整洁无 BUG，官方最好用的营销页面抽奖转盘源码）老虎机九宫格式抽奖机
前言如果您需要九宫格式抽奖机(如下图所示) ,请访问:这篇文章. 网上很多文章都非常乱且一堆 BUG,本文提供无 BUG 的 "组件式" 抽奖大转盘, 您只需要复制粘贴,按照组件 ...
Android之九宫格抽奖及大转盘抽奖
一:先来张效果图二:实现步骤: -------.九宫格抽奖是从后台服务器获取的数据,图片文字以及抽奖选中位置都是后台控制一:九宫格抽奖 1九宫格抽奖工具类(里面包含网络请求,不需要的可去掉) pa ...
php幸运大抽奖,幸运大转盘-jQuery+PHP实现的抽奖程序-完善中
小雨在线网站自营销研究之幸运大转盘-jQuery+PHP实现的抽奖程序-完善中 1.[代码][PHP]代码小雨在线网站自营销研究 $(function () { $("#startbtn& ...

lucky-canvas抽奖插件-大转盘-九宫格-老虎机

lucky-canvas抽奖插件-大转盘-九宫格-老虎机相关推荐

最新文章

热门文章