vue3封装Notification组件的完整步骤记录

|-- packages
    |-- notification
        |-- index.js # 组件的入口
        |-- src
            |-- Notification.vue # 模板
            |-- notification.ts

import { h, render } from "vue"
import NotificationVue from "./Notification.vue"

let container = document.createElement('div')
let vm = h(NotificationVue)
render(vm, container)

document.body.appendChild(container.firstElementChild)

render(null, container)

// Notification.vue
<template>
  <div class="notification">
    Notification
    <button @click="onClose">x</button>
  </div>
</template>

<script setup lang="ts">
interface Props {
  onClose?: () => void
}

defineProps<Props>()
</script>

// notification.ts
import { h, render } from "vue"
import NotificationVue from "./Notification.vue"
const notification = () => {
  let container = document.createElement('div')
  let vm = h(NotificationVue, {onClose: close})
  render(vm, container)
  document.body.appendChild(container.firstElementChild)

  // 手动关闭
  function close() {
    render(null, container)
  }
}
export default notification

// App.vue
<script setup lang="ts">
import {
  BNotification
} from "../packages"

BNotification()
</script>