first

2025-10-28 09:25:46 +08:00
commit 9431e325df
1089 changed files with 143917 additions and 0 deletions
@@ -0,0 +1,55 @@
+export default {
+	props: {
+		// 提示内容
+		loadingText: {
+			type: [String, Number],
+			default: ''
+		},
+		// 文字上方用于替换loading动画的图片
+		image: {
+			type: String,
+			default: ''
+		},
+		// 加载动画的模式，circle-圆形，spinner-花朵形，semicircle-半圆形
+		loadingMode: {
+			type: String,
+			default: 'circle'
+		},
+		// 是否加载中
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		// 背景色
+		bgColor: {
+			type: String,
+			default: '#fff'
+		},
+		// 文字颜色
+		color: {
+			type: String,
+			default: '#C8C8C8'
+		},
+		// 文字大小
+		fontSize: {
+			type: [String, Number],
+			default: 16
+		},
+		// 图标大小
+		iconSize: {
+			type: [String, Number],
+			default: 26
+		},
+		// 加载中图标的颜色，只能rgb或者十六进制颜色值
+		loadingColor: {
+			type: String,
+			default: '#C8C8C8'
+		},
+		// 过渡时间
+		duration: {
+			type: [String, Number],
+			default: 300
+		},
+		...uni.$uv?.props?.loadingPage
+	}
+}
@@ -0,0 +1,96 @@
+<template>
+	<view class="uv-loading-page uv-flex-column" v-if="showLoading" :style="[loadingPageStyle]">
+		<image v-if="image!=''" :src="image" class="uv-loading-page__img" mode="widthFit" :style="[{
+			width: $uv.addUnit(iconSize),
+			height: $uv.addUnit(iconSize)
+		}]"></image>
+		<uv-loading-icon v-else :mode="loadingMode" :size="iconSize" :color="loadingColor"></uv-loading-icon>
+		<slot>
+			<text class="uv-loading-page__text" :style="[{
+				fontSize: $uv.addUnit(fontSize),
+				color: color
+			}]">{{ loadingText }}</text>
+		</slot>
+	</view>
+</template>
+<script>
+	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
+	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
+	import props from "./props.js";
+	/**
+	 * loadingPage 加载动画
+	 * @description 警此组件为一个小动画，目前用在uvui的loadmore加载更多和switch开关等组件的正在加载状态场景。
+	 * @tutorial https://www.uvui.cn/components/loading.html
+	 * 
+	 * @property {Boolean}	loading  是否加载中 （默认 false ）
+	 * @property {String | Number}	loadingText		提示内容  (默认 '正在加载' )
+	 * @property {String}  image  文字上方用于替换loading动画的图片
+	 * @property {String}  loadingMode  加载动画的模式，circle-圆形，spinner-花朵形，semicircle-半圆形 （默认 'circle' ）
+	 * @property {String}  bgColor  背景色 （默认 '#ffffff' ）
+	 * @property {String}  color  文字颜色 （默认 '#C8C8C8' ）
+	 * @property {String | Number}	fontSize  文字大小 （默认 19 ）
+	 * @property {String | Number}	iconSize  图标大小 （默认 28 ）
+	 * @property {String}  loadingColor	加载中图标的颜色，只能rgb或者十六进制颜色值 （默认 '#C8C8C8' ）
+	 * @property {String | Number}	duration  关闭加载时的过渡时间，单位ms （默认 300 ）
+	 * 
+	 * @example <uv-loading mode="circle"></uv-loading>
+	 */
+	export default {
+		name: "uv-loading-page",
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				showLoading: false,
+				opacity: 1
+			}
+		},
+		watch: {
+			loading: {
+				immediate: true,
+				handler(newVal) {
+					if (newVal) {
+						this.showLoading = true;
+						this.opacity = 1;
+					} else {
+						this.opacity = 0;
+						this.$nextTick(() => {
+							this.$uv.sleep(this.duration).then(res => {
+								this.showLoading = false;
+							})
+						})
+					}
+				}
+			}
+		},
+		computed: {
+			loadingPageStyle() {
+				const style = {
+					'position': 'fixed',
+					'top': '0',
+					'left': '0',
+					'right': '0',
+					'bottom': '0',
+					'zIndex': '999',
+					'background-color': this.bgColor,
+					'transition-duration': `${this.duration}ms`,
+					'opacity': this.opacity
+				}
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
+			}
+		}
+	}
+</script>
+<style scoped lang="scss">
+	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
+	$uv-loading-icon-margin-bottom: 10px !default;
+	.uv-loading-page {
+		flex: 1;
+		justify-content: center;
+		align-items: center;
+		padding-bottom: 150px;
+		transition-property: opacity;
+		&__text {
+			margin-top: $uv-loading-icon-margin-bottom;
+		}
+	}
+</style>