修正tagName

This commit is contained in:
satori 2024-09-05 12:33:32 +08:00
parent cc6099fb7a
commit c204f8a3d6

58
main.js
View File

@ -1,4 +1,4 @@
export function createElement({ innerText, innerHTML, textContent, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div', __name = '') {
export function createElement({ innerText, innerHTML, textContent, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div', names = []) {
const element = document.createElement(tagName)
for (const key in attributes) {
if (key.startsWith('on')) element[key] = attributes[key] // 如果是事件则直接赋值
@ -14,10 +14,10 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
if (children) children.forEach(child => element.appendChild(child))
// 生成样式
if (__name) console.log('name:', __name)
if (names.length) console.log('names:', names)
// 分解类名, 生成样式, 直接将样式赋予元素
__name.split('.').map(name => name.split('_')).forEach(item => {
names.map(name => name.split('_')).forEach(item => {
// 两个参数的情况下, 第一个参数是样式名, 第二个参数是样式值
if (item.length === 2) {
const [key, value] = item
@ -146,18 +146,19 @@ export class BaseElement {
constructor(options) {
return createElement(options, this.constructor.name)
}
static text(text) {
return createElement({ textContent: text }, this.name)
static text(text, __name, names) {
return createElement({ textContent: text }, __name, names)
}
static html(html) {
return createElement({ innerHTML: html }, this.name)
}
static childs(childs) {
return createElement({ children: childs }, this.name)
static childs(childs, __name, names) {
console.log('childs:', __name, names)
return createElement({ children: childs }, __name, names)
}
static w(width, __name) {
static w(width, __name, names) {
if (typeof width === 'number') width = width + 'px'
return createElement({ style: { width } }, this.name, __name)
return createElement({ style: { width } }, __name, names)
}
static h(height) {
if (typeof height === 'number') height = height + 'px'
@ -226,31 +227,30 @@ export class BaseElement {
}
}
export const proxy = new Proxy(BaseElement, {
get(target, property) {
if (property in target) {
const __name = this.__name || ''
console.log('name:', __name)
if (typeof target[property] === 'function') {
console.log('function:', property)
return function (...args) {
return target[property](...args, __name)
function createProxy(tagName) {
return new Proxy(BaseElement, {
get(target, property) {
if (property in target) {
const __name = this.__name ?? tagName
if (typeof target[property] === 'function') {
return function (...args) {
const [tagname, ...names] = __name.split('.')
return target[property](...args, tagName, names)
}
}
return target[property]
} else {
if (!this.__name) this.__name = tagName
const __name = this.__name ? this.__name + '.' + property : property
return new Proxy(target, { __name, get: this.get })
}
return target[property]
} else {
const __name = this.__name ? this.__name + '.' + property : property
return new Proxy(target, { __name, get: this.get })
}
}
})
export class div extends proxy {
constructor(options) {
super(options)
}
})
}
export const div = createProxy('div')
export class span extends BaseElement {
constructor(options) {
super(options)