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

其他扩展资料

相关文章
|
1月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
61 3
|
19天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
18 4
|
1月前
|
Web App开发 JavaScript 数据可视化
vue3扩展echart封装为组件库-快速复用
vue3扩展echart封装为组件库-快速复用
116 7
|
2月前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
28天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
129 0
|
28天前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
30 0
|
29天前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
|
6月前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
74 3
|
6月前
|
人工智能 JavaScript 前端开发
毕设项目-基于Springboot和Vue实现蛋糕商城系统(三)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
|
6月前
|
JavaScript Java 关系型数据库
毕设项目-基于Springboot和Vue实现蛋糕商城系统(一)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
168 0