vue3手搓固钉组件

#创作灵感

        今天用固钉组件时发现element-ui的固钉会阻止移动端移动事件,我思来想去决定自己写一个固定组件得了


实现思路

        获取钉子的ref实例并监听window滚动事件,当window.scrollY等于钉子的offsetHeight,添加position:fixed和top:0到钉子上,就能强行固定不动了。

        这时候会有一个bug:如果元素本来并没有定位,直接添加定位属性会使其脱离文档流造成周围元素坍塌,这该怎么办?于是我再在下面添加一个div作为占位符,当内容被固定上去时,v-if渲染一个相同高度的div撑着文档流的内容,防止坍塌。slot插槽可以自由添加内容。最好在使用时加入z-index保证固钉优先显示

        不知道为什么固定上去还需要额外设置宽度和原来一样,这点我也不懂

        如果不生效,可以把affixStyle提出来放到一个类里,通过条件判断是否增加类来实现属性的改变



你可能感兴趣的:(仿抖音,vue.js,前端,javascript)