关于弹出层里获取dom元素的一个小思考

最近遇到一个小场景。进入首页以后，需要有一个弹窗。弹窗的内容可能是一个图片。可能是一个视频。也可能是html字符串。

所以想到封装成一个组件。对于视频。则有一个需求。如果用户不看完该视频是不允许关闭弹窗的。

代码如下:

 （注contentType: //弹窗内容类型   1 图片 2 视频 3 其他）

结果发现videoObj 报错 null？？？说好的mounted 中获取dom呢？

mounted钩子函数的确是能获取到模板中的dom对象。但是弹窗是个例外。因为弹窗的出现是有条件的。是请求了接口。再根据接口的结果来确定它是否弹出。是个异步的过程。所以mounted无法获取到是正常的。

弹窗的出现是根据后台的返回值来确定的，是异步的，同时 弹窗的内容和contentType有关。比如视频对象。你如何就能保证v-if=“contentType==2”的同时去getElmenttById（video对象）就一定是能获取到的呢？换句话说。也就是说获取video对象其实在contentType==2是有先后关系的。如果能在contentType==2的逻辑里去试着获取video。就一定能正确的获取到。

所以代码修改如下：

注意观察type==2的逻辑。在里面我们正确获取了video对象。同时，通过一个函数在模板中运算，把原本简单的v-if=“contentType==2”的逻辑放到函数中进行更复杂的逻辑处理