init

components/i-skeleton/i-skeleton.vue

@@ -0,0 +1,136 @@
+<template>
+	<view class="i-skeleton" :style="{width: 'calc(100% - '+ size +')', background: bgColor}">
+		<view class="body">
+			<slot></slot>
+		</view>
+		<view class="body" :style="{width: width, height: height}" v-if="rows">
+			<view class="item_row">
+				<view class="icon" v-if="icon"></view>
+				<view class="colunm" v-if="type==='column'" :style="{width: icon ? '75%' : '100%'}">
+					<view class="rows"
+						:style="{width: typeof rowsW === 'string' ? rowsW : rowsW[index], height: typeof rowsH === 'string' ? rowsH : rowsH[index] }"
+						v-for="(item,index) in rows" :key="index"></view>
+				</view>
+				<view class="row" v-else-if="type === 'row'">
+					<view class="rows"
+						:style="{width: typeof rowsW === 'string' ? rowsW : rowsW[index], height: typeof rowsH === 'string' ? rowsH : rowsH[index] }"
+						v-for="(item,index) in rows" :key="index"></view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { defineProps } from 'vue';
+	const props = defineProps({
+		type: {
+			type: String,
+			default: 'column'
+		},
+		size: {
+			type: String,
+			default: '64rpx'
+		},
+		rows: {
+			type: Number,
+			default: 0
+		},
+		bgColor: {
+			type: String,
+			default: '#FFFFFF'
+		},
+		width: {
+			type: String,
+			default: '100%'
+		},
+		height: {
+			type: String,
+			default: '300rpx'
+		},
+		icon: {
+			type: Boolean,
+			default: true
+		},
+		rowsW: {
+			type: [String, Array],
+			default: '300rpx'
+		},
+		rowsH: {
+			type: [String, Array],
+			default: '20rpx'
+		}
+	})
+</script>
+
+<style lang="scss" scoped>
+	.i-skeleton {
+		margin: 0 auto;
+		border-radius: 12rpx;
+		.body {
+			border-radius: 12rpx;
+			display: flex;
+			flex-direction: column;
+
+			.item_row {
+				height: 100%;
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+			    padding: 0 24rpx;
+				.icon {
+					width: 120rpx;
+					height: 120rpx;
+					background-color: #E6E6F0;
+					border-radius: 8rpx;
+					margin-right: 24rpx;
+					animation-duration: 2s;
+					animation-fill-mode: forwards;
+					animation-iteration-count: infinite;
+					animation-name: placeHolderShimmer;
+					animation-timing-function: ease-out;
+					background: linear-gradient(to right, #E6E6F0 8%, #dddddd 18%, #E6E6F0 33%);
+					background-size: 800rpx 104rpx;
+					
+				}
+				.colunm {
+					display: flex;
+					flex-direction: column;
+				}
+				.row {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+					align-items: center;
+					width: 100%;
+					.rows {
+						margin-right: 8rpx;
+					}
+				}
+				.rows {
+					border-radius: 4rpx;
+					margin-bottom: 8rpx;
+					animation-duration: 2s;
+					animation-fill-mode: forwards;
+					animation-iteration-count: infinite;
+					animation-name: placeHolderShimmer;
+					animation-timing-function: ease-out;
+					background: linear-gradient(to right, #E6E6F0 8%, #dddddd 18%, #E6E6F0 33%);
+					background-size: 800rpx 100rpx;
+								
+				}
+			}
+
+		}
+
+		@keyframes placeHolderShimmer {
+			0% {
+				background-position: -400rpx 0
+			}
+
+			100% {
+				background-position: 400rpx 0
+			}
+		}
+	}
+</style>