iview 의 select 드 롭 다운 상자 옵션 이 잘못된 문 제 를 완벽 하 게 해결 합 니 다.

iview 를 사용 하 는 과정 에서 이런 문제 가 발생 했 습 니 다.Model 에서 select 드 롭 다운 상자 구성 요 소 를 사용 합 니 다.그러나 팝 업 상자 가 한 화면 을 넘 으 면 스크롤 이 필요 할 때 select 의 드 롭 다운 옵션 이 잘못 되 었 습 니 다(아래 그림 1 은 정상 이 고 그림 2 는 스크롤 후 드 롭 다운 옵션 이 잘못 되 었 습 니 다).
그림 1:

그림 2:

구성 요소 코드 를 분석 한 후 다음 스타일 을 발견 합 니 다.

.ivu-modal .ivu-select-dropdown {
  position: absolute !important;
}
해결 방안
바로 이 스타일 이 드 롭 다운 상자 의 포 지 셔 닝 에 영향 을 주 었 습 니 다.해결 방법 은 작가 의 원래 스타일 을 덮어 쓰 는 것 입 니 다.
그런데 공교롭게도 작가 가 하 나 를 추가 했다!important,우선 순위 가 바 뀌 었 습 니 다.
그렇다면 어떻게 하면 자신의 스타일 우선 순위 가 그 보다 높 을 수 있 습 니까?사용자 정의 스타일 파일 에 이런 스타일 을 추가 할 수 있 습 니 다.

body .ivu-modal .ivu-select-dropdown{
 position: fixed !important;
}
이렇게 해서 상술 한 문 제 를 해결 하 였 다.왜 body 를 추가 하면 스타일 의 우선 순 위 를 바 꿀 수 있 는 지 에 대해 서 는 제 블 로그 관련 글(how2js.cn)을 참조 할 수 있 습 니 다.
이상 의 이 편 은 iview 의 select 드 롭 다운 상자 옵션 이 잘못 되 었 다 는 문 제 를 완벽 하 게 해결 하 는 것 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 하 시 기 를 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기