DOM 常用操作

el去除某个class

export const removeClass = (el, className) => {
    if (!hasClass(el, className)) {
        return
    }
    let reg = new RegExp('(^|\\s)' + className + '(\\s|$)', 'g')
    el.className = el.className.replace(reg, ' ')
}

el添加某个class

export const addClass = (el, className) => {
    if (hasClass(el, className)) {
        return
    }
    let newClass = el.className.split(' ')
    newClass.push(className)
    el.className = newClass.join(' ')
}

el是否包含某个class

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

el是否在视口范围内

export const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
    const { top, left, bottom, right } = el.getBoundingClientRect();
    const { innerHeight, innerWidth } = window;
    return partiallyVisible
        ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
        ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
        : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
}

滚动到顶部

const scrollToScrollbarTop = () => {
  let dom = document.querySelector('.scrollbar__wrap')
  if (dom && dom.scrollTop > 0) {
    dom.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  }
}

import { onBeforeUnmount, onMounted, ref } from 'vue'
import { isClient } from '@vueuse/core'
import { throttleAndDebounce } from '../utils'
const threshold = 960
const cubic = (value: number): number => value ** 3
const easeInOutCubic = (value: number): number =>
  value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2
export const useBackTop = (offset = 200) => {
  const shouldShow = ref(false)
  const throttleResize = throttleAndDebounce(onResize, 300)
  const throttleScroll = throttleAndDebounce(onScroll, 160)
  onMounted(() => {
    if (!isClient) return
    onResize()
    onScroll()
    window.addEventListener('resize', throttleResize)
  })
  onBeforeUnmount(() => {
    if (!isClient) return
    window.removeEventListener('resize', throttleResize)
    window.removeEventListener('scroll', throttleScroll)
  })
  const scrollToTop = () => {
    const beginTime = Date.now()
    const beginValue = document.documentElement.scrollTop
    const rAF = window.requestAnimationFrame
    const frameFunc = () => {
      const progress = (Date.now() - beginTime) / 500
      if (progress < 1) {
        document.documentElement.scrollTop =
          beginValue * (1 - easeInOutCubic(progress))
        rAF(frameFunc)
      } else {
        document.documentElement.scrollTop = 0
      }
    }
    rAF(frameFunc)
  }
  function onResize() {
    if (!isClient) return
    const { clientWidth } = document.body
    if (clientWidth < threshold) {
      window.addEventListener('scroll', throttleScroll)
    } else {
      window.removeEventListener('scroll', throttleScroll)
    }
  }
  function onScroll() {
    if (!isClient) return
    shouldShow.value = document.documentElement.scrollTop > offset
  }
  return {
    shouldShow,
    scrollToTop,
  }
}

获取滚动的坐标

export const getScrollPosition = (el = window) => ({
    x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
    y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

是否为PC端

export const isPC = () => {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

是否是移动端

export const isDeviceMobile = () => {
    return /android|webos|iphone|ipod|balckberry/i.test(ua)
}