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

其他扩展资料

相关文章
|
18天前
|
机器学习/深度学习 JavaScript Cloud Native
Node.js作为一种快速、可扩展的服务器端运行时环境
Node.js作为一种快速、可扩展的服务器端运行时环境
31 8
|
25天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
35 2
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
36 4
|
29天前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
34 0
|
2月前
|
Web App开发 JavaScript 数据可视化
vue3扩展echart封装为组件库-快速复用
vue3扩展echart封装为组件库-快速复用
167 7
|
2月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
183 0
|
2月前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
55 0
|
2月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
|
25天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的