修正tagName
This commit is contained in:
parent
cc6099fb7a
commit
c204f8a3d6
58
main.js
58
main.js
@ -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)
|
||||
|
Loading…
Reference in New Issue
Block a user