153 lines
3.0 KiB
JavaScript
153 lines
3.0 KiB
JavaScript
import globalMethods from './index'
|
||
|
||
export default class Dom {
|
||
els = []
|
||
|
||
constructor(arg) {
|
||
if (typeof arg === 'string') {
|
||
return this.find(arg)
|
||
}
|
||
if (typeof arg === 'object') {
|
||
this.els.push(arg)
|
||
}
|
||
if (typeof arg === 'function') {
|
||
document.addEventListener("DOMContentLoaded", arg);
|
||
}
|
||
return this
|
||
}
|
||
|
||
addClass(class1) {
|
||
if (typeof class1 === 'string') {
|
||
this.els.forEach(el => {
|
||
el.classList.add(class1)
|
||
})
|
||
} else {
|
||
this.els.forEach(el => {
|
||
el.classList.add(...class1)
|
||
})
|
||
}
|
||
return this
|
||
}
|
||
|
||
replaceClass(class1, class2) {
|
||
this.els.forEach(el => {
|
||
el.classList.replace(class1, class2)
|
||
})
|
||
return this
|
||
}
|
||
|
||
|
||
find(tag) {
|
||
let els = []
|
||
if (this.els.length) {
|
||
els = this.els[0].querySelectorAll(tag)
|
||
} else {
|
||
els = document.querySelectorAll(tag)
|
||
}
|
||
if (els.length) {
|
||
this.els = els
|
||
}
|
||
return this
|
||
}
|
||
|
||
create(template) {
|
||
let tempNode = document.createElement('div');
|
||
tempNode.innerHTML = template.trim();
|
||
this.els = [tempNode.firstChild]
|
||
return this;
|
||
}
|
||
|
||
append(that) {
|
||
this.els.forEach(el => {
|
||
that.els.forEach(v => {
|
||
el.appendChild(v)
|
||
})
|
||
})
|
||
return this
|
||
}
|
||
|
||
remove() {
|
||
this.els.forEach(el => {
|
||
el.parentNode.removeChild(el)
|
||
})
|
||
return this
|
||
}
|
||
|
||
attr(...args) {
|
||
if (args.length === 1) {
|
||
return this.els[0][args[0]]
|
||
}
|
||
}
|
||
|
||
css(...args) {
|
||
if (args.length === 1) {
|
||
//情况一：获取样式
|
||
if (typeof args[0] === 'string') {
|
||
return window.getComputedStyle(this.els[this.els.length - 1], null)[args[0]]
|
||
// return globalMethods.$getCss2
|
||
// return this.els[0].style[args[0]]
|
||
} else {
|
||
//情况三：设置多个样式
|
||
Object.keys(args[0]).map(key => {
|
||
this.els.forEach(el => {
|
||
el.style[key] = this.getStyleValue(key, args[0][key])
|
||
})
|
||
}
|
||
)
|
||
}
|
||
} else {
|
||
//情况二，设置一对css样式
|
||
this.els.forEach(el => {
|
||
el.style[args[0]] = this.getStyleValue(args[0], args[1])
|
||
})
|
||
}
|
||
return this
|
||
}
|
||
|
||
on(eventName, fn) {
|
||
let eventArray = eventName.split(" ");
|
||
this.els.forEach(el => {
|
||
eventArray.map(event => {
|
||
el.addEventListener(event, fn);
|
||
})
|
||
})
|
||
return this;
|
||
}
|
||
|
||
trigger(eventName) {
|
||
let eventArray = eventName.split(" ");
|
||
this.els.forEach(el => {
|
||
eventArray.map(event => {
|
||
el.dispatchEvent(new Event(event));
|
||
})
|
||
})
|
||
return this;
|
||
}
|
||
|
||
getWidth() {
|
||
return this.els[0].getBoundingClientRect().width
|
||
}
|
||
|
||
getHeight() {
|
||
return this.els[0].getBoundingClientRect().height
|
||
}
|
||
|
||
getStyleValue(key, value) {
|
||
let whiteList = [
|
||
'top',
|
||
'left',
|
||
'right',
|
||
'bottom',
|
||
]
|
||
if (whiteList.find(v => v === key)) {
|
||
if (typeof value === 'number') {
|
||
return value + 'px'
|
||
}
|
||
}
|
||
return value
|
||
}
|
||
|
||
removePx(val) {
|
||
return parseInt(val)
|
||
}
|
||
} |