第一步骤
当项目做一个圆环进度条的时候,我自己用canvas写了一个js,并且封装成函数。当时想到的是直接将函数写在组件中然后进行调用:
报错了:Uncaught TypeError: Cannot read property ‘getContext’ of null
然后意识到canvas的getContext方法需要在页面文档加载完成之后才会去触发识别这个属性。所以canvas写的代码不能直接放在组件当中。
第二步骤
后面就将canvas的js代码写在外部,然后用在index.html去调用,但是发现这样很麻烦,应该当页面无论是初始化还是加载某一个组件时候,都会去调用这类代码,有可能还会报错。
重点解决方法
后面想了想,能不能将canvas.js作为一个模块在需要引用这个模块的组件中去调用它。去往上看了一下这类知识。也找到了方法,之后就是实施起来。canvas.js如下所示:
function loadCanvas(){}
export {loadCanvas};
组件中调用 import loadCanvas from ‘loadCanvas.js’
由于我的vue项目是用vue-cli去生成simple版本的,这个时候继续出错,报错代码如下: webpack_require.i(…) is not a function。
想想这个时候头都大了,一个自写的canvas插件引入到vue的项目中衍生出这么多个问题。但是没办法,还得解决不是。
然后再命令行npm中去查看错误报告,发现
vue项目遇到的坑(vue项目中的某个组件调用外部js)
最新推荐文章于 2024-08-14 17:13:55 发布
在Vue项目中实现圆环进度条时,遇到canvas.js使用的问题。首先,由于页面加载顺序,直接在组件中调用canvas的getContext方法导致报错。然后尝试将canvas.js放在外部并在index.html中引入,但发现这可能导致不必要的多次调用。最终,通过将canvas.js作为模块导入组件中解决,但初始使用ES6的export语法在webpack中报错。改用common.js的module.exports导出后,成功解决该问题。
摘要由CSDN通过智能技术生成