51 lines
838 B
Vue
51 lines
838 B
Vue
<template>
|
|
<view v-if="loading" class="cb-skeleton">
|
|
<slot name="skeleton">
|
|
<view v-for="i in rows" :key="i" class="skeleton-line"></view>
|
|
</slot>
|
|
</view>
|
|
<slot v-else />
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
loading: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
rows: {
|
|
type: Number,
|
|
default: 3
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.cb-skeleton {
|
|
padding: 16rpx;
|
|
}
|
|
|
|
.skeleton-line {
|
|
height: 32rpx;
|
|
background: linear-gradient(
|
|
90deg,
|
|
#f0f0f0 25%,
|
|
#e0e0e0 50%,
|
|
#f0f0f0 75%
|
|
);
|
|
background-size: 200% 100%;
|
|
border-radius: 8rpx;
|
|
margin-bottom: 16rpx;
|
|
animation: loading 1.5s infinite;
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
</style>
|