2023-03-06 12:25:54 +08:00
|
|
|
## 9号UI组件库的核心
|
|
|
|
|
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++
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
customElements.define('wc-hello', Hello)
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
<!-- 在html中,便可以直接使用 -->
|
|
|
|
<wc-hello></wc-hello>
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|