5.5 js封装autoPrefix方法。js方法自动增加浏览器前缀

1、ref属性可以获取dom对象,同时也可以获取VueComponent对象
注意:要获取VueComponent对象的dom属性,需this.$refs.dom.$el.style.top

2、clientWidth offsetHeight 等等,都不是style属性,要获取直接,this.$refs.list.offsetWidth即可。

3、一切需要监听$el数据(并非初始化) ,都必须绑定在data中。

4、制作app拖拽 歌单拖动背景也一并延伸至title。
在这里插入图片描述
思路过程:
1、如果直接对list-wrapper操作的话,可以达到背景区域向上延伸,可是内容区域也会相应滚动,造成溢出状况。(排除方案1)
2、加入蒙版层div class=“layer”,在list-wrapper 内容滚动时,overflow: auto,超出部分设置黑色layer延伸相同top或transformY即可,达成视觉上的同。(可行)

二、vue生成的css具备基本浏览器内核
答:是因为vue-loader autoPrefix。可以自动做一些CSS prefix
延伸: JS却不能做prefix,需要自行实现autoPrefix的逻辑。
思路:利用浏览器的检测特性原理。
1、document.createElement(‘div’).style 可以获取浏览器带内核的全部CSS属性
2、先自执行匿名函数,获取浏览器的内核。将匹配到的vendor保存。
3、对后续style代码 直接可以通过获取的vendor进行比对。
4、比对分析,加入正确前缀。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
它就会根据浏览器所支持的情况(vendor已判断)自动添加prefix前缀

猜你喜欢

转载自blog.csdn.net/qq_40196738/article/details/89847484
5.5