From 64f2637c939150e8346dfcf384951b89e76d6802 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Tue, 4 Apr 2023 12:10:40 +0800
Subject: [PATCH] =?UTF-8?q?drawer=E7=BB=84=E4=BB=B6=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=E6=9C=80=E6=96=B0=E7=89=88core?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/drawer/index.js |  4 ++--
 src/layer/index.js  | 57 ++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/src/drawer/index.js b/src/drawer/index.js
index 45f5b5c..e75a6b6 100644
--- a/src/drawer/index.js
+++ b/src/drawer/index.js
@@ -42,8 +42,8 @@ class Drawer extends Component {
       type: Boolean,
       default: false,
       observer(v) {
-        this.$anim.start(!v)
-        this.$refs.drawer.$anim.start(!v)
+        this.$animate(!v)
+        this.$refs.drawer.$animate(!v)
       }
     },
     width: '',
diff --git a/src/layer/index.js b/src/layer/index.js
index a0e42eb..c4014f7 100644
--- a/src/layer/index.js
+++ b/src/layer/index.js
@@ -251,6 +251,9 @@ class Layer extends Component {
     `
   ]
 
+  #wrapped = null
+  #dragIns = null
+
   mounted() {
     this.$refs.box.$anim.start()
   }
@@ -259,13 +262,54 @@ class Layer extends Component {
     this.$refs.box.$anim.start()
   }
 
-  close() {
+  /**
+   * 关闭实例
+   * @param force {Boolean} 是否强制关闭
+   */
+  close(force) {
     //
+
+    if (this.#wrapped) {
+      this.removeAttribute('common')
+      this.$emit('close')
+    } else {
+      // 有拖拽实例, 先销毁
+      if (this.#dragIns) {
+        this.#dragIns.destroy()
+      }
+      // 不允许多开的类型, 需要清除
+      if (UNIQUE_TYPES.includes(this.type)) {
+        uniqueInstance = null
+      }
+
+      // 离场动画
+      if (this.from && !force) {
+        let _style = 'opacity:0;'
+        for (let k in this.from) {
+          _style += `${k}:${this.from[k]};`
+        }
+        this.$refs.box.style.cssText += _style
+        this.timer = setTimeout(() => {
+          this.$emit('close')
+          this.remove()
+        }, 200)
+      } else {
+        clearTimeout(this.timer)
+        this.$emit('close')
+        this.remove()
+      }
+    }
   }
 
   handleBtnClick(ev) {
     //
-    let idx = +ev.target.dataset.idx
+    if (ev.target.tagName === 'BUTTON') {
+      let idx = +ev.target.dataset.idx
+
+      this.$refs.box.$anim.start(true)
+
+      this.close()
+    }
   }
 
   render() {
@@ -282,13 +326,8 @@ class Layer extends Component {
         <div class="layer__content">
           <slot></slot>
         </div>
-        <div class="layer__ctrl noselect">
-          ${this.btns.map(
-            (s, i) =>
-              html`<button data-idx=${i} @click=${this.handleBtnClick}>
-                ${s}
-              </button>`
-          )}
+        <div class="layer__ctrl noselect" @click=${this.handleBtnClick}>
+          ${this.btns.map((s, i) => html`<button data-idx=${i}>${s}</button>`)}
         </div>
       </div>
     `