Vue 全局导入 JS 对 ClassName 进行增删扩展

简介: Vue 全局导入 JS 对 ClassName 进行增删扩展

通过在 Vue 项目中的 main.js 文件中进行导入:


// 节点操作JS import node from '@/utils/node.js' // 注意这行代码需要放到所有的 import 代码之后,否则会报错,Vue 无法允许在任何 import 之前使用 Vue 对象 // $ 符号主要就是为了区分属性,可用可不用,但是Vue所有的自带属性都有 $,主要就是为了区别自带与普通属性的区别,相当于Vue内定的默认书写规则,这样写更清晰明了。 Vue.prototype.$node = node


错误写法:


import node from '@/utils/node.js' Vue.prototype.$node = node // 在任何 import 使用 Vue 都会报错 导致无法使用 import node from 'xxxx'


Vue 项目中使用:


if (!this.$node.hasClass(children, 'animation-container')) { this.$node.addClass(children, 'animation-container') }


JS文件内容:


``` export default { /* * 节点是否存在了 className * @param {} el 节点 * @param {} className className */ hasClass (el, className) { if (el && el.className) { return !!el.className.match(new RegExp('(\s|^)' + className + '(\s|$)')) } return false }, /* * 添加 className * @param {} el 节点 * @param {} className className / addClass (el, className) { if (el && !this.hasClass(el, className)) el.className += ' ' + className }, /* * 移除 className * @param {} el 节点 * @param {} className className / removeClass (el, className) { if (this.hasClass(el, className)) { var reg = new RegExp('(\s|^)' + className + '(\s|$)') el.className = el.className.replace(reg, ' ') } }, /* * 移除全部 className * @param {*} el 节点 */ removeAllClass (el) { el.className = '' } }


```


其他扩展资料

相关文章
|
8天前
|
JavaScript 前端开发 Java
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
15 2
|
13天前
vue.js+node.js+mysql在线聊天室源码
vue.js+node.js+mysql在线聊天室源码 技术栈:vue.js+Element UI+node.js+socket.io+mysql
39 3
|
28天前
|
JavaScript Java 测试技术
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
38 7
|
28天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
1月前
|
Web App开发 JavaScript 前端开发
解决Vue.js Devtools未检测到Vue实例的问题
解决Vue.js Devtools未检测到Vue实例的问题
|
1月前
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
87 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
|
1月前
|
JavaScript 前端开发 开发者
Vue路由及Node.js环境搭建
Vue.js 和 Node.js 是两个不同的技术,分别用于前端和后端开发,具有不同的用途和功能
13 1
|
19天前
|
缓存 JavaScript 前端开发
Nuxt.js实战:Vue.js的服务器端渲染框架
Nuxt.js提供了开发、构建和部署的完整工作流。使用nuxt命令启动开发服务器,nuxt build进行生产构建,nuxt start启动生产服务器
19 0
|
12天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
162 63
|
12天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
26 6