ksenia_mikhailova
/
demo-int-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

back forward btn

This commit is contained in:
aarizona 2024-08-29 13:13:37 +03:00
parent 7c2b82732f
commit 8d8beea7f1
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
front/src/assets/nav.scss
View File

@ -29,6 +29,11 @@ $white: #fff;
color: $white;
cursor: pointer;
&.disabled {
opacity: 0.5;
pointer-events: none;
}
a,
a[href].router-link-active {
color: $white;

21
front/src/components/nav.vue
View File

@ -1,13 +1,14 @@
<script setup lang="ts">
import { Icon } from '@iconify/vue';
import { useRoute } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import { useItem } from '../stores/item';
const route = useRoute()
const router = useRouter()
const page = useItem()
// console.log(route.name)
console.log(router)
</script>
<template>
<div class="nav">
@ -22,16 +23,20 @@ const page = useItem()
<i-mdi:video-3d />
</RouterLink>
</span>
<span class="nav-icon" style="font-size: 1.375rem;">
<span class="nav-icon" style="font-size: 1.375rem;" v-if="false">
<i-mdi:vector-arrange-below />
</span>
</div>
<div class="nav-group">
<span class="nav-icon">
<i-mdi:arrow-left />
<span class="nav-icon" :class="[{ disabled: router.options.history.state.back == null }]">
<RouterLink :to="router.options.history.state.back" @click.prevent="router.back()">
<i-mdi:arrow-left />
</RouterLink>
</span>
<span class="nav-icon">
<i-mdi:arrow-right />
<span class="nav-icon" :class="[{ disabled: router.options.history.state.forward == null }]">
<RouterLink :to="router.options.history.state.forward" @click.prevent="router.forward()">
<i-mdi:arrow-right />
</RouterLink>
</span>
</div>
<div class="nav-content">