封装消息提示框进行函数调用

当我们像封装一个自己的消息提示框组件，但是封装出来的组件使用还是不方便，就要进行函数调用处理

一、思路： 1.封装组件

2.创建文件，创建一个容器

3.导入封装的组件，使用h函数将组件渲染成虚拟DOM

4.DOM操作创建一个div,并添加到body上

5.使用render函数将虚拟dom放入容器

6.使用定时器设定消息提示的展示时间

二、具体流程（喂饭级）

1.封装组件

<script lang="ts" setup>
defineProps<{
  'success'|'error'|'warning'}>()

const style = {
   warning: {
    icon: 'icon-warning',
    color: '#E6A23C',
    backgroundColor: 'rgb(253, 246, 236)',
    borderColor: 'rgb(250, 236, 216)',
  },
  error: {
    icon: 'icon-shanchu',
    color: '#F56C6C',
    backgroundColor: 'rgb(254, 240, 240)',
    borderColor: 'rgb(253, 226, 226)',
  },
  success: {
    icon: 'icon-queren2',
    color: '#67C23A',
    backgroundColor: 'rgb(240, 249, 235)',
    borderColor: 'rgb(225, 243, 216)',
  }
}
</script>
<template>
<div class="message" :style="style[type]">
  <i class="iconfont" :class="style[type].icon"></i>
  <span class="text"><slot></slot></span>
</div>
</template>
<style lang="less" scoped>
.message {
  width: 300px;
  height: 50px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  margin-left: -150px;
  top: 25px;
  line-height: 50px;
  padding: 0 25px;
  border: 1px solid #e4e4e4;
  background: #f5f5f5;
  color: #999;
  border-radius: 4px;
  i {
    margin-right: 4px;
    vertical-align: middle;
  }
  .text {
    vertical-align: middle;
  }
}
</style>

2.将组件全局注册

import ZjMessage from './ZjMessage/ZjMessage.vue'
import { App } from 'vue';

export default {
  install(app: App) {
   
    app.component('ZjMessage', ZjMessage)
  }
}

3.创建type.d.ts文件规范泛型的类型

export type MessageType = 'success'|'error'|'warning'

export type Message = {
  type:MessageType
  text:string
  duration:number
}

4.修改组件中泛型

defineProps<{
  type:MessageType
  text:string}>()

5创建index.ts文件创建dom添加到body

import { h, render } from 'vue'
import ZjMessage from './ZjMessage.vue'
import { Message } from './type'
//创建一个dom容器
//把这个容器添加在body上
const div = document.createElement('div')
div.className = 'abc'
document.body.appendChild(div)

//调用这个函数
export default function Message(obj:Message) {
  const vNode = h(ZjMessage, { type: obj.type, text:obj.text })
  // console.log('Message', vNode);
  //把虚拟dom放入容器
  render(vNode, div)
  }

6、设置定时器和代码优化

import { h, render } from 'vue'
import { Message } from './type'
import ZjMessage from './ZjMessage.vue'

//创建一个dom容器
//把这个容器添加在body上
const div = document.createElement('div')
div.className = 'abc'
document.body.appendChild(div)

//调用这个函数
let timer = -1
export default function Message(obj:Message) {
  const vNode = h(ZjMessage, { type: obj.type, text:obj.text })
  // console.log('Message', vNode);
  //把虚拟dom放入容器
  render(vNode, div)

  clearTimeout(timer)
  timer = window.setTimeout(()=>{
    render(null,div)
  },obj.duration||2000)
}
Message.success = (value: string) => {
  Message({ type: "success", text: value, duration: 1500})
}

Message.error = (value: string) => {
  Message({ type: "error", text: value, duration: 1500})
}

Message.warning = (value: string) => {
  Message({ type: "warning", text: value, duration: 1500})
}

7、在主页面中调用

import Message from './components/ZjMessage/index'

Message.success('你真帅')