LaniakeaSupercluster/widgets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修正m

Browse Source
This commit is contained in:
satori 2024-09-05 21:59:31 +08:00
parent 8a87885921
commit 96e2f9b9f2
2 changed files with 68 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.js
View File

@ -24,8 +24,11 @@ document.body.appendChild(div.fixed.t_2.r_2.bg_red_500.childs([
// 4. 触发事件
// 5. 中途变化
console.log("h1.m('2rem'):", h1.p('2rem'))
// cursor-pointer overflow-clip hover:text-pink-500
document.body.appendChild(div.cursor_pointer.bg_red_500.overflow_clip.w_128.h_64.childs([
document.body.appendChild(div.cursor_pointer.bg_red_500.overflow_clip.w_1000.childs([
h1.m_2rem.pt_2rem.text('Widgets!'),
h1.m('2rem').p({ top: '2rem' }).text('Widgets!'),
p.m('2rem').p({ top: '2rem' }).text('是什么, 为什么, 怎么做?'),
ul.m('2rem').p({ top: '2rem' }).childs([

120
main.js
View File

@ -62,6 +62,7 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
if (styleMap.hasOwnProperty(key)) {
styleMap[key].forEach(style => {
console.log('styleMap:', style, value)
element.style[style] = isNaN(value) ? value : `${value}px`
})
return
@ -146,18 +147,18 @@ export class BaseElement {
constructor(options) {
return createElement(options, this.constructor.name)
}
static text(text, __name, names) {
return createElement({ textContent: text }, __name, names)
static text(text, tagName, names) {
return createElement({ textContent: text }, tagName, names)
}
static html(html) {
return createElement({ innerHTML: html }, this.name)
}
static childs(childs, __name, names) {
return createElement({ children: childs }, __name, names)
static childs(childs, tagName, names) {
return createElement({ children: childs }, tagName, names)
}
static w(width, __name, names) {
static w(width, tagName, names) {
if (typeof width === 'number') width = width + 'px'
return createElement({ style: { width } }, __name, names)
return createElement({ style: { width } }, tagName, names)
}
static h(height) {
if (typeof height === 'number') height = height + 'px'
@ -166,34 +167,34 @@ export class BaseElement {
static bg(color) {
return createElement({ style: { backgroundColor: color } }, this.name)
}
static p(...args) {
if (args.length === 1 && typeof args[0] === 'string') {
return createElement({ style: { padding: args[0] } }, this.name)
static p(args, tagName, names) {
if (typeof args === 'string') {
return createElement({ style: { padding: args } }, tagName, names)
}
if (args.length === 1 && typeof args[0] === 'object') {
const { left = 0, right = 0, top = 0, bottom = 0 } = args[0]
if (typeof args === 'object') {
const { left = 0, right = 0, top = 0, bottom = 0 } = args
const style = { paddingLeft: left, paddingRight: right, paddingTop: top, paddingBottom: bottom }
return createElement({ style }, this.name)
return createElement({ style }, tagName, names)
}
if (args.length === 4) {
if (Array.isArray(args)) {
const [top, right, bottom, left] = args
const style = { paddingTop: top, paddingRight: right, paddingBottom: bottom, paddingLeft: left }
return createElement({ style }, this.name)
return createElement({ style }, tagName, names)
}
}
static m(...args) {
if (args.length === 1 && typeof args[0] === 'string') {
return createElement({ style: { margin: args[0] } }, this.name)
static m(args, tagName, names) {
if (typeof args === 'string') {
return createElement({ style: { margin: args } }, tagName, names)
}
if (args.length === 1 && typeof args[0] === 'object') {
const { left = 0, right = 0, top = 0, bottom = 0 } = args[0]
if (typeof args === 'object') {
const { left = 0, right = 0, top = 0, bottom = 0 } = args
const style = { marginLeft: left, marginRight: right, marginTop: top, marginBottom: bottom }
return createElement({ style }, this.name)
return createElement({ style }, tagName, names)
}
if (args.length === 4) {
if (Array.isArray(args)) {
const [top, right, bottom, left] = args
const style = { marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left }
return createElement({ style }, this.name)
return createElement({ style }, tagName, names)
}
}
static mx(value) {
@ -340,41 +341,48 @@ export class footer extends BaseElement {
}
}
export class h1 extends BaseElement {
constructor(options) {
super(options)
}
}
export const h1 = createProxy('h1')
export const h2 = createProxy('h2')
export const h3 = createProxy('h3')
export const h4 = createProxy('h4')
export const h5 = createProxy('h5')
export const h6 = createProxy('h6')
export class h2 extends BaseElement {
constructor(options) {
super(options)
}
}
export class h3 extends BaseElement {
constructor(options) {
super(options)
}
}
export class h4 extends BaseElement {
constructor(options) {
super(options)
}
}
export class h5 extends BaseElement {
constructor(options) {
super(options)
}
}
export class h6 extends BaseElement {
constructor(options) {
super(options)
}
}
//export class h1 extends BaseElement {
// constructor(options) {
// super(options)
// }
//}
//
//export class h2 extends BaseElement {
// constructor(options) {
// super(options)
// }
//}
//
//export class h3 extends BaseElement {
// constructor(options) {
// super(options)
// }
//}
//
//export class h4 extends BaseElement {
// constructor(options) {
// super(options)
// }
//}
//
//export class h5 extends BaseElement {
// constructor(options) {
// super(options)
// }
//}
//
//export class h6 extends BaseElement {
// constructor(options) {
// super(options)
// }
//}
export class p extends BaseElement {
constructor(options) {