vue中多路由表头吸顶实现的几种布局方式
发布时间:2020-12-16 23:11:59 所属栏目:百科 来源:网络整理
导读:主要介绍了vue项目多路由表头吸顶实现的几种布局方式,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 vue项目多路由表头吸顶实现的几种布局方式 因为项目较大,有五个界面,每个界面有四个子组件,每个子组件都有一个table表格,需求是每个界面的
主要介绍了vue项目多路由表头吸顶实现的几种布局方式,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 vue项目多路由表头吸顶实现的几种布局方式 因为项目较大,有五个界面,每个界面有四个子组件,每个子组件都有一个table表格,需求是每个界面的每个table滚动到顶端表头吸顶,所以尝试用vux做这种需求, A.首先在vux可以这样设置。1.在state文件中设置状态。 techo:{ partsFixed:false, repairFixed:false, mateFixed:false, outRepairFixed:false }//吸顶状态 2.在action中commit状态。 export const setTecho=function ({commit},data) { commit(types.UPDATETECHO, {data}) } 3.mutations中更新状态。 [types.UPDATETECHO](state,{data}){ const {name,type,other} =data; for (let i in state.techo) { if(i===name){ state.techo[i]=other; state.techo[name]=type; } } }//更新吸顶状态 B.在界面中我们可以这样操作。1、在methods中我们可以定义一个回调函数。 partScroll(){ const evalPart = this.$refs.evalPart,//evalPart为表格对象 evalTopTitle = document.querySelector('.fixedNav');//evalTopTitle为导航栏 if(evalPart){ let evalPartBottom = evalPart.getBoundingClientRect().bottom, evalPartTop = evalPart.getBoundingClientRect().top, evalTopTitleHeight = evalTopTitle.getBoundingClientRect().height; evalPartTop<=evalTopTitleHeight && evalPartBottom>=evalTopTitleHeight? this.$store.dispatch('setTecho',{name:"partsFixed",type:true,other:false}) :this.$store.dispatch('setTecho',{name:"partsFixed",type:false,other:false}); } }, 如果项目大,最好对函数进行封装放到全局混合。 scrollEvent(evalPart,evalTopTitle,name){ if(evalPart){//注意一定要对表格对象进行判断,因为表格是动态添加的,可能值为空,会报错。 let evalPartBottom = evalPart.getBoundingClientRect().bottom, evalPartTop = evalPart.getBoundingClientRect().top, evalTopTitleHeight = evalTopTitle.getBoundingClientRect().height; evalPartTop<=evalTopTitleHeight && evalPartBottom>=evalTopTitleHeight? this.$store.dispatch('setTecho',{name,type:true,other:false}) :this.$store.dispatch('setTecho',{name,type:false,other:false}); } }, partScroll(){ const evalPart = this.$refs.evalPart,//evalPart为表格对象 evalTopTitle = document.querySelector('.fixedNav');//evalTopTitle为导航栏 this.scrollEvent(evalPart,evalTopTitle,'partsFixed') } 2、在mouted里面进行滚动监听。 mounted(){ window.addEventListener('scroll',this.partScroll); } 3、最后记得在destroyed里面进行销毁。 destroyed () { window.removeEventListener('scroll', this.partScroll) } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |