vue 에 scoped 를 추가 하면 vant 의 UI 구성 요소 의 스타일 문 제 를 수정 할 수 없습니다.

UI 구성 요소 가 제공 하 는 기본 스타일 이 프로젝트 의 수 요 를 만족 시 키 지 못 할 때 가 있 습 니 다.스타일 을 수정 해 야 하 는데 scoped 를 추가 한 후에 수 정 된 스타일 이 작 동 하지 않 는 것 을 발 견 했 습 니 다.
해결 방법:
깊이 선택 기 를 사용 하여 scoped 스타일 의 선택 기 를'깊이',즉 하위 구성 요소 에 영향 을 줍 니 다.

<style scoped>
 .a >>> .b { /* ... */ }
</style>

이상 의 코드 는 다음 과 같이 컴 파일 됩 니 다:
.a[data-v-f3f3eg9] .b { /* ... */ }
메모:Less 나 Sass 등 예비 프로 세 서 를 사용 했다 면>>올 바 르 게 해석 할 수 없습니다.이러한 상황 에서 조합/deep/또는:v-dep 조합-둘 다 별명 입 니 다.>>>>>작업 이 똑 같 습 니 다.
Less 나 Sass 등 예비 프로 세 서 를 사용 하 는 방법 은 다음 과 같 습 니 다.

.van-radio {
 /deep/ .van-radio__label {
  width: 500px;
 }
}

질문
1.프로젝트 는 lib-flexible 을 인용 하여 px2rem-loader 와 어 울 리 는 것 을 참조 한 다음 에 실제 컴퓨터 테스트 를 할 때 글꼴 이 핸드폰 에 아주 작 게 표 시 된 것 을 발견 합 니 다.[px2rem-loader 문 서 를 보 러 가 는 것 을 추천 합 니 다.]
원인+해결:바 이 두 설 뒤에/*px*/(font-size:14px;/*px*/),여기에 이렇게 설정 할 때 글꼴 의 크기 는 두 배 입 니 다.글꼴 을 14px 로 표시 하려 면 css 코드 는[font-size:28px;/*입 니 다.px*/],border 이런 것들 을 remi 로 바 꾸 고 싶 지 않 은(또는 바 꿀 필요 가 없 는),뒤에/*no*/를 추가 합 니 다.
2.vant 구성 요 소 를 사용 할 때 스타일 같은 것 이 vant 홈 페이지 의 demo 와 천차만별이다.
원인+해결:도입 한 어 울 리 는 프레임 워 크 가 단 위 를 remi 로 바 꾸 었 기 때문에 gg 는 스스로 스타일 을 조정 하면 됩 니 다.
3.페이지 작성 style 은 scoped 를 사용 하여 vant 구성 요소 스타일 을 조정 할 때 역할 을 하지 않 습 니 다.[여기 서 vue 의 가장 중요 한 점:부자 구성 요소,덜렁이 인 저 는 부자 관 계 를 전혀 이해 하지 못 했 습 니 다]
원인+해결:scoped 의 역할 은 스타일 을 현재 페이지 에 적용 하 는 것 입 니 다.다른 페이지 의 스타일 에 영향 을 주지 않 습 니 다.vant 구성 요 소 를 사용 하여 구성 요소 스타일 을 조정 하려 고 할 때 이 구성 요 소 는 하위 구성 요소 입 니 다.scoped 를 사 용 했 기 때문에 영향 을 주지 않 습 니 다.이 럴 때 deep-깊이 선택 기 를 사용 해 야 합 니 다.다음 그림 은 바로 용법 입 니 다.less 나 sas 를 사용 했다 면.쓰 는 법 은 스스로 바 이 두!!본인 은 겁 이 많아 서 프로젝트 에 익숙 하지 않 은 물건 을 너무 많이 쓰 지 못 합 니 다).물론 입 니 다.당신 도 공공 css 스타일 파일 에 마음대로 쓸 수 있 습 니 다.제 가 말 한 것 은 당신 과 반 마 오 관계 가 없 으 니 맞 아 죽지 않도록 조심 하 세 요!

4.vant 의 검색 구성 요 소 를 사용 한 다음 ios 에서 테스트 할 때 input 상자 가 확대 되 었 음 을 발견 합 니 다.
원인+해결:index.html 의 머리 에'maximum-scale=1.0,user-scalable=0'을 추가 하여 확대 금지

5.vant 의 구성 요 소 는 필요 에 따라 도입 되 었 습 니 다.main.js 에 도입 되 었 습 니 다.toast 구성 요 소 를 사용 할 때 인용 되 었 습 니 다.사용 할 페이지 의 방법 에서 this.$toast()이렇게 하면 됩 니 다.그리고 vant 의 그림 미리 보기 구성 요 소 를 사용 할 때 이렇게 해도 된다 고 생각 했 습 니 다.그 결과 gg 는 페이지 에 직접 도입 되 어 문서 대로 쓰 면 됩 니 다.
원인+해결:toast 와 image Preview 의 문서 소 개 를 자세히 비교 해 보 니 toast 는 vue 에 마 운 트 되 었 다 는 소개 가 있 었 습 니 다.emmmm,imagePreview 는 마 운 트 하지 않 은 것 같 습 니 다.마 운 트 한 후에 사용 할 수 있 습 니 다.

6.페이지 를 돌 릴 때 제목 이름 이 바 뀌 지 않 았 습 니 다.예 를 들 어 첫 페이지 가 연락처 로 넘 어가 면 페이지 머리 가 첫 페이지 입 니 다.[Vue Router 문서 보기]
원인+해결:수정 작업 을 별로 하지 않 았 기 때문에 변 하지 않 습 니 다.경로 router/index.js 에서 경로 설정 meta 필드 를 설정 하고 main.js 에서 전역 사전 수 비 를 사용 합 니 다.

router.beforeEach((to, from, next) => {
 //    
 if (to.meta.title) {
  document.title = to.meta.title;
 }
 next();
});

처음으로 자신 이 독학 한 것 을 프로젝트 에 응용 시 켰 습 니 다.새로운 프로젝트 를 시작 하면 자신 은 프로젝트 의 유일한 전단 으로서 죽음 을 두려워 하지 않 고 vue 를 사 용 했 습 니 다.사실은 덜렁이 입 니 다.지금 1 기 개발 이 끝 났 습 니 다.이런 문 제 를 정리 하면 기초 가 될 수 있 습 니 다.하지만 자신 이 만난 것 이기 때문에 기록 해 야 합 니 다!
vue 에 scoped 를 추가 하면 vant 의 UI 구성 요 소 를 수정 할 수 없 는 스타일 문 제 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.