It's a base component template for creating a web component written with ES6. Be sure you can babel it in your dev env before use it. You can easily to add a event and trigger a event, add a class and remove a class, even to add a child component which is extends this component. Contact me without hastation if there is any problem when you using it. Best Wishes.
import Component from 'ben-component';
class Button extends Component {
constructor(parent, options) {
super(parent, options);
}
createEl() {
return super.createEl('button', {
className: 'buttom'
}, {
innerHTML: 'click me'
});
}
}
const button = new Button;
button.on('click', () => {
console.log(123);
});
button.trigger('click'); // 123;
import Component from 'ben-component';
const parent = new Component;
const son = new Component;
parent.addChild(son);
parent.on('a', () => {
console.log('Parent envent: a');
})
son.on('a', () => {
console.log('Son envent: a');
parent.trigger('a');
});
son.trigger('a');
// --------
Son envent: a
Parent envent: a
- [feature] Finished the README.md and add some examples.
- [feature] Set the parent component as the first argv of constructor.
- [feature] Add component register and get function.
- [feature] Finished the base component create, event functions.
Author: Ben Chen
E-mail: chenhaijiao@howzhi.com