personalhubs/src/components/Toast/index.ts

import { createVNode, render } from 'vue';
import Toast from '@/components/Toast/Toast.vue';
import Confirm from '@/components/Toast/Confirm.vue'
// 准备一个DOM容器
const div = document.createElement('div');
div.setAttribute('class', 'toast-wrapper');
document.body.appendChild(div);
const divConfirm = document.createElement('div');
divConfirm.setAttribute('class', 'toast-wrapper-confirm');
document.body.appendChild(divConfirm);
let time: any = null;

// 初始数据
type title = string;
interface ToastType {
  title: title;
  duration?: number;
}
interface showConfirmType {
    title?:string;
    text?:string;
    type?:string;
    callback?:Function;
}
type union = title | ToastType;
let timer: any = null;
export function show(options: union) {
  let title, duration;
  if (typeof options === 'string') {
    title = options || '我是默认文案';
    duration = 2000;
  } else {
    title = (options as ToastType).title || '我是默认文案';
    duration = (options as ToastType).duration || 2000;
  }
  // 创建虚拟dom  (组件对象， props)
  const vnode = createVNode(Toast, { title });
  
  // 把虚拟dom渲染到div
  render(vnode, div);
  clearTimeout(timer);
  timer = setTimeout(() => {
    render(null, div);
  }, duration);
}
export function showConfirm(options:showConfirmType) {
    // 创建虚拟dom  (组件对象， props)
    function close() {
        render(null, divConfirm);
    }
    const vnode = createVNode(Confirm, {options, close,});
    // 把虚拟dom渲染到div
    render(vnode, divConfirm);
    // clearTimeout(time);
    // time = setTimeout(() => {
    //   render(null, divConfirm);
    // }, duration);
}