Vue3 实现一个自定义toast（小弹窗）（一）

前言：

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

这个组件也是我第一次在vue3下实现的，也查阅了很多网上相关的文章，也受到很多启发灵感，所以自己吸取精华去其糟粕来完成了一版个人感觉使用起来很方便的一个版本，特来记录一下实现的过程，希望可以帮助到遇到同样迷惑的人。

tips:(本篇文章不会上手就教你样式怎么写，代码怎么写，而是会帮你逐渐一步步理解相关额外的知识。会以“假如我是一个初学者，如果当时有人这样告诉我的话，我就大概能听明白”的角度去解释。所以篇幅较长，如果想直接看组件的实现，可直接跳转到标题三）

在这里祝大家中秋节快乐呀～～🥮

下面是正文：

一. 前置任务：JSX和渲染函数的概念

1. 想要完成这个需求，你需要了解一下标题的那两个概念。官方文档在这里，里面的话语太过于“专业和官方”，导致我刚开始看的时候非常迷惑，所以在这里我会帮你去理解里面的一些很官方的言语，让你快速有个认知。

原地址在这里：vue官方文档JSX和渲染函数。

2. 我们暂且还不需要去深入理解渲染机制的整个流程。所以官方下面个链接暂且不要去查阅，会让你越来越头晕。
   但在这里我要说明一点，接下来讲的内容都是建立在我默认你对虚拟DOM的概念有一定的了解。
   

紧接就写到了Vue为我们提供了一个函数，来创建vnodes。在阅读这个页面的时候，一定注意官方在每个代码右上角的文件类型。

这里需要插个必须要了解的题外话，了解React的同学一定知道JSX这种写法

Vue里JSX的概念和React的JSX的概念是极其相似的。Vue也是借鉴了React的这个思想，这里我们重点看画线的这句话。（不熟悉react的小伙伴也不要担心，本文实现的Toast并没有使用到JSX和babel。）

是不是觉得和刚刚Vue官方写的很相似？

官方在上文也提到了h是什么。如果我们把h换成createVnode()，是不是就和React.createElement的用法及其相似了呢？

5. 其实不管是Vue的h()，还是React.createElement() 它们最终要达到的目的只有一个：创建虚拟DOM。而这也对应了Vue中createVnode的Vnode其实就是virtual node的意思。函数名的直接翻译其实也就是创建虚拟节点。而JSX只是创建虚拟dom的语法糖🍬而已，仅此而已，并没有什么特别之处。

二. createVnode函数的意义

1. 现在我们在 .Vue文件写如下代码。

非常简单的结构，一个id是"hanzhenfang"的div标签，标签内容是我的名字。ok，这样写的话，vue就会帮我们将这个结构转换为虚拟dom。 本质上是使用了

h("div",{id:"hanzhenfang"},"韩振方")

h()可以有多个参数，

这段代码是在<template>标签内写的，它底层其实还是使用了h() 函数去实现的。说白了就是，React选用JSX来作为渲染虚拟dom函数的语法糖。而<template>标签是Vue采用的渲染虚拟dom的语法糖。

从而可以引出官方的标准解释：

你可能会疑问了，既然模板可以实现这样的功能，那我直接写模版不就完事了吗？还需要写什么h() 函数呢？因为有的场景确实是模板做不到的。这也就是我为什么会写这篇文章的原因，因为这个toast需求使用的场景很多很多，我总不能在每个地方都引入一个组件通过v-if来控制它的显示和关闭吧？非常繁琐和麻烦。

三. 编写Toast组件（不使用tsx）

1. 首先创建一个toast.vue文件写出大致样式。由于是使用tailwindCss，所以样式书写的方式可能和传统的在style标签写样式不太一样，但是原理是一样的，不用担心。实现如下：

toast在绝大场景下都是居中的，并且脱离文档流，位于整个页面的最顶部，所以我这里采用了传统的绝对定位的方案。

绝对定位最简单居中方案不过与设置top和left各50%。但是我们不要忽略了一点，偏移的时候，我们还要减去自身宽度和高度的一半，才可以做到完全居中。但是处于复用性考虑，我们的toast的宽度是不能设置固定宽度的，具体的宽度是由当时文字的大小决定的。

4. 这时候我们需要用到offsetWidth

1.额外技能补充 offsetWidth

1. 先让我们看看MDN如何解释的。

具体什么意思呢？我们随手写一个很简单的template。

我们现在不加任何Css属性，来查看一下offsetWidth是什么值。

不要把调试工具只当成console.log的地方，一定利用好这个工具。我们选择刚刚写的元素，点击调试工具选项栏的Properties标签。

可以看到offsetWidth目前是20（注意，这是一个十进制的number类型，并不带单位，并且是一个只读属性，无法直接更改。） 20是怎么来的呢？其实它就是我们设置的字体大小。

来验证一下猜想，我们设置一下字体大小为15px

3. 现在给这个div加上10px宽度的border。

别着急看offsetWidth的值，我们根据它的定义猜想一下。

应该等于15px的字体大小+10px?

确定吗，别忘了border是上下左右都为10px，所以根据猜想 `offsetWidht=15px + 10px + 10px

如果这个div我们自己设定宽度呢？我们来给它设定100px的宽度。

我们会发现offsetWidth的值变成了100

但是我明明有还有10px的border啊！哪里去了？

你是否忘了我们现在大部分情况下使用的都是box-size:border-box呢？设置的宽度是包含border的。

验证一下，我们改变一下box-size的类型。

可以看出来，offsetWidth就变成了100px+10px+10px

Tips：不过在本文中不会设置定宽去限制