From d79bb96b6b86337417227b3322225c8648e4a09a Mon Sep 17 00:00:00 2001 From: yutent Date: Wed, 26 Jan 2022 17:50:32 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96toast=E6=A0=B7=E5=BC=8F;?= =?UTF-8?q?=E4=BC=98=E5=8C=96button=E8=87=AA=E5=8A=A8=E8=81=9A=E7=84=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/drawer.wc | 1 + src/form/button.wc | 10 ++------ src/form/link.wc | 10 ++------ src/icon/svg.js | 5 ++-- src/layer/index.wc | 61 ++++++++++++++++++++++++---------------------- 5 files changed, 39 insertions(+), 48 deletions(-) diff --git a/src/base/drawer.wc b/src/base/drawer.wc index 4f86244..2a6b495 100644 --- a/src/base/drawer.wc +++ b/src/base/drawer.wc @@ -217,6 +217,7 @@ export default class Drawer { mounted() { this._closeFn = $.bind(this.__CLOSE__, 'click', _ => { this.visible = false + this.dispatchEvent(new CustomEvent('closed')) }) } diff --git a/src/form/button.wc b/src/form/button.wc index be3f5ab..1943e53 100644 --- a/src/form/button.wc +++ b/src/form/button.wc @@ -269,8 +269,6 @@ import '../icon/index' import $ from '../utils' -const IS_FIREFOX = !!window.sidebar - export default class Button { props = { icon: '', @@ -380,13 +378,9 @@ export default class Button { break case 'autofocus': + // 部分浏览器需要执行一下 focus()才能聚焦成功 this.__BTN__.setAttribute('autofocus', '') - // 辣鸡火狐, 要触发一下focus, 才能聚焦 - if (IS_FIREFOX) { - setTimeout(_ => { - this.__BTN__.focus() - }, 10) - } + setTimeout(_ => this.__BTN__.focus(), 10) break // diff --git a/src/form/link.wc b/src/form/link.wc index ca329e3..712c9a7 100644 --- a/src/form/link.wc +++ b/src/form/link.wc @@ -191,8 +191,6 @@ import '../icon/index' import $ from '../utils' -const IS_FIREFOX = !!window.sidebar - export default class Link { props = { to: null, // 跳转的地址 @@ -258,13 +256,9 @@ export default class Link { watch() { switch (name) { case 'autofocus': + // 部分浏览器需要执行一下 focus()才能聚焦成功 this.__LINK__.setAttribute('autofocus', '') - // 辣鸡火狐, 要触发一下focus, 才能聚焦 - if (IS_FIREFOX) { - setTimeout(_ => { - this.__LINK__.focus() - }, 10) - } + setTimeout(_ => this.__LINK__.focus(), 10) break case 'to': diff --git a/src/icon/svg.js b/src/icon/svg.js index e1819c6..8f4547d 100644 --- a/src/icon/svg.js +++ b/src/icon/svg.js @@ -99,8 +99,7 @@ const SVG_PATH = { load: 'M587.6 587.9c25.3-25.3 202.5 88.6 234.2 120.2 31.7 31.6 38 88.5 6.4 120.1-31.6 31.6-82.2 31.6-113.9-0.1-31.7-31.6-152-215-126.7-240.2zM436 434.8c-25.3 25.3-202.5-88.6-234.2-120.2-31.7-31.6-38-88.5-6.4-120.1 31.6-31.6 82.2-31.6 113.9 0.1 31.7 31.6 152 214.9 126.7 240.2z m-31.8 77.7c0 35.7-205.9 80.4-250.7 80.4-44.8 0-89.5-35.7-89.5-80.4s35.8-80.4 80.6-80.4c44.7 0 259.6 44.7 259.6 80.4z m31.9 76.8c25.3 25.3-88.7 202.3-120.3 233.9-31.7 31.6-88.6 38-120.2 6.4-31.6-31.6-31.6-82.2 0-113.8 31.7-31.6 215.2-151.8 240.5-126.5z m75.9 30.9c35.8 0 80.5 205.7 80.5 250.4 0 44.7-35.8 89.4-80.5 89.4s-80.5-35.8-80.5-80.5 44.7-259.3 80.5-259.3z m107.8-107.7c0-35.7 205.9-80.4 250.7-80.4 44.8 0 89.5 35.7 89.5 80.4s-35.8 80.4-80.6 80.4c-44.7 0-259.6-44.7-259.6-80.4z m-33.6-75.9c-25.3-25.3 88.7-202.3 120.3-233.9 31.7-31.6 88.6-38 120.2-6.4 31.6 31.6 31.6 82.1-0.1 113.8-31.6 31.6-215.1 151.8-240.4 126.5zM512 403.8c-35.8 0-80.5-205.7-80.5-250.4 0-44.7 35.8-89.4 80.5-89.4s80.5 35.8 80.5 80.5-44.7 259.3-80.5 259.3z', // 这个会做动画 - loading: - '', + loading: '', location: 'M511.9 960h-0.1c-16.2-0.1-31.7-8.2-42.3-22.3-7.7-10-78-101.2-147.4-212.6C230 577.4 183.3 465.5 183.3 392.7 183.3 211.5 330.8 64 512 64s328.7 147.5 328.7 328.7c0 72.9-46.8 185-139.1 333.1-69.2 111-139.1 201.8-147.1 212.1-10.6 14.1-26 22.2-42.3 22.2l-0.3-0.1z m0.1-845.4c-153.3 0-278.1 124.8-278.1 278.1 0 63.9 47.2 172.4 136.4 313.9C439.9 816.9 508.9 906 509.6 906.8l0.2 0.3c1.1 1.4 1.9 2 2.3 2.2 0.4-0.2 1.1-0.8 2.1-2.1l0.1-0.1c2.8-3.6 275.8-357.8 275.8-514.4 0-153.3-124.8-278.1-278.1-278.1z m0.2 346.2c-55.1 0-99.9-44.8-99.9-99.9 0-55.1 44.8-99.9 99.9-99.9 55.1 0 99.9 44.8 99.9 99.9-0.1 55.1-44.9 99.9-99.9 99.9z m0-149.1c-27.2 0-49.3 22.1-49.3 49.3 0 27.2 22.1 49.3 49.3 49.3 27.2 0 49.3-22.1 49.3-49.3-0.1-27.2-22.2-49.3-49.3-49.3z', lock: @@ -187,7 +186,7 @@ const SVG_PATH = { 'M929.2 960c-13.7 0-25.5-8.9-29.5-22-12.6-41.6-31.5-80.7-56.4-116.4-24.5-35.2-54.2-66.2-88.2-92-70.6-53.7-154.7-82.1-243.2-82.1-88.4 0-172.5 28.4-243 82-34 25.8-63.6 56.7-88.2 91.9-24.9 35.6-43.8 74.7-56.4 116.2-2.4 8-7.8 14.5-15.1 18.4-7.3 3.9-15.6 4.6-23.5 2.2-16.2-5-25.3-22.4-20.4-38.8 14.5-47.8 36.4-92.8 65-133.8 28.2-40.4 62.4-76 101.5-105.7 39.6-30.1 83.3-53.5 129.9-69.5 48.3-16.6 98.8-25 150.2-25 51.5 0 102 8.4 150.3 25.1 46.7 16.1 90.4 39.5 130 69.6 39.1 29.8 73.2 65.4 101.5 105.9 28.6 41 50.4 86.1 64.9 134 4.9 16.3-4.2 33.7-20.4 38.7-2.9 0.8-6 1.3-9 1.3zM512 569c-67.4 0-130.9-26.3-178.6-74-47.7-47.7-74-111.1-74-178.6s26.3-130.9 74-178.6C381.1 90.3 444.5 64 512 64c67.4 0 130.9 26.3 178.6 74 47.7 47.7 74 111.1 74 178.5s-26.3 130.9-74 178.6C642.9 542.8 579.4 569 512 569z m0-443.4c-51 0-98.9 19.9-135 55.9-36.1 36.1-55.9 84-55.9 135s19.9 98.9 55.9 135c36.1 36.1 84 55.9 135 55.9s99-19.9 135-55.9c36.1-36.1 55.9-84 55.9-135s-19.9-98.9-55.9-135c-36.1-36.1-84-55.9-135-55.9z', vip: 'M511.9 946.7c-8.5 0-16.6-4-21.8-10.8L165 511.8c-6.1-7.7-7.6-18.2-3.9-27.3 3.7-9.2 12.1-15.6 22-16.9 8.2-1 16.3 1.7 22.2 7.2h0.5l306.1 399.3 222.7-290.6c4.5-5.8 10.9-9.5 18.2-10.5 7.3-1 14.5 1 20.3 5.4 12 9.2 14.3 26.5 5.1 38.5l-244.5 319c-5.1 6.7-13.3 10.8-21.8 10.8z m75.6-332h-1.7a16 16 0 0 1-3.9-0.5l-2.7-0.5-3.9-1.4-0.6-0.3c-7.5-4-11.7-11.4-11.7-20.7V432c0-19.9 12-31.3 32.8-31.3h57.5c21.6 0 38.3 5.4 49.6 16 11.5 10.8 17.3 26.7 17.3 47.3 0 21.6-7.5 38.4-22.3 49.9-12.1 9.2-27.2 13.9-45.1 13.9h-42.6v63.5c0 9.3-4.1 16.7-11.7 20.7l-0.6 0.3-3.9 1.4-2.7 0.5c-1.1 0.4-2.4 0.5-3.8 0.5z m22.8-118.2h33.8c5.9 0 10.7-1.2 14.4-3.5l0.1-0.1c3.2-1.9 5.6-4.5 7.4-8l0.1-0.2c1.8-3.2 3.1-6.9 3.9-11 0.6-3.4 0.8-6.9 0.8-10.4 0-1.5-0.1-3-0.2-4.6v-0.8c0-1.6-0.1-3.1-0.4-4.6-0.7-4.3-1.8-7.8-3.2-10.7-1.8-3.3-4-5.9-6.9-7.6-3.7-2.2-8.6-3.3-14.3-3.3h-35.5v64.8zM488 600c-0.6-137.8-0.9-183.2 0-187 2-8.1 10.6-19.4 24-19 11.6 0.3 21.5 9.3 23 21 0.1 61.8 0.1 123.6 0.2 185.3-1.6 11.7-11.6 20.5-23.2 20.7-12 0.2-22.5-8.9-24-21z m-100.9 14.7c-14 0-24.4-7.3-29.3-20.6l-60.2-169-0.1-0.7c-0.3-1.4-0.4-2.8-0.4-4.2 0-14.6 9.3-23.3 25-23.3 8.5 0 13.6 3.6 16.4 6.6l0.3 0.4c1.3 1.5 2.4 3.2 3.3 5.2l0.4 0.8 0.4 0.6 50.6 145.8L444.4 408c2.7-7 8.4-11 15.6-11 10.1 0 16.7 6.6 16.7 16.7v2.7l-61 177.5c-1.6 4.7-4.2 9-7.8 12.6l-0.1 0.1c-5.7 5.4-12.6 8.1-20.7 8.1z m422.5-56.2c-5.8 0-11.7-1.9-16.7-5.7-11.7-9-14.2-25.5-5.7-37.6l0.2-0.3L910.7 354c9.2-12 26.4-14.3 38.4-5.1 12 9.2 14.3 26.4 5.1 38.5l-123.4 161-0.1 0.1c-5.5 6.6-13.3 10-21.1 10z m-669-96.1c-7.9 0-15.7-3.4-21.1-9.9l-0.2-0.3-49.7-64.8c-4.5-5.8-6.4-13-5.4-20.3 1-7.3 4.7-13.7 10.5-18.2 12-9.2 29.3-6.9 38.5 5.1l49.8 65c8.5 12.1 6 28.6-5.7 37.6-5 3.9-10.8 5.8-16.7 5.8z m643.6-88.6h-545c-13.4 0-24.4-10.9-24.4-24.4 0-13.4 10.9-24.4 24.4-24.4h545c13.4 0 24.4 10.9 24.4 24.4-0.1 13.5-11 24.4-24.4 24.4z m148.4-48.6c-8.8 0-17.2-4.3-22.4-11.6l-45.6-62.8c-4.3-5.9-6.1-13.2-4.9-20.4 1.1-7.2 5-13.6 11-17.9 12.2-8.9 29.4-6.2 38.3 6.1l45.7 62.9c5.8 7.8 7 18.3 3 27.4-4 9-12.5 15.2-22.4 16.2-0.9 0.1-1.8 0.1-2.7 0.1zM91.4 315c-5.6 0-11.2-1.7-16.1-5.2-12.2-8.9-15-26.1-6.1-38.3L202 88.6c5.1-7.1 13.4-11.3 22.2-11.3h575.4c8.7 0 17 4.2 22.2 11.3l51.6 71c4.3 5.9 6 13.2 4.9 20.4-1.1 7.2-5.1 13.6-11 17.9-5.9 4.3-13.2 6-20.4 4.9-7.2-1.1-13.6-5.1-17.9-11l-43.4-59.7H238.2L113.6 303.7c-5.3 7.4-13.7 11.3-22.2 11.3z', - warn: + warning: 'M907.3 931H116.7c-20.2 0-36.9-8.4-46-23.2-9-14.7-8.9-33.5 0.3-51.5l363.3-711.7c13.5-26.4 45.6-48 76.2-51.3l2.7-0.3 2.7 0.3c30.7 3.3 62.7 24.9 76.2 51.4l361.2 711.5c9.1 18 9.2 36.8 0.2 51.6-9.3 14.7-26 23.2-46.2 23.2z m-791.8-50.7h793.1c-0.2-0.4-0.3-0.8-0.6-1.2l-0.9-1.7-360.3-709.8c-5.4-10.7-20.4-21.1-33.7-23.6-13.4 2.5-28.4 12.9-33.8 23.6L116 879.3c-0.2 0.3-0.3 0.7-0.5 1zM512 812c-24.3 0-44-19.7-44-44s19.7-44 44-44 44 19.7 44 44-19.7 44-44 44z m0-108c-16.5 0-30-13.5-30-30V330c0-16.5 13.5-30 30-30s30 13.5 30 30v344c0 16.5-13.5 30-30 30z', wallet: 'M384.5 682.6V341.4c0-47 39.4-85.4 88.5-85.4h408.1v-42.6c0-47-39.2-85.4-87.6-85.4H155.2c-49.1 0-91.2 37-91.2 84v600c0 47 42.1 84 91.2 84h638.1c48.7 0 87.6-38.4 87.6-85.4V768H472.7c-48.9 0-88.2-38.4-88.2-85.4zM448 355.7v312.6c0 19.6 16.8 35.7 37.4 35.7h437.2c20.6 0 37.4-16.1 37.4-35.7V355.7c0-19.6-16.8-35.7-37.4-35.7H485.4c-20.6 0-37.4 16.1-37.4 35.7z m195.9 227.4c-43 2.7-78.4-32.8-75.8-75.8 2.2-35.4 31-64.2 66.6-66.7 43-2.7 78.4 32.8 75.8 75.8-2.5 35.7-31.2 64.5-66.6 66.7z', diff --git a/src/layer/index.wc b/src/layer/index.wc index 8917e0c..1eca058 100644 --- a/src/layer/index.wc +++ b/src/layer/index.wc @@ -48,8 +48,8 @@ font-size: 14px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); - transition: opacity 0.2s ease-in-out, left 0.2s ease-in-out, - right 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out, left 0.2s ease-in-out, right 0.2s ease-in-out, + top 0.2s ease-in-out, bottom 0.2s ease-in-out; opacity: 0; &.scale { @@ -123,24 +123,24 @@ } ::slotted(&__toast.style-info) { - // border: 1px solid var(--color-plain-3); - background: var(--color-plain-a); - // color: var(--color-grey-3); + border: 1px solid #ebeef5; + background: #edf2fc; + color: var(--color-grey-3); } ::slotted(&__toast.style-success) { - // border: 1px solid #b3e19d; - background: var(--color-green-a); - // color: var(--color-green-3); + border: 1px solid #e1f3d8; + background: #f0f9eb; + color: var(--color-green-3); } - ::slotted(&__toast.style-warn) { - // border: 1px solid #faebb4; - background: var(--color-orange-a); - // color: var(--color-orange-3); + ::slotted(&__toast.style-warning) { + border: 1px solid #faebb4; + background: #faecd8; + color: var(--color-red-1); } ::slotted(&__toast.style-error) { - // border: 1px solid #f5c4c4; - background: var(--color-red-a); - // color: var(--color-red-3); + border: 1px solid #f5c4c4; + background: #fde2e2; + color: var(--color-red-1); } } @@ -178,7 +178,7 @@ } &:focus { - // @include focus1; + box-shadow: 0 0 0 2px var(--color-plain-a); } &:last-child { @@ -192,6 +192,9 @@ &:active { background: var(--color-teal-3); } + &:focus { + box-shadow: 0 0 0 2px var(--color-teal-a); + } } &::-moz-focus-inner { @@ -258,8 +261,7 @@ const LANGUAGES = { } } LANGUAGES['zh-CN'] = LANGUAGES.cn -const lang = - LANGUAGES[window.__ENV_LANG__ || navigator.language] || LANGUAGES.cn +const lang = LANGUAGES[window.__ENV_LANG__ || navigator.language] || LANGUAGES.cn let uniqueInstance = null // 缓存当前打开的alert/confirm/prompt类型的弹窗 let toastInstance = null // 缓存toast的实例 @@ -270,7 +272,7 @@ const UNIQUE_TYPES = ['alert', 'confirm', 'prompt'] function renderBtns(list) { var html = '' list.forEach((t, i) => { - html += `` + html += `` }) return html @@ -313,10 +315,7 @@ export default class Layer { this.props.title = val if (val) { if (this.__TITLE__.firstElementChild) { - this.__TITLE__.insertBefore( - document.createTextNode(val), - this.__TITLE__.firstElementChild - ) + this.__TITLE__.insertBefore(document.createTextNode(val), this.__TITLE__.firstElementChild) } else { this.__TITLE__.textContent = val } @@ -389,9 +388,7 @@ export default class Layer { } } else { this._dragIns = new Drag(this.root.children[1]).by(this.__TITLE__, { - overflow: this.props.hasOwnProperty('overflow') - ? this.props.overflow - : false + overflow: this.props.hasOwnProperty('overflow') ? this.props.overflow : false }) this.removeAttribute('fixed') } @@ -574,6 +571,13 @@ export default class Layer { this.root.children[1].style.cssText += _style } + // 自动聚焦最后一个按钮 + if (this.props.btns.length) { + // 部分浏览器需要执行一下 focus()才能聚焦成功 + this.__CTRL__.lastElementChild.setAttribute('autofocus', '') + setTimeout(_ => this.__CTRL__.lastElementChild.focus(), 10) + } + if (this.props.type === 'toast') { this.timer = setTimeout(() => { toastInstance = null @@ -602,7 +606,6 @@ export default class Layer { case 'title': case 'type': this[name] = val - this.removeAttribute(name) break case 'mask-color': case 'background': @@ -751,7 +754,7 @@ Object.assign(_layer, { } if (!intercept) { - intercept = function (val, done) { + intercept = function(val, done) { if (val) { done() } @@ -788,7 +791,7 @@ Object.assign(_layer, { var ico = type switch (type) { case 'info': - case 'warn': + case 'warning': break case 'error': ico = 'deny'