91 lines
2.4 KiB
Markdown
91 lines
2.4 KiB
Markdown
## Wkit
|
|
> 一个简单易用、功能完善的用于开发`web components`的轻量级开发库。模板解析基于`lit-html`二次开发
|
|
|
|
|
|
|
|
|
|
### 开发文档
|
|
[开发文档](https://git.wkit.fun/bytedo/wkit/wiki)
|
|
|
|
|
|
### 我们的特色
|
|
|
|
- `@xxx=yyy` 事件绑定, 可以任意节点上直接使用类似`vue事件绑定`的这种写法, 就可实现事件绑定。组件被移出文档时, 事件会**自动销毁**, 无须手动销毁。
|
|
- `@click.stop=xxx` 事件绑定支持修饰符
|
|
- `:xxx=yyy`, 属性绑定, 类似`vue`,在属性前加上`:`, 该属性不再使用`setAttribute()`, 而是直接赋值, 可满足你需要传递复杂数据结构的需求。
|
|
- `#animation={type}`, 开箱即用的动画配置, 内置6种动画`fade(默认), scale, bounce, micro-bounce, rotate, slide`
|
|
- `ref=xxx`, 类似`vue`的节点标识, 可方便的在`mounted()`之后通过 `this.$refs.xxx` 来访问该节点
|
|
- 内置特色的双向绑定方法`live()`
|
|
- 用内置的`bind()`方法来给当前组件绑定事件时, 组件移除时事件也会自动销毁,无需手动销毁。
|
|
- 灵活的`props`定义
|
|
|
|
|
|
### 示例
|
|
|
|
```js
|
|
// alias wkit='//jscdn.ink/wkit/latest/index.js'
|
|
import { css, html, Component } from 'wkit'
|
|
|
|
class Hello extends Component {
|
|
|
|
static props = {
|
|
count: {
|
|
type: Number,
|
|
default: 0,
|
|
attribute: true // 是否显式表现为html属性
|
|
},
|
|
foo: 0, // 简写
|
|
bar: String // 简写
|
|
}
|
|
|
|
// 若需要支持 scss语法, 则需要使用构建工具编译。
|
|
// 可支持数组
|
|
static styles = css`
|
|
button { color: #09f; }
|
|
span { color: #f30; }
|
|
`
|
|
|
|
// 支持多个
|
|
static styles = [
|
|
css`...`,
|
|
css`...`
|
|
]
|
|
|
|
render(){
|
|
return html`
|
|
<div>
|
|
<button @click="${this.increase}">点击我</button>
|
|
</div>
|
|
<div>所有点击数为: <span>${this.count}</span></div>
|
|
`
|
|
}
|
|
|
|
increase(){
|
|
this.count++
|
|
}
|
|
|
|
}
|
|
|
|
if (!customElements.get('wc-hello')) {
|
|
customElements.define('wc-hello', Hello)
|
|
}
|
|
// 和上面的写法等价
|
|
// 如果不希望修改前缀`wc-`的话, 可以直接调用内置的reg方法注册组件即可。
|
|
Hello.reg('hello')
|
|
|
|
|
|
/*
|
|
|
|
<!-- 在html中,便可以直接使用 -->
|
|
<wc-hello></wc-hello>
|
|
|
|
*/
|
|
|
|
```
|
|
|
|
|
|
|
|
### 开源协议
|
|
|
|
- BSD 3-Clause License (Lit框架的html模板解析的源码)
|
|
- MIT (除Lit代码之外的所有代码) |
JavaScript
97%
HTML
3%