drawer组件适配最新版core

src/drawer/index.js

@@ -42,8 +42,8 @@ class Drawer extends Component {
       type: Boolean,
       default: false,
       observer(v) {
-        this.$anim.start(!v)
+        this.$animate(!v)
-        this.$refs.drawer.$anim.start(!v)
+        this.$refs.drawer.$animate(!v)
       }
     },
     width: '',

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">
+        <div class="layer__ctrl noselect" @click=${this.handleBtnClick}>
-          ${this.btns.map(
+          ${this.btns.map((s, i) => html`<button data-idx=${i}>${s}</button>`)}
-            (s, i) =>
-              html`<button data-idx=${i} @click=${this.handleBtnClick}>
-                ${s}
-              </button>`
-          )}
         </div>
       </div>
     `