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');
                }
            }
        }
    }

 

posted @ 2019-04-04 12:54  抠脚怒汉  阅读(590)  评论(0编辑  收藏  举报