Vant源码解析(四)----Popup弹出层，详解样式方法

这个功能，自己也手写过，毕竟有很多弹窗的嘛。
我自己写就是：一个背景层，然后一个盒子里面放内容。再写个显示隐藏事件。够够的了。

Vant的Popup弹出层

页面结构

短短一个背景加内容盒子，vant套了几层。

这是引用的组件

这是组件的遮罩层

这是内容盒子

这个组件的js逻辑不复杂，就是一个显示隐藏，复杂的是样式问题。

这个弹出层，可以从上下左右，中间这几个方向弹出来；能显示关闭按钮；以及圆角弹窗样式。之前的文章已经解释过，样式的逻辑。因为我忘记了，所以再解释一遍。

能够从不同方向弹出来，主要是通过样式控制，通过变量控制样式css.

因为没有看懂show这个字段是怎么传过来的，因此跑去研究overlay遮罩层了。

overlay

好的，我们开始研究这个遮罩层怎么实现的。
我的逻辑，一个盒子显示隐藏的问题。

在这个组件下，我又发现了个新的组件transition，原来这个才是真正的遮罩层。哇哦，这个组件是个动画，我吐了。然后我发现控制显示和隐藏，用的是这个文件

通过inited和display进行控制显示隐藏。

style()方法

我们来看下，最最基础的style()方法，它在wxs里面。
你看，有个判断数组的方法，判断对象的方法。
在判断数组方法里，用了filter进行过滤空数据，然后过滤出来的数组进行map循环，重新调用style()方法
在判断对象方法里，用了keys获得属性数组，然后通过filter进行过滤出空数据，过滤出来的数组进行map循环，并且在这个方法里进行字符串的拼接。
例如：
{color:red,font-size:24px},通过拼接变成：colo:red;font-size:24px;
最后进行返回

bem()方法

这个方法是参数入口，调用traversing方法，然后输出join方法
conf 的参数： [“center”,{“round”:false,“safe”:true,“safeTop”:false,“safeTabBar”:false}]
name的参数： popup

这个方法中，mods是个空数组，conf是传过来的参数： [“center”,{“round”:false,“safe”:true,“safeTop”:false,“safeTabBar”:false}]
这个方法里有if判断，通过typeof进行判断，如果是string或者number，则添加到数组mods中。
如果这个值是数组的话，通过forEach方法，循环调用了travesing()方法。
如果这个值是对象的话，通过keys获得数组，遍历方法中，如果值为真，把key添加到数组中。

这个方法的作用是拼接字符串。
得到：van-popup van-popup–center van-popup–safe

到此，样式的逻辑就完成了，得到元素。

好的，现在我们在来看下inited和display变量的数据的变化是哪样的，主要和transition文件有关。
这方法的很绝，不是普通的变量变换，通过一个变量，来调用不同的方法。切换是通过show这个变量进行切换。
不得不说，我想不到，我也不知道为啥要这样做。
可能为的是enter()和leave().

所以我们在来聊下这2个方法吧。

enter()方法

这个方法中获取了classNames的类名，获取的currentDuration的时间，最最重要的它设置了inited和display为true,这样弹窗就会显示出来啦啦啦啦。还设置了classes，我感觉在这个组件没啥用。然后异步调用，再次更新classes，我觉得是动画那块的东西。

leave()

这个方法隐藏弹窗的时候会进行调用，这个时候，我就先盯着display这个变量，然后发现它在onTransitionEnd这个方法里进行变量的切换。其他的应该和动画相关。但是我发现inited没有进行处理

其他这个组件，我发现了个bug,在返回当前页面，并且需要弹框的时候，它不会出现，控制显示隐藏的变量是正确的，就是不会渲染。我猜想会不会和inited有关系。我准备试下。

我试了下，我的项目不行，vant的可以，难道是因为我的vant组件太老的原因？无语了。看了下逻辑都一样。
然后发现是视图层的原因，我的项目，那个没有渲染出来。

最后，我发现了，问题出现在这个方法，渲染的问题。

我的项目

现在vant的项目

感想

嗯，我的项目要更新vant组件，然后这个bug找了很多时间来着。还有其实是别人不断的打断我。现在是下午了，好饿啊