<p>Vuetify/Vue 2에서 3으로 업그레이드하려고 합니다. 저는 프런트엔드 개발자가 아니며, 기능을 유지하기 위해 일부 오래된 코드를 업그레이드하는 일을 담당하고 있습니다. 안타깝게도 마이그레이션 가이드에서는 일부 기본적인 CSS 지식을 가정하고 제거된 모든 항목을 수정하는 방법에 대한 예를 제공하지 않습니다. </p>
<p>다음 코드 조각에서 <code>rounded</code> 및 <code>플랫</code>을 마이그레이션하는 방법을 알아내려고 합니다. </p>
<pre class="brush:php;toolbar:false;"><v-select
class="mr-2 필터-사용자 정의-입력"
Slot="prepend-inner";
v-model="필드"
:items="필드"
menu-props="자동"
label="필드"
세부정보 숨기기
하나의 선
밀도="콤팩트"
둥근
평평한
테마="어두운"
//></pre>
<p>및 <code>.v-application</code>(필요한 경우): </p>
<pre class="brush:php;toolbar:false;"><style lang="scss"
.v-application--is-ltr .v-list-item__icon:첫 번째 하위,
.v-application--is-ltr .mr {
오른쪽 여백: 10px;
}
<p>안타깝게도 이전 가이드에서 이에 대한 유일한 제안은 다음과 같습니다. </p>
<li><code>rounded</code> 속성이 제거되었습니다. 메뉴 콘텐츠 요소에 둥근 모서리 CSS 클래스를 적용하세요. 예: <code>.rounded-te</code></li>
이전에 <code>.v-application p</code> 또는 <code>.v-application ul</code>로 포함되었던 전역 스타일은 더 이상 포함되지 않습니다. <code>p</code>에 여백을 추가하거나 <code>ul</code> 및 <code>ol</code>에 왼쪽 패딩을 추가해야 하는 경우 루트 구성 요소의 수동 설정에 이를 추가하세요. <code><style></code> </li>
</ul>
<p><code>rounded</code>에 대한 위의 지침은 <code>rounded</code>를 <code>.rounded-te</code>로 대체합니다. 다른 유형의 컨트롤에서 언급됨). </p>
<p>플랫이 일부 다른 컨트롤에서 제거되고 "단일 변형 속성"으로 대체되었다고 표시되지만 <code>플랫<을 <code>variant="플랫"</code> /code> 구문 오류가 발생합니다.</p>
<p>감사합니다! </p>
<p>(원래 이 질문을 여기에 올렸는데 누군가가 여러 질문으로 나누자고 제안했습니다.)</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
계속
rounded和flat을 사용할 수 있습니다. 기본 VField 구성 요소로 방금 이동되었습니다.내 생각에는 v2 선택이 프레임 없이 종료될 것 같습니다. 이 경우
rounded不会有任何可见效果。在 v3 中添加variant="solo"和flat동일한 효과를 얻으려면(playground 참조)에 관해서는
v-application--is-ltr类，它在 V3 中被称为v-locale--is-ltr.애플리케이션에 따라 여전히 필요한 경우 이는 사용자 정의 규칙입니다. 커스텀이 사용되었는지 확인해보세요
mr类，以及列表中第一个图标的边距是什么样的（我认为现在通过 prepend slot 设置列表图标，所以类应该是.v-list-item__prepend .v-icon)