wkit/Readme.md

70 lines
1.2 KiB
Markdown
Raw Permalink Normal View History

2023-03-27 19:03:19 +08:00
## 百搭UI组件库的核心
2023-03-06 12:25:54 +08:00
2023-03-07 20:41:55 +08:00
### 开发文档
2023-03-14 15:51:21 +08:00
[开发文档](https://github.com/bd-js/core/wiki)
2023-03-07 20:41:55 +08:00
### 示例
2023-03-06 12:25:54 +08:00
```js
2023-03-14 15:51:21 +08:00
import { css, html, Component } from '//jscdn.ink/@bd/core/latest/index.js'
2023-03-06 12:25:54 +08:00
class Hello extends Component {
static props = {
count: {
type: Number,
2023-03-14 15:51:21 +08:00
default: 0,
attribute: true // 是否显式表现为html属性
},
foo: 0, // 简写
bar: String // 简写
2023-03-06 12:25:54 +08:00
}
2023-03-14 15:51:21 +08:00
// 若需要支持 scss, 则需要使用 @bd/wcui-cli,预处理。
// 可支持数组
2023-03-06 12:25:54 +08:00
static styles = css`
button { color: #09f; }
span { color: #f30; }
`
2023-03-14 15:51:21 +08:00
// 支持多个
static styles = [
css`...`,
css`...`
]
2023-03-06 12:25:54 +08:00
render(){
return html`
<div>
2023-03-07 20:41:55 +08:00
<button @click="${this.increase}">点击我</button>
2023-03-06 12:25:54 +08:00
</div>
<div>所有点击数为: <span>${this.count}</span></div>
`
}
increase(){
this.count++
}
}
2023-03-27 19:03:19 +08:00
if (!customElements.get('wc-hello')) {
customElements.define('wc-hello', Hello)
}
// 和上面的写法等价
// 如果不希望修改前缀`wc-`的话, 可以直接调用内置的reg方法注册组件即可。
Hello.reg('hello')
2023-03-06 12:25:54 +08:00
/*
<!-- 在html中,便可以直接使用 -->
<wc-hello></wc-hello>
*/
```