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-25 19:18:27 +08:00
parent 7dbcaecea0
commit 41a9205a74
2 changed files with 236 additions and 0 deletions

235
src/base/drawer.wc Normal file
View File

@ -0,0 +1,235 @@
<template>
<div class="drawer">
<header class="header">
<span class="title"><slot name="title"/></span>
<wc-icon is="close"></wc-icon>
</header>
<main class="wrapper"><slot /></main>
</div>
</template>
<style lang="scss">
:host {
display: none;
position: fixed;
left: 0;
top: 0;
z-index: 99;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.drawer {
display: flex;
flex-direction: column;
position: absolute;
width: 50%;
height: 100%;
font-size: 14px;
background: #fff;
box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease-in-out;
&.l2r-in {
transform: translateX(0) !important;
}
&.r2l-in {
transform: translateX(0) !important;
}
&.t2b-in {
transform: translateX(0) !important;
}
&.b2t-in {
transform: translateX(0) !important;
}
}
:host([from='left']),
:host([from='right']) {
.drawer {
width: 50%;
height: 100%;
}
}
:host([from='top']),
:host([from='bottom']) {
.drawer {
width: 100%;
height: 50%;
}
}
:host([from='left']) .drawer {
left: 0;
top: 0;
transform: translateX(-100%);
}
:host([from='top']) .drawer {
left: 0;
top: 0;
transform: translateY(-100%);
}
:host([from='right']) .drawer {
right: 0;
top: 0;
transform: translateX(100%);
}
:host([from='bottom']) .drawer {
left: 0;
bottom: 0;
transform: translateY(100%);
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
font-size: 16px;
color: var(--color-dark-2);
wc-icon {
--size: 16px;
margin-right: 8px;
color: var(--color-grey-3);
cursor: pointer;
}
}
.wrapper {
flex: 1;
padding: 16px;
}
/* @keyframes r2l-in {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes r2l-out {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
@keyframes l2r-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes l2r-out {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes b2t-in {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes b2t-out {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
@keyframes t2b-in {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
@keyframes t2b-out {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
} */
</style>
<script>
import $ from '../utils'
import '../icon/index'
const DIRECTION = {
left: 'l2r-in',
right: 'r2l-in',
top: 't2b-in',
bottom: 'b2t-in'
}
export default class Drawer {
props = {
title: '',
from: 'left',
padding: 16,
visible: false
}
__init__() {
/* render */
var elem = this.root.children[1]
this.__DRAWER__ = elem
this.__HEADER__ = elem.children[0]
this.__WRAPPER__ = elem.children[1]
this.__TITLE__ = this.__HEADER__.firstElementChild
this.__CLOSE__ = this.__HEADER__.lastElementChild
}
set visible(val) {
this.props.visible = !!val
if (this.props.visible) {
this.style.cssText = 'display:block'
setTimeout(_ => {
this.__DRAWER__.classList.toggle(DIRECTION[this.props.from], true)
}, 10)
} else {
this.__DRAWER__.classList.toggle(DIRECTION[this.props.from], false)
setTimeout(_ => {
this.style.cssText = ''
}, 300)
}
}
mounted() {
this._closeFn = $.bind(this.__CLOSE__, 'click', _ => {
this.visible = false
})
}
watch() {
switch (name) {
case 'title':
this.__TITLE__.textContent = val
break
case 'from':
this.props.from = val
break
}
}
}
</script>

View File

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