在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”系列的七篇文章在上周已经更新完成,发表后,有小伙伴在使用时提出了一些文章中没有讲到的问题,此篇作为番外篇,将大家提出的共性问题解答一下,欢迎大家支持原创 ...
随机推荐
- Jquery对当前日期的操作(格式化当前日期)
// 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占 ...
- swift 计算100000以内的 回文数
... { var rep = var aa = a repeat{ rep = rep * + aa % aa = aa / }) if(rep == a) { print("\(a)是回 ...
- 在手机的浏览器上通过连接打开App
Android系统中实现 1.在系统系统自带的浏览器中 首先做成HTML的页面,页面内容格式如下: <a href="[scheme]://[host]/[path]?[query]& ...
- 【黑客免杀攻防】读书笔记2 - 免杀与特征码、其他免杀技术、PE进阶介绍
第3章 免杀与特征码 这一章主要讲了一些操作过程.介绍了MyCCL脚本木马免杀的操作,对于定位特征码在FreeBuf也曾发表过类似工具. VirTest5.0特征码定位器 http://www.fre ...
- Java中利用Scanner键入的字符串与其他字符串的比较
利用Scanner获取到键入的字符串与其他字符串作比较时,如果直接用关系运算符 == 比较,得到的结果总是false,因为实际比较的是两个变量引用的内存地址: 而要比较其内容是否相等,可以使用Obje ...
- nagios系列(一)centos6.5环境部署nagios服务端
nagios软件安装包存放目录:/home/oldboy/tools nagios服务安装目录:/usr/local/nagios 1.配置yum源 echo "------ step 1: ...
- sysbench安装、对Mysql压力测试、结果解读及mysql数据库跟踪优化
sysbench是一款开源的多线程性能测试工具,可以执行CPU/内存/线程/IO/数据库等方面的性能测试. sysbench支持以下几种测试模式: 1.CPU运算性能 2.磁盘IO性能 3.调度程序性 ...
- ajax返回json对象的两种写法
1. 前言 dataType: 要求为String类型的参数,预期服务器返回的数据类型.如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并 ...
- JS 自己实现Map
function MyMap() { var items = {}; this.has = function (key) { return key in items; }; this.set = fu ...
- Quartz 定时邮件发送多个备份文件
项目代码 pom.xml 文件Quartz 的包是整个项目不可缺少的 <properties> <!-- Spring的版本 --> <springframework.v ...