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 5a911cf..665bd2e 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -4,7 +4,15 @@ * @date 2023/03/06 15:17:25 */ -import { css, html, Component, nextTick, styleMap } from '@bd/core' +import { + css, + html, + Component, + bind, + unbind, + nextTick, + styleMap +} from '@bd/core' import '../form/input.js' import Drag from '../drag/core.js' @@ -22,7 +30,7 @@ class Layer extends Component { mask: false, title: { type: String, default: LANG_TITLE, attribute: false }, content: { type: String, default: '', attribute: false }, - btns: ['取消', '确定'] + btns: [] } static styles = [ @@ -54,7 +62,7 @@ class Layer extends Component { .layer { overflow: hidden; flex: 0 auto; - position: absolute; + position: relative; z-index: 65535; border-radius: 3px; color: #666; @@ -111,7 +119,6 @@ class Layer extends Component { ::slotted(&__input) { flex: 1; - height: 36px; } ::slotted(&__toast) { @@ -149,7 +156,7 @@ class Layer extends Component { } &__ctrl { - display: none; + display: flex; justify-content: flex-end; width: 100%; height: 60px; @@ -165,7 +172,7 @@ class Layer extends Component { padding: 0 10px; margin: 0 5px; border: 1px solid var(--color-plain-3); - border-radius: 2px; + border-radius: 3px; white-space: nowrap; background: #fff; font-size: inherit; @@ -251,17 +258,122 @@ class Layer extends Component { ` ] + #wrapped = null + #dragIns = null + + #resolve = null + #reject = null + + constructor() { + super() + + this.promise = new Promise((resolve, reject) => { + this.#resolve = resolve + this.#reject = reject + }) + + this.promise.host = this + } + + #intercept(value) { + if (this.intercept) { + this.intercept(value, _ => { + delete this.intercept + this.#resolve(value) + this.$refs.box.$animate(true).then(_ => this.close()) + }) + } else { + this.#resolve(value) + this.$refs.box.$animate(true).then(_ => this.close()) + } + } + mounted() { - this.$refs.box.$anim.start() + if (this.type === 'prompt') { + this.$refs.input = this.firstElementChild + bind(this.$refs.input, 'submit', ev => { + this.#intercept(ev.target.value) + }) + } + + this.$refs.box.$animate() } updated() { - this.$refs.box.$anim.start() + this.$refs.box.$animate() + } + + /** + * 关闭实例 + * @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) { + if (ev.target.tagName === 'BUTTON') { + let idx = +ev.target.dataset.idx + + switch (this.type) { + case 'alert': + this.#intercept(null) + break + + case 'confirm': + case 'prompt': + if (idx === 0) { + this.#reject() + this.$refs.box.$animate(true).then(_ => this.close()) + } else { + let value = this.type === 'prompt' ? this.$refs.input.value : null + this.#intercept(value) + } + break + + default: + // 其他类型, 如有按钮, 直接交给拦截器处理 + this.#intercept(idx) + break + } + } } render() { return html` -
$1
')
+ .replace(INLINE.code, (m, str) => {
+ str = str.replace(/([_*~])/g, '\\$1')
+ return `${str}
`
+ })
.replace(INLINE.strong[0], '$1')
.replace(INLINE.strong[1], '$1')
.replace(INLINE.em[0], '$1')