探索 Vue3 (五) 骨架屏

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

目前主流 UI库 都有骨架屏,如 Element-UIAntd

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

复制代码
// 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

相关推荐
LuckySusu7 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在7 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net
LuckySusu7 小时前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript
文心快码BaiduComate7 小时前
文心快码入选2025服贸会“数智影响力”先锋案例
前端·后端·程序员
云枫晖7 小时前
手写Promise-构造函数
前端·javascript
文心快码BaiduComate7 小时前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
王王碎冰冰7 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
naice8 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼8 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin8 小时前
TypeScript设计模式:门面模式
前端·后端·typescript