uview-pro 0.0.15 → 0.0.17

package/changelog.md

@@ -1,16 +1,29 @@
+## 0.0.17（2025-09-02）
+
+### ♻️ Code Refactoring | 代码重构
+
+-   瀑布流组件示例代码重构为 Vue3 ([93949ad](https://github.com/anyup/uView-Pro/commit/93949ad8ae2a36c6130f87340c222ab9ec69d21f))
+
+### ✨ Features | 新功能
+
+-   新增组件 u-loading-popup，一个可以配置的加载提示弹窗 ([6245df9](https://github.com/anyup/uView-Pro/commit/6245df951034b06225ab36d3f18cae8e7ab4b329))
+-   新增 Loading 加载弹窗组件的示例页面 ([1bce868](https://github.com/anyup/uView-Pro/commit/1bce86810863012c5a73104ca0a85ebacb4aa92a))
+
+### 🐛 Bug Fixes | Bug 修复
+
+-   修复瀑布流组件 u-waterfll，暴露 celar/remove/modify 方法 ([240e023](https://github.com/anyup/uView-Pro/commit/240e0238af092d4c6bde86d0db9e49636b806d6f))
+
 ## 0.0.15（2025-08-30）
 
 ### ✨ Features | 新功能
 
 -   优化 u-image 组件 slot 使用体验，兼容头条小程序 ([a6ca54f](https://github.com/anyup/uView-Pro/commit/a6ca54fce06b20b7a6938d0bef9342954b787641))
 
-### 🐛 Bug Fixes | Bug 修复
+### ♻️ Bug Fixes | Bug 修复
 
 -   优化 label 的声明错误问题 ([314c394](https://github.com/anyup/uView-Pro/commit/314c3940145c657b12f16d005af7d271f4ae74e3))
 -   优化头条小程序 form 表单校验的兼容性问题 ([3912fd6](https://github.com/anyup/uView-Pro/commit/3912fd6ade3a1d612f6f5e86ddc0336376ee5618))
 
-### 🐛 Bug Fixes | Bug 修复
-
 ## 0.0.14（2025-08-28）
 
 ### 🐛 Bug Fixes | Bug 修复

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

@@ -0,0 +1,26 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+type LoadingMode = 'circle' | 'flower';
+
+/**
+ * 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 },
+    /** 动画的类型 */
+    mode: { type: String as PropType<LoadingMode>, default: 'circle' },
+    /** 动画的颜色 */
+    color: { type: String, default: '#c7c7c7' },
+    /** 加载图标的大小，单位rpx */
+    size: { type: [String, Number] as PropType<string | number>, default: '48' }
+};
+
+export type LoadingPopupProps = ExtractPropTypes<typeof LoadingPopupProps>;

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

@@ -0,0 +1,239 @@
+<template>
+    <view @touchmove.stop.prevent>
+        <view v-if="popupValue" class="u-loading-init" :class="[direction]">
+            <u-loading :mode="mode" :color="color" :size="size" />
+            <view v-if="currentText" class="u-loading-tips">
+                {{ currentText }}
+            </view>
+        </view>
+        <view class="u-loading-mask" :class="[popupValue ? 'u-mask-show' : '']" @click="onMaskClick" />
+    </view>
+</template>
+<script lang="ts" setup>
+import { computed, onUnmounted, ref, watch } from 'vue';
+import { LoadingPopupProps } from './types';
+
+// 组件props类型
+const props = defineProps(LoadingPopupProps);
+const emit = defineEmits(['update:modelValue', 'cancel']);
+
+// 自动关闭的持续时间定时器
+let durationTimer: ReturnType<typeof setTimeout> | null = null;
+// 关闭按钮倒计时定时器
+let cancelTimer: ReturnType<typeof setTimeout> | null = null;
+// 记录弹窗显示的时间戳
+const now = ref(0);
+// 点击遮罩层是否可关闭（超时后）
+const canClose = ref(false);
+// 当前显示的text，优先级：loading参数 > props.text
+const currentText = ref(props.text);
+
+const popupValue = computed({
+    get: () => props.modelValue,
+    set: (val: boolean) => emit('update:modelValue', val)
+});
+
+watch(
+    () => popupValue.value,
+    val => {
+        if (val) {
+            doOpen(currentText.value);
+        } else {
+            doClose();
+        }
+    }
+);
+
+// 响应 props 变更，自动刷新当前 text
+watch(
+    () => props.text,
+    val => {
+        currentText.value = val;
+    }
+);
+
+// 响应 cancelTime/duration 变化，重启定时器
+watch(
+    () => [props.cancelTime, props.duration],
+    () => {
+        if (popupValue.value) {
+            clearDurationTimer();
+            startCancelTime();
+            startDurationTime();
+        }
+    }
+);
+
+/**
+ * 启动超时关闭按钮计时
+ */
+function startCancelTime() {
+    clearCancelTimer();
+    canClose.value = false;
+    if (props.cancelTime > 0) {
+        cancelTimer = setTimeout(() => {
+            canClose.value = true;
+        }, props.cancelTime);
+    }
+}
+
+/**
+ * 启动持续时间计时
+ */
+function startDurationTime() {
+    clearDurationTimer();
+    if (props.duration) {
+        durationTimer = setTimeout(() => {
+            close();
+        }, props.duration);
+    }
+}
+
+/**
+ * 内部显示逻辑，初始化所有状态
+ */
+function doOpen(text?: string) {
+    canClose.value = false;
+    clearDurationTimer();
+    clearCancelTimer();
+    now.value = Date.now();
+    if (typeof text === 'string' && text !== '') {
+        currentText.value = text;
+    } else {
+        currentText.value = props.text;
+    }
+    startCancelTime();
+    startDurationTime();
+}
+
+/**
+ * 内部关闭逻辑，重置所有状态
+ */
+function doClose() {
+    canClose.value = false;
+    currentText.value = props.text;
+    clearDurationTimer();
+    clearCancelTimer();
+}
+
+/**
+ * 显示弹窗
+ * @param text 可选，优先显示的文案
+ */
+function open(text?: string) {
+    currentText.value = text || props.text;
+    popupValue.value = true;
+}
+
+/**
+ * 隐藏弹窗
+ */
+function close() {
+    popupValue.value = false;
+}
+
+// 清理定时器
+function clearDurationTimer() {
+    if (durationTimer) {
+        clearTimeout(durationTimer);
+        durationTimer = null;
+    }
+}
+function clearCancelTimer() {
+    if (cancelTimer) {
+        clearTimeout(cancelTimer);
+        cancelTimer = null;
+    }
+}
+
+// 遮罩点击事件
+function onMaskClick() {
+    // 只有显示关闭按钮时才允许关闭
+    if (canClose.value) {
+        emit('cancel');
+        close();
+    }
+}
+
+onUnmounted(() => {
+    clearDurationTimer();
+    clearCancelTimer();
+});
+
+defineExpose({
+    open,
+    close
+});
+</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;
+    padding: 15rpx 0;
+    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-tips {
+            margin-top: 0;
+            margin-left: 20rpx;
+            font-size: 32rpx;
+        }
+    }
+}
+
+.u-loading-tips {
+    text-align: center;
+    padding: 0 20rpx;
+    box-sizing: border-box;
+    margin-top: 36rpx;
+}
+</style>

package/components/u-waterfall/u-waterfall.vue

@@ -146,6 +146,11 @@ function modify(id: string | number, key: string, value: any) {
         emit('update:modelValue', data);
     }
 }
+defineExpose({
+    clear,
+    remove,
+    modify
+});
 </script>
 
 <style lang="scss" scoped>

package/package.json

@@ -2,7 +2,7 @@
     "id": "uview-pro",
     "name": "uview-pro",
     "displayName": "【Vue3重构版】uView Pro｜基于Vue3+TS全面重构的70+精选UI组件库",
-    "version": "0.0.15",
+    "version": "0.0.17",
     "description": "uView Pro，是全面支持Vue3的uni-app生态框架，70+精选组件已使用TypeScript重构，已全面支持uni-app Vue3.0",
     "main": "index.ts",
     "module": "index.ts",

package/types/components.d.ts

@@ -46,6 +46,7 @@ declare module 'vue' {
         uLink: typeof import('../components/u-link/u-link.vue')['default'];
         uLoadMore: typeof import('../components/u-loadmore/u-loadmore.vue')['default'];
         uLoading: typeof import('../components/u-loading/u-loading.vue')['default'];
+        uLoadingPopup: typeof import('../components/u-loading-popup/u-loading-popup.vue')['default'];
         uMask: typeof import('../components/u-mask/u-mask.vue')['default'];
         uMessageInput: typeof import('../components/u-message-input/u-message-input.vue')['default'];
         uModal: typeof import('../components/u-modal/u-modal.vue')['default'];