hitisoft-ui/src/packages/ht-Message/ht-Message.js

hitisoft-ui

import htMessage from './ht-Message.vue'
import { createVNode, render } from 'vue'

const _htMessage = function (prop) {
  let messageCom
  // 创建一个节点
  let div = document.createElement('div')
  // 在vue根结点下添加为子节点
  document.querySelector('#app').appendChild(div)
  // 设置class
  div.setAttribute('class', 'ht-message')
  // 根据参数设置组件
  if (typeof prop == 'string') {
    let _prop = {}
    _prop.text = prop
    messageCom = createVNode(htMessage, _prop)
  } else if (typeof prop == 'object') {
    let _prop = prop
    messageCom = createVNode(htMessage, _prop)
  }
  // 渲染
  render(messageCom, div)
  
  // 销毁组件
  if (messageCom.props.duration) {
    setTimeout(() => {
      div.remove()
    }, messageCom.props.duration + 500)
  } else {
    setTimeout(() => {
      div.remove()
    }, 3500)
  }
}

export default _htMessage