mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-16 02:11:48 +08:00
6503e55277
* refactor(utils-v2): migrate utils * refactor(utils-v2): migrate utils * refactor(utils-v2): migrate utils * refactor(utils): remove * refactor(utils): rename * refactor(utils): move EVENT_CODE to constants * refactor: remove generic
73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
import { isClient } from '@vueuse/core'
|
|
import { isObject } from '../types'
|
|
import { camelize } from '../strings'
|
|
import { entriesOf, keysOf } from '../objects'
|
|
import type { CSSProperties } from 'vue'
|
|
|
|
export const classNameToArray = (cls = '') =>
|
|
cls.split(' ').filter((item) => !!item.trim())
|
|
|
|
export const hasClass = (el: Element, cls: string): boolean => {
|
|
if (!el || !cls) return false
|
|
if (cls.includes(' ')) throw new Error('className should not contain space.')
|
|
return el.classList.contains(cls)
|
|
}
|
|
|
|
export const addClass = (el: Element, cls: string) => {
|
|
if (!el || !cls.trim()) return
|
|
el.classList.add(...classNameToArray(cls))
|
|
}
|
|
|
|
export const removeClass = (el: Element, cls: string) => {
|
|
if (!el || !cls.trim()) return
|
|
el.classList.remove(...classNameToArray(cls))
|
|
}
|
|
|
|
export const getStyle = (
|
|
element: HTMLElement,
|
|
styleName: keyof CSSProperties
|
|
): string => {
|
|
if (!isClient || !element || !styleName) return ''
|
|
|
|
let key = camelize(styleName)
|
|
if (key === 'float') key = 'cssFloat'
|
|
try {
|
|
const style = element.style[styleName]
|
|
if (style) return style
|
|
const computed = document.defaultView?.getComputedStyle(element, '')
|
|
return computed ? computed[styleName] : ''
|
|
} catch {
|
|
return element.style[styleName]
|
|
}
|
|
}
|
|
|
|
export const setStyle = (
|
|
element: HTMLElement,
|
|
styleName: CSSProperties | keyof CSSProperties,
|
|
value?: string | number
|
|
) => {
|
|
if (!element || !styleName) return
|
|
|
|
if (isObject(styleName)) {
|
|
entriesOf(styleName).forEach(([prop, value]) =>
|
|
setStyle(element, prop, value)
|
|
)
|
|
} else {
|
|
const key = camelize(styleName)
|
|
element.style[key] = value
|
|
}
|
|
}
|
|
|
|
export const removeStyle = (
|
|
element: HTMLElement,
|
|
style: CSSProperties | keyof CSSProperties
|
|
) => {
|
|
if (!element || !style) return
|
|
|
|
if (isObject(style)) {
|
|
keysOf(style).forEach((prop) => removeStyle(element, prop))
|
|
} else {
|
|
setStyle(element, style, '')
|
|
}
|
|
}
|