Menghijrahkan Vuetify 2 kepada 3: Gantikan gaya .v-application/bulat/rata yang dialih keluar

Question

Saya cuba menaik taraf daripada Vuetify/Vue 2 kepada 3. Saya bukan pembangun bahagian hadapan, hanya bertanggungjawab untuk menaik taraf beberapa kod lama untuk memastikan ia berfungsi. Malangnya, panduan migrasi nampaknya menganggap beberapa pengetahuan CSS asas dan tidak memberikan contoh cara untuk membetulkan semua yang telah dialih keluar.

Saya cuba memikirkan cara untuk memindahkan bulat dan rata

<v-select
        class="mr-2 filter-custom-input"
        slot="prepend-inner"
        v-model="medan"
        :items="medan"
        menu-props="auto"
        label="Lapangan"
        sembunyikan butiran
        satu baris
        ketumpatan="padat"
        bulat
        rata
        tema="gelap"
      /></pra>
<p>dan <kod>.v-application</code> (jika perlu) dalam coretan kod ini: </p>
<pre class="brush:php;toolbar:false;"><style lang="scss"
.v-application--is-ltr .v-list-item__icon:anak pertama,
.v-application--is-ltr .mr {
  jidar kanan: 10px;
}
</style>

Malangnya, satu-satunya cadangan untuk ini pada panduan migrasi ialah:

Atribut
• bulat Sila gunakan kelas CSS penjuru bulat pada elemen kandungan menu. Contohnya: .rounded-te
• Gaya global yang sebelum ini disertakan sebagai .v-aplikasi p atau .v-aplikasi ul Jika anda perlu menambah jidar pada p, atau tambahkan padding kiri pada ul dan ol, tambahkan ini dalam set komponen akar secara manual dalam teg

Answer 1

Anda masih boleh menggunakan rounded 和 flat, mereka baru sahaja dialihkan ke komponen VField yang mendasari.

Saya rasa pilihan v2 anda akan berakhir tanpa sebarang bingkai, dalam hal ini rounded 不会有任何可见效果。在 v3 中添加 variant="solo" 和 flat untuk mendapatkan kesan yang sama (lihat taman permainan)

---

Adapun v-application--is-ltr 类，它在 V3 中被称为 v-locale--is-ltr.

Jika anda masih memerlukannya bergantung pada permohonan anda, ini adalah peraturan tersuai. Semak sama ada yang tersuai digunakan mr 类，以及列表中第一个图标的边距是什么样的（我认为现在通过 prepend slot 设置列表图标，所以类应该是 .v-list-item__prepend .v-icon)