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 에서 표 두 흡 정 으로 이 루어 진 몇 가지 구조 방식 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.만약 에 궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 여러분 에 게 답 할 것 입 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.