完成drawer组件

Readme.md

@@ -19,7 +19,7 @@
 - [x] `wc-space`间隔组件
 - [ ] `wc-avatar`头像组件
 - [x] `wc-badge`徽标组件
-- [ ] `wc-drawer`抽屉组件
+- [x] `wc-drawer`抽屉组件
 - [ ] `wc-collapse`折叠组件
 - [ ] `wc-counter`倒计时组件
 - [ ] `wc-drag`拖拽组件

src/drawer/index.js

@@ -4,13 +4,33 @@
  * @date 2023/03/27 10:39:29
  */
 
-import { css, html, Component, nextTick, classMap } from '@bd/core'
+import { css, html, Component, nextTick, styleMap } from '@bd/core'
 
-const DIRECTION = {
-  left: 'l2r-in',
-  right: 'r2l-in',
-  top: 't2b-in',
-  bottom: 'b2t-in'
+const ANIMATION = {
+  left: {
+    custom: [
+      { transform: ' translateX(-100%)' },
+      { transform: ' translateX(0)' }
+    ]
+  },
+  right: {
+    custom: [
+      { transform: ' translateX(100%)' },
+      { transform: ' translateX(0)' }
+    ]
+  },
+  top: {
+    custom: [
+      { transform: ' translateY(-100%)' },
+      { transform: ' translateY(0)' }
+    ]
+  },
+  bottom: {
+    custom: [
+      { transform: ' translateY(100%)' },
+      { transform: ' translateY(0)' }
+    ]
+  }
 }
 
 class Drawer extends Component {
@@ -18,28 +38,17 @@ class Drawer extends Component {
   static props = {
     title: '',
     from: 'right',
-    // visible: false,
     visible: {
       type: Boolean,
       default: false,
       observer(v) {
-        if (v) {
-          this.anim.start()
-          // this.setAttribute('fade-in', '')
-          // setTimeout(() => {
-          //   // this.removeAttribute('fade-in')
-          // }, 300)
-        } else {
-          this.anim.end()
-          // this.style.display = 'block'
-          // this.setAttribute('fade-out', '')
-          // setTimeout(() => {
-          //   this.removeAttribute('fade-out')
-          // }, 300)
-        }
+        this.$anim.start(!v)
+        this.$refs.drawer.$anim.start(!v)
       }
     },
-    'mask-close': true
+    width: '',
+    height: '',
+    'mask-close': false
   }
 
   static styles = [
@@ -63,23 +72,6 @@ class Drawer extends Component {
         font-size: 14px;
         background: #fff;
         box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
-
-        &.l2r-in {
-          animation: l2r-in 0.3s ease-in-out forwards;
-        }
-        &.r2l-in {
-          animation: r2l-in 0.3s ease-in-out forwards;
-
-          &.out {
-            animation-direction: reverse;
-          }
-        }
-        &.t2b-in {
-          animation: t2b-in 0.3s ease-in-out forwards;
-        }
-        &.b2t-in {
-          animation: b2t-in 0.3s ease-in-out forwards;
-        }
       }
 
       .header {
@@ -139,40 +131,6 @@ class Drawer extends Component {
         bottom: 0;
         transform: translateY(100%);
       }
-    `,
-    css`
-      @keyframes r2l-in {
-        from {
-          transform: translateX(100%);
-        }
-        to {
-          transform: translateX(0);
-        }
-      }
-      @keyframes l2r-in {
-        from {
-          transform: translateX(-100%);
-        }
-        to {
-          transform: translateX(0);
-        }
-      }
-      @keyframes b2t-in {
-        from {
-          transform: translateY(100%);
-        }
-        to {
-          transform: translateY(0);
-        }
-      }
-      @keyframes t2b-in {
-        from {
-          transform: translateY(-100%);
-        }
-        to {
-          transform: translateY(0);
-        }
-      }
     `
   ]
 
@@ -181,28 +139,35 @@ class Drawer extends Component {
   }
 
   mounted() {
-    console.log('mounted title: ', this['mask-close'])
     this.$on('click', ev => {
-      console.log(ev.target, ev.currentTarget, ev.target === ev.currentTarget)
+      let path = ev.composedPath()
+
+      if (path[0] === ev.currentTarget && this['mask-close']) {
+        this.closeDrawer()
+      }
     })
   }
 
   render() {
-    let classes = classMap({
-      drawer: true
-      // [DIRECTION[this.from]]: this.visible,
-      // out: !this.visible
-    })
+    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`
-      <div class=${classes}>
+      <div
+        class="drawer"
+        style=${styleMap(style)}
+        ref="drawer"
+        #animation=${ANIMATION[this.from]}
+      >
         <header class="header">
           <span class="title"><slot name="title">${this.title}</slot></span>
           <wc-icon name="close" @click=${this.closeDrawer}></wc-icon>
         </header>
-        <main class="wrapper">
-          <slot></slot>
-        </main>
+        <main class="wrapper"><slot></slot></main>
       </div>
     `
   }