小程序初始提交

cool-unix/uni_modules/cool-ui/components/cl-skeleton/cl-skeleton.uvue

@@ -0,0 +1,141 @@
+<template>
+	<view
+		class="cl-skeleton"
+		:class="[
+			{
+				'is-loading': loading,
+				'is-dark': isDark
+			},
+			`cl-skeleton--${props.type}`,
+			`${loading ? `${pt.loading?.className}` : ''}`,
+			pt.className
+		]"
+		ref="skeletonRef"
+	>
+		<template v-if="loading">
+			<cl-icon
+				name="image-line"
+				:pt="{
+					className: '!text-surface-400'
+				}"
+				:size="40"
+				v-if="type == 'image'"
+			></cl-icon>
+		</template>
+
+		<template v-else>
+			<slot></slot>
+		</template>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch, type PropType } from "vue";
+import type { PassThroughProps } from "../../types";
+import { AnimationEngine, createAnimation, isDark, parsePt } from "@/cool";
+
+defineOptions({
+	name: "cl-skeleton"
+});
+
+const props = defineProps({
+	pt: {
+		type: Object,
+		default: () => ({})
+	},
+	loading: {
+		type: Boolean,
+		default: true
+	},
+	type: {
+		type: String as PropType<"text" | "image" | "circle" | "button">,
+		default: "text"
+	}
+});
+
+type PassThrough = {
+	className?: string;
+	loading?: PassThroughProps;
+};
+
+const pt = computed(() => parsePt<PassThrough>(props.pt));
+
+// 组件引用
+const skeletonRef = ref<UniElement | null>(null);
+
+// 动画实例
+let animation: AnimationEngine | null = null;
+
+// 开始动画
+function start() {
+	if (!props.loading) return;
+
+	animation = createAnimation(skeletonRef.value, {
+		duration: 2000,
+		loop: -1,
+		alternate: true
+	})
+		.opacity("0.3", "1")
+		.play();
+}
+
+// 停止动画
+function stop() {
+	if (animation != null) {
+		animation!.stop();
+		animation!.reset();
+	}
+}
+
+onMounted(() => {
+	watch(
+		computed(() => props.loading),
+		(val: boolean) => {
+			if (val) {
+				start();
+			} else {
+				stop();
+			}
+		},
+		{
+			immediate: true
+		}
+	);
+});
+</script>
+
+<style lang="scss" scoped>
+.cl-skeleton {
+	&.is-loading {
+		@apply bg-surface-100 rounded-md;
+
+		&.is-dark {
+			@apply bg-surface-600;
+		}
+
+		&.cl-skeleton--text {
+			height: 40rpx;
+			width: 300rpx;
+		}
+
+		&.cl-skeleton--image {
+			@apply flex flex-row items-center justify-center;
+			width: 120rpx;
+			height: 120rpx;
+			border-radius: 16rpx;
+		}
+
+		&.cl-skeleton--circle {
+			@apply rounded-full;
+			width: 120rpx;
+			height: 120rpx;
+		}
+
+		&.cl-skeleton--button {
+			@apply rounded-lg;
+			height: 66rpx;
+			width: 150rpx;
+		}
+	}
+}
+</style>

cool-unix/uni_modules/cool-ui/components/cl-skeleton/props.ts

@@ -0,0 +1,13 @@
+import type { PassThroughProps } from "../../types";
+
+export type ClSkeletonPassThrough = {
+	className?: string;
+	loading?: PassThroughProps;
+};
+
+export type ClSkeletonProps = {
+	className?: string;
+	pt?: ClSkeletonPassThrough;
+	loading?: boolean;
+	type?: "text" | "image" | "circle" | "button";
+};