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 {