iview的Affix插件遇到滚动时候的bug处理方法
最近有个需求,是用vue做的页面,其中嵌入了一个tinymce编辑器,编辑器设置了自动调整高度,也就是说编辑器中内容越多,高度就会自动撑高
我们需要再页面最下方放一个保存按钮,保存按钮必须固定在屏幕下方,本来想用position:fixed这种简单方法,但是业务比较特殊,不能这么用,无奈只能用position:absolute来
为了省去不必要的麻烦,就用了iview的affix组件,但是经过实际测试,发现有点问题,最后解决方法是触发一次resize事件
export default { data(){ return { affixInit:false } } }, computed:{ }, mounted(){ }, deactivated() { window.removeEventListener('scroll',this.initAffix,true); }, activated() { window.addEventListener('scroll',this.initAffix,true); }, components: { }, methods:{ initAffix(){ if(!this.affixInit){//affix组件有bug,需要触发一次resize事件才能正常 this.affixInit = true; if(document.createEvent) { let event = document.createEvent("HTMLEvents"); event.initEvent("resize", true, true); window.dispatchEvent(event); } else if(document.createEventObject) { window.fireEvent("onresize"); } console.log('resize dispatched'); } } } }