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

场景
实际开发过程中，发送请求需要时间，在请求的数据未返来时，页面会处于空白状态 => 用户体验不好
需求
封装一个 v-loading 指令，实现加载中的效果
分析

• 本质 loading效果就是一个蒙层，盖在了盒子上
  
• 数据请求中，开启loading状态，添加蒙层
  
• 数据请求完毕，关闭loading状态，移除蒙层
  

实现
1.准备一个 loading类，通过伪元素定位，设置宽高，实现蒙层
   利用伪元素添加的好处就是添加和移除会方便一些，如果准备dom元素，则添加和移除需要把这个节点添加和移除。但如果是伪元素，只需要添加和移除类就行了。
  2.开启关闭 loading状态（添加移除蒙层），本质只需要添加移除类即可
3.结合自定义指令的语法进行封装复用

1. .loading:before {
2.   content: "";
3.   position: absolute;
4.   left: 0;
5.   top: 0;
6.   width: 100%;
7.   height: 100%;
8.   background: #fff url("./loading.gif") no-repeat center;
9. }

复制代码

核心思绪：

• 准备类名 loading，通过伪元素提供遮罩层
  
• 添加或移除类名，实现loading蒙层的添加移除
  
• 利用指令语法，封装 v-loading 通用指令
  inserted 钩子中，binding.value 判断指令的值，设置默认状态
  update 钩子中，binding.value 判断指令的值，更新类名状态
  

---

代码示例

1. <template>
2.   <div class="main">
3.     <div class="box" v-loading="isLoading">
4.       <ul>
5.         <li v-for="item in list" :key="item.id" class="news">
6.           <div class="left">
7.             <div class="title">{{ item.title }}</div>
8.             <div class="info">
9.               <span>{{ item.source }}</span>
10.               <span>{{ item.time }}</span>
11.             </div>
12.           </div>
14.           <div class="right">
15.             <img :src="item.img" alt="">
16.           </div>
17.         </li>
18.       </ul>
19.     </div>
20.     <!-- 第二个盒子 -->
21.     <div class="box2" v-loading="isLoading2"></div>
22.   </div>
23. </template>
25. <script>
26. // 安装axios =>  yarn add axios
27. import axios from 'axios'
29. // 接口地址：http://hmajax.itheima.net/api/news
30. // 请求方式：get
31. export default {
32.   data () {
33.     return {
34.       list: [],
35.       isLoading: true,
36.       isLoading2: true
37.     }
38.   },
39.   async created () {
40.     // 1. 发送请求获取数据
41.     const res = await axios.get('http://hmajax.itheima.net/api/news')
42.    
43.     setTimeout(() => {
44.       // 2. 更新到 list 中，用于页面渲染 v-for
45.       this.list = res.data.data
46.       this.isLoading = false
47.     }, 2000)
48.   },
49.   directives: {
50.     loading: {
51.       inserted (el, binding) {
52.         // 应该需要根据isLoading的初始值关联起来
53.         // el.classList.add('loading')
54.         binding.value ? el.classList.add('loading') : el.classList.remove('loading')
55.       },
56.       update (el, binding) {
57.         binding.value ? el.classList.add('loading') : el.classList.remove('loading')
58.       }
59.     }
60.   }
61. }
62. </script>
64. <style>
65. .loading:before {
66.   content: '';
67.   position: absolute;
68.   left: 0;
69.   top: 0;
70.   width: 100%;
71.   height: 100%;
72.   background: #fff url('./loading.gif') no-repeat center;
73. }
75. .box2 {
76.   width: 400px;
77.   height: 400px;
78.   border: 2px solid #000;
79.   position: relative;
80. }
84. .box {
85.   width: 800px;
86.   min-height: 500px;
87.   border: 3px solid orange;
88.   border-radius: 5px;
89.   position: relative;
90. }
91. .news {
92.   display: flex;
93.   height: 120px;
94.   width: 600px;
95.   margin: 0 auto;
96.   padding: 20px 0;
97.   cursor: pointer;
98. }
99. .news .left {
100.   flex: 1;
101.   display: flex;
102.   flex-direction: column;
103.   justify-content: space-between;
104.   padding-right: 10px;
105. }
106. .news .left .title {
107.   font-size: 20px;
108. }
109. .news .left .info {
110.   color: #999999;
111. }
112. .news .left .info span {
113.   margin-right: 20px;
114. }
115. .news .right {
116.   width: 160px;
117.   height: 120px;
118. }
119. .news .right img {
120.   width: 100%;
121.   height: 100%;
122.   object-fit: cover;
123. }
124. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。