uview-pro 0.0.14 → 0.0.16

package/components/u-link/u-link.vue

@@ -1,75 +1,75 @@
-<template>
-    <text
-        class="u-link"
-        @tap.stop="openLink"
-        :style="{
-            color: color,
-            fontSize: fontSize + 'rpx',
-            borderBottom: underLine ? `1px solid ${lineColor ? lineColor : color}` : 'none',
-            paddingBottom: underLine ? '0rpx' : '0'
-        }"
-    >
-        <slot></slot>
-    </text>
-</template>
-
-<script setup lang="ts">
-import { $u } from '../..';
-import { LinkProps } from './types';
-
-defineOptions({
-    name: 'u-link'
-});
-
-/**
- * link 超链接
- * @description 该组件为超链接组件，在不同平台有不同表现形式：在APP平台会通过plus环境打开内置浏览器，在小程序中把链接复制到粘贴板，同时提示信息，在H5中通过window.open打开链接。
- * @tutorial https://uview-pro.netlify.app/components/link.html
- * @property {String} color 文字颜色（默认#606266）
- * @property {String Number} font-size 字体大小，单位rpx（默认28）
- * @property {Boolean} under-line 是否显示下划线（默认false）
- * @property {String} href 跳转的链接，要带上http(s)
- * @property {String} line-color 下划线颜色，默认同color参数颜色
- * @property {String} mp-tips 各个小程序平台把链接复制到粘贴板后的提示语（默认“链接已复制，请在浏览器打开”）
- * @example <u-link href="http://www.uviewui.com">蜀道难，难于上青天</u-link>
- */
-const props = defineProps(LinkProps);
-
-/**
- * 打开链接方法
- * 不同平台有不同表现形式
- */
-function openLink() {
-    // #ifdef APP-PLUS
-    if (typeof plus !== 'undefined' && plus.runtime) {
-        plus.runtime.openURL(props.href);
-    }
-    // #endif
-    // #ifdef H5
-    if (typeof window !== 'undefined') {
-        window.open(props.href);
-    }
-    // #endif
-    // #ifdef MP
-    if (typeof uni !== 'undefined' && uni.setClipboardData) {
-        uni.setClipboardData({
-            data: props.href,
-            success: () => {
-                uni.hideToast();
-                if (typeof $u !== 'undefined' && $u.toast && props.mpTips) {
-                    $u.toast(props.mpTips);
-                }
-            }
-        });
-    }
-    // #endif
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-link {
-    line-height: 1;
-}
-</style>
+<template>
+    <text
+        class="u-link"
+        @tap.stop="openLink"
+        :style="{
+            color: color,
+            fontSize: fontSize + 'rpx',
+            borderBottom: underLine ? `1px solid ${lineColor ? lineColor : color}` : 'none',
+            paddingBottom: underLine ? '0rpx' : '0'
+        }"
+    >
+        <slot></slot>
+    </text>
+</template>
+
+<script setup lang="ts">
+import { $u } from '../..';
+import { LinkProps } from './types';
+
+defineOptions({
+    name: 'u-link'
+});
+
+/**
+ * link 超链接
+ * @description 该组件为超链接组件，在不同平台有不同表现形式：在APP平台会通过plus环境打开内置浏览器，在小程序中把链接复制到粘贴板，同时提示信息，在H5中通过window.open打开链接。
+ * @tutorial https://uview-pro.netlify.app/components/link.html
+ * @property {String} color 文字颜色（默认#606266）
+ * @property {String Number} font-size 字体大小，单位rpx（默认28）
+ * @property {Boolean} under-line 是否显示下划线（默认false）
+ * @property {String} href 跳转的链接，要带上http(s)
+ * @property {String} line-color 下划线颜色，默认同color参数颜色
+ * @property {String} mp-tips 各个小程序平台把链接复制到粘贴板后的提示语（默认“链接已复制，请在浏览器打开”）
+ * @example <u-link href="https://uview-pro.netlify.app">蜀道难，难于上青天</u-link>
+ */
+const props = defineProps(LinkProps);
+
+/**
+ * 打开链接方法
+ * 不同平台有不同表现形式
+ */
+function openLink() {
+    // #ifdef APP-PLUS
+    if (typeof plus !== 'undefined' && plus.runtime) {
+        plus.runtime.openURL(props.href);
+    }
+    // #endif
+    // #ifdef H5
+    if (typeof window !== 'undefined') {
+        window.open(props.href);
+    }
+    // #endif
+    // #ifdef MP
+    if (typeof uni !== 'undefined' && uni.setClipboardData) {
+        uni.setClipboardData({
+            data: props.href,
+            success: () => {
+                uni.hideToast();
+                if (typeof $u !== 'undefined' && $u.toast && props.mpTips) {
+                    $u.toast(props.mpTips);
+                }
+            }
+        });
+    }
+    // #endif
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-link {
+    line-height: 1;
+}
+</style>

package/components/u-loading/types.ts

@@ -1,35 +1,35 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-type LoadingMode = 'circle' | 'flower';
-
-/**
- * u-loading 组件 props 类型定义
- * @description 加载动画，支持多种模式
- */
-export const LoadingProps = {
-    /** 动画的类型 */
-    mode: {
-        type: String as PropType<LoadingMode>,
-        default: 'circle'
-    },
-    /** 动画的颜色 */
-    color: {
-        type: String,
-        default: '#c7c7c7'
-    },
-    /** 加载图标的大小，单位rpx */
-    size: {
-        type: [String, Number] as PropType<string | number>,
-        default: '34'
-    },
-    /** 是否显示动画 */
-    show: {
-        type: Boolean,
-        default: true
-    }
-};
-
-/**
- * u-loading 组件 props 类型
- */
-export type LoadingProps = ExtractPropTypes<typeof LoadingProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+
+type LoadingMode = 'circle' | 'flower';
+
+/**
+ * u-loading 组件 props 类型定义
+ * @description 加载动画，支持多种模式
+ */
+export const LoadingProps = {
+    /** 动画的类型 */
+    mode: {
+        type: String as PropType<LoadingMode>,
+        default: 'circle'
+    },
+    /** 动画的颜色 */
+    color: {
+        type: String,
+        default: '#c7c7c7'
+    },
+    /** 加载图标的大小，单位rpx */
+    size: {
+        type: [String, Number] as PropType<string | number>,
+        default: '34'
+    },
+    /** 是否显示动画 */
+    show: {
+        type: Boolean,
+        default: true
+    }
+};
+
+/**
+ * u-loading 组件 props 类型
+ */
+export type LoadingProps = ExtractPropTypes<typeof LoadingProps>;

package/components/u-loading/u-loading.vue

@@ -1,90 +1,90 @@
-<template>
-    <view v-if="show" class="u-loading" :class="mode === 'circle' ? 'u-loading-circle' : 'u-loading-flower'" :style="[cricleStyle]"> </view>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { LoadingProps } from './types';
-
-defineOptions({
-    name: 'u-loading'
-});
-
-/**
- * loading 加载动画
- * @description 此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
- * @tutorial https://uview-pro.netlify.app/components/loading.html
- * @property {String} mode 模式选择，见官网说明（默认circle）
- * @property {String} color 动画活动区域的颜色，只对 mode = flower 模式有效（默认#c7c7c7）
- * @property {String|Number} size 加载图标的大小，单位rpx（默认34）
- * @property {Boolean} show 是否显示动画（默认true）
- * @example <u-loading mode="circle"></u-loading>
- */
-const props = defineProps(LoadingProps);
-
-/**
- * 加载中圆圈动画的样式
- * @returns {Record<string, any>}
- */
-const cricleStyle = computed(() => {
-    let style: Record<string, any> = {};
-    style.width = props.size + 'rpx';
-    style.height = props.size + 'rpx';
-    // 只对圆圈模式生效
-    if (props.mode === 'circle') {
-        style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${props.color ? props.color : '#c7c7c7'}`;
-    }
-    return style;
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-loading-circle {
-    /* #ifndef APP-NVUE */
-    display: inline-flex;
-    /* #endif */
-    vertical-align: middle;
-    width: 28rpx;
-    height: 28rpx;
-    background: 0 0;
-    border-radius: 50%;
-    border: 2px solid;
-    border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
-    animation: u-circle 1s linear infinite;
-}
-
-.u-loading-flower {
-    width: 20px;
-    height: 20px;
-    display: inline-block;
-    vertical-align: middle;
-    -webkit-animation: u-flower 1s steps(12) infinite;
-    animation: u-flower 1s steps(12) infinite;
-    background: transparent
-        url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=)
-        no-repeat;
-    background-size: 100%;
-}
-
-@keyframes u-flower {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    to {
-        -webkit-transform: rotate(1turn);
-        transform: rotate(1turn);
-    }
-}
-
-@keyframes u-circle {
-    0% {
-        transform: rotate(0);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-</style>
+<template>
+    <view v-if="show" class="u-loading" :class="mode === 'circle' ? 'u-loading-circle' : 'u-loading-flower'" :style="[cricleStyle]"> </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { LoadingProps } from './types';
+
+defineOptions({
+    name: 'u-loading'
+});
+
+/**
+ * loading 加载动画
+ * @description 此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
+ * @tutorial https://uview-pro.netlify.app/components/loading.html
+ * @property {String} mode 模式选择，见官网说明（默认circle）
+ * @property {String} color 动画活动区域的颜色，只对 mode = flower 模式有效（默认#c7c7c7）
+ * @property {String|Number} size 加载图标的大小，单位rpx（默认34）
+ * @property {Boolean} show 是否显示动画（默认true）
+ * @example <u-loading mode="circle"></u-loading>
+ */
+const props = defineProps(LoadingProps);
+
+/**
+ * 加载中圆圈动画的样式
+ * @returns {Record<string, any>}
+ */
+const cricleStyle = computed(() => {
+    let style: Record<string, any> = {};
+    style.width = props.size + 'rpx';
+    style.height = props.size + 'rpx';
+    // 只对圆圈模式生效
+    if (props.mode === 'circle') {
+        style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${props.color ? props.color : '#c7c7c7'}`;
+    }
+    return style;
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-loading-circle {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    vertical-align: middle;
+    width: 28rpx;
+    height: 28rpx;
+    background: 0 0;
+    border-radius: 50%;
+    border: 2px solid;
+    border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
+    animation: u-circle 1s linear infinite;
+}
+
+.u-loading-flower {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    vertical-align: middle;
+    -webkit-animation: u-flower 1s steps(12) infinite;
+    animation: u-flower 1s steps(12) infinite;
+    background: transparent
+        url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=)
+        no-repeat;
+    background-size: 100%;
+}
+
+@keyframes u-flower {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(1turn);
+        transform: rotate(1turn);
+    }
+}
+
+@keyframes u-circle {
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>

package/components/u-loading-popup/types.ts

@@ -0,0 +1,19 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-loading-popup 组件 props 类型定义
+ */
+export const LoadingPopupProps = {
+  /** 是否显示加载弹窗 */
+  modelValue: { type: Boolean, default: false },
+  /** 加载提示文本 */
+  text: { type: String, default: '' },
+  /** 方向，可选 'vertical' | 'horizontal' */
+  direction: { type: String as PropType<'vertical' | 'horizontal'>, default: 'vertical' },
+  /** 自动关闭的持续时间(ms)，0为不自动关闭 */
+  duration: { type: Number, default: 0 },
+  /** 允许点击遮罩关闭的最短时间(ms) */
+  cancelTime: { type: Number, default: 10000 }
+};
+
+export type LoadingPopupProps = ExtractPropTypes<typeof LoadingPopupProps>;

package/components/u-loading-popup/u-loading-popup.vue

@@ -0,0 +1,208 @@
+<template>
+    <view @touchmove.stop.prevent>
+        <view v-if="popupValue" class="u-loading-init" :class="[direction]">
+            <view class="u-loading-center"></view>
+            <view v-if="currentText" class="u-loading-tips">{{ currentText }}</view>
+        </view>
+        <view class="u-loading-mask" :class="[popupValue ? 'u-mask-show' : '']" @click="onMaskClick"></view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onUnmounted, computed } from 'vue';
+import { LoadingPopupProps } from './types';
+
+// 组件props类型
+const props = defineProps(LoadingPopupProps);
+const emit = defineEmits(['update:modelValue', 'cancel']);
+
+// 定时器
+let timer: ReturnType<typeof setTimeout> | null = null;
+// 记录弹窗显示的时间戳
+const now = ref(0);
+// 是否显示关闭按钮（超时后）
+const closeShow = ref(false);
+// 当前显示的text，优先级：loading参数 > props.text
+const currentText = ref(props.text);
+
+const popupValue = computed({
+    get: () => props.modelValue,
+    set: (val: boolean) => emit('update:modelValue', val)
+});
+
+// 监听props.text变化，自动同步到currentText（仅在未手动传入text时）
+watch(
+    () => props.text,
+    val => {
+        if (!currentText.value || currentText.value === '' || currentText.value === undefined) {
+            currentText.value = val;
+        }
+    }
+);
+
+// 启动超时关闭按钮计时
+function startTime() {
+    setTimeout(() => {
+        closeShow.value = true;
+    }, props.cancelTime);
+}
+
+// loading主逻辑，支持传入text，优先显示传入的text
+function show(text?: string) {
+    console.log('show');
+    if (typeof text === 'string' && text !== '') {
+        currentText.value = text;
+    } else {
+        currentText.value = props.text;
+    }
+    startTime();
+    clearTimer();
+    now.value = Date.now();
+    if (props.duration) {
+        timer = setTimeout(() => {
+            hide();
+        }, props.duration);
+    }
+    emit('update:modelValue', true);
+}
+
+// 清理定时器
+function clearTimer() {
+    if (timer) {
+        clearTimeout(timer);
+        timer = null;
+    }
+}
+
+// 完成加载，关闭弹窗
+function hide() {
+    console.log('hide');
+    closeShow.value = false;
+    clearTimer();
+    // 关闭时重置currentText为props.text，避免下次未传text时显示旧内容
+    currentText.value = props.text;
+    emit('update:modelValue', false);
+}
+
+// 遮罩点击事件
+function onMaskClick() {
+    if (Date.now() - now.value > props.cancelTime) {
+        emit('cancel');
+        hide();
+    }
+}
+
+onUnmounted(() => {
+    clearTimer();
+});
+
+defineExpose({
+    show,
+    hide
+});
+</script>
+
+<style lang="scss">
+.u-loading-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0);
+    z-index: 9999996;
+    transition: all 0.3s ease-in-out;
+    opacity: 0;
+    visibility: hidden;
+}
+
+.u-mask-show {
+    visibility: visible;
+    opacity: 1;
+}
+
+.u-loading-init {
+    position: relative;
+    min-width: 200rpx;
+    min-height: 200rpx;
+    max-width: 500rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    font-size: 30rpx;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.7);
+    border-radius: 7px;
+    .u-icon-close {
+        position: absolute;
+        top: 4rpx;
+        right: 2rpx;
+        color: #ffffff;
+        opacity: 0.8;
+    }
+    &.horizontal {
+        flex-direction: row;
+        align-items: center;
+        justify-content: left;
+        width: 600rpx;
+        max-width: 600rpx;
+        min-height: 150rpx;
+        padding-left: 40rpx;
+        .u-loading-center {
+            width: 70rpx;
+            height: 70rpx;
+        }
+        .u-loading-tips {
+            margin-top: 0;
+            margin-left: 20rpx;
+            font-size: 32rpx;
+        }
+    }
+}
+
+.u-loading-center {
+    width: 60rpx;
+    height: 60rpx;
+    border: 3px solid #fff;
+    border-color: #8f8d8e #8f8d8e #8f8d8e #ffffff;
+    border-radius: 50%;
+    margin: 0 6px;
+    display: inline-block;
+    vertical-align: middle;
+    /* clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 60%); */
+    animation: rotate 1s linear infinite;
+}
+
+.u-loading-tips {
+    text-align: center;
+    padding: 0 20rpx;
+    box-sizing: border-box;
+    margin-top: 36rpx;
+}
+
+@-webkit-keyframes rotate {
+    from {
+        transform: rotatez(0deg);
+    }
+
+    to {
+        transform: rotatez(360deg);
+    }
+}
+
+@keyframes rotate {
+    from {
+        transform: rotatez(0deg);
+    }
+
+    to {
+        transform: rotatez(360deg);
+    }
+}
+</style>