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

修正tagName

Browse Source
This commit is contained in:
satori 2024-09-05 12:33:32 +08:00
parent cc6099fb7a
commit c204f8a3d6
1 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
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) const element = document.createElement(tagName)
for (const key in attributes) { for (const key in attributes) {
if (key.startsWith('on')) element[key] = attributes[key] // 如果是事件则直接赋值 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 (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) { if (item.length === 2) {
const [key, value] = item const [key, value] = item
@ -146,18 +146,19 @@ export class BaseElement {
constructor(options) { constructor(options) {
return createElement(options, this.constructor.name) return createElement(options, this.constructor.name)
} }
static text(text) { static text(text, __name, names) {
return createElement({ textContent: text }, this.name) return createElement({ textContent: text }, __name, names)
} }
static html(html) { static html(html) {
return createElement({ innerHTML: html }, this.name) return createElement({ innerHTML: html }, this.name)
} }
static childs(childs) { static childs(childs, __name, names) {
return createElement({ children: childs }, this.name) 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' if (typeof width === 'number') width = width + 'px'
return createElement({ style: { width } }, this.name, __name) return createElement({ style: { width } }, __name, names)
} }
static h(height) { static h(height) {
if (typeof height === 'number') height = height + 'px' if (typeof height === 'number') height = height + 'px'
@ -226,31 +227,30 @@ export class BaseElement {
} }
} }
export const proxy = new Proxy(BaseElement, { function createProxy(tagName) {
return new Proxy(BaseElement, {
get(target, property) { get(target, property) {
if (property in target) { if (property in target) {
const __name = this.__name || '' const __name = this.__name ?? tagName
console.log('name:', __name)
if (typeof target[property] === 'function') { if (typeof target[property] === 'function') {
console.log('function:', property)
return function (...args) { return function (...args) {
return target[property](...args, __name) const [tagname, ...names] = __name.split('.')
return target[property](...args, tagName, names)
} }
} }
return target[property] return target[property]
} else { } else {
if (!this.__name) this.__name = tagName
const __name = this.__name ? this.__name + '.' + property : property const __name = this.__name ? this.__name + '.' + property : property
return new Proxy(target, { __name, get: this.get }) 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 { export class span extends BaseElement {
constructor(options) { constructor(options) {
super(options) super(options)