最近遇到一个小场景。进入首页以后,需要有一个弹窗。弹窗的内容可能是一个图片。可能是一个视频。也可能是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”的逻辑放到函数中进行更复杂的逻辑处理