hitisoft-ui/src/packages/ht-MessageBox/ht-messageBox.js

hitisoft-ui

import htMessageBox from './ht-messageBox.vue'
import { createVNode, render } from 'vue'

// 根据不同的参数分配type
const _htMessageBox = {
  confirm: (options) => {
    if (typeof options === 'string') {
      const _options = { text: options, type: 'confirm' }
      return handler(_options)
    } else if (typeof options === 'object') {
      const _options = { ...options }
      _options.type = 'confirm'
      return handler(_options)
    }
  },
  alert: (options) => {
    if (typeof options === 'string') {
      const _options = { text: options, type: 'alert' }
      return handler(_options)
    } else if (typeof options === 'object') {
      options.type = 'alert'
      return handler(options)
    }
  }
}

// 返回promise回调
const handler = function (prop) {
  console.log(prop);
  return new Promise((resolve, reject) => {
    // 将回调传入到参数
    prop.confirm = () => {
      resolve('321312')
      // 返回数据后移除元素
      setTimeout(() => {
        div.remove()
      }, 200)
    }
    prop.cancel = () => {
      reject('err')
      setTimeout(() => {
        div.remove()
      }, 200)
    }
    // 创建node
    const { messageCom, div } = createNode(prop)
    // 渲染
    render(messageCom, div)
  })
}

// 创建节点
const createNode = function (prop) {
  let messageCom
  // 创建一个节点
  let div = document.createElement('div')
  // 在vue根结点下添加为子节点
  document.querySelector('#app').appendChild(div)
  // 根据参数设置组件
  messageCom = createVNode(htMessageBox, prop)

  return { messageCom, div }
}

export default _htMessageBox