Vue.js开发技巧Vue学习笔记Vue.js

常用工具类JS之手动添加"class"标签样

2018-08-07  本文已影响0人  fred_33c7

在写代码的过程中,怎么样手动添加一个样式呢?
我们知道,在VUE中,通过 ref很容易得到一个样式的dom

<div class="group" ref="group">
      <slot>
      </slot>
</div>

在这个template中,我们通过this.children = this.$refs.group.children就很容易或者<div class="group">这个元素的子元素,但是,如果我们想给这些子元素手动添加一个css样式,那怎么样写一个方法呢?比如addClass(child, item')
其实很容易,通常在一个项目中,我们都会建立一个common文件夹保存一些工具类的js文件,我们可以新建一个dom.js,来保存下面的代码。

export function hasClass(el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  return reg.test(el.className)
}

export function addClass(el, className) {
  if (hasClass(el, className)) {
    return
  }

  let newClass = el.className.split(' ')
  newClass.push(className)
  el.className = newClass.join(' ')
}

这个文件很容易看懂,用正则表达式检查这个元素有没有这个class,有的话直接返回,没有的话加上。
例如:

this.children = this.$refs.group.children
for (let i = 0; i < this.children.length; i++) {
      let child = this.children[i]
      addClass(child, 'item')
}

这样的话,就能给元素添加样式标签了,当然,前提是item标签已经在当前css文件里面存在。

上一篇 下一篇

猜你喜欢

热点阅读