diff --git a/src/layer/index.js b/src/layer/index.js index 6afb69a..9e41a82 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' @@ -253,7 +261,41 @@ 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() { + if (this.type === 'prompt') { + this.$refs.input = this.firstElementChild + bind(this.$refs.input, 'submit', ev => { + this.#intercept(ev.target.value) + }) + } + this.$refs.box.$animate() } @@ -300,12 +342,32 @@ class Layer extends Component { } } + // 按钮的点击事件 handleBtnClick(ev) { - // if (ev.target.tagName === 'BUTTON') { let idx = +ev.target.dataset.idx - this.$refs.box.$animate(true).then(_ => this.close()) + switch (this.type) { + case 'alert': + this.$refs.box.$animate(true).then(_ => this.close()) + 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 + } } }