【vue】函数式组件封装

wenking 8/7/2024 vue

用过 element-plus 的同学应该有使用过 ElMessage、MessageBox，等组件，这些组件在使用时我们需要在模板代码中引入，使用组件就想使用函数一样方便；最近写项目时由于没有使用三方框架，做提示功能时浏览器元素并不支持，因此思考自己封装一个类似组件，现在让我们揭示一下函数式组件实现原理。

# 定义组件

此处和我们通常写的Vue组件没有任何区别


<script setup>
  defineProps({
    message: '',
    type: '',
  })

</script>

<template>
  <transition name="fade">
    <div :class="['king-toast', `${type || 'info'}`]">
      {{ message }}
    </div>
  </transition>
</template>

<style scoped>
.king-toast 
  border-radius 20px
  padding 10px 50px

.info
  background-color grey

.danger
  background-color crimson

.fade-enter-active,
.fade-leave-active 
 transition opacity 2s ease;

.fade-enter-from,
.fade-leave-to 
  opacity 0;

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# 函数封装组件

import KingToast from "@/components/common/KingToast.vue";
import {createApp} from "vue";

export const ShowToast = ({message, timeout}) => {
    // 定义一个可挂载元素
    const container = document.createElement("div")
    document.body.appendChild(container)
    // 创建一个新的Vue组件实例
    const toast = createApp(KingToast, {
        message,
    })
    // 将Vue实例挂在到元素上（容器）
    toast.mount(container)

    // 延迟后关闭容器
    setTimeout(() => {
        // 卸载容器
        toast.unmount()
        // 移除挂在元素
        container.remove()
    }, timeout || 1000)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

通常我们自定义的组件要在调用函数时显示，然后通过某种条件后关闭时，大致流程如上面注释所示：

创建一个可以挂载的元素，并将其添加到文档中。
创建一个组件实例，并将组件实例挂载在元素上。
业务代码。
将组件实例从元素上卸载下来。
将挂载元素移除。

# 使用组件

ShowToast({message: "ojbk", timeout: 1000})

【vue】基础【vue】展示组件设计

KingのNote

【vue】函数式组件封装

【vue】函数式组件封装

# 定义组件

# 函数封装组件

# 使用组件