chore(h5): 1、toast 2、base.css add uni-loading

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();

packages/uni-h5/src/service/api/ui/popup/showToast.ts

+//#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_TYPE_SHOW_TOAST>(
   API_SHOW_TOAST,
   (args, { resolve, reject }) => {
-    initI18nShowToastMsgsOnce()
     createToast(args as ToastProps)
     showType = 'onShowToast'
     resolve()
@@ -78,7 +79,6 @@ export const showLoading = defineAsyncApi<API_TYPE_SHOW_LOADING>(
   API_SHOW_LOADING,
   (args, { resolve, reject }) => {
     extend(args, showLoadingDefaultState)
-    initI18nShowLoadingMsgsOnce()
     createToast(args as ToastProps)
     showType = 'onShowLoading'
     resolve()

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<typeof props>
 
@@ -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({
               <div
                 class="uni-mask"
                 style="background: transparent;"
-                onTouchmove={withModifiers(() => {}, ['prevent'])}
+                onTouchmove={onEventPrevent}
               />
             ) : (
               ''
             )}
-            {!image && !iconClass ? (
+            {!image && !Icon.value ? (
               <div class="uni-sample-toast">
                 <p class="uni-simple-toast__text">{title}</p>
               </div>
             ) : (
               <div class="uni-toast">
                 {image ? (
-                  <img src={image} class="uni-toast__icon" />
+                  <img src={image} class={ToastIconClassName} />
                 ) : (
-                  <i class={iconClass} class="uni-icon_toast" />
+                  Icon.value
                 )}
                 <p class="uni-toast__content">{title}</p>
               </div>
@@ -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' ? (
+      <i class={ToastIconClassName} class="uni-loading"></i>
+    ) : null
   )
 
   return {
-    iconClass,
+    Icon,
   }
 }

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);
+  }
+}