ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【Vue】自定义指令-v-loading指令的封装 [打印本页]
作者: 络腮胡菲菲    时间: 2024-6-21 13:13
标题: 【Vue】自定义指令-v-loading指令的封装
场景
实际开发过程中，发送请求需要时间，在请求的数据未返来时，页面会处于空白状态 => 用户体验不好
需求
封装一个 v-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. }
复制代码
核心思绪：
代码示例
  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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4