一个基于 vue 的 ( 大转盘 / 九宫格 ) 抽奖插件

Overview
logo

vue-luck-draw 抽奖插件

一个基于 vue 的 ( 大转盘 / 九宫格 ) 抽奖插件

简体中文 · English

stars forks version downloads jsdelivr

author license


官方文档 & Demo演示

中文https://100px.net/document/vue.html

EnglishIf anyone can help translate the document, please contact me [email protected]



在 vue2.x / vue3.x 中使用

方式 1:通过 import 引入

  1. 首先安装插件
# npm 安装:
npm install vue-luck-draw

# yarn 安装:
yarn add vue-luck-draw
  1. 然后找到 main.js 引入插件并 use
// vue2.x
import LuckDraw from 'vue-luck-draw'
Vue.use(LuckDraw)

// vue3.x
import LuckDraw from 'vue-luck-draw/vue3'
createApp(App).use(LuckDraw).mount('#app')
  1. 最后在组件内使用 大转盘抽奖九宫格抽奖
<template>
  <div>
    
    <LuckyWheel
      width="200px"
      height="200px"
      ...你的配置
    />
    
    <LuckyGrid
      width="200px"
      height="200px"
      ...你的配置
    />
  div>
template>

方式 2:通过 script 标签引入

为了避免 CDN 链接出现异常或波动,我非常建议你缓存到本地或服务器(✿◡‿◡)

<div id="app">
  
  <lucky-wheel
    width="200px"
    height="200px"
    ...你的配置
  />
  
  <lucky-grid
    width="200px"
    height="200px"
    ...你的配置
  />
div>
<script src="./vue.min.js">script>
<script src="./vue-luck-draw.umd.min.js">script>
<script>
  new Vue({
    el: '#app',
    data () {
      return {}
    }
  })
script>

如果您觉得这个项目还不错, 可以在 Github 上面帮我点个star ☜(゚ヮ゚☜)


推荐的开源项目

Comments
  • vue2引用无法运行,出现Object(...) is not a function

    vue2引用无法运行,出现Object(...) is not a function

    • 你当前是什么框架(必填):vue: 2.6.11

    • 你使用的是哪个包(必填):"@lucky-canvas/vue": "^0.1.9",

    • 你当前插件的版本(必填): "@vue/cli-service": "~4.5.15",

    • 详细描述你的bug:

    image

    • 问题代码(重要):
    // 代码开始, 别再放歪了行吗
    <template>
      <LuckyWheel
        ref="myLucky"
        width="300px"
        height="300px"
        :prizes="prizes"
        :blocks="blocks"
        :buttons="buttons"
        @start="startCallback"
        @end="endCallback"
      />
    </template>
    
    <script>
    export default {
    data () {
        return {
          blocks: [{ padding: '13px', background: '#617df2' }],
          prizes: [
            { fonts: [{ text: '0', 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' },
          ],
          buttons: [
            { radius: '50px', background: '#617df2' },
            { radius: '45px', background: '#afc8ff' },
            {
              radius: '40px', background: '#869cfa',
              pointer: true,
              fonts: [{ text: '开始\n抽奖', top: '-20px' }]
            },
          ],
        }
    },
    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>
    
    </style>
    // 代码结束
    
    提问 & 建议 📢 已完成 🎯 
    opened by Alan-222 32
  • vue框架开发,嵌套到苹果手机上的webview中,老虎机中的奖品图片显示不出来

    vue框架开发,嵌套到苹果手机上的webview中,老虎机中的奖品图片显示不出来

    • 你当前是什么框架(必填):vue
    • 你使用的是哪个包(必填):@lucky-canvas/vue
    • 你当前插件的版本(必填):0.1.11
    • 当前环境是小程序还是浏览器(选填):app端嵌套的webview
    • 详细描述你的bug:老虎机:苹果手机上不显示奖品图片,安卓手机上没问题
    • 问题代码(重要):
    // 代码开始, 别再放歪了行吗
    width: '4.7rem',
    height: '2.4rem',
    blocks: [
      { padding: '10px', background: '#869cfa' },
      { padding: '10px', background: '#e9e8fe' },
    ],
    slots: [
      { order: [0, 1, 2, 3, 4, 5, 6], speed: defaultSpeed },
      { order: [1, 2, 3, 4, 5, 6, 0], speed: defaultSpeed },
      { order: [2, 3, 4, 5, 6, 0, 1], speed: defaultSpeed },
    ],
    prizes: [
      {
        imgs: [
          {
            width: '1.26rem',
            height: '1.66rem',
            src: require('../assets/images/prize-shouji.png'),
          },
        ],
      },
      {
        imgs: [
          {
            width: '1.26rem',
            height: '1.66rem',
            src: require('../assets/images/prize-gangmeigu-vip.png'),
          },
        ],
      },
      {
        imgs: [
          {
            width: '1.26rem',
            height: '1.66rem',
            src: require('../assets/images/prize-jifen.png'),
          },
        ],
      },
      {
        imgs: [
          {
            width: '1.26rem',
            height: '1.66rem',
            src: require('../assets/images/prize-jinniu-ji.png'),
          },
        ],
      },
      {
        imgs: [
          {
            width: '1.26rem',
            height: '1.66rem',
            src: require('../assets/images/prize-jinniu-nian.png'),
          },
        ],
      },
      {
        imgs: [
          {
            width: '1.26rem',
            height: '1.66rem',
            src: require('../assets/images/prize-kweb.png'),
          },
        ],
      },
      {
        imgs: [
          {
            width: '1.26rem',
            height: '1.66rem',
            src: require('../assets/images/prize-zhangtingzhushou.png'),
          },
        ],
      },
    ],
    defaultConfig: {
      rowSpacing: '0.6rem',
      colSpacing: '0.1rem',
    },
    // 代码结束
    
    级别D:灵异事件 👻 
    opened by BingGuanqi 26
  • 在Vue中调用play()失败,转盘没有启动

    在Vue中调用play()失败,转盘没有启动

    • 你当前是什么框架(必填): Vue
    • 你使用的是哪个包(必填):@lucky-canvas/vue
    • 你当前插件的版本(必填):^0.1.8
    • 当前环境是小程序还是浏览器(选填):浏览器 & Electron
    • 详细描述你的bug:在Vue中调用play()失败,转盘没有启动,控制台没有报错,插入console.log可以打印
    • 问题代码(重要):
    // 代码开始
    <script lang="ts" setup>
    import { ref } from 'vue'
    const myLucky = ref(null)
    
    const state = {
      blocks: [{ padding: '13px', background: '#617df2' }],
      prizes: [
        { fonts: [{ text: '0', 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' },
      ],
      buttons: [
        { radius: '50px', background: '#617df2' },
        { radius: '45px', background: '#afc8ff' },
        {
          radius: '40px', background: '#869cfa',
          pointer: true,
          fonts: [{ text: '开始\n抽奖', top: '-20px' }],
        }
      ]
    }
    
    //点击抽奖按钮会触发star回调
    const startCallBack = () => {
      // 调用抽奖组件的play方法开始游戏
      myLucky.value?.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        const index = 0
        // 调用stop停止旋转并传递中奖索引
        myLucky.value?.stop(index)
      }, 3000)
    }
    
    // 抽奖结束会触发end回调
    const endCallBack = (prize: any) => {
      console.log(prize)
    }
    
    </script>
    
    <template>
      <LuckyWheel
        ref="myLucky"
        width="200px"
        height="200px"
        :blocks="state.blocks"
        :prizes="state.prizes"
        :buttons="state.buttons"
        @start="startCallBack"
        @end="endCallBack"
      />
    </template>
    
    <style>
    </style>
    // 代码结束
    

    Snipaste_2022-02-26_23-37-38 Snipaste_2022-02-26_23-37-12

    已完成 🎯 级别B:兼容 bug 💉 🏷 Vue 
    opened by Anytinz 22
  • Cannot delete property 'toString' of function () { [native code] }

    Cannot delete property 'toString' of function () { [native code] }

    • 你当前是什么框架(必填):taro raect
    • 你当前插件的版本(必填):
    • "@babel/runtime": "^7.7.7", "@lucky-canvas/taro": "0.0.5", "@tarojs/cli": "3.3.15", "@tarojs/components": "3.3.15", "@tarojs/react": "3.3.15", "@tarojs/runtime": "3.3.15", "@tarojs/taro": "3.3.15", "lodash": "4.17.15", "react": "^16.10.0", "react-dom": "^16.10.0", "taro-plugin-canvas": "^1.0.10", "taro-ui": "^3.0.0-alpha.3"
    • 当前环境是小程序还是浏览器(选填):小程序 taro开发
    • 详细描述你的bug:按照文档引入后 报错 不知道改哪里

    image

    • 问题代码(重要):
    // 代码开始, 别再放歪了行吗
    ![image](https://user-images.githubusercontent.com/29198583/146890788-f78f6da7-28c0-4d42-aa5e-a4d586a9ea52.png)
    
    // 代码结束
    
    已完成 🎯 级别D:灵异事件 👻 🏷 微信小程序 🏷 Taro3.x 🏷 UniApp 
    opened by akkobb 21
  • 请教一个问题

    请教一个问题

    你当前是什么框架(必填): 普通html页面cdn引入使用vue

    你使用的是哪个包(必填): https://cdn.jsdelivr.net/combine/npm/@vue/[email protected],npm/[email protected]/lib/index.iife.min.js,npm/@lucky-canvas/[email protected]

    你使用插件的版本(必填): (https://cdn.jsdelivr.net/combine/npm/@vue/[email protected],npm/[email protected]/lib/index.iife.min.js,npm/@lucky-canvas/[email protected])

    当前是什么环境(uni-app 和 taro 必填): 浏览器

    当前你使用的是哪个抽奖类型(必填): 大转盘

    详细描述你的bug: 如下代码这种方式 停下来的时候指针不能在扇形区域50%处停止,该如何解决, 奖品为一张背景图,分为10个扇形

    问题代码(重要):

    data() {
                return {
                    blocks: [
                        {
                            padding: '20px',
                            imgs: [{
                                src: 'https://cdn.jsdelivr.net/gh/buuing/cdn/demo/block-img.png',
                                width: '100%',
                                rotate: true
                            }]
                        }
                    ],
                    prizes: [
                        {title: 0},
                        {title: 1},
                        {title: 2},
                        {title: 3},
                        {title: 4},
                        {title: 5},
                        {title: 6},
                        {title: 7},
                        {title: 8},
                        {title: 9}
                    ],
                    buttons: [
                        {
                            radius: '40%',
                            imgs: [
                                {src: 'http://www.dev.com/static/img/pointer.2d156b0.png', width: '100%', top: '-125%'}
                            ]
                        }
                    ],
                }
            },
            methods: {
                // wheel_start
                startCallback() {
                    // 调用抽奖组件的play方法开始游戏
                    this.$refs.wheel.play();
                    // 模拟调用接口异步抽奖
                    setTimeout(() => {
                        // 调用stop停止旋转并传递中奖索引
                        let index = 0
                        this.$refs.wheel.stop(index)
                    }, 3000)
                },
                // wheel_end
                endCallback(prize) {
                    console.log(prize.title);
                },
            },
    
    提问 & 建议 📢 
    opened by 2019niceaz 20
  • uniapp运行微信小程序到PC端奖品图片无法显示

    uniapp运行微信小程序到PC端奖品图片无法显示

    • 你当前是什么框架(必填):uniapp

    • 你使用的是哪个包(必填):uniapp

    • 你当前插件的版本(必填):0.0.10

    • 当前环境是小程序还是浏览器(选填):uni-app 微信小程序

    • 详细描述你的bug:

    • 奖品图片在微信小程序PC端无法显示,其他端都正常

    image

    • 问题代码(重要):
    <view class="set-bg">
    	<image class="set-bg-img" src="http://qiniuyun.hxxd.tv/image/2022/04/02/2.gif" mode=""></image>
    	<LuckyWheel ref="myLucky" width="635rpx" height="635rpx" :blocks="blocks" :prizes="prizes"
    	:buttons="buttons" :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />
    </view>
    
    getActivityDetail() {
    	let data = {
    		activity_id: this.id
    	}
    	this.sign = this.$GlobalApi.sign(data)
    	this.prizes = []
    	this.$api.getActivityInfo(data, true, res => {
    		if (res.activity_prize.length > 0) {
    		   for (var i = 0; i < res.activity_prize.length; i++) {
    			this.prizes.push({
    				fonts: [{
    				  text: res.activity_prize[i].name,
    				  top: '10%',
    				  fontColor: '#FF302D',
    				  fontSize: '30rpx'
    				}],
    				imgs: [{
    					src: res.activity_prize[i].img,
    					width: '40%',
    					top: '40%'
    					}],
    				background: '#FFFCEF'
    				})
    			}
    		}
    	}, err => {})
    }
    
    提问 & 建议 📢 🏷 UniApp 
    opened by skytkcn 19
  • Taro 框架绘制报错

    Taro 框架绘制报错

    • 用的什么框架:taro version:3.3.10

    • 你当前插件的版本:1.2.2

    • 详细描述你的bug: lucky-canvas文件报错: window.addEventListener is not defined

    以及: ReferenceError: ctx is not defined at LuckyWheel.beforeCreate (._node_modules_taro-luck-draw_react_LuckyWheel.js:110) at new LuckyWheel (.._src_lib_wheel.ts:65) at LuckyWheel.drawLucky (._node_modules_taro-luck-draw_react_LuckyWheel.js:100) at Object. (._node_modules_taro-luck-draw_react_LuckyWheel.js:86) at a. (VM48 WAService.js:2) at :56455/appservice/ at VM48 WAService.js:2 at VM48 WAService.js:2 at Array.forEach () at VM48 WAService.js:2(env: macOS,mp,1.05.2109131; lib: 2.20.0)

    个人想法: 报错是因为lucky-canvas.umd.js中的第575行报错 是否是因为api不支持的原因?

    🏷 Taro3.x 
    opened by dcqzy 16
  • 老虎机控件在uniapp微信小程序上无法显示奖品图片等(模拟器上正常)

    老虎机控件在uniapp微信小程序上无法显示奖品图片等(模拟器上正常)

    • 你当前是什么框架(必填):uniapp
    • 你使用的是哪个包(必填):老虎机
    • 你当前插件的版本(必填):0.0.10
    • 当前环境是小程序还是浏览器(选填):小程序
    • 详细描述你的bug:老虎机在小程序模拟器上正常显示 但是在真机上貌似是canvas没有获取到
    • 问题代码(重要):
    // 代码开始, 别再放歪了行吗
    
    // 代码结束
    
    已完成 🎯 级别B:兼容 bug 💉 🏷 UniApp 
    opened by houpai 15
  • 老虎机抽奖出现跨域错误

    老虎机抽奖出现跨域错误

    • 你当前是什么框架(必填):uniapp
    • 你使用的是哪个包(必填):uni
    • 你当前插件的版本(必填):0.0.10
    • 当前环境是小程序还是浏览器(选填):浏览器
    • 详细描述你的bug:把老虎机抽奖嵌入到pc端的iframe页面里渲染,出现错误,Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 转盘和九宫格也是这样引用的,没有出现这个问题
    • 问题代码(重要):
    // 代码开始, 别再放歪了行吗
    
    // 代码结束
    
    已完成 🎯 级别B:兼容 bug 💉 
    opened by elfman 14
  • 如何在小程序中使用老虎机

    如何在小程序中使用老虎机

    • 你当前是什么框架(必填):原生微信小程序
    • 你使用的是哪个包(必填):"@lucky-canvas/mini"
    • 你当前插件的版本(必填): "0.0.4"
    • 当前环境是小程序还是浏览器(选填):小程序
    • 详细描述你的bug:包里面没有slot-machine?只有lucky-grid和lucky-wheel

    image

    如何在小程序中使用老虎机?

    提问 & 建议 📢 🏷 微信小程序 
    opened by zhouzhangfan 13
  • 小程序引用老虎机组件报错

    小程序引用老虎机组件报错

    • 你当前是什么框架(必填):taro

    • 你使用的是哪个包(必填):"@lucky-canvas/taro"

    • 你当前插件的版本(必填): "^0.0.12",

    • 当前环境是小程序还是浏览器(选填):taro

    • 详细描述你的bug: 小程序引用老虎机组件报错

    image

    image

    • 问题代码(重要):

    export default SlotMachiner; // 代码开始, 别再放歪了行吗 import React, { Component } from 'react'; import { SlotMachine } from '@lucky-canvas/taro/react' import { View } from '@tarojs/components'; class SlotMachiner extends Component { myLucky: any constructor(props) { super(props); this.myLucky = React.createRef() } playGame = () => { this.myLucky.current.play() setTimeout(() => { // 假设 4 种结果 const res = [ [9, 9, 6], [0, 0, 7], [6, 6, 6], [8, 8, 8] ] // 随机取一组数据 const index = res[Math.random() * 4 >> 0] // 调用 stop 方法停止游戏 this.myLucky.current.stop(index) }, 500); } render() { return ( <> <SlotMachine ref={this.myLucky} width={240} height={180} blocks={[ { padding: '10px', background: '#617df2' }, { padding: '10px', background: '#869cfa' }, { padding: '10px', background: '#afc8ff' }, { padding: '10px', background: '#e9e8fe' }, ]} > <View onClick={() => this.playGame()}>开始抽奖 </> ); } }

    export default SlotMachiner; // 代码结束

    已完成 🎯 级别B:兼容 bug 💉 
    opened by liuhui1999 12
  • 能否增加奖品文字里设置图标的功能

    能否增加奖品文字里设置图标的功能

    • 你当前是什么框架(必填):VUE
    • 你使用的是哪个包(必填):
    • 你当前插件的版本(必填):0.1.11
    • 当前环境是小程序还是浏览器(选填):浏览器
    • 详细描述你的bug:在prizes的fonts中能否传图标
    • 问题代码(重要):
    // 代码开始, 别再放歪了行吗
    
    // 代码结束
    
    提问 & 建议 📢 
    opened by a4521 9
  • 使用vue2.7 setup语法糖 会导致setup内代码重复执行

    使用vue2.7 setup语法糖 会导致setup内代码重复执行

    • 你当前是什么框架(必填):"vue": "^2.7.10",
    • 你使用的是哪个包(必填):"@lucky-canvas/vue": "^0.1.11",
    • 你当前插件的版本(必填):"@lucky-canvas/vue": "^0.1.11",
    • 当前环境是小程序还是浏览器(选填):游览器
    • [详细描述你的bug:] de
    // 代码开始, 别再放歪了行吗
    //main.js
    import VueLuckyCanvas from '@lucky-canvas/vue'
    Vue.use(VueLuckyCanvas)
    
    //homeView.vue
    <script setup>
    console.log(1);
    </script>
    
    // 代码结束
    
    级别B:兼容 bug 💉 
    opened by YulinCode 5
  • taro-react 3.5.5 引入就报错

    taro-react 3.5.5 引入就报错

    • 你当前是什么框架(必填): taro-react
    • 你使用的是哪个包(必填): "@lucky-canvas/taro": "^0.0.13"
    • 你当前插件的版本(必填): "@lucky-canvas/taro": "^0.0.13"
    • 当前环境是小程序还是浏览器(选填): 小程序 taro 3.5.4
    • 详细描述你的bug:

    直接引用任意抽奖组件都会报错, taro的配置 都是基础的, 额外用了两个插件配置 "@tarojs/plugin-html" 和 "taro-plugin-sync-in-wsl" 不过我都试过关闭 重新启动 都是一样报错,望紧急修复一下 image

    • 问题代码(重要):就普通的使用
    // 代码开始, 别再放歪了行吗
    node:internal/process/promises:279
                triggerUncaughtException(err, true /* fromPromise */);
                ^
    {
      moduleIdentifier: '/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/.taro/weapp/prebundle/index-984fd9e7.css',
      moduleName: './node_modules/.taro/weapp/prebundle/index-984fd9e7.css',
      loc: '1:0',
      message: 'Module parse failed: Unexpected token (1:0)\n' +
        'You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\n' +
        '> .lucky-box {\n' +
        '|   position: relative;\n' +
        '|   overflow: hidden;',
      moduleId: './node_modules/.taro/weapp/prebundle/index-984fd9e7.css',
      moduleTrace: [
        {
          originIdentifier: '/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/.taro/weapp/prebundle/@lucky-canvas_taro_react.js',
          originName: './node_modules/.taro/weapp/prebundle/@lucky-canvas_taro_react.js',
          moduleIdentifier: '/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/.taro/weapp/prebundle/index-984fd9e7.css',
          moduleName: './node_modules/.taro/weapp/prebundle/index-984fd9e7.css',
          dependencies: [
            { loc: '1790:0-30' },
            { loc: '2020:0-30' },
            { loc: '2279:0-30' }
          ],
          originId: './node_modules/.taro/weapp/prebundle/@lucky-canvas_taro_react.js',
          moduleId: './node_modules/.taro/weapp/prebundle/index-984fd9e7.css'
        },
        {
          originIdentifier: 'container entry (default) [["./react",{"import":["/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/.taro/weapp/prebundle/react.js"]}],["./@lucky-canvas/taro/react",{"import":["/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/.taro/weapp/prebundle/@lucky-canvas_taro_react.js"]}],["./taro-hooks",{"import":["/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/.taro/weapp/prebundle/taro-hooks.js"]}],["./@tarojs/taro",{"import":["/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/.taro/weapp/prebundle/@tarojs_taro.js"]}],["./@prequest/miniprogram",{"import":["/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/.taro/weapp/prebundle/@prequest_miniprogram.js"]}],["./@prequest/miniprogram-addon",{"import":["/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/.taro/weapp/prebundle/@prequest_miniprogram-addon.js"]}],["./react/jsx-runtime",{"import":["/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/.taro/weapp/prebundle/react_jsx-runtime.js"]}],["./@tarojs/runtime",{"import":["/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/.taro/weapp/prebundle/@tarojs_runtime.js"]}],["./@tarojs/plugin-framework-react/dist/runtime",{"import":["/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/.taro/weapp/prebundle/@tarojs_plugin-framework-react_dist_runtime.js"]}],["./@tarojs/plugin-platform-weapp/dist/runtime",{"import":["/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/.taro/weapp/prebundle/@tarojs_plugin-platform-weapp_dist_runtime.js"]}],["./@tarojs/plugin-html/dist/runtime",{"import":["/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/.taro/weapp/prebundle/@tarojs_plugin-html_dist_runtime.js"]}],["./react-dom",{"import":["/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/.taro/weapp/prebundle/react-dom.js"]}]]',
          originName: 'container entry',
          moduleIdentifier: '/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/.taro/weapp/prebundle/@lucky-canvas_taro_react.js',
          moduleName: './node_modules/.taro/weapp/prebundle/@lucky-canvas_taro_react.js',
          dependencies: [ { loc: './@lucky-canvas/taro/react[0]' } ],
          originId: 'webpack/container/entry/taro_app_library',
          moduleId: './node_modules/.taro/weapp/prebundle/@lucky-canvas_taro_react.js'
        }
      ],
      details: undefined,
      stack: 'ModuleParseError: Module parse failed: Unexpected token (1:0)\n' +
        'You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\n' +
        '> .lucky-box {\n' +
        '|   position: relative;\n' +
        '|   overflow: hidden;\n' +
        '    at handleParseError (/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/webpack/lib/NormalModule.js:971:19)\n' +
        '    at /home/hzz/side_hustle/mini/shipai-mini-react/node_modules/webpack/lib/NormalModule.js:1090:5\n' +
        '    at processResult (/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/webpack/lib/NormalModule.js:795:11)\n' +
        '    at /home/hzz/side_hustle/mini/shipai-mini-react/node_modules/webpack/lib/NormalModule.js:855:5\n' +
        '    at /home/hzz/side_hustle/mini/shipai-mini-react/node_modules/loader-runner/lib/LoaderRunner.js:407:3\n' +
        '    at iterateNormalLoaders (/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/loader-runner/lib/LoaderRunner.js:233:10)\n' +
        '    at /home/hzz/side_hustle/mini/shipai-mini-react/node_modules/loader-runner/lib/LoaderRunner.js:224:4\n' +
        '    at /home/hzz/side_hustle/mini/shipai-mini-react/node_modules/webpack/lib/NormalModule.js:829:15\n' +
        '    at Array.eval (eval at create (/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)\n' +
        '    at runCallbacks (/home/hzz/side_hustle/mini/shipai-mini-react/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)'
    }
    // 代码结束
    
    提问 & 建议 📢 🏷 Taro3.x 
    opened by HZZformGD 14
  • vue3 v-if 或者 v-show 渲染新的 dom元素时 导致SlotMachine重绘卡顿问题?  测试机器 iPhone12

    vue3 v-if 或者 v-show 渲染新的 dom元素时 导致SlotMachine重绘卡顿问题? 测试机器 iPhone12

    • 你当前是什么框架(必填):vue
    • 你使用的是哪个包(必填): "lucky-canvas": "^1.7.27",
    • 你当前插件的版本(必填):"lucky-canvas": "^1.7.27",
    • 当前环境是小程序还是浏览器(选填):浏览器
    • 详细描述你的bug:
    • 问题代码(重要):
    <SlotMachine
              :blocks="[
                {
                  imgs: [
                    {
                      src: '/resource/img/h5-lucky/bg.png',
                      width: '100%',
                    },
                  ],
                },
              ]"
              :prizes="图片List"
              :slots="[
                { order: [0, 1, 2, 3, 4, 5], direction: 1, speed: 100 },
                { order: [1, 2, 3, 4, 5, 0], direction: -1, speed: 100 },
                { order: [3, 4, 5, 2, 0, 1], direction: 1, speed: 100 },
              ]"
              :defaultStyle="{
                borderRadius: Infinity,
              }"
              :defaultConfig="{
                rowSpacing: '-10px',
                colSpacing: '0px',
                accelerationTime: 500,
                decelerationTime: 500,
              }"
            />
          <div v-if="isShow">11</div>
          <button @click="changeIsShow()"><button>
    
         function changeIsShow(){
             if(isShow) {
                 isShow = false;
              } else {
                 isShow = true; 
             }
         }
    
    opened by Eyran 0
  • Taro无法渲染网络图片

    Taro无法渲染网络图片

    • 你当前是什么框架(必填):taro(3.5.4)
    • 你使用的是哪个包(必填):@lucky-canvas/taro
    • 你当前插件的版本(必填):0.0.12
    • 当前环境是小程序还是浏览器(选填):小程序
    • 详细描述你的bug:

    1、无法加载网络图片(小程序配置了域名白名单) image image

    2、结束抽奖时控制台报错 image

    • 问题代码(重要):
    <template>
      <view>
        <LuckyWheel
          ref="myLucky"
          width="600rpx"
          height="600rpx"
          :prizes="prizes"
          :blocks="blocks"
          :buttons="buttons"
          @start="startCallback"
          @end="endCallback"
        ></LuckyWheel>
      </view>
    </template>
    
    <script>
    import { ref, reactive, toRefs } from "vue";
    import { LuckyWheel } from "../../components/lucky";//同步的github上代码,只做了日志打印,未更改其它代码
    export default {
      components: { LuckyWheel },
      setup() {
        const myLucky = ref(null);
        const state = reactive({
          blocks: [
            {
              padding: "13px",
              imgs: [
                {
                  src: "https://admin.xashop.szxinao.com/static/images/l_back.png",
                  width: "100%",
                  height: "100%",
                },
              ],
            },
          ],
          prizes: [
            { fonts: [{ text: "0", 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" },
          ],
          buttons: [
            { radius: "50px", background: "#617df2" },
            { radius: "45px", background: "#afc8ff" },
            {
              radius: "40px",
              background: "#869cfa",
              pointer: true,
              fonts: [{ text: "开始\n抽奖", top: "-20px" }],
            },
          ],
        });
        // 点击抽奖按钮会触发star回调
        function startCallback() {
          // 调用抽奖组件的play方法开始游戏
          myLucky.value.play();
          // 模拟调用接口异步抽奖
          setTimeout(() => {
            // 假设后端返回的中奖索引是0
            const index = 0;
            // 调用stop停止旋转并传递中奖索引
            myLucky.value.stop(index);
          }, 3000);
        }
        // 抽奖结束会触发end回调
        function endCallback(prize) {
          console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaa", prize);
        }
        return {
          ...toRefs(state),
          startCallback,
          endCallback,
          myLucky,
        };
      },
    };
    </script>
    
    级别D:灵异事件 👻 🏷 Taro3.x 
    opened by selectweilin 23
Releases(v3.4.5)
Owner
抽奖插件【大转盘 / 九宫格】
抽奖插件【大转盘 / 九宫格】
vue-canvas-element - a Vue component to create a multipurpose canvas card

| vue-canvas-element vue-canvas-element is a Vue component to create a multipurpose canvas card. vue-canvas-element has many options and can be used i

Antonio 0 Jan 30, 2019
Vue-jumper - 3D racing game in Vue.js

Vue-jumper - 3D racing game in Vue.js

Elone Hoo 12 Aug 26, 2022
:tada: vue canvas动效库

vue-canvas-effect A simple, canvas effect collection for Vue.js ?? online demo | ?? 中文文档 Contents Browser support Installation Usage ES6 On demand Ful

sos 121 Sep 25, 2022
Vue mixin for Html2Canvas

Vue Html2Canvas Vue mixin for Html2Canvas Install npm install vue-html2canvas Or yarn add vue-html2canvas Usage main.js import Vue from 'vue'; impor

MYCURE Inc. 111 Sep 10, 2022
:dizzy: A Vue.js background component for canvas-nest.

vue-canvas-nest A Vue.js component for canvas-nest. Install # install dependencies npm i vue-canvas-nest # or use yarn yarn add vue-canvas-nest Usage

ZYSzys 155 Aug 26, 2022
🖋 Vue Signature Pad Component

Vue Signature Pad Vue component wrap for signature pad Demo Installation $ yarn add vue-signature-pad Usage import Vue from 'vue'; import VueSignature

Peng Jie 382 Sep 29, 2022
A visual graph editor based on G6 and Vue, inspired by GGEditor.

VGEditor A visual graph editor based on G6 and Vue, inspired by GGEditor Online demo flow koni mind Installation yarn and npm yarn add [email protected]

ChrisShen93 197 Oct 2, 2022
A Vue.js wrapper component that turns everything into fun scratch cards.

?? vue-scratchable ??️‍?? ?? Publishing status: A Vue.js wrapper component that turns everything into fun scratch cards. Includes touch support withou

Sebastian Wachter 48 Sep 21, 2022
Highly customizable diagram editor support for Vue.js

Highly customizable diagram editor support for Vue.js

Maksim Kutishchev 67 Sep 26, 2022
A small components library to use Rough.js in Vue.

vue-rough A small components library to use Rough.js in Vue. Examples https://vue-rough.neustadt.dev Installation $ npm install vue-rough import VueR

David Neustadt 25 Aug 20, 2022
A simple to use, but extensive, camera component for Vue 3 with Typescript support to create great camera experiences.

A simple to use, but extensive, camera component for Vue 3 with Typescript support to create great camera experiences.

Bastiaan Jansen 20 Oct 1, 2022
Vue Color Avatar 🧑‍🦱 一个纯前端实现的头像生成网站

Vue Color Avatar ??‍?? 一个纯前端实现的头像生成网站 ??‍?? Read In English 在线预览 https://vue-color-avatar.vercel.app ?? 介绍 这是一款矢量风格头像的生成器,你可以搭配不同的素材组件,生成自己的个性化头像。

LeoKu 2k Sep 27, 2022
A Vue.js plugin to control an HTML5 canvas using EaselJS

vue-easeljs A Vue.js plugin to control an HTML5 canvas using EaselJS Thanks Thanks go to: gskinner - creator of EaselJS Joshua Bemenderfer - writer of

Daniel Kuck-Alvarez 89 May 12, 2022
Vue-drawing-canvas - VueJS Component for drawing on canvas.

vue-drawing-canvas VueJS Component for drawing on canvas. Support for both Vue 3 and Vue 2 + Composition API Demo Vue 3 Vue 2 Deployed on a nuxt conta

Toni Oktoro 35 Sep 29, 2022
Vue Junmper: Retro style 3D rendering engine in full HD Realistic driving physics

vue-jumper live demo Controls Mouse = Steer Click = Brake Double Click = Jump R

晓寻遥 12 Aug 26, 2022
Canvas based scroll wheel for vue.js

Welcome to Vue Scrollwheel ?? Canvas based scroll wheel for vue.js !!! This is not yet production-ready !!! Demo CodeSandbox Demo Install npm install

Ruby Rubenstahl 0 Jul 14, 2020
A Vue component of a slot machine, made with an HTML5 canvas, RWD

Vue-SlotMachine A Vue component of a slot machine, made with an HTML5 canvas, RWD. Table of Contents Installation Usage Support Contributing Installat

Puck Wang 7 Aug 18, 2022
OffCanvas (Sidenav/Drawer) component for Vue.js

OffCanvas OffCanvas (Sidenav/Drawer) component for Vue.js Create a smooth off-canvas sidebar that slides in and out of the page. Live examples & Docs

null 24 Feb 14, 2020
Vue.js components rendering 2D graphics reactively via pixi.js

Vue-PIXI A Vue.js plugin for PIXI.js. Currently it is more a proof of concept that an actual library but it will get there eventually. Greatly inspire

Brendan Daoud 71 Aug 16, 2022