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

Nach der erzwungenen Aktualisierung kann die untere Navigation von Vuetify den aktiven Status nicht entfernen, wenn sich die Route ?ndert
P粉513318114
P粉513318114 2024-03-25 14:57:16
0
1
908

In meiner App habe ich eine untere Navigationskomponente wie diese eingerichtet:

<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>

Das funktioniert gro?artig und ich kann damit wie erwartet in meiner App navigieren. Wenn in der unteren Navigation auf eine Schaltfl?che geklickt wird, wird der Schaltfl?chenstatus aktualisiert und zeigt ?aktiv“ (Prim?rfarbe) an.

Meine Route ist wie folgt definiert:

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' },
],

Ich habe auch eine zus?tzliche Route /settings, die nicht Teil der unteren Navigation ist, sondern in der Titelleiste meiner App wie folgt definiert ist:

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

Da die Schaltfl?che ?Einstellungen“/der Routing-Link nicht Teil der unteren Navigation ist, wird beim Klicken auf die Schaltfl?che ?Einstellungen“ der aktive Status der unteren Navigationsschaltfl?che deaktiviert, was richtig ist, da sie nicht Teil der unteren Navigation ist.

Hier tritt das seltsame Verhalten auf:

Wenn ich mich in einer in der unteren Navigation definierten Route befinde und die Aktualisierung der Seite erzwinge, erfolgt die Aktualisierung an der richtigen Stelle. Wenn ich von hier aus auf die Schaltfl?che ?Einstellungen“ klicke, zeigt der Router die Einstellungen an, aber der alte Status der unteren Navigation wird immer noch als aktiv angezeigt. Dies geschieht nur bei erzwungener Aktualisierung. Wenn ich die untere Navigationsroute ausw?hle und dann zu den Einstellungen gehe, wird der aktive Status von der unteren Navigationsschaltfl?che entfernt.

Bei meinen Recherchen dachte ich, dass dies ein Problem mit der exactEigenschaft des Routing-Links sein k?nnte, aber es scheint keinen Unterschied zu machen.

Au?erdem habe ich einen Haltepunkt festgelegt, um die untere Navigationsleiste in kleinen Gr??en und darunter anzuzeigen. Wenn ich das Fenster dehne, um die untere Navigationsleiste auszublenden, und dann das Fenster verkleinere, um es erneut anzuzeigen, hat die Komponente beim erneuten Anzeigen den richtigen Status.

P粉513318114
P粉513318114

Antworte allen(1)
P粉052724364

重新加載頁(yè)面并不是重現(xiàn)這個(gè)錯(cuò)誤的唯一方法。導(dǎo)航組中的按鈕似乎可以通過(guò)VItemGroup邏輯和VBtn的routable mixin進(jìn)行切換。您可以通過(guò)點(diǎn)擊任何導(dǎo)航按鈕兩次并在此之后路由到/settings來(lái)復(fù)制該問(wèn)題。如果您檢查處于該狀態(tài)的元素,則活動(dòng)類(lèi)v-btn--active會(huì)重復(fù)3次。路由到另一個(gè)頁(yè)面只會(huì)刪除v-btn--active v-btn--active的精確匹配項(xiàng),而第三個(gè)則會(huì)保留在元素上。

顯然,這不是預(yù)期的行為。

但解決方法非常簡(jiǎn)單。將每個(gè)按鈕的active-class屬性設(shè)置為除'v-btn--active'之外的任何值即可解決問(wèn)題。

所以,例如:

<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>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage