优化collapse组件

master
chenjiajian 2023-04-28 18:33:40 +08:00
parent 25fc16c1cc
commit 3eab56a049
2 changed files with 104 additions and 17 deletions

View File

@ -4,7 +4,7 @@
* @date 2023/03/26 16:14:10 * @date 2023/03/26 16:14:10
*/ */
import { css, html, Component } from '@bd/core' import { css, html, Component, styleMap, nextTick } from '@bd/core'
import '../icon/index.js' import '../icon/index.js'
class Collapse extends Component { class Collapse extends Component {
@ -60,6 +60,7 @@ class Collapse extends Component {
mounted() { mounted() {
this.$children = Array.from(this.children) this.$children = Array.from(this.children)
this.updateView() this.updateView()
this.$on('updateValue', e => this.updateValue(e.name))
} }
} }
class CollapseItem extends Component { class CollapseItem extends Component {
@ -69,6 +70,7 @@ class CollapseItem extends Component {
disabled: false disabled: false
} }
_show = false _show = false
contentHeight = 0
static styles = [ static styles = [
css` css`
:host { :host {
@ -117,37 +119,40 @@ class CollapseItem extends Component {
if (this.disabled) { if (this.disabled) {
return return
} }
this.parentNode.updateValue(this.name) this.$emit('updateValue', { name: this.name })
} }
get show() { get show() {
return this._show return this._show
} }
set show(val) { set show(val) {
const { content, wrapper, icon } = this.$refs
if (!wrapper) {
this.onMounted = () => (this.show = val)
return
}
if (val) {
wrapper.style.height = content.offsetHeight + 'px'
icon.style.transform = 'rotate(90deg)'
} else {
wrapper.style.height = 0
icon.style.transform = 'rotate(0deg)'
}
this._show = val this._show = val
this.contentHeight = this.$refs.content?.offsetHeight || 0
this.$requestUpdate()
} }
mounted() { mounted() {
this.onMounted && this.onMounted() nextTick(() => {
this.contentHeight = this.$refs.content.offsetHeight
this.$requestUpdate()
})
} }
render() { render() {
return html` return html`
<div class=${this.disabled ? 'disabled' : ''}> <div class=${this.disabled ? 'disabled' : ''}>
<div class="title" @click=${this.onClick}> <div class="title" @click=${this.onClick}>
${this.title ? this.title : html`<slot name="title"></slot>`} ${this.title ? this.title : html`<slot name="title"></slot>`}
<wc-icon name="right" ref="icon"></wc-icon> <wc-icon
name="right"
style=${styleMap({
transform: `rotate(${this.show ? 90 : 0}deg)`
})}
></wc-icon>
</div> </div>
<div class="wrapper" ref="wrapper"> <div
class="wrapper"
style=${styleMap({
height: this.show ? `${this.contentHeight}px` : 0
})}
>
<div class="content" ref="content"> <div class="content" ref="content">
<slot></slot> <slot></slot>
</div> </div>

82
src/popconfirm/index.js Normal file
View File

@ -0,0 +1,82 @@
/**
* {气泡确认框}
* @author chensbox<chensbox@foxmail.com>
* @date 2023/04/28 16:14:10
*/
import { css, html, Component } from '@bd/core'
class Popconfirm extends Component {
static props = {
title: {
type: String,
default: '',
attribute: false
},
'confirm-button-text': {
type: String,
default: '',
attribute: false
},
'cancel-button-text': {
type: String,
default: '',
attribute: false
},
'confirm-button-type': {
type: String,
default: '',
attribute: false
},
'cancel-button-type': {
type: String,
default: '',
attribute: false
},
icon: {
type: String,
default: null,
attribute: false
},
'icon-color': {
type: Number,
default: null,
attribute: false
},
hidden: false
}
static styles = [
css`
:host {
position: relative;
display: inline-block;
}
.popover {
z-index: 10;
position: absolute;
padding: 12px;
min-width: 150px;
border-radius: 4px;
border: 1px solid #ebeef5;
color: #606266;
line-height: 1.4;
text-align: justify;
font-size: 14px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
word-break: break-all;
background: #fff;
}
`
]
render() {
return html`
<div class="popconfirm">
<slot></slot>
<div class="popover"></div>
</div>
`
}
}
Popconfirm.reg('popconfirm')