创建组件
Skeleton.vue
<template><div class="skeleton"><div class="skeleton-item" v-for="n in count" :key="n"></div></div>
</template><script>
export default {props: {count: {type: Number,default: 3}}
};
</script><style scoped>
.skeleton-item {height: 20px;margin-bottom: 10px;background-color: #e0e0e0;border-radius: 4px;animation: pulse 1.5s infinite ease-in-out;
}@keyframes pulse {0% {background-color: #e0e0e0;}50% {background-color: #f0f0f0;}100% {background-color: #e0e0e0;}
}
</style>
页面中使用
<template><div><skeleton v-if="isLoading" :count="5" /><div v-else><!-- 页面内容 --></div></div>
</template><script>
import Skeleton from '~/components/Skeleton.vue';export default {components: {Skeleton},data() {return {isLoading: true};},mounted() {this.fetchData();},methods: {async fetchData() {// 模拟数据加载setTimeout(() => {this.isLoading = false;}, 2000);}}
};
</script>
