vue3骨架屏使用方法

《vue3骨架屏使用方法》

在Vue3项目中，为了提升页面加载时的用户体验，使用骨架屏是一个很好的解决方案。它能在真实内容加载完成前，显示一个占位的、简化版的布局结构，给用户一种页面正在快速响应的感觉。

一、安装依赖

如果使用的是vue-cli创建的项目，可以借助vue-skeleton-loader这个库来实现骨架屏效果。在项目根目录下通过命令行工具执行安装操作：npm install vue-skeleton-loader --save。

二、基础使用方式

1. 单个组件内使用

在需要展示骨架屏的组件中，先引入该库：
```javascript

import { Skeleton } from 'vue-skeleton-loader'
export default {
components: {
Skeleton
},
data() {
return {
loading: true // 假设初始为加载状态
}
},
mounted() {
// 模拟数据请求完成后隐藏骨架屏
setTimeout(() => {
this.loading = false
}, 2000)
}
}

```

这里定义了一个loading属性来控制骨架屏和正常内容的切换。当loading为true时显示骨架屏，否则显示正常内容。在mounted生命周期钩子中模拟了数据请求完成后的操作，将loading设置为false。

2. 全局配置使用

可以在main.js中进行全局注册，方便在多个组件中使用：
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import { Skeleton } from 'vue-skeleton-loader'

const app = createApp(App)
app.component('Skeleton', Skeleton)
app.mount('#app')
``这样就可以在任何组件中直接使用`标签而无需单独引入。

三、自定义样式

除了使用库自带的样式，还可以根据项目需求自定义样式。可以通过传入样式对象或者类名的方式来进行定制。例如：
html <skeleton v-if="loading" :width="375" :height="607" animate class="custom-style"> <rect x="20" y="20" width="335" height="20" radius="4"/> <rect x="20" y="60" width="335" height="20" radius="4"/> <rect x="20" y="100" width="335" height="20" radius="4"/> </skeleton>
然后在<style>标签中定义.custom - style类的样式，如背景颜色、边框等，以满足不同场景下的视觉需求。

也可以不使用现成的库，自己通过CSS和Vue3的条件渲染等特性来构建简单的骨架屏，不过使用库的方式更加便捷且功能丰富。