Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simon-he95/base-webcomponent
BaseWebComponent
https://github.com/simon-he95/base-webcomponent
webcomponent
Last synced: 22 days ago
JSON representation
BaseWebComponent
- Host: GitHub
- URL: https://github.com/simon-he95/base-webcomponent
- Owner: Simon-He95
- License: mit
- Created: 2023-03-18T14:14:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-09T05:39:39.000Z (6 months ago)
- Last Synced: 2024-05-09T06:37:09.877Z (6 months ago)
- Topics: webcomponent
- Language: Vue
- Homepage:
- Size: 111 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: license
Awesome Lists containing this project
README
## BaseWebComponent
提炼一个BaseWebComponent的class，提供了一些常用的方法基于class快速的生成新的webcomponent组件
## 安装
npm install @simon_he/base-webcomponent
## 使用
- 通过html返回原生的dom节点渲染
``` ts
export class UserCard extends BaseWebComponent {
css() {
return `:host {
display: flex;
align-items: center;
}
`
}
html(): string {
const image = document.createElement('img')
image.src = 'https://semantic-ui.com/images/avatar2/large/kristy.png'
return image
}
}
// 注册
export function registerComponent(name: string) {
window.customElements.define(name, UserCard)
}
```
- 通过template返回原生html的字符串渲染
``` ts
export class UserCard extends BaseWebComponent {
css() {
return `:host {
display: flex;
align-items: center;
}
`
}
template(): string {
return `
`
}
}
// 注册
export function registerComponent(name: string) {
window.customElements.define(name, UserCard)
}
```
## Todo
- [x] 支持slot
- [x] 支持props
## License
[MIT](./LICENSE) License © 2022 [Simon He](https://github.com/Simon-He95)
