体验函数式组件简单实现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

五、组件使用

<script setup>
import Loading from '@/components/Loading/index.js'  

const stop = Loading('Loading...')
  
// 模拟http请求
setTimeout(() => {
    stop()
}, 2000)
</script>

六、总结

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