在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”系列的七篇文章在上周已经更新完成,发表后,有小伙伴在使用时提出了一些文章中没有讲到的问题,此篇作为番外篇,将大家提出的共性问题解答一下,欢迎大家支持原创 ...
随机推荐
- Fragment的常用写法
一般通过add.show.hide相结合的方法来控制Fragment的显示和隐藏,这样不会再重写一遍Fragment的生命周期,节省了时间和内存,当然特殊需求除外. package com.examp ...
- JS浮点数运算Bug的解决办法
方法一:重写浮点运算的函数 //除法函数,用来得到精确的除法结果 //说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显.这个函数返回较为精确的除法结果. //调用:acc ...
- ARMV8 datasheet学习笔记4:AArch64系统级体系结构之编程模型(4)- 其它
1. 前言 2.可配置的指令使能/禁用控制和trap控制 指令使能/禁用 当指令被禁用,则这条指令就会变成未定义 指令Trap控制 控制某条或某些指令在运行时进入陷阱,进入陷阱的指令会产生trap异常 ...
- mysql系列二、mysql内部执行过程
向MySQL发送一个请求的时候,MySQL到底做了什么 客户端发送一条查询给服务器. 服务器先检查查询缓存,如果命中了缓存,则立刻返回存储在缓存中的结果.否则进入下一阶段. 服务器端进行SQL解析.预 ...
- JavaScript——封装
封装:使用对象封装的好处是可以减少全局变量污染的机会,讲属性,函数都隶属一个对象. 封装前: <script> var name="foo"; //name是全局的,被 ...
- Struts2的类型转换器
Struts2的类型转换器 如何实现Struts2的类型转换器? * 继承StrutsTypeConverter * 覆盖convertFromString和convertToString 注册类型转 ...
- 【SVN技巧】如何协同开发LabVIEW代码 1
前言 在我们工作中,必然会遇到代码的多个版本问题,也必然会遇到版本控制问题.如果所在的公司具有良好的项目管理体系或者软件管理体系,那么其版本控制应该有严格的使用规范,如果没有则作为一个上进好青年也应当 ...
- HTTP基础知识3
HTTP之URL HTTP使用统一资源标识符(Uniform Resource Identifiers, URI)来传输数据和建立连接.URL是一种特殊类型的URI,包含了用于查找某个资源的足够的信息 ...
- Idea xml 粘贴文本保持原有格式
setting->Editor->Code Style->XML 在右边的面板中,单击第二个 “Other” 的页签,勾选“Keep white spaces”,重启idea.
- JVM内存管理概述
1.概述 java不在需要开发人员显示的分配内存和回收内存,而是由JVM自动管理内存的分配和回收(又称为垃圾回收-GC),这简化了编程难度,但同时可能使得程序员在不知不觉中浪费了很多内存,导致JVM花 ...