VUE3 + TS 封装全局Toast方法，支持自定义样式

实现代码：1.新增一个toast.ts文件

import success from '/@/assets/icon/toast_success.png'
/**
 * @author 苏秦
 * @param text 文案
 * @param icon 图标
 * @param time 存在时间
 */

const Toast = (text: number | string, icon?, time = 1.5) => {

    let toastTimeout: ReturnType<typeof setTimeout> | null = null; // 用于存储定时器的引用
    // 销毁定时器
    if (toastTimeout) {
        clearTimeout(toastTimeout);
    }

    // 检查是否存在现有的提示框，如果存在则移除
    const successToast = document.querySelector('.success_toast');
    if (successToast) {
        successToast.remove();
    }

    // 创建容器
    const div: HTMLDivElement = document.createElement('div')
    div.className = "success_toast"
    // 创建二级容器
    const toastContainer: HTMLDivElement = document.createElement('div')
    toastContainer.className = "success_toast_container"
    // 创建img
    if (icon) {
        if (icon == 'success') {
            icon = success
        } else if (icon == 'fail') {
            // icon = success
        }
        const img = document.createElement('img')
        img.src = icon
        img.className = 'success_toast_icon'
        toastContainer.appendChild(img)
    }
    //创建文本span
    const span = document.createElement('div')
    span.className = 'success_toast_text'
    span.innerHTML = text as string
    toastContainer.appendChild(span)
    div.appendChild(toastContainer)

    document.body.appendChild(div)
    toastTimeout = setTimeout(() => {
        div.remove()
    }, time * 1000)
}

export default Toast

 定义toast全局样式，可以在app.css中集中管理（注意z-index层级，可能会与组件样式层级冲突，我设置的是6000）

.success_toast {
  position: fixed;
  z-index: 6000;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(0, 0, 0, 0.7);
  border-radius: 12px 12px 12px 12px;
  /* opacity: 0.7; */
}
.success_toast_container {
  max-width: 400px;
  padding: 25px 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.success_toast_icon {
  width: 34px;
  height: 34px;
  margin-right: 15px;
}
.success_toast_text {
  color: #ffffff;
  font-size: 30px;
  line-height: 39px;
  display: flex;
  justify-content: center;
  align-items: center;
}

然后就是在组件中引用与调用 Toast方法
 

// 引入Toast方法
import Toast from '/@/utils/toast'


// 调用Toast方法，支持三个参数（1:Toast文本，2:成功与失败，在方法内部判断显示对应的自定图标，3:Toast显示时长）
Toast('复制成功', 'success');