修正一位class

index.js

@@ -1,20 +1,8 @@
 import { div, span, pre, h1, p, ul, li, button, createElement } from './main.js'
 import { Dialog } from './widgets/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')
+document.body.appendChild(div.absolute.t_2.r_2.bg_red_500.childs([
+    div.text('会话/账户')
 ]))
 
 // cursor-pointer overflow-clip hover:text-pink-500
@@ -27,7 +15,6 @@ document.body.appendChild(div.cursor_pointer.bg_red_500.overflow_clip.w_1000.chi
         li.text('汲取了 pug 和 winicss 的灵感, 以及 flutter 的嵌套布局方式, pug 减少 html 冗余, winicss 减少 css 冗余'),
         li.text('这个库的唯一作用就是给dom对象添加了额外的操作方法, 且每个方法的返回值都是dom自身, 从而实现对dom对象的链式操作')
     ]),
-
     new button({
         textContent: '模态窗口 dialog',
         onclick: event => {
@@ -39,8 +26,6 @@ document.body.appendChild(div.cursor_pointer.bg_red_500.overflow_clip.w_1000.chi
             }))
         }
     }),
-
-    //span.css('bg-red').m('2rem').p({ top: '2rem' }).text('Hello world!'),
     new span({ textContent: 'Hello world!' }),
 
     // 三类参数
@@ -59,5 +44,5 @@ document.body.appendChild(div.cursor_pointer.color_ppp.w(128).h(64).childs([
 
 fetch('/index.js').then(res => res.text()).then(text => {
     text = text.replace(/from "\/main.js"/g, "from '@laniakeasupercluster/widgets'")
-    document.body.appendChild(pre.p('2rem').bg('#ececec').text(text.substring(0, text.indexOf('fetch'))))
+    document.body.appendChild(pre.overflow_auto.p('2rem').bg('#ececec').text(text.substring(0, text.indexOf('fetch'))))
 })

main.js

@@ -13,11 +13,25 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
     if (readOnly) element.readOnly = readOnly
     if (children) children.forEach(child => element.appendChild(child))
 
-    // 生成样式
-    //if (names.length) console.log(names)
-
-    // 分解类名, 生成样式, 直接将样式赋予元素
+    // 分解类名生成样式, 直接将样式赋予元素
     names.map(name => name.split('_')).forEach(item => {
+
+        if (item.length === 1) {
+            const key = item[0]
+
+            // 支持快捷定位 position
+            if (['static', 'fixed', 'absolute', 'relative', 'sticky'].includes(key)) {
+                element.style.position = key
+                return
+            }
+
+            // 支持快捷布局 display
+            if (['block', 'inline-block', 'flex', 'grid'].includes(key)) {
+                element.style.display = key
+                return
+            }
+        }
+
         // 两个参数的情况下, 第一个参数是样式名, 第二个参数是样式值
         if (item.length === 2) {
             const [key, value] = item
@@ -67,16 +81,6 @@ 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
@@ -104,7 +108,7 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
         }
     })
 
-    // 为元素添加链式操作方法
+    // 元素 增加链式操作方法
     element.w = (width) => { element.style.width = width; return element }
     element.h = (height) => { element.style.height = height; return element }
     element.x = (left) => { element.style.left = left; return element } // 以居中线对齐(flex)