探索 Vue3 (五) 骨架屏

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。

目前主流 UI库 都有骨架屏，如 Element-UI、Antd

可以看到使用起来非常简单，只需要一行代码即可

// element
<el-skeleton />// antd
<a-skeleton />

安装

npm i -S @x-ui-vue3/skeleton

 main.js 文件中挂载

import { createApp } from 'vue'
import Skeleton from '@x-ui-vue3/skeleton'
import App from './App.vue'createApp(App).use(Skeleton).mount('#app')

 demo

<script setup>
import { ref } from 'vue'
const loading = ref(false)
</script><template><label for="loading">点击切换</label><input v-model="loading" id="loading" type="checkbox" /><br /><br /><div v-skeleton="loading"><span v-skeleton-item>超文本标记语言是一种用于创建网页的标准标记语言。</span><br /><br /><span v-skeleton-item>www.runoob.com</span><br /><br /><span v-skeleton-item>Good good study, day day up!</span></div>
</template>

官网地址：@x-ui-vue3/skeleton - npm