移除css, 合并为js

public/weigets.js

@@ -1,10 +1,11 @@
-export function createElement({ innerText, textContent, onclick, onchange, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
+export function createElement({ innerText, textContent, onclick, onchange, onkeydown, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
     const element = document.createElement(tagName)
     for (const key in attributes) element.setAttribute(key, attributes[key])
     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 (onkeydown) element.onkeydown = onkeydown
     if (onchange) element.onchange = onchange
     if (onclick) element.onclick = onclick
     if (dataset) Object.assign(element.dataset, dataset)
@@ -40,61 +41,58 @@ export function Avatar(options) {
 
 // 弹出窗口, 高斯模糊背景, 进入离开动画过渡
 export function Dialog(options) {
-    const element = createElement({}, 'div')
+    const element = createElement({
-    const content = createElement(options)
+        tabIndex: 0,
-    element.tabIndex = 0  // 使元素可以获得焦点
+        style: {
-    element.style.cssText = `
+            position: 'fixed',
-        position: fixed;
+            top: 0,
-        top: 0;
+            left: 0,
-        left: 0;
+            zIndex: 1000,
-        z-index: 1000;
+            width: '100%',
-        width: 100%;
+            height: '100%',
-        height: 100%;
+            backdropFilter: 'blur(5px)',
-        backdrop-filter: blur(5px);
+            duration: '0.5s',
-        duration: 0.5s;
+            transition: 'all 0.5s'
-        transition: all 0.5s;
+        },
-    `
+        onclick: async event => {
-    content.classList.add('dialog')
+            await event.target.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
-    content.style.cssText = `
+            await event.target.remove()
-        position: fixed;
+        },
-        top: 50%;
+        onkeydown: async event => {
-        left: 50%;
+            if (event.key !== 'Escape') return
-        transform: translate(-50%, -50%);
+            await event.target.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
-        background-color: #fff;
+            await event.target.remove()
-        border-radius: 150px;
+        },
-        box-shadow: 0 0 1em #ccc;
+        children: [
-        overflow: hidden;
+            createElement({
-        display: flex;
+                ...options,
-        justify-content: center;
+                style: {
-    `
+                    position: 'fixed',
-    element.appendChild(content)
+                    top: '50%',
-    // 点击空白处关闭
+                    left: '50%',
-    element.onclick = async event => {
+                    transform: 'translate(-50%, -50%)',
-        if (event.target === element) {
+                    backgroundColor: '#fff',
-            await element.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
+                    borderRadius: '150px',
-            element.remove()
+                    boxShadow: '0 0 1em #ccc',
-        }
+                    overflow: 'hidden',
-    }
+                    display: 'flex',
-    // 按下 ESC 关闭
+                    justifyContent: 'center',
-    element.onkeydown = async event => {
+                    ...options.style,
-        if (event.key === 'Escape') {
+                }
-            await element.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
+            })
-            element.remove()
+        ]
-        }
+    })
-    }
     // 显示时自动聚焦
-    const observer = new MutationObserver((mutationsList) => {
+    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
+                return observer.disconnect()
             }
         }
     })
-    // 监听 Dialog 元素的插入, 在 Dialog 被移除时停止监听
     observer.observe(document.body, { childList: true, subtree: true })
-    element.onremove = () => observer.disconnect()
     return element
 }