Taro+Vue3大转盘模拟器调试报错Error: MiniProgramError {"errMsg":"canvasToTempFilePath:fail Cannot read property 'width' of undefined"}

[ggggggggxl]

• 你当前是什么框架(必填)：Taro

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

• 你当前插件的版本(必填)："^0.0.14"

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

• 详细描述你的bug：运行后，微信开发者工具模拟器控制台报错，但目前能正常运行

• 问题代码(重要)：官方LuckyWheel的Taro-vue3简略demo

// 代码开始, 别再放歪了行吗
<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 '@lucky-canvas/taro/vue'
export default {
  components: { LuckyWheel },
  setup () {
    const myLucky = ref(null)
    const state = reactive({
      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回调
    function startCallback () {
      // 调用抽奖组件的play方法开始游戏
      myLucky.value.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        const index = 0
        // 调用stop停止旋转并传递中奖索引
        myLucky.value.stop(index)
      }, 3000)
    }
    // 抽奖结束会触发end回调
    function endCallback (prize) {
      console.log(prize)
    }
    return {
      ...toRefs(state),
      startCallback,
      endCallback,
      myLucky
    }
  }
}
</script>
// 代码结束

[shangwanzhong]

什么时候能解决 有个结果 @buuing , 现有很多都用的小程序+vue3

[skyfox]

什么时候能解决 有个结果 @buuing , 现有很多都用的小程序+vue3

`我uniapp +vue3，options语法中，遇到了这个问题，最后的解决办法是直接在script里面

<script> //不使用代理变量 var currentCanvas = null; export default { // 获取canvas实例 const queryCanvas = uni.createSelectorQuery(); queryCanvas .select('#canvas') .fields({ node: true, size: true }) .exec((res) => { currentCanvas = res[0].node; // 截图 uni.canvasToTempFilePath({ width: cav.width, height: cav.height, canvas: currentCanvas, //2d用这个 fileType: "png", quality: 1, success(res) {`