vue-对象元素dom常用的一些操作封装方法(hasClass,addClass，前缀)

最新推荐文章于 2023-06-26 13:24:08 发布

pingmin_1001

最新推荐文章于 2023-06-26 13:24:08 发布

阅读量445

点赞数

分类专栏： # vue # javascript 文章标签：前端 javascript es6 Powered by 金山文档

本文链接：https://blog.csdn.net/pinhmin/article/details/129161158

版权

javascript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

常用一些dom元素判断组装方法dom.js

/**是否有class名称*/
export function hasClass(el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  return reg.test(el.className)
}
/**添加class名称*/
export function addClass(el, className) {
  if (hasClass(el, className)) {
    return
  }

  let newClass = el.className.split(' ')
  newClass.push(className)
  el.className = newClass.join(' ')
}
/**封装前缀*/
let elementStyle = document.createElement('div').style
let vendor = (() => {
  let transformNames = {
    webkit: 'webkitTransform',
    Moz: 'MozTransform',
    O: 'OTransform',
    ms: 'msTransform',
    standard: 'transform'
  }

  for (let key in transformNames) {
    if (elementStyle[transformNames[key]] !== undefined) {
      return key
    }
  }

  return false
})()
export function prefixStyle(style) {
  if (vendor === false) {
    return false
  }

  if (vendor === 'standard') {
    return style
  }

  return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}

用法：

import {addClass} from 'common/js/dom'
addClass(this.$refs.sliderGroup,'active')/**添加active样式*/

/**
 *封装前缀，不然要写多个前缀:webkit，o,ms,moz 
 * this.$refs.progressBtn.style['transform']=`translate3d(0,${translateY}px,0)`
 * this.$refs.progressBtn.style['webkitTransform']=`translate3d(0,${translateY}px,0)`
*/
import {prefixStyle} from 'common/js/dom'
const transform = prefixStyle('transform')
this.$refs.progressBtn.style[transform] = `translate3d(${offsetWidth}px,0,0)`