探索 Vue3 (五) 骨架屏
2023-12-25 19:47:56
骨架屏是页面的一个空白版本,通常会在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容。
目前主流?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>
文章来源:https://blog.csdn.net/weixin_38982591/article/details/135169959
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!