Merge branch 'master' of ssh://github.com/bd-js/wcui
commit
ee0e7e0fa6
|
@ -1,6 +1,6 @@
|
|||
# @bd/wcui
|
||||
# @bd/ui
|
||||
|
||||
百搭 WCUI 组件库, 基于 web components 开发。面向下一代的 UI 组件库
|
||||
百搭 UI 组件库, 基于 web components 开发。面向下一代的 UI 组件库
|
||||
|
||||
### 开发环境
|
||||
|
||||
|
@ -20,7 +20,7 @@
|
|||
- [ ] `wc-avatar`头像组件
|
||||
- [x] `wc-badge`徽标组件
|
||||
- [x] `wc-drawer`抽屉组件
|
||||
- [ ] `wc-collapse`折叠组件
|
||||
- [x] `wc-collapse`折叠组件
|
||||
- [ ] `wc-counter`倒计时组件
|
||||
- [ ] `wc-drag`拖拽组件
|
||||
- [x] `wc-image`图片组件
|
||||
|
@ -54,7 +54,8 @@
|
|||
- [ ] `wc-progress`进度条组件
|
||||
- [ ] `wc-tree`树形菜单组件
|
||||
- [ ] `wc-uploader`上传组件
|
||||
- [ ] `wc-notify`通知组件
|
||||
- [x] `wc-notify`通知组件
|
||||
- [ ] `wc-tabs`选项卡组件
|
||||
|
||||
### 测试预览
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@bd/ui",
|
||||
"version": "1.0.0",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"files": [
|
||||
"dist/*"
|
||||
|
|
|
@ -0,0 +1,44 @@
|
|||
/**
|
||||
* {选项卡组件}
|
||||
* @author yutent<yutent.io@gmail.com>
|
||||
* @date 2023/03/06 15:17:25
|
||||
*/
|
||||
|
||||
import { css, html, bind, Component } from '@bd/core'
|
||||
|
||||
class Tabs extends Component {
|
||||
render() {
|
||||
return html`
|
||||
<h1>
|
||||
父组件内容
|
||||
<slot ref="label" name="label">dsds</slot>
|
||||
</h1>
|
||||
<slot></slot>
|
||||
`
|
||||
}
|
||||
|
||||
created() {
|
||||
console.log(this.root)
|
||||
bind(this.root, 'slotchange', ev => {
|
||||
let children = ev.target.assignedNodes()
|
||||
|
||||
children.forEach(it => {
|
||||
let slot = it.querySelector('[slot=label]')
|
||||
this.$refs.label.append(
|
||||
slot.cloneNode(true),
|
||||
this.$refs.label.firstChild
|
||||
)
|
||||
slot.remove()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
class Tab extends Component {
|
||||
render() {
|
||||
return html`<div class="tab">这是卡片内部</div> `
|
||||
}
|
||||
}
|
||||
|
||||
Tabs.reg('tabs')
|
||||
Tab.reg('tab')
|
Loading…
Reference in New Issue