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

Taro lucky-canvas 获取不到 canvas 标签

Open Winner-Wei opened this issue 1 year ago • 0 comments

  • 你当前是什么框架(必填):vue3 + Taro H5, 版本3.4.13
  • 你使用的是哪个包(必填):@lucky-canvas/taro": "^0.0.14
  • 你当前插件的版本(必填):@lucky-canvas/taro": "^0.0.14
  • 当前环境是小程序还是浏览器(选填):vue3 + Taro H5, 版本3.4.13
  • 详细描述你的bug:刷新浏览器,有的时候正常,有的时候就报 “lucky-canvas 获取不到 canvas 标签”
  • 问题代码(重要):没有问题代码,按照官方文档那么写就偶发性的报错
// 代码开始, 别再放歪了行吗
<LuckyWheel
  ref="myLucky"
  :prizes="prizes"
  :blocks="blocks"
  :buttons="buttons"
  @start="startCallback"
  @end="endCallback"
></LuckyWheel>

const myLucky = ref<any>(null);

const blocks = ref([{ padding: pxTransform(6), background: '#FFDDA0' }]);

const prizes = ref([
  { 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' },
])

const buttons = ref([
  {
    radius:  pxTransform(80), background: 'none',
    fonts: [
      { text: '抽奖', top: pxTransform(-45), fontColor: '#fff', fontStyle: 'JDLangZhengTi', fontWeight: 600, fontSize: pxTransform(54) },
      { text: '还剩10次', top: pxTransform(18), fontColor: '#fff', fontStyle: 'PingFang SC', fontWeight: 400, fontSize: pxTransform(18) },
    ],
    imgs: [
      {
        width: pxTransform(200),
        height: pxTransform(250),
        top: pxTransform(-140),
        src: require('@/assets/image/activity/turntable/pointer.png')
      }
    ]
  }
])

// 点击抽奖按钮会触发star回调
const startCallback = () => {
  myLucky.value.play();
  setTimeout(() => {
    const index = 7;
    myLucky.value.stop(index)
  }, 2000);
}

// 抽奖结束会触发end回调
const endCallback  = (prize: any)  => {
  prizeResultInfo.visible = true;
  prizeResultInfo.type = prize.fonts[0].type;
  prizeResultInfo.name = prize.fonts[0].text;
  prizeResultInfo.img = prize.imgs[0].src;
}
// 代码结束

Winner-Wei avatar Oct 13 '24 02:10 Winner-Wei