合肥智能建站模板,自考网站建设与管理,电话销售外呼软件,部门将网站建设的需求骨架屏是页面的一个空白版本#xff0c;通常会在页面完全渲染之前#xff0c;通过一些灰色的区块大致勾勒出轮廓#xff0c;待数据加载完成后#xff0c;再替换成真实的内容。
目前主流 UI库 都有骨架屏#xff0c;如 Element-UI、Antd
可以看到使用起来非常简单#x…骨架屏是页面的一个空白版本通常会在页面完全渲染之前通过一些灰色的区块大致勾勒出轮廓待数据加载完成后再替换成真实的内容。
目前主流 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.vuecreateApp(App).use(Skeleton).mount(#app) demo
script setup
import { ref } from vue
const loading ref(false)
/scripttemplatelabel forloading点击切换/labelinput v-modelloading idloading typecheckbox /br /br /div v-skeletonloadingspan v-skeleton-item超文本标记语言是一种用于创建网页的标准标记语言。/spanbr /br /span v-skeleton-itemwww.runoob.com/spanbr /br /span v-skeleton-itemGood good study, day day up!/span/div
/template
官网地址x-ui-vue3/skeleton - npm
