优化抽屉组件

src/drawer/index.js

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