From 0a915f8a90e91e772d6848be6b49f4693d5ed5f9 Mon Sep 17 00:00:00 2001 From: suzigang <1039168735@qq.com> Date: Tue, 30 Mar 2021 16:20:40 +0800 Subject: [PATCH] upd: toast --- package.json | 1 + src/packages/toast/demo.vue | 4 ++-- src/packages/toast/doc.md | 18 ++++++++--------- src/packages/toast/index.scss | 38 ++++++++++++++--------------------- src/packages/toast/index.ts | 6 ++---- src/packages/toast/index.vue | 6 +++--- src/sites/mobile/App.vue | 19 +++++++++++++++--- 7 files changed, 48 insertions(+), 44 deletions(-) diff --git a/package.json b/package.json index 72cc7e2ca..efb36ccc4 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "devDependencies": { "@commitlint/cli": "^10.0.0", "@commitlint/config-conventional": "^10.0.0", + "@jd/upload-oss-tools": "^1.1.10", "@types/node": "^14.14.31", "@vitejs/plugin-vue": "^1.2.0", "@vue/compiler-sfc": "^3.0.5", diff --git a/src/packages/toast/demo.vue b/src/packages/toast/demo.vue index a6c631427..1946815c4 100644 --- a/src/packages/toast/demo.vue +++ b/src/packages/toast/demo.vue @@ -42,10 +42,10 @@ export default createDemo({ const { ctx } = getCurrentInstance(); const textToast = msg => { - ctx.$toast.text(msg, { duration: 100000 }); + ctx.$toast.text(msg, { duration: 1000 }); }; const successToast = msg => { - ctx.$toast.success(msg, { duration: 100000 }); + ctx.$toast.success(msg, { duration: 2000 }); }; const errorToast = msg => { ctx.$toast.fail(msg); diff --git a/src/packages/toast/doc.md b/src/packages/toast/doc.md index 28af98b8e..1aa26e3ea 100644 --- a/src/packages/toast/doc.md +++ b/src/packages/toast/doc.md @@ -81,16 +81,16 @@ toast.hide(); | duration | 展示时长（毫秒）
值为 0 时，toast 不会自动消失（loading类型默认为0） | Number | 2000 | | center | 是否展示在页面中部（为false时展示在底部） | Boolean | true | | bottom | 距页面底部的距离（像素），option.center为false时生效 | Number | 30 | -| textAlignCenter | 多行文案是否居中 | Boolean | true | -| bgColor | 背景颜色（透明度） | String | "rgba(46, 46, 46, 0.7)" | -| customClass | 自定义类名 | String | "" | +| text-align-center | 多行文案是否居中 | Boolean | true | +| bg-color | 背景颜色（透明度） | String | "rgba(0, 0, 0, 0.8)" | +| custom-class | 自定义类名 | String | "" | | icon | 自定义图标，**支持图片链接或base64格式** | String | "" | | size | 文案尺寸，**small**/**base**/**large**三选一 | String | "base" | | cover | 是否显示遮罩层，loading类型默认显示 | Boolean | loading类型true/其他类型false | -| coverColor | 遮罩层颜色，默认透明 | String | "rgba(0,0,0,0)" | -| loadingRotate | loading图标是否旋转，仅对loading类型生效 | Boolean | true | -| onClose | 关闭时触发的事件 | function | null | -| closeOnClickOverlay | 是否在点击遮罩层后关闭提示 | Boolean | false | -| toastStyle | 提示框style | object | {} | -| toastClass | 提示框class | String | "" | +| cover-color | 遮罩层颜色，默认透明 | String | "rgba(0,0,0,0)" | +| loading-rotate | loading图标是否旋转，仅对loading类型生效 | Boolean | true | +| on-close | 关闭时触发的事件 | function | null | +| close-on-click-overlay | 是否在点击遮罩层后关闭提示 | Boolean | false | +| toast-style | 提示框style | object | {} | +| toast-class | 提示框class | String | "" | diff --git a/src/packages/toast/index.scss b/src/packages/toast/index.scss index cc30f184e..6dd6bfd2c 100644 --- a/src/packages/toast/index.scss +++ b/src/packages/toast/index.scss @@ -16,60 +16,56 @@ pointer-events: none; z-index: 9999; font-family: $font-family; - &.nut-toast-small { + &-small { .nut-toast-inner { font-size: $font-size-small; } } - &.nut-toast-large { + &-large { .nut-toast-inner { font-size: $font-size-large; } } - &.nut-toast-cover { + &-cover { display: flex; align-items: center; justify-content: center; pointer-events: auto; height: 100%; } - .nut-toast-inner { - // position: relative; + &-inner { display: inline-block; font-size: $font-size-base; min-width: 40%; max-width: 65%; text-align: center; - line-height: 1.5; - padding: 10px 30px; + padding: 24px 30px; word-break: break-all; background: rgba(0, 0, 0, 0); - border-radius: 7px; - color: #fff; + border-radius: 12px; + color: $white; } - .nut-toast-text { + &-text { font-size: 14px; - } - &.nut-toast-has-icon { - .nut-toast-inner { - padding: 22px 15px 15px; + &:empty { + margin-bottom: -8px; } + } + &-has-icon { .nut-toast-icon-wrapper { width: 100%; - height: 50px; display: flex; align-items: center; justify-content: center; - margin-bottom: 18px; + margin-bottom: 8px; } } - &.nut-toast-center { + &-center { top: 50%; transform: translateY(-50%); } - &.nut-loading { + &-loading { .nut-toast-inner { - padding: 25px; display: inline-flex; flex-direction: column; justify-content: center; @@ -78,10 +74,6 @@ .nut-toast-icon-wrapper { animation: rotation 2s linear infinite; } - .nut-toast-text:not(:empty) { - margin-top: 10px; - margin-bottom: -10px; - } } } diff --git a/src/packages/toast/index.ts b/src/packages/toast/index.ts index a2fd1701e..9b8d4cc07 100644 --- a/src/packages/toast/index.ts +++ b/src/packages/toast/index.ts @@ -13,7 +13,7 @@ const defaultOptions = { icon: null, textAlignCenter: true, loadingRotate: true, - bgColor: 'rgba(0, 0, 0, 1)', + bgColor: 'rgba(0, 0, 0, .8)', onClose: null, unmount: null, cover: false, //透明遮罩层 @@ -79,7 +79,6 @@ const mountToast = (opts: any) => { const instance: any = createVNode(ToastConstructor, opts); render(instance, container); document.body.appendChild(container); - console.log(instance.component); return instance.component.ctx; }; @@ -109,8 +108,7 @@ export const Toast = { }, loading(msg: string, opts = {}) { return mountToast({ - icon: - "data:image/svg+xml, %3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(230,230,230)' d='M874.667 533.333h-192c-12.8 0-21.334-8.533-21.334-21.333 0-12.8 8.534-21.333 21.334-21.333h192c12.8 0 21.333 8.533 21.333 21.333 0 12.8-8.533 21.333-21.333 21.333zM648.533 407.467C640 416 627.2 416 618.667 407.467c-8.534-8.534-8.534-21.334 0-29.867L755.2 241.067c8.533-8.534 21.333-8.534 29.867 0 8.533 8.533 8.533 21.333 0 29.866L648.533 407.467zM512 896c-12.8 0-21.333-8.533-21.333-21.333v-192c0-12.8 8.533-21.334 21.333-21.334s21.333 8.534 21.333 21.334v192c0 12.8-8.533 21.333-21.333 21.333zm0-533.333c-12.8 0-21.333-8.534-21.333-21.334v-192c0-12.8 8.533-21.333 21.333-21.333s21.333 8.533 21.333 21.333v192c0 12.8-8.533 21.334-21.333 21.334zM270.933 782.933c-8.533 8.534-21.333 8.534-29.866 0s-8.534-21.333 0-29.866L377.6 616.533c8.533-8.533 21.333-8.533 29.867 0 8.533 8.534 8.533 21.334 0 29.867L270.933 782.933zm104.534-375.466L238.933 270.933c-8.533-8.533-8.533-21.333 0-29.866s21.334-8.534 29.867 0L405.333 377.6c8.534 8.533 8.534 21.333 0 29.867-6.4 6.4-21.333 6.4-29.866 0zM362.667 512c0 12.8-8.534 21.333-21.334 21.333h-192C136.533 533.333 128 524.8 128 512c0-12.8 8.533-21.333 21.333-21.333h192c12.8 0 21.334 8.533 21.334 21.333zm285.866 104.533l136.534 136.534c8.533 8.533 8.533 21.333 0 29.866-8.534 8.534-21.334 8.534-29.867 0L618.667 646.4c-8.534-8.533-8.534-21.333 0-29.867 6.4-6.4 21.333-6.4 29.866 0z'/%3E%3C/svg%3E", + icon: 'loading', ...opts, msg, type: 'loading' diff --git a/src/packages/toast/index.vue b/src/packages/toast/index.vue index 92c750b29..078a4527a 100644 --- a/src/packages/toast/index.vue +++ b/src/packages/toast/index.vue @@ -17,7 +17,7 @@ }" > - + @@ -65,7 +65,7 @@ export default create({ }, bgColor: { type: String, - default: 'rgba(0, 0, 0, 1)' + default: 'rgba(0, 0, 0, .8)' }, onClose: Function, @@ -140,7 +140,7 @@ export default create({ { 'nut-toast-center': props.center }, { 'nut-toast-has-icon': hasIcon.value }, { 'nut-toast-cover': props.cover }, - { 'nut-loading': props.type == 'loading' }, + { 'nut-toast-loading': props.type === 'loading' }, props.customClass, 'nut-toast-' + props.size ]; diff --git a/src/sites/mobile/App.vue b/src/sites/mobile/App.vue index 679adc6fb..0bc4c5ad9 100644 --- a/src/sites/mobile/App.vue +++ b/src/sites/mobile/App.vue @@ -1,10 +1,13 @@ @@ -57,6 +66,10 @@ export default defineComponent({ font-size: 20px; color: rgba(51, 51, 51, 1); box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.07); + .back { + position: absolute; + left: 25px; + } } .demo { -- GitLab