iview的Affix插件遇到滚动时候的bug处理方法
程序员文章站
2023-04-07 19:26:16
最近有个需求,是用vue做的页面,其中嵌入了一个tinymce编辑器,编辑器设置了自动调整高度,也就是说编辑器中内容越多,高度就会自动撑高 我们需要再页面最下方放一个保存按钮,保存按钮必须固定在屏幕下方,本来想用position:fixed这种简单方法,但是业务比较特殊,不能这么用,无奈只能用pos ......
最近有个需求,是用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');
}
}
}
}
上一篇: PHP 清空varnish 缓存的详解(包括指定站点下的)
下一篇: 程序员50题(JS版本)(一)