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 = ''
  }
}

其他扩展资料

相关文章
|
7天前
|
Web App开发 JavaScript 前端开发
解决Vue.js Devtools未检测到Vue实例的问题
解决Vue.js Devtools未检测到Vue实例的问题
|
7天前
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
33 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
|
8天前
|
JavaScript 前端开发 开发者
Vue路由及Node.js环境搭建
Vue.js 和 Node.js 是两个不同的技术,分别用于前端和后端开发,具有不同的用途和功能
5 1
|
8天前
|
JavaScript 前端开发 数据可视化
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API,使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等。这里记录一下如何在Vue项目中使用Three.js
55 4
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
|
8天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable扩展属性的升级修改
ruoyi-nbcio-plus基于vue3的flowable扩展属性的升级修改
13 0
|
8天前
|
XML 前端开发 JavaScript
javascript扩展小知识(必须细节)
javascript扩展小知识(必须细节)
13 0
|
8天前
|
存储 JavaScript
报错permission.js:41 [Vue warn]: Property “showClose“ must be accessed with “$data.showClose“ because
报错permission.js:41 [Vue warn]: Property “showClose“ must be accessed with “$data.showClose“ because
|
8天前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
41 3
|
8天前
|
人工智能 JavaScript 前端开发
毕设项目-基于Springboot和Vue实现蛋糕商城系统(三)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
|
8天前
|
JavaScript Java 关系型数据库
毕设项目-基于Springboot和Vue实现蛋糕商城系统(一)
毕设项目-基于Springboot和Vue实现蛋糕商城系统