From 80849345d08894f72b2c9e758ac37192bba7c4db Mon Sep 17 00:00:00 2001 From: yutent Date: Thu, 6 Apr 2023 17:21:33 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E4=BC=98=E5=8C=96z-index=E6=95=B0=E5=80=BC?= =?UTF-8?q?;=20=E8=B0=83=E6=95=B4drawer=E5=8A=A8=E7=94=BB=E6=9C=BA?= =?UTF-8?q?=E5=88=B6=E4=BB=A5=E9=80=82=E9=85=8D=E6=9C=80=E6=96=B0=E7=89=88?= =?UTF-8?q?core?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/color/index.js | 4 +- src/drawer/index.js | 16 ++----- src/layer/index.js | 109 +++++++++++++++++++++++++++++++++++++------- src/scroll/index.js | 1 - 4 files changed, 100 insertions(+), 30 deletions(-) diff --git a/src/color/index.js b/src/color/index.js index 152b564..fbbeb79 100644 --- a/src/color/index.js +++ b/src/color/index.js @@ -256,7 +256,7 @@ class Color extends Component { .thumb { position: absolute; - z-index: 99; + z-index: 1; width: 0; height: 0; @@ -358,7 +358,7 @@ class Color extends Component { .alpha { position: relative; - z-index: 9; + z-index: 1; display: block; width: 100%; height: 12px; diff --git a/src/drawer/index.js b/src/drawer/index.js index e75a6b6..e63114e 100644 --- a/src/drawer/index.js +++ b/src/drawer/index.js @@ -57,7 +57,7 @@ class Drawer extends Component { position: fixed; left: 0; top: 0; - z-index: 99; + z-index: 9; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); @@ -100,6 +100,7 @@ class Drawer extends Component { :host([from='left']), :host([from='right']) { .drawer { + top: 0; width: 50%; height: 100%; } @@ -107,29 +108,22 @@ class Drawer extends Component { :host([from='top']), :host([from='bottom']) { .drawer { + left: 0; width: 100%; height: 50%; } } :host([from='left']) .drawer { left: 0; - top: 0; - transform: translateX(-100%); - } - :host([from='top']) .drawer { - left: 0; - top: 0; - transform: translateY(-100%); } :host([from='right']) .drawer { right: 0; + } + :host([from='top']) .drawer { top: 0; - transform: translateX(100%); } :host([from='bottom']) .drawer { - left: 0; bottom: 0; - transform: translateY(100%); } ` ] diff --git a/src/layer/index.js b/src/layer/index.js index 665bd2e..26b824e 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -23,12 +23,21 @@ const LANG_TITLE = '提示' const LANG_BTNS = ['取消', '确定'] // 要保证弹层唯一的类型 const UNIQUE_TYPES = ['alert', 'confirm', 'prompt'] +const BUILDIN_TYPES = UNIQUE_TYPES.concat(['notify', 'toast']) class Layer extends Component { static props = { - type: '', + type: { + type: String, + default: null, + observer(v) { + this.#wrapped = !BUILDIN_TYPES.includes(v) + } + }, + fixed: false, mask: false, - title: { type: String, default: LANG_TITLE, attribute: false }, + 'mask-close': false, + title: { type: String, default: '', attribute: false }, content: { type: String, default: '', attribute: false }, btns: [] } @@ -44,6 +53,7 @@ class Layer extends Component { left: 0; top: 0; width: 100%; + height: 0; } :host([type]) { display: flex; @@ -76,9 +86,6 @@ class Layer extends Component { transform: scale(1.01); transition: transform 0.1s linear; } - &.blur { - backdrop-filter: blur(5px); - } &:active { z-index: 65536; @@ -255,10 +262,16 @@ class Layer extends Component { } } } + + :host([blurry]) { + .layer { + backdrop-filter: blur(5px); + } + } ` ] - #wrapped = null + #wrapped = false #dragIns = null #resolve = null @@ -275,6 +288,27 @@ class Layer extends Component { this.promise.host = this } + #toggleDrag() { + // 这3类弹层不允许拖拽 + if (UNIQUE_TYPES.includes(this.type)) { + return + } + + if (this.fixed) { + // 如之前有拖拽实例, 先销毁 + if (this.#dragIns) { + this.#dragIns.destroy() + this.#dragIns = null + } + return + } + let $title = this.$refs.box.firstElementChild + + this.#dragIns = new Drag(this.$refs.box).by($title, { + overflow: !!this.overflow + }) + } + #intercept(value) { if (this.intercept) { this.intercept(value, _ => { @@ -296,6 +330,33 @@ class Layer extends Component { }) } + // 有遮罩层时 + if (this.mask) { + this.$on('click', ev => { + let path = ev.composedPath() + + if (path[0] === ev.currentTarget) { + if (UNIQUE_TYPES.includes(this.type)) { + this.$refs.box.classList.toggle('scale', true) + setTimeout(_ => { + this.$refs.box.classList.remove('scale') + }, 100) + } else if (this['mask-close']) { + if (this.#wrapped === false) { + this.#reject() + } + this.close() + } + } + }) + + if (this['mask-color']) { + this.style.backgroundColor = this['mask-color'] + } + } + + this.#toggleDrag() + this.$refs.box.$animate() } @@ -303,6 +364,12 @@ class Layer extends Component { this.$refs.box.$animate() } + show() { + if (this.#wrapped) { + this.type = 'common' + } + } + /** * 关闭实例 * @param force {Boolean} 是否强制关闭 @@ -311,7 +378,7 @@ class Layer extends Component { // if (this.#wrapped) { - this.removeAttribute('common') + this.type = null this.$emit('close') } else { // 有拖拽实例, 先销毁 @@ -344,8 +411,11 @@ class Layer extends Component { // 按钮的点击事件 handleBtnClick(ev) { - if (ev.target.tagName === 'BUTTON') { - let idx = +ev.target.dataset.idx + if ( + ev.target.tagName === 'BUTTON' || + ev.target.className === 'notify-button' + ) { + let idx = +ev.target.dataset.idx || 0 switch (this.type) { case 'alert': @@ -378,14 +448,23 @@ class Layer extends Component { class="layer__title noselect" style=${styleMap({ display: !!this.title ? '' : 'none' })} > - ${this.title}${this.type === 'notify' - ? html`` + ${this.title} + ${this.type === 'notify' + ? html`` : ''}
-
+
${this.btns.map((s, i) => html``)}
@@ -463,12 +542,10 @@ function layer(opt = {}) { layDom.type = opt.type layDom.title = opt.title - if (opt.hasOwnProperty('fixed')) { - layDom.fixed = opt.fixed - } + + layDom.fixed = !!opt.fixed layDom.innerHTML = content - layDom.wrapped = false // 用于区分是API创建的还是包裹现有的节点 document.body.appendChild(layDom) return layDom.promise diff --git a/src/scroll/index.js b/src/scroll/index.js index 5956b9f..46229a5 100644 --- a/src/scroll/index.js +++ b/src/scroll/index.js @@ -55,7 +55,6 @@ class Scroll extends Component { position: absolute; display: flex; justify-content: flex-end; - z-index: 10240; opacity: 0; user-select: none; transition: opacity 0.3s linear, visibility 0.3s linear; From 0bb5c82acc8a9b03257af2cf4ff522d31259642b Mon Sep 17 00:00:00 2001 From: yutent Date: Thu, 6 Apr 2023 17:39:00 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E7=A7=BB=E9=99=A4color=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=A4=9A=E4=BD=99=E7=9A=84z-index?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/color/index.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/color/index.js b/src/color/index.js index fbbeb79..e1506d1 100644 --- a/src/color/index.js +++ b/src/color/index.js @@ -241,7 +241,6 @@ class Color extends Component { position: absolute; left: 0; top: 0; - z-index: 0; width: 100%; height: 100%; content: ''; @@ -256,7 +255,6 @@ class Color extends Component { .thumb { position: absolute; - z-index: 1; width: 0; height: 0; @@ -293,7 +291,6 @@ class Color extends Component { position: absolute; left: 0; top: 0; - z-index: 0; width: 12px; height: 0; @@ -310,7 +307,6 @@ class Color extends Component { } .hue { position: relative; - z-index: 1; display: block; width: 12px; height: 180px; @@ -330,7 +326,6 @@ class Color extends Component { position: absolute; left: 0; top: 0; - z-index: 0; width: 100%; height: 12px; background: linear-gradient(to right, transparent, #f00); @@ -340,7 +335,6 @@ class Color extends Component { position: absolute; left: 100%; top: 0; - z-index: 0; width: 0; height: 12px; @@ -358,7 +352,6 @@ class Color extends Component { .alpha { position: relative; - z-index: 1; display: block; width: 100%; height: 12px; From 8ba95376356ce644e2d61082d7e3ecf5c895bfff Mon Sep 17 00:00:00 2001 From: yutent Date: Thu, 6 Apr 2023 17:44:33 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E7=A7=BB=E9=99=A4textarea=E5=A4=9A?= =?UTF-8?q?=E4=BD=99=E7=9A=84z-index?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/form/textarea.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/form/textarea.js b/src/form/textarea.js index 538f9f7..3c1eef7 100644 --- a/src/form/textarea.js +++ b/src/form/textarea.js @@ -75,7 +75,6 @@ class TextArea extends Component { position: absolute; right: 4px; bottom: 2px; - z-index: 1; line-height: 1; font-size: 12px; color: var(--color-grey-2);