<font color="green">今天遇到一个一直认为很简单的问题，真正接手后才知道这么可怕</font>
*大体是这样的，默认动态加载的card应该是自动向下，当card遇到页面最下面应该自动向上渲染。*
动态生成的DOM都是根据id来监听获取元素的信息。
<font color='red'>坑1</font>：当时数据较少没有考虑到card渲染方向，所以在页面下面的时候card加载到了浏览器之外
<font color='yellow'>进坑1</font>：当我一开始碰到这个bug时，so easy！！！所以加了一个判断条件，在函数@mouseenter获取触发点位置，然后加上一个页面高度和页面高度**screen.height**进行对比，然后对card进行移位，蒽，easy！！！
``` let rect = this.$el.getBoundingClientRect()
```
<font color='#2866bd'>so,坑</font>：很快，师傅过来啦，你这个写死啦，扩展性不好！内心毫无波澜，好，改成动态！
----------
<font color='red'>坑2</font>：动态嘛，嗯嗯，就是换成动态判断条件就行啦！
<font color='yellow'>进坑2</font>：Google一下，百度一天，怎么检查新生成的DOM元素是否超出可视页面！结果搜到一堆判断scroll滚动元素的边境溢出！根本没有智能的自动检查函数，我平时也看到过有的网站是可以实现自动判断，所以一定可以解决！证明只有程序袁才是万能的，代码，呵！
<font color='#2866bd'>so,坑</font>：表示师傅看不下去啦，“你根据ID，利用$nextTick**获得更新后的元素信息**来获取DOM的信息！”
----------
<font color='red'>坑3</font>：调研一下$nextTick()函数，DOM更新后返回$nextTick()里的操作，蒽。
<font color='red'>坑4</font>：立马开始获取动态弹出card的id，嗯嗯嗯嗯，找到了，通过控制台找到的，由于我用的是一个组件没有使用**ref**来注释，
<font color='green'>出坑4</font >so，小case【找了两个小时，自闭】，通过**this.$root**DOM树来查到元素id，这样找到的id每次都是动态的啦！
<font color='yellow'>进坑3</font>：问题很快来了，我通过id获取到元素的高度啦，但是每次顺序不对啊，每次dom渲染后在找到更新dom的信息。。。又仔细看了一下**this.$nextTick()**,en,DOM更新后，函数返回操作！！！换个思路，于是通过监控DOM树的变化来在第一时间来获取到dom变化的id并且获取DOM信息
``` let dom=document.getElementById(this.$root.$children.***.id)
dom.addEventListener('DOMNodeInserted', function(){
let height=dom.getBoundingClientRect().height
}, false)
```
唉，结果和 **$nextTick**一毛一样，扎心啦，而且在这个监听函数里面使用函数之后，会一直获取到dom更新的信息，卡崩啦！
<font color='#cf68e1'>233,强行出来</font >:嗯嗯，天要亡我！！静想，如果要实现避免动态的card页面生成到可视页面外，大概两种途径，第一种动态的判断位置条件，另一种是通过更加生成位置再次调整！
行吧，又回到坑3啦，显示给位置一个默认值，然后根据$nextTick()获取到的dom信息，然后根据鼠标位置，dom高度，可视化窗口高度`document.body.clientHeight`【上面的那个获取到的是电脑的信息】来判断，调整！！！！
/苦笑/苦笑，有更好的方法，求告知！！！
网友评论