lucky-canvas icon indicating copy to clipboard operation
lucky-canvas copied to clipboard

LuckyWheel 点击开始按钮不会调用@start的方法

Open yilaisai opened this issue 8 months ago • 2 comments

  • 你当前是什么框架(必填): Vue3 + vite4.0
  • 你使用的是哪个包(必填): @lucky-canvas/vue
  • 你当前插件的版本(必填):0.1.11
  • 当前环境是小程序还是浏览器(选填): 浏览器
  • 详细描述你的bug: 配置完成后,点击start按钮,不会触发@start image
  • 问题代码(重要):
// 代码开始, 别再放歪了行吗

<template>
    <LuckyWheel
        ref="myLucky"
        width="7.1rem"
        height="7.1rem"
        :prizes="prizes"
        :blocks="blocks"
        :buttons="buttons"
        :default-config="defaultConfig"
        @start="startCallback"
        @end="endCallback" 
    /> 
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue';
const myLucky = ref(null)
const getWheelBg = () => {
      return new URL(`../../assets/img/lucky_wheel/wheel_bg.png`, import.meta.url).href
  }

  const getCoinIcon = () => {
      return new URL(`../../assets/img/lucky_wheel/coin.png`, import.meta.url).href
  }

  const getDiamondIcon = () => {
      return new URL(`../../assets/img/lucky_wheel/diamond.png`, import.meta.url).href
  }

  const getBtnIcon = () => {
      return new URL(`../../assets/img/lucky_wheel/spin.png`, import.meta.url).href
  }
const blocks = reactive([{
        imgs: [{
            src:getWheelBg(),
            width:'7.1rem',
            height:'7.1rem'
        }]
    }])

    const prizes = reactive([])

    const buttons = ref([{
        pointer:true,
        fonts:[
            {
                text:'start'
            }
        ],
        imgs: [{
            src:getBtnIcon(),
            with:'1.7rem',
            height:'1.7rem',
            top: '-.8rem'
        }]
    }])

    const defaultConfig = ref({
        offsetDegree: (360/10/2)
    })
    
    const startCallback = () => {
      // 123就不会打印了,没有调用到此函数方法
        console.log(123)
        myLucky.value.play()
    }
    
    const getBasicReward = ()=> {
        $http.get('/user/vip/enterLottery').then(res => {
            if (res.code === 0) {
                for (var i = 0; i<10; i++) {
                    prizes.push({
                        fonts:[{
                            text: (i+1) *100,
                            top:'.5rem',
                            fontColor:'#FFF',
                            fontSize:'.33rem',
                        }],
                        imgs: [{
                            src: i%2?getCoinIcon():getDiamondIcon(),
                            top:'1.2rem',
                            width:i%2?'.68rem':'.78rem',
                            height:i%2?'.68rem':'.63rem',
                        }]
                    })
                }
                isReady.value = true
            }
        })
    }

    onMounted(()=> {
        getBasicReward()
    })

</script>
// 代码结束

yilaisai avatar Oct 17 '23 09:10 yilaisai