封装一个消息组件

组件功能分析：

固定顶部显示，有三种类型：成功success，错误error，警告warning。

显示消息提示时需要动画从上滑入且淡出。

组件使用的方式不够便利，封装成工具函数方式。

解析:

          h 等价于 createVNode

          createVNode: 作用：创建虚拟DOM  (一个js对象, 可以模拟真实dom结构)

      1.  import { h, onMounted, render } from 'vue'

         参数1：创建的虚拟DOM的节点类型  比如  div h1  a  img

         参数2：虚拟DOM拥有的属性，是一个对象

         参数3：虚拟DOM节点的内容

     创建虚拟dom 相当于 <h1 title="标题" id="box" class="aa">我是标题</h1>

     2.  const vNode = h('h1', { title: '标题', id: 'box', className: 'aa' }, '我是标题')

    3. onMounted(() => {

     const div = document.getElementById('div')

     if(div){

     console.log(div, vNode)

    // render 把虚拟dom渲染到容器中(真实的dom)

    render(vNode, div)

    // render(messsage组件, dom元素)

  }

})

使用流程: