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