消息提示组件以工具函数方式封装

组件功能分析：

1. 消息提示类型大致分为三种，成功、失败、警告
2. 显示组件时带有渐入的动画效果
3. 一般的导入方式不够灵活，故用工具函数的方式进行封装 大致的封装步骤如下：

• 定义好消息提示组件，如下

组件的样式与显示的文本内容由传入的props属性type和text决定，渐入动画效果用vue自带的transition标签实现。

• 封装成vue实例函数使用
  1.支持函数导入使用
  2.vue3.0提供app.config.globalProperties挂载实例使用 src/components/library/Message.js

导入的Message是未解析的，只是vue的单文件组件语法，使用createVNode函数将导入的组件编译为虚拟节点，额外准备好一个dom容器，通过render函数将其渲染显示。最后的定时程序决定的是消息提示组件多久消失。

src/components/library/index.js

• vue3.0实现全局挂载的方式

export default {
  install (app) {
    // app.component(XtxSkeleton.name, XtxSkeleton)
    // app.component(XtxCarousel.name, XtxCarousel)
    // app.component(XtxMore.name, XtxMore)
    // app.component(XtxBread.name, XtxBread)
    // app.component(XtxBreadItem.name, XtxBreadItem)
    importFn.keys().forEach(path => {
      const component = importFn(path).default
      app.component(component.name, component)
    })
    defineDirective(app)
    // 如果需要挂载圆形 app.confog.globalProperties
    app.config.globalProperties.$message = Message
  }
}

app.config.globalProperties.$message = Message
!注意区分与vue2.0protoType全局挂载的不同

• 组件中使用

1. 函数导入使用方式

import Message from '@/components/library/Message

   // 登录校验
    const login = () => {
      myForm.value.validate().then(valid => {
        if (valid) alert('登陆成功')
      })
      Message({ type: 'error', text: '11111' })
    }

2. 挂载实例使用方式
   getCurrentInstance方法获取组件实例

import { getCurrentInstance } from 'vue'

   // 获取当前组件实例
    const { proxy } = getCurrentInstance()
   // 登录校验
    const login = () => {
      myForm.value.validate().then(valid => {
        if (valid) alert('登陆成功')
      })
      // Message({ type: 'error', text: '11111' })
      // 实例调用
      proxy.$message({ type: 'error', text: '11111' })
    }

getCurrentInstance()拿到的是app应用实例，必须解构才能拿到当前组件实例