Vue Global Context

Το Slidev κάνει inject ένα global Vue context $slidev για προηγμένες συνθήκες ή χειριστήρια πλοήγησης.

Χρήση

Μπορείτε να έχετε πρόσβαση σε αυτό οπουδήποτε στα markdown και Vue template, με την σύνταξη "Mustache".

<!-- slides.md -->

# Σελίδα 1

Η τρέχουσα σελίδα είναι: {{ $slidev.nav.currentPage }}

<!-- Foo.vue -->

<template>
  <div>Τίτλος: {{ $slidev.configs.title }}</div>
  <button @click="$slidev.nav.next">Επόμενη Σελίδα</button>
</template>

Ιδιότητες

$clicks

Το $clicks κρατάει έναν αριθμό κλικ στην τρέχουσα διαφάνεια. Μπορεί να χρησιμοποιηθεί υπό όρους για την εμφάνιση διαφορετικού περιεχομένου ανάλογα με τα κλικ.

<div v-if="$clicks > 3">Περιεχόμενο</div>

$page

Το $page περιέχει τον αριθμό της τρέχουσας σελίδας, με 1-δείκτη.

Σελίδα: {{ $page }}

Είναι ενεργή η τρέχουσα σελίδα: {{ $page === $slidev.nav.currentPage }}

$renderContext

Το $renderContext περιέχει το τρέχον render context, μπορεί να είναι slide, overview, presenter ή previewNext.

<div v-if="$renderContext === 'slide'">
  Αυτό το περιεχόμενο θα εμφανίζεται μόνο στην προβολή διαφανειών
</div>

$slidev.nav

Ένα αντιδραστικό object που περιέχει τις ιδιότητες και τα χειριστήρια της πλοήγησης των διαφανειών. Για παραδείγματα:

$slidev.nav.next() // πήγαινετε στο επόμενο βήμα

$slidev.nav.nextSlide() // πήγαινετε στην επόμενη διαφάνεια (παραλείψετε ν-clicks)

$slidev.nav.go(10) // πήγαινετε στην διαφάνεια #10

$slidev.nav.currentPage // αριθμός τρέχουσας διαφάνειας

$slidev.nav.currentLayout // id τρέχοντος layout

Για περισσότερες διαθέσιμες ιδιότητες, ανατρέξτε στις εξαγωγές του nav.ts.

Σημείωση: Το $slidev.nav.clicks είναι μια global κατάσταση, ενώ το $clicks είναι τοπικό για κάθε διαφάνεια. Συνιστάται η χρήση του $$clicks αντί του $slidev.nav.clicks για να αποφύγετε την αλλαγή των κλικ που ενεργοποιούνται κατά τις μεταβάσεις σελίδων.

$slidev.configs

Ένα αντιδραστικό object κρατάει τις αναλυμένες ρυθμίσεις στο πρώτο frontmatter του slides.md σας. Για παράδειγμα

---
title: Το πρώτο μου Slidev!
---

{{ $slidev.configs.title }} // 'Το πρώτο μου Slidev!'

$slidev.themeConfigs

Ένα αντιδραστικό object κρατάει τις αναλυμένες ρυθμίσεις του θέματος.

---
title: Το πρώτο μου Slidev!
themeConfig:
  primary: # 213435
---

{{ $slidev.themeConfigs.primary }} // '#213435'

$nav

Διαθέσιμο από v0.43.0

Μια συντομογραφία του $slidev.nav.

Χρήση Composable

Διαθέσιμο από v0.48.0

Context

Αν θέλετε να λάβετε το context προγραμματιστικά (επίσης με type-safety), μπορείτε να κάνετε import composables από το @slidev/client:

<script setup>
import { onSlideEnter, onSlideLeave, useDarkMode, useIsSlideActive, useNav, useSlideContext } from '@slidev/client'

const { $slidev } = useSlideContext()
const { currentPage, currentLayout, currentSlideRoute } = useNav()
const { isDark } = useDarkMode()
const isActive = useIsSlideActive()
onSlideEnter(() => { /* ... */ })
onSlideLeave(() => { /* ... */ })
// ...
</script>

NOTE

Προηγουμένως, μπορεί να είδατε τη χρήση της εισαγωγής εμφωλευμένων modules όπως import { isDark } from '@slidev/client/logic/dark.ts', αυτό είναι ΔΕΝ ΣΥΝΙΣΤΑΤΑΤΑΙ καθώς είναι εσωτερικές λεπτομέρειες υλοποίησης και μπορεί να χαλάσουν στο μέλλον. Προσπαθήστε πάντα να χρησιμοποιείτε το δημόσιο API από το @slidev/client όποτε είναι δυνατόν.

Τύποι

Αν θέλετε να λάβετε έναν τύπο προγραμματιστικά, μπορείτε να εισαγάγετε τύπους όπως το TocItem από το @slidev/types:

<script setup>
import type { TocItem } from '@slidev/types'

function tocFunc(tree: TocItem[]): TocItem[] {
  // ...
}
</script>