看板

2026-03-25 14:54:15 +08:00
commit ab4646b43a
827 changed files with 123812 additions and 0 deletions
@@ -0,0 +1,37 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+type LoadingMode = 'circle' | 'flower';
+
+/**
+ * u-loading 组件 props 类型定义
+ * @description 加载动画，支持多种模式
+ */
+export const LoadingProps = {
+    ...baseProps,
+    /** 动画的类型 */
+    mode: {
+        type: String as PropType<LoadingMode>,
+        default: 'circle'
+    },
+    /** 动画的颜色 */
+    color: {
+        type: String,
+        default: 'var(--u-light-color)'
+    },
+    /** 加载图标的大小，单位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>;
@@ -0,0 +1,106 @@
+<template>
+    <view
+        v-if="show"
+        class="u-loading"
+        :class="[mode === 'circle' ? 'u-loading-circle' : 'u-loading-flower', customClass]"
+        :style="$u.toStyle(cricleStyle, customStyle)"
+    >
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-loading',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { LoadingProps } from './types';
+import { $u } from '../../';
+
+/**
+ * loading 加载动画
+ * @description 此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
+ * @tutorial https://uviewpro.cn/zh/components/loading.html
+ * @property {String} mode 模式选择，见官网说明（默认circle）
+ * @property {String} color 动画活动区域的颜色，只对 mode = flower 模式有效（默认var(--u-light-color)）
+ * @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 = `var(--u-divider-color) var(--u-divider-color) var(--u-divider-color) ${props.color ? props.color : 'var(--u-light-color)'}`;
+    }
+    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: var(--u-divider-color) var(--u-divider-color) var(--u-divider-color) var(--u-tips-color);
+    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>