亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Selepas muat semula paksa, navigasi bawah Vuetify tidak boleh mengalih keluar keadaan aktif apabila laluan berubah
P粉513318114
P粉513318114 2024-03-25 14:57:16
0
1
907

Dalam apl saya, saya telah menyediakan komponen navigasi bawah seperti ini:

<v-bottom-navigation
  v-else
  background-color="overlay"
  grow
  app
  color="primary"
>
  <v-btn
    v-for="(route, key) in routes"
    ref="link"
    :key="'route' + key"
    :to="route.to"
    min-width="48"
    class="px-0"
  >
    <span v-if="$vuetify.breakpoint.smAndUp">{{ route.name }}</span>
    <v-icon>{{ route.icon }}</v-icon>
  </v-btn>
</v-bottom-navigation>

Ini berfungsi hebat dan saya boleh menggunakannya untuk menavigasi dalam apl saya seperti yang diharapkan. Apabila butang dalam navigasi bahagian bawah diklik, status butang dikemas kini untuk menunjukkan aktif (warna utama).

Laluan saya ditakrifkan seperti berikut:

routes: [
  { icon: mdiViewDashboard, name: 'Dashboard', to: '/dashboard' },
  { icon: mdiCart, name: 'Orders', to: '/orders' },
  { icon: mdiDolly, name: 'Receiving', to: '/receiving' },
  { icon: mdiClipboardText, name: 'Tasks', to: '/tasks' },
  { icon: mdiTruck, name: 'Deliveries', to: '/deliveries' },
],

Saya juga mempunyai laluan tambahan /settings yang bukan sebahagian daripada navigasi bawah tetapi ditakrifkan pada bar tajuk aplikasi saya seperti ini:

<v-btn
  aria-label="Settings"
  icon
  to="/settings"
>
  <v-icon>{{ mdiCog }}</v-icon>
</v-btn>

Memandangkan butang tetapan/pautan penghalaan bukan sebahagian daripada navigasi bawah, apabila saya mengklik pada butang tetapan, ia melumpuhkan keadaan aktif butang navigasi bawah, yang betul kerana ia bukan sebahagian daripada navigasi bawah.

Di sinilah tingkah laku pelik berlaku:

Jika saya berada dalam laluan yang ditentukan dalam navigasi bahagian bawah dan saya paksa muat semula halaman, saya muat semula ke lokasi yang betul. Dari sini, jika saya mengklik butang tetapan, penghala menunjukkan tetapan, tetapi status lama navigasi bawah masih menunjukkan sebagai aktif. Ini hanya berlaku pada muat semula paksa, jika saya memilih laluan navigasi bawah dan kemudian pergi ke tetapan, ia mengalih keluar keadaan aktif dari butang navigasi bawah.

Dalam penyelidikan saya, saya fikir ini mungkin masalah dengan exactsifat pautan penghalaan, tetapi ia nampaknya tidak memberi sebarang perbezaan.

Selain itu, saya menetapkan titik putus untuk menunjukkan bar navigasi bawah dalam saiz kecil dan ke bawah, jika saya meregangkan tetingkap untuk menyembunyikan bar navigasi bawah dan kemudian mengecilkan tetingkap untuk dipaparkan semula, apabila komponen ditunjukkan semula ia mempunyai keadaan yang betul .

P粉513318114
P粉513318114

membalas semua(1)
P粉052724364

Memuat semula halaman bukanlah satu-satunya cara untuk menghasilkan semula ralat ini. Butang dalam kumpulan navigasi kelihatan melepasi padanan tepat VItemGroup邏輯和VBtn的routable mixin進(jìn)行切換。您可以通過點(diǎn)擊任何導(dǎo)航按鈕兩次并在此之后路由到/settings來復(fù)制該問題。如果您檢查處于該狀態(tài)的元素,則活動類v-btn--active會重復(fù)3次。路由到另一個頁面只會刪除v-btn--active v-btn--active, manakala butang ketiga kekal pada elemen.

Jelas sekali, tingkah laku ini tidak dijangka.

Tetapi penyelesaiannya sangat mudah. Meletakkan setiap butang pada sebarang nilai selain daripada active-class屬性設(shè)置為除'v-btn--active' akan berjaya.

Jadi, sebagai contoh:

<v-btn
    v-for="(route, key) in routes"
    ref="link"
    :key="'route' + key"
    :to="route.to"
    min-width="48"
    class="px-0"
    active-class=""
>
    <span v-if="$vuetify.breakpoint.smAndUp">{{ route.name }} </span>
    <v-icon>{{ route.icon }}</v-icon>
</v-btn>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan