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.