基于vue3 + ts 封装一个自定义的message组件

基于vue3 + ts 封装一个自定义的message组件

今天尝试封装一个message弹框组件 废话不多说直接上代码
Message.vue

index.ts

import { h,render } from 'vue'
import Message from "./Message.vue";

export  const onMessage = (timeout: number = 3000) => {
    
    const close = ()=> {
        render(null, document.body)
    }
    const renderDom = h(Message, {
        timeout,
        close
    })
    render(renderDom, document.body)
}

代码中使用

1.导入组件
2.使用组件
const onMsg = () => {
  onMessage()
}

组件封装的比较简陋只是提供一种思路 有需要的同学可以借鉴思路 封装自己的组件