0.0.27 • Published 2 years ago
@canyuegongzi/web-ui-plus v0.0.27
自定义 WebComponent 核心包
该工具包是 @canyuegongzi/web-core 包的升级,可以通过装饰器的方式定义组件。
示例如下:
import { h, Component, Emit, Prop, Watch } from "@canyuegongzi/web-core-plus";
import css from './index.css';
import {OnBeforeRender, OnBeforeUpdate, OnConnected, OnDisConnected, OnRendered, OnUpdated} from "@canyuegongzi/web-core-plus/declarations";
type WuButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
@Component({
name: 'wu-button',
css: css
})
export class WuButton extends WuComponent implements OnConnected, OnDisConnected, OnBeforeRender, OnRendered, OnBeforeUpdate, OnUpdated {
constructor() {
super();
}
public updated() {
console.log('updated')
}
public beforeUpdate() {
console.log('beforeUpdate')
}
public rendered() {
console.log('rendered')
}
public beforeRender() {
console.log('beforeRender')
}
public connected(shadowRoot: ShadowRoot) {
console.log('connected', shadowRoot)
}
public disConnected() {
console.log('disConnected');
}
@Prop({ default: 'primary'})
public type: WuButtonType;
public testValue = 1;
@Emit('valueChange')
public testTap() {
this.testValue = 2;
return {
type: this.type
}
}
@Watch('type')
public typeChange(newValue: string, oldValue: string) {
console.log('类型修改回调函数', this.type);
console.log(newValue);
console.log(oldValue);
}
@Watch('testValue')
public testValueChange(newValue: string, oldValue: string) {
console.log('testValue', newValue, oldValue);
}
public render(_renderProps= {}, _store = {}) {
return(
<div class={`_wu-button _wu-button__${this.type}`} onclick={this.testTap.bind(this)} >
<slot />
</div>
);
}
}
0.0.20
2 years ago
0.0.21
2 years ago
0.0.22
2 years ago
0.0.23
2 years ago
0.0.24
2 years ago
0.0.25
2 years ago
0.0.15
2 years ago
0.0.16
2 years ago
0.0.17
2 years ago
0.0.19
2 years ago
0.0.13
2 years ago
0.0.14
2 years ago
0.0.26
2 years ago
0.0.27
2 years ago
0.0.10
2 years ago
0.0.11
2 years ago
0.0.12
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.5
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago