115 lines
3.7 KiB
JavaScript
115 lines
3.7 KiB
JavaScript
export function createElement({ innerText, innerHTML, textContent, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
|
|
const element = document.createElement(tagName)
|
|
for (const key in attributes) {
|
|
if (key.startsWith('on')) element[key] = attributes[key] // 如果是事件则直接赋值
|
|
else element.setAttribute(key, attributes[key]) // 否则是属性则使用setAttribute
|
|
}
|
|
if (dataset) Object.assign(element.dataset, dataset)
|
|
if (style) Object.assign(element.style, style)
|
|
if (classList.length) element.classList.add(...classList)
|
|
if (textContent) element.textContent = textContent
|
|
if (innerText) element.innerText = innerText
|
|
if (innerHTML) element.innerHTML = innerHTML
|
|
if (readOnly) element.readOnly = readOnly
|
|
if (children) children.forEach(child => element.appendChild(child))
|
|
return element
|
|
}
|
|
|
|
export function List(options) {
|
|
return createElement(options, 'ul')
|
|
}
|
|
|
|
export function ListItem(options) {
|
|
return createElement(options, 'li')
|
|
}
|
|
|
|
export function Span(options) {
|
|
return createElement(options, 'span')
|
|
}
|
|
|
|
export function Button(options) {
|
|
return createElement({
|
|
...options,
|
|
style: {
|
|
cursor: 'pointer',
|
|
...options.style
|
|
}
|
|
}, 'button')
|
|
}
|
|
|
|
export function Img(options) {
|
|
return createElement(options, 'img')
|
|
}
|
|
|
|
export function Input(options) {
|
|
return createElement(options, 'input')
|
|
}
|
|
|
|
export function TextArea(options) {
|
|
return createElement(options, 'textarea')
|
|
}
|
|
|
|
export function Avatar(options) {
|
|
const element = createElement(options, 'img')
|
|
element.onerror = () => element.src = '/favicon.ico'
|
|
return element
|
|
}
|
|
|
|
export function Dialog(options) {
|
|
const element = createElement({
|
|
tabIndex: 0,
|
|
style: {
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
zIndex: 1000,
|
|
width: '100%',
|
|
height: '100%',
|
|
backdropFilter: 'blur(5px)',
|
|
duration: '0.5s',
|
|
transition: 'all 0.5s'
|
|
},
|
|
onclick: async event => {
|
|
if (event.target !== event.currentTarget) return
|
|
await event.target.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
|
|
await event.target.remove()
|
|
},
|
|
onkeydown: async event => {
|
|
if (event.key !== 'Escape') return
|
|
await event.target.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
|
|
await event.target.remove()
|
|
},
|
|
children: [
|
|
createElement({
|
|
...options,
|
|
style: {
|
|
position: 'fixed',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
backgroundColor: '#fff',
|
|
borderRadius: '150px',
|
|
boxShadow: '0 0 1em #ccc',
|
|
overflow: 'hidden',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
...options.style,
|
|
}
|
|
})
|
|
]
|
|
})
|
|
const observer = new MutationObserver(mutationsList => {
|
|
for (const mutation of mutationsList) {
|
|
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
|
|
element.focus()
|
|
element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 100 }).finished
|
|
return observer.disconnect()
|
|
}
|
|
}
|
|
})
|
|
observer.observe(document.body, { childList: true, subtree: true })
|
|
return element
|
|
}
|
|
|
|
export default { createElement, List, ListItem, Span, Button, Img, Input, TextArea, Avatar, Dialog }
|