diff --git a/index.js b/index.js index 3274f40..46f81cb 100644 --- a/index.js +++ b/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')))) }) diff --git a/main.js b/main.js index 45ca24d..e0ae34d 100644 --- a/main.js +++ b/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)