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

在这里插入图片描述

一、前言

最近想着优化一下网站，在文章列表页加一个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>