Keepeact Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
  <div id="wrapper">
    <div id="demo"></div>
  </div>
</body>
<script type="module">
  import { WelCome } from '/js/keepeact.js';
  WelCome.create(document.querySelector('#demo'), {
    valueChange(e) {
      console.log('coutn:', e);
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// Button
import { ValueComponent, Component, Watch, Prop, Ref } from 'keepeact';

@Component()
export default class Button extends ValueComponent {
  count = 0;
  showStop = true;
  @Prop() defaultCount: number;
  @Prop() max: number = 3;
  @Ref('button') buttonEl: HTMLElement;
  @Watch('count', {
    immediate: true,
  })
  countChange(a, b) {
    console.log('监测 count:', `oldValue: ${a}`, `newValue: ${b}`);
    this.showStop = this.count > this.max;
  }

  get countValue() {
    return this.showStop ? 'stop' : this.count;
  }

  button() {
    this.$nextTick(() => {
      console.log(this.buttonEl.innerText);
    });
    return (
      <button
        onClick={() => {
          if (this.showStop) return;
          this.count++;
          this.onChange(this.count);
        }}
      >
        click+1
      </button>
    );
  }
  render() {
    return (
      <div id="wuxunyu" ref="button">
        {this.countValue} {this.button()}
      </div>
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// WelCome
import { Component, ValueComponent } from 'keepeact';
import Button from './button/button.component';

@Component()
export default class WelCome extends ValueComponent {
  max = 6;
  buttonDemo() {
    return (
      <Button
        valueChange={(e) => {
          this.onChange(e);
        }}
        max={this.max}
      ></KButton>
    );
  }
  render() {
    const welcomeWrapper = (
      <div>
        <p>WelCome to Keepeact, I wish you like it.</p>
          <p>demo:  well stop, if count {'>'} {this.max}</p>
        <ul>
          <li>{this.buttonDemo()}</li>
        </ul>
      </div>
    );
    return welcomeWrapper;
  }
}

Keepeact Demo

https://wxyhahaha.github.io/keepeact/demo/

作者

wuxunyu

发布于

2022-07-04

更新于

2022-07-07

许可协议

关注我

标签

个人项目2
工程化2
架构6
知识点15
笔记2
面试2

归档

链接

最新文章

分类

×