【Vue】自定义指令-v-loading指令的封装

场景

实际开发过程中,发送请求需要时间,在请求的数据未回来时,页面会处于空白状态 => 用户体验不好

需求

封装一个 v-loading 指令,实现加载中的效果

分析

  1. 本质 loading效果就是一个蒙层,盖在了盒子上

  2. 数据请求中,开启loading状态,添加蒙层

  3. 数据请求完毕,关闭loading状态,移除蒙层

实现

1.准备一个 loading类,通过伪元素定位,设置宽高,实现蒙层

使用伪元素添加的好处就是添加和移除会方便一些,如果准备dom元素,则添加和移除需要把这个节点添加和移除。但如果是伪元素,只需要添加和移除类就行了。

2.开启关闭 loading状态(添加移除蒙层),本质只需要添加移除类即可

3.结合自定义指令的语法进行封装复用

.loading:before {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url("./loading.gif") no-repeat center;
}

核心思路:

  1. 准备类名 loading,通过伪元素提供遮罩层

  2. 添加或移除类名,实现loading蒙层的添加移除

  3. 利用指令语法,封装 v-loading 通用指令

    inserted 钩子中,binding.value 判断指令的值,设置默认状态

    update 钩子中,binding.value 判断指令的值,更新类名状态


代码示例

<template><div class="main"><div class="box" v-loading="isLoading"><ul><li v-for="item in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div><!-- 第二个盒子 --><div class="box2" v-loading="isLoading2"></div></div>
</template><script>
// 安装axios =>  yarn add axios
import axios from 'axios'// 接口地址:http://hmajax.itheima.net/api/news
// 请求方式:get
export default {data () {return {list: [],isLoading: true,isLoading2: true}},async created () {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')setTimeout(() => {// 2. 更新到 list 中,用于页面渲染 v-forthis.list = res.data.datathis.isLoading = false}, 2000)},directives: {loading: {inserted (el, binding) {// 应该需要根据isLoading的初始值关联起来// el.classList.add('loading')binding.value ? el.classList.add('loading') : el.classList.remove('loading')},update (el, binding) {binding.value ? el.classList.add('loading') : el.classList.remove('loading')}}}
}
</script><style>
.loading:before {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url('./loading.gif') no-repeat center;
}.box2 {width: 400px;height: 400px;border: 2px solid #000;position: relative;
}.box {width: 800px;min-height: 500px;border: 3px solid orange;border-radius: 5px;position: relative;
}
.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;
}
.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;
}
.news .left .title {font-size: 20px;
}
.news .left .info {color: #999999;
}
.news .left .info span {margin-right: 20px;
}
.news .right {width: 160px;height: 120px;
}
.news .right img {width: 100%;height: 100%;object-fit: cover;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/22983.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从零开始精通Onvif之设备发现

设备发现的意义 在复杂的网络环境中&#xff0c;如何快速而准确地识别网络上的Onvif设备&#xff0c;对于摄像头厂商、系统集成商、开发人员乃至最终用户来说&#xff0c;都显得至关重要。 首先&#xff0c;设备发现有效简化了集成的复杂度。在没有统一标准之前&#xff0c;每个…

2004NOIP普及组真题 2. 花生采摘

线上OJ&#xff1a; 【04NOIP普及组】花生采摘 核心思想&#xff1a; 1、本题为贪心即可。 2、因为本题严格限制了顺序&#xff0c;所以先把每个节点的花生数量按降序排序。然后逐一判断下一个花生是否需要去采摘即可 3、每一次采摘完&#xff0c;记录耗时 t 以及采集的花…

力扣第417题测试程序

题目描述&#xff1a; 有一个 m n 的矩形岛屿&#xff0c;与 太平洋 和 大西洋 相邻。 “太平洋” 处于大陆的左边界和上边界&#xff0c;而 “大西洋” 处于大陆的右边界和下边界。 这个岛被分割成一个由若干方形单元格组成的网格。给定一个 m x n 的整数矩阵 heights &#…

基于web的垃圾分类回收系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;用户管理&#xff0c;公告管理&#xff0c;运输管理&#xff0c;基础数据管理 用户账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;运输管理&#xff0c;公告…

pyqt QlineEdit内部增加按钮方法

pyqt QlineEdit内部增加按钮方法 def addButton(self,lineEdit):btn QtWidgets.QPushButton("")icon1 QtGui.QIcon()icon1.addPixmap(QtGui.QPixmap(":/image/images/th.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)btn.setIcon(icon1)btn.setStyleShe…

全光谱led灯的危害有哪些?曝光低质量全光谱led灯产生的四大风险

眼睛是人类获取信息最重要的感官器官之一&#xff0c;而近视则会导致视力模糊&#xff0c;进而影响学习效果和生活品质。因此&#xff0c;如何保护眼睛&#xff0c;尤其是在学习和使用电子设备时&#xff0c;成为了一个迫切需要解决的问题。然而在护眼领域上&#xff0c;护眼台…

【DevOps】网络安全进阶之路:打造更安全、更可靠的网站

目录 一、网站面临的主要安全威胁 1、SQL注入攻击 2、跨站脚本攻击(XSS) 3、跨站请求伪造(CSRF) 4、文件上传漏洞 5、不安全的直接对象引用 6、安全配置错误 7、使用含有已知漏洞的组件 二、网站安全防护措施 1、输入验证与过滤 2、使用参数化查询 3、数据输出编码…

SCAU 数据结构 实验六 排序算法

![[Pasted image 20240 8638 直接插入排序 Description 用函数实现直接插入排序&#xff0c;并输出每趟排序的结果. 输入格式 第一行&#xff1a;键盘输入待排序关键的个数n 第二行&#xff1a;输入n个待排序关键字&#xff0c;用空格分隔数据 输出格式 每行输出一趟排序…

掌握Java设计模式的23种武器(全):深入解析与实战示例

目录 一、创建型模式 1. 单例模式 (Singleton Pattern) 2. 工厂模式 (Factory Pattern) 3. 抽象工厂模式 (Abstract Factory Pattern) 4. 建造者模式 (Builder Pattern) 5. 原型模式 (Prototype Pattern) 二、结构型模式 6. 适配器模式 (Adapter Pattern) 7. 桥接模式…

通信的本质是什么

通信的本质是信息的传递和交换。在通信过程中&#xff0c;信息从一个主体&#xff08;发送方&#xff09;传递到另一个主体&#xff08;接收方&#xff09;&#xff0c;目的是使接收方理解或使用发送方传递的信息。无论使用什么样的媒介或技术&#xff0c;通信的核心都是在不同…

十三、resultMap解析

分为两部分&#xff1a;解析和使用 解析 1.解析XML的时候单独解析所有的resultMap标签&#xff0c;封装成ResultMap对象存入configuration中 2.解析XML中的SQL语句&#xff0c;封装MappedStatement对象&#xff0c;这里会根据SQL的返回类型是resultMap还是resultType做处理。如…

C语言 | Leetcode C语言题解之第133题克隆图

题目&#xff1a; 题解&#xff1a; struct Node** visited; int* state; //数组存放结点状态 0&#xff1a;结点未创建 1&#xff1a;仅创建结点 2&#xff1a;结点已创建并已填入所有内容void bfs(struct Node* s) {if (visited[s->val] && state[s->val] 2…

【嵌入式系统实践】实验三EXTI按钮外部中断控制LED灯参考代码

此内容不属于实验内容&#xff0c;因自己手头有一STM32F103&#xff0c;故验证性的进行代码实验&#xff0c;按照老师课堂ppt进行了一下复现。 通过按钮控制LED灯的亮灭(状态取反)。 main.c代码&#xff1a; #include "STM32F10X.h" #include "stdio.h"…

Open3D Guided滤波(Python版本)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 Guided Filter原本主要用于2D图像的降噪等处理,但经过适当的修改后,它可以有效地应用于3D点云的降噪。这种方法能够保留点云中的细节信息,并且对边缘和曲面进行保护。 其具体计算过程如下所述: 1.局部线性假设:…

Python Lambda函数的应用实例教程

在Python编程中&#xff0c;lambda函数是一种简洁且强大的工具&#xff0c;用于创建小型匿名函数。它们在需要快速定义简单函数时特别有用。本文将详细介绍lambda函数的语法及其多种应用实例&#xff0c;帮助读者更好地理解和使用lambda函数。 一、lambda函数的基本概念 1.1 什…

c++(内存分配,构造,析构)

#include <iostream>using namespace std; class Per { private:string name;int age;double *height;double *weigh; public://无参构造Per(){cout << "Per::无参构造" << endl;}//有参构造Per(string name,int age,double height,double weigh):…

Nginx 的 stream 模块,配置转发redis和mysql

Nginx 的 stream 模块确实可以配置多个 upstream 块&#xff0c;用于定义多个后端服务器组。然而&#xff0c;需要注意的是&#xff0c;每个 upstream 块通常用于一种特定类型的服务&#xff0c;例如定义一组TCP服务器&#xff0c;可以是Redis服务器、MySQL服务器或其他任何TCP…

【TB作品】 51单片机8x8点阵显示滚动汉字仿真

功能 题目5基于51单片机LED8x8点阵显示 流水灯 直接滚动显示HELLO 直接滚动显示老师好 代码 void main( void ) {/** 移位后&#xff0c;右边的是第一个595&#xff0c;接收0X02&#xff0c;显示出0X02* 移位后&#xff0c;左边的是第2个595&#xff0c;接收0Xfe&#xff0c…

创建常规DLL的动态链接库

本文仅供学习交流&#xff0c;严禁用于商业用途&#xff0c;如本文涉及侵权请及时联系本人将于及时删除 【例9.3】创建一个MFC 常规DLL的动态链接库Areadll&#xff0c;在该动态链接库中添加一个导出类CArea&#xff0c;通过该类获取正方形和圆的面积。 (1) 使用“MFC动态链接…

HttpClient Overview(翻译)

HttpClient Overview **原文链接&#xff1a;HttpClient Overview The Hyper-Text Transfer Protocol(HTTP) is perhaps the most significant protocol used on the Internet today.Web services,network-enabled appliances and the growth on of network computing contin…