vue2插件之@lucky-canvas/vue，大转盘、抽奖、老虎机

news2024/11/24 1:26:35

提示：vue2插件

文章目录

    • @[TOC](文章目录)
  • 前言
  • 一、查看nodejs版本
  • 二、创建项目
  • 三、大转盘
  • 四、抽奖
  • 五、老虎机
  • 六、官网
  • 总结

前言

@lucky-canvas/vue

一、查看nodejs版本

node -v

在这里插入图片描述

二、创建项目

1、安装插建

npm install @lucky-canvas/vue --save

在这里插入图片描述
在这里插入图片描述
2、目录结构
在这里插入图片描述
3、引用main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import VueLuckyCanvas from '@lucky-canvas/vue';
Vue.use(VueLuckyCanvas);
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

4、配置路由src/router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import LuckyWheel  from '@/components/LuckyWheel.vue';
import LuckyGrid  from '@/components/LuckyGrid.vue';
import SlotMachine   from '@/components/SlotMachine .vue';
Vue.use(Router);
const routes = [
    { path: '/', component: LuckyWheel  },
    { path: '/lucky-wheel', component: LuckyWheel  },
    { path: '/lucky-grid', component: LuckyGrid  },
    { path: '/slot-machine', component: SlotMachine },
  ]
export default new Router({ routes })

三、大转盘

1、src/components/LuckyWheel.vue

<template>
  <div class="lucky_wheel">
    <h1>LuckyWheel页面</h1>
    <template>
    <LuckyWheel
      ref="myLucky"
      width="400px"
      height="400px"
      :prizes="prizes"
      :blocks="blocks"
      :buttons="buttons"
      @start="startCallback"
      @end="endCallback"
    />
</template>
</div>
</template>

<script>
export default {
  name: 'LuckyWheel1',
  data () {
    return {
      //转盘背景
      blocks: [
        { 
          padding: '40px',     //可旋转区域与转盘边缘的距离
          background: '#eee',  //转盘背景色
          //转盘背景图
          imgs:[
            {
              src:require('@/assets/LuckyWheel.png'),   //图片url
              top:'0',     //图片距顶部距离
              width:'400px',  //图片宽
              height:'400px', //图片高
            }
          ],
        }
      ],
      // 扇形数组
      prizes: [
        //单个扇形
        { 
          //奖品文字
          fonts: [
            { 
              text: '苹果',        //文字
              top: '10%',          //文字距顶部距离
              fontColor:'#f00',    //文字颜色
              fontSize:'16px',     //文字大小
              fontStyle:'微软雅黑', //字体
              fontWeight:'500',    //加粗
              lineHeight:'16px',   //行高
              wordWrap:true,       //换行
              lineClamp:2,         //2行，剩下的...
              wordWrap:true,       //换行
            }
          ], 
          //奖品图
          imgs:[
            {
              src:'https://img95.699pic.com/xsj/1s/5e/0g.jpg%21/fh/300',   //图片url
              top:'30%',     //图片距顶部距离
              width:'60px',  //图片宽
              height:'60px', //图片高
            }
          ],
          background: '#FFF402',  //扇形背景色
          range:10,  //当前prize.range/所有prize中range总和
        },
        { fonts: [{ text: '橘子', top: '10%' }], background: '#76C5F0' },
        { fonts: [{ text: '香蕉', top: '10%' }], background: '#2A1570' },
        { fonts: [{ text: '葡萄', top: '10%' }], background: '#009241' },
        { fonts: [{ text: '芒果', top: '10%' }], background: '#DD167B' },
        { fonts: [{ text: '西瓜', top: '10%' }], background: '#F8C301' },
        { fonts: [{ text: '柠檬', top: '10%' }], background: '#E77841' },
        { fonts: [{ text: '柚子', top: '10%' }], background: '#42929D' },
        { fonts: [{ text: '山竹', top: '10%' }], background: '#E3556B' },
      ],
      
      buttons: [{
        radius: '35%',
        // background: '#333',
        pointer: true,
        fonts: [
          { 
            text: '点击抽奖',        //文字
            top: '-15%',          //文字距顶部距离
            fontColor:'#f00',    //文字颜色
            fontSize:'16px',     //文字大小
            fontStyle:'微软雅黑', //字体
            fontWeight:'500',    //加粗
            lineHeight:'16px',   //行高
          }
        ],
        //抽奖按钮图
        imgs:[
            {
              src:require('@/assets/btn_cj.png'),   //图片url
              top:'-130%',     //图片距顶部距离
              width:'100%',  //图片宽
              // height:'100%', //图片高
            }
        ],
      }],
    }
  },
  methods: {
    // 点击抽奖按钮会触发star回调
    startCallback () {
      // 调用抽奖组件的play方法开始游戏
      this.$refs.myLucky.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        const index = 0
        // 调用stop停止旋转并传递中奖索引
        this.$refs.myLucky.stop(index)
      }, 3000)
    },
    // 抽奖结束会触发end回调
    endCallback (prize) {
      console.log(prize)
    },
  }
}
</script>
<style scoped></style>

2、预览

请添加图片描述

四、抽奖

1、src/components/LuckyGrid.vue

<template>
  <div class="lucky_grid">
    <h1>LuckyGrid页面</h1>
    <template>
    <LuckyGrid
      ref="myLucky"
      width="400px"
      height="400px"
      :blocks="blocks"
      :prizes="prizes"
      :buttons="buttons"
      :activeStyle="activeStyle"
      :defaultConfig="defaultConfig"
      :defaultStyle="defaultStyle"
      @start="start"
      @end="end"
    />
</template>
</div>
</template>

<script>
export default {
  name: 'LuckyGrid1',
  data () {
    return {
      defaultStyle: {
        background: '#f00',
        borderRadius:'60px',
        shadow: '2px 2px 3px #f00',
        fontColor:'#f00',    //文字颜色
        fontSize:'16px',     //文字大小
        fontStyle:'微软雅黑', //字体
        fontWeight:'500',    //加粗
        lineHeight:'16px',   //行高
        wordWrap:true,       //换行
        lineClamp:2,         //2行，剩下的...
        lengthLimit:'90%',
      },
      defaultConfig:{
        gutter:'12px',
        speed:10,
        accelerationTime:1500,
        decelerationTime:1500,
      },
      activeStyle:{
        fontColor:'#f00',    //文字颜色
        fontSize:'16px',     //文字大小
        fontStyle:'微软雅黑', //字体
        fontWeight:'500',    //加粗
        background:'#FFF402',       //换行
        shadow: '2px 2px 3px #f00',
      },
      blocks: [
        { 
          padding: '40px',     //可旋转区域与转盘边缘的距离
          background: '#f00',  //转盘背景色
          borderRadius: '80px',
          //转盘背景图
          imgs:[
            {
              src:require('@/assets/LuckyGrid.png'),   //图片url
              top:'0',     //图片距顶部距离
              width:'400px',  //图片宽
              height:'400px', //图片高
            }
          ],
        }
      ],
      prizes: [
        { 
          x: 0, 
          y: 0, 
          //奖品文字
          fonts: [
            { 
              text: '苹果',        //文字
              top: '10%',          //文字距顶部距离
              fontColor:'#f00',    //文字颜色
              fontSize:'16px',     //文字大小
              fontStyle:'微软雅黑', //字体
              fontWeight:'500',    //加粗
              lineHeight:'16px',   //行高
              wordWrap:true,       //换行
              lineClamp:2,         //2行，剩下的...
            }
          ], 
          //奖品图
          imgs:[
            {
              src:'https://img95.699pic.com/xsj/1s/5e/0g.jpg%21/fh/300',   //图片url
              top:'30%',     //图片距顶部距离
              width:'60px',  //图片宽
              height:'60px', //图片高
            }
          ],
          background: '#eee',  //扇形背景色
          range:10,  //当前prize.range/所有prize中range总和
          borderRadius: '10px',
          shadow: '2px 2px 3px #f00',
        },
        { x: 1, y: 0, fonts: [{ text: '1', top: '25%' }],background: '#eee',borderRadius: '10px',shadow: '2px 2px 3px #f00', },
        { x: 2, y: 0, fonts: [{ text: '2', top: '25%' }],background: '#eee',borderRadius: '10px',shadow: '2px 2px 3px #f00', },
        { x: 2, y: 1, fonts: [{ text: '3', top: '25%' }],background: '#eee',borderRadius: '10px',shadow: '2px 2px 3px #f00', },
        { x: 2, y: 2, fonts: [{ text: '4', top: '25%' }],background: '#eee',borderRadius: '10px',shadow: '2px 2px 3px #f00', },
        { x: 1, y: 2, fonts: [{ text: '5', top: '25%' }],background: '#eee',borderRadius: '10px',shadow: '2px 2px 3px #f00', },
        { x: 0, y: 2, fonts: [{ text: '6', top: '25%' }],background: '#eee',borderRadius: '10px',shadow: '2px 2px 3px #f00', },
        { x: 0, y: 1, fonts: [{ text: '7', top: '25%' }],background: '#eee',borderRadius: '10px',shadow: '2px 2px 3px #f00', },
      ],
      buttons: [{
        x: 1, y: 1,
        borderRadius: '80px',
        background: '#FFF402',
        shadow: '2px 2px 3px #f00',
        fonts: [
          { 
            text: '点击抽奖',        //文字
            top: '40%',          //文字距顶部距离
            fontColor:'#f00',    //文字颜色
            fontSize:'16px',     //文字大小
            fontStyle:'微软雅黑', //字体
            fontWeight:'500',    //加粗
            lineHeight:'16px',   //行高
          }
        ],
        // 抽奖按钮图
        imgs:[
            {
              src:require('@/assets/btn_grid.png'),   //图片url
              top:'15%',     //图片距顶部距离
              width:'70%',  //图片宽
              height:'70%', //图片高
              borderRadius: '80px',
            }
        ],
      }],
    }
  },
  methods: {
    start () {
      // 开始游戏
      this.$refs.myLucky.play()
      // 使用定时器模拟接口
      setTimeout(() => {
        // 结束游戏, 并抽第0号奖品
        this.$refs.myLucky.stop(0)
      }, 3000)
    },
    end(prize){ // 游戏结束触发 end 回调
      alert('恭喜中奖: ' + prize.fonts[0].text);
    }
  }
}
</script>
<style scoped></style>

2、预览
请添加图片描述

五、老虎机

1、src/components/SlotMachine.vue

<template>
  <div class="slot_machine">
    <h1>SlotMachine页面</h1>
    <template>
    <SlotMachine
      ref="myLucky"
      width="400px"
      height="300px"
      :blocks="blocks"
      :prizes="prizes"
      :slots="slots"
      :defaultConfig="defaultConfig"
    />
    <div class="start_slot_machine" @click="start">
      <div class="slot_machine_btn" @click="start">启动</div>
    </div>
</template>
</div>
</template>

<script>
export default {
  name: 'SlotMachine1',
  data () {
    return {
      blocks: [
        { 
          padding: '10px', background: '#617df2',
          imgs:[
            {
              src:require('@/assets/SlotMachine .png'),   //图片url
              top:'0',     //图片距顶部距离
              width:'400px',  //图片宽
              height:'300px', //图片高
            }
          ],
        },
        { padding: '10px', background: '#869cfa' },
        { padding: '10px', background: '#afc8ff' },
        { padding: '10px', background: '#e9e8fe' },
      ],
      slots: [
        { speed: 30 },
        { speed: 15 },
        { speed: 20 },
      ],
      prizes: [
        {
          fonts: [
            { 
              text: '苹果',        //文字
              top: '15%',          //文字距顶部距离
              fontColor:'#900',    //文字颜色
              fontSize:'16px',     //文字大小
              fontStyle:'微软雅黑', //字体
              fontWeight:'500',    //加粗
              lineHeight:'16px',   //行高
              wordWrap:true,       //换行
              lineClamp:2,         //2行，剩下的...
            }
          ], 
          background: '#bac5ee',
          borderRadius: '10px',
          padding: '10px',
          imgs: [
            {
              top:'10%',
              width: '80%',
              height: '80%',
              src: require('@/assets/face_1.png')
            },
            // {
            //   top:'10%',
            //   width: '80%',
            //   height: '80%',
            //   src: require('@/assets/face_1a.png')
            // }
          ]
        },
        {
          background: '#bac5ee',
          borderRadius: '10px',
          padding: '10px',
          imgs: [
            {
              top:'10%',
              width: '80%',
              height: '80%',
              src: require('@/assets/face_2.png')
            },
            // {
            //   top:'10%',
            //   width: '80%',
            //   height: '80%',
            //   src: require('@/assets/face_2a.png')
            // }
          ]
        },
        {
         
          background: '#bac5ee',
          borderRadius: '10px',
          padding: '10px',
          imgs: [
            {
              top:'10%',
              width: '80%',
              height: '80%',
              src: require('@/assets/face_3.png')
            },
          ]
        }
      ],
      defaultConfig: {
        rowSpacing: '20px',
        colSpacing: '20px',
      }
    }
  },
  methods: {
    start () {
      // 开始游戏
      this.$refs.myLucky.play()
      // 使用定时器模拟接口
      setTimeout(() => {
      // 假设 4 种结果
      const res = [
        [0, 1, 2],
        [1, 2, 1],
        [1, 2, 2],
        [2, 2, 2]
      ]
      // 随机取一组数据
      const index = res[Math.random() * 4 >> 0]
        // 调用 stop 方法停止游戏
        this.$refs.myLucky.stop(index)
      }, 500);
    },
    end(prize){ // 游戏结束触发 end 回调
      alert('恭喜中奖: ' + prize.fonts[0].text);
      requestServices.queryCoursewareSource({ lessonNumberId: this.lessonInfo.id }).then((res) => {
        if(res&&res.success)localStorage.setItem('KJPathData',res.object);
      });
    }
  }
}
</script>
<style scoped>
.start_slot_machine {
  width: 400px;
  height: 40px;
  line-height: 40px;
  margin-top: 20px;
}

.slot_machine_btn {
  width: 80px;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  border: 1px solid #eee;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
}
</style>

2、预览
请添加图片描述

六、官网

lucky-canvas官网

总结

踩坑路漫漫长@~@

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1633315.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Stable Diffusion WebUI 中文提示词插件 sd-webui-prompt-all-in-one

Stable Diffusion WebUI 中文提示词插件 sd-webui-prompt-all-in-one

本文收录于《AI绘画从入门到精通》专栏&#xff0c;订阅后可阅读专栏内所有文章&#xff0c;专栏总目录&#xff1a;点这里。 大家好&#xff0c;我是水滴~~ 今天为大家介绍 Stable Diffusion WebUI 的一款中文提示词插件 sd-webui-prompt-all-in-one&#xff0c;就像它的名字一…
阅读更多...
2024中国（江西）国际先进陶瓷材料及智能装备博览会

2024中国（江西）国际先进陶瓷材料及智能装备博览会

2024中国&#xff08;江西&#xff09;国际先进陶瓷材料及智能装备博览会 “中国&#xff08;江西&#xff09;国际先进陶瓷材料及智能装备博览会” 陶瓷三新展 &#xff08;新材料、新装备、新技术&#xff09; 绿色智能、引领未来 2024年11月1日-11月3日 中国江西 南昌…
阅读更多...
网工内推 | 网络工程师，CCIE认证优先，最高10k*13薪

网工内推 | 网络工程师，CCIE认证优先，最高10k*13薪

01 广东丰德科技有限公司 招聘岗位&#xff1a;网络工程师 职责描述&#xff1a; 1、负责运营商机房的网络设备的运行维护、故障应急处理&#xff1b; 2、负责各类型网络设备或网络相关的故障的故障分析及诊断&#xff1b; 3、独立完成网络项目的方案设计编写并负责方案的验证…
阅读更多...
Linux进程——进程的概念(PCB的理解)

Linux进程——进程的概念(PCB的理解)

前言&#xff1a;在了解完冯诺依曼体系结构和操作系统之后&#xff0c;我们进入了Linux的下一篇章Linux进程&#xff0c;但在学习Linux进程之前&#xff0c;一定要阅读理解上一篇内容&#xff0c;理解“先描述&#xff0c;再组织”才能更好的理解进程的含义。 Linux进程学习基…
阅读更多...
关于配置nginx 代理去掉location 匹配的上下文规则

关于配置nginx 代理去掉location 匹配的上下文规则

事情是这样的&#xff0c;有个需求&#xff0c;就是在本系统准备把所有的api 请求放到webman 框架 然后把后台的业务依然保留在fastadmin 框架&#xff0c; 打算加一个反向代理&#xff0c;用同一个域名的加上一个访问后缀&#xff0c;放到到webman 服务&#xff0c;也就是本…
阅读更多...
mathtype中如何输入指示函数花体的 I

mathtype中如何输入指示函数花体的 I

mathtype中如何输入花体的 I 问题描述解决办法 问题描述 写word文档时&#xff0c;借助mathtype敲公式&#xff0c;指示函数的花体I如何键入。 解决办法 1.编辑->插入符号 2.选择“Euclid Math Two”,里面有花体的各种字母。 3.成功。
阅读更多...
新一代状态空间模型网络替代Transformer 综述

新一代状态空间模型网络替代Transformer 综述

本文首先初步介绍了状态空间模型&#xff08;SSM&#xff09;的工作原理。然后&#xff0c;从多个方面回顾SSM的相关工作&#xff0c;包括SSM的起源和变化、自然语言处理、计算机视觉、图、多模态处理、多模态和多媒体、点云/事件流数据、时间序列数据等领域的相关工作。 此外…
阅读更多...
vue3.0(三) Vite文件目录结构及SFC语法

vue3.0(三) Vite文件目录结构及SFC语法

文章目录 Vite介绍Vite文件目录结构SFC语法SFC 语法定义bug解决 Vite介绍 为什么使用Vite&#xff1f; 表现 与Vite的ESbuild预绑定使其比使用任何其他JS绑定器都快10到100倍。这是因为它有助于提高页面速度并将CommonJS/UMD模块转换为ESM。 基于Vite文件&#xff0c;“预绑定…
阅读更多...
RabbitMQ中的交换机类型

RabbitMQ中的交换机类型

交换机类型 可以看到&#xff0c;在订阅模型中&#xff0c;多了一个exchange角色&#xff0c;而且过程略有变化&#xff1a; Publisher&#xff1a;生产者&#xff0c;不再发送消息到队列中&#xff0c;而是发给交换机 Exchange&#xff1a;交换机&#xff0c;一方面&#xff…
阅读更多...
【Linux】dlopen: /lib/x86_64-linux-gnu/libm.so.6: version `GLIBC_2.29‘ not found

【Linux】dlopen: /lib/x86_64-linux-gnu/libm.so.6: version `GLIBC_2.29‘ not found

[30116] Error loading Python lib /tmp/_MEIlvdUu6/libpython3.8.so.1.0: dlopen: /lib/x86_64-linux-gnu/libm.so.6: version GLIBC_2.29 not found (required by /tmp/_MEIlvdUu6/libpython3.8.so.1.0)1 cd到指定路径 cd /usr/local 2 下载 wget http://ftp.gnu.org/gnu/gl…
阅读更多...
[NSSRound#23 misc] 前两题

[NSSRound#23 misc] 前两题

这个周末NSS个人赛是个MISC&#xff0c;这个好久没怎么玩了&#xff0c;结果不会了。只作出一题来&#xff0c;不过参与的人比较少&#xff0c;每题解出数和也不到50。前50吧:) 画师 给了一个xml文件&#xff0c;看内容有 mxGraphModel 标签&#xff0c;应该是某个东西画的矢…
阅读更多...
Qt Designer入门

Qt Designer入门

安装 PyQt5提供了一个可视化图形工具Qt Designer&#xff0c;文件名为designer.exe。如果在电脑上找不到&#xff0c;可以用如下命令进行安装&#xff1a; pip install PyQt5-tools 安装完毕后&#xff0c;可在如下目录找到此工具软件&#xff1a; D:\Python3.9\Lib\site-pa…
阅读更多...
【多态】有关多继承和菱形继承的多态

【多态】有关多继承和菱形继承的多态

博主首页&#xff1a; 有趣的中国人 专栏首页&#xff1a; C进阶 其它专栏&#xff1a; C初阶 | 初阶数据结构 | Linux 博主会持续更新 本篇文章主要讲解 多继承和菱形继承的多态 的相关内容 文章目录 1. 回顾多态底层2. 抽象类2.1 概念2.2 接口继承和实现继承 3. 虚表所在…
阅读更多...
运维的利器–监控–zabbix–第二步：建设–部署zabbix agent--windows server系统--agent客户端安装部署

运维的利器–监控–zabbix–第二步：建设–部署zabbix agent--windows server系统--agent客户端安装部署

第一步&#xff1a;下载windows agent软件 第一点&#xff1a;zabbix官网针对linux和window系统有两种不同的安装方式&#xff0c;其中&#xff1a;windows为tar压缩包&#xff0c;根据你zabbix server安装的版本&#xff0c;在官网下载同样版本的agent软件。 amd64&#xff…
阅读更多...
Eclipse：-Dmaven.multiModuleProjectDirectory system propery is not set.

Eclipse：-Dmaven.multiModuleProjectDirectory system propery is not set.

eclipse中使用maven插件的时候&#xff0c;运行run as maven build的时候报错 -Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable and mvn script match. 可以设一个环境变量M2_HOME指向你的maven安装目录 M2_HOMED:\Apps\…
阅读更多...
vcruntime140_1.dll无法继续执行代码怎么办，分享5种解决方法

vcruntime140_1.dll无法继续执行代码怎么办，分享5种解决方法

在日常使用电脑进行各项任务操作时&#xff0c;用户可能会遇到一个令人困扰的问题&#xff1a;当尝试运行某款软件以推进工作或享受娱乐时&#xff0c;系统突然弹出错误提示&#xff0c;明确指出“由于找不到vcruntime140_1.dll&#xff0c;无法继续执行代码”。。这个问题可能…
阅读更多...
城市公交查询系统的设计与实现（四）

城市公交查询系统的设计与实现（四）

目录 4 系统概要设计 4.1 概要设计的概论 4.2 架构设计 4.3 系统功能结构图及分析 4.3.1 系统功能结构图 4.3.2 系统基本功能 1.站点查询 2.公交线路查询 3.站—站的查询 4.在线提问 5.网站公告 6&#xff0e;登录功能 7.用户管理 8.线路维护 9.公告管理 …
阅读更多...
【QT学习】UDP协议，广播，组播

【QT学习】UDP协议，广播，组播

一。Udp详细解释 UDP&#xff08;User Datagram Protocol&#xff09;是一种无连接的传输层协议&#xff0c;它提供了一种简单的、不可靠的数据传输服务。与TCP相比&#xff0c;UDP不提供可靠性、流量控制、拥塞控制和错误恢复等功能&#xff0c;但由于其简单性和低开销&#x…
阅读更多...
在vue2中，什么是双向绑定，为什么vue3要进行优化？

在vue2中，什么是双向绑定，为什么vue3要进行优化？

一、什么是双向绑定 我们先从单向绑定切入单向绑定非常简单&#xff0c;就是把Model绑定到View&#xff0c;当我们用JavaScript代码更新Model时&#xff0c;View就会自动更新双向绑定就很容易联想到了&#xff0c;在单向绑定的基础上&#xff0c;用户更新了View&#xff0c;Mo…
阅读更多...
# 使用 spring boot 时，@Autowired 注解 自动装配注入时，变量报红解决方法：

# 使用 spring boot 时，@Autowired 注解 自动装配注入时，变量报红解决方法：

使用 spring boot 时&#xff0c;Autowired 注解 自动装配注入时&#xff0c;变量报红解决方法&#xff1a; 1、使用 Resource 代替 Autowired 注解&#xff0c;根据类型注入改为根据名称注入&#xff08;建议&#xff09;。 2、在 XXXMapper 上添加 Repository 注解&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023