From 6d34a5a9616745805c66cf8745f2d02dfa6e50d0 Mon Sep 17 00:00:00 2001 From: DCloud_LXH <283700113@qq.com> Date: Sun, 25 Apr 2021 15:02:06 +0800 Subject: [PATCH] =?UTF-8?q?chore(h5):=201=E3=80=81toast=202=E3=80=81base.c?= =?UTF-8?q?ss=20add=20uni-loading?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/uni-h5/dist/uni-h5.esm.js | 32 +++++++------- .../src/service/api/ui/popup/showToast.ts | 14 +++---- .../uni-h5/src/service/api/ui/popup/toast.tsx | 42 ++++++++++++------- packages/uni-h5/style/framework/base.css | 26 ++++++++++++ 4 files changed, 79 insertions(+), 35 deletions(-) diff --git a/packages/uni-h5/dist/uni-h5.esm.js b/packages/uni-h5/dist/uni-h5.esm.js index d2cadf851..c49ac8941 100644 --- a/packages/uni-h5/dist/uni-h5.esm.js +++ b/packages/uni-h5/dist/uni-h5.esm.js @@ -13123,13 +13123,16 @@ const props = { type: Boolean } }; +const toastIconClassName = "uni-toast__icon"; var Toast = /* @__PURE__ */ defineComponent({ name: "Toast", props, setup(props2) { + initI18nShowToastMsgsOnce(); + initI18nShowLoadingMsgsOnce(); const { - iconClass - } = useToastState(props2); + Icon + } = useToastIcon(props2); const visible = usePopup(props2, {}); return () => { const { @@ -13146,9 +13149,8 @@ var Toast = /* @__PURE__ */ defineComponent({ }, [mask ? createVNode("div", { class: "uni-mask", style: "background: transparent;", - onTouchmove: withModifiers(() => { - }, ["prevent"]) - }, null, 40, ["onTouchmove"]) : "", !image2 && !iconClass ? createVNode("div", { + onTouchmove: onEventPrevent + }, null, 40, ["onTouchmove"]) : "", !image2 && !Icon.value ? createVNode("div", { class: "uni-sample-toast" }, [createVNode("p", { class: "uni-simple-toast__text" @@ -13156,20 +13158,22 @@ var Toast = /* @__PURE__ */ defineComponent({ class: "uni-toast" }, [image2 ? createVNode("img", { src: image2, - class: "uni-toast__icon" - }, null, 8, ["src"]) : createVNode("i", { - class: [iconClass, "uni-icon_toast"] - }, null, 2), createVNode("p", { + class: toastIconClassName + }, null, 10, ["src"]) : Icon.value, createVNode("p", { class: "uni-toast__content" }, [title])])], 8, ["data-duration"]), [[vShow, visible.value]])] }); }; } }); -function useToastState(props2) { - const iconClass = computed(() => props2.icon === "success" ? "uni-icon-success-no-circle" : props2.icon === "loading" ? "uni-loading" : ""); +function useToastIcon(props2) { + const Icon = computed(() => props2.icon === "success" ? createVNode(createSvgIconVNode(ICON_PATH_SUCCESS_NO_CIRCLE, "#fff", 38), { + class: toastIconClassName + }) : props2.icon === "loading" ? createVNode("i", { + class: [toastIconClassName, "uni-loading"] + }, null, 2) : null); return { - iconClass + Icon }; } let showToastState; @@ -13194,11 +13198,12 @@ function createToast(args) { timeoutId = setTimeout(() => { hidePopup("onHideToast"); }, showToastState.duration); + } else { + timeoutId && clearTimeout(timeoutId); } }); } const showToast = defineAsyncApi(API_SHOW_TOAST, (args, {resolve, reject}) => { - initI18nShowToastMsgsOnce(); createToast(args); showType = "onShowToast"; resolve(); @@ -13210,7 +13215,6 @@ const showLoadingDefaultState = { }; const showLoading = defineAsyncApi(API_SHOW_LOADING, (args, {resolve, reject}) => { extend(args, showLoadingDefaultState); - initI18nShowLoadingMsgsOnce(); createToast(args); showType = "onShowLoading"; resolve(); diff --git a/packages/uni-h5/src/service/api/ui/popup/showToast.ts b/packages/uni-h5/src/service/api/ui/popup/showToast.ts index f89854544..9714f0b6b 100644 --- a/packages/uni-h5/src/service/api/ui/popup/showToast.ts +++ b/packages/uni-h5/src/service/api/ui/popup/showToast.ts @@ -1,3 +1,4 @@ +//#region Functions import { reactive, nextTick, watchEffect } from 'vue' import { extend } from '@vue/shared' import { @@ -13,18 +14,17 @@ import { } from '@dcloudio/uni-api' import Toast, { ToastProps } from './toast' import { ensureRoot, createRootApp } from './utils' -import { - useI18n, - initI18nShowLoadingMsgsOnce, - initI18nShowToastMsgsOnce, -} from '@dcloudio/uni-core' +import { useI18n } from '@dcloudio/uni-core' +//#endregion +//#region Type import type { API_TYPE_SHOW_LOADING, API_TYPE_HIDE_TOAST, API_TYPE_HIDE_LOADING, API_TYPE_SHOW_TOAST, } from '@dcloudio/uni-api' +//#endregion let showToastState: ToastProps let showType: 'onShowToast' | 'onShowLoading' | '' = '' @@ -52,6 +52,8 @@ function createToast(args: ToastProps) { timeoutId = setTimeout(() => { hidePopup('onHideToast') }, showToastState.duration) + } else { + timeoutId && clearTimeout(timeoutId) } }) } @@ -59,7 +61,6 @@ function createToast(args: ToastProps) { export const showToast = defineAsyncApi( API_SHOW_TOAST, (args, { resolve, reject }) => { - initI18nShowToastMsgsOnce() createToast(args as ToastProps) showType = 'onShowToast' resolve() @@ -78,7 +79,6 @@ export const showLoading = defineAsyncApi( API_SHOW_LOADING, (args, { resolve, reject }) => { extend(args, showLoadingDefaultState) - initI18nShowLoadingMsgsOnce() createToast(args as ToastProps) showType = 'onShowLoading' resolve() diff --git a/packages/uni-h5/src/service/api/ui/popup/toast.tsx b/packages/uni-h5/src/service/api/ui/popup/toast.tsx index 8924936c5..cea23d348 100644 --- a/packages/uni-h5/src/service/api/ui/popup/toast.tsx +++ b/packages/uni-h5/src/service/api/ui/popup/toast.tsx @@ -2,12 +2,21 @@ import { Transition, defineComponent, ExtractPropTypes, - withModifiers, computed, + createVNode, } from 'vue' import { SHOW_TOAST_ICON } from '@dcloudio/uni-api' import type { API_TYPE_SHOW_TOAST_ICON } from '@dcloudio/uni-api' import { usePopup } from './utils' +import { + onEventPrevent, + createSvgIconVNode, + ICON_PATH_SUCCESS_NO_CIRCLE, +} from '@dcloudio/uni-core' +import { + initI18nShowToastMsgsOnce, + initI18nShowLoadingMsgsOnce, +} from '@dcloudio/uni-core' const props = { title: { @@ -36,6 +45,7 @@ const props = { type: Boolean, }, } +const ToastIconClassName = 'uni-toast__icon' export type ToastProps = ExtractPropTypes @@ -43,7 +53,9 @@ export default /*#__PURE__*/ defineComponent({ name: 'Toast', props, setup(props) { - const { iconClass } = useToastState(props) + initI18nShowToastMsgsOnce() + initI18nShowLoadingMsgsOnce() + const { Icon } = useToastIcon(props) const visible = usePopup(props, {}) return () => { @@ -55,21 +67,21 @@ export default /*#__PURE__*/ defineComponent({
{}, ['prevent'])} + onTouchmove={onEventPrevent} /> ) : ( '' )} - {!image && !iconClass ? ( + {!image && !Icon.value ? (

{title}

) : (
{image ? ( - + ) : ( - + Icon.value )}

{title}

@@ -81,16 +93,18 @@ export default /*#__PURE__*/ defineComponent({ }, }) -function useToastState(props: ToastProps) { - const iconClass = computed(() => - props.icon === 'success' - ? 'uni-icon-success-no-circle' - : props.icon === 'loading' - ? 'uni-loading' - : '' +function useToastIcon(props: ToastProps) { + const Icon = computed(() => + props.icon === 'success' ? ( + createVNode(createSvgIconVNode(ICON_PATH_SUCCESS_NO_CIRCLE, '#fff', 38), { + class: ToastIconClassName, + }) + ) : props.icon === 'loading' ? ( + + ) : null ) return { - iconClass, + Icon, } } diff --git a/packages/uni-h5/style/framework/base.css b/packages/uni-h5/style/framework/base.css index 0c5d738ed..9278ea51e 100644 --- a/packages/uni-h5/style/framework/base.css +++ b/packages/uni-h5/style/framework/base.css @@ -52,3 +52,29 @@ uni-page-wrapper { .uni-fade-leave-active { opacity: 0; } + +.uni-loading, +uni-button[loading]:before { + background: transparent + url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=') + no-repeat; +} + +.uni-loading { + width: 20px; + height: 20px; + display: inline-block; + vertical-align: middle; + animation: uni-loading 1s steps(12, end) infinite; + background-size: 100%; +} + +@keyframes uni-loading { + 0% { + transform: rotate3d(0, 0, 1, 0deg); + } + + 100% { + transform: rotate3d(0, 0, 1, 360deg); + } +} -- GitLab