vue3手动封装骨架屏组件
骨架屏1.封装组件2.封装插件:插件定义 src/componets/library/index.js使用插件src/main.js3.最后使用组件完成左侧分类骨架效果: src/views/home/components/home-cate.vue5.效果展示1.封装组件<template><div class="xtx-skeleton" :style="{width,hei
·
骨架屏
1.封装组件
<template>
<div class="xtx-skeleton" :style="{width,height}" :class="{shan:animated}">
<!-- 1 盒子-->
<div class="block" :style="{backgroundColor:bg}"></div>
<!-- 2 闪效果 xtx-skeleton 伪元素 --->
</div>
</template>
<script>
export default {
name: 'XtxSkeleton',
// 使用的时候需要动态设置 高度,宽度,背景颜色,是否闪下
props: {
bg: {
type: String,
default: '#efefef'
},
width: {
type: String,
default: '100px'
},
height: {
type: String,
default: '100px'
},
animated: {
type: Boolean,
default: false
}
}
}
</script>
<style scoped lang="less">
.xtx-skeleton {
display: inline-block;
position: relative;
overflow: hidden;
vertical-align: middle;
.block {
width: 100%;
height: 100%;
border-radius: 2px;
}
}
.shan {
&::after {
content: "";
position: absolute;
animation: shan 1.5s ease 0s infinite;
top: 0;
width: 50%;
height: 100%;
background: linear-gradient(
to left,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-45deg);
}
}
@keyframes shan {
0% {
left: -100%;
}
100% {
left: 120%;
}
}
</style>
2.封装插件:插件定义 src/componets/library/index.js 使用插件 src/main.js
// 扩展vue原有的功能:全局组件,自定义指令,挂载原型方法,注意:没有全局过滤器。
// 这就是插件
// vue2.0插件写法要素:导出一个对象,有install函数,默认传入了Vue构造函数,Vue基础之上扩展
// vue3.0插件写法要素:导出一个对象,有install函数,默认传入了app应用实例,app基础之上扩展
import XtxSkeleton from './xtx-skeleton.vue'
export default {
install (app) {
// 在app上进行扩展,app提供 component directive 函数
// 如果要挂载原型 app.config.globalProperties 方式
app.component(XtxSkeleton.name, XtxSkeleton)
}
}
main.js中使用
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './mock'
+import XtxUI from './components/library'
import 'normalize.css'
import '@/assets/styles/common.less'
+// 插件的使用,在main.js使用app.use(插件)
+createApp(App).use(store).use(router).use(XtxUI).mount('#app')
总结:准备基础组件;通过Vue插件的方式扩展全局组件;入口文件导入插件并配置插件
3.最后使用组件完成左侧分类骨架效果: src/views/home/components/home-cate.vue
<ul class="menu">
<li :class="{active:categoryId===item.id}" v-for="item in list" :key="item.id" @mouseenter="categoryId=item.id">
<RouterLink to="/">{{item.name}}</RouterLink>
<template v-if="item.children">
<RouterLink to="/" v-for="sub in item.children" :key="sub.id">{{sub.name}}</RouterLink>
</template>
+ <span v-else>
+ <XtxSkeleton width="60px" height="18px" style="margin-right:5px" bg="rgba(255,255,255,0.2)" />
+ <XtxSkeleton width="50px" height="18px" bg="rgba(255,255,255,0.2)" />
+ </span>
</li>
</ul>
引入样式
.xtx-skeleton {
animation: fade 1s linear infinite alternate;
}
@keyframes fade {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
- 封装骨架屏单元格组件
- 配置Vue插件并且配置全局组件
- 入口文件导入并配置UI组件库这个插件
- 分类列表中使用骨架屏组件进行占位
4.效果展示
更多推荐
已为社区贡献3条内容
所有评论(0)