四. Toast居中的思路
1.现在我们可以不设置Toast的宽度，并且拿到根据文字数量不同所变化的宽度。由于这个属性是组件挂载完毕以后才有的属性，那么我们可以在onMounted里拿到。首先需要拿到元素本身，这里采用打ref的方式。
具体变量和代码如下：不过多赘述
然后我们需要通过一个计算属性动态的计算出该组件的样式；
ok，这样就实现了居中的效果。并且不管我们如何改变内容都没关系。居中效果是动态计算获得的，并不是一开始就写死的。
五. Toast三个出现位置的思路
有些场景下Toast出现在底部并不是特别合适，所以我们还要考虑出现位置的问题。这里简单设计另外两个，一个中间，一个偏顶部。实现起来也比较简单。我们让它toastWrapperStyle计算top的偏移量也是一个动态计算的就可以了。
我们就可以在后面给这个组件传递参数来控制具体的位置在哪里。 这个目前的代码还动态的展示效果，我们慢慢在后面体现。
tips：下面的章节是本文全篇重点
六*. h()函数的使用
- 我们创建一个
toastCreator.ts的文件，便于函数式调用展示Toast组件。
准备如下内容，这里需要用到前面所提到的h()，还有render（），render你暂且可以理解为给你返回一个真实的DOM。因为h() 是生成虚拟dom的,但是我们最终展示到页面的是真实dom，我们之前不用在<template>标签内不用执行render是因为Vue帮你调用了render()。但是我们在这里相当于手动实现一个Vue的渲染过程，所以我们也同时需要用到这个函数。
同时把同文件夹下刚刚写好的Toast.vue引入。class相关的知识不是本文的重点，不了解的需要自行去查阅相关知识，这点很重要。
增加了一个duration选项，也就是持续时间，效果为Toast，在页面出现多少秒后自动消失。
然后我们需要编写一个这个类本身的方法，名为present()（这里借鉴了ionic的Toast组件的调用名称。） 这一步是重点，也是比较难理解的一个点。
1.首先我们需要自己创建一个Vnode，经过翻阅官网。（注意我们着重看JS的文件)。
2.我们得知，原来h() 函数可以直接接收一个组件模板作为参数。那么我们可以这样写：
这样变量myToast就是一个Vnode了。
3.然后再调用引入的render() 函数，我们自然而言的会想到这样写。
但是好像不太对劲啊，怎么报错了呢？看一下报错信息，原来render() 函数需要接收两个参数。第一个参数是Vnode，第二个参数是套在Vnode的真实dom。
让我们创建并且加上一层外壳containner。其实就是一个普通的div标签。如下：
在这里要强调一下，你创建的虚拟节点必须包裹一层真实的DOM作为容器。
这样正好对应，为什么Vue或者React组项目的根目录都会有一个.html文件，并且还有一个根div标签的原因。 因为render() 函数需要。(想更深入了解原理的可以翻看源码，不再过多赘述。）
七. 如何传递props？
- Vnode和真实DOM都有了，那我们如何传递
props呢？
2.这里不卖官子，先给结果，我们需要改造一下我们刚刚写的h() 函数。
这样即可将调用构造函数时传递的参数转换为该组件的props。 由于篇幅限制，具体细节大家仔细阅读为上面贴出来的Vue官方文档。
八. 挂载真实DOM到页面上
都是基础的知识，不过多解释了，代码如下：
九. 持续时间的控制
编写dismiss() 方法。非常简单，直接移除这个节点即可。
持续时间如何控制呢？ 和时间挂钩，自然而然可以想到setTimout()。实现原理其实也是非常简单。在特定的时间，调用dismiss() 方法即可
十. Toast自定义组件的使用方法
- 忘了写
message属性了，我们补充一下
- 然后在
App.vue文件引入
随手写一个<button>标签。
效果如下：
3.测试一下 position:top。
十一. 增加淡出的效果
我们项目不需要淡入，所以我就没做，不过和淡出是如出一辙，在这里我讲一下大致思路。 只需在dismiss() 函数执行前，增加一个透明效果，这里使用的是增加类名，只不过这个动画名称是搭配tailWind来完成的，你也可以使用别的方法，我的方法并不是最好的，原理思路是一致的
- 在
tailwind.config.js下设置全局动画样式。
这里需要注意！！你的动画持续时间要和dismiss()函数的setTimeout参数一致，不然会出现意想不到的效果。动画结束了，结果组件又出现啦。
2.再调用document.doby.removeChild方法之前，让我们的组件在0.5s内透明度变为0，然后再移除组件，就完美实现了淡出的效果。
最终效果如下：
