遷移Vuetify 2到3：取代移除的樣式 .v-application / rounded / flat
P粉258083432
2023-09-01 22:27:02
<p>我正在嘗試從Vuetify/Vue 2升級到3。我不是前端開發人員，只是負責升級一些舊程式碼以保持功能正常。不幸的是，遷移指南似乎假設了一定的基本CSS知識，並沒有提供如何修復所有被刪除內容的範例。 </p>
<p>我正在努力弄清楚如何遷移以下程式碼片段中的<code>rounded</code>和<code>flat</code>:</p>
<pre class="brush:php;toolbar:false;"><v-select
class="mr-2 filter-custom-input"
slot="prepend-inner"
v-model="field"
:items="fields"
menu-props="auto"
label="Field"
hide-details
single-line
density="compact"
rounded
flat
theme="dark"
/></pre>
<p>以及這個程式碼片段中的<code>.v-application</code>（如果需要的話）：</p>
<pre class="brush:php;toolbar:false;"><style lang="scss" scoped>
.v-application--is-ltr .v-list-item__icon:first-child,
.v-application--is-ltr .mr {
margin-right: 10px;
}
</style></pre>
<p>不幸的是，遷移指南上對這些的唯一建議是：</p>
<ul>
<li><code>rounded</code>屬性已移除。請將圓角的CSS類別套用於選單內容元素。例如：<code>.rounded-te</code></li>
<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>它說flat已從其他一些控制項中刪除，並被「單一變體屬性」替換，但嘗試用<code>variant="flat"</code>替換<code>flat< /code>給我一個文法錯誤。</p>
<p>謝謝！ </p>
<p>（我最初在這裡提問，有人建議我將其拆分為多個問題）</p>
你仍然可以使用
rounded和flat，它們只是移動到了底層的 VField 元件。我認為你的 v2 select 最終會沒有任何框架，這種情況下
rounded不會有任何可見效果。在 v3 中加入variant="solo"和flat以獲得相同的效果（請參閱 playground）至於
v-application--is-ltr類，它在 V3 中稱為v-locale--is-ltr。如果你仍然需要它取決於你的應用程序，這些都是自訂規則。檢查是否使用了自定義的
mr類，以及列表中第一個圖標的邊距是什麼樣的（我認為現在透過prepend slot 設定列表圖標，所以類應該是.v -list-item__prepend .v-icon）