vue 에서 다 중 경로 가 표 두 흡 정 으로 이 루어 진 몇 가지 구조 방식

vue 프로젝트 의 다 중 경로 가 표 두 흡 정 으로 이 루어 진 몇 가지 구조 방식
프로젝트 가 비교적 크 고 다섯 개의 인터페이스 가 있 기 때문에 모든 인터페이스 에 네 개의 키 구성 요소 가 있 습 니 다.모든 하위 구성 요 소 는 하나의 table 표 가 있 습 니 다.수 요 는 모든 인터페이스의 모든 table 이 정상 표 머리 로 굴 러 가 는 것 입 니 다.그래서 vux 로 이런 수 요 를 하려 고 합 니 다.
먼저
A.우선 vux 에서 이렇게 설정 할 수 있 습 니 다.
1.state 파일 에 상 태 를 설정 합 니 다.

techo:{
 partsFixed:false,
 repairFixed:false，
 mateFixed:false,
 outRepairFixed:false
 }//    

2.action 에서 commt 상태.

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

총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 vue 에서 표 두 흡 정 으로 이 루어 진 몇 가지 구조 방식 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.만약 에 궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 여러분 에 게 답 할 것 입 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!