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

994 阅读1分钟

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


其他扩展资料