bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

优化抽屉组件

master
yutent 2023-11-21 13:11:09 +08:00
parent d2f1c0a3c3
commit 7f90d6fcd5
1 changed files with 9 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/drawer/index.js
View File

@ -40,7 +40,7 @@ class Drawer extends Component {
static props = { static props = {
title: 'str!', title: 'str!',
from: 'right', from: 'right',
visible: { value: {
type: Boolean, type: Boolean,
default: false, default: false,
observer(v) { observer(v) {
@ -48,8 +48,6 @@ class Drawer extends Component {
this.$refs.drawer.$animate(!v) this.$refs.drawer.$animate(!v)
} }
}, },
width: 'str!',
height: 'str!',
maskClose: false maskClose: false
} }
@ -69,7 +67,7 @@ class Drawer extends Component {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
width: 50%; width: var(--wc-drawer-width, 50%);
height: 100%; height: 100%;
font-size: 14px; font-size: 14px;
background: #fff; background: #fff;
@ -103,7 +101,7 @@ class Drawer extends Component {
:host([from='right']) { :host([from='right']) {
.drawer { .drawer {
top: 0; top: 0;
width: 50%; width: var(--wc-drawer-width, 50%);
height: 100%; height: 100%;
} }
} }
@ -112,7 +110,7 @@ class Drawer extends Component {
.drawer { .drawer {
left: 0; left: 0;
width: 100%; width: 100%;
height: 50%; height: var(--wc-drawer-width, 50%);
} }
} }
:host([from='left']) .drawer { :host([from='left']) .drawer {
@ -130,8 +128,8 @@ class Drawer extends Component {
` `
] ]
closeDrawer() { #close() {
this.visible = false this.value = false
this.$emit('input', { value: false }) this.$emit('input', { value: false })
this.$emit('close', { value: false }) this.$emit('close', { value: false })
} }
@ -141,29 +139,17 @@ class Drawer extends Component {
let path = ev.composedPath() let path = ev.composedPath()
if (path[0] === ev.currentTarget && this.maskClose) { if (path[0] === ev.currentTarget && this.maskClose) {
this.closeDrawer() this.#close()
} }
}) })
} }
render() { render() {
let style = {}
if ((this.from === 'left' || this.from === 'right') && this.width) {
style = { width: this.width }
} else if ((this.from === 'top' || this.from === 'bottom') && this.height) {
style = { height: this.height }
}
return html` return html`
<div <div class="drawer" ref="drawer" #animation=${ANIMATION[this.from]}>
class="drawer"
style=${styleMap(style)}
ref="drawer"
#animation=${ANIMATION[this.from]}
>
<header class="header"> <header class="header">
<span class="title"><slot name="title">${this.title}</slot></span> <span class="title"><slot name="title">${this.title}</slot></span>
<wc-icon name="close" @click=${this.closeDrawer}></wc-icon> <wc-icon name="close" @click=${this.#close}></wc-icon>
</header> </header>
<main class="wrapper"><slot></slot></main> <main class="wrapper"><slot></slot></main>
</div> </div>