vue3封装侧导航文字骨架效果组件
作者:新时代农民工Top 时间:2024-04-27 16:10:03
vue3 项目封装侧导航文字骨架效果组件-全局封装,供大家参考,具体内容如下
目的
当显示页面的时候,有些数据是需要从后台加载,网络不好的时候可能需要等待,那就可以做一个骨架层闪动动画,增加用户体验
大致步骤
- 需要一个组件,做占位使用。这个占位组件有个专业术语:骨架屏组件。
·暴露一些属性:高,宽,背景,是否有闪动画。
- 这是一个公用组件,需要全局注册,将来这样的组件建议再vue插件中定义。
- 使用组件完成左侧分类骨架效果。
落地代码
一、封装组件
<template>
<div class="skeleton" :style="{width,height}" :class="{shan:animated}">
<!-- 1 盒子-->
<div class="block" :style="{backgroundColor:bg}"></div>
<!-- 2 闪效果 xtx-skeleton 伪元素 --->
</div>
</template>
<script>
export default {
name: 'Skeleton',
// 使用的时候需要动态设置 高度,宽度,背景颜色,是否闪下
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">
.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>
二、封装插件
// 扩展vue原有的功能:全局组件,自定义指令,挂载原型方法,注意:没有全局过滤器。
// 这就是插件
// vue2.0插件写法要素:导出一个对象,有install函数,默认传入了Vue构造函数,Vue基础之上扩展
// vue3.0插件写法要素:导出一个对象,有install函数,默认传入了app应用实例,app基础之上扩展
import Skeleton from './skeleton.vue'
export default {
install (app) {
// 在app上进行扩展,app提供 component directive 函数
// 如果要挂载原型 app.config.globalProperties 方式
app.component(Skeleton.name, Skeleton)
}
}
三、在入口文件 main.js 中全局注册
import { createApp } from 'vue'
import App from './App.vue'
import MyUI from './components/library'
// 插件的使用,在main.js使用app.use(插件)
createApp(App).use(store).use(router).use(MyUI).mount('#app')
四、在项目组件中使用组件
在使用组件的时候,与想要骨架效果的地方进行互斥 v-if 与 v-else
封装组件的时候,在内部通过自定义属性 props 接收四个参数 width、height、bg、animated,在使用组建的时候根据场景需求传入相应的值即可
代码如下
<span v-else>
<Skeleton width="60px" height="18px" style="margin-right:5px" bg="rgba(255,255,255,0.2)" :animated="true" />
<Skeleton width="50px" height="18px" bg="rgba(255,255,255,0.2)" :animated="true" />
</span>
效果
来源:https://blog.csdn.net/web00_11/article/details/120273342
标签:vue3,侧导航,文字骨架
0
投稿
猜你喜欢
限制文本框只能输入数字和小数点
2009-05-29 18:19:00
PHP中判断变量为空的几种方法分享
2024-06-05 09:35:25
详解go语言json的使用技巧
2023-09-12 10:27:48
记一次Oracle数据恢复过程
2024-01-14 03:38:57
Python matplotlib的spines模块实例详解
2021-10-11 06:37:58
JavaScript 数组的 uniq 方法
2007-12-07 18:28:00
python文件操作seek()偏移量,读取指正到指定位置操作
2023-07-22 10:29:14
使用Python实现简单的服务器功能
2021-06-29 09:25:31
Jquery对数组的操作技巧整理
2024-04-22 22:32:52
vue中自定义指令(directive)的基本使用方法
2024-05-28 15:46:32
python实现QQ邮箱/163邮箱的邮件发送
2022-12-12 14:07:15
Python基础常用内建函数图文示例解析
2022-05-04 04:54:24
python实操案例练习(八)
2021-12-17 05:51:45
Python中if __name__ == '__main__'作用解析
2021-04-14 09:02:42
Pandas分组聚合之groupby()、agg()方法的使用教程
2021-07-07 00:29:55
Pycharm debug调试时带参数过程解析
2023-02-27 06:21:00
Python实现的检测网站挂马程序
2023-11-21 16:39:38
如何将python代码生成API接口
2022-10-27 14:37:39
Mysql中批量替换某个字段的部分数据(推荐)
2024-01-14 19:56:04
将数据集制作成VOC数据集格式的实例
2023-05-16 06:00:15