This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

增加折叠组件

old
yutent 2022-01-24 19:02:23 +08:00
parent e48a920a17
commit 86c8bd3a87
5 changed files with 200 additions and 12 deletions

View File

@ -12,16 +12,6 @@
border-radius: 3px;
}
.header {
display: none;
padding: 8px 16px;
border-bottom: 1px solid var(--color-plain-2);
font-size: 16px;
&.show {
display: block;
}
}
.card {
display: flex;
flex-direction: column;
@ -34,6 +24,17 @@
transition: box-shadow 0.3s ease-in-out;
}
.header {
display: none;
padding: 8px 16px;
border-bottom: 1px solid var(--color-plain-2);
font-size: 16px;
&.show {
display: block;
}
}
:host([shadow='hover']) {
.card {
box-shadow: none;

127
src/base/collapse-item.wc Normal file
View File

@ -0,0 +1,127 @@
<template>
<div class="collapse">
<header class="header">
<span class="title"><slot name="title"/></span>
<wc-icon is="right"></wc-icon>
</header>
<main class="wrapper">
<div class="content"><slot /></div>
</main>
</div>
</template>
<style lang="scss">
:host {
overflow: hidden;
display: flex;
width: 100%;
border-bottom: 1px solid var(--color-plain-2);
}
.collapse {
display: flex;
flex-direction: column;
width: 100%;
font-size: 14px;
background: #fff;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
color: var(--color-dark-2);
cursor: pointer;
wc-icon {
--size: 12px;
margin-right: 8px;
color: var(--color-grey-3);
transition: transform 0.3s;
}
&.expanded {
wc-icon {
transform: rotate(90deg);
}
}
}
.wrapper {
overflow: hidden;
height: 0px;
will-change: height;
transition: height 0.3s ease-in-out;
}
</style>
<script>
import $ from '../utils'
import '../icon/index'
export default class Collapse {
props = {
title: ''
}
state = {
expanded: false
}
__init__() {
/* render */
var elem = this.root.children[1]
this.__HEADER__ = elem.children[0]
this.__WRAPPER__ = elem.children[1]
this.__CONTENT__ = this.__WRAPPER__.firstElementChild
this.__TITLE__ = this.__HEADER__.firstElementChild
}
_toggle() {
this.state.expanded = !this.state.expanded
this._updateStyle()
if (this._isInGroup) {
this.parentNode.dispatchEvent(
new CustomEvent('child-expanded', {
detail: { expanded: this.state.expanded, item: this }
})
)
}
}
_updateStyle() {
var { expanded } = this.state
this.__HEADER__.classList.toggle('expanded', expanded)
this.__WRAPPER__.style.cssText = `height:${expanded ? this.__CONTENT__.clientHeight : 0}px;`
}
get expanded() {
return this.state.expanded
}
set expanded(val) {
this.state.expanded = !!val
this._updateStyle()
}
mounted() {
this._isInGroup = this.parentNode.tagName === 'WC-COLLAPSE-GROUP'
this._handlClick = $.bind(this.__HEADER__, 'click', ev => {
ev.stopPropagation()
this._toggle()
})
}
watch() {
switch (name) {
case 'title':
this.__TITLE__.textContent = val
break
}
}
}
</script>

58
src/base/collapse.wc Normal file
View File

@ -0,0 +1,58 @@
<template>
<slot />
</template>
<style lang="scss">
:host {
display: flex;
flex-direction: column;
width: 100%;
border-top: 1px solid var(--color-plain-2);
border-bottom: 1px solid var(--color-plain-2);
}
::slotted(wc-collapse:last-child) {
border-bottom: 0;
}
</style>
<script>
import $ from '../utils'
import './collapse-item'
export default class CollapseGroup {
props = {
multi: false
}
__init__() {
/* render */
}
get multi() {
return this.props.multi
}
set multi(val) {
this.props.multi = !!val
}
mounted() {
this._pickedFn = $.bind(this, 'child-expanded', ev => {
if (this.multi === false && ev.detail.expanded) {
Array.from(this.children).forEach(it => {
it.expanded = it === ev.detail.item ? true : false
})
}
})
}
watch() {
switch (name) {
case 'multi':
this.multi = true
break
}
}
}
</script>

3
src/base/index.js Normal file
View File

@ -0,0 +1,3 @@
import './row'
import './card'
import './collapse'

View File

@ -1,7 +1,6 @@
import './avatar/index'
import './badge/index'
import './base/row'
import './base/card'
import './base/index'
import './code/index'
import './color/index'
import './drag/index'