快捷定位

index.js

@@ -1,6 +1,22 @@
-import { div, span, pre, h1, p, ul, li, button } from './main.js'
+import { div, span, pre, h1, p, ul, li, button, createElement } from './main.js'
 import { Dialog } from './wigets/dialog.js'
 
+// 会话/账户
+document.body.appendChild(createElement({
+    style: {
+        position: 'fixed',
+        top: 0,
+        right: 0,
+    },
+    children: [
+        div.text('session')
+    ]
+}))
+
+document.body.appendChild(div.fixed.t_2.r_2.bg_red_500.childs([
+    div.text('session-x')
+]))
+
 // 动画三阶段
 // 1. 初始状态
 // 2. 变化过程

main.js

@@ -51,7 +51,13 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
                 'px': ['paddingLeft', 'paddingRight'],
                 'py': ['paddingTop', 'paddingBottom'],
                 'mx': ['marginLeft', 'marginRight'],
-                'my': ['marginTop', 'marginBottom']
+                'my': ['marginTop', 'marginBottom'],
+                't': ['top'],
+                'b': ['bottom'],
+                'l': ['left'],
+                'r': ['right'],
+                'x': ['left', 'right'],
+                'y': ['top', 'bottom']
             }
 
             if (styleMap.hasOwnProperty(key)) {
@@ -61,6 +67,16 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
                 return
             }
 
+            // 支持快捷定位 position
+            if (['static', 'fixed', 'absolute', 'relative', 'sticky'].includes(key)) {
+                element.style.position = key
+            }
+
+            // 支持快捷布局 display
+            if (['block', 'inline-block', 'flex', 'grid'].includes(key)) {
+                element.style.display = key
+            }
+
             // TODO 支持颜色输入
             if (key === 'color') {
                 element.style.color = value