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

news2025/1/22 21:58:36

在这里插入图片描述

一、前言

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

二、Loading设计

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

三、实现步骤

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

3.1 绘制Loading模板

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

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

3.2. 写一写loading的样式

给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 组件的逻辑

这里边还需要有一个逻辑，组件的显示和隐藏，动态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>

四、封装函数式组件

创建/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

五、组件使用

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

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

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