在vue项目中使用canvas-nest.js,报parameter 1 is not of type 'Element'
canvas-nest.js是一款轻量的网页特效,如图:

github地址:https://github.com/hustcc/canvas-nest.js
在普通的html项目中,只要将<script src="dist/canvas-nest.js"></script>插入到body标签最下边即可。
在vue项目中,使用时配置
import CanvasNest from 'canvas-nest.js';
const config = { // 配置
color: '255, 0, 0', // 线条颜色
pointColor: '255, 155, 0', // 节点颜色
opacity: 1, // 线条透明度
count: 222, // 线条数量
zIndex: 99 // 画面层级
};
// Using config rendering effect at 'element'.
// element为html的dom对象,如id为body的dom为:document.getElementById('body');
const cn = new CanvasNest(element, config);
// destroy
cn.destroy();
但是在vue项目中,引入canvas-nest.js后,直接在created中 new CanvasNest(element, config);的话,可能会报下图的错误,不显示效果

原因是dom没有渲染完毕,就开始使用element。
解决办法:在created中
this.$nextTick(()=> {
const cn = new CanvasNest(element, config);
})
这样写一个延时操作就可以了,当然也可以使用setTimeout。
总结,遇到parameter 1 is not of type 'Element' 这样类型的报错,需要检查dom是否渲染完毕。
在vue项目中使用canvas-nest.js,报parameter 1 is not of type 'Element'的更多相关文章
- vue项目中使用canvas
canvas API 文档:https://www.canvasapi.cn/ 一.在html中使用canvas canvas 元素用于在网页上绘制图形. 在html中,使用 document.ge ...
- vue项目中连接MySQL时,报错ER_ACCESS_DENIED_ERROR: Access denied for user 'root'@'localhost' (using password:YES)
一.前言 我们前端很多时候在写vue项目的时候,会把后端的数据拿到本地来跑,在连接MySQL数据库的时候,可能出现一些问题,如: ER_ACCESS_DENIED_ERROR: Access deni ...
- Vue项目中如何引用外部js
第一种方法:(感觉这个有问题) 1.把需要的js放到static文件夹下 2.在Index.html页面引入 3.在webpack.base.conf.js添加下面代码 externals: { 'W ...
- vue项目中引入mui.poppicker.js文件时报错“Uncaught ReferenceError: mui is not defined”
解决:在mui.js的源文件后最后加上 window.mui = mui;
- 解决vue项目中使用ivew定制主题报 .bezierEasingMixin();错误
背景:在使用view-design(iview)定制主体时(覆盖变量方式)出现less错误 完整错误如下 解决方法: 在vue.config.js中添加 less-loader:5.0.x modul ...
- vue项目中 如何让外部引入的js模块 的this值 指向vue实例
当前是vue项目,想在tool.js(工具模块)中封装一个跳转页面的方法, goToUrl(name,query){ if(query){ if(query.addressCode){ vueObje ...
- 在vue项目npm run build后,index.html中引入css和js 报MIME type问题
问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html ...
- vue项目中使用bpmn-基础篇
内容概述 本系列“vue项目中使用bpmn-xxxx”分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项 ...
- vue项目中使用bpmn-番外篇(留言问题总结)
前情提要 “vue项目中使用bpmn-xxxx”系列的七篇文章在上周已经更新完成,发表后,有小伙伴在使用时提出了一些文章中没有讲到的问题,此篇作为番外篇,将大家提出的共性问题解答一下,欢迎大家支持原创 ...
随机推荐
- 【vue报错】——listen EADDRINUSE :::8080 解决方案
题原因: 此项错误表示 8080 端口被占用 解决方案一: 打开cmd输入:netstat -ano|findstr "8080"查看所有端口信息,并通过findstr “8080 ...
- Java InputStream 、 InputStreamReader和BufferedReader
https://blog.csdn.net/zgljl2012/article/details/47267609 在Java中,上述三个类经常用于处理数据流,下面介绍一下三个类的不同之处以及各自的用法 ...
- 2017-2018-2 20155303『网络对抗技术』Exp7:网络欺诈防范
2017-2018-2 『网络对抗技术』Exp7:网络欺诈防范 --------CONTENTS-------- 一.原理与实践说明 1.实践目标 2.实践内容概述 3.基础问题回答 二.实践过程记录 ...
- python 错误: UnicodeDecodeError: 'ascii' codec can't decode byte 0xe4 in position 0: ordinal not in range(128)
参照:http://www.runoob.com/django/django-form.html 做了个表单提交和回显,但是报了以上错误 查资料发现是 python从request取值的是unicod ...
- 如果你的ie内核浏览器总是缓冲数据的话
如果你的ie内核浏览器总是缓冲数据的话 运行cmd,输入netsh winsock reset wincock是支持多种协议的网络编程接口 因为ie内核的浏览器的一些设置和插件可能会被其他软件篡改,所 ...
- 优秀的gdb图形化前端调试器
目前我自己最喜欢的还是 ddd . gdbgui 和 vim-vebugger插件或vimgdb插件 三种. You could try using Insight a graphical front ...
- 关于GTID模式下备份时 --set-gtid-purged=OFF 参数的实验【转】
刚刚听了吴老师是复制章节课程,对于GTID模式下备份数据--set-gtid-purged=OFF 参数有些不理解,于是乎做了实验,加深理解,得出些结论,如有错漏请批评指正! 部分备份: [root@ ...
- 3种shell自动交互的方法【转】
一.背景 shell脚本在处理自动循环或大的任务方面可节省大量的时间,通过创建一个处理任务的命令清单,使用变量.条件.算术和循环等方法快速创建脚本以完成相应工作,这比在命令行下一个个敲入命令要省时省力 ...
- mysql caching_sha2_password异常分析
使用navicat连接mysql报错 解决办法: 通过命令行登录mysql后,输入: alter user 'root'@'localhost' IDENTIFIED WITH mysql_nativ ...
- CentOS6.5环境使用keepalived实现nginx服务的高可用性及配置详解
keepalived基础概念 Keepalived是一个基于VRRP协议来实现的WEB服务高可用方案,可以利用其来避免单点故障.一个WEB服务至少会有2台服务器运行Keepalived,一台为主 ...