背景：
在使用 vue 搭建的项目中需要实现 ToolTip 文字提示功能，但是使用的 vue 的 UI 库中没有符合需求的组件。于是自己实现一个公共组件
实现思路：
1、首先封装Trigger组件，将对弹层的处理逻辑集成在组件内，以便在操作挂载元素时显示和隐藏弹层
2、为了使弹层不受触发元素位置及大小的影响，我们渲染时将弹层插入到 document 根节点中
3、在 Trigger 组件内部，遵循组件单一功能原则，将绘制蒙层，组织弹层动效、调整弹层位置相关代码封装在 Popup 组件中，将处理弹层移入移出/点击事件的相关代码封装在 PopupInner 组件中
其中Popup组件内使用了策略模式将 placement 为上/ 下/ 左/ 右/居中时对应的 popup 位置返回；拿到 popup 位置信息后，我们还要处理 popup 溢出屏幕的情况，让它贴着内容区域内边沿显示。从而实现调整弹层位置；
4、有了通用的Trigger组件后，ToolTip组件就可以轻松实现了。
// 使用Trigger 封装ToolTip, 其中children为触发元素。
const {title, placement, children} = props;
// ...
return <Trigger popup = {title} placement = {placement}> {children} </Trigger>
