LaniakeaSupercluster/chain-depict
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

基础理论实现

Browse Source
This commit is contained in:
觉 2024-01-12 04:17:51 +08:00
parent 593fb2d9ad
commit 00731270ae
3 changed files with 65 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@ -1,17 +1,4 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <meta charset="UTF-8">
<title>DEMO</title>
<head> <script defer type="module" src="./index.js"></script>
<meta charset="UTF-8">
<title>DEMO</title>
</head>
<body>
<script type="module">
import { div } from './main.js'
div.w(12).h(14).onclick.stop('click').onkeydown.esc().keydown().classList(['mdui-btn', 'mdui-btn-icon'])
div.w('auto').h(32).classList('mdui-btn mdui-btn-icon')
</script>
</body>
</html>

12
index.js Normal file
View File

@ -0,0 +1,12 @@
import { div, pre } from './main.js'
const demo = div.w(128).h(64) //.onclick.stop('click')
demo.textContent = 'Hello world'
console.log('demo', demo)
document.body.appendChild(demo)
document.body.appendChild(div.w(128).h(64).text('Hello world'))
fetch('./index.js').then(res => res.text()).then(text => {
document.body.appendChild(pre.text(text))
})

59
main.js
View File

@ -1,11 +1,46 @@
export class div { export class pre extends HTMLPreElement {
static w(width) { constructor() {
console.log(`Width: ${width}`) super()
}
static text(text) {
const pre = new this()
pre.textContent = text
return pre
}
w(width) {
this.style.width = `${width}px`
return this return this
} }
h(height) {
this.style.height = `${height}px`
return this
}
}
export class div extends HTMLDivElement {
constructor({ width = 0, height = 0 }) {
super()
this.style.width = `${width}px`
this.style.height = `${height}px`
}
static w(width) {
return new this({ width })
}
static h(height) { static h(height) {
console.log(`Height: ${height}`) return new this({ height })
}
w(width) {
this.style.width = `${width}px`
return this
}
h(height) {
this.style.height = `${height}px`
return this
}
text(text) {
this.textContent = text
return this return this
} }
@ -40,10 +75,16 @@ export class div {
} }
} }
export class button extends div { } customElements.define('my-div', div, { extends: 'div' })
export class span extends div { } customElements.define('my-pre', pre, { extends: 'pre' })
export class header extends div { } //
export class footer extends div { } //export class button extends div { }
export class main extends div { } //export class span extends div { }
//
//export class header extends div { }
//export class footer extends div { }
//export class main extends div { }
//
export default { div, pre }