Vue3如何实现自定义toast弹窗，变成长尾？

本文共计3377个文字，预计阅读时间需要14分钟。

目录+前言：以下是正文内容：一. 前置任务：JSX和渲染函数的概念二. createVnode函数的意义三. 编写Toast组件（不使用tsx）四. Toast组件中的思路五. Toast三个出现位置的思路六. h()函数的使用

目录

• 前言：
• 下面是正文：
• 一. 前置任务：JSX和渲染函数的概念
• 二. createVnode函数的意义
• 三. 编写Toast组件（不使用tsx）
• 四. Toast居中的思路
• 五. Toast三个出现位置的思路
• 六*. h()函数的使用
• 七. 如何传递props？
• 八. 挂载真实DOM到页面上
• 九. 持续时间的控制
• 十. Toast自定义组件的使用方法
• 十一. 增加淡出的效果

前言：

前两天在项目中很多场景下都需要用到一个toast弹窗，项目使用的是ionic+tialwind_Css，ionic也有自带的toast弹窗，虽然大部分场景下直接调用它提供的api已经能满足需求了，但是它弹窗的高度，（也就是弹窗出现的位置）并不是高度自定义的，并且弹窗的z-index在我们项目中会和一些组件冲突，但是这个之前一直没有办法解决，所以干脆自己手写了一个使用方法高度类似ionic_Toast的组件。