74 lines
1.3 KiB
Vue
74 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class="skeleton animated">
|
||
|
|
<div class="skeleton-row" v-for="(item, index) in rowList" :style="item.style || {}" :key="index">
|
||
|
|
<div class="skeleton-row-item" v-for="(colItem, colIndex) in item.colItems"
|
||
|
|
:class="[colItem.childRowItems ? 'no-height' : '']" :key="colIndex" :style="colItem.style">
|
||
|
|
<template v-if="colItem.childRowItems">
|
||
|
|
<div class="skeleton-row-item" v-for="(childRowItem, childRowIndex) in colItem.childRowItems"
|
||
|
|
:key="childRowIndex" :style="childRowItem.style || {}"></div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'Skeleton',
|
||
|
|
props: {
|
||
|
|
rowList: {
|
||
|
|
type: Array,
|
||
|
|
default: () => []
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.skeleton {
|
||
|
|
width: 100%;
|
||
|
|
--color: #F6F6F6;
|
||
|
|
|
||
|
|
&.animated {
|
||
|
|
animation: blink 1.2s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.skeleton-row {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
align-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.skeleton-row-item {
|
||
|
|
height: 26px;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
display: inline-block;
|
||
|
|
|
||
|
|
&:not(.no-height) {
|
||
|
|
background: var(--color);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.no-height {
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes blink {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
opacity: 0.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|