Vue3封装函数式组件

1. 关键函数

use用法：

• 安装 Vue.js 插件。如果插件是一个对象，它必须暴露一个 install 方法。如果它本身是一个函数，它将被视为安装方法。

export default {
  install: (app, options) => {
    // Plugin code goes here
  }
}

• 该安装方法将以应用实例作为第一个参数被调用。传给 use 的其他 options 参数将作为后续参数传入该安装方法。

app.use(toast, {})

• 当在同一个插件上多次调用此方法时，该插件将仅安装一次。

createVNode用法：

import toast from './index.vue'
// 创建虚拟节点(vue组件,组件传参)
const vm = createVNode(toast, {
    message: msg
}) as any

render用法：

const container = document.createElement('div')
render(vm, container)

2. 封装toast组件

├── plugins
    ├── toast
    │   ├── toast.ts
    │   └── toast.vue
    ├── index.ts
    └── modules.ts

toast.vue

<template>
    <Transition name="down">
        <div v-show="isShow" class="toast">
            <div class="toastText">{{ props.message }}</div>
        </div>
    </Transition>
</template>

<script setup lang="ts">
const isShow = ref(false)
interface Props {
    message?: string
    duration: number
}
const props = withDefaults(defineProps<Props>(), {
    message: '',
    duration: 3000
})
const show = () => {
    if (!props.message) return
    isShow.value = true
    setTimeout(() => {
        isShow.value = false
    }, props.duration)
}
// 父组件调用
defineExpose({
    show
})
</script>

<style lang="scss" scoped>
.toast {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.toastText {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 100px;
    height: 40px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    text-align: center;
    line-height: 40px;
}
.down {
    &-enter {
        &-from {
            transform: translate3d(0, -75px, 0);
            opacity: 0;
        }
        &-active {
            transition: all 0.5s;
        }
        &-to {
            transform: none;
            opacity: 1;
        }
    }
}
</style>

toast.ts

import { createVNode, render, App } from 'vue'
import toast from './toast.vue'

const { body } = document
const Toast = (msg: string) => {
    const dom = body.querySelector(`.my-toast-message`)
    // 已存在则先清除该节点
    if (dom) body.removeChild(dom)
    const container = document.createElement('div')
    container.className = `my-toast-message`
    // 创建虚拟节点(vue组件,组件传参)
    // 回调函数跟参数从这里传入
    const vm = createVNode(toast, {
        message: msg
    }) as any
    // 渲染虚拟节点
    render(vm, container)
    document.body.appendChild(container)
    // 获取toast组件实例
    const props = vm.component.exposed
    // 调用方法
    props.show()
}
export default {
    // 组件祖册
    install(app: App) {
        app.config.globalProperties.$toast = Toast
    }
}

modules.ts

export { default as toast } from './toast/toast'
// ...

index.ts

import { App } from 'vue'
import * as modules from './modules'

// 用provide注册全局方法
const provide = (app: App) => {
    const globalPlugin = app.config.globalProperties
    app.provide('globalPlugin', globalPlugin)
}
export default (app: App) => {
    // 注册全局插件
    Object.keys(modules).forEach((key) => {
        app.use((modules as Record<string, any>)[key])
    })
    provide(app)
}

main.ts

import plugins from '@/plugins/index'
// 注册插件
plugins(app)

3. 调用

<template>
    <div></div>
</template>
<script setup lang="ts" name="Home">
const instance = inject('globalPlugin') as Record<string, any>
instance.$toast('弹窗')
</script>

<style lang="scss" scoped></style>