体验函数式组件简单实现Loading 加载（造轮子篇）

一、前言

最近想着优化一下网站，在文章列表页加一个Loading操作，于是就想到了函数式组件，于是本章就来和大家一起简单探讨下实现思路。

二、Loading设计

这里我想实现的效果是：当我们刷新页面的时候，前端请求接口，同时页面Loading加载中，当请求成功后，Loading消失，就是这么简单。

三、实现步骤

下面我们一步步来实现这个组件，最终我们可以通过调用函数来展示我们的组件。

3.1 绘制Loading模板

1. 创建/src/components/Loading/index.vue

   <template>
       <div class="loading">
           Loading加載中...
       </div>
   </template>
   

3.2. 写一写loading的样式

1. 给Loading加一点css样式

   .loading {
       position: fixed;
       display: flex;
       justify-content: center;
       align-items: center;  
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba($color: #000000, $alpha: .6);
       color: #fff;
       font-size: 2em;
       user-select: none;
   }
   

   

3.3 组件的逻辑

1. 这里边还需要有一个逻辑，组件的显示和隐藏，动态title。

   <script setup>
   import { ref } from 'vue'
   
   const props = defineProps({
       title: {
           type: String,
           default: () => 'Loading加载中...'
       }
   })
   
   const isLoading = ref(false)
   
   const show = () => {
       isLoading.value = true
   }
   
   const hide = () => {
       isLoading.value = false
   }
   
   
   defineExpose({
       show,
       hide
   })
   </script>
   

四、封装函数式组件

1. 创建/src/components/Loading/index.js

   import { createVNode, render } from 'vue'
   import LoadingComp from '@/components/Loading'
   
   const Loading = (title) => {
       const vDom = createVNode(LoadingComp, { title })
       render(vDom, document.body) 
       
       vDom.component.exposed.show()  
   
       return vDom.component.exposed.hide
   }  
   
   export default Loading
   

五、组件使用

1. 直接在我们的vue文件中进行使用

   <script setup>
   import Loading from '@/components/Loading/index.js'  
   
   const stop = Loading('Loading...')
     
   // 模拟http请求
   setTimeout(() => {
       stop()
   }, 2000)
   </script>
   

六、总结

好了，今天体验了一下createVNode和render，其实上边的Loading方法我们可以全局注册，这样就不需要去单独导入我们的js文件了，案例写的不好，只是给大家提供一个思路，多学无害。