1.9.5 • Published 1 year ago
@bd/core v1.9.5
百搭UI组件库的核心
开发文档
我们的特色
@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
来访问该节点- 用内置的
bind()
方法来给当前组件绑定事件时, 组件移除时事件也会自动销毁,无需手动销毁。 - 灵活的
props
定义
示例
import { css, html, Component } from '//jscdn.ink/@bd/core/latest/index.js'
class Hello extends Component {
static props = {
count: {
type: Number,
default: 0,
attribute: true // 是否显式表现为html属性
},
foo: 0, // 简写
bar: String // 简写
}
// 若需要支持 scss, 则需要使用 @bd/wcui-cli,预处理。
// 可支持数组
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>
*/
1.9.5
1 year ago
1.9.4
1 year ago
1.9.3
1 year ago
1.9.1
1 year ago
1.9.0
1 year ago
1.8.8
2 years ago
1.9.2
1 year ago
1.8.7
2 years ago
1.8.6
2 years ago
1.8.5
2 years ago
1.8.4
2 years ago
1.8.3
2 years ago
1.8.2
2 years ago
1.8.1
2 years ago
1.8.0
2 years ago
1.7.1
2 years ago
1.7.0
2 years ago
1.6.0
2 years ago
1.5.14
2 years ago
1.5.13
2 years ago
1.5.12
2 years ago
1.5.11
2 years ago
1.5.10
2 years ago
1.5.9
2 years ago
1.5.8
2 years ago
1.5.7
2 years ago
1.5.6
2 years ago
1.5.5
2 years ago
1.5.4
2 years ago
1.5.3
2 years ago
1.5.2
2 years ago
1.5.1
2 years ago
1.5.0
2 years ago
1.4.1
2 years ago
1.4.0
2 years ago
1.3.0
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.2.0
2 years ago
1.1.0
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
0.2.0
2 years ago