vue 및 Element-UI 계단식 드롭 다운 박스 사용자 정의 스타일

요소 UI 계단식 드롭 다운 박스 사용자 정의 스타일 팁 : 해당 CSS 클래스 이름을 찾고 스타일을 정확하게 수정하십시오. 직접 오버레이 스타일을주의해서 사용하면 깊이 선택기 또는 CSS 변수를 사용하는 것이 좋습니다. 구성 요소 캡슐화를 중단하지 않으면 CSS 변수를 사용하여 스타일을 간접적으로 수정하는 것이 좋습니다. 공식 문서를주의 깊게 읽고 수정 해야하는 CSS 클래스 이름을 찾으십시오. 중요한 강제 스타일을 만나면 요소 -UI 소스 코드를 중요하거나 수정할 수 있습니다 (권장되지 않음).

Vue 및 Element-UI 계단식 풀다운 상자 : 맞춤형 스타일의 예술 및 함정

많은 학생들이 VUE 및 Element-UI를 사용하여 프로젝트를 수행 할 때 계단식 선택기 스타일을 사용자 정의 해야하는 상황을 만나게됩니다. 왜? Element-UI의 기본 스타일, 음 ... 말하는 방법, 때로는 디자인 초안의 미학을 준수하지 않거나 전체 프로젝트 스타일과 호환되지 않습니다. 따라서 커스텀 스타일이 평범 해졌습니다. 그러나이 겉보기에 간단한 작전은 숨겨진 미스터리가 내부에 숨겨져 있으며, 조심하지 않으면 구덩이에 빠질 것입니다.

계단식 선택기 자체에 대해 먼저 이야기 해 봅시다. 본질적으로 다층 중첩 선택 구조이며 각 레벨에는 선택이 포함되며 사용자는 값을 마무리하기 위해 선택합니다. Element-UI는 이미 사용하기 편리한이 구성 요소를 이미 포장했지만 외관을 깊이 사용자 정의하려면 내부 메커니즘에 대한 심층적 인 이해가 필요합니다.

Element-UI의 캐스케이드 선택기 인 그 스타일은 실제로 여러 CSS 클래스 이름의 결합 된 동작의 결과입니다. 스타일을 정확하게 수정하려면이 클래스 이름을 찾아야합니다. 비밀번호 잠금을 잠금 해제하고 열 수있는 올바른 조합을 찾는 것과 같습니다. <el-cascader></el-cascader> 에서 스타일을 덮어 쓰기 위해 style 속성을 직접 사용하면 종종 두 배의 노력으로 결과의 절반이 발생하며 무효 일 수도 있습니다. 왜? Element-UI의 구성 요소는 많은 범위의 CS를 사용하기 때문에 스타일이 전혀 침투하지 않을 수 있습니다.

올바른 자세는 다음과 같습니다. 깊이 선택기 ( 또는 /deep/ )를 사용하거나 더 권장되는 것은 요소 -UI가 제공하는 CSS 변수 메커니즘을 사용하는 것입니다. 깊이 선택기는 구성 요소의 내부 스타일을 직접 수정할 수 있지만 구성 요소의 캡슐화를 파괴하고 유지하기에 번거 롭습니다. 향후 요소 UI를 업그레이드 할 때 사용자 정의 스타일이 유효하지 않을 수 있습니다. 그래서 저는 개인적으로 CSS 변수를 사용하는 것을 선호합니다.

예를 들어, 선택한 항목의 배경색과 텍스트 색상을 수정한다고 가정 해 봅시다.

 <code class="css">:root { --el-cascader-selected-bg: #f0f0f0; /* 自定义选中背景色*/ --el-cascader-selected-color: #333; /* 自定义选中文字颜色*/ }</code>

그런 다음이 변수를 구성 요소 또는 글로벌 CSS 파일에 소개하십시오. 요소 -UI의 소스 코드에서 많은 스타일이 이러한 변수에 따라 정의됩니다. 이러한 변수의 값을 수정함으로써 구성 요소의 스타일을 간접적으로 수정하고 구성 요소의 캡슐화를 유지할 수 있습니다.

물론 이것은 빙산의 일각 일뿐입니다. 실제 프로젝트에서는 드롭 다운 메뉴의 너비, 높이, 테두리, 글꼴 등을 수정하고 메뉴 항목의 배열을 조정해야 할 수도 있습니다. 현재 요소 -UI의 공식 문서를 신중하게 읽고 해당 CSS 클래스 이름을 찾은 다음 정확한 수정을해야합니다. 브라우저 개발자 도구를 잘 활용하여 수정 해야하는 CSS 클래스 이름을 신속하게 찾을 수 있습니다.

또한 일반적인 함정은 깊이 선택기 또는 CSS 변수를 사용하더라도 일부 스타일을 수정할 수 없다는 것을 알 수 있습니다. 이것은 일반적으로 요소 -UI가 스타일을 지정하도록 내부적으로 사용하기 때문입니다. 이 상황에 직면하면 더 무자비한 속임수 만 선택할 수 있습니다. 커버! 중요하거나 요소 -UI의 소스 코드를 직접 수정할 수 있습니다 (요소 -UI의 소스 코드를 잘 알고 업그레이드 후 재 모시 할 준비가되지 않는 한 권장되지 않습니다).

마지막으로, 약간의 경험을 공유하겠습니다. 스타일을 수정하기 전에 코드를 백업하거나 새 지점을 만들어야합니다. 이런 식으로, 잘못 수정하더라도 쉽게 뒤로 물러날 수 있습니다. 코드 수정은 가역적이지만 시간은 돌이킬 수 없습니다. 코드를 작성하고 열심히 일하면 불필요한 문제를 피할 수 있습니다. 맞춤형 스타일은 예술 작품을 조각하는 것과 같습니다. 그들은 인내와 세심성과 구성 요소의 내부 메커니즘에 대한 깊은 이해가 필요합니다. 성공을 달성하기 위해 서두르지 마십시오. 더 많은 것을 시도하고 더 많은 연습을하면이 기술을 마스터 할 수 있습니다.

위 내용은 vue 및 Element-UI 계단식 드롭 다운 박스 사용자 정의 스타일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!