Vue 全局导入 JS 方式以及对 ClassName 进行增删扩展_vue再main.js全局导入calss类-CSDN博客

本文链接：https://blog.csdn.net/zz00008888/article/details/109195723

通过在 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 = ''
  }
}