近期工作总结#7

最近遇到一个很有意思的bug，值得记录一下

在开发地图页的时候，有个很神奇的bug，在使用高德地图Api，开发点标记点击后弹出信息窗体的时候，遇到信息窗体无法显示的问题，此处的信息窗体不是高德地图官方定义的信息窗体，而是自定义的一个DOM节点，在使用class类命名并写css样式的时候，点击前都是可以正常修饰div标签的，但是点击后却无法正常修饰里面的内容，导致窗体显示不出来。

这个问题的根源在于Vue的Scss中使用了scoped这个属性，使其页面的标签都有唯一的标识，导致新增加的dom节点无法访问到该文件的css样式，所以有两种解决方法，一、消除scoped属性，容易导致其他页面的css样式混淆。二、在App.vue文件中写入全局css样式，这样就可以找到该样式。

另一个bug是关于`this.$refs`的，当你要获取的ref中没有这个属性或者为`undefind`时，确保该`ref`没有被`v-if`或者`v-show`修饰

这就是我最近遇到的比较有意思并且值得记录的问题，以后会持续更新

2023/09/08 更新

遇到元素设置fixed后无法固定且会随着文档流滚动而滚动，查询后发现是父元素有transform属性，这个属性会导致子元素的fixed属性失效，变成绝对定位。
这里有两种解决方法：

去除父元素的transform属性
将子元素提至父元素同层级的位置
而在项目中，因为父元素是个浮动的窗口，且页面居中，所以第一个方法无法完成，故而尝试第二种方法，在尝试前发现有个博主说可以用display:inline-block修饰子元素，实测不好使。所以当我使用第二种方式的时候就需要考虑如何精准的定位元素所在的位置，从而引发一个新的问题，使用ref定义元素后，怎么样获取到元素对于页面边距的位置，这里直接使用this.$refs['通过设置ref获取到的dom元素'].getBoundingClientRect();获取位置，这样无论用户的设备怎么变化都能获取到位置，当然也要监测元素窗口的变化，从而实现位置的变化