Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Alan-222 opened this issue Apr 20, 2022 · 32 comments
Closed

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

Alan-222 opened this issue Apr 20, 2022 · 32 comments

Comments

@Alan-222
Copy link

  • 你当前是什么框架(必填):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>
// 代码结束
@buuing
Copy link
Owner

buuing commented Apr 20, 2022

复现个小demo压缩发给我

@Alan-222
Copy link
Author

vue-test.zip

@buuing
Copy link
Owner

buuing commented Apr 20, 2022

我这里启动你的demo可以运行, 无报错?

@buuing
Copy link
Owner

buuing commented Apr 20, 2022

node什么版本, 检查npm install是否有报错

@Alan-222
Copy link
Author

image
我也不清楚 编译时就有warn了 完整引入项目都启动不了。。。

@Alan-222
Copy link
Author

node的版本是14.17.0

@buuing
Copy link
Owner

buuing commented Apr 20, 2022

算了, 你把 node_modules 删掉, 重新 npm install 得了

@Alan-222
Copy link
Author

额 我有删掉 node_modules 再安装这样试过挺多次了 还是不行 。我就是按官网的执行npm install @lucky-canvas/vue@latest安装的,我按你npm i vue-demi @vue/composition-api这个安装了 在启动还是编译报错

@buuing
Copy link
Owner

buuing commented Apr 20, 2022

我这边 node 版本是 12.22.7

你要是想用 vue组件版本的话, 可以试试这个版本, 然后把 node_modulespackage-lock.json 都删掉, 再重新 npm install 尝试

@buuing
Copy link
Owner

buuing commented Apr 20, 2022

因为你发送的demo, 我在本地是可正常启动的, 那个vue-demi的警告明显是没安装上, 他有个钩子必须得和lucky-canvas一起触发

@buuing
Copy link
Owner

buuing commented Apr 20, 2022

如果你不想尝试了, 就直接按 js 的方式使用就可以

@Alan-222
Copy link
Author

好的 我试试

@buuing
Copy link
Owner

buuing commented Apr 20, 2022

还是不行是嘛

@Alan-222
Copy link
Author

降低node版本就可以了 我降低到了你那个版本12.22.7

@Alan-222
Copy link
Author

谢谢!

@buuing
Copy link
Owner

buuing commented Apr 20, 2022

ok

Repository owner deleted a comment from Alan-222 Apr 27, 2022
@DuYr
Copy link

DuYr commented Jun 21, 2022

为什么我这边打包会出错啊,vue3说是
1655818109501

@buuing
Copy link
Owner

buuing commented Jun 21, 2022

你这个看着像是 ts 的报错? 你怎么用的

@DuYr
Copy link

DuYr commented Jun 22, 2022

你看这个好像是 ts 的报错?你怎么用的

现在解决了

@buuing
Copy link
Owner

buuing commented Jun 22, 2022

@DuYr 哪里的问题, 组件内部需要调整吗

@DuYr
Copy link

DuYr commented Jun 22, 2022

@DuYr 哪里的问题, 组件内部需要调整吗

我在tsconfig里面少加个东西 "skipLibCheck": true

@DuYr
Copy link

DuYr commented Jun 22, 2022

话说你们这个prizes执行的顺序会比vue的生命周期优先吗

@buuing
Copy link
Owner

buuing commented Jun 22, 2022

prizes执行? 你是说绘制吗, 绘制最起码要等到mounted拿到canvas的dom才能绘制

@DuYr
Copy link

DuYr commented Jun 22, 2022

image
我这么写的,总是undefined

@buuing
Copy link
Owner

buuing commented Jun 22, 2022

你的代码有问题? 接口回调是异步的, 你在哪里去赋值的?????

@DuYr
Copy link

DuYr commented Jun 22, 2022

.then()里面

@DuYr
Copy link

DuYr commented Jun 22, 2022

然后把值再给这个抽奖的参数

@DuYr
Copy link

DuYr commented Jun 22, 2022

image

@buuing
Copy link
Owner

buuing commented Jun 22, 2022

你就不能把初始化prizes数据也放在then里面?

@DuYr
Copy link

DuYr commented Jun 22, 2022

额 抱歉,敲麻痹了。

@buuing
Copy link
Owner

buuing commented Jun 22, 2022

没事, 用着顺手可以点个star支持一下

@DuYr
Copy link

DuYr commented Jun 22, 2022

okok

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants